/* ============================================================
   season-sheet.css — Season of Magic's own layer over the
   a-gibbous-moon sheet engine. Loaded AFTER sheet.css so the
   engine's own file stays syncable upstream; everything this
   site changes about the play sheet lives here.

   Two jobs:
   1. LANDSCAPE TABLET FIRST. The sheet is read on a tablet lying
      on its side at the table — roughly 1024x768 through
      1366x1024. The engine ships a 1120px two-column sheet, which
      on that screen wastes the width and spends the height. Here
      it becomes three columns (who you are · what you do on your
      turn · what you carry), a vitals row on a fixed 12-column
      grid, and tighter vertical rhythm whenever the viewport is
      short.
   2. Styling for the blocks this site added — death saves,
      Heroic Inspiration, and the feature stat line that Arcane
      Shot options use in the Attack tab.
   ============================================================ */

/* ------------------------------------------------- canvas width */
#sheet, .tray-inner{ max-width:1560px; }

/* ------------------------------------------------- columns
   Declared here in full because sheet.css's own max-width:820px
   rule would otherwise win on source order at small sizes. */
.sheet-body{ grid-template-columns:minmax(0,1fr); gap:1.1rem; }
@media (min-width:760px){
  .sheet-body{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
}
@media (min-width:1000px){
  .sheet-body{
    grid-template-columns:minmax(0,0.92fr) minmax(0,1.24fr) minmax(0,1fr);
    gap:1rem;
  }
  .sheet-col{ gap:1rem; }
}

/* ------------------------------------------------- vitals
   ONE row. Senses moved under the skills card and Reset/JSON moved into the
   header (both in sheet.js), which frees exactly the width the remaining nine
   blocks need on a 12-column grid:
     initiative · AC · speed · prof · HP(2) · hit dice · death saves(2) ·
     inspiration · rests(2)                                              */
@media (min-width:1000px){
  .vitals{
    display:grid; grid-template-columns:repeat(12,1fr);
    gap:0.5rem; margin-bottom:1rem; align-items:stretch;
  }
  .vitals > .vstat{ grid-column:span 1; min-width:0; }
  .vitals > .hp-block,
  .vitals > .death-block,
  .vitals > .rest-block{ grid-column:span 2; }
  .vitals > .econ-panel{ grid-column:1 / -1; }

  /* the labels are the binding constraint at a twelfth of the width */
  .vitals > .vstat > b{ font-size:0.5rem; letter-spacing:0.055em; }

  /* death saves: Roll sits beside the pip rows rather than under them, so the
     block stops being the tallest thing in the row */
  .vitals > .death-block{
    display:grid; grid-template-columns:auto auto;
    grid-template-areas:"lbl lbl" "rows roll";
    align-items:center; justify-items:center; column-gap:0.45rem;
  }
  .vitals > .death-block > b{ grid-area:lbl; }
  .vitals > .death-block .ds-rows{ grid-area:rows; margin:0; }
  .vitals > .death-block .ds-roll{ grid-area:roll; }

  /* two rest buttons, stacked and full width of their two columns */
  .vitals > .rest-block{ flex-direction:column; gap:0.3rem; justify-content:center; }
  .vitals > .rest-block button{ width:100%; }
}

/* ------------------------------------------------- header tools
   Reset and the JSON import/export, right-aligned across from the class line. */
.sh-id{ position:relative; }
.sh-tools{ display:flex; flex-wrap:wrap; gap:0.35rem; margin:0 0 0.5rem; }
@media (min-width:760px){
  .sh-tools{ position:absolute; top:0; right:0; margin:0; }
}
.sh-tools .btn-reset, .sh-tools .btn-io{ font-size:0.55rem; padding:0.3rem 0.6rem; }

/* ------------------------------------------------- senses under the skills
   Size and any non-computed senses read here, a line under the engine's
   computed passive perception. */
.senses-line{
  font-family:var(--caps); text-transform:uppercase;
  font-size:0.66rem; letter-spacing:0.08em; color:var(--ink-soft);
  margin-top:0.2rem; text-align:right;
}

/* ------------------------------------------------- short viewports
   Landscape tablets are wide but SHORT. Buy back vertical space
   without shrinking any touch target below ~32px.               */
@media (min-width:1000px) and (max-height:920px){
  .sheet-head{ padding:1.1rem 0 0.9rem; gap:1.1rem; }
  .sh-portrait{ width:84px; height:84px; padding:4px; }
  .sh-id h1{ font-size:clamp(1.7rem,3.4vw,2.3rem); }
  .vstat{ padding:0.42rem 0.5rem; }
  .vstat b{ font-size:0.52rem; margin-bottom:0.15rem; }
  .vstat .v{ font-size:1.3rem; }
  .hp-block .hp-cur{ font-size:1.4rem; }
  .hp-block .hp-max{ font-size:1rem; }
  .sheet-card{ padding:0.85rem 0.95rem; }
  .sheet-card > h2{ margin-bottom:0.5rem; }
  .play-body{ padding-bottom:132px; }
  .tray-inner{ min-height:78px; padding:0.5rem clamp(1rem,3vw,2rem); }
  .tm-total{ font-size:1.9rem; }
}

/* the turn tracker is a big empty bar until it is opened — on a
   short screen, collapse it to its label until then */
@media (min-width:1000px) and (max-height:920px){
  .econ-panel:not(.open){ padding:0.3rem 0.5rem; }
  .econ-panel:not(.open) .econ-btns{ gap:0.3rem; }
}

/* ------------------------------------------------- death saves */
.death-block .ds-rows{ display:flex; flex-direction:column; gap:0.22rem; align-items:center; margin:0.1rem 0 0.3rem; }
.death-block .ds-row{ display:flex; align-items:center; gap:0.3rem; }
.death-block .ds-lbl{
  font-family:var(--caps); text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.5rem; color:var(--ink-faint); width:2.4em; text-align:right;
}
.ds-pip{
  width:15px; height:15px; border-radius:50%; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--edge); transition:.12s;
}
.ds-pip:hover{ transform:scale(1.15); }
.ds-pip.s.on{ background:var(--olive-deep); border-color:var(--olive-deep); }
.ds-pip.f.on{ background:var(--rust); border-color:var(--rust-deep); }
.ds-roll{
  font-family:var(--caps); text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.55rem; cursor:pointer; border:1px solid var(--edge);
  background:var(--vellum); color:var(--ink-soft);
  border-radius:4px; padding:0.22rem 0.7rem; transition:.15s;
}
.ds-roll:hover{ border-color:var(--rust); color:var(--rust-deep); }

/* ------------------------------------------------- heroic inspiration */
.insp-block{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.insp-toggle{
  font-size:1.5rem; line-height:1; cursor:pointer; padding:0.1rem 0.4rem;
  background:transparent; border:0; color:var(--edge); transition:.15s;
}
.insp-toggle:hover{ transform:scale(1.12); color:var(--gold); }
.insp-block.on{ border-color:var(--gold); background:linear-gradient(180deg, rgba(224,190,98,0.3), rgba(224,190,98,0.12)); }
.insp-block.on .insp-toggle{ color:var(--gold); text-shadow:0 0 12px rgba(224,190,98,0.8); }

/* ------------------------------------------------- feature stat line
   Used by features that hit or force a save — the Arcane Shot
   options, which sit in the Attack tab rather than under Actions. */
.feat-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem;
  margin:0.3rem 0 0.1rem;
}
.feat-dmg{
  font-family:var(--disp); font-weight:700; font-size:0.9rem; cursor:pointer;
  border:1px solid var(--edge); background:var(--vellum); color:var(--rust-deep);
  border-radius:4px; padding:0.1rem 0.5rem; transition:.15s;
}
.feat-dmg:hover{ border-color:var(--rust); background:rgba(168,67,42,0.08); }
.feat-save, .feat-range{
  font-family:var(--caps); text-transform:uppercase; letter-spacing:0.08em;
  font-size:0.54rem; color:var(--ink-faint);
}
.feat-save{ color:var(--teal-deep); }

/* ------------------------------------------------- touch
   Tablets report hover:none — the engine already un-hides the
   Cast/Trigger buttons there; make sure the ones this site adds
   are comfortable to hit too. */
@media (hover:none){
  .ds-pip{ width:19px; height:19px; }
  .ds-roll{ padding:0.35rem 0.85rem; }
  .insp-toggle{ font-size:1.7rem; padding:0.2rem 0.5rem; }
}

/* ------------------------------------------------- notes card
   The notes are provenance — where the sheet came from, what was advanced at
   which level — not something read mid-turn, so the card ships collapsed and
   its heading is the toggle. */
.notes-card .notes-text{ display:none; }
.notes-card.open .notes-text{ display:block; }
.notes-toggle{ padding:0 !important; border:0 !important; }
.notes-toggle > button{
  /* a bare button that inherits the h2's own typography */
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  background:transparent; border:0; padding:0; width:100%;
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:0.6rem; user-select:none; transition:.15s;
}
.notes-toggle > button:hover{ color:var(--rust-deep); }
.notes-caret{
  font-family:var(--caps); font-size:0.9rem; line-height:1;
  color:var(--ink-faint); border:1px solid var(--edge); border-radius:4px;
  width:1.4rem; height:1.4rem; display:inline-flex;
  align-items:center; justify-content:center; flex:0 0 auto;
}
.notes-toggle > button:hover .notes-caret{ border-color:var(--rust); color:var(--rust-deep); }