/* Field Ledger (numbers-based branch): the layout's last layer, loaded after every other
   stylesheet. Square corners, hairline dividers and filled accent marks:
   the top bar under an accent rule, the bottom bar's four tabs (Story, Self,
   Inventory, World) with the open one filled, the check card's outcome bar,
   speaker blocks and the turn summary as cards, the tools sheet and People
   here as cards with a heading, each record panel under a "Field records"
   heading, the character's card over their full figure (character.css),
   continuous meters (the inventory's own in inventory.css), and on a wide screen
   a wider side panel beside the story. No strip of pools over the story: Self
   shows them. Tokens from tokens.css. */
:root{--ledger-radius:2px}

/* The eyebrow over a heading. */
.eyebrow{margin:0;font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* Top bar: an accent rule under it, the title in the text colour. */
.topbar{border-bottom:2px solid var(--accent-700)}
.campaign-title b{font:500 var(--size-compact)/1.3 var(--head);color:var(--text)}
.campaign-avatar{border-radius:var(--ledger-radius)}
.top-actions button,.top-actions .here-button{border-radius:var(--ledger-radius)}

/* Bottom bar on phones: four named tabs between hairlines, the open one filled. */
@media(max-width:800px){
  :root{--mobile-nav:calc(58px + env(safe-area-inset-bottom))}
  .mobile-nav{padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));border-top:1px solid var(--stone-700)}
  .mobile-nav button{gap:2px;border-right:1px solid var(--stone-700);border-radius:var(--ledger-radius);color:var(--muted);font:500 var(--size-tiny)/1.2 var(--head);letter-spacing:.02em}
  .mobile-nav button:last-child{border-right:0}
  .mobile-nav button .material-symbols-outlined{width:auto;height:auto;border-radius:0;background:none;font-size:21px}
  .mobile-nav button.active{border-color:transparent;background:var(--accent);color:var(--on-accent);font-size:var(--size-tiny)}
  .mobile-nav button.active .material-symbols-outlined{background:none;color:var(--on-accent)}
  .mobile-nav button:has(+ .active){border-right-color:transparent}
}

/* The check card: a bar down the left in the outcome's colour. */
.check-card{padding:12px 13px;border:0;border-left:3px solid var(--ok);border-radius:var(--ledger-radius);background:var(--surface-raised)}
.check-card:has(.check-outcome.mixed){border-left-color:var(--warn)}
.check-card:has(.check-outcome.bad){border-left-color:var(--danger)}
.check-card .check-head{font:500 var(--size-tiny)/1.5 var(--head);letter-spacing:.08em;text-transform:uppercase}
.check-card .check-outcome{margin:3px 0 1px;font:500 var(--size-body)/1.4 var(--head)}
.check-card .check-strikes{margin-top:9px;padding-top:8px;border-top-color:var(--stone-700)}

/* Speaker blocks and the turn summary as quiet cards. */
.speaker-line{padding:8px 10px 10px 12px;border-radius:0 var(--ledger-radius) var(--ledger-radius) 0;background:var(--surface-low)}
.speaker-line.continued{margin-top:-.6em;padding-top:2px}
.turn-summary{overflow:hidden;border:1px solid var(--stone-700);border-radius:var(--ledger-radius);background:var(--surface)}
.turn-summary>.summary-when,.turn-summary>.summary-vitals,.turn-summary-toggle{border-top:0;border-bottom:0}
.turn-summary>.summary-when,.turn-summary-toggle{padding-top:12px}
.turn-summary>.summary-vitals,.turn-summary-toggle{padding-bottom:12px}
button.turn-summary-toggle:hover{border-color:transparent}
.turn-summary-detail{border-top:1px solid var(--stone-700);border-bottom:0}
.message.notice,.cloud-status,.edit-bar,.working-bar{border-radius:0}

/* The chat bar: square tools button and action box, a filled Send. */
.tools-button,.composer #send,.composer .turn-stop,.turn-ring,.jump-latest{border-radius:var(--ledger-radius)}
.composer textarea,.turn-status{border-color:var(--stone-700);border-radius:var(--ledger-radius)}
.composer textarea{font:var(--size-body)/1.35 var(--head)}
.composer #send{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.composer #send:hover,.composer #send:focus-visible{border-color:var(--accent-200);background:var(--accent-300)}
.composer #send:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The tools sheet: a card over the dimmed story, a heading, underlined tabs. */
.tools-sheet{left:var(--composer-pad);right:var(--composer-pad);bottom:calc(100% + 10px);max-width:560px;max-height:min(66vh,560px);border:1px solid var(--accent-700);border-radius:var(--ledger-radius);box-shadow:0 0 0 100vmax rgb(var(--black-rgb) / .62),var(--shadow-pop)}
.tools-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);padding:16px 8px 6px 16px}
.tools-head h2{margin:4px 0 0;font:500 var(--size-display)/1.1 var(--body);color:var(--text)}
.tools-close,.here-close{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--ledger-radius);background:none;color:var(--text-dim)}
.tools-close:hover,.tools-close:focus-visible,.here-close:hover,.here-close:focus-visible{color:var(--accent);background:var(--accent-950)}
.tools-close:focus-visible,.here-close:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tools-tabs{gap:0;margin:0 16px;padding:6px 0 0;border-bottom:1px solid var(--stone-700)}
.tools-tabs button{border:0;border-radius:0;background:none;color:var(--muted)}
.tools-tabs button[aria-selected=true]{background:var(--accent-950);color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.picker-group{padding-inline:16px}
.picker-add{border-radius:var(--ledger-radius)}
.picker-pill{border:1px solid var(--accent-750);border-radius:var(--ledger-radius);background:var(--accent-950)}
.picker-facts li,.picker-wait,.picker-short{border-radius:var(--ledger-radius)}
.tools-panel .picker-list>:first-child{border-top:0}
.tools-hint{margin:0;padding:10px 16px 14px;border-top:1px solid var(--stone-850);color:var(--muted);font:var(--size-caption)/1.4 var(--head)}
.narration-menu{padding:10px 16px 16px}
.narration-menu #narrator-style-button,.narration-standard select,.narration-model select{border-radius:var(--ledger-radius)}
@media(max-width:800px){.tools-sheet{left:10px;right:10px;max-width:none}}

/* People here: a card with a heading and a close button; square faces. */
.here-list{padding:0;border-color:var(--accent-700);border-radius:var(--ledger-radius)}
.here-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);padding:14px 6px 10px 14px;border-bottom:1px solid var(--stone-850)}
.here-head h2{margin:3px 0 0;font:500 var(--size-title)/1.15 var(--body);color:var(--text)}
.here-list ul{padding:6px}
.here-row{border-radius:var(--ledger-radius)}
.here-list .here-face,.person-sheet .here-face{border-radius:var(--ledger-radius)}
.here-health,.sheet-health{border-radius:0}

/* Dialogs, cards and pills: square. */
.dialog-card,.entry-menu,.turn-records,.toast{border-radius:var(--ledger-radius)}
.status-card,.inventory-card,.character-card{padding:14px;border-color:var(--stone-700);border-radius:var(--ledger-radius);background:var(--surface)}
.status-card h2,.inventory-card h2,.character-card h2{font:600 var(--size-caption)/1.4 var(--head);letter-spacing:.16em}
.character-card>header{border-bottom-color:var(--stone-850)}
.person-card,.tag,.fate-badge,.magic-ability,.character-when{border-radius:var(--ledger-radius)}
@media(max-width:480px){.status-card,.inventory-card,.character-card{padding:12px;border-radius:var(--ledger-radius)}}

/* The record panels: a "Field records" heading over each, and on a phone
   the World tab's switch between People and Lore. */
:root{--panel-pad:18px}
@media(max-width:800px){:root{--panel-pad:12px}}
@media(max-width:480px){:root{--panel-pad:10px}}
@media(min-width:1200px){:root{--panel-pad:22px}}
.panel-head{padding:0 0 calc(var(--panel-pad) + 2px)}
.panel-head h2{margin:2px 0 0;font:600 var(--size-title)/1.15 var(--head);letter-spacing:-.03em;color:var(--text)}
.world-picker{display:grid;grid-template-columns:repeat(var(--world-tabs,2),minmax(0,1fr));gap:1px;margin-top:12px;border:1px solid var(--stone-700);background:var(--stone-700)}
.world-picker button{min-height:44px;border:0;border-radius:0;background:var(--surface);color:var(--muted)}
.world-picker button[aria-pressed=true]{background:var(--accent-950);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.world-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(min-width:801px){.world-picker{display:none}}

/* Section tabs inside a panel: a ruled grid, the open one with an accent edge. */
.panel-body :is(.character-subtabs,.lore-subtabs,.subtabs){gap:1px;margin:0 0 16px;border:1px solid var(--stone-700);background:var(--stone-700)}
.panel-body :is(.character-subtabs,.lore-subtabs){top:calc(-1 * var(--panel-pad));margin-bottom:calc(var(--panel-pad) + 4px);box-shadow:0 0 0 var(--panel-pad) var(--surface-low)}
.panel-body :is(.character-subtabs,.lore-subtabs,.subtabs) button{min-height:44px;background:var(--surface);color:var(--muted);box-shadow:none}
.panel-body :is(.character-subtabs,.lore-subtabs,.subtabs) button.active{background:var(--accent-950);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}

/* Meters as one continuous bar, filled to --fill in each pool's colours. */
.condition-heading{font:var(--size-label)/1.4 var(--head)}
.condition-meter{display:block;height:7px;background:var(--meter) 0 0/var(--fill,0%) 100% no-repeat,var(--stone-850)}
.condition-meter>span{display:none}
.condition-health{--meter:linear-gradient(90deg,var(--health-from),var(--health-to))}
.condition-stamina{--meter:linear-gradient(90deg,var(--stamina-from),var(--stamina-to))}
.condition-hunger{--meter:linear-gradient(90deg,var(--hunger-from),var(--hunger-to))}
.condition-thirst{--meter:linear-gradient(90deg,var(--thirst-from),var(--thirst-to))}
.condition-mana{--meter:linear-gradient(90deg,var(--mana-from),var(--mana-to))}
.character-progress{height:6px;border-radius:0}

/* On a wide screen the side panel is wider (532px: what the condition rail
   left of the story and the panel took together until v8.0.3). */
@media(min-width:1100px){.app-layout{grid-template-columns:minmax(0,1fr) 532px}}

/* Taps of at least 44px: the top bar, the record panels' override and ledger controls. */
.campaign-title{min-height:44px}
@media(max-width:480px){.top-actions button{width:44px;height:44px}}
@media(max-width:360px){.top-actions button{width:44px;height:44px}}
:is([data-people-lock],[data-quest-lock]){min-height:44px;border-radius:var(--ledger-radius)}
.dialog-card>header .icon{display:grid;place-items:center;min-width:44px;min-height:44px;margin:-6px -8px -6px 0}
.person-ledger summary{padding-block:13px}
.panel-body .add-row :is(input,button){min-height:44px;border-radius:var(--ledger-radius)}
.panel-body .add-row button{min-width:44px}