/* v26B Track B UI: alerts stack, mayor's desk, save slots, new game, route query, wealth demand, jukebox.
   Same vocabulary as styles.css (enamel plates over slate, civic forms on paper). Kept in its own file so the render
   track and the HUD stylesheet do not collide. */

/* ---------- alerts stack (top right, under the seer's card when it shows) ---------- */
.alerts { position: fixed; right: 10px; top: 10px; width: 266px; z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.alerts > * { pointer-events: auto; }
body.rec-open .alerts { visibility: hidden; }
.al-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--slate); color: var(--enamel); border: 1px solid var(--rim); border-radius: 3px; box-shadow: var(--plate-shadow); font-family: var(--signtext); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; user-select: none; }
.al-head svg.i { width: 17px; height: 17px; }
.al-head .n { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--stamp); color: #fff; text-align: center; font-size: 12px; line-height: 18px; }
.al-head .n.calm { background: var(--green); }
/* v29A: the compact strip (default): worst alert's title on one line, the count, a plus to open the cards */
.alerts.compact { width: 240px; }
.al-head .al-x { flex: none; width: 16px; text-align: center; font-size: 16px; line-height: 1; opacity: 0.75; }
.al-head + .al-card { margin-top: 0; }
.al-strip { position: relative; padding: 5px 8px 5px 13px; font-size: 12.5px; letter-spacing: 0.02em; text-transform: none; }
.al-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 3px 0 0 3px; background: #3d7bd0; }
.al-strip.s2::before { background: var(--stamp); } .al-strip.s1::before { background: #d9962b; }
.al-strip .one { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.al-strip .n { margin-left: 0; }
.al-strip:hover { filter: brightness(1.12); }
.al-card { position: relative; padding: 8px 9px 8px 13px; background: var(--form); color: var(--ink); border: 1px solid var(--rim); border-radius: 3px; box-shadow: 0 2px 0 var(--rim), 0 8px 18px rgba(6, 12, 18, 0.25); font-size: 12.5px; line-height: 1.38; }
.al-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 2px 0 0 2px; background: #3d7bd0; }
.al-card.s2::before { background: var(--stamp); }
.al-card.s1::before { background: #d9962b; }
.al-card .t { display: flex; gap: 6px; align-items: flex-start; font-family: var(--signtext); font-weight: 800; font-size: 15px; line-height: 1.12; }
.al-card .t svg.i { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.al-card .w { margin: 3px 0 0; color: #3b4a43; }
.al-card .f { margin: 3px 0 0; font-weight: 700; color: var(--green); }
.al-card .by { margin-top: 3px; font-size: 11px; color: #5b6a62; font-style: italic; }
.al-acts { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.al-acts button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; background: var(--card); color: var(--ink); border: 1px solid #8c968f; border-radius: 3px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.al-acts button:hover { background: #fff; border-color: var(--ink); }
.al-acts button svg.i { width: 13px; height: 13px; }
.al-acts button.go { background: var(--cobalt); color: var(--enamel); border-color: var(--cobalt-lo, #183670); }
.al-acts button.renew { background: var(--green); color: #fff; border-color: #1f5a3e; }
.al-more { padding: 4px 10px; background: var(--slate); color: var(--enamel); border: 1px solid var(--rim); border-radius: 3px; font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; }

/* ---------- the mayor's desk ---------- */
.desk h3 { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px !important; padding-bottom: 4px; border-bottom: 2px solid var(--ink); text-transform: uppercase; letter-spacing: 0.03em; }
.desk h3:first-child { margin-top: 0 !important; }
.desk h3 small { font-family: var(--signtext); font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink-soft, #55635b); }
.desk .al-card { margin-bottom: 6px; box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.desk .al-card.muted-al { opacity: 0.55; }
.adv { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-bottom: 1px dashed #b8c0b9; }
.adv b { font-family: var(--signtext); font-size: 15px; }
.adv .lvl { justify-self: end; padding: 1px 8px; border-radius: 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--green); }
.adv .lvl.l1 { background: #c98a22; } .adv .lvl.l2 { background: var(--stamp); }
.adv .line { grid-column: 1 / -1; font-style: italic; color: #3b4a43; font-size: 13px; }
.adv .meter { grid-column: 1 / -1; height: 4px; background: #d3d9d1; border-radius: 2px; overflow: hidden; }
.adv .meter i { display: block; height: 100%; background: linear-gradient(to right, var(--green), #c98a22 50%, var(--stamp)); }
.adv .mute { grid-row: 1; grid-column: 2; }
.adv-top { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.adv button.mt { padding: 2px 8px; background: transparent; border: 1px solid #8c968f; border-radius: 3px; font-size: 11px; font-weight: 700; cursor: pointer; }
.adv button.mt.on { background: var(--ink); color: var(--card); }
.dec { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #b8c0b9; font-size: 13px; }
.dec small { display: block; color: #5b6a62; }
.dec button { flex: none; padding: 3px 9px; background: var(--card); border: 1px solid var(--ink); border-radius: 3px; font-weight: 700; font-size: 12px; cursor: pointer; }

/* ---------- records office: slots, settings ---------- */
.slots { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.slots li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; padding: 7px 9px; background: var(--card); border: 1px solid #b8c0b9; border-radius: 3px; }
.slots li b { font-family: var(--signtext); font-size: 15px; }
.slots li small { grid-column: 1; color: #5b6a62; font-size: 12px; }
.slots li .tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 2px; background: var(--slate); color: var(--enamel); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
.slots li .tag.manual { background: var(--cobalt); } .slots li .tag.sandbox { background: #8a5a14; } .slots li .tag.legacy { background: #6d6d6d; }
.slots li button { grid-row: 1 / span 2; grid-column: 2; padding: 5px 12px; background: var(--cobalt); color: var(--enamel); border: 1px solid #183670; border-radius: 3px; font-weight: 700; cursor: pointer; }
.slots li.empty { color: #5b6a62; font-style: italic; display: block; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-family: var(--signtext); font-weight: 700; font-size: 15px; }
.setrow .seg button { padding: 4px 9px; font-size: 12.5px; }

/* ---------- new game ---------- */
.newgame label.field input { width: 60%; padding: 4px 8px; font: inherit; font-size: 15px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--card); }
.ng-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.ng-mode { text-align: left; padding: 10px 11px; background: var(--card); color: var(--ink); border: 1.5px solid #8c968f; border-radius: 4px; cursor: pointer; }
.ng-mode b { display: block; font-family: var(--sign); font-weight: 800; font-size: 21px; text-transform: uppercase; letter-spacing: 0.02em; }
.ng-mode small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: #3b4a43; }
.ng-mode.on { border-color: var(--cobalt); box-shadow: inset 0 0 0 2px var(--cobalt); background: #eef3fb; }

/* ---------- Query: growth fix, route query, renewal ---------- */
.rc-fix { margin: 5px 0 0; padding: 5px 8px; background: rgba(46, 125, 87, 0.1); border-left: 3px solid var(--green); font-size: 12.5px; font-weight: 700; color: #1f5a3e; }
.rc-renew { margin-top: 8px; }
.rq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 6px; }
.rq-cols h5 { margin: 0 0 3px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #5b6a62; }
.rq-cols ol { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.4; }
.rq-cols ol li span { color: #5b6a62; font-variant-numeric: tabular-nums; }
.rq-why { margin: 8px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.42; }
.rq-bar { position: relative; height: 10px; margin: 4px 0 2px; background: #d3d9d1; border-radius: 2px; overflow: hidden; }
.rq-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.rq-bar i.c { background: #3d7bd0; } .rq-bar i.f { background: #8a5a14; }
.rq-legend { display: flex; gap: 12px; font-size: 11px; color: #5b6a62; }
.rq-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 1px; vertical-align: -1px; }
.rq-show { margin-top: 8px; }

/* ---------- R demand split by wealth ---------- */
.rcol.rw .rwbars { display: flex; gap: 2px; }
.rci .bar.thin { width: 6px; }
#dem-r1 { filter: saturate(0.85) brightness(1.15); }
#dem-r2 { filter: hue-rotate(-40deg) saturate(1.2) brightness(1.15); }

/* ---------- jukebox ---------- */
.jb-now { padding: 10px 12px; background: var(--slate); color: var(--enamel); border-radius: 3px; font-family: var(--signtext); font-weight: 700; }
.jb-now small { display: block; font-weight: 600; opacity: 0.75; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.jb-list { list-style: none; margin: 10px 0; padding: 0; max-height: 220px; overflow: auto; }
.jb-list li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-bottom: 1px dashed #b8c0b9; font-size: 13.5px; }
.jb-list li.on { font-weight: 800; color: var(--cobalt); }
.jb-list li.broken { opacity: 0.5; text-decoration: line-through; }
.jb-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-list li button { padding: 2px 7px; background: transparent; border: 1px solid #8c968f; border-radius: 3px; font-size: 11px; cursor: pointer; }
.jb-ctl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.jb-ctl input[type=range] { flex: 1; min-width: 120px; }
.jb-drop { margin-top: 10px; padding: 14px; border: 2px dashed #8c968f; border-radius: 4px; text-align: center; color: #3b4a43; font-size: 13px; }
.jb-drop.over { border-color: var(--cobalt); background: #eef3fb; }