/* A fixed game frame. Overflow belongs to the specific reading or work area. */
:root {
  --screen-gutter: clamp(10px, 1.5vw, 26px);
  --screen-gap: clamp(7px, 1vh, 12px);
  --screen-muted: #526a5c;
}
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
#app {
  height: 100vh; height: 100dvh; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
#app > .topbar, #app > .footer, #app > .notice-line { flex: none; }
#main {
  display: flex; flex-direction: column; gap: var(--screen-gap);
  flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; overflow: hidden;
}
#main > .heading-row, #main > .stats, #main > .mission, #main > .screen-panes,
#main > .screen-reading-links { flex: none; }
:where(#main) > .workspace {
  width: 100%; max-width: 1440px; flex: 1 1 0; min-height: 0; min-width: 0;
  margin: 0 auto; padding: 4px var(--screen-gutter) 20px; overflow: auto;
  overscroll-behavior: contain; scroll-padding: 8px; overflow-wrap: break-word;
}
:where(#main) > .workspace > :first-child { margin-top: 0; }
#main .workspace:focus-visible { outline-offset: -3px; }
.topbar {
  position: relative; z-index: 8; height: 53px; min-width: 0;
  padding: 0 var(--screen-gutter); gap: clamp(7px,1vw,18px); flex-wrap: nowrap;
}
.topbar .brand { flex-shrink: 0; gap: 8px; font-size: 19px; white-space: nowrap; }
.brand-logo { width: 35px; height: 35px; border-radius: 9px; }
.brand-sub { margin-top: 1px; color: var(--screen-muted); font-size: 8px; }
.topbar .nav {
  order: initial; width: auto; min-width: 0; height: 100%; flex: 1 1 auto;
  justify-content: center; gap: 2px;
}
.topbar .nav button {
  flex-shrink: 0; padding: 0 clamp(6px, .85vw, 14px); gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--screen-muted);
}
.topbar .nav button.active { color: var(--deep); background: #f0f5ec; }
.topbar .nav button:hover { background: #f0f5ec; }
.topbar .top-actions { flex: none; gap: 5px; }
.top-actions button { min-width: 34px; min-height: 34px; }
.top-actions .pill { padding: 6px 8px; color: var(--screen-muted); }
.screen-menu-toggle { display: none; }
.heading-row { padding: var(--screen-gap) var(--screen-gutter) 0; gap: 12px; align-items: center; }
.heading-row h1 { margin: 2px 0 0; font-size: clamp(21px,2.1vw,30px); line-height: 1.1; }
.heading-row .eyebrow { color: var(--screen-muted); font-size: 10px; letter-spacing: 1.3px; }
.heading-row .hero-sub { color: var(--screen-muted); font-size: 13px; line-height: 1.35; margin-top: 3px; }
.heading-aside { flex: none; }
.heading-aside .btn { min-height: 34px; font-size: 12px; }
.stats {
  margin: 0 var(--screen-gutter); gap: 8px; min-width: 0;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.stat { padding: 6px 9px; gap: 8px; min-width: 0; box-shadow: none; }
.stat-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-label { color: var(--screen-muted); font-size: 12px; line-height: 1.15; margin: 0; }
.stat .num { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-note { color: var(--screen-muted); font-size: 11px; line-height: 1.35; }
.stat-short { display: none; }
.mission {
  margin: 0 var(--screen-gutter); padding: 6px 10px; gap: 9px;
  background: #e8efdf; border-color: #d5e0cb; border-radius: 8px;
}
.mission-icon { flex: none; width: 28px; height: 28px; }
.mission strong { font-size: 14px; line-height: 1.2; }
.mission p { color: #496344; font-size: 12px; line-height: 1.35; margin-top: 2px; }
.mission .btn { flex: none; min-height: 32px; font-size: 12px; padding: 6px 9px; }
.footer {
  min-height: 22px; align-items: center; gap: 8px; padding: 2px var(--screen-gutter);
  color: var(--screen-muted); font-size: 10px; line-height: 1.25;
}
.footer button { color: #285d49; font-size: 11px; min-height: 20px; }
.notice-line { padding: 4px var(--screen-gutter); }
.screen-panes, .screen-reading-links { display: none; }
.screen-reading-links {
  margin: 0 var(--screen-gutter); display: flex; flex-wrap: wrap; gap: 5px;
  align-items: center; font-weight: 650; color: var(--screen-muted); font-size: 12px;
}
.screen-reading-links > span { margin-right: 4px; }
.screen-reading-links button {
  padding: 5px 10px; min-height: 30px; border: 1px solid #cddacc; border-radius: 7px;
  background: #fff; color: #295e4e; font-weight: 700; font-size: 12px;
}
.screen-reading-links button:hover { background: #e8efdf; }
.game-grid {
  width: 100%; flex: 1 1 0; min-width: 0; min-height: 0; display: grid;
  grid-template-columns: clamp(205px,18vw,298px) minmax(0,1fr) clamp(235px,20vw,318px);
  grid-template-rows: minmax(0,1fr); align-items: stretch;
  gap: clamp(8px,1vw,16px); padding: 0 var(--screen-gutter);
}
.game-grid > * { min-width: 0; min-height: 0; }
.game-grid > .panel, .game-grid > .map-panel { width: 100%; }
.game-grid .service-panel { display: flex; flex-direction: column; }
.game-grid .service-panel .panel-head { padding: 8px 12px; flex: none; }
.service-panel .panel-head h3 { margin-top: 1px; font-size: 17px; }
.service-panel .panel-head .eyebrow { color: var(--screen-muted); font-size: 10px; }
.service-panel .panel-head .sub { display: block; font-size: 12px; color: var(--screen-muted); margin: 2px 0 0; line-height: 1.25; }
.game-grid .service-list {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  grid-auto-rows: minmax(min-content,1fr); flex: 1 1 0; min-height: 0; padding: 5px; gap: 4px;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.game-grid .service {
  display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto;
  align-content: center; align-items: center; min-width: 0; min-height: 0;
  padding: 4px 6px; gap: 1px 2px; border-radius: 7px; border-color: #e0e6da; background: #fafbf7;
}
.game-grid .service.selected { border-color: #91ae83; background: #eaf2e3; }
.game-grid .service > span:nth-child(2) { display: contents; }
.game-grid .service-art {
  grid-column: 1; grid-row: 1; width: clamp(24px,4vh,40px); height: clamp(24px,4vh,40px);
  background: transparent;
}
.game-grid .service-art svg { width: 100%; height: 100%; }
.game-grid .service-name {
  grid-row: 2; grid-column: 1/-1; font-size: 13px; line-height: 1.16; color: #274638;
}
.game-grid .service-cat {
  grid-row: 3; grid-column: 1/-1; font-size: 9px; line-height: 1.1; letter-spacing: .35px;
  color: #526853; margin: 1px 0 0;
}
.game-grid .service .price { grid-row: 1; grid-column: 2; font-size: 12px; color: #395f47; }
.game-grid .build-card { flex: none; padding: 8px 10px; border-top: 1px solid #cfddca; }
.screen-build-location { display: block; font-size: 13px; color: #2c4a39; }
.screen-build-details { margin: 3px 0 6px; }
.screen-build-details summary { font-size: 13px; cursor: pointer; color: #315f4c; font-weight: 650; }
.screen-build-details[open] {
  max-height: min(22vh,165px); overflow: auto; overscroll-behavior: contain;
}
.screen-build-details .build-desc, .screen-build-details .build-facts,
.game-grid .completion-note { font-size: 12px; color: var(--screen-muted); line-height: 1.4; margin: 5px 0; }
.build-card .btn { min-height: 35px; padding: 7px 9px; font-size: 13px; }
.game-grid .right-column {
  display: block; grid-column: auto; overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.city-top, .right-column .city-scores, .city-sites { padding: 11px 13px; }
.right-column .city-top { border-right: 0; }
.city-top .eyebrow, .city-scores .eyebrow, .city-sites .eyebrow {
  color: var(--screen-muted); font-size: 10px !important; letter-spacing: 1px;
}
.city-top h2 { font-size: 22px; margin: 3px 0; }
.city-top .sub, .support-row, .city-selector,
.right-column .meter-row, .right-column .meter-row b, .right-column .need-card {
  font-size: 13px; color: var(--screen-muted); line-height: 1.3;
}
.city-selector { min-height: 32px; margin-top: 7px; }
.city-top .support-row { margin-top: 8px; }
.city-top .btn { font-size: 12px; margin-top: 8px !important; }
.right-column .meter-row { margin-bottom: 3px; }
@media (max-height: 850px), (max-width: 900px) {
  .right-column .city-scores { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .city-scores > .eyebrow { grid-column: 1/-1; margin-bottom: 0 !important; }
  .screen-score .meter { margin-bottom: 0 !important; }
  .right-column .screen-score .meter-row { gap: 2px; font-size: 12px; }
}
.right-column .need-card { margin: 0 12px 10px; padding: 8px; color: #6a552b; }
.right-column .site-chip { font-size: 12px; color: var(--screen-muted); }
.game-grid .map-panel {
  position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto;
  min-width: 0; min-height: 0; overflow: hidden; isolation: isolate;
  background: #e7eedf;
}
.map-toolbar {
  position: static; min-width: 0; align-items: center; gap: 8px; padding: 5px 9px;
  background: #f3f7ec; border-bottom: 1px solid #d8e1cf;
}
.map-title { color: #315b43; font-size: 12px; white-space: nowrap; }
.map-sub { font-size: 11px; line-height: 1.2; margin-top: 1px; color: var(--screen-muted); }
.layers { flex-shrink: 0; padding: 2px; }
.layers button { font-size: 12px; color: #536a53; padding: 5px 7px; min-height: 26px; }
.layers button.active { color: #315d38; }
.game-grid .map-svg {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; touch-action: manipulation;
  background: #e8eedf;
}
.map-legend {
  position: static; min-height: 33px; padding: 5px 82px 5px 10px; align-items: center;
  gap: 8px; flex-wrap: wrap; font-size: 11px; line-height: 1.2; color: #4d6550;
  border-top: 1px solid #d8e1cf; background: #f3f7ec;
}
.zoom { right: 5px; bottom: 3px; flex-direction: row; align-items: center; gap: 3px; }
.zoom button { width: 32px; height: 27px; color: #325d40; }
.north { top: 56px; right: 10px; pointer-events: none; }
.modal-backdrop { max-width: 100%; padding: clamp(6px,2vh,22px); }
.modal {
  max-width: 100%; max-height: calc(100vh - 2 * clamp(6px,2vh,22px));
  max-height: calc(100dvh - 2 * clamp(6px,2vh,22px)); overscroll-behavior: contain;
}
.modal:not(:has(.district-workspace)) { scrollbar-width: thin; }
.modal .modal-body { overflow-wrap: break-word; }
.toast { bottom: max(8px,env(safe-area-inset-bottom)); max-width: min(92%,610px); width: max-content; }
@media (max-width: 1200px) {
  .stat-note, .top-actions .save-label { display: none; }
  .topbar .nav svg { display: none; }
  .topbar .top-actions { gap: 4px; }
  .top-actions .toolbar-text { display: none; }
}
@media (max-width: 1020px) {
  .topbar .nav button { font-size: 12px; padding: 0 7px; }
  .topbar .brand { font-size: 16px; }
  .topbar .brand-logo { width: 31px; height: 31px; }
  .heading-aside .term-badge { display: none; }
}
@media (max-width: 900px), (max-height: 545px) {
  .screen-panes {
    display: flex; align-self: center; align-items: stretch; gap: 2px; padding: 2px;
    border: 1px solid #d5dfd1; background: #e8eee2; border-radius: 9px;
  }
  .screen-panes button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 83px; min-height: 30px; padding: 4px 10px;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    color: #48644a; font-weight: 750; font-size: 13px;
  }
  .screen-panes button[aria-pressed="true"] { background: #fff; color: #1c5140; border-color: #bfcebb; }
  .screen-panes button:focus-visible { outline-offset: -2px; }
  .game-grid { display: grid; grid-template-columns: minmax(0,1fr); }
  .game-grid[data-pane] > * { display: none; order: initial; grid-column: 1; grid-row: 1; }
  .game-grid[data-pane="map"] > .map-panel { display: grid; }
  .game-grid[data-pane="build"] > .service-panel { display: flex; }
  .game-grid[data-pane="region"] > .right-column { display: block; }
  .game-grid .service-list { grid-auto-rows: minmax(min-content,1fr); }
  .game-grid .service { grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: repeat(2,auto); column-gap: 6px; }
  .game-grid .service-art { grid-area: 1/1/3/2; width: 36px; height: 36px; }
  .game-grid .service-name { grid-area: 1/2/2/3; font-size: 14px; }
  .game-grid .service-cat { grid-area: 2/2/3/3; }
  .game-grid .service .price { grid-area: 1/3/3/4; }
  .game-grid .right-column .city-top, .game-grid .right-column .city-scores,
  .game-grid .right-column .city-sites { padding: 11px 15px; }
  .game-grid .city-top .sub { font-size: 13px; }
}
@media (max-width: 780px) {
  .topbar { justify-content: flex-start; height: 44px; padding: 0 var(--screen-gutter); gap: 8px; }
  .screen-menu-toggle {
    display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 33px; padding: 0 7px;
    background: #eef4e9; border: 1px solid #d0decc; border-radius: 7px; color: #2e604b; font-size: 12px; font-weight: 700;
  }
  .topbar .nav {
    display: none; position: absolute; top: calc(100% + 3px); left: var(--screen-gutter);
    width: min(260px,calc(100% - 2 * var(--screen-gutter))); height: auto;
    max-height: calc(100vh - 52px); max-height: calc(100dvh - 52px); overflow: auto;
    flex-direction: column; align-items: stretch; justify-content: start;
    gap: 2px; padding: 5px; border: 1px solid #cdd9c9; border-radius: 9px;
    background: #fff; box-shadow: 0 8px 26px #244c3c2b;
  }
  .topbar.screen-menu-open .nav { display: flex; }
  .topbar .nav button { font-size: 14px; justify-content: start; padding: 6px 10px; min-height: 36px; border: 0; border-radius: 5px; }
  .topbar .nav button.active { color: #1d5543; }
  .topbar .nav svg { display: block; }
  .topbar .top-actions { margin-left: auto; }
  .topbar .top-actions .pill { display: none; }
  .topbar .top-actions .save-warning { display: flex; }
  .stat-full { display: none; }
  .stat-short { display: inline; }
  .stats { gap: 5px; }
  .stat { padding: 4px 6px; }
  .heading-row .hero-sub { display: none; }
  .mission { gap: 6px; }
  .mission p { font-size: 12px; }
}
@media (max-width: 600px) {
  :root { --screen-gap: 5px; --screen-gutter: 8px; }
  .topbar .brand { font-size: 15px !important; gap: 5px; }
  .topbar .brand-logo { width: 28px; height: 28px; border-radius: 7px; }
  .brand-logo svg { width: 24px; height: 24px; }
  .brand-sub { font-size: 7px; letter-spacing: 1px; }
  .heading-row { padding-top: 5px; }
  .heading-row h1 { font-size: 21px; }
  .heading-row .eyebrow { font-size: 9px; letter-spacing: .7px; }
  .heading-aside .btn { font-size: 11px; min-height: 30px; padding: 4px 6px; }
  .stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .stat { justify-content: center; text-align: center; padding: 4px 2px; border-radius: 7px; }
  .stat-icon { display: none; }
  .stat-label { font-size: 11px; }
  .stat .num { font-size: 17px; }
  .mission { padding: 5px 7px; }
  .mission p { display: none; }
  .mission strong { display: block; font-size: 12px; line-height: 1.25; }
  .mission .btn { font-size: 11px; min-height: 30px; padding: 5px 6px; max-width: 48%; white-space: normal; }
  .map-toolbar { padding: 4px 7px; }
  .map-title { font-size: 12px; }
  .map-sub { font-size: 10px; }
  .layers button { font-size: 12px; padding: 4px 6px; }
  .map-legend { padding-left: 7px; font-size: 10px; gap: 5px; }
  .screen-panes { width: calc(100% - 2 * var(--screen-gutter)); }
  .screen-panes button { flex: 1; min-width: 0; }
  .game-grid .service-list { gap: 2px; }
  .game-grid .service { padding: 2px 4px; gap: 4px; }
  .game-grid .service-name { font-size: 13px; }
  .game-grid .service-art { width: 31px; height: 31px; }
  .game-grid .service .price svg { display: none; }
  .game-grid .build-card { padding: 6px 9px; }
  .footer { min-height: 20px; font-size: 9px; }
  .footer .no-mobile { display: none; }
  .footer button { font-size: 10px; }
  .section-intro { margin-bottom: 10px; }
  .workspace .info-strip, .workspace .sub, .workspace .minister-card p,
  .workspace .candidate p, .workspace .candidate small { font-size: 13px; }
  .workspace .minister-card select { font-size: 13px; }
  .screen-reading-links { gap: 3px; }
  .screen-reading-links button { min-height: 28px; }
}
@media (max-width: 420px) {
  .topbar { gap: 5px; }
  .topbar .top-actions { gap: 3px; }
  .topbar .top-actions button { padding: 0 4px; min-width: 28px; min-height: 31px; }
  .topbar .top-actions .sound-toggle { min-height: 31px; }
  .topbar .top-actions .icon-btn { width: 30px; height: 31px; }
  .top-actions button .toolbar-text { display: none; }
  .screen-menu-toggle { padding: 0 5px; }
}
@media (max-width: 360px) {
  .topbar .brand-logo { display: none; }
  .game-grid .service-art { width: 23px; height: 23px; }
}
@media (max-height: 735px) and (min-width: 601px) {
  .topbar { height: 45px; }
  .heading-row .hero-sub { display: none; }
  .heading-row h1 { font-size: 23px; }
  .stat { padding: 4px 8px; }
  .stat .num { font-size: 18px; }
}
@media (max-height: 545px) {
  :root { --screen-gap: 3px; --screen-gutter: 7px; }
  .topbar { height: 38px; }
  .topbar .brand-logo { width: 27px; height: 27px; }
  .heading-row { padding-top: 2px; }
  .heading-row h1 { font-size: 17px; margin: 0; }
  .heading-row .eyebrow { font-size: 8px; letter-spacing: .5px; }
  .heading-row .hero-sub, .heading-aside .term-badge, .stat-note, .stat-icon,
  .map-sub, .north { display: none; }
  .heading-aside .btn { min-height: 26px; padding: 3px 6px; }
  .stat { padding: 2px 4px; text-align: center; justify-content: center; }
  .stat > div { display: flex; gap: 4px; align-items: baseline; justify-content: center; flex-wrap: wrap; }
  .stat .num { font-size: 15px; }
  .stat-label { font-size: 11px; }
  .stat-full { display: none; } .stat-short { display: inline; }
  .mission { padding: 2px 6px; }
  .mission-icon, .mission p { display: none; }
  .mission strong { font-size: 12px; }
  .mission .btn, .screen-reading-links button { min-height: 25px; padding: 2px 6px; }
  .screen-panes { padding: 1px; }
  .screen-panes button { min-height: 25px; padding: 2px 8px; }
  .map-toolbar { padding: 1px 6px; }
  .layers button { min-height: 23px; padding: 2px 6px; }
  .map-legend { min-height: 26px; }
  .zoom { bottom: 1px; } .zoom button { height: 23px; }
  .game-grid .service-panel .panel-head { padding: 4px 9px; }
  .service-panel .panel-head .eyebrow, .service-panel .panel-head .sub { display: none; }
  .game-grid .build-card { padding: 4px 7px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; align-items: center; }
  .screen-build-location { font-size: 11px; }
  .screen-build-details { grid-column: 1; margin: 0; }
  .build-card .btn { grid-column: 2; grid-row: 1 / 3; min-height: 30px; }
  .build-card .completion-note { grid-column: 1 / -1; margin: 0; font-size: 11px; }
  .footer { min-height: 16px; padding-block: 0; }
  .footer button { min-height: 16px; }
}
@media (max-height: 545px) and (min-width: 600px) {
  #main { display: grid; grid-template-columns: minmax(180px,.75fr) minmax(0,1.75fr); grid-auto-rows: max-content; }
  #main > * { grid-column: 1 / -1; }
  #main > .heading-row { grid-column: 1; grid-row: 1; padding-right: 0; align-self: center; }
  #main > .stats { grid-column: 2; grid-row: 1; align-self: center; margin-right: var(--screen-gutter); margin-left: 0; }
  #main[data-screen="province"] { grid-template-rows: auto auto minmax(0,1fr); }
  #main[data-screen="province"] > .mission { grid-column: 1 / -1; grid-row: 2; margin-right: 269px; align-self: stretch; }
  #main[data-screen="province"] > .screen-panes { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-right: var(--screen-gutter); }
  #main > .game-grid, #main > .workspace { grid-column: 1/-1; align-self: stretch; }
  #main:not([data-screen="province"]) { grid-template-rows: auto minmax(0,1fr); }
  #main:has(> .screen-reading-links) { grid-template-rows: auto auto minmax(0,1fr); }
}
.map-svg .city-target > g:last-child text { font-size: 12px; }
@media (max-height: 420px) and (min-width: 600px) {
  .game-grid .service-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 380px) {
  .top-actions .tool-label { display: none; }
  .heading-aside { gap: 4px; }
}
@media (max-height: 545px) and (min-width: 600px) {
  #main:is([data-screen="cabinet"], [data-screen="legislature"]) {
    grid-template-columns: minmax(248px,1fr) minmax(0,1.1fr);
  }
}

/* Keep the everyday choices visible; secondary tools open in one disclosure. */
.app-more { position: relative; }
.app-more > summary, .stats-more > summary {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 36px; padding: 7px 11px; cursor: pointer; list-style: none;
  border: 1px solid #cddacc; border-radius: 8px; background: #f5f8f0;
  color: #285a43; font-size: 13px; font-weight: 750; white-space: nowrap;
}
.app-more > summary::-webkit-details-marker, .stats-more > summary::-webkit-details-marker { display: none; }
.app-more[open] > summary svg, .stats-more[open] > summary svg { transform: rotate(90deg); }
.app-more > summary:focus-visible, .stats-more > summary:focus-visible { outline: 3px solid #bb822e; outline-offset: 2px; }
.app-more-panel, .stats-more-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 12;
  width: min(270px,calc(100vw - 20px)); max-height: calc(100dvh - 108px);
  overflow: auto; overscroll-behavior: contain; padding: 9px;
  border: 1px solid #cdd9c9; border-radius: 10px; background: #fff;
  box-shadow: 0 10px 28px #244c3c2b;
}
.app-more-panel .menu-label { padding: 8px 9px 4px; color: #62735f; font-size: 11px; font-weight: 750; }
.app-more-panel button, .app-more-panel a {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px;
  padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
  color: #2d513d; font-size: 14px; font-weight: 650; text-align: left; text-decoration: none;
}
.app-more-panel button:hover, .app-more-panel button.active, .app-more-panel a:hover { background: #eaf2e3; }
.app-more-panel p { padding: 8px 9px 3px; color: #62735f; font-size: 12px; line-height: 1.4; }
.stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: stretch; }
.stats-more { position: relative; align-self: center; }
.stats-more > summary { border-color: transparent; background: transparent; font-size: 12px; }
.stats-more-panel { width: min(340px,calc(100vw - 20px)); max-height: min(40vh,240px); }
.stats-more-panel .stat { margin: 0 0 6px; min-height: 58px; }
.stats-more-panel .stat-note { display: block; max-width: 125px; }
.mission-label { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800; color: #53694b; text-transform: uppercase; letter-spacing: .7px; }
.mission strong { display: block; }
.mission > div { min-width: 0; }
.mission .btn { margin-left: auto; }
body.in-chamber #main { display: flex; }
body[data-entry="assembly"] #app {
  box-sizing: border-box; background: #091c1e;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body[data-entry="assembly"] #main { display: flex; flex: 1 1 0; min-height: 0; padding: 0; gap: 0; }
@media (max-width: 780px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 82px; padding-block: 5px; gap: 4px 8px; }
  .topbar .brand { flex: 1 1 auto; }
  .screen-menu-toggle { display: none; }
  .topbar .top-actions { order: 2; margin-left: auto; }
  .topbar .nav, .topbar.screen-menu-open .nav {
    order: 3; display: flex; position: static; flex: 1 0 100%; width: 100%; height: 32px;
    max-height: none; overflow: visible; flex-direction: row; justify-content: center;
    padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  }
  .topbar .nav button { flex: 1; min-height: 32px; justify-content: center; padding: 4px 6px; font-size: 13px; }
  .topbar .nav svg { display: none; }
  .app-more > summary { min-height: 32px; padding: 5px 9px; }
  .stats-more > summary { max-width: 92px; padding: 5px 3px; white-space: normal; line-height: 1.15; }
  .stats-more > summary svg { display: none; }
  .stats-more-panel .stat { justify-content: flex-start; text-align: left; }
  .stats-more-panel .stat-note { margin-left: auto; }
}
@media (max-height: 545px) and (min-width: 600px) {
  #main:not([data-screen="province"]) { grid-template-rows: auto auto minmax(0,1fr); }
  #main:has(> .screen-reading-links) { grid-template-rows: auto auto auto minmax(0,1fr); }
  .mission-label { font-size: 9px; margin: 0; }
  .topbar { min-height: 38px; flex-wrap: nowrap; }
  .topbar .brand { flex: none; }
  .topbar .nav, .topbar.screen-menu-open .nav { order: initial; flex: 1 1 auto; width: auto; }
  .topbar .top-actions { order: initial; }
}