/* ATLAS CITY — all styles. Extracted from v16 verbatim. */
:root{
  --bg:#1E1C1A; --panel:#262220; --panel2:#211E1B; --line:rgba(243,242,242,.13);
  --text:#F3F2F2; --muted:#A79C8D; --gold:#E1AD66; --gold2:#EBC28A;
  --teal:#82C0B0; --red:#C45440; --green:#8FB07A; --blue:#7F9EC4; --violet:#9B8AB8;
  --r:6px;
  /* THE BUTTON STANDARD: a text button may grow to fit its label, but never shrinks below this.
     Close buttons (.x) and rows that deliberately fill the card (.pcActs) are exempt.
     Buttons standing ON a list-item row follow the smaller row standard. */
  --btn-min:86px; --btn-min-row:56px;
  /* THE CARD STANDARD: every floating card (city, game card, You) shares one footprint.
     Change these four numbers and every card follows — never size a card by hand. */
  --card-w:400px; --card-top:64px; --card-bottom:76px; --card-edge:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Lora',system-ui,sans-serif;overflow:hidden}
#app{display:grid;grid-template-rows:auto 1fr;height:100vh}

#hud{display:flex;align-items:center;gap:14px;padding:10px 18px;
  background:linear-gradient(180deg,#232019,#1E1C1A);border-bottom:1px solid var(--line);z-index:20}
#logo{position:relative;font-weight:800;font-size:19px;letter-spacing:.5px;display:flex;align-items:center;gap:9px;cursor:pointer;border-radius:6px}
#logo:hover{color:var(--gold)}
#logo:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* the motto: "learn" is a door of its own */
#tagLearn{cursor:pointer;border-radius:4px}
#tagLearn:hover{color:var(--gold)}
#tagLearn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ---- the city card: the whole City tab, floating over the map from the left edge ---- */
#cityCard{display:none;position:fixed;left:var(--card-edge);top:var(--card-top);bottom:var(--card-bottom);width:var(--card-w);z-index:55;
  background:rgba(38,33,28,.88);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.5);
  flex-direction:column;overflow:hidden}
#cityCard.on{display:flex}
#cityCard .bmHead{flex:none}
#ccBody{flex:1;overflow-y:auto;padding:12px 14px}
#ccBody::-webkit-scrollbar{width:7px}
#ccBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
#ccBody .card{background:transparent}
/* ---- registry accordions: one per OWNER, their assets a table ---- */
.regAcc{border:1px solid var(--line);border-radius:8px;margin-bottom:7px;overflow:hidden}
.regHead{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;background:none;
  border:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.regHead:hover{color:var(--gold)}
.regHead.you .regNm{color:var(--gold)}
.regHead .regNm{font-weight:600}
.regHead .pill{margin-left:auto}
.regChev{color:var(--muted);font-size:15px;width:14px;text-align:center}
.regLot{display:flex;align-items:center;gap:10px;width:100%;padding:7px 12px 7px 38px;background:none;
  border:none;border-top:1px solid var(--line);color:var(--muted);font:inherit;font-size:12.5px;
  cursor:pointer;text-align:left}
.regLot:hover{color:var(--gold)}
.regOwnHead{display:flex;align-items:center;gap:9px;padding:7px 12px 6px 24px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:600}
.regOwnHead.you{color:var(--gold)}
.regOwnHead .pill{margin-left:auto}
.regNative{color:var(--muted);font-weight:400}
/* the owner's holdings: asset / lot / value / tax due (the levy lands with the economy) */
.regTable{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.regTable th{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:1.1px;
  text-transform:uppercase;font-weight:500;color:var(--muted);text-align:left;padding:6px 8px 5px}
.regTable td{font-size:12px;padding:6px 8px;border-top:1px solid var(--line)}
.regTable th:first-child,.regTable td:first-child{padding-left:12px}
.regTable th:last-child,.regTable td:last-child{text-align:right;padding-right:12px}
.regTable td.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px}
.regTable td.dim{color:var(--muted)}
.regRow{cursor:pointer}
.regRow:hover td{color:var(--gold)}
/* the asset cell: the build menu's own 3D thumbnail (monogram fallback) beside the name */
.regAsset{display:flex;align-items:center;gap:7px}
.regThumb{width:26px;height:20px;object-fit:cover;border-radius:4px;border:1px solid var(--line);flex:none;background:rgba(243,242,242,.04)}
.regMono{flex:none}
/* a language row is itself the door to the language's card */
.langOpen{cursor:pointer}
.langOpen:hover .langNm{color:var(--gold)}
/* ---- the Learn hub: two institutions, each a big door ---- */
.learnCard{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px;padding:0 0 13px;
  background:none;border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit;
  cursor:pointer;text-align:left;overflow:hidden}
.learnCard:hover{border-color:var(--gold)}
.learnCard:hover .learnGo{color:var(--gold)}
.learnPlate{display:block;border-bottom:1px solid var(--line);background:rgba(243,242,242,.03)}
.learnPlate img{display:block;width:100%;height:auto;aspect-ratio:752/300;object-fit:cover}
.learnPlate.grid{display:grid;grid-template-columns:1fr 1fr}
.learnPlate.grid img{height:auto;aspect-ratio:376/150;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.learnPlate.grid img:nth-child(2n){border-right:none}
.learnPlate.grid img:nth-child(n+3){border-bottom:none}
.learnName{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;padding:2px 14px 0}
.learnSub{font-size:12px;color:var(--muted);line-height:1.55;padding:0 14px;text-wrap:pretty}
.learnMeta{display:flex;gap:14px;flex-wrap:wrap;padding:2px 14px 0;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.learnGo{padding:0 14px;font-size:12px;color:var(--muted)}
.regOwner{margin-left:auto;font-size:11.5px}
.regOwner.you{color:var(--gold)}
#logo .dot{width:10px;height:10px;border-radius:3px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
#logo small{font-weight:400;color:var(--muted);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.res{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap}
.res b{font-family:'IBM Plex Mono',monospace;font-weight:500}
.res small{color:var(--muted);font-weight:400}
#lvlwrap{margin-left:auto;display:flex;align-items:center;gap:10px}
#xpbar{width:120px;height:7px;background:var(--panel);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
#xpfill{height:100%;width:0%;background:linear-gradient(90deg,var(--violet),var(--blue));transition:width .5s}
#clock{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}

#main{display:grid;grid-template-columns:1fr;min-height:0}
#main.full{grid-template-columns:1fr}
#main.full #side{overflow:hidden;border-left:none}
#panelToggle{display:none !important}
#panelToggle-legacy{position:absolute;top:14px;right:14px;z-index:26;display:flex;align-items:center;gap:8px;
  background:rgba(17,26,45,.92);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-weight:700;font-size:13px;padding:10px 15px;border-radius:12px;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.45);transition:.15s}
#panelToggle:hover{border-color:var(--gold);color:var(--gold)}
#quickTabs{position:absolute;top:60px;right:14px;z-index:26;display:none;flex-direction:column;gap:6px}
#main.full #quickTabs.open{display:flex}
.qt{display:flex;align-items:center;gap:8px;background:rgba(17,26,45,.94);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-weight:600;font-size:13px;padding:10px 14px;border-radius:11px;cursor:pointer;text-align:left;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.qt:hover{border-color:var(--gold);color:var(--gold)}
#cityWrap{position:relative;overflow:hidden;background:#000}
#city{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
#city:active{cursor:grabbing}
/* Google-maps mirror: content panels keep to the LEFT, map furniture to the RIGHT.
   The profile surfaces (avatar menu, You drawer) stay on the right, under the avatar. */
#mapCtrls{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:22}
.ctrlGroup{display:flex;flex-direction:column;background:rgba(17,26,45,.88);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.ctrlBtn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;
  color:var(--text);font-size:19px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s}
.ctrlBtn:hover{background:rgba(245,184,76,.14);color:var(--gold)}
.ctrlBtn:active{background:rgba(245,184,76,.25)}
.ctrlBtn+.ctrlBtn{border-top:1px solid var(--line)}
/* toggle buttons: icon over a small label, so they read as the same system as the icons above */
.ctrlBtn.tog{flex-direction:column;gap:2px;height:46px}
.ctrlBtn.tog svg{width:15px;height:15px}
.ctrlBtn.tog .lbl{font-size:8px;letter-spacing:.7px;font-weight:600;line-height:1}
.ctrlBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#compassNeedle{transition:none}
@media(pointer:coarse){.ctrlBtn{width:48px;height:48px}}
/* the drone's options, opened horizontally off the DRONE control */
#droneRow{position:absolute;display:none;right:calc(100% + 8px);flex-direction:row;align-items:stretch;
  background:rgba(17,26,45,.88);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.45)}
#droneRow.on{display:flex}
#droneRow .ctrlBtn{width:auto;padding:0 13px}
#droneRow .ctrlBtn+.ctrlBtn{border-top:none;border-left:1px solid var(--line)}
#droneRow .ctrlBtn .lbl{font-size:9px;letter-spacing:1px}
#droneRow .ctrlBtn.on{color:var(--gold);background:rgba(245,184,76,.18)}
/* cards drag from their header; the head is the handle, its buttons still click */
.dragCard>.bmHead{cursor:grab}
.dragCard.dragging{transition:none!important}
.dragCard.dragging>.bmHead{cursor:grabbing}
#miniWrap{position:absolute;right:14px;top:14px;z-index:24;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.5);cursor:crosshair;background:#20301c}
#miniWrap:hover{border-color:var(--gold)}
#miniMap{display:block;width:158px;height:158px}
#miniLabel{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:9.5px;letter-spacing:1px;
  text-transform:uppercase;color:rgba(233,238,249,.85);background:rgba(10,16,30,.55);padding:2px 0;pointer-events:none}
#citChat{position:absolute;inset:0;z-index:40;display:none;background:var(--panel2)}
#citChat.open{display:flex;flex-direction:column}
#citCard{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;background:var(--panel2);position:relative;
  border:none;border-radius:0;box-shadow:none;overflow:hidden}
/* The header must survive a narrow panel: the name block takes the first row with the controls that
   must always be reachable (aA · KEY · ✕), and the two tabs drop to their own row when there is not
   room beside it. Nothing is ever pushed outside the clipped card. */
#citHead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:13px 16px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
#citHead>div:not([id]){flex:1 1 120px;min-width:0}
#citHead #citName{overflow-wrap:anywhere}
/* The first row is always the person and the controls, centred; the tab strip always has its own
   row beneath. Nothing here may key off the VIEWPORT — the chat card is narrower than the window,
   so a viewport media query would let the tabs sit inline and push ✕ off the row. */
#citHead{align-items:center}
#citTabs{order:9;flex:0 0 100%;margin-top:2px;margin-bottom:-13px}   /* the underline sits ON the header's hairline */
#citClose{flex:none;order:1;align-self:center;margin-left:auto}
/* the name is a way in to the person, not a label */
#citName{background:none;border:none;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
#citName:hover{color:var(--gold)}

#citAvatarWrap{position:relative;width:42px;height:42px;flex:none}
#citAvatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid var(--gold);transition:border-color .3s}
#citLive{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid transparent;opacity:0;transition:opacity .3s}
@keyframes citspin{to{transform:rotate(360deg)}}
#citHead[data-live="on"] #citAvatar{border-color:var(--green)}            /* reachable: quiet green ring */
#citHead[data-live="wait"] #citAvatar{border-color:var(--green)}          /* talking to the model: orbit */
#citHead[data-live="wait"] #citLive{opacity:1;border-top-color:var(--green);border-right-color:var(--green);animation:citspin 1.1s linear infinite}
#citHead[data-live="off"] #citAvatar{border-color:var(--muted)}
#citLiveTxt{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:3px}
#citLiveTxt i{width:6px;height:6px;border-radius:50%;background:var(--muted);font-style:normal}
#citHead[data-live="on"] #citLiveTxt{color:var(--green)}
#citHead[data-live="on"] #citLiveTxt i{background:var(--green);box-shadow:0 0 7px var(--green)}
#citHead[data-live="wait"] #citLiveTxt{color:var(--green)}
#citHead[data-live="wait"] #citLiveTxt i{background:var(--green);box-shadow:0 0 7px var(--green)}
#citName{font-weight:700;font-size:15px}
#citJob{font-size:11.5px;color:var(--muted)}
#citClose{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:15px;line-height:1;padding:4px 9px;cursor:pointer;font-family:inherit}
#citClose:hover{border-color:var(--gold);color:var(--gold)}
#citLog{flex:1 1 0;min-height:104px;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:9px}
#citLog::-webkit-scrollbar{width:7px}#citLog::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
#citForm{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);position:relative}
#citInputWrap{position:relative;display:flex;flex:1;min-width:0}
#citInput{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-family:inherit;font-size:13.5px;padding:10px 12px;padding-inline-end:40px;outline:none;min-width:0}
#citInput:focus{border-color:var(--gold)}
/* the slash menu without the keyboard — sits inside the box, on the trailing edge in either direction */
#citSlash{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--gold);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;line-height:1;cursor:pointer;padding:0;
  transition:border-color .12s,background .12s}
#citSlash:hover{border-color:var(--gold);background:rgba(225,173,102,.10)}
#citSlash.on{border-color:var(--gold);background:rgba(225,173,102,.16)}
#citCoach{}
.msg .coach{display:block;margin-top:8px;padding-top:7px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.5;color:var(--gold2)}
.msg .coach b{font-weight:600;color:var(--gold)}
.msg .coach .fix{display:block;margin-top:3px;unicode-bidi:plaintext;text-align:start;color:var(--text);line-height:1.75}
/* one row of suggestions, each as wide as its own phrase; the ROW scrolls sideways */
#citSugg{display:flex;gap:6px;padding:6px 12px 8px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#citSugg::-webkit-scrollbar{height:0}
#citSugg:empty{display:none}
.sugg{display:flex;flex-direction:column;gap:1px;text-align:start;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:inherit;
  padding:5px 8px 6px;cursor:pointer;transition:.15s;flex:0 0 auto;max-width:none}
.sugg:hover{border-color:var(--gold)}
/* the phrase stays on ONE line — Arabic row above, reading row below — never wrapped */
.sugg .n{font-size:13px;unicode-bidi:plaintext;white-space:nowrap}
.sugg .n .wline{white-space:nowrap}
.sugg .g{font-family:Lora,serif;font-size:10px;color:var(--muted);line-height:1.2;white-space:nowrap}
#citTask{display:none;align-items:baseline;gap:8px;flex-wrap:wrap;margin:8px 12px 0;
  border:1px solid var(--gold);border-radius:6px;padding:6px 10px;background:rgba(225,173,102,.06)}
#citTask.on{display:flex}
#citTask .h{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
#citTask .g{font-size:13.5px}
#citTask .steps{display:flex;gap:10px;margin-left:auto;font-size:10.5px;color:var(--muted)}
#citTask .steps b{font-weight:400}
#citTask .steps .done{color:var(--green)}
#leaveScene{position:absolute;top:14px;left:14px;z-index:30;display:none;background:rgba(30,28,26,.92);
  border:1px solid var(--gold);color:var(--gold);font-family:inherit;font-size:12.5px;letter-spacing:.5px;
  padding:9px 16px;border-radius:6px;cursor:pointer}
#leaveScene.on{display:block}
/* a just-revealed dictionary entry announces itself once */
.dictItem.flash{animation:dictFlash 1.5s ease}
@keyframes dictFlash{0%{background:rgba(225,173,102,.26);box-shadow:0 0 0 1px var(--gold)}100%{background:transparent;box-shadow:none}}
/* the venue's visitable corners, beside "Back to the city" */
#sceneSpots{position:absolute;top:14px;left:170px;z-index:30;display:none;gap:6px}
#sceneSpots.on{display:flex}
#sceneSpots .spot{background:rgba(30,28,26,.92);border:1px solid var(--line);color:var(--muted);
  font-family:inherit;font-size:12px;letter-spacing:.4px;padding:9px 13px;border-radius:6px;cursor:pointer}
#sceneSpots .spot:hover{border-color:var(--gold);color:var(--gold)}
body.inScene #miniWrap{display:none}
#slashMenu{display:none;position:absolute;left:12px;right:12px;bottom:58px;z-index:30;background:var(--panel);
  border:1px solid var(--gold);border-radius:6px;overflow:hidden;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
#slashMenu.on{display:block}
.slashItem{display:flex;gap:10px;align-items:baseline;padding:9px 12px;cursor:pointer}
.slashItem:hover,.slashItem.sel{background:rgba(225,173,102,.10)}
.slashItem b{color:var(--gold);font-weight:600;font-size:13px;font-family:'IBM Plex Mono',monospace}
.slashItem span{font-size:12px;color:var(--muted)}
/* the word blocks live in a tray that floats over the chat log, never over the composer */
#citBlocks{display:none;flex:0 0 auto;margin:0 8px 6px;z-index:42;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 -14px 44px rgba(0,0,0,.45);padding:0 10px 6px;max-height:44%;overflow-y:auto;overscroll-behavior:contain}
#citBlocks.on{display:block}
#citBlocks::-webkit-scrollbar{width:7px}#citBlocks::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.blkHead{position:sticky;top:0;background:var(--panel);display:flex;align-items:center;gap:8px;
  padding:7px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:2px}
.blkHead .t{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.blkHead .x{margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:inherit;font-size:11px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.blkHead .x:hover{border-color:var(--gold);color:var(--gold)}
body.blocksOpen #citSugg,body.blocksOpen #citXP{display:none}   /* the blocks replace the chips while composing */
.blockRow{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;align-items:center}
.blockRow .lab{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);width:100%;margin-bottom:1px}
/* Amiri and its 1.9 leading exist for the harakat — they belong to Arabic script ONLY.
   Every other language sets in Lora at normal leading (see #citCard[data-script]). */
#citTask .g,.sugg .n,.blk,#citInput{font-family:Lora,serif;line-height:1.5}
#citCard[data-script="arabic"] #citTask .g,#citCard[data-script="arabic"] .sugg .n,
#citCard[data-script="arabic"] .blk,#citCard[data-script="arabic"] #citInput{font-family:'Amiri',Lora,serif;line-height:1.9}
.blk{background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--text);
  font-size:13.5px;padding:4px 9px 5px;cursor:pointer;unicode-bidi:plaintext}
.blk:hover{border-color:var(--gold)}
.blk small{display:block;font-family:Lora,serif;font-size:9.5px;color:var(--muted);line-height:1.25;margin-top:1px}
#blocksBar{display:flex;gap:6px;align-items:center;margin:0 0 0 8px}
#blocksBar button{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:inherit;font-size:10.5px;padding:4px 8px;cursor:pointer;white-space:nowrap}
#blocksBar button:hover{border-color:var(--gold);color:var(--gold)}
#citXP{font-size:10.5px;color:var(--teal);padding:0 14px 10px;text-align:center}
/* the map hint: a popover off the ? map control (bottom-right), not a permanent bar.
   Shown once per session on boot; retired by the first drag or 14s; recalled by the button. */
#cityHint{display:none;position:absolute;right:64px;bottom:14px;max-width:300px;z-index:26;
  background:rgba(38,33,28,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);padding:9px 14px;border-radius:10px;
  font-size:12.5px;line-height:1.6;color:var(--muted);pointer-events:none;text-align:right}
#cityHint.on{display:block}
#cHelp.on{border-color:var(--gold);color:var(--gold)}
#toastZone{display:none}   /* retired: events go to the journal (Menu ▸ Events), never over the map */
.toast{background:rgba(17,26,45,.95);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:10px 16px;border-radius:10px;font-size:13.5px;animation:tin .3s ease, tout .4s ease 3.6s forwards;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast.good{border-left-color:var(--green)}.toast.bad{border-left-color:var(--red)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
@keyframes tout{to{opacity:0;transform:translateY(-8px)}}

#buildMenu{position:absolute;z-index:25;background:rgba(30,28,26,.98);border:1px solid var(--line);border-radius:var(--r);
  padding:0;width:344px;display:none;box-shadow:0 16px 50px rgba(0,0,0,.6);overflow:hidden}
.bmHead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.bmHead .t{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600}
.bmHead .lot{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:1px}
.bmHead .x{margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:inherit;font-size:15px;line-height:1;padding:4px 9px;cursor:pointer;white-space:nowrap;flex:none}
.bmHead .x:hover{border-color:var(--gold);color:var(--gold)}
/* the developer switch: on, it reads as live rather than as chrome */
.bmHead .x.on{border-color:var(--gold);color:var(--gold);background:rgba(225,173,102,.12)}
.bmHead .x+.x{margin-left:0}
.bItem.devItem{background:rgba(225,173,102,.05)}
.bItem .nm .req{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1px;color:var(--gold);
  border:1px solid var(--line);border-radius:4px;padding:1px 4px;vertical-align:1px}
.bmTabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.bmTab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:inherit;
  font-size:11px;letter-spacing:.2px;padding:6px 7px 7px;cursor:pointer;white-space:nowrap}
.bmTab:hover{color:var(--text)}
.bmTab.on{color:var(--gold);border-bottom-color:var(--gold)}
.bmBody{padding:8px;max-height:252px;overflow-y:auto;overscroll-behavior:contain}
/* the real cap is set per open from the viewport height */
.bmBody::-webkit-scrollbar{width:7px}.bmBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.bmFoot{padding:7px 12px 9px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted)}
#buildMenu::-webkit-scrollbar{width:7px}#buildMenu::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
#buildMenu h4{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:4px 6px 8px}
.bItem{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.bItem:hover{background:var(--panel2);border-color:var(--line)}
.bItem.locked{opacity:.45;cursor:not-allowed}
.bItem .em{font-size:22px;width:30px;text-align:center}
.bItem .nm{font-weight:600;font-size:13.5px}
.bItem .sub{font-size:11.5px;color:var(--muted)}
/* why a row cannot be built, under its own line — never in the cost column, which squeezes the name */
.bItem .sub.why{color:var(--red);font-style:italic;margin-top:2px}
.bItem>div:nth-child(2){min-width:0;flex:1}
.bItem .cost{margin-left:auto;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--gold2);white-space:nowrap;flex:none}
/* the item's own model, photographed: a plate, matted like everything else in this system */
.bItem .bShot{width:58px;height:44px;flex:none;object-fit:contain;border:1px solid var(--line);
  border-radius:6px;background:rgba(243,242,242,.045)}
/* ---- the build menu's three views: categories, the things in one, and a card for one thing ---- */
.bmHead .bmBack{margin-left:0;margin-right:2px;font-size:15px;line-height:1;padding:3px 9px}
.bmHead .lot{display:block;margin-top:1px}
.bmCats{display:flex;flex-direction:column;gap:2px;padding:4px}
.bmCat{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 8px;
  background:none;border:1px solid transparent;border-radius:10px;color:inherit;font:inherit;cursor:pointer}
.bmCat:hover{background:var(--panel2);border-color:var(--line)}
.bmCat:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bmCat .em{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);border:1px solid var(--line);
  border-radius:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none}
.bmCat .nm{display:block;font-weight:600;font-size:13.5px}
.bmCat .sub{display:block;font-size:11.5px;color:var(--muted)}
.bmCat .go{margin-left:auto;color:var(--gold2);font-size:16px;line-height:1}
.bmCard{display:flex;flex-direction:column;gap:9px;padding:10px 12px 12px}
/* the pinned action foot: cost, why not, and Build — outside the scrolling body */
.bmAct{display:flex;flex-direction:column;gap:7px;flex:none;
  padding:9px 12px 11px;border-top:1px solid var(--line);background:var(--panel2)}
.bmShot{width:100%;height:132px;object-fit:contain;border:1px solid var(--line);border-radius:8px;
  background:rgba(243,242,242,.045)}
.bmShot.glyph{display:flex;align-items:center;justify-content:center;height:96px;
  font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--gold)}
.bmName{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--gold);line-height:1.2}
.bmAbout{font-size:12.5px;line-height:1.6;color:var(--text);text-wrap:pretty}
.bmStats{display:flex;flex-wrap:wrap;gap:6px}
/* the choice a card leaves you: lanes, or which way the corner turns */
.bmOpts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bmOpts .lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bmOpts .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bmOpts .seg-opt{background:none;border:none;border-inline-start:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:11.5px;padding:5px 10px;cursor:pointer}
.bmOpts .seg-opt:first-child{border-inline-start:none}
.bmOpts .seg-opt:hover:not([disabled]){background:rgba(225,173,102,.10);color:var(--text)}
.bmOpts .seg-opt.on{background:rgba(225,173,102,.16);color:var(--gold)}
.bmOpts .seg-opt[disabled]{opacity:.4;cursor:not-allowed}
.bmOpts .seg-opt:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.bmStat{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.bmStat b{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold2);font-weight:500;letter-spacing:0}
.bmPrice{display:flex;align-items:baseline;gap:8px}
.bmPrice .lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bmPrice .amt{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--gold)}
.bmWhy{font-size:11.5px;color:var(--red);font-style:italic}
.bmBuild{width:100%;padding:8px}
.bmBuild:disabled{opacity:.45;cursor:not-allowed}
.bItem .cost .req{color:var(--red);font-family:'Lora'}

#side,#meDrawer{display:none;position:fixed;right:var(--card-edge);top:var(--card-top);bottom:var(--card-bottom);width:var(--card-w);z-index:54;
  background:rgba(38,33,28,.9);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.5);
  flex-direction:column;min-height:0;overflow:hidden}
/* game cards mirror to the left, with the city card; only the profile drawer keeps the right */
#side{right:auto;left:var(--card-edge)}
/* both content cards open at once: the game card slides right of the city card, never over it */
#cityCard.on ~ #side.on:not([style*="left"]){left:calc(var(--card-edge) * 2 + var(--card-w))}
#side.on,#meDrawer.on{display:flex}
#side .bmHead{flex:none}
/* the shared card-header shape: title over subtitle, Close × at the end */
.bmHead .ghT{display:flex;flex-direction:column;gap:1px;min-width:0}
.bmHead .ghSub{font-size:11.5px;color:var(--muted)}
/* ---- the bottom bar (spec: atlas-city-orientation-and-bottom-bar.md §4): one bar, one item ---- */
#dock{position:fixed;left:0;right:0;bottom:58px;z-index:53;display:flex;justify-content:center;pointer-events:none}
#dock.hidden{display:none}
#dockPanel{pointer-events:auto;position:relative;width:min(403px,65vw);display:flex;align-items:center;gap:10px;
  background:rgba(30,28,26,.95);border:1px solid rgba(243,242,242,.16);border-radius:14px;padding:10px 12px;
  box-shadow:0 8px 28px rgba(0,0,0,.5)}
#dockPanel.open{border-radius:0 0 14px 14px}
.bbAva{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:15px;border:1px solid var(--line);color:var(--muted)}
.bbAva[data-k="cit"]{background:#caa27e;border:none;color:#241f1a}
.bbAva[data-k="walk"]{border-color:rgba(143,176,122,.55);color:#8FB07A}
.bbAva[data-k="lesson"]{border-color:rgba(130,192,176,.55);color:#82C0B0}
.bbAva[data-k="guide"]{border-color:rgba(225,173,102,.55);color:var(--gold)}
.bbAva.sm{width:26px;height:26px;font-size:12px}
.bbTask{flex:1;min-width:0;background:none;border:none;color:inherit;text-align:left;cursor:pointer;padding:0;font-family:inherit}
.bbText{display:block;font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbSub{display:block;font-size:11px;color:var(--muted)}.bbSub[hidden]{display:none}
.bbProg{display:block;height:5px;margin-top:5px;border-radius:99px;background:rgba(243,242,242,.12);overflow:hidden}
.bbProg i{display:block;height:100%;background:var(--gold)}.bbProg[hidden]{display:none}
.bbChev{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px;flex:none}
.bbChev.on,.bbChev:hover{color:var(--gold)}
.bbGo{background:none;border:1px solid var(--gold);color:var(--gold);border-radius:9px;padding:6px 18px;
  font:600 13px 'Lora',serif;cursor:pointer;flex:none;white-space:nowrap}
.bbGo:hover{background:rgba(225,173,102,.12)}
.bbGo:focus-visible,.bbAsk:focus-visible,.bbChev:focus-visible,.bbTask:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bbAsk{width:34px;height:34px;flex:none;background:none;border:1px solid var(--line);border-radius:9px;
  color:var(--gold);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.bbAsk:hover{border-color:var(--gold)}
/* the live task list grows UPWARD from a stationary bar; the bar and its buttons do not move */
.bbList{position:absolute;left:-1px;right:-1px;bottom:calc(100% - 1px);background:rgba(30,28,26,.96);
  border:1px solid var(--line);border-bottom:none;border-radius:14px 14px 0 0;padding:6px 8px;
  display:flex;flex-direction:column;box-shadow:0 -10px 28px rgba(0,0,0,.35)}
.bbList[hidden]{display:none}   /* the hidden attribute must beat display:flex */
.bbRow{display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--text);cursor:pointer;
  padding:8px 6px;font:400 13.5px 'Lora',serif;text-align:left;border-bottom:1px solid rgba(243,242,242,.08)}
.bbRow:last-child{border-bottom:none}
.bbRow:hover .bbRowText{color:var(--gold)}
.bbRow:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.bbRowText{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbRowMin{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);flex:none}
#dockMenuWrap{position:relative;display:flex;flex-shrink:0}
#dockMenuBtn{width:34px;height:34px;background:none;border:1px solid var(--line);color:var(--text);border-radius:9px;
  padding:0;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
#dockMenuBtn:hover,#dockMenuBtn.on{border-color:var(--gold);color:var(--gold)}
#dockMenuBtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ---- the drone camera: REC live state + the viewer card (DRONE-CAMERA.md) ---- */
#drRec.rec{border-color:var(--red);color:var(--red)}
#drRec.rec .lbl{color:var(--red);font-family:'IBM Plex Mono',monospace}
#mediaCard{display:none;position:fixed;left:14px;bottom:160px;width:360px;z-index:56;
  background:rgba(38,33,28,.96);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 48px rgba(0,0,0,.5);overflow:hidden;
  /* growable: the browser's own corner handle; the media scales with the card */
  resize:both;min-width:300px;min-height:280px;max-width:min(88vw,1200px);max-height:84vh}
#mediaCard.on{display:flex;flex-direction:column}
#mediaCard .bmHead,#mcTabs,#mcActs{flex:none}
#mcTabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line)}
#mcBody{background:#141210;min-height:120px;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
#mcBody img,#mcBody video{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.mcEmpty{font-size:12px;color:var(--muted);padding:34px 20px;text-align:center}
#mcActs{display:flex;align-items:center;gap:8px;padding:10px 12px}
#mcActs .mcWhen{flex:1;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.8px;color:var(--muted)}
#mcActs .btn[disabled]{opacity:.45;pointer-events:none}
/* the share row: YouTube-style targets under the Share button */
#mcShareRow{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px}
#mcShareRow[hidden]{display:none}
.mcT{background:none;border:1px solid var(--line);color:var(--text);border-radius:999px;
  padding:5px 13px;font:400 11.5px 'Lora',serif;cursor:pointer;white-space:nowrap}
.mcT:hover{border-color:var(--gold);color:var(--gold)}
.mcT:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* The menu is a stack of BUTTONS floating above the bar's right end — the stack's right edge is
   flush with the BAR's edge (the wrap sits 12px inside the padding), and the lowest button starts
   a little above the bar. They fade in bottom-up and out in reverse; the stagger is --dly. */
#dockMenu{display:flex;position:absolute;right:-12px;bottom:calc(100% + 20px);min-width:130px;
  flex-direction:column-reverse;gap:8px;align-items:stretch;pointer-events:none}
#dockMenu .dmItem{background:rgba(30,28,26,.96);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:9px 18px;font:600 13px 'Lora',serif;letter-spacing:.3px;text-align:center;
  cursor:pointer;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;transform:translateY(10px);visibility:hidden;
  transition:opacity .4s ease var(--dly,0s),transform .4s ease var(--dly,0s),
    visibility .4s var(--dly,0s),border-color .15s,color .15s}
#dockMenu.on .dmItem{opacity:1;transform:none;visibility:visible;pointer-events:auto}
#dockMenu .dmItem:hover{border-color:var(--gold);color:var(--gold)}
#dockMenu .dmItem.on{border-color:var(--gold);color:var(--gold)}
#dockMenu .dmItem:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* the unread-events counter riding the logo's shoulder (Events lives on the city menu) */
#evBadge{position:absolute;top:-9px;right:-14px;z-index:2;min-width:19px;height:19px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:999px;
  background:var(--bg);color:var(--gold);font:600 9.5px 'IBM Plex Mono',monospace;pointer-events:none}
/* ---- the events journal (Menu ▸ Events) ---- */
/* the filter row: stroke-not-fill chips; the count rides each label in Plex Mono */
.evFilters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.evF{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:inherit;font-size:10.5px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.evF:hover{border-color:var(--gold);color:var(--gold)}
.evF.on{border-color:var(--gold);color:var(--gold)}
.evList{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.evRow{border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:8px;padding:9px 12px}
.evRow.good{border-left-color:var(--green)}
.evRow.bad{border-left-color:var(--red)}
.evMsg{font-size:13px;line-height:1.5}
.evExtra{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:3px;text-wrap:pretty}
.evWhen{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.2px;color:var(--muted);margin-top:6px}
.evEmpty{font-size:12px;color:var(--muted);margin-top:8px}
#tabs{display:none}
.tab{flex:1;padding:12px 4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;letter-spacing:.3px}
.tab:hover{color:var(--text)}.tab.on{color:var(--gold);border-bottom-color:var(--gold)}
.pane{display:none;flex:1;overflow-y:auto;padding:16px;min-height:0}
.pane.on{display:block}
.pane::-webkit-scrollbar{width:8px}.pane::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.card h3{font-size:14.5px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.card .tagline{font-size:12px;color:var(--muted);margin-bottom:10px}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.pill.gold{color:var(--gold);border-color:#4a3a17}
.pill.teal{color:var(--teal);border-color:#134a42}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--gold);color:#221a05;border:none;min-width:var(--btn-min);
  font-family:inherit;font-weight:700;font-size:13px;padding:9px 16px;border-radius:10px;cursor:pointer;transition:transform .1s, filter .15s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.btn.teal{background:var(--teal);color:#05221d}
.btn.sm{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}

.qOpt{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:13.5px;padding:11px 13px;border-radius:10px;margin-top:8px;cursor:pointer;transition:.15s}
.qOpt:hover:not(:disabled){border-color:var(--gold)}
.qOpt.right,.qOpt.right:hover{border-color:var(--green);background:rgba(143,176,122,.12)}
.qOpt.wrong,.qOpt.wrong:hover{border-color:var(--red);background:rgba(196,84,64,.12)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px}
.exTools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.exBtn{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-family:inherit;
  font-size:11.5px;padding:5px 11px;cursor:pointer}
.exBtn:hover{border-color:var(--gold);color:var(--gold)}
.exBtn:disabled{opacity:.5;cursor:default}
.exMore{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.65;color:var(--text)}
.exKey{font-size:13.5px;line-height:1.5;color:var(--gold2);margin-bottom:7px}
.exList{margin:0;padding-inline-start:16px}
.exList li{font-size:12.5px;line-height:1.55;margin-top:5px}
.exEx{display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--gold);
  padding:5px 0 5px 10px;margin-top:8px}
.exEx span{font-size:14.5px;line-height:1.75}
.exEx small{font-size:11.5px;color:var(--muted)}
.clzSent{font-size:17px;line-height:2.4;margin:6px 0 4px}
.clzSent .w{white-space:pre-wrap}
.slot{display:inline-block;vertical-align:baseline;min-width:58px;
  padding:1px 9px 3px;border:1px dashed var(--line);border-radius:6px;background:var(--panel2);
  color:var(--text);font-family:inherit;font-size:15.5px;line-height:1.6;text-align:center;cursor:pointer}
.slot.filled{border-style:solid;border-color:var(--gold)}
.slot.right{border-color:var(--green);color:var(--green)}
.slot.wrong{border-color:var(--red);color:var(--red);text-decoration:line-through}
.bldRow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px;min-height:38px;
  padding:8px;border:1px dashed var(--line);border-radius:6px}
.pool{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pool .pb{background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--text);
  font-family:inherit;font-size:15.5px;padding:5px 11px;cursor:pointer}
.pool .pb:hover{border-color:var(--gold)}
.pool .pb.used{opacity:.25;pointer-events:none}
.answerLine{margin-top:10px;font-size:15.5px;line-height:1.9;color:var(--green);display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.answerLine small{display:block;width:100%;font-size:11.5px;color:var(--muted);line-height:1.4}
.kindTag{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.lGoal{display:flex;align-items:center;gap:9px;margin:9px 0 2px}
.lGoal .bar{flex:1;height:5px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lGoal .bar i{display:block;height:100%;background:var(--gold)}
.lGoal .t{font-size:10.5px;letter-spacing:.6px;color:var(--muted);white-space:nowrap}
.exFlow{display:flex;flex-direction:column;gap:5px;margin-top:11px;align-items:flex-start}
.fStep{display:flex;align-items:center;gap:6px}
.fStep .fArr{letter-spacing:1px}
.fBox{border:1px solid var(--gold);color:var(--gold2);border-radius:6px;padding:5px 9px;font-size:11.5px;line-height:1.3}
.fArr{color:var(--muted);font-size:12px}
/* --- People tab --- */
.pRow{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)}
.pRow:last-of-type{border-bottom:none}
.pRow.off{opacity:.5}
.pSwatch{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);position:relative;flex:none}
.pRow .nm{font-size:14px;display:flex;align-items:center;gap:7px}
.pRow .nm em{font-style:normal;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.pRow .sub{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.pActs{display:flex;gap:5px}
.pBtn{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);min-width:var(--btn-min);text-align:center;
  font-family:inherit;font-size:10.5px;padding:5px 8px;cursor:pointer;white-space:nowrap}
.pBtn:hover{border-color:var(--gold);color:var(--gold)}
/* list-item row buttons (cities Edit/Play, connections Edit/Use, agents Edit/Call, citizen-row
   actions, settings-row actions): the row standard — smaller, so the row's text keeps its room */
.ctActs .pBtn,.pRow .pActs .pBtn,.setRow.field .pBtn{min-width:var(--btn-min-row)}
.pBtn.danger:hover{border-color:var(--red);color:var(--red)}
.pForm{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.pForm .wide{grid-column:1/-1}
.pForm label{display:block;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pForm input,.pForm select,.pForm textarea{width:100%;box-sizing:border-box;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;color:var(--text);font-family:inherit;font-size:12.5px;padding:7px 9px}
.pForm textarea{resize:vertical;min-height:52px;line-height:1.5}
.pForm input:focus,.pForm select:focus,.pForm textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.swRow{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0}
.sw.on{outline:2px solid var(--gold);outline-offset:2px}
.blkTabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:6px}
.blkTabs::-webkit-scrollbar{height:0}
.blkTab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:inherit;
  font-size:11px;padding:4px 8px 5px;cursor:pointer;white-space:nowrap}
.blkTab:hover{color:var(--text)}
.blkTab.on{color:var(--gold);border-bottom-color:var(--gold)}
.blkRow{display:flex;gap:6px;overflow-x:auto;padding:0 0 4px;scrollbar-width:thin}
.blkRow::-webkit-scrollbar{height:6px}.blkRow::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.blkRow .blk{flex:0 0 auto}
/* the English coach note reads left-to-right even inside an RTL chat card */
#citCard[dir="rtl"] .msg .coach,#citCard[dir="rtl"] .exList{direction:ltr;text-align:left}
#citCard[dir="rtl"] .msg .coach .fix{text-align:start}
.exAsk{display:flex;gap:8px;margin-top:10px}
.exAsk input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--text);
  font-family:inherit;font-size:12.5px;padding:8px 10px;outline:none;min-width:0}
.exAsk input:focus{border-color:var(--gold)}
.exNew{margin-top:9px;font-size:11.5px;color:var(--green);border:1px solid var(--green);border-radius:6px;padding:6px 10px}
.subjCard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;color:var(--text);font-family:inherit;padding:11px 13px;margin-top:8px;cursor:pointer;transition:.15s}
.subjCard:hover:not(:disabled){border-color:var(--gold)}
.subjCard:disabled{opacity:.45;cursor:default}
.subjCard .mg{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold);width:34px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px}
.subjCard b{font-size:13.5px;display:block;font-weight:600}
.subjCard small{font-size:11px;color:var(--muted)}
.subjCard .go{margin-left:auto;font-size:11px;color:var(--gold);flex:none}
.scoreBar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;
  padding:8px 12px;margin-bottom:12px;background:var(--panel2)}
.scoreBar .s{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.scoreBar .v{font-family:'IBM Plex Mono',monospace;font-size:14px;margin-left:6px}
.scoreBar .v.good{color:var(--green)}.scoreBar .v.gold{color:var(--gold2)}
.qMeta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);margin-bottom:8px}
.qText{font-size:15px;font-weight:600;line-height:1.45}
.qText .foreign{font-size:19px;display:block;margin-top:6px}
.explain{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5;border-top:1px dashed var(--line);padding-top:9px;display:none}

.coinRow{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
.coinRow:last-child{border-bottom:none}
.coinIc{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.coinNm{font-weight:600;font-size:13.5px}.coinTk{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace}
.coinPr{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:13px}
.coinCh{font-size:11.5px;text-align:right;font-family:'IBM Plex Mono',monospace}
.up{color:var(--green)}.down{color:var(--red)}
.spark{width:70px;height:26px}
.tradeBox{display:flex;gap:8px;margin-top:10px}
.tradeBox input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-family:'IBM Plex Mono',monospace;font-size:13px;padding:8px 11px;outline:none;min-width:0}
.tradeBox input:focus{border-color:var(--gold)}
.holdRow{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;font-family:'IBM Plex Mono',monospace}
.allocBar{display:flex;height:9px;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:10px 0 4px}
.allocBar i{display:block;height:100%}
.allocKey{display:flex;flex-wrap:wrap;gap:10px;font-size:10.5px;color:var(--muted);margin-bottom:6px}
.allocKey span{display:flex;align-items:center;gap:5px}
.allocKey b{width:8px;height:8px;border-radius:2px;display:inline-block}
.pfRow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pfRow:last-child{border-bottom:none}
.pfRow .nm{font-size:13px;display:flex;align-items:center;gap:7px}
.pfRow .nm i{width:9px;height:9px;border-radius:2px;flex:none}
.pfRow .u{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:2px}
.pfRow .v{font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:right}
.pfRow .pl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-align:right;margin-top:2px}
.pfSell{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-family:inherit;
  font-size:11px;padding:5px 10px;cursor:pointer}
.pfSell:hover{border-color:var(--gold);color:var(--gold)}
.pfEmpty{font-size:12.5px;color:var(--muted);line-height:1.6;padding:6px 0}
.stratCard{border-left:3px solid var(--teal);padding-left:11px;margin:10px 0}
.stratCard b{font-size:13px}.stratCard p{font-size:12px;color:var(--muted);line-height:1.5;margin-top:3px}

/* one row: flag, name, level button, saved chip — no decorative bar */
.langRow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.langRow .langWho{flex:1 1 auto;min-width:0}
.langRow .btn{white-space:nowrap;flex:none}
.langRow .langLv{white-space:nowrap;margin-left:0}
.langRow:last-child{border:none}
.langFlag{font-size:22px}
.langNm{font-weight:600;font-size:13.5px;white-space:nowrap}
.langLv{margin-left:auto;font-size:11px;color:var(--muted)}
.langBar{width:56px;min-width:40px;height:6px;background:var(--panel2);border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.langFill{height:100%;background:linear-gradient(90deg,var(--teal),var(--blue))}

#chatLog{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.msg{max-width:92%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:#22304f;border:1px solid #2c3d63}
.msg.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}
.msg.ai.thinking{color:var(--muted);font-style:italic}
.msg .native{display:block;unicode-bidi:plaintext;text-align:start;line-height:1.45}
.msg .trans{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35;
  direction:ltr;unicode-bidi:isolate;text-align:left}
.msg .roman{display:block;font-size:11.5px;color:var(--teal);font-style:italic;margin-top:2px;line-height:1.3;
  direction:ltr;unicode-bidi:isolate;text-align:left}
.speakBtn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;margin-left:5px;margin-top:0;vertical-align:middle;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-size:11px;padding:2px 7px;cursor:pointer;font-family:inherit;font-style:normal}
.speakBtn:hover{border-color:var(--gold)}
.speakBtn+.speakBtn{margin-left:2px}
/* ---- word-level reading aid: native word over its transliteration, click to hear ---- */
.wline{display:inline;unicode-bidi:isolate}
/* chips are atomic inline boxes, so the line needs a real direction, not plaintext inference */
.msg .native.wline,.sugg .n .wline,#citTask .g .wline,.answerLine .wline,
.qOpt .wline,.foreign .wline,.exEx .wline,.clzSent .wline,.bldRow .wline,.slot .wline{unicode-bidi:isolate}
.tw{display:inline-flex;flex-direction:column;align-items:center;vertical-align:bottom;
  margin:0 3px 1px 0;padding:1px 3px 2px;border-radius:5px;cursor:pointer;border:1px solid transparent;
  line-height:1.25;transition:background .12s,border-color .12s}
.tw:hover{background:rgba(225,173,102,.09);border-color:rgba(225,173,102,.42)}
.tw.saying{background:rgba(225,173,102,.16);border-color:var(--gold)}
.tw b{font-weight:inherit;font-family:inherit;display:block}
.tw i{display:block;font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.2px;color:var(--teal);margin-top:1px;white-space:nowrap;opacity:.92}
.tw i:empty{display:none}
.wp{opacity:.6;margin-right:2px}
.wq{display:inline-flex;flex-direction:column;align-items:center;vertical-align:bottom;margin:0 3px 1px 0;line-height:1.25}
.wq b{font-weight:inherit;font-family:inherit;display:block}
.wq i{display:block;font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.2px;color:var(--teal);margin-top:1px;white-space:nowrap;opacity:.9}
.wq i:empty{display:none}
body.noTr .wq i{display:none}
body.noTr .tw i{display:none}
body.noTr .msg .roman{display:none}
body.noTr .blk em{display:none}
body.noTr .pb em{display:none}
#citMind{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-size:10.5px;letter-spacing:.5px;padding:2px 7px;cursor:pointer;font-family:inherit}
#citMind{margin-left:auto}
#citMind:hover{border-color:var(--gold);color:var(--text)}
#citMind.on{border-color:var(--gold);color:var(--gold)}
.blk em{display:block;font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;color:var(--teal);line-height:1.2;margin-top:2px}
.blk.saying{border-color:var(--gold)}
.pb.saying,.slot.saying{border-color:var(--gold);background:rgba(225,173,102,.14)}
.pb em{display:block;font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9px;color:var(--teal);line-height:1.2;margin-top:2px}
.qOpt .oT{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.qOpt.right .oT,.qOpt.wrong .oT{opacity:.95}
.msg.done{align-self:center;max-width:94%;text-align:center;font-size:12px;letter-spacing:.4px;
  color:var(--green);background:rgba(143,176,122,.10);border:1px solid var(--green);border-radius:6px;padding:7px 12px}
.msg.act{align-self:center;max-width:94%;text-align:center;font-size:11.5px;font-style:italic;letter-spacing:.3px;
  color:var(--gold2);background:none;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;padding:5px 10px}
#chatForm{display:flex;gap:8px;position:sticky;bottom:0;background:var(--panel2);padding-top:6px}
#chatInput{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-family:inherit;font-size:13.5px;padding:10px 12px;outline:none;min-width:0}
#chatInput:focus{border-color:var(--gold)}
.chipRow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{font-size:11.5px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:5px 11px;cursor:pointer;color:var(--muted)}
.chip:hover{color:var(--gold);border-color:var(--gold)}

.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.stat .v{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600}
.stat .k{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}

@media(max-width:980px){
  #main{grid-template-columns:1fr}
  /* the HUD must never be the widest thing on the page: it wraps, and the app stays viewport-wide */
  #app{width:100vw}
  #hud{flex-wrap:wrap;row-gap:6px;padding:8px 12px}
  #hud .res{padding:4px 9px;font-size:12px}
  #logo small{display:none}
  /* cards float now: the city IS the page, whatever the width */
  #side,#meDrawer{position:fixed;left:8px;right:8px;width:auto;top:56px;bottom:70px}
  /* stacked layout: the side column is as tall as its content, so pin the chat to the viewport
     and cap it — otherwise the log stretches instead of scrolling and new messages fall off-screen */
  #citChat{position:fixed;left:0;right:0;bottom:0;top:auto;height:min(76vh,720px);z-index:60;
    border-top:1px solid var(--line);box-shadow:0 -18px 48px rgba(0,0,0,.55)}
  #citCard{max-height:100%}
  body.inScene #citChat{height:min(72vh,660px)}   /* the task card and chips need room ON TOP of the log */
  body.inScene.blocksOpen #citChat{height:min(82vh,760px)}   /* room for the word blocks */
  body.blocksOpen #citForm{padding:8px 12px 10px}
  /* controls lie along the bottom on narrow screens — ABOVE the dock's band, not behind it */
  #mapCtrls{flex-direction:row;align-items:flex-end;right:14px;left:auto;bottom:110px;max-width:calc(100% - 28px);flex-wrap:wrap;justify-content:flex-end}
  .ctrlGroup{flex-direction:row}
  .ctrlBtn+.ctrlBtn{border-top:none;border-left:1px solid var(--line)}
  .ctrlBtn{width:38px;height:38px}
  #cityHint{display:none}
}

/* ---- 3a overrides: Classical bones, arcade heartbeat ---- */
#logo{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:22px}
#logo .dot{border-radius:50%;box-shadow:none;border:1px solid var(--gold);background:transparent;width:9px;height:9px}
.card h3,.qText,#citName{font-family:'Cormorant Garamond',serif}
.card h3{font-size:17.5px;font-weight:600}
.qText{font-size:16.5px;font-weight:500}
.msg .native{font-family:'Lora',serif;line-height:1.55;font-size:15px}
.msg[data-script="arabic"] .native{font-family:'Amiri','Lora',serif;line-height:1.9}
.btn{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn:hover{background:rgba(225,173,102,.12);filter:none}
.btn.teal{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.btn.teal:hover{background:rgba(130,192,176,.12)}
.btn:disabled{opacity:.35}
.toast{border-radius:6px}
#xpfill{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.langFill{background:linear-gradient(90deg,var(--teal),var(--gold))}
.bItem .em,.langFlag.mono{font-family:'Cormorant Garamond',serif;font-size:14px;font-weight:600;color:var(--gold);border:1px solid var(--line);border-radius:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
#citAvatar{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:18px;color:var(--gold)}
.langFlag.mono{font-size:13px}
/* ================= THOUGHTS =================================================
   A character's private thought: its own bubble in the chat, a record in their mind drawer,
   and a line in the city-wide feed. Teal is the reading colour throughout the game, so the
   thought reads as an aside rather than as speech: dashed stroke, no fill, teal marks. */
.msg.thought{align-self:flex-start;max-width:92%;background:none;border:1px dashed rgba(130,192,176,.42);
  border-radius:12px;padding:9px 12px 10px;cursor:pointer;transition:border-color .15s,background .15s}
.msg.thought:hover{border-color:var(--teal);background:rgba(130,192,176,.06)}
/* a thought they are NOT saying: gold stroke, so the gap between thought and speech is visible */
.msg.thought.held{border-color:rgba(225,173,102,.45)}
.msg.thought.held:hover{border-color:var(--gold);background:rgba(225,173,102,.06)}
.msg.thought.held .thMark{color:var(--gold)}
.thHeld{display:block;margin-top:6px;padding-top:5px;border-top:1px solid rgba(225,173,102,.22);
  font-size:10.5px;letter-spacing:.3px;color:var(--gold2);direction:ltr;text-align:left}
.mindItem.held{border-color:rgba(225,173,102,.34)}
.talkRow.held{border-color:rgba(225,173,102,.34)}
.heldMark{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(225,173,102,.45);border-radius:999px;padding:1px 7px 2px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;white-space:nowrap}
.thHead{display:flex;align-items:center;gap:8px;margin-bottom:5px;direction:ltr;flex-wrap:wrap}
.thMark{white-space:nowrap}
.thMark{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal);opacity:.85}
/* thoughts are set apart the way a novel sets them apart: their own ink, italic, never speech.
   Teal ink when the character is about to say it; gold when they are keeping it to themselves. */
.msg.thought{--thought-ink:#A7C6BC}
.msg.thought.held{--thought-ink:var(--gold2)}
.msg.thought .native,.msg.thought .native b,
.mindItem .native,.mindItem .native b,.talkSay .native,.talkSay .native b{
  color:var(--thought-ink,#A7C6BC);font-style:italic}
.mindItem{--thought-ink:#A7C6BC}
.mindItem.held{--thought-ink:var(--gold2)}
.talkRow{--thought-ink:#A7C6BC}
.talkRow.held{--thought-ink:var(--gold2)}
.msg.thought .trans{color:var(--muted)}
.moodPill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--mood,var(--line));
  border-radius:999px;padding:1px 8px 2px;font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--mood,var(--muted));font-family:'IBM Plex Mono',ui-monospace,monospace;white-space:nowrap}
.moodPill i{width:5px;height:5px;border-radius:50%;background:var(--mood,var(--muted));display:block}

/* the drawer: everything this character has thought, newest first */
/* the drawer is a reading surface: its own chrome always reads left-to-right, while each thought
   keeps the direction of its own script (wordChips sets that per line) */
/* Not an overlay: the drawer is simply the body of the card when a tab other than Chat is chosen.
   The header, the avatar and the tabs never move. */
#mindDrawer{display:none;flex:1;min-height:0;background:var(--panel2);
  flex-direction:column;direction:ltr;text-align:left}
#mindDrawer.on{display:flex}
/* Any tab that is not the conversation takes the whole card: written tab-agnostically so a future
   drawer tab gets the full height without another rule (Finances needed one and did not have it). */
#citCard:not([data-tab="chat"]) #citLog,#citCard:not([data-tab="chat"]) #citTask,
#citCard:not([data-tab="chat"]) #citXP,#citCard:not([data-tab="chat"]) #citSugg,
#citCard:not([data-tab="chat"]) #citForm,#citCard:not([data-tab="chat"]) #citBlocks{display:none}

#mindWho{padding:10px 16px 0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
#mindDrawer[data-tab="who"] #mindWho{display:none}
#mindList{flex:1;overflow-y:auto;padding:12px 14px 16px;display:flex;flex-direction:column;gap:9px}
#mindList::-webkit-scrollbar{width:7px}#mindList::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.mindItem{border:1px solid var(--line);border-radius:10px;padding:9px 12px 10px;transition:border-color .15s}
.mindItem.on{border-color:var(--teal);background:rgba(130,192,176,.06)}
.mindMeta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:nowrap}
.mindWhen{font-size:10px;letter-spacing:.6px;color:var(--muted);white-space:nowrap;
  font-family:'IBM Plex Mono',ui-monospace,monospace}
.mindItem .trans{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;direction:ltr;text-align:left}
.mindItem .native,.msg.thought .native,.talkSay .native{display:block;font-family:Lora,serif;line-height:1.55}
.msg.thought .trans,.talkSay .trans{display:block;margin-top:3px}
#mindDrawer[data-script="arabic"] .native,.msg.thought[data-script="arabic"] .native,
.talkRow[data-script="arabic"] .native{font-family:'Amiri',Lora,serif;line-height:1.9}

/* Talk of the Town — the same records, city-wide, in the City tab */
#townTalk{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.talkRow{border:1px solid var(--line);border-radius:10px;padding:10px 12px 11px}
.talkWho{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.talkWho .nm{font-size:12.5px;color:var(--text)}
.talkWho .sub{font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.4px}
.talkSay .trans{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;direction:ltr;text-align:left}

/* the shared speech bar (js/speech-bar.js) — one control, same everywhere */
.speechBar{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
/* THE CHAT SHOWS THE TARGET LANGUAGE AND NOTHING ELSE until the bubble's own aA is pressed:
   the reading, the meaning and the per-word readings all come in together. Thoughts are exempt —
   a thought is always shown with its reading and its translation, and it has no aA of its own. */
.msg:not(.thought):not(.showRead) .roman,
.msg:not(.thought):not(.showRead) .trans,
.msg:not(.thought):not(.showRead) .tw i{display:none}
/* The bar belongs to the bubble you are looking at, and it TAKES ROOM only while it is there: the
   bubble grows to make space for it and shrinks back when the pointer leaves. */
.msg .sayRow{max-height:0;margin-top:0;opacity:0;overflow:hidden;
  transition:max-height .17s ease,margin-top .17s ease,opacity .12s ease}
.msg:hover .sayRow,.msg .sayRow:focus-within,.msg.showRead .sayRow{max-height:36px;margin-top:6px;opacity:1}
/* nothing to hover with: the bar simply stands there */
@media (hover:none){.msg .sayRow{max-height:36px;margin-top:6px;opacity:1}}
.speakBtn.sbRead{font-family:'Cormorant Garamond',serif;font-size:12.5px;letter-spacing:.5px}
.speakBtn.sbRead.on{border-color:var(--gold);color:var(--gold);background:rgba(225,173,102,.14)}
.speechBar.sbEnd{margin-inline-start:auto}
.mindMeta .speechBar,.talkWho .speechBar{margin-inline-start:auto}

/* the speech bar sits at the end of a bubble, on its own line, so it never breaks the reading */
.sayRow{display:flex;justify-content:flex-end;margin-top:6px;direction:ltr}
.msg.thought .thHead .speechBar{margin-inline-start:auto}
/* a thought in an RTL language reads right-to-left, whatever the surrounding panel does */
.msg.thought .native[dir="rtl"],.mindItem .native[dir="rtl"],.talkSay .native[dir="rtl"]{
  direction:rtl;text-align:right}
.msg.thought .native[dir="rtl"] .tw,.mindItem .native[dir="rtl"] .tw{direction:rtl}

/* ---- saved words: the ＋ on a speech bar, the chip, the drawer, the practice loop ---- */
.sbSave.on{border-color:var(--gold);color:var(--gold);background:rgba(225,173,102,.14)}
.dictChip{cursor:pointer;background:none;border:1px solid var(--line);color:var(--muted);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.8px;
  padding:2px 9px 3px;border-radius:999px;white-space:nowrap}
.dictChip:hover{border-color:var(--gold);color:var(--text)}
.dictChip.has{color:var(--gold);border-color:rgba(225,173,102,.45)}
#dictDrawer{display:none;position:absolute;inset:0;z-index:70;background:var(--panel2);
  flex-direction:column;direction:ltr;text-align:left}
#dictDrawer.on{display:flex}
#dictHead{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);
  font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold)}
/* the invariant header: flag two rows tall, name over the level line, equal small buttons */
#dictFlag{font-size:26px;line-height:1;flex:none}
.dhT{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
#dictSub{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted)}
#dictHead #dictPractice{margin-left:auto}
#dictHead #dictPractice,#dictHead #dictExam{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-width:55px;width:auto;font-size:10.5px;padding:4px 10px;flex:none}   /* both exactly Practise's natural width */
#dictHead #dictClose{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:inherit;font-size:15px;line-height:1;padding:4px 9px;cursor:pointer;white-space:nowrap;flex:none}
#dictHead #dictClose:hover{border-color:var(--gold);color:var(--gold)}
#dictBody{flex:1;overflow-y:auto;padding:12px 14px 18px;display:flex;flex-direction:column;gap:9px}
#dictBody::-webkit-scrollbar{width:7px}#dictBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.dictItem{border:1px solid var(--line);border-radius:10px;padding:9px 12px 11px}
.dictItem.held{border-color:rgba(225,173,102,.34)}
.dictMeta{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.dictFrom{font-size:10px;letter-spacing:.5px;color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace;white-space:nowrap}
.dictGot{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--green);white-space:nowrap;
  border:1px solid rgba(143,176,122,.4);border-radius:999px;padding:1px 7px 2px;font-family:'IBM Plex Mono',ui-monospace,monospace}
.dictDrop{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0 2px}
.dictDrop:hover{color:var(--gold)}
.dictItem .native{display:block;font-family:Lora,serif;line-height:1.55}
.dictItem[data-script="arabic"] .native,.drill[data-script="arabic"] .native{font-family:'Amiri',Lora,serif;line-height:1.9}
.dictItem .trans,.drillSay .trans{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;direction:ltr;text-align:left}
.dictItem .native[dir="rtl"],.drill .native[dir="rtl"]{direction:rtl;text-align:right}
/* ---- practice ---- */
.pItem{display:flex;flex-direction:column;gap:12px;padding:14px 2px}
/* the instruction is chrome (small mono caps, gold); the ask is the sentence you must think about */
.pWhat{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold2);margin-bottom:-4px}
.pAsk{font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.35;color:var(--text)}
/* a question asked in the language reads as that language, and can be heard */
.pAsk.native{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:Lora,serif;font-size:18px;line-height:1.6}
.pItem[data-script="arabic"] .pAsk.native{font-family:'Amiri',Lora,serif;line-height:1.95;font-size:19px}
.pFrom{font-size:10px;letter-spacing:.6px;color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace;margin-top:-8px}
.pOpts{display:flex;flex-direction:column;gap:7px}
.pOpt{text-align:left}
.pSentence{font-family:Lora,serif;font-size:17px;line-height:1.7}
.pItem[data-script="arabic"] .pSentence,.pItem[data-script="arabic"] .native{font-family:'Amiri',Lora,serif;line-height:1.95}
.pGap{display:inline-block;min-width:64px;border-bottom:1px solid var(--gold);margin:0 4px}
.pSentence.reading{font-size:15.5px;line-height:1.85;border-left:1px solid var(--line);padding-left:12px}
.pLine{min-height:40px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  border-bottom:1px solid var(--line);padding-bottom:9px}
.pLine .pHint{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace}
/* the hint ladder */
.pHints{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pHints .pHint{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;
  padding:5px 10px 6px;width:100%}
.pHints .pHint.reveal{border-color:rgba(225,173,102,.45)}
.hLabel{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  font-family:'IBM Plex Mono',ui-monospace,monospace}
.hText{font-family:Lora,serif;font-size:14px;color:var(--text);line-height:1.55}
.pItem[data-script="arabic"] .hText{font-family:'Amiri',Lora,serif;line-height:1.9}
.hintBtn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);
  border-radius:999px;color:var(--muted);cursor:pointer;padding:4px 12px 5px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.9px;text-transform:uppercase}
.hintBtn:hover{border-color:var(--gold);color:var(--gold)}
.hQ{font-size:13px;line-height:1;color:var(--gold)}
.hCost{color:var(--muted);border-left:1px solid var(--line);padding-left:7px}
.hUsed,.hDone{font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);
  font-family:'IBM Plex Mono',ui-monospace,monospace}
.pHearBar{display:flex;align-items:center;gap:10px}
.pHearHint{font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);
  font-family:'IBM Plex Mono',ui-monospace,monospace}
.sbSlow{font-family:'IBM Plex Mono',ui-monospace,monospace}
.pBlocks{display:flex;flex-wrap:wrap;gap:6px}
.pBlocks .blk.used{opacity:.28;pointer-events:none}
.pType{background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font-family:Lora,serif;font-size:16px;padding:9px 12px;width:100%}
.pType:focus{outline:none;border-color:var(--gold)}
/* Check earns its place only once there is something to check */
.pCheck{align-self:flex-start;padding:5px 18px 6px}
.pCheck:disabled{opacity:.32;cursor:default;border-color:var(--line);color:var(--muted)}
.pFeed{display:none}
.pFeed.on{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
/* the standard, not the card width: Next sizes to its label like every other action */
.pFeed>.btn{align-self:flex-start}
.pVerdict{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:1.3px;text-transform:uppercase}
.pVerdict.good{color:var(--green)}.pVerdict.bad{color:var(--red,#C86A5A)}
/* one thing per line: what you gave, the answer, what it means, then the bar */
.pGiven{display:flex;flex-direction:column;gap:2px;margin-bottom:9px}
.gText{font-family:Lora,serif;font-size:15px;color:var(--muted);line-height:1.55}
.dOK{color:var(--green)}
.dBad{color:var(--red,#C86A5A);text-decoration:underline;text-decoration-color:rgba(200,106,90,.6);text-underline-offset:3px}
.dMissing{color:var(--green);border-bottom:1px solid rgba(143,176,122,.55)}
.dNear{white-space:nowrap}
.pAnswer .native.diffed{color:var(--text)}
.pItem[data-script="arabic"] .gText{font-family:'Amiri',Lora,serif;line-height:1.9}
.pAnswer{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.pAnswer .native{display:block;font-family:Lora,serif;font-size:17px;line-height:1.6}
.pItem[data-script="arabic"] .pAnswer .native{font-family:'Amiri',Lora,serif;line-height:1.95}
.pAnswer .trans{display:block;font-size:12.5px;color:var(--muted);direction:ltr;text-align:left}
.pAnswerBar{margin-top:6px}
/* ---- stories: a library, then one story at a time ---- */
#dictTabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line)}
/* the Land Registry's own tab strip (Registry / Permits), .dTab in a card body */
.regTabs{display:flex;gap:2px;margin:-2px 0 10px;border-bottom:1px solid var(--line)}
.dTab{background:none;border:none;border-bottom:1px solid transparent;color:var(--muted);cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:1.2px;
  text-transform:uppercase;padding:8px 10px 9px;margin-bottom:-1px}
.dTab:hover{color:var(--text)}
.dTab.on{color:var(--gold);border-bottom-color:var(--gold)}
.stFilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:4px}
.stFilters #stWrite{flex:none;white-space:nowrap}
.stSearch{flex:1 1 130px;min-width:110px;background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--text);font-family:Lora,serif;font-size:12px;padding:5px 12px 6px}
.stSearch:focus{outline:none;border-color:var(--gold)}
.fGroup{display:flex;gap:4px}
.fChip{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.9px;text-transform:uppercase;
  padding:3px 9px 4px}
.fChip:hover{border-color:var(--gold);color:var(--text)}
.fChip.on{color:var(--gold);border-color:rgba(225,173,102,.5)}
.stCard{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px 12px;cursor:pointer}
.stCard:hover{border-color:rgba(225,173,102,.45)}
.stCard.fresh{border-left:2px solid var(--gold)}
.stTop{display:flex;align-items:center;gap:8px}
.lvPill{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px 3px}
.stNew{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);
  font-family:'IBM Plex Mono',ui-monospace,monospace}
.stTop .dictDrop{margin-left:auto}
.stTitleNative{font-family:Lora,serif;font-size:16px;line-height:1.5;color:var(--text)}
.stCard[data-script="arabic"] .stTitleNative{font-family:'Amiri',Lora,serif;line-height:1.9;font-size:18px}
.stTitleEn{font-size:11.5px;color:var(--muted)}
.storyBox{display:flex;flex-direction:column;gap:4px;padding:4px 2px}
.stHead{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.stHead .speechBar{margin-left:auto}
.stTitles{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.stTitles .stTitleNative{font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--gold)}
.storyBox[data-script="arabic"] .stTitleNative{font-family:'Amiri',Lora,serif;font-size:22px}
.stTitles .trans{font-size:12px;color:var(--muted)}
.stPara{font-family:Lora,serif;font-size:16px;line-height:1.85;text-wrap:pretty;margin-top:10px}
.storyBox[data-script="arabic"] .stPara{font-family:'Amiri',Lora,serif;line-height:2.05;font-size:18px}
.stPara .native{display:inline}
/* every word of a story is its own thing to hear, and its own place to start reading from */
.sw{cursor:pointer;border-radius:4px;padding:0 1px;transition:color .12s,background .12s}
.sw:hover{color:var(--gold)}
.sw.picked{background:rgba(225,173,102,.16);color:var(--gold)}
.sw b{font-weight:inherit}
.wline .sw{display:inline-flex;flex-direction:column;align-items:center;vertical-align:baseline;line-height:1.3}
.wline .sw i{font-style:normal;font-size:9.5px;color:var(--teal,#82C0B0);font-family:'IBM Plex Mono',ui-monospace,monospace}
body.noTr .wline .sw i{display:none}
/* ---- the reading head (mockup 2a, 2026-08-08): the tapped word is gold and carries the pill;
   the sentence being voiced is underlined. Shared by js/reader.js wherever .sw words live. ---- */
.stPara .sw{position:relative}
.sw.rdAnchor{color:var(--gold)}
.sw.rdNow b{box-shadow:0 2px 0 var(--gold)}
.rdPill{position:absolute;top:-25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  background:var(--panel2);border:1px solid rgba(225,173,102,.55);border-radius:999px;padding:1px 3px;
  z-index:6;white-space:nowrap;direction:ltr}
.rdPill button{background:none;border:0;color:var(--gold);width:20px;height:20px;padding:0;border-radius:999px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;line-height:1}
.rdPill button:hover{background:rgba(225,173,102,.14)}
.rdPill .rdHalf.on,.rdPill .rdMode.on{background:rgba(225,173,102,.22)}
/* the estimated sweep is a GUESS, so its underline is dashed (painted, so the line box never shifts) */
.sw.rdEst b{background-image:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 9px);
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat}
.stParaEn{font-size:12px;line-height:1.7;color:var(--muted);direction:ltr;text-align:left;margin-top:4px;
  padding-left:11px;border-left:1px solid var(--line)}
.stActs{display:flex;gap:8px;padding-top:16px}
.btn.gold{border-color:var(--gold);color:var(--gold)}

/* ---- level guide drawer ---- */
#levelDrawer{display:none;position:absolute;inset:0;z-index:72;background:var(--panel2);
  flex-direction:column;direction:ltr;text-align:left}
#levelDrawer.on{display:flex}
#levelHead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);
  font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold)}
#levelTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#levelHead .btn{flex:none}
#levelHead #levelStart{margin-left:auto}
#levelHead #levelClose{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:inherit;font-size:15px;line-height:1;padding:4px 9px;cursor:pointer;white-space:nowrap;flex:none}
#levelHead #levelClose:hover{border-color:var(--gold);color:var(--gold)}
#levelBody{flex:1;overflow-y:auto;padding:14px 16px 20px}
#levelBody::-webkit-scrollbar{width:7px}#levelBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.lvSec{margin-bottom:18px}
.lvSec h4{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold2);letter-spacing:.3px;
  margin-bottom:7px;display:flex;align-items:center;gap:8px}
.lvN{font-size:9.5px;letter-spacing:1px;color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:1px 7px 2px;font-family:'IBM Plex Mono',ui-monospace,monospace}
.lvCovers{font-size:12.5px;line-height:1.6;color:var(--text)}
.lvSkills{margin:7px 0 0 16px;padding:0}
.lvSkills li{font-size:12px;line-height:1.7;color:var(--muted)}
.lvNote{font-size:12px;line-height:1.6;color:var(--muted);border-left:1px solid rgba(225,173,102,.35);
  padding-left:10px;margin-bottom:7px}
.lvItem{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 0;border-bottom:1px solid var(--line)}
.lvItem:last-child{border:none}
.lvItem .native{font-family:Lora,serif;line-height:1.55}
.lvItem[data-script="arabic"] .native{font-family:'Amiri',Lora,serif;line-height:1.9}
.lvItem .trans{display:block;font-size:11.5px;color:var(--muted);direction:ltr;text-align:left}
.lvItem .speechBar{margin-top:4px}

/* ---- learning bar: confidence + explain, under every saved line ---- */
.learnBar{display:flex;align-items:center;gap:9px;margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
.confDots{display:flex;gap:4px}
.confDot{width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:none;transition:background .12s,border-color .12s}
.confDot:hover{border-color:var(--gold)}
.confDot.on{background:var(--gold);border-color:var(--gold)}
.confWord{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  font-family:'IBM Plex Mono',ui-monospace,monospace}
.learnBtn{margin-left:auto;background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.9px;
  text-transform:uppercase;padding:3px 10px 4px;border-radius:999px;white-space:nowrap}
.learnBtn:hover{border-color:var(--gold);color:var(--gold)}
.explainBox{display:none;margin-top:9px}
.explainBox.on{display:block}
.xTabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:9px}
.xTab{background:none;border:none;border-bottom:1px solid transparent;color:var(--muted);cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:1px;
  text-transform:uppercase;padding:4px 8px 6px;margin-bottom:-1px}
.xTab:hover{color:var(--text)}
.xTab.on{color:var(--gold);border-bottom-color:var(--gold)}
.xWords{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.xWord{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:7px;padding:4px 8px 5px}
.xWord b{font-family:Lora,serif;font-weight:400;font-size:13px;color:var(--text)}
.xWord i{font-style:normal;font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace}
.dictItem[data-script="arabic"] .xWord b{font-family:'Amiri',Lora,serif;font-size:15px}
.xLine{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 0;border-bottom:1px solid var(--line)}
.xLine .trans{display:block;font-size:11.5px;color:var(--muted);direction:ltr;text-align:left}
.xLine .speechBar{margin-top:4px}
.xLine:last-child{border:none}
.xSub{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--gold2);margin:9px 0 3px}
.xMistake{font-size:12px;line-height:1.6;color:var(--muted);border-left:1px solid rgba(200,106,90,.5);padding-left:10px;margin-top:7px}

/* ---- the citizen drawer: who someone is, and how to change them ---- */
#citizenDrawer{display:none;position:absolute;inset:0;z-index:74;background:var(--panel2);
  flex-direction:column;direction:ltr;text-align:left}
#citizenDrawer.on{display:flex}
#czHead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);
  font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold)}
#czTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#czHead #czSave{margin-left:auto;flex:none}
#czHead #czClose{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:inherit;font-size:15px;line-height:1;padding:4px 9px;cursor:pointer;white-space:nowrap;flex:none}
#czHead #czClose:hover{border-color:var(--gold);color:var(--gold)}
#czBody{flex:1;overflow-y:auto;padding:14px 16px 20px}
#czBody::-webkit-scrollbar{width:7px}#czBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.czAvaWrap{position:relative;display:inline-block;flex:none}
.czAva{display:block;width:100%;height:100%;border-radius:50%;border:1px solid var(--line)}
/* the flag rides the rim of the disc, outside the mask */
.czAvaFlag{position:absolute;bottom:-2px;right:-4px;line-height:1;background:var(--panel2);
  border:1px solid var(--line);border-radius:50%;padding:2px 3px}
.czTop{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.czTopTxt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
.czName{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--text)}
.czSoul{display:flex;flex-direction:column;gap:6px}
/* the written person — role through their day — sits between two hairlines, one block */
.czStory{display:flex;flex-direction:column;gap:11px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;margin:4px 0}
.czStory .pBtn{align-self:flex-start}
#czBody .pForm textarea{min-height:64px}
.pForm .czStory textarea[rows="2"],#czBody .pForm .czStory textarea[rows="2"]{min-height:44px}
#czBody .pBtn{margin-top:6px}
.pRow[data-open]{cursor:pointer}
.pRow[data-open]:hover{border-color:rgba(225,173,102,.4)}
/* the avatar answers the pointer: the ring warms and the person leans forward a little */
.pRow .czAva,.czTop .czAva{transition:border-color .16s,transform .16s,box-shadow .16s}
.pRow[data-open]:hover .czAva,.czTop .czAvaWrap:hover .czAva{
  border-color:var(--gold);transform:scale(1.08);box-shadow:0 0 0 3px rgba(225,173,102,.16)}
.pRow[data-open]:hover .czAvaFlag{border-color:var(--gold)}
#citAvatarWrap:hover #citAvatar{border-color:var(--gold2);transform:scale(1.06)}
#citAvatar{transition:border-color .3s,transform .16s}
#pane-people h3 .btn{margin-left:auto}

/* Mind and Who share one drawer in the chat: the tab decides which body is shown. */
#mindHead #czTabs{display:flex;gap:2px;margin-left:10px}
#mindHead #czTabs .dTab{padding:5px 9px 6px;font-size:9px}
#mindHead #czSaveChat{margin-left:auto}
#czWhoBody{display:none;flex:1;overflow-y:auto;padding:12px 14px 18px}
#czWhoBody::-webkit-scrollbar{width:7px}#czWhoBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
#mindDrawer[data-tab="who"] #mindList{display:none}
#mindHead #mindWho{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mindDrawer[data-tab="who"] #czWhoBody{display:block}
#czWhoBody .czTop{padding-bottom:12px;margin-bottom:12px}
#czWhoBody .pForm textarea{min-height:58px}

/* the chat's own tabs: the same underline tabs as the city card, seated on the header's hairline */
#citTabs{display:flex;align-items:stretch;gap:2px}
.citTab{background:none;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.3px;
  padding:9px 12px 11px;white-space:nowrap}
.citTab:hover{color:var(--text)}
.citTab.on{color:var(--gold);border-bottom-color:var(--gold)}

/* a citizen's name in their own language, with the reading the Mayor knows them by */
.czNameEn{font-size:.72em;color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.4px}

/* The row is quiet until you reach for it: the actions take a row of their own beneath the avatar
   and the name, and only appear on hover (or keyboard focus), so a list of ten citizens reads as ten
   people rather than thirty buttons. */
/* the row is a grid: give the actions a second line spanning both columns */
.pRow{grid-template-columns:auto 1fr}
.pRow .pActs{grid-column:1 / -1;display:flex;gap:6px;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .14s ease,max-height .18s ease,margin-top .18s ease}
.pRow:hover .pActs,.pRow:focus-within .pActs{opacity:1;max-height:44px;margin-top:8px}
.pRow .pActs .pBtn{padding:3px 12px 4px;font-size:9px}

/* ---- THE PLAYER'S MENU: the avatar dropdown ---- */
/* the city's menu: the logo's dropdown, the avatar menu's mirror on the left */
#cMenu{display:none;position:fixed;top:var(--card-top);left:var(--card-edge);width:300px;z-index:210;
  background:rgba(38,33,28,.96);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.55);padding:6px}
#cMenu.on{display:block}
/* the city report, resident in the menu's head */
.cmStats{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:2px 10px 8px}
.cmStat{border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.cmStat b{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-weight:600;color:var(--gold)}
.cmStat span{font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
#pMenu{display:none;position:fixed;top:var(--card-top);right:var(--card-edge);width:300px;z-index:210;
  background:rgba(38,33,28,.96);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.55);padding:6px}
#pMenu.on{display:block}
.pmHead{display:flex;align-items:center;gap:11px;padding:10px 10px 9px}
.pmHead .meAvaBig{width:40px;height:40px}
.pmNm{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;line-height:1.1;color:var(--text)}
.pmSubT{font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px}
.pmFrame{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 10px 6px;
  width:calc(100% - 20px);padding:7px 10px;border:1px solid rgba(225,173,102,.4);border-radius:8px;
  background:none;font:11.5px 'Lora',serif;color:var(--text);text-align:left;cursor:pointer}
.pmFrame:hover{border-color:var(--gold)}
.pmFrame b{color:var(--gold);font-weight:600;white-space:nowrap}
.pmFrame.quiet{border-color:var(--line);color:var(--muted);cursor:default}
.pmFrame:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pmDot{width:6px;height:6px;border-radius:50%;background:#8FBB7E;flex:none}
.pmDiv{height:1px;background:var(--line);margin:6px 6px}
.pmRow{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;border-radius:8px;
  background:none;color:var(--text);font:13px 'Lora',serif;cursor:pointer;text-align:left}
.pmRow:hover{background:rgba(243,242,242,.06)}
.pmRow:active{background:rgba(225,173,102,.12)}
.pmRow:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pmRow svg{flex:none;color:var(--muted)}
.pmLbl{flex:1}
.pmSub{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:rgba(243,242,242,.45);
  max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmRow.gold,.pmRow.gold svg{color:var(--gold)}
/* the back chip that replaces the tab bar when a pane was opened from the menu */
.meBack{margin:8px 10px;display:inline-flex;align-items:center;gap:6px;background:none;
  border:1px solid var(--line);border-radius:999px;color:var(--muted);
  font:12px 'Lora',serif;padding:4px 12px 5px;cursor:pointer;align-self:flex-start}
.meBack:hover{border-color:var(--gold);color:var(--gold)}
.meBack:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- MY CITIES: list → founding form → edit card ---- */
/* the create/edit city MODAL: the one centered surface in the game — a decision about a whole
   city deserves the middle of the screen; everything else keeps to the card sides. */
#ctModal{display:none;position:fixed;inset:0;z-index:220;background:rgba(20,18,16,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#ctModal.on{display:grid;place-items:center}
#ctModal .ctCard{width:var(--card-w);max-width:calc(100vw - 28px);max-height:calc(100vh - 90px);
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(38,33,28,.97);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 28px 64px rgba(0,0,0,.6)}
#ctModal .ctBody{flex:1;overflow-y:auto;padding:14px 16px 20px}
#ctModal .ctBody::-webkit-scrollbar{width:7px}
#ctModal .ctBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.ctRow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.ctRow:first-of-type{border-top:none;padding-top:2px}
.ctTxt{flex:1;min-width:0}
.ctNm{font-size:13.5px;color:var(--text)}
.ctTag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--gold);margin-left:8px}
.ctSub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5}
.ctActs{display:flex;gap:6px;flex:none}
.pBtn.gold{border-color:rgba(225,173,102,.55);color:var(--gold)}
.pBtn.gold:hover{border-color:var(--gold)}
.pBtn:disabled{opacity:.45;cursor:default}
.pBtn.danger:disabled:hover{border-color:var(--line);color:var(--muted)}
.ctInput{width:100%;background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font:15px 'Lora',serif;padding:8px 11px;margin-top:6px}
.ctInput:focus{outline:none;border-color:var(--gold)}
.ctOpt{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;margin-top:6px;cursor:pointer}
.ctOpt:hover{border-color:rgba(225,173,102,.4)}
.ctOpt.on{border-color:var(--gold)}
.ctOpt.soon{opacity:.45;cursor:default}
.ctOpt.soon:hover{border-color:var(--line)}
.ctOpt .dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--muted);margin-top:2px;flex:none;position:relative}
.ctOpt.on .dot{border-color:var(--gold)}
.ctOpt.on .dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--gold)}
.ctSoon{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted);margin-left:8px}
.ctFoot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.ctArea{min-height:74px;resize:vertical;line-height:1.5;font-size:13px;font-family:Lora,serif}
/* the agent form: names in one row, word-labelled sliders, a quiet help box */
.agRow{display:flex;gap:10px}
.agRow>div{flex:1;min-width:0}
/* agent form labels: same voice as the citizen drawer's */
.agLbl{display:block;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.agRow .agLbl{margin-top:0}
select.ctInput{cursor:pointer}
select.ctInput option{background:#26211c;color:var(--text)}
.agSlide{display:flex;align-items:center;gap:10px;margin-top:10px}
.agSlide .ctNm{width:88px;flex:none}
.agSlide .setRange{flex:1;width:auto;min-width:0}
.agSlide .setVal{min-width:74px;text-align:right}
.agSlideSub{margin:1px 0 0 98px}
.qHelp{width:26px;height:26px;flex:none;border:1px solid var(--line);border-radius:50%;background:none;
  color:var(--muted);cursor:pointer;font:600 13px Lora,serif;margin-right:8px}
.qHelp:hover{border-color:var(--gold);color:var(--gold)}
#agHelpBox{display:none;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:12px}
#agHelpBox.on{display:block}
.agAdv{display:none}
.agAdv.on{display:block;margin-top:8px}
/* the Advanced card floats over the agent form, inside the same modal layer */
#agAdvWrap{position:fixed;inset:0;z-index:232;background:rgba(20,18,16,.45);display:grid;place-items:center}
#ctModal .agAdvCard{width:min(420px,calc(100vw - 40px))}
/* My Cities: the Create button under the frame sits at the start (LTR left) */
.ctFoot.start{justify-content:flex-start}
/* a footer holding a secondary action at the start and the verdicts at the end */
.ctFoot.split{justify-content:space-between;align-items:center}
.ctFootEnd{display:flex;gap:8px}
/* quiet actions (Cancel, disclosure buttons): text only — the gold outline does the deciding */
.pBtn.quiet{border-color:transparent}
.pBtn.quiet:hover{border-color:var(--line);color:var(--gold)}
/* the pane's intro line, under the card title */
.ctIntro{font-size:11.5px;color:var(--muted);line-height:1.6;margin:2px 0 10px;text-wrap:pretty}
.ctDef{margin-top:4px}
.ctDef b{font-weight:600;color:var(--text)}

/* ---- settings panel (js/settings.js) ---- */
.setRow{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.setRow:last-child{border-bottom:none}
.setText{flex:1;min-width:0}
.setLabel{font-family:Lora,serif;font-size:13.5px;color:var(--text)}
.setNote{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px;text-wrap:pretty}
.setCtl{display:flex;align-items:center;gap:9px;flex:none;padding-top:2px}
.setSwitch{width:38px;height:20px;border-radius:999px;border:1px solid var(--line);background:none;
  cursor:pointer;padding:0;position:relative;transition:border-color .16s,background .16s}
.setSwitch i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--muted);transition:transform .16s,background .16s}
.setSwitch:hover{border-color:var(--gold)}
.setSwitch.on{border-color:var(--gold);background:rgba(225,173,102,.16)}
.setSwitch.on i{transform:translateX(18px);background:var(--gold)}
.setRange{width:132px;accent-color:var(--gold);background:none}
.setVal{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--muted);min-width:38px}

/* the open bubble's speech bar: a real control layer over the 3D card */
#bubbleBar{position:fixed;z-index:40;display:none;gap:6px;pointer-events:auto}
#bubbleBar.on{display:flex}
#bubbleBar .speechBar{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:3px 6px;box-shadow:0 6px 18px rgba(0,0,0,.45)}

.setSelect,.setInput{background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font-family:Lora,serif;font-size:12.5px;padding:6px 10px;min-width:172px}
.setSelect:focus,.setInput:focus{outline:none;border-color:var(--gold)}
/* A field that carries a value belongs UNDER its label and explanation, at full width — a control
   pushed into a narrow right-hand column squeezes the words next to it into a column of one word.
   Switches and sliders stay on the right, where a short label reads better beside them. */
.setRow.field{flex-direction:column;align-items:stretch;gap:8px}
.setRow.field .setCtl{padding-top:0;align-items:stretch}
.setRow.field .setSelect,.setRow.field .setInput{flex:1;min-width:0;width:100%}
.setRow.field .setRange{flex:1;width:auto;min-width:0}
.setRow.field .setCtl:has(.setRange){align-items:center}
.setRow.field .setVal{text-align:right}
.setRow.field .pBtn{white-space:nowrap}
.setRow.wide{flex-direction:column;align-items:stretch;gap:8px}

.czMind{display:flex;flex-direction:column;gap:7px}
.czMind select,.czMind input{background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font-family:Lora,serif;font-size:12.5px;padding:7px 10px;width:100%}
.czMind select:focus,.czMind input:focus{outline:none;border-color:var(--gold)}

.setStatus{font-size:11.5px;line-height:1.6;color:var(--muted);text-wrap:pretty;white-space:pre-line;
  font-variant-numeric:tabular-nums}
.setStatus:empty{display:none}
.setStatus.good{color:var(--green)}
.setStatus.bad{color:var(--red,#C86A5A)}
.setStatus.busy{color:var(--muted);font-style:italic}

/* ---- connections: provider + key + model, saved together (Settings ▸ Model) ----
   A list of closed rows; clicking one (or Add) opens its editor in place. */
.connRow{border:1px solid var(--line);border-radius:8px;margin-top:10px;overflow:hidden}
.connItem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
  color:var(--text);font-family:Lora,serif;font-size:12.5px;padding:10px 12px;cursor:pointer}
.connItem:hover{background:rgba(243,242,242,.04)}
.connItem .connNm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connItem .connChev{flex:none;color:var(--muted);font-size:14px;line-height:1}
.connRow.open .connItem{border-bottom:1px solid var(--line);color:var(--gold)}
.connEdit{padding:11px 12px 12px}
.connGrid{display:flex;flex-direction:column;gap:8px}
.connGrid label{display:flex;flex-direction:column;gap:4px;font-size:9.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted)}
.connGrid .setSelect,.connGrid .setInput{width:100%;min-width:0}
.connActs{display:flex;gap:6px;margin-top:10px}
.connActs .pBtn.red,.connActs .pBtn.gold{margin-left:auto}
.connActs .pBtn.gold{border-color:rgba(225,173,102,.55);color:var(--gold)}
.connActs .pBtn.gold:hover{border-color:var(--gold)}
.connActs .pBtn.red{border-color:rgba(196,84,64,.55);color:var(--red)}
.connActs .pBtn.red:hover{border-color:var(--red)}
.connRow .setStatus{margin-top:8px}

/* ---- YOU: the avatar in the top bar and the drawer behind it ---- */
#meBtn{display:flex;align-items:center;gap:8px;margin-left:auto;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 5px;color:var(--muted);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase}
#meBtn:hover{border-color:var(--gold);color:var(--text)}
#meAva,.meAvaBig{border-radius:50%;flex:none;border:1px solid var(--gold);
  background:radial-gradient(circle at 50% 34%,#e8c2a0 0 34%,#5a3d24 35% 46%,#6a86c9 47% 100%)}
#meAva{width:22px;height:22px;overflow:hidden}
#meAva img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.meAvaBig{width:54px;height:54px}
/* The You panel is a CARD, sized by the SAME rule as every other card (#side above) — one
   footprint, one truth. Only its stacking differs: it opens over whatever card is showing. */
#meDrawer{z-index:200}
#meDrawer .bmHead{flex:none}
#meBody{flex:1;overflow-y:auto;padding:14px 16px 22px}
#meBody::-webkit-scrollbar{width:7px}#meBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.meCard{border:1px solid var(--line);border-radius:11px;padding:14px 15px;margin-bottom:12px}
.meCardTitle{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--gold2);margin-bottom:9px}
/* the pane's own menu icon rides in the drawer header, tall as the title and subtitle together */
#meTIco{display:grid;place-items:center;color:var(--text);flex:none;align-self:center}
#meTIco svg{width:20px;height:20px}
.meWho{display:flex;align-items:center;gap:13px}
.meNm{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--text)}
.meSub{font-size:11px;color:var(--muted);margin-top:2px}
.meActs{display:flex;gap:8px;margin-top:14px}
.meStat{display:flex;align-items:baseline;gap:9px;padding:4px 0}
.meStat span{flex:1;font-size:11.5px;color:var(--muted)}
.meStat b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:17px;font-weight:500;color:var(--text);text-align:right}
/* the total sits apart from the figures it sums */
.meStat.tot{margin-top:5px;padding-top:8px;border-top:1px solid var(--line)}
.meStat.tot span{color:var(--gold2)}
.meStat.tot b{color:var(--gold)}
.meLang{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--line)}
/* a holding is a button: it takes you to the building on the map */
button.meHold{width:100%;background:none;border:none;border-bottom:1px solid var(--line);
  color:inherit;font:inherit;text-align:left;cursor:pointer}
button.meHold:hover .nm{color:var(--gold)}
button.meHold:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.meLang:last-child{border-bottom:none}
.meLang .nm{flex:1;font-size:13px}
.meLang .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--muted)}
#meBody .setGroup:first-child{margin-top:0}
/* the build badge: an empty slot the deploy build fills (docs/design/DESIGNER-BUILD-BADGE.md).
   A footnote, not a setting - quiet mono metadata under a hairline, selectable for bug reports. */
.build-info{flex:none;margin:0 16px;padding:9px 0 12px;border-top:1px solid rgba(243,242,242,.13);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.4px;
  color:var(--muted);user-select:text;-webkit-user-select:text}

/* ---- the selection card: what is standing on the picked tile, and what can be done with it ---- */
#selCard{display:none;position:absolute;z-index:60;width:308px;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.5);overflow:hidden}
#selCard.on{display:block}
#selCard .bmHead .em{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);
  border:1px solid var(--line);border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:none}
.selBody{padding:10px}
.selSub{font-size:11.5px;color:var(--muted);padding:0 4px 8px;text-wrap:pretty}
.selNote{font-size:11.5px;color:var(--muted);padding:4px 4px 6px;font-style:italic}

/* the owner's name in a card is a way in to them, not a label */
.pcWho{background:none;border:none;padding:0;font:inherit;color:var(--gold);cursor:pointer;
  border-bottom:1px solid rgba(225,173,102,.4)}
.pcWho:hover{color:var(--gold2);border-bottom-color:var(--gold)}
.pcWho:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- the deeds card: what a building is, who holds it, what it earns ---- */#propCard{display:none;position:absolute;z-index:60;width:320px;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.5);overflow:hidden}
#propCard.on{display:block}
.pcBody{padding:12px 14px 4px;overflow-y:auto}
.pcBody::-webkit-scrollbar{width:7px}
.pcBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.pcSub{font-size:11.5px;color:var(--muted);line-height:1.55;margin-bottom:10px;text-wrap:pretty}
.pcRow{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.pcRow:last-child{border-bottom:none}
.pcRow>span{flex:1;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.pcRow>b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:12.5px;color:var(--text)}
.pcRow em{font-style:normal;font-size:9.5px;color:var(--muted);letter-spacing:.6px}
.pcNat{font-family:'Amiri',Lora,serif;font-style:normal;color:var(--gold2)}
.pcDeal{padding:10px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pcAsk{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold)}
.pcOfferRow{display:flex;align-items:center;gap:7px}
.pcCur{color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px}
#pcOffer{flex:1;background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;padding:6px 9px;min-width:0}
#pcOffer:focus{outline:none;border-color:var(--gold)}
.pcSay{font-size:11.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.pcSay:empty{display:none}
.pcSay.bad{color:var(--red,#C86A5A)}
.pcActs{display:flex;gap:8px;padding:10px 14px 13px;border-top:1px solid var(--line)}
.pcActs:empty{display:none}
.pcActs .btn{flex:1}
/* offer verdicts: green to accept, red to refuse — stroke, not fill, like all chrome */
.btn.good{border:1px solid rgba(91,217,138,.6);color:#5BD98A;background:transparent}
.btn.good:hover{background:rgba(91,217,138,.12);border-color:#5BD98A;filter:none}
.btn.danger{border:1px solid rgba(200,106,90,.6);color:var(--red,#C86A5A);background:transparent}
.btn.danger:hover{background:rgba(200,106,90,.12);border-color:var(--red,#C86A5A);filter:none}
/* the sum on the table, restated just above the buttons */
.pcOnTable{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;color:var(--gold);
  text-align:center;margin-top:8px}

#offerCard{display:none;position:absolute;left:14px;bottom:var(--card-bottom);z-index:64;width:310px;
  background:var(--panel2);border:1px solid var(--gold);border-radius:12px;
  box-shadow:0 22px 48px rgba(0,0,0,.55);overflow:hidden}
#offerCard.on{display:block}
/* the offer's clock: quiet mono in the head, red once the card starts shaking */
#offerCard .ofTtl{margin-left:auto}
#offerCard .bmHead .x{margin-left:0}
#offerCard.urgent .ofTtl{color:var(--red)}
#offerCard.urgent{animation:offerShake .3s linear infinite}
@keyframes offerShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}}
/* The same card language, its OWN node: a question about which city continues must never be able to
   destroy a citizen's offer, or be destroyed by one. It sits above and clear of it. */
#askCard{display:none;position:absolute;left:14px;bottom:var(--card-bottom);z-index:66;width:330px;
  background:var(--panel2);border:1px solid var(--gold);border-radius:12px;
  box-shadow:0 22px 48px rgba(0,0,0,.6);overflow:hidden}
#askCard.on{display:block}
#offerCard.on ~ #askCard.on{bottom:auto;top:14px}


#czMoneyBody{display:none;flex:1;overflow-y:auto;padding:12px 14px 18px}
#czMoneyBody::-webkit-scrollbar{width:7px}
#czMoneyBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
#mindDrawer[data-tab="money"] #mindList,
#mindDrawer[data-tab="money"] #mindWho{display:none}
#mindDrawer[data-tab="money"] #czMoneyBody{display:block}

/* a plot with no way in, and other menu-level explanations */
.bmNote{padding:11px 14px;margin:0;border-bottom:1px solid rgba(243,242,242,.13);
  font-size:12px;line-height:1.55;color:#C9A063;background:rgba(225,173,102,.07)}

/* ---- the media lab (dev-only, ?mediaLab=1): pre-made pack catalog — MEDIA-CONTRACT.md ---- */
#mlabCard{display:none;position:fixed;left:var(--card-edge);top:var(--card-top);bottom:var(--card-bottom);
  width:var(--card-w);z-index:57;background:rgba(38,33,28,.94);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 48px rgba(0,0,0,.5);flex-direction:column;min-height:0;overflow:hidden}
#mlabCard.on{display:flex}
#mlabCard .bmHead{flex:none}
#mlabCard .bmHead [data-act="back"]{margin-left:0;font-size:16px;padding:4px 11px}
.mlFilters{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.mlKinds{display:flex;flex-wrap:wrap;gap:6px}
.mlSel{appearance:none;-webkit-appearance:none;align-self:flex-start;min-width:170px;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:inherit;font-size:12px;
  padding:7px 30px 7px 11px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23A79C8D' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.mlSel:hover,.mlSel:focus-visible{border-color:var(--gold);outline:none}
.mlChip{background:none;border:1px solid var(--line);border-radius:99px;color:var(--muted);
  font-family:inherit;font-size:10.5px;letter-spacing:.4px;padding:4px 10px;cursor:pointer}
.mlChip:hover{border-color:var(--gold);color:var(--gold)}
.mlChip.on{border-color:var(--gold);color:var(--gold);background:rgba(225,173,102,.10)}
.mlBody{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.mlBody::-webkit-scrollbar{width:7px}.mlBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.mlGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mlItem{display:flex;flex-direction:column;gap:6px;text-align:left;background:none;border:1px solid var(--line);
  border-radius:10px;padding:10px;cursor:pointer;color:var(--text);font-family:inherit;transition:border-color .15s}
.mlItem:hover{border-color:var(--gold)}
.mlThumb{display:block;aspect-ratio:1;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel2)}
.mlThumb img{width:100%;height:100%;object-fit:cover;display:block}
.mlNoImg{display:flex;align-items:center;justify-content:center;height:100%;min-height:56px;font-size:10.5px;color:var(--muted)}
.mlTtl{font-family:'Cormorant Garamond',serif;font-size:15.5px;font-weight:600;line-height:1.25}
.mlEn{font-size:11px;color:var(--muted);line-height:1.35}
.mlMeta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.4px;color:var(--teal)}
.mlEmpty{font-size:12.5px;color:var(--muted);padding:10px 2px;line-height:1.6}
.mlDx summary{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);cursor:pointer;padding:4px 0}
.mlDx summary:hover{color:var(--gold)}
.mlDiag{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;margin-top:6px}
.mlDiag th{text-align:left;font-weight:400;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;
  padding:4px 6px;border-bottom:1px solid var(--line)}
.mlDiag td{padding:4px 6px;border-bottom:1px solid var(--line);color:var(--text);word-break:break-all}
.mlDiag tr.bad td{color:var(--red)}
.mlCover{flex:none;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:220px;align-self:center}
.mlCover img{display:block;width:100%}
.mlCover.video{max-width:100%;align-self:stretch;background:#000}
.mlCover.video video{display:block;width:100%;max-height:220px}
.mlPlayRow{flex:none;display:flex;align-items:center;gap:8px}
.mlBtn{background:none;border:1px solid var(--gold);border-radius:8px;color:var(--gold);
  font-family:inherit;font-size:12px;padding:7px 14px;cursor:pointer}
.mlBtn:hover{background:rgba(225,173,102,.12)}
.mlAA{border-color:var(--line);color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace}
.mlAA.on{border-color:var(--teal);color:var(--teal);background:rgba(130,192,176,.10)}
.mlClock{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--muted)}
.mlNote{font-size:11px;color:var(--muted);line-height:1.55;border:1px dashed var(--line);border-radius:8px;padding:8px 11px}
.mlSents{display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:120px}
.mlSent{display:flex;gap:10px;align-items:baseline;text-align:left;background:none;border:none;
  border-left:2px solid transparent;border-radius:0;padding:6px 8px;cursor:pointer;color:var(--text);font-family:inherit}
.mlSent:hover .fr{color:var(--gold)}
.mlSent.cur{border-left-color:var(--gold);background:rgba(225,173,102,.07)}
.mlSent.cur .fr{color:var(--gold)}
.mlAdd{flex:none;margin-left:auto;align-self:center;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-family:inherit;font-size:13px;
  line-height:1;cursor:pointer;opacity:0;transition:opacity .12s}
.mlSent:hover .mlAdd,.mlSent.cur .mlAdd,.mlAdd.on{opacity:1}
.mlAdd:hover{border-color:var(--gold);color:var(--gold)}
.mlAdd.on{border-color:var(--teal);color:var(--teal)}
.mlTime{flex:none;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;color:var(--muted);width:32px}
.mlTxt{display:flex;flex-direction:column;gap:2px}
.mlTxt .fr{font-size:14px;line-height:1.5;transition:color .15s}
.mlTxt .en{font-size:11px;color:var(--muted);line-height:1.4}