/* styles.css — clean, modern, colour-grouped character sheet.
   Colour language:
     rose    = combat (AC, HP, attacks, defences)
     blue    = abilities, saves, skills, senses
     violet  = spellcasting
     amber   = features, feats, traits
     emerald = inventory & equipment
     teal    = proficiencies & languages
     slate   = identity, companions, notes            */

:root {
  --ink: #1e293b; --ink-soft: #475569; --ink-faint: #94a3b8;
  --paper: #f1f5f9; --card: #ffffff; --line: #e2e8f0;
  --combat: #e11d48;   --combat-soft: #ffe4e9;
  --mind: #2563eb;     --mind-soft: #dbeafe;
  --magic: #7c3aed;    --magic-soft: #ede9fe;
  --feature: #d97706;  --feature-soft: #fef3c7;
  --gear: #059669;     --gear-soft: #d1fae5;
  --prof: #0d9488;     --prof-soft: #ccfbf1;
  --meta: #64748b;     --meta-soft: #e2e8f0;
  --radius: 10px;
  font-size: 15px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
}
button { font: inherit; cursor: pointer; }

/* ---------- loader screen ---------- */
#loader-screen { max-width: 640px; margin: 8vh auto; padding: 1rem; text-align: center; }
#loader-screen h1 { font-size: 1.5rem; }
#loader-screen h1::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto .6rem;
  background: url('icon.svg') center/contain no-repeat; }
#loader-screen .hint { text-align: left; }
.dropzone {
  border: 2px dashed var(--ink-faint); border-radius: var(--radius); padding: 3rem 1.5rem;
  text-align: center; color: var(--ink-soft); background: var(--card); transition: border-color .15s, background .15s;
}
.dropzone.dragover { border-color: var(--magic); background: var(--magic-soft); }
.loader-row { display: flex; gap: .5rem; margin-top: 1rem; }
.loader-row input[type="text"] { flex: 1; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.loader-error { color: var(--combat); margin-top: .75rem; white-space: pre-wrap; }
.hint { color: var(--ink-faint); font-size: .85rem; margin-top: 1rem; }

/* ---------- toolbar ---------- */
#toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--card); border-bottom: 1px solid var(--line); padding: .5rem .75rem;
}
#toolbar .spacer { flex: 1; }
.btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: .35rem .7rem;
  color: var(--ink); font-size: .85rem;
}
.btn:hover { background: var(--paper); }
.btn.primary { background: var(--magic); border-color: var(--magic); color: #fff; }
.btn.danger-outline { color: var(--combat); border-color: var(--combat); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--card); padding: .35rem .7rem; font-size: .85rem; color: var(--ink-soft); }
.seg button.active { background: var(--ink); color: #fff; }
.seg-label { font-size: .8rem; color: var(--ink-faint); margin-right: -.25rem; }

/* ---------- quickbar (sticky vitals) ---------- */
#quickbar {
  position: sticky; top: 0; z-index: 11; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  background: var(--ink); color: #fff; padding: .35rem .75rem; font-size: .85rem;
}
#quickbar .spacer { flex: 1; }
.qb-stat { white-space: nowrap; color: #cbd5e1; }
.qb-stat b { color: #fff; font-size: 1rem; font-variant-numeric: tabular-nums; }
.qb-hp { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.qb-hp .max { color: #94a3b8; font-weight: 400; }
#quickbar .hp-btns button { width: 1.5rem; height: 1.5rem; border-radius: 6px; border: 1px solid #475569; background: #334155; color: #fff; }
#quickbar .hp-btns input { width: 2.8rem; height: 1.5rem; border-radius: 6px; border: 1px solid #475569; background: #1e293b; color: #fff; text-align: center; }
.qb-slots { display: inline-flex; gap: .25rem; }
.qb-slot {
  border: 1px solid #7c3aed; background: #3b0764; color: #e9d5ff; border-radius: 6px;
  padding: .15rem .45rem; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.qb-slot .lvl { color: #a78bfa; font-size: .72rem; margin-right: .12rem; }
.qb-slot .lvl::after { content: ":"; }
.qb-slot b { font-size: .95rem; }
.qb-slot.empty { opacity: .55; border-color: #475569; background: #1e293b; }
.qb-slot.empty .lvl, .qb-slot.empty b { color: #cbd5e1; }
.qb-slot.bump, .qb-hp.bump { animation: bump .25s ease-out; }
@keyframes bump { 40% { transform: scale(1.25); filter: brightness(1.5); } }
.qb-count { color: #94a3b8; font-size: .75rem; min-width: 5.5rem; }
.qb-conc { border: 1px solid #475569; background: #1e293b; color: #fff; border-radius: 6px; padding: .2rem .45rem; width: 9rem; font: inherit; font-size: .8rem; }
.qb-filter { border: 1px solid #475569; background: #1e293b; color: #fff; border-radius: 6px; padding: .2rem .45rem; width: 12rem; font: inherit; font-size: .8rem; }
.qb-link { color: #93c5fd; text-decoration: none; font-size: .8rem; white-space: nowrap; }
.qb-link:hover { text-decoration: underline; }
.qb-conds {
  border: 1px solid #f59e0b; background: #451a03; color: #fcd34d; border-radius: 6px;
  padding: .1rem .5rem; font-size: .78rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qb-conds.inactive { border-color: #475569; background: #1e293b; color: #64748b; }
@media (max-width: 1100px) { .qb-conc { width: 7rem; } .qb-filter { width: 9rem; } }

/* HP severity: ambient colour signal, number remains the primary encoding */
.hp-edit.hp-low .cur { color: #d97706; }
.hp-edit.hp-crit .cur { color: var(--combat); }
#quickbar .hp-edit.hp-low .cur { color: #fbbf24; }
#quickbar .hp-edit.hp-crit .cur { color: #f87171; }

/* state warnings (over capacity, attunement at cap) */
.warn { color: #b45309; font-weight: 600; }

/* keyboard focus: visible ring everywhere, high-contrast on the dark quickbar */
:focus-visible { outline: 2px solid var(--magic); outline-offset: 2px; }
#quickbar :focus-visible { outline-color: #e9d5ff; }
button, .chip, .pip { touch-action: manipulation; }

/* clickable HP readout */
.hp-edit { cursor: pointer; }
.hp-edit:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.hp-edit-input { font: inherit; font-weight: inherit; width: 4.2rem; text-align: right; border: 1px solid var(--combat); border-radius: 6px; padding: 0 .15rem; }
#quickbar .hp-edit-input { width: 3.2rem; background: #1e293b; color: #fff; border-color: #7c3aed; }

/* active condition effects */
.active-effects { margin-top: .45rem; border-top: 1px dashed var(--line); padding-top: .35rem; }
.effect-row { font-size: .8rem; color: var(--ink-soft); margin: .2rem 0; }
.effect-row b { color: var(--combat); }

/* quick filter hides non-matching rows */
.clp.filtered { display: none; }

/* ---------- layout ---------- */
#sheet { max-width: 1400px; margin: 0 auto; padding: .75rem; }
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(12, 1fr); align-items: start; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
/* screen-only: on paper the multi-column card grid must survive (A4 ≈ 794 CSS px) */
@media screen and (max-width: 1000px) { .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; } }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card > header {
  display: flex; align-items: baseline; gap: .5rem; padding: .5rem .75rem;
  font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  border-left: 4px solid var(--accent, var(--meta)); background: var(--accent-soft, var(--meta-soft)); color: var(--ink);
}
.card > header .sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: .8rem; }
.card > .body { padding: .6rem .75rem; }
.card.combat  { --accent: var(--combat);  --accent-soft: var(--combat-soft); }
.card.mind    { --accent: var(--mind);    --accent-soft: var(--mind-soft); }
.card.magic   { --accent: var(--magic);   --accent-soft: var(--magic-soft); }
.card.feature { --accent: var(--feature); --accent-soft: var(--feature-soft); }
.card.gear    { --accent: var(--gear);    --accent-soft: var(--gear-soft); }
.card.prof    { --accent: var(--prof);    --accent-soft: var(--prof-soft); }
.card.meta    { --accent: var(--meta);    --accent-soft: var(--meta-soft); }

/* ---------- identity header ---------- */
#identity { display: flex; gap: .9rem; align-items: center; padding: .75rem; }
#identity img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
#identity h1 { margin: 0; font-size: 1.35rem; }
#identity .line { color: var(--ink-soft); font-size: .9rem; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--meta-soft); color: var(--ink-soft); }
.badge.magic { background: var(--magic-soft); color: var(--magic); }
.badge.combat { background: var(--combat-soft); color: var(--combat); }
.badge.gear { background: var(--gear-soft); color: var(--gear); }
.badge.feature { background: var(--feature-soft); color: #92400e; }
.badge.mind { background: var(--mind-soft); color: var(--mind); }

/* ---------- stat blocks ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.stat-box { text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .2rem; }
.stat-box .lbl { font-size: .65rem; font-weight: 700; letter-spacing: .05em; color: var(--ink-faint); }
.stat-box .mod { font-size: 1.3rem; font-weight: 700; color: var(--mind); }
.stat-box .score { font-size: .8rem; color: var(--ink-soft); }

.kv-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: .5rem; text-align: center; }
.kv { border: 1px solid var(--line); border-radius: 8px; padding: .35rem .2rem; }
.kv .v { font-size: 1.25rem; font-weight: 700; }
.kv .k { font-size: .65rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- tables & lists ---------- */
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: .2rem .4rem; border-bottom: 1px solid var(--line); }
td { padding: .28rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; }

.pill-list { display: flex; flex-wrap: wrap; gap: .3rem; }

/* skills */
.skill-row { display: flex; align-items: baseline; gap: .4rem; padding: .12rem 0; font-size: .87rem; border-bottom: 1px dotted var(--line); }
.skill-row:last-child { border-bottom: 0; }
.skill-row .dot { width: .6rem; text-align: center; color: var(--ink-faint); }
.skill-row .dot.p { color: var(--mind); } .skill-row .dot.e { color: var(--magic); }
.skill-row .val { min-width: 2.2rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.skill-row .stat { color: var(--ink-faint); font-size: .72rem; }
.skill-row .adv { color: var(--gear); font-size: .7rem; font-weight: 700; }

/* ---------- interactive: pips, hp, toggles ---------- */
.pips { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; }
.pip {
  width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--accent, var(--meta));
  background: transparent; padding: 0; display: inline-block;
}
.pip.filled { background: var(--accent, var(--meta)); }
.pip:hover { filter: brightness(1.15); }
.pip.square { border-radius: 4px; }

#hp-block { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
#hp-big { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#hp-big .max { color: var(--ink-faint); font-size: 1.2rem; font-weight: 600; }
.hp-btns { display: flex; gap: .3rem; align-items: center; }
.hp-btns button { width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-weight: 700; }
.hp-btns input { width: 3.2rem; height: 2rem; text-align: center; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.hp-bar { height: 6px; border-radius: 3px; background: var(--combat-soft); margin-top: .4rem; overflow: hidden; }
.hp-bar > div { height: 100%; background: var(--combat); transition: width .2s; }
.temp-hp label { font-size: .7rem; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.temp-hp input { width: 3.2rem; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: .3rem; font: inherit; }

.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .78rem;
  background: var(--card); color: var(--ink-soft);
}
.chip.on { background: var(--combat); border-color: var(--combat); color: #fff; }
.chip.on.good { background: var(--gear); border-color: var(--gear); }

.subhead { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: .5rem 0 .25rem; }
.note { font-size: .8rem; color: var(--ink-soft); }

/* ---------- collapsibles ---------- */
.clp > .clp-head { display: flex; align-items: baseline; gap: .45rem; cursor: pointer; padding: .18rem 0; }
.clp > .clp-head::before { content: "▸"; font-size: .7rem; color: var(--ink-faint); transition: transform .1s; }
.clp.open > .clp-head::before { transform: rotate(90deg); }
.clp > .clp-body { display: none; padding: .2rem 0 .5rem 1rem; font-size: .85rem; color: var(--ink-soft); max-width: 70ch; }
.clp.open > .clp-body { display: block; }
.clp-body p { margin: .35rem 0; }
.clp-body table { font-size: .8rem; margin: .35rem 0; }
.clp-body th, .clp-body td { border: 1px solid var(--line); padding: .2rem .4rem; }
.feat-name { font-weight: 600; }
.feat-lvl { color: var(--ink-faint); font-size: .72rem; }

/* spells */
.spell-level-head { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .2rem; }
.spell-level-head h3 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--magic); }
/* combat-relevant metadata: must pass contrast, it's read mid-turn, not a footnote */
.spell-meta { color: var(--ink-soft); font-size: .75rem; }

/* two-column spell list on wide screens: halves the scroll to any spell */
@media screen and (min-width: 1100px) {
  #spells-card .body { columns: 2; column-gap: 2rem; }
  #spells-card .body > .kv-strip { column-span: all; }
  #spells-card .clp, #spells-card .spell-level-head { break-inside: avoid; }
}
.spell-row .clp-head .nm { font-weight: 600; }
.spell-row.unprepared .clp-head .nm { color: var(--ink-soft); font-weight: 400; }
.spell-tags { display: inline-flex; gap: .25rem; }
.dice-hint { font-weight: 700; font-size: .8rem; color: var(--magic); font-variant-numeric: tabular-nums; }
/* "prepared only": hide unprepared spells, except rituals (castable from the book) */
body.prepared-only .spell-row.unprepared:not(.ritual) { display: none; }
body.prepared-only .spell-row.unprepared.ritual { opacity: .65; }

/* inventory */
.inv-row .clp-head .nm { font-weight: 600; }
.inv-detail { color: var(--ink-soft); font-size: .78rem; }
.charge-input { width: 3.4rem; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: .15rem; font: inherit; font-size: .8rem; }

footer { text-align: center; color: var(--ink-faint); font-size: .75rem; padding: 1rem; }
.hidden { display: none !important; }
.notes-print { display: none; }
@media (max-width: 800px) { .qb-link { display: none; } }

/* ---------- print ---------- */
@media print {
  @page { size: A4; margin: 9mm; }
  :root { font-size: 8.2pt; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #toolbar, #quickbar, .hp-btns, .no-print, footer { display: none !important; }
  #sheet { max-width: none; padding: 0; }
  .grid { gap: 2mm; }
  .card { border-radius: 4px; break-inside: avoid-page; }
  .card.allow-break { break-inside: auto; }
  .clp { break-inside: avoid; }
  input { border: none !important; }
  /* Full mode: expand every collapsible */
  body.print-full .clp > .clp-body { display: block !important; }
  /* Compact mode: keep collapsibles closed */
  body.print-compact .clp > .clp-body { display: none !important; }
  /* Compact mode: two-column spell list to keep the sheet dense */
  body.print-compact #spells-card .body { columns: 2; column-gap: 5mm; }
  body.print-compact #spells-card .body > .kv-strip { column-span: all; margin-bottom: 2mm; }
  #spells-card .spell-level-head { break-after: avoid; }
  .clp-head::before { content: none; } /* screen affordance, meaningless on paper */
  .notes-print { display: block; font-size: .8rem; white-space: pre-wrap; }
  textarea { display: none; }
  a { color: inherit; text-decoration: none; }
}