/* Anno 1800 Layout Planner. Base reset, then the app styles. */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: toolbar on top, building catalogue left, the planning grid in the middle, plan and supply panel right.
   Type and shapes come from ../theme.css. The ground, grid and building colours are functional and read by app.js
   for the canvas, so they stay literal hex values. */
:root{
  --bg:#ffffff; --panel:#f5f6f8; --well:#eceef2; --ink:#14161a; --muted:#5d636d; --line:#e2e5ea;
  --accent:#8A5A00; --accent-bg:#f6ead0; --on-accent:#ffffff; --ok:#1E7A4C; --bad:#B3261E;
  --ground:#f3f4f6; --grid:#e3e6ea; --grid2:#cdd2d9; --edge:#3b4048;
  --c-res:#E8C98F; --c-pub:#9FC3E8; --c-inst:#EFA39A; --c-infl:#C9A6E0; --c-power:#F0D264;
  --c-prod:#B9BEC6; --c-farm:#A9D08E; --c-field:#D5E8B0; --c-logi:#8FD0C8; --c-cult:#F2B6D2;
  --c-dirt:#B79B7A; --c-paved:#8C97A0; --c-other:#D3D6D9;
  --display:var(--wl-font); --ui:var(--wl-font);
}
:root:not([data-theme="light"]){
  --bg:#101114; --panel:#1a1c21; --well:#23262c; --ink:#f2f3f5; --muted:#9aa0a9; --line:#2c3038;
  --accent:#E0AE4A; --accent-bg:#3a2f17; --on-accent:#101114; --ok:#4CC38A; --bad:#FF7A6E;
  --ground:#14161a; --grid:#1d2025; --grid2:#2a2e35; --edge:#08090b;
  --c-res:#7A5A26; --c-pub:#2F5E8E; --c-inst:#8E3A33; --c-infl:#6A4391; --c-power:#7D6A12;
  --c-prod:#4A525C; --c-farm:#3F6B2C; --c-field:#33491F; --c-logi:#23706A; --c-cult:#8A3C63;
  --c-dirt:#5E4A34; --c-paved:#55616B; --c-other:#3B4650; color-scheme:dark }

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.4 var(--ui);padding-inline:16px;padding-block:12px;box-sizing:border-box;overflow:hidden;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;display:grid;grid-template-columns:272px minmax(0,1fr) 312px;grid-template-rows:auto minmax(0,1fr);gap:12px}
.bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.bar h1{font:750 19px/1.1 var(--display);margin:0;letter-spacing:-.03em;white-space:nowrap}
.tools{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.grp{display:flex;gap:2px;align-items:center;background:var(--panel);border-radius:var(--wl-radius-sm);padding:3px}
.btn{border:0;background:var(--panel);border-radius:8px;padding:6px 11px;cursor:pointer;line-height:1.2;white-space:nowrap;font-weight:500;transition:background-color .12s,color .12s}
.grp .btn{background:transparent}
.btn:hover,.grp .btn:hover{background:var(--well)}
.btn[aria-pressed="true"],.grp .btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{background:transparent}
.btn kbd{font:500 11px/1 var(--ui);color:inherit;opacity:.55;margin-left:6px}
select.btn{padding-right:6px}
.grp select.btn{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.lbl{color:var(--muted);padding-inline:6px 2px;font-weight:500}

.tabs{display:none;gap:2px;background:var(--well);border-radius:var(--wl-radius-sm);padding:3px}
.tabs .btn{flex:1 1 0;background:transparent}
.tabs .btn:hover{background:var(--line)}
.tabs .btn[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:var(--wl-shadow)}
.palette,.info{background:var(--panel);border-radius:var(--wl-radius-md);min-height:0;overflow:auto;overscroll-behavior:contain}
.stage{position:relative;border-radius:var(--wl-radius-md);overflow:hidden;min-height:0;min-width:0;background:var(--ground);box-shadow:inset 0 0 0 1px var(--line)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.hud{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:var(--bg);border-radius:var(--wl-pill);padding:5px 12px;font-size:13px;font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:var(--wl-shadow)}
.toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);max-width:min(460px,calc(100% - 24px));background:var(--ink);color:var(--bg);border-radius:var(--wl-radius-sm);padding:8px 14px;font-weight:500;text-align:center;box-shadow:var(--wl-shadow-lift)}

/* catalogue */
.pal-head{position:sticky;top:0;background:var(--panel);padding:12px 12px 10px;display:grid;gap:10px;z-index:1}
#q{width:100%;border:0;background:var(--bg);border-radius:var(--wl-radius-sm);padding:8px 12px;box-shadow:inset 0 0 0 1px var(--line)}
#q:focus{outline:2px solid var(--accent);outline-offset:0}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{border:0;background:var(--well);border-radius:var(--wl-pill);padding:4px 11px;cursor:pointer;font-size:13px;font-weight:500}
.chip:hover{background:var(--line)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
details{margin:0 6px;border-top:1px solid var(--line)}
summary{cursor:pointer;padding:10px 6px;font:650 14px/1.2 var(--display);letter-spacing:-.01em;display:flex;justify-content:space-between;gap:8px;list-style-position:inside;border-radius:8px}
summary:hover{background:var(--well)}
summary span{font:400 12px var(--ui);color:var(--muted)}
.it{display:grid;grid-template-columns:14px minmax(0,1fr);gap:0 10px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:6px 8px;cursor:pointer;border-radius:8px}
.it:hover{background:var(--well)}
.it.on{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}
.sw{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18);grid-row:span 2}
.nm{font-weight:500;overflow-wrap:anywhere}
.mt{grid-column:2;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.k-res{background:var(--c-res)}.k-pub{background:var(--c-pub)}.k-inst{background:var(--c-inst)}.k-infl{background:var(--c-infl)}
.k-power{background:var(--c-power)}.k-prod{background:var(--c-prod)}.k-farm{background:var(--c-farm)}.k-field{background:var(--c-field)}
.k-logi{background:var(--c-logi)}.k-cult{background:var(--c-cult)}.k-dirt{background:var(--c-dirt)}.k-paved{background:var(--c-paved)}.k-other{background:var(--c-other)}

/* plan and supply panel */
.info section{margin:0 6px;padding:14px 8px 16px;border-top:1px solid var(--line);display:grid;gap:10px}
.info section:first-child{border-top:0}
.info h2{font:700 15px/1.2 var(--display);letter-spacing:-.02em;margin:0}
.info h3{font:650 14px/1.25 var(--ui);letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.info p{margin:0}
.hint{color:var(--muted)}
.hint.pad{padding:12px}
.row{display:flex;flex-wrap:wrap;gap:6px}
#info .btn,.lay .btn,dialog .btn{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
#info .btn:hover,.lay .btn:hover,dialog .btn:hover{background:var(--well)}
#info .btn[aria-pressed="true"]{background:var(--accent);box-shadow:none}
.cov{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:stretch}
.covb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;text-align:left;border:0;background:var(--bg);border-radius:var(--wl-radius-sm);padding:7px 10px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.covb:hover{background:var(--well)}
.covb[aria-pressed="true"]{background:var(--accent-bg);box-shadow:inset 0 0 0 1.5px var(--accent)}
.covb em{font-style:normal;color:var(--muted)}
.covb .cv{font-variant-numeric:tabular-nums;font-weight:600}
.covb .cv.full{color:var(--ok)} .covb .cv.part{color:var(--bad)}
.meter{grid-column:1/-1;height:5px;background:var(--well);border-radius:var(--wl-pill);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:inherit} .meter i.full{background:var(--ok)}
dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin:0}
dt{color:var(--muted)} dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
dd.warn{color:var(--bad)}
.keys{color:var(--muted);font-size:12px;line-height:1.6}
.keys b{color:var(--ink);font-weight:600}

dialog{background:var(--bg);color:var(--ink);border:0;border-radius:var(--wl-radius);padding:24px;width:min(560px,calc(100% - 32px));box-shadow:var(--wl-shadow-lift)}
dialog::backdrop{background:rgb(16 17 20 / .4);backdrop-filter:blur(2px)}
dialog h2{font:750 20px/1.2 var(--display);letter-spacing:-.03em;margin:0 0 8px}
dialog p{margin:0 0 14px;color:var(--muted)}
dialog textarea{width:100%;min-height:150px;border:0;background:var(--panel);border-radius:var(--wl-radius-md);padding:10px 12px;font:12px/1.45 var(--wl-mono);resize:vertical;margin-bottom:12px}
dialog textarea:focus{outline:2px solid var(--accent);outline-offset:0}
dialog .row .btn{padding:8px 14px}
#io-close{margin-left:auto}
#io-msg{margin:12px 0 0;min-height:1.35em;color:var(--ink)}

@media (max-width:860px){
  .bar .home,.bar h1{order:-2} .bar .wl-theme{order:-1;margin-left:auto}  /* keep the light/dark button on the title row */
  body{padding-block:10px}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1.25fr) auto minmax(0,1fr);gap:8px}
  .bar h1{font-size:17px}
  .stage{grid-row:2}
  .tabs{display:flex;grid-row:3}
  .palette,.info{grid-row:4}
  .app[data-panel="palette"] .info{display:none}
  .app[data-panel="info"] .palette{display:none}
  .btn kbd{display:none}
}
/* mode switches */
.seg{display:flex;gap:2px;background:var(--well);border-radius:var(--wl-radius-sm);padding:3px}
.seg .btn{flex:1 1 0;min-width:0;text-align:center;padding-inline:4px;background:transparent}
.seg .btn:hover{background:var(--line)}
.seg .btn[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:var(--wl-shadow)}
.info-tabs{position:sticky;top:0;z-index:1;margin:12px 12px 4px;box-shadow:0 0 0 12px var(--panel)}
/* layouts */
.lay{margin:0 6px;padding:12px 6px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.lay h3{font:650 14px/1.2 var(--display);letter-spacing:-.01em;margin:0}
.lay p{margin:0;color:var(--muted)}
.lay .row{flex-wrap:nowrap}
.lay select{flex:1 1 0;width:0;min-width:0}
.palette{overflow-x:hidden}
select.full{width:100%;min-width:0}
.num{width:58px;border:0;background:var(--bg);border-radius:6px;padding:3px 6px;text-align:right;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--line)}
.fld{display:grid;gap:4px}
.fld>span{color:var(--muted);font-size:12px;font-weight:500}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
/* goods and production */
.good{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:1px 0;cursor:pointer}
.good input{accent-color:var(--accent)}
.good b{font-weight:500;font-variant-numeric:tabular-nums}
.good.off span{color:var(--muted);text-decoration:line-through}
.sub{font:650 13px/1.2 var(--ui);letter-spacing:-.01em;color:var(--muted);margin:6px 0 0}
.pr{background:var(--bg);border-radius:var(--wl-radius-sm);box-shadow:inset 3px 0 0 var(--bad);padding:7px 10px 7px 13px;display:grid;gap:3px}
.pr.ok{box-shadow:inset 3px 0 0 var(--ok)} .pr.na{box-shadow:inset 3px 0 0 var(--line)}
.pr1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:baseline}
.pr1 .pn{font-weight:600;overflow-wrap:anywhere} .pr1 .pn em{font-style:normal;font-weight:400;color:var(--muted)}
.pr1 .pc{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pr .pc{color:var(--bad)} .pr.ok .pc{color:var(--ok)} .pr.na .pc{color:var(--muted)}
.pr2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.pr2 .num{width:50px;padding:1px 4px}
.tot{border-top:1px solid var(--line);padding-top:6px;font-weight:600}

/* Link back to the site homepage (Weblab), left of the title. */
.home{display:grid;place-items:center;width:34px;height:34px;margin-right:-8px;border-radius:var(--wl-pill);color:var(--muted);background:var(--panel);transition:background-color .12s,color .12s}
.home:hover{background:var(--well);color:var(--ink)}
.home svg{width:17px;height:17px}