/* Shared visual language — see docs/ui-style-guide.md. Dark theme is the
   default for everyone, whatever the device's setting; the light variant
   applies only when the user picks it with the top-right switch
   (public/js/theme.js sets data-theme="light"). */
:root{
  color-scheme:dark;
  --bg:#000; --bg-grad-top:#14503b; --bg-grad-bottom:#000; --title-top:#e6f1ea; --title-bottom:#8fb3a0;
  --panel:rgba(5,17,13,.9); --line:rgba(169,194,180,.28); --line-soft:rgba(169,194,180,.14);
  --ink:#d6e6dc; --ink-dim:#8fab9c; --silver:#b9d2c3; --brass:#c2a862; --crimson:#b05a5a;
  --btn:#123a2c; --btn-ink:#e3f0e8;
  --c-feed:#b05a5a; --c-train:#b9d2c3; --c-info:#c2a862; --c-domain:#5fa08a; --c-rest:#7c93b3;
  --c-atk:#a3714f; --c-coord:#8fa06e; --c-bg:#9b8fc4; --c-special:#c2a862;
  --nav-bg:rgba(0,0,0,.15);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f6f3; --bg-grad-top:#c5d8cc; --bg-grad-bottom:#f2f6f3; --title-top:#3f7560; --title-bottom:#12281f; --panel:rgba(246,250,247,.92);
  --line:rgba(20,70,52,.3); --line-soft:rgba(20,70,52,.15); --ink:#12281f; --ink-dim:#4a6659;
  --silver:#2c5a48; --brass:#7d6626; --crimson:#8f3a3a;
  --btn:#1c5a44; --btn-ink:#f0f7f3;
  --c-feed:#8f3a3a; --c-train:#2c5a48; --c-info:#8a6f22; --c-domain:#2f7a63; --c-rest:#3f5f8f;
  --c-atk:#7a4c30; --c-coord:#5c6e3e; --c-bg:#5e5290; --c-special:#8a6f22;
  --nav-bg:rgba(20,70,52,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;color:var(--ink);font:16px/1.5 "Alegreya Sans",system-ui,sans-serif;
  background-color:var(--bg);
  background-image:linear-gradient(to bottom,var(--bg-grad-top),var(--bg-grad-bottom));
  background-attachment:fixed}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;margin:0;color:var(--silver)}
a{color:var(--silver)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* Centered auth-card layout (login/signup/reset) */
body.auth-shell{display:flex;align-items:center;justify-content:center;padding:32px 16px}
.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:32px 30px}
.card.wide{max-width:480px}
.brand{text-align:center;color:var(--ink-dim);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.card h1{font-size:clamp(1.7rem,5vw,2.2rem);text-align:center;background:linear-gradient(180deg,var(--title-top),var(--title-bottom) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--ink-dim);text-align:center;font-size:.92rem;margin-top:8px;margin-bottom:26px}
.field{margin-top:16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--ink-dim);margin-bottom:5px}
.field label a{color:var(--ink-dim);font-size:.8rem;text-decoration:none;border-bottom:1px solid var(--line-soft)}
.field label a:hover{color:var(--ink)}
.field input,.field select,.field textarea{width:100%;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:10px 11px;font:inherit;font-size:.96rem}
.field textarea{min-height:56px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:1px}
.field small{display:block;color:var(--ink-dim);font-size:.78rem;margin-top:5px}
.grow2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:420px){.grow2{grid-template-columns:1fr}}
.remember{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.88rem;color:var(--ink-dim)}
.remember input{accent-color:var(--brass)}

.cta{width:100%;margin-top:24px;background:var(--btn);color:var(--btn-ink);font-weight:700;border:1px solid transparent;border-radius:3px;padding:12px;font:inherit;font-size:1rem;cursor:pointer}
.cta:hover{filter:brightness(1.08)}
.cta:disabled{opacity:.45;cursor:not-allowed;filter:none}
.hint{font-size:.84rem;color:var(--crimson);margin-top:12px;min-height:1.1em;text-align:center}
.foot{text-align:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:.88rem;color:var(--ink-dim)}
.foot a{color:var(--silver);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--ink)}

.confirmed{display:none;text-align:center}
.confirmed.on{display:block}
.confirmed .check{width:52px;height:52px;border-radius:50%;border:1px solid var(--brass);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:var(--brass);font-size:1.6rem}
.confirmed .warn{width:52px;height:52px;border-radius:50%;border:1px solid var(--crimson);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:var(--crimson);font-size:1.6rem}
.confirmed h2{font-size:1.5rem}
.confirmed p{color:var(--ink-dim);font-size:.92rem;margin-top:8px;line-height:1.6}
.confirmed .charchip{display:inline-block;margin-top:14px;border:1px solid var(--line);border-radius:20px;padding:6px 16px;color:var(--silver);font-family:"Cormorant Garamond",serif;font-size:1.05rem}

/* Wide "wrap" layout (Chronicles, and the stub app screens) */
.wrap{max-width:920px;margin:0 auto;padding:20px 16px 56px}
header{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:end;padding:6px 2px 16px;border-bottom:1px solid var(--line)}
.wrap h1{font-size:clamp(1.8rem,4vw,2.5rem)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
.chron{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:18px;display:flex;flex-direction:column}
.chron .name{font-family:"Cormorant Garamond",serif;font-size:1.4rem;color:var(--silver);font-weight:600}
.chron .setting{color:var(--ink-dim);font-size:.86rem;margin-top:3px}
.chron .metarow{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:.85rem;color:var(--ink-dim)}
.chron .metarow b{color:var(--ink);font-weight:700}
.chron .phasechip{display:inline-block;margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:2px 10px;font-size:.78rem;color:var(--ink-dim);align-self:flex-start}
.chron .phasechip.open{border-color:var(--brass);color:var(--brass)}
.chron .invite{margin-top:12px;font-size:.82rem;color:var(--ink-dim)}
.chron .invite code{color:var(--silver);letter-spacing:.06em;background:rgba(169,194,180,.08);padding:2px 6px;border-radius:2px}
.chronactions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 14px;border-radius:3px;font:inherit;font-size:.88rem;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--btn)}
.btn.primary{background:var(--btn);color:var(--btn-ink);font-weight:700;border-color:transparent}
.btn:disabled{opacity:.4;cursor:not-allowed}

.newcard{border:1px dashed var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;min-height:170px;cursor:pointer;color:var(--ink-dim)}
.newcard:hover{border-color:var(--brass);color:var(--brass)}
.newcard .plus{font-size:2rem;line-height:1;margin-bottom:6px}
.newcard .label{text-align:center;font-size:.92rem}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:20px;margin-top:20px}
.panel.callout{border-color:var(--brass)}
.panel h2{font-size:1.3rem;margin-bottom:4px}
.panel .desc{color:var(--ink-dim);font-size:.88rem;margin-bottom:14px}
.panel+.panel{margin-top:18px}
.grow{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
.grow.one{grid-template-columns:1fr}
.grow.trio{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.grow{grid-template-columns:1fr}.grow.trio{grid-template-columns:1fr 1fr}}
.formactions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.empty{color:var(--ink-dim);font-style:italic;font-size:.9rem;padding:10px 0}

/* Roster / row-list (Character Management) */
.row-list{margin-bottom:6px}
.rowitem{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;padding:13px 0;border-top:1px solid var(--line-soft);cursor:pointer}
.rowitem:first-of-type{border-top:0}
.rowitem:hover{background:rgba(169,194,180,.04)}
.rowitem .rname{font-family:"Cormorant Garamond",serif;font-size:1.2rem;color:var(--silver);font-weight:600}
.rowitem .rtag{font-size:.74rem;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--ink-dim);margin-left:8px;vertical-align:2px}
.rowitem .rmeta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:5px;font-size:.85rem;color:var(--ink-dim)}
.rowitem .rmeta b{color:var(--ink);font-weight:700}
.rowitem .rmeta .status{color:var(--brass)}
.rowitem .rmeta .status.ok{color:var(--ink-dim)}
.rowitem .ractions{display:flex;gap:6px;flex-wrap:wrap}
.rowitem .ractions button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:5px 11px;border-radius:3px;font:inherit;font-size:.82rem;cursor:pointer}
.rowitem .ractions button:hover{background:var(--btn)}
.rowitem .ractions button.danger{color:var(--crimson);border-color:var(--crimson)}

/* Character sheet form (Character Management) */
.sheethead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sheethead .editing-tag{font-size:.8rem;color:var(--brass)}
.sheetgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:900px){.sheetgrid{grid-template-columns:1fr}}
.subsec{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
.subsec h3{font-size:1.1rem;margin-bottom:10px}
.attrgroup{margin-top:10px}
.attrgroup .gname{font-size:.78rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.attrrow{display:grid;grid-template-columns:1fr 60px;gap:8px;align-items:center;margin-top:6px}
.attrrow span{font-size:.9rem;color:var(--ink)}
.attrrow input{width:100%;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:5px 7px;font:inherit;font-size:.88rem;text-align:center}
.chiplist{margin-top:8px}
.chiprow{display:grid;grid-template-columns:1fr 70px auto;gap:8px;align-items:center;margin-top:6px}
.chiprow.tagged{grid-template-columns:1fr 70px 110px auto}
.chiprow.simple{grid-template-columns:1fr auto}
.chiprow input[type=text]{background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:6px 8px;font:inherit;font-size:.88rem}
.chiprow input[type=number]{width:100%;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:6px 8px;font:inherit;font-size:.88rem;text-align:center}
.chiprow select{background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:6px 8px;font:inherit;font-size:.85rem}
.traitpick{display:flex;gap:6px;min-width:0}
.traitpick select,.traitpick input{flex:1;min-width:0}
.chiprow .rm{border:1px solid var(--line);background:transparent;color:var(--crimson);border-radius:3px;padding:5px 9px;font-size:.8rem;cursor:pointer}
.addchip{margin-top:8px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);padding:6px 12px;border-radius:3px;font:inherit;font-size:.84rem;cursor:pointer}
.addchip:hover{color:var(--ink);border-color:var(--ink-dim)}
.healthgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.healthstatus{margin-top:10px;font-size:.9rem;color:var(--ink-dim)}
.healthstatus b{color:var(--brass)}

/* Cycle Setup */
.phases{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel)}
.phases span{padding:6px 12px;font-size:.88rem;color:var(--ink-dim);border-right:1px solid var(--line-soft)}
.phases span:last-child{border:0}
.phases .on{background:var(--btn);color:var(--btn-ink);font-weight:700}
.checkrow{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:12px;border:1px solid var(--line-soft);border-radius:3px}
.checkrow input{accent-color:var(--brass);margin-top:3px}
.checkrow .cktext{font-size:.9rem;color:var(--ink-dim)}
.checkrow .cktext strong{color:var(--ink);font-weight:700;display:block;margin-bottom:2px;font-family:"Cormorant Garamond",serif;font-size:1.05rem}
.checkrow .cknote{margin-top:6px;font-size:.84rem;color:var(--brass);display:none}
.checkrow.active .cknote{display:block}
.poolhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn.small{padding:5px 11px;font-size:.82rem}
.btn.large{padding:13px 26px;font-size:1.08rem}
.playerlist{margin-top:10px}
.prow{display:grid;grid-template-columns:1fr 120px 90px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line-soft)}
.prow:first-of-type{border-top:0}
.prow .pname{font-family:"Cormorant Garamond",serif;font-size:1.05rem;color:var(--ink)}
.prow input{width:100%;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:6px 8px;font:inherit;font-size:.9rem;text-align:center}
.prow .reset{border:1px solid var(--line);background:transparent;color:var(--ink-dim);padding:6px 8px;border-radius:3px;font:inherit;font-size:.8rem;cursor:pointer}
.prow .reset:hover{color:var(--ink);border-color:var(--ink-dim)}
.plabels{display:grid;grid-template-columns:1fr 120px 90px;gap:10px;font-size:.76rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.03em;padding-bottom:4px}

/* Downtime Setup (tabbed lists: locations/targets/domains/custom actions) */
.layout{display:grid;grid-template-columns:210px 1fr;gap:18px;margin-top:18px}
@media(max-width:820px){.layout{grid-template-columns:1fr}}
.tabs{display:flex;flex-direction:column;gap:3px}
.tabs button{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid transparent;background:transparent;color:var(--ink-dim);padding:9px 10px;border-radius:3px;font:inherit;font-size:.92rem;cursor:pointer}
.tabs button:hover{background:var(--panel);border-color:var(--line-soft)}
.tabs button.on{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:700}
.tabs button .count{margin-left:auto;font-size:.76rem;color:var(--ink-dim);border:1px solid var(--line);border-radius:10px;padding:0 7px}
.tabs button.on .count{color:var(--brass);border-color:var(--brass)}
.rowitem .rtag.restricted{border-color:var(--crimson);color:var(--crimson)}
.rowitem .rnote{margin-top:5px;font-size:.86rem;color:var(--ink-dim);font-style:italic}
.formhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.formhead h3{font-size:1.2rem}
.formhead .editing-tag{font-size:.78rem;color:var(--brass)}
.grow.quad{grid-template-columns:repeat(4,1fr)}
@media(max-width:560px){.grow.quad{grid-template-columns:1fr 1fr}}
.checkrow-plain{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.9rem;color:var(--ink-dim)}
.checkrow-plain input{accent-color:var(--brass)}
.field .checkrow-plain{justify-content:flex-start;align-items:center;color:var(--ink)}
.field .checkrow-plain input{width:auto;flex:none;margin:0}
.owner-list{display:flex;flex-wrap:wrap;gap:6px 14px;border:1px solid var(--line-soft);border-radius:3px;padding:10px;margin-top:4px}
.owner-list label{display:flex;align-items:center;gap:6px;font-size:.88rem}
.owner-list input{accent-color:var(--brass);flex:none;width:auto;padding:0}
.openbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.openbar .note{color:var(--ink-dim);font-size:.88rem;max-width:420px}
.confirmed.callout{display:none;margin-top:18px;padding:16px;border:1px solid var(--brass);border-radius:3px;background:rgba(194,168,98,.06);text-align:left}
.confirmed.callout.on{display:block}
.confirmed.callout strong{color:var(--brass);font-family:"Cormorant Garamond",serif;font-size:1.15rem}
.confirmed.callout p{margin:6px 0 0;color:var(--ink-dim);font-size:.9rem}
fieldset{border:0;padding:0;margin:0}
fieldset:disabled{opacity:.55}

/* Player Phase Status card */
.phasechip{display:inline-block;border:1px solid var(--brass);color:var(--brass);border-radius:12px;padding:4px 14px;font-size:.82rem;margin-bottom:18px}
.icon{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);margin:0 auto 4px;display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:1.5rem}
.message{margin-top:22px;color:var(--ink);font-size:1.02rem;line-height:1.65;max-width:440px;margin-left:auto;margin-right:auto}
.actions{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.nohistory{margin-top:14px;color:var(--ink-dim);font-size:.85rem;font-style:italic}

/* Persistent nav shell (backend-handoff.md §10 open question) */
.appnav{position:relative;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding:14px 88px 14px 20px;border-bottom:1px solid var(--line);background:var(--nav-bg)}
.appnav-brand{font-family:"Cormorant Garamond",serif;color:var(--silver);font-weight:600;margin-right:8px}
.appnav a{color:var(--ink-dim);text-decoration:none;font-size:.9rem}
.appnav a:hover{color:var(--ink)}
.appnav a.appnav-landing{color:var(--ink);border-color:var(--brass)}
/* ST nav drop-down menus (layout.js nav) */
.appnav-menu{position:relative}
.appnav-menu summary{list-style:none;cursor:pointer;color:var(--ink-dim);font-size:.9rem;user-select:none}
.appnav-menu summary::-webkit-details-marker{display:none}
.appnav-menu summary::after{content:"▾";margin-left:5px;font-size:.75em}
.appnav-menu summary:hover,.appnav-menu[open] summary{color:var(--ink)}
.appnav-drop{position:absolute;top:calc(100% + 8px);left:-12px;z-index:50;min-width:210px;display:flex;flex-direction:column;
  background:linear-gradient(var(--panel),var(--panel)),var(--bg);border:1px solid var(--line);border-radius:4px;padding:6px 0;box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* Bridges the gap under the title, so moving the pointer down to the menu
   doesn't count as leaving it (nav.js closes it on mouseleave). */
.appnav-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.appnav .appnav-drop a{padding:7px 14px;white-space:nowrap}
.appnav .appnav-drop a:hover{background:var(--line-soft)}
/* Light/dark switch (public/js/theme.js): pinned to the top-right corner,
   in the nav's first row on signed-in pages (the nav's right padding keeps
   room for it) and in the page corner on the logged-out pages. */
.theme-switch{position:relative;flex:none;width:52px;height:28px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--line-soft);cursor:pointer}
.theme-switch .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--silver);color:var(--bg);display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.theme-switch[aria-checked="true"] .knob{transform:translateX(24px)}
.theme-switch svg{width:13px;height:13px;display:block}
.theme-switch:hover{border-color:var(--brass)}
.appnav>.theme-switch{position:absolute;top:12px;right:20px}
.theme-switch.corner{position:fixed;z-index:100;top:calc(12px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px))}
@media(prefers-reduced-motion:reduce){.theme-switch .knob{transition:none}}
/* View as player bar (layout.js viewAsBanner) */
.viewas-bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:10px 20px;background:var(--brass);color:var(--bg);font-size:.9rem}
.viewas-bar b{font-weight:700}
.viewas-bar form{margin:0;display:flex;gap:8px;align-items:center}
.viewas-bar select{font:inherit;padding:3px 6px;border-radius:3px;border:1px solid rgba(0,0,0,.35);max-width:100%}
.viewas-bar label{display:flex;gap:6px;align-items:center}
.backlink{margin-bottom:10px}

/* Import/Export Artifacts (Downtime Setup) */
.artifact-bar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
#art-panel{margin-top:14px}
.art-group{border-top:1px solid var(--line-soft);padding:8px 0}
.art-group summary{cursor:pointer;font-family:"Cormorant Garamond",serif;font-size:1.15rem;color:var(--silver)}
.art-group label{display:flex;gap:8px;align-items:baseline;padding:4px 0 4px 22px;font-size:.92rem}
.art-group summary label{display:inline-flex;padding:0}
.art-group small{color:var(--ink-dim)}
.art-flag{color:var(--brass)}
.art-tools{display:flex;flex-wrap:wrap;gap:12px;font-size:.85rem;margin:6px 0}
.art-tools button{background:none;border:0;padding:0;color:var(--silver);text-decoration:underline;font:inherit;cursor:pointer}

/* Player Panel */
.ribbon-panel{margin:20px 0 18px}
.rhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;margin-bottom:12px}
.rhead h2{font-size:1.6rem}
.count{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;color:var(--ink)}
.count b{font-size:2.3rem;color:var(--silver)}
.ribbon{display:grid;grid-template-columns:repeat(14,1fr);gap:6px}
.pip{display:block;width:100%;height:auto;overflow:visible}
.pip path{fill:none;stroke:var(--line);stroke-width:1.5}
.pip.f path{stroke:none}
.pip text{fill:var(--ink-dim);font:500 13px 'Alegreya Sans',sans-serif;text-anchor:middle}
.pip.f text{fill:rgba(0,0,0,.65)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;color:var(--ink-dim);font-size:.9rem}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.pp-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px}
@media(max-width:860px){.pp-layout{grid-template-columns:1fr}.ribbon{gap:3px}}
.stack{display:grid;gap:18px;align-content:start}
h2.sec{font-size:1.45rem;margin-bottom:12px}
.act{display:grid;grid-template-columns:4px 1fr auto;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.act:first-of-type{border-top:0}
.act .bar{border-radius:2px}
.act h3{font-size:1.2rem}
.act .cat{font-size:.9rem;color:var(--ink-dim)}
.note{margin-top:4px;font-size:.95rem;color:var(--ink-dim)}
.note.warn{color:var(--brass)}
.note.bad{color:var(--crimson)}
.step{display:flex;align-items:center;gap:6px;align-self:center}
.step button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.2rem;cursor:pointer}
.step button:disabled{opacity:.3;cursor:not-allowed}
.step button:hover:not(:disabled){background:var(--btn)}
.step output{min-width:3.2ch;text-align:center;font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:var(--silver)}
.step small{display:block;color:var(--ink-dim);font-size:.8rem;text-align:center;line-height:1}
.add{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.add button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:7px 13px;border-radius:3px;font:inherit;cursor:pointer}
.add button:hover{background:var(--btn)}
.add button.on{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.submitrow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.cta{border:1px solid var(--line);background:var(--btn);color:var(--btn-ink);font-weight:700;padding:10px 20px;border-radius:3px;font:inherit;cursor:pointer}
.cta:disabled{opacity:.4;cursor:not-allowed}
.cta.ghost{background:transparent;color:var(--ink);font-weight:500}
.vit{display:grid;gap:12px}
.vrow{display:flex;justify-content:space-between;align-items:baseline}
.vrow span:first-child{font-family:"Cormorant Garamond",serif;font-size:1.25rem;color:var(--silver)}
.track{height:8px;border-radius:2px;background:var(--line-soft);margin-top:5px;position:relative;overflow:hidden}
.track i{position:absolute;left:0;top:0;bottom:0;background:var(--silver)}
.track i.pend{background:var(--brass);opacity:.85}
.q{padding:11px 0;border-top:1px solid var(--line-soft)}
.q:first-of-type{border-top:0}
.q .top{display:flex;justify-content:space-between;gap:10px}
.q .meta{color:var(--ink-dim);font-size:.92rem;margin-top:4px}
.q .flag{color:var(--brass)}

/* Add-an-action forms (embedded in Player Panel) */
.dicepool-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
@media(max-width:520px){.dicepool-grid{grid-template-columns:1fr}}
.dicepool-grid select{width:100%}
.readpool{border:1px solid var(--line-soft);border-radius:3px;padding:8px 9px;font-size:.92rem;color:var(--ink-dim);background:rgba(169,194,180,.05)}
.nightsrow{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:14px 0;margin:16px 0}
.nightslabel{font-family:"Cormorant Garamond",serif;font-size:1.15rem;color:var(--silver)}
.preview{font-size:.9rem;color:var(--ink-dim)}
.preview b{color:var(--brass)}

/* ST Review */
.stats{display:flex;flex-wrap:wrap;gap:10px 22px;padding:14px 2px;color:var(--ink-dim);font-size:.9rem}
.stats b{color:var(--silver);font-family:"Cormorant Garamond",serif;font-size:1.15rem;font-weight:600}
.cols{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:16px}
@media(max-width:980px){.cols{grid-template-columns:1fr}}
.count-tag{display:inline-block;margin-left:8px;font-family:"Alegreya Sans",sans-serif;font-size:.78rem;color:var(--ink-dim);border:1px solid var(--line);border-radius:10px;padding:1px 9px;vertical-align:2px}
.secnote{color:var(--ink-dim);font-size:.86rem;margin-bottom:12px}
.collision{border-top:1px solid var(--line-soft);padding:14px 0}
.collision:first-of-type{border-top:0}
.ctop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.ctop strong{font-family:"Cormorant Garamond",serif;font-size:1.1rem;color:var(--silver);font-weight:600}
.ctag{font-size:.78rem;padding:2px 8px;border-radius:10px;border:1px solid var(--crimson);color:var(--crimson)}
.versus{display:flex;flex-wrap:wrap;gap:10px}
.side{border:1px solid var(--line-soft);border-radius:3px;padding:10px 12px;flex:1;min-width:180px}
.side .who{font-weight:700;color:var(--ink)}
.side .what{color:var(--ink-dim);font-size:.9rem;margin-top:3px}
.cactions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.item{border-top:1px solid var(--line-soft);padding:12px 0}
.item:first-of-type{border-top:0}
.itop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.itop strong{color:var(--ink)}
.itop .cat{font-size:.78rem;color:var(--ink-dim)}
.itext{color:var(--ink-dim);font-size:.9rem;margin-top:5px;font-style:italic}
.iactions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.iactions .btn{padding:5px 12px;font-size:.85rem}
.flagline{margin-top:6px;font-size:.85rem;color:var(--brass)}
.flagline.bad{color:var(--crimson)}
.igform{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:9px}
.igform label{font-size:.78rem;color:var(--ink-dim);display:block;margin-bottom:3px}
.igform input,.igform select{width:100%;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:6px 8px;font:inherit;font-size:.9rem}
.igform .full{grid-column:1/-1}
textarea.stnote{width:100%;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:8px;font:inherit;font-size:.88rem;resize:vertical;min-height:50px;margin-top:9px}
.hidden-panel{border-color:var(--crimson)}
.hiddennote{color:var(--crimson);font-size:.86rem;margin-bottom:12px}
.reveal{border-top:1px solid var(--line-soft)}
.reveal:first-of-type{border-top:0}
.reveal summary{list-style:none;cursor:pointer;padding:11px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}
.reveal summary::-webkit-details-marker{display:none}
.reveal summary strong{color:var(--ink);font-weight:700}
.reveal summary .cat{font-size:.78rem;color:var(--ink-dim);margin-left:8px;font-weight:400}
.reveal summary .chev{color:var(--ink-dim);font-size:.8rem;transition:transform .15s}
.reveal[open] summary .chev{transform:rotate(90deg)}
.revealbody{padding:0 0 14px}
.hidetable{width:100%;border-collapse:collapse;font-size:.88rem;margin:8px 0}
.hidetable th,.hidetable td{text-align:left;padding:6px 8px;border-top:1px solid var(--line-soft);color:var(--ink-dim)}
.hidetable th{color:var(--ink);font-weight:700;font-size:.78rem;border-top:0}
.xpcosts{border-collapse:collapse;margin-top:12px;font-size:.94rem}
.xpcosts th,.xpcosts td{text-align:left;padding:5px 14px 5px 0;border-top:1px solid var(--line-soft);vertical-align:middle}
.xpcosts th{font-weight:700;font-size:.78rem;color:var(--ink-dim);border-top:0}
.xpcosts input[type="number"]{width:72px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:6px 8px;font:inherit}
.xpcosts input[type="number"]:disabled{opacity:.45}
.xpcosts .xpmult{color:var(--ink-dim);margin-right:6px;font-size:.88rem}
.xpcosts .checkrow-plain{margin:0;font-size:inherit;color:var(--ink)}
.xpcosts tr.off td:first-child,.xpcosts tr.off .checkrow-plain{color:var(--ink-dim)}
.reportgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:980px){.reportgrid{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line-soft);border-radius:3px;padding:14px}
.pcard h3{font-size:1.2rem;margin-bottom:8px}
.pcard .rline{padding:8px 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.pcard .rline:first-of-type{border-top:0}
.pcard .rline .rcat{color:var(--ink-dim);font-size:.78rem;display:block;margin-bottom:2px}
.pcard .rline .rflag{color:var(--brass);font-size:.82rem;display:block;margin-top:3px}

/* Report History */
.viewtoggle{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.viewtoggle button{padding:6px 14px;font-size:.84rem;border:0;background:transparent;color:var(--ink-dim);cursor:pointer;border-right:1px solid var(--line)}
.viewtoggle button:last-child{border-right:0}
.viewtoggle button.on{background:var(--btn);color:var(--btn-ink);font-weight:700}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.filters select{background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:7px 10px;font:inherit;font-size:.88rem}
.cyclegroup{margin-top:20px}
.cyclegroup h2{font-size:1.25rem;margin-bottom:2px}
.cyclegroup .cyclesub{color:var(--ink-dim);font-size:.85rem;margin-bottom:10px}
.reveal.card{border:1px solid var(--line);border-radius:3px;background:var(--panel);margin-top:8px;padding:0}
.reveal.card summary{padding:13px 16px}
.reveal.card summary .who{font-family:"Cormorant Garamond",serif;font-size:1.1rem;color:var(--silver);font-weight:600}
.reveal.card summary .meta{font-size:.82rem;color:var(--ink-dim);margin-left:10px;font-weight:400}
.reveal.card .revealbody{padding:0 16px 16px}
.hl{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft);align-items:flex-start}
.hl:first-child{border-top:0}
.hl .dot{width:4px;border-radius:2px;align-self:stretch;min-height:18px;flex:none}
.hl .txt{font-size:.9rem;color:var(--ink)}
.hl .txt .cat{color:var(--ink-dim);font-size:.78rem;display:block}
.flagnote{color:var(--brass);font-size:.85rem;margin-top:8px}
.rowactions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* Character Sheet (read-only) */
.tag{font-size:.8rem;border:1px solid var(--line);border-radius:10px;padding:2px 10px;color:var(--ink-dim)}
.readnote{color:var(--ink-dim);font-size:.85rem}
.traitrow{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0}
.traitrow .tname{color:var(--ink)}
.dots{letter-spacing:2px;color:var(--silver);font-size:1.05rem}
/* Read-only rating dots: drawn, not text glyphs, so filled and empty match exactly */
.rdot{display:block;flex:none;width:11px;height:11px;border-radius:50%;border:1px solid var(--line);box-sizing:border-box}
.rdot.on{background:currentColor;border-color:currentColor}
.healthboxes{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}
.hbox{height:22px;border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--ink-dim)}
.hbox.b{background:rgba(194,168,98,.28);border-color:var(--brass);color:var(--brass)}
.hbox.l{background:rgba(176,90,90,.28);border-color:var(--crimson);color:var(--crimson)}
.hbox.a{background:var(--crimson);border-color:var(--crimson);color:#fff}
.healthstatus{margin-top:8px;font-size:.92rem;color:var(--ink-dim)}
.healthstatus b{color:var(--brass)}
.healthstatus.ok b{color:var(--ink)}
.textblock{color:var(--ink-dim);font-size:.92rem;font-style:italic}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px}
@media(max-width:860px){.sheet-grid{grid-template-columns:1fr}}

/* Downtime Report */
.result{display:grid;grid-template-columns:4px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft)}
.result:first-of-type{border-top:0}
.result .bar{border-radius:2px}
.result .cat{font-size:.8rem;color:var(--ink-dim);margin-bottom:2px}
.result h3{font-size:1.15rem;margin-bottom:5px}
.result .outcome{font-style:italic;color:var(--ink)}
.result .outcome.flag{color:var(--brass)}
.flagitem{padding:11px 0;border-top:1px solid var(--line-soft);font-style:italic;color:var(--brass)}
.flagitem:first-of-type{border-top:0}

/* Special Actions queue (ST Review) + invite checklist (Co-ordinated) */
.newaction{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.newaction .nahead{font-size:.85rem;color:var(--ink-dim);margin-bottom:8px}
.newaction .narow{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:8px}
.newaction .narow.wide{grid-template-columns:1fr auto}
.newaction select,.newaction input[type=text],.newaction input[type=number]{width:100%;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:6px 8px;font:inherit;font-size:.88rem}
.newaction .nanote{font-size:.78rem;color:var(--ink-dim);margin-bottom:8px}
.queued-sa{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:.86rem}
.queued-sa:first-of-type{border-top:0}
.queued-sa button{border:1px solid var(--crimson);background:transparent;color:var(--crimson);font-size:.78rem;cursor:pointer;padding:3px 9px;border-radius:3px}
.invite-list{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-soft);border-radius:3px;padding:10px}
.invite-list .grp{font-size:.75rem;color:var(--ink-dim);margin:6px 0 2px;text-transform:uppercase;letter-spacing:.03em}
.invite-list .grp:first-child{margin-top:0}
.invite-row{display:flex;align-items:center;gap:9px;font-size:.92rem}
.invite-row input{accent-color:var(--brass)}
.pill{font-size:.72rem;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--ink-dim)}

/* ST Landing */
.landgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
@media(max-width:620px){.landgrid{grid-template-columns:1fr}}
.landbtn .btn{width:100%;text-align:center}
.landnote{margin-top:6px;font-size:.84rem;color:var(--ink-dim)}
.landnote b{color:var(--brass);font-weight:700}
.subrow{display:grid;grid-template-columns:1fr auto auto;gap:6px 16px;align-items:center;padding:11px 0;border-top:1px solid var(--line-soft)}
.subrow .rname{font-family:"Cormorant Garamond",serif;font-size:1.15rem;color:var(--silver);font-weight:600}
.subrow .rmeta{font-size:.85rem;color:var(--ink-dim)}
.subrow .unclaimed{font-style:italic}
.subnums{font-size:.86rem;color:var(--ink-dim)}
.subst{font-size:.78rem;border:1px solid var(--brass);color:var(--brass);border-radius:10px;padding:2px 10px}
.subst.ok{border-color:var(--line);color:var(--ink-dim)}
@media(max-width:520px){.subrow{grid-template-columns:1fr auto}.subnums{grid-column:1/-1;order:3}}

/* Official-sheet layout (Character Sheet + Character Management). Mirrors the
   V20 paper sheet's order: header block, Attributes, Abilities, Advantages,
   then Merits & Flaws / Humanity-Willpower-Blood / Health. */
.os{margin-top:20px}
.os-banner{display:flex;align-items:center;gap:14px;margin:26px 0 4px;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;font-weight:600;color:var(--silver)}
.os-banner::before,.os-banner::after{content:"";flex:1;height:1px;background:var(--line)}
.os-banner.small{font-size:1.15rem;margin:0 0 8px;gap:10px}
.os-head{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 22px}
.os-head .hf{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.os-head .hf b{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.02rem;color:var(--silver);flex:none}
.os-head .hf span{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-head .hf.empty{border-bottom-color:transparent}
.os-head .field{margin-top:6px}
.os-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 26px}
.os-cols>div{min-width:0}
.os-cols h3{text-align:center;font-size:1.12rem;margin:6px 0 4px}
.os-row{display:flex;align-items:baseline;gap:6px;padding:3px 0;min-width:0}
.os-row .tname{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.os-row .tname .num{font-size:.78rem;color:var(--ink-dim)}
.os-row .tname .spec{font-size:.82rem;font-style:italic;color:var(--ink-dim)}
.os-row .lead{flex:1;min-width:10px;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.os-row .dots{flex:none;align-self:center;gap:4px}
.os-row.zero .tname{color:var(--ink-dim)}
.os-row input[type=number]{flex:none;width:56px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:3px 5px;font:inherit;font-size:.88rem;text-align:center}
.os-row.blankline .lead{transform:none}
.os-none{color:var(--ink-dim);font-size:.9rem;padding:3px 0}
.os-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.os-bottom>div{min-width:0}
.os-bottom .os-banner.small+*{margin-top:0}
.os-block+.os-block{margin-top:18px}
.os-pathname{text-align:center;color:var(--ink);border-bottom:1px solid var(--line-soft);padding-bottom:3px;margin-bottom:6px}
.os-track{display:flex;justify-content:center;flex-wrap:wrap;gap:3px;font-size:1.05rem;color:var(--silver);line-height:1.2}
.os-track .empty{color:var(--line)}
.os-boxes{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:260px;margin:6px auto 0}
.os-boxes i{aspect-ratio:1;border:1px solid var(--line);border-radius:2px}
.os-boxes i.on{background:var(--silver);border-color:var(--silver)}
.os-boxes i.off{border-style:dashed;opacity:.35}
.os-blood .os-boxes i.on{background:var(--crimson);border-color:var(--crimson)}
.os-caption{text-align:center;font-size:.82rem;color:var(--ink-dim);margin-top:5px}
.os-health{width:100%;border-collapse:collapse}
.os-health td{padding:3px 0;font-size:.95rem}
.os-health td.pen{text-align:right;color:var(--ink-dim);padding-right:12px;width:2.5em;font-size:.88rem}
.os-health td.box{width:24px}
.os-health .hb{width:20px;height:20px;border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;line-height:1}
.os-health .hb.b{border-color:var(--brass);color:var(--brass)}
.os-health .hb.l{border-color:var(--crimson);color:var(--crimson)}
.os-health .hb.a{background:var(--crimson);border-color:var(--crimson);color:#fff}
.os-health button.hb{background:transparent;font-family:inherit;padding:0;cursor:pointer;width:24px;height:24px}
.os-health button.hb.a{background:var(--crimson)}
.os-health button.hb:hover{border-color:var(--ink-dim)}
.os-legend{font-size:.76rem;color:var(--ink-dim);margin-top:6px}
.os-textblock{white-space:pre-wrap;color:var(--ink);font-size:.92rem}
.os-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.os-mini .field,.os-bottom .field{margin-top:8px}
.os-bottom .field input,.os-bottom .field textarea{padding:7px 9px}
.os-bottom textarea#f-meritsflaws{min-height:150px}
.os-bottom .chiprow{grid-template-columns:minmax(0,1fr) 52px auto;gap:6px}
.os-bottom .chiprow input[type=text]{min-width:0;width:100%}
.os-bottom .chiprow.mf{padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.os-bottom .chiprow.mf input[type=text]{grid-column:1/-1}
.os-cols .chiprow{grid-template-columns:minmax(0,1fr) 48px auto;gap:6px}
.os-cols .chiprow input[type=text]{min-width:0;width:100%}
.os-cols .chiprow.tagged{grid-template-columns:minmax(0,1fr) 64px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.os-cols .chiprow.tagged .inclan{grid-column:1}
.os-cols .chiprow.tagged .rm{grid-column:2}
.inclan{display:flex;align-items:center;gap:5px;font-size:.85rem;color:var(--ink-dim);cursor:pointer}
.inclan input{accent-color:var(--brass);margin:0}
.clanmark{color:var(--brass);font-size:.85em}
.os-row .markslot{flex:none;width:.9em;margin-right:-2px}
.os-cols .traitpick{flex-direction:column}
.os-cols .chiprow input[type=number]{padding:4px 5px}
.os-cols .chiprow .rm{padding:5px 6px}
@media(max-width:760px){
  .os-head,.os-cols,.os-bottom{grid-template-columns:1fr}
  .os-head .hf.empty{display:none}
}

/* Character Creator wizard (public/js/character-creator.js) */
.cc-save{font-size:.84rem;color:var(--ink-dim);min-height:1.2em;align-self:center}
.cc-save.bad{color:var(--crimson)}
.cc-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.cc-steps button{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink-dim);padding:7px 12px;font:inherit;font-size:.88rem;cursor:pointer}
.cc-steps button .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);font-size:.75rem}
.cc-steps button.on{color:var(--ink);border-color:var(--brass)}
.cc-steps button.on .n{border-color:var(--brass);color:var(--brass)}
.cc-steps button.bad .n{border-color:var(--crimson);color:var(--crimson)}
.cc-steps button:disabled{opacity:.45;cursor:default}
.cc-row{display:flex;align-items:center;gap:6px;padding:3px 0;min-width:0}
.cc-row .tname{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.cc-row.zero .tname{color:var(--ink-dim)}
.cc-row .lead{flex:1;min-width:10px;border-bottom:1px dotted var(--line);transform:translateY(-2px)}
.cc-row select,.cc-row input[type=text]{background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:5px 7px;font:inherit;font-size:.86rem;max-width:100%}
.cc-row input[type=text]{width:190px}
.dots{display:inline-flex;gap:3px;flex-shrink:0}
.dot{width:17px;height:17px;border-radius:50%;border:1px solid var(--ink-dim);background:transparent;padding:0;cursor:pointer}
.dot.on{background:var(--ink);border-color:var(--ink)}
.dot.fix{background:var(--ink-dim);border-color:var(--ink-dim);cursor:default}
.dot:disabled:not(.fix){cursor:default;opacity:.6}
.dot:focus-visible,.cc-step:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.cc-step{width:26px;height:26px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;flex-shrink:0}
.cc-step:disabled{opacity:.35;cursor:default}
.cc-total{min-width:2.6em;text-align:right;color:var(--ink)}
.cc-total small{color:var(--brass)}
.cc-cost{min-width:2em;text-align:right;font-size:.8rem;color:var(--ink-dim)}
.cc-budget{font-family:inherit;font-size:.8rem;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--ink-dim);vertical-align:middle}
.cc-budget.ok{border-color:var(--brass);color:var(--brass)}
.cc-budget.over{border-color:var(--crimson);color:var(--crimson)}
.cc-card{margin-top:16px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:3px;font-size:.9rem;color:var(--ink-dim)}
.cc-card>div{margin-top:4px}
.cc-card b{color:var(--ink)}
.cc-card-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.cc-card-head b{font-family:"Cormorant Garamond",serif;font-size:1.15rem}
.cc-info{position:relative;display:inline-block}
.cc-info summary{list-style:none;cursor:pointer;color:var(--ink-dim);font-size:.9rem;padding:0 3px}
.cc-info summary::-webkit-details-marker{display:none}
.cc-info>div{position:absolute;z-index:5;right:0;top:1.6em;width:240px;max-width:70vw;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:3px;font-size:.84rem;color:var(--ink);line-height:1.5}
.cc-derived{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:.92rem;color:var(--ink-dim)}
.cc-derived b{color:var(--ink)}
.cc-problems,.cc-warnings{margin:0 0 12px;padding-left:20px;font-size:.9rem}
.cc-problems li{color:var(--crimson);margin:3px 0}
.cc-warnings li{color:var(--brass);margin:3px 0}
.cc-cols{columns:2 260px;column-gap:26px}
.cc-cols .cc-row{break-inside:avoid}
.linkish{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
@media(max-width:560px){.cc-row input[type=text]{width:130px}}
.cc-note{margin-top:8px;padding:10px 12px;border-left:2px solid var(--brass);background:rgba(194,168,98,.06);white-space:pre-wrap;color:var(--ink);font-size:.92rem}
.cc-adj{color:var(--brass);font-size:.88rem}

/* Chronicle settings: Discord server and voice channel picker */
.dlist{margin:4px 0 16px}
.dpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--line-soft)}
.dgroup .dpick:first-of-type,.dlist>.dpick:first-child{border-top:0}
.dpick .dname{flex:1;color:var(--ink)}
.dpick.taken .dname{color:var(--ink-dim)}
.dpick .dnote{font-size:.82rem;color:var(--ink-dim)}
.dpick .dnote.warn{color:var(--brass)}
label.dpick{cursor:pointer}
label.dpick.taken{cursor:default}
.dgroup+.dgroup{margin-top:10px}
.dcat{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);padding-top:4px}
/* Chronicle settings: the Discord category forms */
.dsetup select{background:var(--panel)}
.dsetup>.btn{margin-top:12px}
.dsetup>.desc{margin:12px 0 0}
.dproblem{color:var(--brass);font-size:.9rem;margin:0 0 14px}
.dprogress{margin:14px 0 0;padding-left:20px;color:var(--ink);font-size:.9rem}
.dprogress li{padding:2px 0}
.dprogress li.done{color:var(--ink-dim)}
/* "Link your Discord account" on the Landing pages */
.linkbanner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.linkbanner .desc{margin:0}

/* Sessions, the session review page and Lore (server/views/sessions.js) */
.lore-session{text-decoration:none;color:inherit}
.lore-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:.88rem;color:var(--ink-dim)}
.lore-group{font-family:"Cormorant Garamond",serif;font-size:1.15rem;color:var(--brass);margin:22px 0 4px;border-bottom:1px solid var(--line-soft);padding-bottom:4px}
.lore-row{padding:12px 0 12px 10px;border-left:2px solid transparent;border-top:1px solid var(--line-soft)}
.lore-row.unreviewed{border-left-color:var(--brass)}
.lore-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
.lore-head .rname{font-family:"Cormorant Garamond",serif;font-size:1.2rem;color:var(--silver);font-weight:600;margin-right:4px}
.lore-row .rtag,.lore-head .rtag{font-size:.74rem;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--ink-dim);margin-left:4px;white-space:nowrap}
.lore-row .rtag.lore-new,.lore-head .rtag.lore-new{color:var(--silver);border-color:var(--silver)}
.rtag.lore-wait,.lore-row .rtag.lore-wait{color:var(--brass);border-color:var(--brass)}
.lore-row .rtag.lore-unsure{color:var(--crimson);border-color:var(--crimson)}
.lore-row .rmeta{margin-top:4px;font-size:.85rem;color:var(--ink-dim)}
.lore-text{margin-top:6px;font-size:.95rem;line-height:1.5;white-space:pre-line}
.lore-quote{margin-top:6px;font-size:.86rem;color:var(--ink-dim);font-style:italic;border-left:2px solid var(--line);padding-left:8px}
.lore-quote span{font-style:normal}
.lore-suggest,.lore-ask{margin-top:8px;font-size:.88rem;color:var(--brass);border:1px solid var(--line-soft);border-radius:3px;padding:8px 10px}
.lore-suggest .btn,.lore-ask .btn{margin-left:4px}
.lore-dramatis .btn{margin-left:4px}
.lore-dramatis-error{text-align:left;margin-top:6px}
.lore-target select{margin-left:4px}
.lore-target .btn{margin-left:4px}
.diary-published{margin:8px 0 12px;font-size:.88rem;color:var(--ink-dim)}
.diary-published.just{color:var(--silver);border:1px solid var(--silver);border-radius:3px;padding:8px 10px}
/* Character changes (session review page) and Changes from play (sheet) */
.cc-card{border-top:1px solid var(--line-soft);padding:14px 0 6px}
.cc-values{border-collapse:collapse;margin:10px 0 4px;font-size:.88rem}
.cc-values th{font-weight:400;color:var(--ink-dim);text-align:left;padding:2px 18px 2px 0;font-size:.8rem}
.cc-values td{padding:2px 18px 2px 0;color:var(--ink-dim)}
.cc-values tr.changed td{color:var(--ink)}
.cc-values tr.changed td:last-child{color:var(--brass);font-weight:700}
.cc-flags{margin:6px 0;padding-left:18px;font-size:.86rem;color:var(--crimson)}
.cc-item{padding:10px 0 10px 10px;border-left:2px solid var(--brass);margin-top:8px}
.cc-item.done{border-left-color:transparent;opacity:.8}
.cc-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.cc-line input[type=checkbox]{width:18px;height:18px;accent-color:var(--brass)}
.cc-tick{color:var(--silver);width:18px;text-align:center}
.cc-what{color:var(--silver);font-weight:700}
.cc-amount{width:70px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:3px 6px;font:inherit}
.cc-amount-done{color:var(--ink)}
.cc-line .rtag{font-size:.74rem;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--ink-dim);white-space:nowrap}
.cc-line .rtag.lore-new{color:var(--silver);border-color:var(--silver)}
.cc-line .rtag.lore-unsure{color:var(--crimson);border-color:var(--crimson)}
.cc-item .rmeta{margin-top:4px;font-size:.85rem;color:var(--ink-dim)}
.cc-addhead{margin-top:22px;font-size:1.15rem}
.cs-play-session{margin-top:12px}
.cs-play-session h3{font-size:1.1rem}
.cs-play-session ul{margin:6px 0 0;padding-left:18px}
.cs-play-session li{margin:3px 0}
.cs-play-values{color:var(--ink-dim);font-size:.88rem;margin-left:6px}
.lore-ask select{background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:4px 8px;font:inherit;font-size:.85rem}
.btn.danger{color:var(--crimson);border-color:var(--crimson)}
.lore-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px;margin-top:10px}
.lore-vis{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-dim)}
.lore-vis select{background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:4px 8px;font:inherit;font-size:.85rem}
.lore-chars{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 14px}
.lore-chars .checkrow-plain{margin-top:4px}
.lore-actions{display:flex;gap:6px}
.lore-facts{margin-left:22px}
.lore-facts .lore-row{padding-top:8px;padding-bottom:8px}
.lore-edit .formactions{margin-top:12px;padding-top:10px}
.lore-private{font-size:.78rem;color:var(--brass);text-transform:uppercase;letter-spacing:.06em}
.lore-diary-title{font-family:"Cormorant Garamond",serif;font-size:1.4rem;color:var(--silver)}
.lore-diary{line-height:1.65;font-size:1rem}
.lore-diary p,.lore-diary blockquote,.lore-diary ul,.lore-diary ol{margin:0 0 12px}
.lore-diary blockquote{border-left:2px solid var(--brass);padding-left:12px;color:var(--ink-dim);font-style:italic}
.lore-diary h3,.lore-diary h4,.lore-diary h5,.lore-diary h6{font-family:"Cormorant Garamond",serif;color:var(--silver);margin:16px 0 8px}
.lore-diary hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.lore-filters input[type=search]{flex:1;min-width:160px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:7px 10px;font:inherit;font-size:.88rem}
@media (max-width:600px){.lore-facts{margin-left:10px}.lore-foot{flex-direction:column}}
/* "What we know" (public/js/what-we-know.js): tabs, a dropdown on a phone */
.wwk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wwk-tabs{display:flex;flex-wrap:wrap;gap:4px}
.wwk-tabs a{padding:6px 12px;border:1px solid transparent;border-radius:3px;color:var(--ink-dim);text-decoration:none;font-size:.92rem}
.wwk-tabs a:hover{border-color:var(--line-soft);color:var(--ink)}
.wwk-tabs a.on{border-color:var(--brass);color:var(--brass);font-weight:700}
.wwk-tabselect{display:none;background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:7px 10px;font:inherit}
.wwk-bar input[type=search]{flex:1;min-width:160px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:7px 10px;font:inherit;font-size:.88rem}
.wwk-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.wwk-pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line-soft)}
.wwk-session{font-size:.9rem;color:var(--ink-dim);margin:14px 0 2px;font-weight:600}
.wwk-session a,.lore-row .rmeta a,.lore-text a{color:var(--silver)}
.lore-head a.rname{text-decoration:none}
.lore-row .rtag.wwk-known,.lore-head .rtag.wwk-known{color:var(--brass);border-color:var(--brass)}
.wwk-resolved{margin-top:14px}
.wwk-resolved summary{cursor:pointer;color:var(--ink-dim);padding:6px 0}
@media (max-width:600px){.wwk-tabs{display:none}.wwk-tabselect{display:block;flex:1}}

/* Elysium Nights splash (public/js/splash.js): over the login and sign-up
   pages once per browser tab. The one exception to "no decorative motion" in
   docs/ui-style-guide.md. Until fonts are ready only the plain background shows;
   .go starts the build, .out fades the words and then lifts the veil. */
.splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background-color:var(--bg);background-image:linear-gradient(to bottom,var(--bg-grad-top),var(--bg-grad-bottom))}
.splash::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,var(--bg-grad-top) 0%,var(--bg) 70%);opacity:0}
.splash-inner{position:relative;text-align:center;max-width:36rem;transition:opacity .5s ease}
.splash-eyebrow{color:var(--ink-dim);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px;opacity:0}
.splash-eyebrow span{white-space:nowrap}
.splash-name{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.05;text-transform:uppercase;
  font-size:clamp(1.9rem,8vw,3.8rem);letter-spacing:.5em;opacity:0;
  background:linear-gradient(180deg,var(--title-top),var(--title-bottom) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.splash-rule{width:min(220px,50vw);height:1px;margin:18px auto 16px;background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:0}
.splash-tag{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;color:var(--ink-dim);font-size:clamp(1.05rem,3.6vw,1.35rem);opacity:0}
.splash-skip{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));text-align:center;color:var(--ink-dim);font-size:.78rem;letter-spacing:.08em;opacity:0}
.splash.go::before{animation:splash-fade 1s ease forwards}
.splash.go .splash-eyebrow{animation:splash-fade .9s ease .3s forwards}
.splash.go .splash-name{animation:splash-gather 1.5s ease .2s forwards}
.splash.go .splash-rule{animation:splash-fade .8s ease .9s forwards}
.splash.go .splash-tag{animation:splash-fade .9s ease 1.1s forwards}
.splash.go .splash-skip{animation:splash-skip .6s ease 1.2s forwards}
.splash.out{opacity:0;pointer-events:none;transition:opacity .9s ease .3s}
.splash.out .splash-inner{opacity:0}
@keyframes splash-fade{to{opacity:1}}
@keyframes splash-gather{to{letter-spacing:.14em;opacity:1}}
@keyframes splash-skip{to{opacity:.7}}
/* Reduced motion keeps the same fades; only the letters drawing together goes. */
@media (prefers-reduced-motion:reduce){
  .splash-name{letter-spacing:.14em}
  .splash.go .splash-name{animation-name:splash-fade}
}

/* The Experience log (public/js/experience-log.js): date, what, amount. */
.xp-log{margin-top:8px}
.xp-line{display:grid;grid-template-columns:7.5em 1fr auto;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.xp-line:first-child{border-top:0}
.xp-date{color:var(--ink-dim);font-size:.82rem}
.xp-what b{color:var(--silver);font-weight:700}
.xp-amount{font-weight:700;color:var(--silver);font-variant-numeric:tabular-nums}
.xp-amount.minus{color:var(--ink-dim)}
@media(max-width:560px){.xp-line{grid-template-columns:1fr auto}.xp-date{grid-column:1/-1}}
/* A spend's status; refunded spends keep their amount, struck through. */
.xp-status{color:var(--ink-dim);font-size:.82rem}
.xp-status.waiting{color:var(--brass)}
.xp-note{display:block;color:var(--ink-dim);font-size:.85rem;font-style:italic}
.xp-amount.refunded{text-decoration:line-through;font-weight:400}
.xp-undo{margin-left:6px;padding:2px 9px}
.xp-new{color:var(--brass);font-size:.78rem;font-weight:700;border:1px solid var(--brass);border-radius:10px;padding:0 7px;margin-left:4px}
/* The Willpower, Blood and Health history (public/js/tracker-history.js). */
.trk-hist summary h2,.trk-hist summary h3{margin:0}
.trk-line{display:grid;grid-template-columns:10.5em 1fr;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.trk-line:first-child{border-top:0}
.trk-when{color:var(--ink-dim);font-size:.82rem}
.trk-what b{color:var(--silver);font-weight:700}
.trk-meta{display:block;color:var(--ink-dim);font-size:.82rem}
.trk-more{margin-top:8px}
@media(max-width:560px){.trk-line{grid-template-columns:1fr;gap:2px}}
/* A Character Management field the live feed just changed. */
@keyframes trk-flash{from{box-shadow:0 0 0 2px var(--brass)}to{box-shadow:0 0 0 2px transparent}}
.trk-live{animation:trk-flash 1.6s ease-out}
.trk-note{display:block;color:var(--brass);font-size:.8rem;margin-top:3px}
/* The ST's Experience page */
.xd-req{flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line-soft)}
.xd-req:first-child{border-top:0}
.xd-req .rname{margin-right:6px}
.xd-decline{flex-basis:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.xd-decline input[type=text]{flex:1;min-width:180px;width:auto}
.xd-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
/* Spend Experience (public/js/spend-experience.js). */
.xs-waiting{color:var(--brass);font-size:.82rem;white-space:nowrap}
.xs-now{color:var(--ink-dim);font-size:.82rem;white-space:nowrap}
.xs-note{color:var(--ink-dim);font-size:.86rem;margin:-4px 0 10px}
.xs-tag{color:var(--ink-dim);font-size:.78rem}
.xs-total{margin-right:auto;align-self:center;color:var(--ink-dim);font-size:.9rem}
.xs-spec{padding-left:18px}
#xp-waiting{margin:6px 0 14px}
#xp-waiting h3{margin:0 0 2px}
/* Character Management's Award Experience (Experience mode). */
.xp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0 10px;border-bottom:1px solid var(--line-soft);margin-bottom:4px}
.xp-bar .checkrow-plain{margin-top:0}
.rowitem .xp-tick{margin:0 10px 0 0;accent-color:var(--brass);width:16px;height:16px;vertical-align:1px;cursor:pointer}
.xp-confirm .os-row input{width:5.5em}
.xp-deduct{display:grid;grid-template-columns:7em 1fr auto;gap:10px;align-items:end}
.xp-deduct .btn{margin-bottom:1px}
@media(max-width:560px){.xp-deduct{grid-template-columns:1fr}}