/* ============================================================
   Character sheet — layout & components
   ============================================================ */
.sheet-wrap{ max-width:1180px; margin:0 auto; padding:30px 32px 120px; }

/* sheet / story tabs */
.sheet-tabs{ display:flex; gap:4px; margin:18px 0 6px; border-bottom:1px solid var(--line-2); }
.sheet-tabs button{ display:inline-flex; align-items:center; gap:8px; border:none; background:transparent; color:var(--muted); font-family:var(--sans); font-size:14px; font-weight:600; padding:11px 16px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.13s; border-radius:8px 8px 0 0; }
.sheet-tabs button:hover{ color:var(--ink-2); background:var(--surface-2); }
.sheet-tabs button.on{ color:var(--accent-ink); border-bottom-color:var(--accent); }

/* story tab */
.story-wrap{ margin-top:var(--gap-card); }
.story-wrap .panel + .panel,
.story-wrap .story-grid,
.story-wrap .panel{ margin-top:0; }
.story-wrap > *{ margin-bottom:var(--gap-card); }
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); }
.story-card textarea{ width:100%; resize:vertical; font-size:14px; line-height:1.55; min-height:74px; }
.story-prompt{ font-size:12.5px; color:var(--faint); margin:-4px 0 11px; line-height:1.45; }
.appearance-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.ap-field{ display:flex; flex-direction:column; gap:5px; }
.ap-field label{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
@media (max-width:720px){ .story-grid{ grid-template-columns:1fr; } .appearance-grid{ grid-template-columns:1fr 1fr; } }

.sheet-head{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:22px 26px; display:flex; align-items:center; gap:22px; box-shadow:var(--shadow-sm);
}
.sheet-head .crest{
  width:60px; height:60px; flex:0 0 auto; border-radius:13px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-size:30px; font-weight:600; box-shadow:var(--shadow);
}
.sheet-head .id{ flex:1; min-width:0; }
.sheet-head .name-in{
  font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:-.015em; color:var(--ink);
  border:none; background:transparent; padding:2px 4px; border-radius:6px; width:100%;
}
.sheet-head .name-in:hover{ background:var(--surface-2); }
.sheet-head .name-in:focus{ background:var(--accent-soft); box-shadow:none; }
.sheet-head .subline{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.sheet-head .pill{ font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); border-radius:20px; padding:4px 12px; }
.sheet-head .pill b{ color:var(--accent-ink); font-weight:600; }
.sheet-head .lvl{ text-align:center; flex:0 0 auto; }
.sheet-head .lvl .n{ font-family:var(--mono); font-size:34px; font-weight:600; line-height:1; }
.sheet-head .lvl .l{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:4px; }

/* core stat strip */
.corestrip{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap-card); margin-top:var(--gap-card); }
.core{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:14px; text-align:center; position:relative;
}
.core .cl{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.core .cv{ font-family:var(--mono); font-size:30px; font-weight:600; line-height:1; margin-top:8px; letter-spacing:-.02em; }
.core .cs{ font-size:11px; color:var(--muted); margin-top:5px; }
.core.hp .hpline{ display:flex; align-items:baseline; justify-content:center; gap:3px; font-family:var(--mono); margin-top:6px; }
.core.hp input{ width:46px; text-align:right; font-family:var(--mono); font-size:26px; font-weight:600; border:none; background:transparent; padding:0; color:var(--ink); }
.core.hp input:focus{ background:var(--accent-soft); border-radius:6px; box-shadow:none; }
.core.hp .mx{ font-size:18px; color:var(--faint); }
.core.hp .temp{ margin-top:7px; font-size:11px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:5px; }
.core.hp .temp input{ width:34px; font-size:13px; text-align:center; padding:2px; border:1px solid var(--line-2); border-radius:5px; }
.core.accent{ background:var(--accent-soft); border-color:var(--accent-soft-2); }
.core.accent .cv{ color:var(--accent-ink); }

/* main sheet grid */
.sheet-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--gap-card); margin-top:var(--gap-card); align-items:start; }
.panel{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); padding:var(--pad-card); }
.panel-h{ font-family:var(--serif); font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.panel-h .ln{ flex:1; height:1px; background:var(--line); }
.panel + .panel{ margin-top:var(--gap-card); }

/* abilities column */
.abil-row{ display:flex; align-items:center; gap:13px; padding:11px 0; border-top:1px solid var(--line); }
.abil-row:first-of-type{ border-top:none; }
.abil-row .box{
  width:62px; height:62px; flex:0 0 auto; border-radius:11px; border:1px solid var(--line-2);
  background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.abil-row .box .m{ font-family:var(--mono); font-size:23px; font-weight:600; line-height:1; }
.abil-row .box .s{ font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px; }
.abil-row .meta{ flex:1; }
.abil-row .meta .nm{ font-weight:600; font-size:14px; }
.abil-row .meta .sv{ font-size:12px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:6px; }
.abil-row .meta .sv .d{ width:7px; height:7px; border-radius:50%; border:1.5px solid var(--line-2); }
.abil-row .meta .sv .d.on{ background:var(--accent); border-color:var(--accent); }
.abil-row .meta .sv .b{ font-family:var(--mono); margin-left:auto; color:var(--ink-2); }

/* skills */
.skill-row{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13.5px; }
.skill-row .d{ width:14px; height:14px; flex:0 0 auto; border-radius:4px; border:1.5px solid var(--line-2); display:grid; place-items:center; }
.skill-row button.d{ background:none; padding:0; cursor:pointer; }
.skill-row .d.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.skill-row .d.exp{ background:var(--accent-ink); border-color:var(--accent-ink); }
.skill-row .nm{ flex:1; color:var(--ink-2); }
.skill-row .ab{ font-size:10.5px; color:var(--faint); text-transform:uppercase; font-family:var(--mono); }
.skill-row .bn{ font-family:var(--mono); font-weight:600; color:var(--ink); min-width:30px; text-align:right; }
.skill-row.prof .nm{ color:var(--ink); font-weight:500; }
.passive{ margin-top:14px; padding-top:13px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.passive b{ font-family:var(--mono); color:var(--ink); font-size:15px; }

/* attacks table */
.atk{ width:100%; border-collapse:collapse; font-size:13.5px; }
.atk th{ text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:0 8px 8px; }
.atk td{ padding:9px 8px; border-top:1px solid var(--line); }
.atk td.nm{ font-weight:500; }
.atk td.mono{ font-family:var(--mono); }
.atk .mast{ font-size:11px; color:var(--accent); }

/* feature/trait list */
.feat{ padding:11px 0; border-top:1px solid var(--line); }
.feat:first-of-type{ border-top:none; }
.feat .fn{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.feat .src{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--faint); border-radius:5px; padding:2px 6px; font-weight:600; white-space:nowrap; flex:0 0 auto; }
.feat .src.cls{ background:var(--accent); }
.feat .src.sp{ background:var(--good); }
.feat .src.bg{ background:var(--warn); }
.feat .src.sub{ background:var(--accent-ink); }
.feat .src.asi{ background:var(--faint); }

/* spell slots */
.slots{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.slot{ flex:1 1 0; min-width:38px; text-align:center; background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:7px 4px; }
.slot .sn{ font-size:17px; font-weight:600; color:var(--accent-ink); }
.slot .sl{ font-size:10px; color:var(--faint); margin-top:2px; }
.slotrow{ display:flex; align-items:center; justify-content:space-between; background:var(--accent-soft); border:1px solid var(--accent-soft-2); border-radius:9px; padding:10px 14px; margin-bottom:14px; }
.slotrow .slk{ font-size:12px; color:var(--accent-ink); font-weight:600; }
.slotrow .slv{ font-size:15px; font-weight:600; color:var(--accent-ink); }

/* actions at a glance */
.actions-card{ margin-top:var(--gap-card); }
.actions-card .ac-hint{ font-size:11.5px; color:var(--faint); font-weight:400; font-family:var(--sans); }
.act-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); }
.act-col{ border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:13px 15px; background:var(--surface-2); }
.act-col h4{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.act-col .ac-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.act-col.action .ac-dot{ background:var(--accent); }
.act-col.bonus .ac-dot{ background:var(--good); }
.act-col.reaction .ac-dot{ background:var(--warn); }
.act-col.action{ border-color:var(--accent-soft-2); }
.act-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.act-col li{ font-size:12.5px; color:var(--ink-2); line-height:1.35; padding-left:14px; position:relative; }
.act-col li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:1.5px; background:var(--line-2); }
.act-col.action li::before{ background:var(--accent); }
.act-col.bonus li::before{ background:var(--good); }
.act-col.reaction li::before{ background:var(--warn); }
.act-col li.none{ color:var(--faint); font-style:italic; }
.act-col li.none::before{ display:none; }
@media (max-width:720px){ .act-grid{ grid-template-columns:1fr; } }

/* sheet header level stepper */
.lvl-stepper.sheet{ display:flex; align-items:center; gap:6px; }
.lvl-stepper.sheet button{ width:26px; height:26px; border:1px solid var(--line-2); background:var(--surface-2); border-radius:7px; font-size:15px; color:var(--ink-2); transition:.12s; }
.lvl-stepper.sheet button:hover:not(:disabled){ background:var(--accent-soft); color:var(--accent); }
.lvl-stepper.sheet button:disabled{ opacity:.3; cursor:not-allowed; }
.feat .ft{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.5; }

/* spells */
.spellstat{ display:flex; gap:10px; margin-bottom:14px; }
.spellstat .ss{ flex:1; text-align:center; background:var(--surface-2); border:1px solid var(--line-2); border-radius:9px; padding:9px; }
.spellstat .ss .l{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.spellstat .ss .v{ font-family:var(--mono); font-size:19px; font-weight:600; margin-top:3px; }
.spell-item{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-top:1px solid var(--line); }
.spell-item:first-of-type{ border-top:none; }
.spell-item .lv{ font-family:var(--mono); font-size:11px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:2px 6px; flex:0 0 auto; margin-top:1px; }
.spell-item .si-name{ font-weight:600; font-size:13.5px; }
.spell-item .si-text{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.45; }

/* notes */
.notes{ width:100%; min-height:90px; resize:vertical; font-size:13.5px; line-height:1.55; }

/* equipment list */
.gear-line{ font-size:13px; color:var(--ink-2); padding:6px 0; border-top:1px solid var(--line); }
.gear-line:first-of-type{ border-top:none; }
.gear-line .gt{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:600; margin-right:8px; }

@media (max-width:1080px){
  .sheet-grid{ grid-template-columns:1fr 1fr; }
  .corestrip{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  .sheet-wrap{ padding:20px 14px 100px; }
  .sheet-grid{ grid-template-columns:1fr; }
  .corestrip{ grid-template-columns:repeat(2,1fr); }
  .sheet-head{ flex-wrap:wrap; }
  .loadout-grid{ grid-template-columns:1fr !important; }
}

/* ── Screen-only hide (for print show-both-tabs) ── */
.screen-hide{ display:none; }

/* ── Print ── */
@media print{
  @page{ margin:.45in .5in; size:letter portrait; }

  /* Force color rendering (badges, dots, accents) */
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* Chrome: hide all UI */
  .topbar, .sheet-tabs, .stepnav,
  .lvl-stepper.sheet button,
  .actions-card,
  .color-picker-dock{ display:none !important; }

  /* Both tabs always visible; story starts on page 2 */
  .screen-hide{ display:block !important; }
  .print-story{ page-break-before:always; break-before:page; margin-top:0; }

  /* Root */
  html,body{ background:#fff !important; font-size:10.5px; }
  .sheet-wrap{ padding:0; max-width:none; }

  /* Remove all shadows */
  *{ box-shadow:none !important; }

  /* ── Header ── */
  .sheet-head{
    padding:10px 14px; gap:14px;
    border:1px solid #ccc; border-radius:8px;
    background:#fff !important;
  }
  .sheet-head .crest{
    width:44px; height:44px; border-radius:9px;
    font-size:20px; background:var(--accent) !important;
  }
  .sheet-head .name-in{ font-size:22px; background:transparent !important; }
  .sheet-head .pill{ font-size:10.5px; padding:2px 8px; border-color:#ccc; background:#f6f6f8 !important; }
  .sheet-head .pill b{ color:var(--accent-ink); }
  .sheet-head .lvl .n{ font-size:26px; }
  .sheet-head .lvl .l{ font-size:9px; }
  .sheet-tabs{ display:none !important; }

  /* ── Core stat strip ── */
  .corestrip{ gap:5px; margin-top:8px; grid-template-columns:repeat(6,1fr); }
  .core{ padding:7px 6px; border-color:#ccc; border-radius:6px; background:#fff !important; }
  .core.accent{ background:#eef0fe !important; }
  .core .cl{ font-size:8px; }
  .core .cv{ font-size:21px; margin-top:4px; }
  .core .cs{ font-size:9px; }
  .core.hp input{
    font-size:19px !important; width:38px !important;
    border:none !important; background:transparent !important; color:inherit !important;
  }
  .core.hp .mx{ font-size:14px; }
  .core.hp .temp{ font-size:9.5px; }
  .core.hp .temp input{
    font-size:11px !important; width:28px !important;
    border:1px solid #bbb !important; border-radius:4px !important; background:#fff !important;
  }

  /* ── Actions card ── */
  .actions-card{ margin-top:7px; break-inside:avoid; }
  .act-grid{ gap:6px; }
  .act-col{ padding:8px 10px; border-radius:6px; background:#f7f7f9 !important; border-color:#d4d4dc !important; }
  .act-col h4{ font-size:8.5px; margin-bottom:6px; }
  .act-col li{ font-size:10.5px; }
  .act-col li::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .act-col.action{ border-color:#c7c5f8 !important; }

  /* ── Sheet grid — flow panels into balanced CSS columns ── */
  .sheet-grid{
    display:block;
    columns:3;
    column-gap:9px;
    column-fill:balance;
    margin-top:7px;
  }
  /* display:contents removes the 3 wrapper divs from layout so panels
     flow directly into CSS columns in DOM order */
  .sheet-grid > div{ display:contents; }

  /* ── Panels ── */
  .panel{
    padding:8px 10px; border-radius:6px; border-color:#ccc; background:#fff !important;
    break-inside:avoid; -webkit-column-break-inside:avoid;
    margin-bottom:7px; display:block;
  }
  .panel + .panel{ margin-top:0; }
  .panel-h{ font-size:13px; margin-bottom:7px; }
  .panel-h .ln{ background:#ccc; }

  /* ── Ability rows ── */
  .abil-row{ padding:7px 0; }
  .abil-row .box{ width:48px; height:48px; border-radius:8px; border-color:#ccc; background:#f8f8fa !important; }
  .abil-row .box .m{ font-size:17px; }
  .abil-row .box .s{ font-size:9.5px; }
  .abil-row .meta .nm{ font-size:12px; }
  .abil-row .meta .sv{ font-size:10px; }
  .abil-row .meta .sv .d.on{ background:var(--accent) !important; border-color:var(--accent) !important; }

  /* ── Skills ── */
  .skill-row{ padding:3px 0; font-size:11px; }
  .skill-row .d.on{ background:var(--accent) !important; border-color:var(--accent) !important; }
  .skill-row .d.exp{ background:var(--accent-ink) !important; border-color:var(--accent-ink) !important; }
  .passive{ font-size:10.5px; margin-top:7px; padding-top:7px; }
  .passive b{ font-size:13px; }

  /* ── Feats / features ── */
  .feat{ padding:6px 0; }
  .feat .fn{ font-size:11.5px; }
  .feat .ft{ font-size:10.5px; }
  .feat .src{
    font-size:8.5px; padding:1.5px 5px; border-radius:4px;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .lvtag{ font-size:9px !important; padding:1px 4px !important; }

  /* ── Attacks ── */
  .atk th{ font-size:8.5px; padding:0 6px 5px; }
  .atk td{ padding:5px 6px; font-size:11px; }

  /* ── Spell section ── */
  .spellstat{ gap:5px; margin-bottom:8px; }
  .spellstat .ss{ padding:6px; border-color:#ccc; background:#f8f8fa !important; }
  .spellstat .ss .l{ font-size:8px; }
  .spellstat .ss .v{ font-size:15px; }
  .slots{ gap:4px; margin-bottom:8px; }
  .slot{ padding:5px 3px; border-radius:5px; border-color:#ccc; background:#f8f8fa !important; }
  .slot .sn{ font-size:13px; }
  .slot .sl{ font-size:8.5px; }
  .slotrow{
    padding:6px 10px; margin-bottom:8px; border-radius:7px;
    background:#eef0fe !important; border-color:#c7c5f8 !important;
  }
  .spell-item{ padding:5px 0; }
  .spell-item .lv{
    font-size:9px; padding:1.5px 5px;
    background:var(--accent-soft) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .spell-item .si-name{ font-size:11.5px; }
  .spell-item .si-text{ font-size:10px; }

  /* ── Equipment ── */
  .gear-line{ font-size:11px; padding:4px 0; }
  .gear-line .gt{ font-size:8.5px; }

  /* ── Story tab (page 2) ── */
  .story-wrap{ margin-top:0; }
  .story-wrap > *{ margin-bottom:8px; }
  .story-grid{ gap:8px; }
  .story-card textarea{
    font-size:11px; min-height:54px; resize:none;
    border:1px solid #ccc !important; background:#fff !important; border-radius:5px;
  }
  .story-prompt{ font-size:11px; }
  .appearance-grid{ gap:8px; }
  .ap-field input{
    font-size:11px; border:none !important; border-bottom:1px solid #bbb !important;
    background:transparent !important; border-radius:0 !important;
  }

  /* ── Break control ── */
  .corestrip, .sheet-head{ break-inside:avoid; }
}