:root { --bg:#f4f4f4; --text:#111; --muted:#555; --link:#0645ad; --border:#111; --u:4px; 
  --tab-article:#ffde00; /* yellow */
  --tab-feedback:#26a0d8; /* cyan */
  --tab-history:#ff0090; /* magenta */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body.ux-brutal{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; font-size:15px; line-height:1.5}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}

/* Centered landing layout */
.landing{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:25vh}

/* Brutalist logo */
.swatch-logo{display:grid;justify-items:center;gap:18px;padding:0;background:transparent;border:none;box-shadow:none}
.logo-brutal{margin-top:0}
.logo-brutal .mark{display:block;width:260px;height:auto}

.container{max-width:1200px;margin:0 auto;padding:0 calc(var(--u)*4)}
.page-grid{padding-top:calc(var(--u)*4)}

/* Header with brand + swatches + brutal tabs */
.site-header{background:#fff;border-bottom:2px solid var(--border)}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u)*3) 0}
.brand a{font-weight:800;font-size:22px;color:#083da2;letter-spacing:.3px}
.swatches{display:flex;gap:6px}
.sw{display:inline-block;width:22px;height:14px;border:2px solid #000; position:relative}
.sw::after{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  font-size:12px; line-height:1; color:#000; /* always visible label */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  user-select:text; white-space:pre; pointer-events:none;}
.sw-r::after{content:'g'}
.sw-g::after{content:'e'}
.sw-b::after{content:'n'}
.sw-c::after{content:'e'}
.sw-y::after{content:'r'}
.sw-m::after{content:'a'}
.sw-k::after{content:'l'}
.sw-gray::after{content:'e'}
.sw-olive::after{content:'r'}
.sw-teal::after{content:'g'}
.sw-blue::after{content:'o'}
.sw-purple::after{content:'d'}
.sw-crimson::after{content:'i'}
.sw-brown::after{content:'c'}
.sw-gold::after{content:'s'}
.sw-r{background:#e21}
.sw-g{background:#12a050}
.sw-b{background:#1a40c8}
.sw-c{background:#26a0d8}
.sw-y{background:#ffde00}
.sw-m{background:#ff0090}
.sw-k{background:#000}
.sw-gray{background:#cfcfcf}
.sw-olive{background:#6a8f3a}
.sw-teal{background:#00897b}
.sw-blue{background:#1a55d8}
.sw-purple{background:#6a3aa0}
.sw-crimson{background:#b31b34}
.sw-brown{background:#a65a36}
.sw-gold{background:#ffb400}

.nav-row{display:flex;gap:calc(var(--u)*4);align-items:center;padding:calc(var(--u)*2) 0}
.tab{padding:8px 18px;border:2px solid #000;background:#fff;box-shadow:4px 4px 0 #000; font-weight:700}
.tab:active{transform:translate(2px,2px); box-shadow:2px 2px 0 #000}
.search{margin-left:auto;display:flex;gap:8px;align-items:center}
.search input{padding:8px 10px;border:2px solid #000}
.search button{padding:8px 12px;border:2px solid #000;background:#eee;box-shadow:2px 2px 0 #000}

/* Small right-aligned Optimization Log chip */
.opt-log-link{margin-left:auto; border:2px solid #000; background:#eee; color:var(--muted); font-size:12px; padding:4px 8px; box-shadow:2px 2px 0 #000; font-weight:700}
.opt-log-link:hover{text-decoration:none; background:#e5e5e5; color:#333}
.opt-log-link:active{transform:translate(1px,1px); box-shadow:1px 1px 0 #000}

.site-footer{color:var(--muted);font-size:12px;padding:calc(var(--u)*6) 0;border-top:2px solid var(--border)}
.footer-row{display:flex;justify-content:space-between;align-items:center}
.opt-log-link-bottom{color:var(--muted); font-size:12px}
.opt-log-link-bottom:hover{color:#333; text-decoration:underline}
.disclaimer{margin:0}

.home{padding:calc(var(--u)*6) 0}
.home h1{margin:0 0 calc(var(--u)*2);font-size:22px;font-weight:800}
.home-search{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.recent{margin-top:24px}
.recent h2{margin-bottom:8px}
.muted{color:var(--muted);font-size:13px;margin-left:6px}

.global-explorer{margin-top:28px}
.map-panel-inline{border:2px solid #000;background:#fff;box-shadow:4px 4px 0 #000}
.map-panel-inline .map-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-bottom:2px solid #000}
.map-panel-inline .map-controls{display:flex;gap:6px;align-items:center}
.map-panel-inline .map-btn{border:2px solid #000;background:#fff;padding:4px 8px;font-weight:700}
.map-panel-inline .map-subhead{padding:6px 8px;border-bottom:1px solid #000}
#ge-canvas{display:block;width:100%;height:320px; touch-action: none}

/* Article */
.article-layout{display:grid;grid-template-columns:1fr;gap:calc(var(--u)*6)}
.article{background:#fff;padding:calc(var(--u)*4);border:2px solid #000;box-shadow:6px 6px 0 #000}
.article h1{font-weight:800;font-size:24px;letter-spacing:.2px;margin:0 0 8px}
.article .updated{color:var(--muted);font-size:12px;margin-bottom:calc(var(--u)*2)}
.article .lead{font-size:16px}

/* Floating Map panel (util) */
.map-panel{position:fixed; right:16px; bottom:16px; width:360px; border:2px solid #000; background:#fff; box-shadow:6px 6px 0 #000; z-index:50}
.map-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-bottom:2px solid #000}
.map-controls{display:flex;gap:6px;align-items:center}
.map-toggle{border:2px solid #000;background:#eee;font-weight:700;width:26px;height:26px;line-height:20px}
.map-btn{border:2px solid #000;background:#fff;padding:4px 8px;font-weight:700}
#map-canvas{display:block;width:100%;height:220px}
.map-panel #map-canvas{ touch-action: none }

@media (max-width: 640px){
  #ge-canvas{ height: 240px }
}
.map-panel.collapsed #map-canvas{display:none}

.article-grid{display:grid;grid-template-columns:1fr 360px;gap:calc(var(--u)*6);align-items:start}
.infobox{border:2px solid #000;background:#fff;padding:calc(var(--u)*2);box-shadow:4px 4px 0 #000}
.infobox-table{width:100%;border-collapse:collapse}
.infobox-table th,.infobox-table td{border-bottom:1px solid #000;text-align:left;vertical-align:top;padding:6px 8px}
.infobox-table th{width:38%;font-weight:800;color:#000}

.toc{border:2px solid #000;background:#fff;padding:calc(var(--u)*2);margin:calc(var(--u)*4) 0}
.toc-title{font-weight:800;margin-bottom:6px;color:#000}

.references{margin-top:calc(var(--u)*6)}
.references h2{margin-top:calc(var(--u)*6)}

.toolbar{margin-top:calc(var(--u)*4)}
.button{display:inline-block;border:2px solid #000;background:#fff;padding:8px 12px;box-shadow:3px 3px 0 #000}

@media (max-width:1100px){
  .article-grid{grid-template-columns:1fr}
  .map-panel{right:8px; bottom:8px; width: calc(100% - 16px);}
}

/* Subtabs + Feedback */
.subtabs{display:flex;gap:8px;margin-bottom:8px}
.subtab{border:2px solid #000;background:#fff;padding:6px 10px;box-shadow:3px 3px 0 #000;font-weight:700}
.subtab.is-active{background:#ffe;}
.subtab[data-kind="article"].is-active{background:var(--tab-article)}
.subtab[data-kind="feedback"].is-active{background:var(--tab-feedback)}
.subtab[data-kind="history"].is-active{background:var(--tab-history); color:#fff}
.hidden{display:none}
.feedback{margin-top:16px}
.feedback-form{display:grid;gap:8px;margin-bottom:12px}
.feedback-form textarea{border:2px solid #000;padding:8px;}
.feedback-list{display:grid;gap:10px}
.fb-item{border:2px solid #000;padding:8px;background:#fff}
.fb-actions{display:flex;gap:8px}
.small{border:2px solid #000;background:#eee;padding:4px 8px;font-size:12px}

/* History */
.history{margin-top:16px}
.history-list{display:grid;gap:8px}
.hist-item{border:2px solid #000;padding:8px;background:#fff;display:grid;gap:4px}
.hist-meta{font-size:12px;color:var(--muted)}
.hist-actions a{font-weight:700}