/* The refereed table (Pages/Table.cshtml, docs/Refereed_Engine.md §6). The structure is a
   Bauhaus manual: a calm grid, every area in its own place, nothing floating. The mood is dark
   fantasy (the feel of ThemeForest's "Dragonic", none of its files): gold Cinzel headings with a
   thin ornament, dark panels, and a faint dither only in the gutters, never behind text. Body
   text is Atkinson Hyperlegible; every size is in rem, so it follows the browser's zoom. */

:root {
    --ground: #121116;
    --panel: #1c1b21;
    --panel-2: #25232b;
    --line: #3a3741;
    --text: #ebe6dc;
    --muted: #aaa49a;
    --gold: #d9a24e;
    --gold-2: #ecc078;
    --danger: #e0806a;
    /* A roll's total: its own colour, apart from the gold of names. */
    --result: #8fd3ea;
    --radius: 0.375rem;
    --gap: 0.75rem;
    --font-text: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", sans-serif;
    --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, monospace;
    --font-head: "Cinzel", Georgia, serif;
    color-scheme: dark;
}

/* Cinzel (SIL OFL 1.1, lib/cinzel/LICENSE): Roman capitals, for headings only. */
@font-face {
    font-family: "Cinzel";
    src: url("../lib/cinzel/files/cinzel-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}

/* Atkinson Hyperlegible Next and Mono (SIL OFL 1.1), as the Player has them. */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../lib/atkinson-next/files/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../lib/atkinson-next/files/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("../lib/atkinson-mono/files/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

/* The dither: a fine dot pattern on the ground, so it shows only in the gutters between panels. */
body {
    margin: 0;
    min-height: 100dvh;
    background-color: var(--ground);
    background-image: radial-gradient(rgba(217, 162, 78, 0.07) 1px, transparent 1.2px);
    background-size: 4px 4px;
    color: var(--text);
    font: 1rem/1.55 var(--font-text);
}

a { color: var(--gold-2); }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
code, kbd { font-family: var(--font-mono); }
kbd { padding: 0 0.3em; border: 1px solid var(--line); border-radius: 0.2rem; background: var(--panel-2); font-size: 0.9em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--danger); }
svg.lucide { width: 1rem; height: 1rem; vertical-align: -0.15em; }

/* Headings: gold Roman capitals, a thin rule with a diamond at its middle under each. */
h1, h2 {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.08em;
    margin: 0 0 0.9rem;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em; }
h1::after, h2::after {
    content: "";
    display: block;
    height: 0.6rem;
    margin-top: 0.35rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23d9a24e'/%3E%3C/svg%3E") center / 0.6rem 0.6rem no-repeat,
        linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { border-color: var(--gold); color: var(--text); }
.button.primary { background: var(--gold); border-color: var(--gold); color: var(--ground); font-weight: 700; }
.button.primary:hover { background: var(--gold-2); }
button.quiet { background: none; border: none; padding: 0; color: var(--gold-2); font: inherit; text-decoration: underline; cursor: pointer; }

input[type="text"], textarea {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ground);
    color: var(--text);
    font: inherit;
}
::placeholder { color: #7d786f; }

/* The header: where you are on the left, who you are on the right. */
.table-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.table-top .where { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 600; color: var(--gold); letter-spacing: 0.06em; }
.table-top .where a { color: var(--gold); text-decoration: none; display: inline-flex; }
.table-top .where code { font-size: 0.9rem; color: var(--muted); letter-spacing: 0.1em; }
.table-top .who { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: var(--muted); }
.table-top .who strong { color: var(--text); }
/* The profile: the name, and under it a small menu (Sign out). */
.profile { position: relative; }
.profile > summary { display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.4rem; border-radius: var(--radius); list-style: none; cursor: pointer; }
.profile > summary::-webkit-details-marker { display: none; }
.profile > summary:hover, .profile[open] > summary { background: var(--panel-2); }
.profile[open] > summary svg { transform: rotate(180deg); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 20; min-width: 13rem; padding: 0.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.45); }
.profile-menu a { text-decoration: none; }
.profile-menu button, .profile-menu a { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.6rem; background: none; border: none; border-radius: var(--radius); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.profile-menu button:hover, .profile-menu button:focus-visible, .profile-menu a:hover, .profile-menu a:focus-visible { background: var(--panel-2); color: var(--gold-2); }
.table-top form { margin: 0; }

/* The lobby and sign-in: cards on a narrow column. */
.table-page { max-width: 48rem; margin: 2rem auto; padding: 0 1rem; display: flex; flex-direction: column; gap: var(--gap); }
.table-card { padding: 1.25rem 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.table-card p { margin: 0 0 0.8rem; }
.table-card p:last-child { margin-bottom: 0; }
.table-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--gap); }
/* The GM's Invites fold: the door, a link to make, the one made, and who's waiting or in. */
.door { display: grid; gap: 0.2rem; margin: 0.4rem 0 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.invite-form { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.4rem 0.6rem; }
.invite-form button { grid-column: 1 / -1; }
.invite-made { margin: 0.8rem 0; padding: 0.6rem; border: 1px solid var(--gold); border-radius: var(--radius); }
.invite-link { display: block; overflow-wrap: anywhere; margin: 0.4rem 0; font-size: 0.8rem; }
.invite-list, .member-list { margin: 0 0 0.8rem; padding: 0; list-style: none; }
.invite-list li, .member-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.25rem 0; }
.invite-list .button, .member-list .button { margin-left: auto; }

/* A world in the lobby: its name with the diamond rule, its GM's tools folded, then its campaigns' cards. */
.world { display: flex; flex-direction: column; gap: calc(var(--gap) / 2); }
.world-head { display: flex; align-items: baseline; gap: 0.8rem; }
.world-head h2 { margin-bottom: 0; }
.world-tools { padding: 0.6rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.world-tools form { margin: 0.6rem 0; }
.campaign h3 { margin: 0 0 0.4rem; font-family: var(--font-head); color: var(--gold-2); font-size: 1.05rem; letter-spacing: 0.06em; }
.campaign h4 { margin: 0.8rem 0 0.3rem; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

.sessions { list-style: none; margin: 0; padding: 0; }
.sessions li { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.sessions li:first-child { border-top: none; padding-top: 0; }
.sessions .name a { font-weight: 700; text-decoration: none; }
.sessions .name code { margin-left: 0.5rem; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; }
.sessions .part, .sessions time { color: var(--muted); font-size: 0.9rem; }
.sessions form { margin: 0; }
/* The operator's page: a player a row. */
.players li { grid-template-columns: 1fr auto auto; }
/* A provider's player id is 34 letters with no space: it wraps rather than widen a phone's page. */
.players .name { min-width: 0; }
.players .name code { overflow-wrap: anywhere; }
.players .name .part { margin-top: 0.15rem; }
/* Finding one: the box, what it found, the kinds and sorts as links (the one shown underlined
   gold), and Next and Previous. */
.operator .find { margin-bottom: 0.6rem; }
.operator .found a { margin-left: 0.5rem; }
.picks { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.6rem; font-size: 0.95rem; }
.picks a { color: var(--muted); text-decoration: none; }
.picks a:hover { color: var(--text); }
.picks a[aria-current="page"] { color: var(--gold-2); text-decoration: underline; text-underline-offset: 0.25em; }
.paging { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.8rem; }
/* A player's own page: their tables, each a short list. */
.player-file h2 { margin-top: 1.2rem; }
.player-file code { overflow-wrap: anywhere; }
/* A date stays whole, never 2026-10- on one line and 26 on the next. */
.player-file .day { white-space: nowrap; }
.player-file ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.player-file li { margin: 0.2rem 0; }
/* Back from a form whose page had gone stale (StaleForms), above the page. */
.stale { max-width: 48rem; margin: 1rem auto 0; padding: 0 1rem; }
/* Why a form wasn't done (Shared/_Errors), as the EchoTool shows it. */
.errors { margin: 0 0 0.8rem; padding: 0.6rem 0.9rem; border: 1px solid var(--danger); border-radius: var(--radius); background: rgba(224, 128, 106, 0.12); }
.errors ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.one-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; }
.one-line input { min-width: 0; }

/* Sign-in: the card says where the link leads, the providers stack, and what the table keeps
   is said in small type under them. */
.sign-in { max-width: 34rem; }
.sign-in .joining strong { color: var(--gold); }
.sign-in .said { color: var(--text); }
.providers { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 0.9rem; }
.providers .button { justify-content: center; }
.sign-in .keeps { font-size: 0.85rem; }

/* A session: three columns filling the window under the header. The page itself never
   scrolls; each column does on its own. */
body.in-session { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.session {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr) 19rem;
    gap: var(--gap);
    padding: var(--gap);
}
.session > * { min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* The pad: tab dividers down its edge, the page beside them. */
/* A player plays from their sheet, so their pad is wider; the GM's pad is notes. */
.session.player-screen { grid-template-columns: 24rem minmax(0, 1fr) 17rem; }
.pad { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; }
.tabs { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; border-right: 1px solid var(--line); background: var(--panel-2); }
.tabs [role="tab"] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 0.7rem 0.35rem;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    color: var(--muted);
    font: 600 0.8rem var(--font-head);
    letter-spacing: 0.12em;
    cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--gold); border-left-color: var(--gold); background: var(--panel); }
.pad-page { display: flex; flex-direction: column; min-height: 0; padding: 0.9rem; overflow-y: auto; }
.pad-page[hidden] { display: none; }
.pad textarea { flex: 1; min-height: 8rem; width: 100%; resize: none; line-height: 1.5; }
.pad .small { margin: 0.5rem 0 0; }

/* The centre: the views over the chat. */
.centre { display: flex; flex-direction: column; overflow: hidden; }
.views {
    flex: 0 0 9rem;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background-color: var(--ground);
    background-image: radial-gradient(rgba(235, 230, 220, 0.06) 1px, transparent 1.2px);
    background-size: 3px 3px;
}
.views p { margin: 0; padding: 0.4rem 0.8rem; background: var(--ground); }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0.75rem 1rem; }
.line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55rem; padding: 0.3rem 0; overflow-wrap: anywhere; }
.line time { flex: 0 0 auto; color: var(--muted); font-size: 0.75rem; font-family: var(--font-mono); }
.line .author { color: var(--text); }
.line .author.dm { color: var(--gold); }
.line .role { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; padding: 0 0.3em; border: 1px solid currentColor; border-radius: 0.2rem; vertical-align: 0.1em; }
.line .text { flex: 1 1 12rem; white-space: pre-line; }
.line.rolled .text { font-family: var(--font-mono); }
/* An emote is the story, not the table's talk: in italics, under the character's name. */
.line .text.emote { font-style: italic; }
/* A shout is drawn larger and heavier, never by colour alone; a whisper is a private line, with its edge and its note of who sees it. */
.line .text.shouted { font-size: 1.25em; font-weight: 700; }
/* The GM's way from a player's line to a check or their sheet: the name is a button, the line
   opens the same menu on a right-click; nothing shows until it's wanted. */
.line .menu-name { cursor: pointer; text-decoration: underline dotted var(--gold-2); text-underline-offset: 3px; }
.line .menu-name:hover, .line .menu-name:focus-visible { color: var(--gold); }
.line.has-menu:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.context-menu { position: fixed; z-index: 50; min-width: 12rem; margin: 0; padding: 0.25rem; list-style: none;
    background: var(--panel); border: 1px solid var(--gold-2); border-radius: var(--radius); box-shadow: 0 4px 14px rgb(0 0 0 / 0.45); }
.context-menu button { display: block; width: 100%; padding: 0.35rem 0.6rem; border: 0; border-radius: var(--radius);
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.context-menu button:hover, .context-menu button:focus-visible { background: color-mix(in srgb, var(--gold) 18%, transparent); outline: none; }
.line.seated, .line.ended { justify-content: center; color: var(--muted); font-size: 0.9rem; font-style: italic; }
.line.seated .text, .line.ended .text { flex: 0 1 auto; }
.line.seated::before, .line.seated::after,
.line.ended::before, .line.ended::after { content: ""; flex: 1 1 2rem; height: 1px; background: var(--line); align-self: center; }
.line.private { padding-left: 0.6rem; border-left: 2px solid var(--gold); }
.line .private-note { flex-basis: 100%; padding-left: 3.1rem; color: var(--gold-2); font-size: 0.8rem; }
.line.local { color: var(--muted); }
/* Earlier lines, at the top of a long sitting's log (table.js openLog). */
.line.earlier { justify-content: center; }
.line.local .private-note { padding-left: 0; color: var(--muted); }
/* "@Bol El": bold for everyone; the line to your own character edged in gold, said in words by the mention itself. */
.line .mention { color: var(--gold); }
/* A roll's total (table.js rollMarks), found at a glance: bold, italic, larger, its own colour. */
.line .result { color: var(--result); font-style: italic; font-weight: 700; font-size: 1.12em; padding: 0 0.1em; }
/* A word from the GM's notes: bold for everyone; a plain-looking button on the GM's screen. */
.line .note-ref { font-weight: 700; }
.line button.note-ref { padding: 0; border: 0; border-bottom: 1px dotted var(--gold); background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
/* The GM's notes, drawn: plain high-contrast text; the block # found, marked. */
.notes-page { max-height: 50vh; overflow-y: auto; font-size: 0.9rem; }
.notes-page > * { margin: 0 0 0.5rem; padding: 0.1rem 0.3rem; }
.notes-page .found { border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.notes-page table { border-collapse: collapse; }
.notes-page td, .notes-page th { border: 1px solid var(--line); padding: 0.15rem 0.4rem; }
.line.to-me { border-left: 3px solid var(--gold); padding-left: calc(0.4rem - 3px); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.line.error { color: var(--danger); }
.line .ref { flex-basis: 100%; color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; }

.say { position: relative; padding: 0.6rem 1rem 0.5rem; border-top: 1px solid var(--line); background: var(--panel-2); }
.say textarea { width: 100%; font-family: var(--font-mono); resize: none; overflow-y: auto; max-height: 8.5em; line-height: 1.4; }
.say .small { margin: 0.35rem 0 0; }
p.say.ended { margin: 0; color: var(--muted); }
.inspector .end { margin: var(--gap) 0; }
/* The commands open upward from the box, over the log's last lines only. */
.menu { position: absolute; left: 1rem; right: 1rem; bottom: calc(100% + 0.25rem); max-height: 14rem; overflow-y: auto; list-style: none; margin: 0; padding: 0.25rem; background: var(--panel-2); border: 1px solid var(--gold); border-radius: var(--radius); }
.menu[hidden] { display: none; }
.menu li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; padding: 0.4rem 0.6rem; border-radius: 0.2rem; cursor: pointer; }
.menu li[aria-selected="true"] { background: var(--panel); outline: 1px solid var(--gold); }
.menu code { color: var(--gold-2); white-space: nowrap; }
.menu span { color: var(--muted); font-size: 0.9rem; }

/* The inspector: the session, its link, who's at the table. */
.inspector { padding: 0.9rem 1rem; overflow-y: auto; }
.inspector h2 + * { margin-top: 0; }
.inspector h2:not(:first-child) { margin-top: 1.4rem; }
/* A part of the inspector that folds away to its heading. */
.fold > summary { display: flex; align-items: baseline; gap: 0.6rem; list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; color: var(--gold); transition: transform 0.15s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary h2 { flex: 1; margin-bottom: 0.9rem; }
.fold > summary code { color: var(--muted); letter-spacing: 0.1em; font-size: 0.9rem; }
.fold[open] > summary code { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .fold > summary::before { transition: none; } }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.8rem; margin: 0 0 0.7rem; }
.facts dt { color: var(--muted); font-size: 0.85rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.facts dd a { white-space: nowrap; }
.facts .big { font-size: 1.3rem; letter-spacing: 0.15em; color: var(--text); }
.qr { margin: 0.6rem 0 0; }
.qr svg { display: block; width: 9rem; height: 9rem; border-radius: 0.2rem; }
.qr figcaption { margin-top: 0.35rem; }
.seats { list-style: none; margin: 0; padding: 0; }
/* The seats as a stack of cards (docs/Refereed_Engine.md §6): each tucked under the one above,
   showing its name band and one line of its glance; the one open (table.js stack) shows all of
   it, with the GM's buttons. */
.seats li { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem 0.6rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); box-shadow: 0 -0.2rem 0.45rem rgb(0 0 0 / 0.4); }
.seats li + li { margin-top: -0.25rem; }
.seats li.open { border-color: var(--gold); }
.seats .band { flex-basis: 100%; display: flex; justify-content: space-between; gap: 0.6rem; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.seats .band:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.seats .dm { color: var(--gold); }
.seats .glance { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.seats .glance:empty { display: none; }
.seats li:not(.open) .glance { flex-wrap: nowrap; overflow: hidden; }
.seats li:not(.open) .glance .button, .seats li:not(.open) .glance .drop-check { display: none; }
.glance .who { font-family: var(--font-head); color: var(--muted); letter-spacing: 0.04em; }
.glance .on { padding: 0.05rem 0.4rem; border: 1px solid var(--gold); border-radius: 1rem; color: var(--gold); font-size: 0.8rem; }
/* Down (≈) and dead (✕) under a name, as the token shows them on the map. */
.glance .state { padding: 0.05rem 0.45rem; border-radius: 1rem; font-size: 0.8rem; font-weight: 700; }
.glance .state.down { border: 1px solid var(--gold-2); color: var(--gold-2); }
.glance .state.dead { border: 1px solid var(--danger); background: var(--danger); color: var(--ground); }

/* The character sheet: the Quest Binder's profile page, drawn. The shape says what a number
   is; its label is always beside it in words. */
.sheet-head h2 { margin: 0; }
.sheet-head .line { margin: 0.2rem 0 0; color: var(--muted); }
.sheet-head .quote { margin: 0.3rem 0 0; font-style: italic; color: var(--muted); }
.dividers { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.8rem 0 0.6rem; border-bottom: 1px solid var(--line); }
.divider { border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: var(--ground); color: var(--muted); font: 600 0.8rem var(--font-head); letter-spacing: 0.06em; padding: 0.3rem 0.6rem; cursor: pointer; }
.divider[aria-selected="true"] { background: var(--panel); color: var(--gold); }
.sheet-page[hidden] { display: none; }
.shapes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0; }
.shape { margin: 0; display: flex; flex-direction: column; align-items: center; width: 4.2rem; }
.shape svg { width: 3.4rem; height: 3.4rem; }
.shape path { fill: var(--panel); stroke: var(--gold); stroke-width: 2; }
.shape.heart path { stroke: var(--danger); }
.shape text { fill: var(--text); font: 700 15px var(--font-text); }
.shape figcaption { font-size: 0.75rem; color: var(--muted); text-align: center; }
.shape.small { width: auto; flex-direction: row; gap: 0.2rem; }
.shape.small svg { width: 1.9rem; height: 1.9rem; }
.shape.small text { font-size: 17px; }
/* The play strip: what's reached for every turn, above the pages and never scrolled away from
   them by a long section. */
.play { display: grid; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); }
.vitals { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; }
.vitals .shape.small { flex-direction: column; width: 3.7rem; gap: 0; }
.vitals .shape.small svg { width: 2.4rem; height: 2.4rem; }
.vitals .shape.small figcaption { font-size: 0.65rem; line-height: 1.15; }
.play .tracks { margin: 0; gap: 0.3rem 1rem; display: flex; flex-wrap: wrap; }
.play .track.number { flex-basis: 100%; }
.pinned { display: grid; gap: 0.15rem; border-top: 1px solid var(--line); padding-top: 0.35rem; }
.pinned + .pinned { border-top: none; padding-top: 0; }
.abilities { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; margin: 0.5rem 0; }
.ability { display: grid; justify-items: center; padding: 0.2rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.ability .name { font: 600 0.65rem var(--font-head); letter-spacing: 0.06em; color: var(--muted); }
.ability .mod { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: 0.1rem 0; border: 1px solid var(--gold); border-radius: 50%; font-weight: 700; font-size: 0.8rem; }
.ability .score { font-size: 0.7rem; color: var(--muted); }
.tracks { display: grid; gap: 0.4rem; margin: 0.8rem 0; }
.track { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.track-label { min-width: 5.5rem; }
.track .value { min-width: 3.8rem; text-align: center; }
.track .amount { width: 3.2rem; }
.track .button { padding: 0.1rem 0.55rem; }
.last-change { flex-basis: 100%; color: var(--muted); font-size: 0.75rem; font-family: var(--font-mono); }
.play .track.choice { flex-basis: 100%; }
.choices { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.choice { padding: 0.15rem 0.6rem; border: none; border-left: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.choice:first-child { border-left: none; }
.choice.on { background: var(--gold); color: var(--ground); font-weight: 700; }

/* Rows: label and roll buttons on one line, words under them, long words folded away. */
.rows { display: grid; gap: 0.1rem; }
.rows.tight { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); column-gap: 0.6rem; }
.row { padding: 0.15rem 0; }
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.5rem; }
.row-label { font-weight: 700; }
.rows.tight .row-label { font-weight: 400; }
.rolls { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.row-text { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.9rem; }
details.row > summary { list-style: none; cursor: pointer; }
details.row > summary::-webkit-details-marker { display: none; }
details.row > summary .row-label::after { content: " ▸"; color: var(--muted); font-weight: 400; }
details.row[open] > summary .row-label::after { content: " ▾"; }
.pips { display: inline-flex; gap: 0.25rem; }
.pip { width: 1rem; height: 1rem; padding: 0; border: 1px solid var(--gold); border-radius: 50%; background: transparent; cursor: pointer; }
.pip.full { background: var(--gold); }
.switch { display: inline-flex; align-items: center; gap: 0.4rem; }
.sheet-section h3 { margin: 0.8rem 0 0.3rem; font-family: var(--font-head); color: var(--gold); font-size: 0.95rem; letter-spacing: 0.06em; }
.sheet-section .prose { white-space: pre-line; margin: 0; color: var(--muted); font-size: 0.9rem; }
/* A roll: the die says it rolls, the number is the button. */
.roll { padding: 0.05rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.roll::before { content: "🎲 "; font-size: 0.7rem; }
.roll .what { color: var(--muted); font-family: var(--font-text); }
.roll .dice { font-weight: 700; }
.roll:hover:not(:disabled), .roll:focus-visible { border-color: var(--gold); }
.sheet .edit, .bring .edit { margin-top: 1rem; display: grid; gap: 0.4rem; justify-items: start; }
.edit textarea { flex: none; width: 100%; min-height: 14rem; resize: vertical; font-family: var(--font-mono); font-size: 0.8rem; }
/* Writing a sheet: the toolbar over the box, what reading it found under it. */
.sheet-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sheet-toolbar .tool { padding: 0.1rem 0.5rem; font-size: 0.8rem; }
.sheet-toolbar .tool.bold { font-weight: 700; }
.sheet-toolbar .tool.italic { font-style: italic; }
.sheet-help { margin: 0; }
.sheet-said { margin: 0; color: var(--gold-2); font-size: 0.9rem; }
.sheet-notes { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.85rem; }
/* The card (RollCards.cs): what the table rolls, settled rows plain, a guess or a gap marked
   unfinished, by a dashed edge and in words (never by colour alone). */
.card-rows { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.card-row { display: grid; grid-template-columns: minmax(7rem, 1fr) auto; align-items: center; gap: 0.1rem 0.5rem;
    padding: 0.2rem 0.4rem; border: 1px solid transparent; border-radius: var(--radius); }
.card-row .name { font-weight: 600; }
.card-row .dice { font-family: var(--font-mono); text-align: right; }
.card-row .from { grid-column: 1; color: var(--muted); font-size: 0.75rem; }
.card-row .tools { grid-column: 2; justify-self: end; display: flex; gap: 0.3rem; }
.card-row .tools .small { margin: 0; }
.card-row.near, .card-row.suggested, .card-row.missing { border: 1px dashed var(--gold); }
.card-row.near .dice, .card-row.suggested .dice, .card-row.missing .dice { color: var(--gold); }
.card-dice { width: 9rem; padding: 0.2rem 0.35rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--ground); color: var(--text); font-family: var(--font-mono); }
.roll-list { margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.85rem; columns: 2; }
/* The world's dice words: one column, as a word and its dice are read together; the notes on
   lines that couldn't be words under them, plain, so none reads as a word's sub-point. */
.word-list { margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.85rem; }
.word-notes { margin: 0.3rem 0; padding-left: 0; list-style: none; color: var(--muted); }
/* A written sheet, drawn as written: its rolls where their dice are, its counters' numbers now. */
.written { font-size: 0.92rem; line-height: 1.45; }
.written h2 { margin: 0.9rem 0 0.3rem; font-family: var(--font-head); color: var(--gold); font-size: 0.95rem; letter-spacing: 0.06em; }
.written h3, .written h4 { margin: 0.6rem 0 0.2rem; font-size: 0.9rem; }
.written p { margin: 0.3rem 0; }
.written ul, .written ol { margin: 0.3rem 0; padding-left: 1.1rem; }
.written li { margin: 0.12rem 0; }
.written blockquote { margin: 0.4rem 0; padding-left: 0.6rem; border-left: 2px solid var(--gold); color: var(--muted); }
.written table { border-collapse: collapse; margin: 0.4rem 0; max-width: 100%; display: block; overflow-x: auto; }
.written th, .written td { padding: 0.15rem 0.45rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.written th { font: 600 0.75rem var(--font-head); letter-spacing: 0.05em; color: var(--muted); }
.written code { font-family: var(--font-mono); font-size: 0.85em; }
/* In running words the button's border says it rolls; the die would crowd the line. */
.written .roll { padding: 0 0.3rem; font-size: 0.85em; vertical-align: baseline; }
.written .roll::before { content: none; }
.written .counter { font-family: var(--font-mono); font-weight: 700; padding: 0 0.2rem; border-bottom: 1px dotted var(--gold); }
.written .counter.hits { color: var(--gold-2); }
/* At a glance: a score and its modifier as one, the modifier the button and the score small under it. */
.written td.score { text-align: center; white-space: nowrap; padding: 0.2rem 0.25rem; }
.written td.score .roll { display: block; margin: 0 auto; font-size: 1em; font-weight: 700; }
.written td.score .score-of { display: block; color: var(--muted); font-size: 0.75rem; font-family: var(--font-mono); }
/* Each section folds under its heading; the marker says which way. */
.written details.part > summary { list-style: none; cursor: pointer; }
.written details.part > summary::-webkit-details-marker { display: none; }
.written details.part > summary h2 { display: inline; }
.written details.part > summary::before { content: "▸ "; color: var(--gold); }
.written details.part[open] > summary::before { content: "▾ "; }
.written details.part > summary { margin: 0.9rem 0 0.3rem; }
.written details.part > summary h2 { margin: 0; }
/* Long words with nothing to roll: their first two lines until opened, with "…" to say there's more. */
.written .clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.written [role="button"][aria-expanded]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.written [role="button"][aria-expanded="true"] { cursor: pointer; }
.hits-note { color: var(--muted); font-size: 0.75rem; }
.bring[hidden] { display: none; }
.inspect { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.inspect[hidden] { display: none; }

/* The battlemap (battlemap.js): with a map up it takes most of the centre, and the chat keeps
   enough to read the last lines. Sides by ring colour and always in words too: the party gold,
   allies green, foes rust; scenery hatched; down greyed and crossed; hidden dashed (the GM's). */
.views.has-map { flex: 1 1 62%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; place-items: stretch; padding: 0; text-align: left; color: var(--text); }
.views.has-map + .chat { flex: 0 1 38%; min-height: 12rem; }
.battlemap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.battlemap[hidden] { display: none; }
.map-tools { display: grid; gap: 0.35rem; padding: 0.45rem 0.6rem; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.map-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.map-head strong { font-family: var(--font-head); color: var(--gold); letter-spacing: 0.06em; }
.map-state { color: var(--muted); font-size: 0.85rem; }
.map-state.up { color: var(--gold-2); }
.map-buttons, .map-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.map-tools .button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.map-tools .button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--panel); }
.map-tools select { padding: 0.2rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; font-size: 0.85rem; }
.map-tools .zoom { display: inline-flex; gap: 0.2rem; margin-left: auto; }
.map-tools .nudges { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; }
.map-tools .switch { font-size: 0.85rem; }
.map-hint { margin: 0; color: var(--gold-2); font-size: 0.85rem; }
.map-hint:empty { display: none; }
.map-svg { flex: 1; min-height: 0; width: 100%; display: block; background: var(--ground); touch-action: none; user-select: none; cursor: grab; }
.map-svg.placing, .map-svg[data-mode="grid"], .map-svg[data-mode="uncover"] { cursor: crosshair; }
.map-svg .blank-ground { fill: #d9cfb6; }
.map-svg .grid-lines { fill: none; stroke: rgba(18, 17, 22, 0.35); }
.map-svg .grid-lines.lining-up { stroke: #ff3df0; }
.map-svg .fog { fill: var(--ground); }
.map-svg .fog.seen-through { fill: rgba(18, 17, 22, 0.4); }
.map-svg .token { --side: var(--gold); }
.map-svg .token.ally { --side: #7fb069; }
.map-svg .token.foe { --side: #c8553d; }
.map-svg .token.scenery { --side: #aaa49a; }
.map-svg .token.movable { cursor: move; }
.map-svg .token .disc { fill: rgba(18, 17, 22, 0.85); stroke: var(--side); }
.map-svg .token text { fill: var(--text); font-family: var(--font-text); font-weight: 700; pointer-events: none; }
.map-svg .token .block { stroke: var(--side); stroke-width: 2; }
.map-svg .hatch-ground { fill: rgba(37, 35, 43, 0.45); }
.map-svg .hatch-line { stroke: rgba(170, 164, 154, 0.7); stroke-width: 2; }
.map-svg .token.scenery text { fill: var(--text); font-weight: 400; paint-order: stroke; stroke: var(--ground); stroke-width: 3px; }
.map-svg .token.pile { --side: var(--gold-2); }
.map-svg .token.pile text { font-weight: 700; }
.map-svg .token.down { opacity: 0.6; }
/* Down: a stacked tilde, ≈, under the initials; dead: the cross, and dimmer. */
.map-svg .token .dazed { stroke: var(--gold-2); fill: none; stroke-linecap: round; }
.map-svg .token.dead { opacity: 0.45; }
.map-svg .token .tags rect { fill: var(--ground); stroke: var(--gold-2); stroke-width: 1.5; }
.map-svg .token .tags text { fill: var(--gold-2); font-weight: 700; }
.map-svg .token .cross { stroke: var(--danger); fill: none; }
.map-svg .token.hidden .disc, .map-svg .token.hidden .block { stroke-dasharray: 6 4; opacity: 0.75; }
.map-svg .token.selected .disc, .map-svg .token.selected .block { stroke: var(--gold-2); filter: drop-shadow(0 0 4px var(--gold-2)); }
.map-svg:focus, .map-svg .token:focus { outline: none; }
.map-svg .token:focus-visible .disc, .map-svg .token:focus-visible .block { stroke: #fff; }
.map-svg .token.ghost { opacity: 0.6; pointer-events: none; }
.map-svg .measure { stroke: var(--gold-2); stroke-dasharray: 8 6; stroke-linecap: round; pointer-events: none; }
.map-svg .measure-label { fill: var(--text); font-family: var(--font-text); font-weight: 700; paint-order: stroke; stroke: var(--ground); stroke-width: 4px; pointer-events: none; }
.map-svg .drag-box { fill: rgba(217, 162, 78, 0.18); stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.on-map { padding: 0.35rem 0.8rem; border-top: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; max-height: 9rem; overflow-y: auto; }
.on-map summary { cursor: pointer; color: var(--muted); }
.on-map ul { list-style: none; margin: 0.3rem 0 0; padding: 0; columns: 2 14rem; }
.on-map li { break-inside: avoid; padding: 0.1rem 0; }
.on-map li strong { margin-right: 0.3rem; }

.map-svg .token.turn .disc { stroke-width: 6; filter: drop-shadow(0 0 6px var(--gold-2)) drop-shadow(0 0 2px var(--gold-2)); }
.on-map .turn-words { margin: 0.3rem 0 0; color: var(--gold-2); }

/* The turn order (fight.js): the round, then everyone in order, the one whose turn it is
   raised; on your own screen, a gold banner when it's your turn. */
.fight { flex: 0 0 auto; display: grid; gap: 0.4rem; padding: 0.45rem 0.6rem; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.fight[hidden] { display: none; }
.fight.idle { display: flex; align-items: center; gap: 0.6rem; }
.fight .button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.fight-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.fight-head .round { font-family: var(--font-head); color: var(--gold); letter-spacing: 0.06em; }
.fight-state { color: var(--muted); font-size: 0.9rem; }
.fight-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: auto; }
.fight-tools form, .fight-add form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0; }
.fight input[type="text"], .fight input[type="number"], .fight select { padding: 0.2rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; font-size: 0.85rem; }
.fight input[type="number"] { width: 4rem; }
.fight-add { position: relative; }
.fight-add summary { cursor: pointer; color: var(--gold-2); font-size: 0.85rem; }
.fight-add[open] form { position: absolute; right: 0; top: 1.6rem; z-index: 2; padding: 0.5rem; background: var(--panel); border: 1px solid var(--gold); border-radius: var(--radius); }
.fight .switch { font-size: 0.85rem; }
.your-turn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.5rem 0.8rem; background: var(--gold); color: var(--ground); border-radius: var(--radius); }
.your-turn strong { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: 0.05em; }
.your-turn .button.primary { margin-left: auto; background: var(--ground); color: var(--gold-2); border-color: var(--ground); }
.order { display: flex; gap: 0.35rem; margin: 0; padding: 0.15rem 0; list-style: none; overflow-x: auto; }
/* The GM's scene line over the map: plain, high-contrast words with a thin gold rule. */
.scene { flex: 0 0 auto; margin: 0; padding: 0.35rem 0.6rem; border-left: 3px solid var(--gold); background: var(--panel); font-style: italic; }
.scene::before { content: "✦ "; color: var(--gold); font-style: normal; }

/* The clocks the players may see, under the scene: a name (or "A clock"), its boxes, and the count in words. */
.clocks-strip { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0; padding: 0.35rem 0.6rem; border-left: 3px solid var(--gold); background: var(--panel); font-size: 0.9rem; }
.clock { display: inline-flex; align-items: center; gap: 0.45rem; }
.clock-name { font-weight: 700; }
.clock-count { color: var(--muted); }
.clock.full .clock-count { color: var(--gold-2); font-weight: 700; }
.clock-boxes { display: inline-flex; gap: 0.2rem; vertical-align: middle; }
.clock-box { display: inline-block; width: 0.85rem; height: 0.85rem; padding: 0; border: 1px solid var(--gold); background: transparent; }
button.clock-box { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.clock-box.full { background: var(--gold); }
button.clock-box:disabled { cursor: default; opacity: 0.6; }
/* A campaign's next sitting (plan.js), on its lobby card and in the inspector's fold. */
.plan p { margin: 0.25rem 0; }
.plan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.plan-tools [aria-pressed="true"] { border-color: var(--gold); color: var(--gold-2); }
.plan-form form { display: grid; gap: 0.3rem; max-width: 22rem; margin-top: 0.3rem; }
.plan-form form .button { justify-self: start; }
.plan-said { margin: 0.2rem 0; color: var(--muted); }
.plan-said.error { color: var(--danger); }
/* The GM's Lore tab and a player's Codex (lore.js): a fold a page, its title the summary. */
.lore-list { margin: 0 0 0.8rem; padding: 0; list-style: none; }
.lore-row { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.lore-row summary, .codex-page summary { cursor: pointer; }
.lore-row.revealed summary strong { color: var(--gold-2); }
.lore-row .notes-page, .codex-page .notes-page { margin: 0.4rem 0; }
.lore-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.3rem 0; }
.lore-editor input[type="text"] { width: 100%; margin-bottom: 0.4rem; }
#lore-filter { width: 100%; margin-bottom: 0.4rem; }
#lore-filter[hidden] { display: none; }
.codex-page { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.codex-page summary { font-weight: 600; }
.clock-list { margin: 0 0 0.8rem; padding: 0; list-style: none; }
.clock-row { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.clock-row p { margin: 0.15rem 0; }
.clock-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
/* − the boxes + stay one row in the pad's narrow column; many boxes wrap among themselves. */
.clock-fill { flex-wrap: nowrap; }
.clock-fill .clock-boxes { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }
.clock-fill .button.tool { flex: 0 0 auto; min-width: 1.8rem; padding: 0.1rem 0.4rem; }
.new-clock form { display: grid; gap: 0.3rem; }
.clock-shown { display: grid; gap: 0.2rem; margin: 0.2rem 0; border: 1px solid var(--line); border-radius: var(--radius); }

.chip { --side: var(--gold); flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; padding: 0.2rem 0.5rem; border: 2px solid var(--side); border-radius: 1rem; background: var(--panel); font-size: 0.85rem; }
.chip.ally { --side: #7fb069; }
.chip.foe { --side: #c8553d; }
.chip .score { min-width: 1.6rem; font-weight: 700; text-align: center; font-family: var(--font-mono); }
.chip.unrolled { border-style: dashed; }
.chip.unrolled .score { color: var(--muted); }
.chip.down { opacity: 0.6; }
.chip.dead { opacity: 0.45; }
.chip.dead .name { text-decoration: line-through; }
.chip.hidden { border-style: dotted; opacity: 0.75; }
.chip.now { background: var(--side); color: var(--ground); transform: translateY(-1px); box-shadow: 0 0 8px var(--gold-2); }
.chip .now-mark { font-weight: 700; font-size: 0.75rem; }
.chip .hp { font-family: var(--font-mono); font-size: 0.8rem; }
.chip-roll, .chip-roll .key-in { display: inline-flex; align-items: center; gap: 0.2rem; margin: 0; }
.chip-roll input { width: 3.4rem; }
.chip-tools { display: inline-block; }
.chip-tools summary { cursor: pointer; list-style: none; padding: 0 0.2rem; }
.chip-tools[open] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }
.chip-tools .key-in { display: inline-flex; gap: 0.2rem; margin: 0; }
.initiative-call { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--gold); border-radius: var(--radius); background: rgba(217, 162, 78, 0.12); }
.initiative-call .row-label { font-weight: 700; color: var(--gold-2); }
/* A check the DM called for: its roll, dice to type when the sheet has none, or a number keyed in. */
.check-call { flex-wrap: wrap; }
.check-call .check-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-left: auto; }
.check-call input { padding: 0.15rem 0.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; }
.check-call input.dice { width: 9rem; font-family: var(--font-mono); }
.check-call input.amount { width: 3.6rem; }
.glance .on.waiting { border-style: dotted; }
.glance .drop-check { padding: 0 0.2rem; border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
.check-fields { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1rem; }
.check-fields input:not([type="checkbox"]) { padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; }
.check-fields input.amount { width: 5rem; }
.check-fields input.dice { width: 7rem; font-family: var(--font-mono); }
.check-fields input:disabled { opacity: 0.5; }
.check-fields .switch { grid-column: 1 / -1; }

/* The turn's parts on the strip (Action ○, Bonus action ●), each a menu of its actions, and the
   token's tags. Used is said in words beside the dot, never by the dot alone. */
.tag-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.45rem; }
.tag-box .row-label { font-size: 0.85rem; color: var(--muted); }
.tag-box .tag { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.05rem 0.2rem 0.05rem 0.5rem; border: 1px solid var(--gold-2); border-radius: 1rem; color: var(--gold-2); font-size: 0.8rem; }
.tag-box .tag-off { padding: 0 0.3rem; border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
.tag-box .tag-add input { width: 7.5rem; padding: 0.15rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; font-size: 0.8rem; }
.glance .on.tagged { border-style: dashed; }
.items .item-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-left: auto; }
.items .item-tools .button { padding: 0.1rem 0.55rem; }
.items .item-tools .value { min-width: 1.6rem; text-align: center; font-family: var(--font-mono); }
.items .item-tools .amount { width: 3.2rem; }
.items .item-tools select.move { max-width: 7.5rem; }
.pile-items { margin-top: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.items .item-tools select { max-width: 9rem; padding: 0.1rem 0.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; font-size: 0.85rem; }
.items .item.gone .row-label { color: var(--muted); text-decoration: line-through; }
.items .add-item { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.items .add-item input { padding: 0.15rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; }
.items .add-item input[type=text] { flex: 1 1 10rem; }
.items .add-item .amount { width: 3.6rem; }

/* The GM's maps on the pad, and the panel for a thing on the map. */
.map-list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.map-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.map-list li:first-child { border-top: none; }
.map-list li.open .map-name { color: var(--gold); }
.map-list .map-name { flex: 1 1 8rem; font-weight: 700; }
.map-list .button { padding: 0.15rem 0.55rem; font-size: 0.85rem; }
.new-map summary { cursor: pointer; color: var(--gold-2); }
.new-map form, .token-form { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.new-map input, .token-form input[type="text"], .token-form select { min-width: 0; width: 100%; }
.new-map input[type="file"] { font-size: 0.85rem; }
.new-map .blank-size { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 0.35rem; align-items: center; }
.new-map input[type="number"] { padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; }
.new-map .small { margin: 0; }
.token-form h2 { margin: 0 0 0.3rem; }
.token-form select { padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; }
.token-form .checks { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.3rem; }
.token-buttons { margin: 0.5rem 0 0; }

/* Asking first (table.js's ask): the table's own box over a dimmed screen, never the browser's;
   the action named on the first button, Cancel always beside it. */
dialog.ask { width: min(28rem, calc(100% - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); color: var(--text); box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.5); }
dialog.ask::backdrop { background: rgba(0, 0, 0, 0.6); }
.ask-card { padding: 1rem 1.1rem; }
.ask-card h2 { margin: 0 0 0.6rem; }
.ask-card h2.danger { color: var(--danger); }
.ask-question { margin: 0 0 1rem; white-space: pre-line; }
.ask-buttons { display: flex; gap: 0.5rem; margin: 0; }
/* Words to type before what can't be undone (ask.js): the button waits for them. */
.ask-typed { display: block; margin-bottom: 0.3rem; }
.ask-typed code { color: var(--gold-2); font-weight: 700; letter-spacing: 0; }
#ask-typed { width: 100%; margin-bottom: 1rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--ground); color: var(--text); font: inherit; letter-spacing: 0.04em; }
.ask-buttons .button:disabled { opacity: 0.45; cursor: not-allowed; }
.ask-card label[for="apply-target"] { display: block; margin-bottom: 0.25rem; }
.ask-card select { width: 100%; margin-bottom: 0.8rem; padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--ground); color: var(--text); font: inherit; }
.apply-how { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 1rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); }
.apply-how legend { padding: 0 0.3rem; color: var(--muted); font-size: 0.85rem; }
.button.danger { background: var(--danger); border-color: var(--danger); color: var(--ground); font-weight: 700; }

/* The GM's monsters (monsters.js): each stat block a row to pick, its creatures under it with
   their numbers and where they stand; in the inspector, the block and how to place it. */
.monster-list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.monster-list > li { padding: 0.35rem 0; border-top: 1px solid var(--line); }
.monster-list > li:first-child { border-top: none; }
.monster-list .pick { display: grid; gap: 0.1rem; width: 100%; padding: 0.3rem 0.4rem; border: 1px solid transparent; border-radius: var(--radius);
    background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.monster-list .pick:hover, .monster-list .pick:focus-visible { border-color: var(--line); }
.monster-list .open > .pick, .monster-list .pick[aria-pressed="true"] { border-color: var(--gold); }
.monster-list .pick .line, .monster-list .pick .figures { color: var(--muted); font-size: 0.85rem; }
.monster-list .creatures { list-style: none; margin: 0.2rem 0 0 0.8rem; padding: 0; font-size: 0.9rem; }
.monster-list .creatures li.open .link { color: var(--gold); }
.monster-list .link { padding: 0; border: none; background: none; color: var(--gold-2); font: inherit; text-decoration: underline; cursor: pointer; }
#monster-filter { width: 100%; margin-bottom: 0.4rem; }
#monster-filter[hidden] { display: none; }
.inspect-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 0.4rem; }
.sheet-head .where { margin: 0.2rem 0 0; }
.place-form { display: grid; gap: 0.35rem; margin-top: 0.8rem; }
.place-form[hidden] { display: none; }
.place-form h3 { margin: 0; }
.place-form select { padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--text); font: inherit; }
.inspect .edit, .monsters .edit { margin-top: 0.8rem; display: grid; gap: 0.4rem; justify-items: start; }
.inspect .edit-block { margin-top: 0.8rem; }
.inspect .edit-block summary { cursor: pointer; color: var(--gold-2); }

/* Below a laptop, the columns stack: the chat first, then the session, then the pad. The
   tablet layout of §6 comes later. */
@media (max-width: 62rem) {
    body.in-session { height: auto; overflow: visible; }
    .session, .session.player-screen { grid-template-columns: minmax(0, 1fr); }
    .centre { order: 1; height: 80dvh; }
    .inspector { order: 2; }
    .pad { order: 3; min-height: 20rem; }
}

@media (max-width: 36rem) {
    .sessions li { grid-template-columns: 1fr auto; }
    .sessions time { display: none; }
    .one-line { grid-template-columns: 1fr auto; }
    .one-line label { grid-column: 1 / -1; }
}