/* sheet.css: the sheet view (A3a). The toolbar, the board and its pages,
 * section frames in Paper and Cards, edit mode and the tray, and the
 * narrow layout's vitals bar and tab bar. Positions come from the layout
 * engine as a transform; widths from data-span over data-cols; heights
 * from --h. Every duration and easing is a Kit token, and only transform,
 * box-shadow and colours ever move. */

:root { --cs-gap: 12px; --h: auto; }
.cs-sheet { position: relative; }

/* ---- toolbar ---- */
.cs-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cs-name { font-size: var(--text-lg); font-weight: 600; margin: 0 8px 0 0; min-width: 0; overflow-wrap: anywhere; }
.cs-spacer { flex: 1; }
.cs-edit, .cs-levelup, .cs-vitals-summary { flex: none; }
.cs-page-size { min-width: 6.5em; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface-alt); color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap;
}
.cs-save[data-state="saved"]:not([data-demo]) { background: var(--success-soft); color: var(--success-soft-text); border-color: transparent; }
.cs-save[data-state="quota"], .cs-save[data-state="error"], .cs-chip.is-danger {
  background: var(--danger-soft); color: var(--danger-soft-text); border-color: transparent; white-space: normal;
}
.cs-chip.is-danger { text-transform: capitalize; }
.cs-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-size: var(--text-sm); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.cs-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
@media (hover: hover) {
  .cs-btn:hover { background: var(--surface-alt); }
  .cs-btn.is-primary:hover { background: var(--accent-hover); }
}
.cs-seg { display: inline-flex; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.cs-seg-btn {
  border: 0; background: none; padding: 6px 12px; border-radius: 6px; min-height: 32px;
  color: var(--text-muted); font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard);
}
.cs-seg-btn[aria-pressed="true"], .cs-seg-btn[aria-checked="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-2); outline: 1px solid var(--segment-thumb-border); }
.cs-select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-sm); }
.cs-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.cs-btn:focus-visible, .cs-seg-btn:focus-visible, .cs-select:focus-visible, .cs-tab:focus-visible,
.cs-chip:focus-visible, .cs-hide:focus-visible, .cs-size:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- edit banner and tray ---- */
.cs-banner {
  display: none; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 12px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-soft-text); font-size: var(--text-sm);
}
.cs-sheet.is-editing .cs-banner { display: flex; }
.cs-banner .cs-check { color: inherit; }
.cs-sheet.is-touch .cs-check { min-height: 44px; }
.cs-banner-text { flex: 1 1 260px; }
.cs-tray {
  display: none; flex-direction: column; gap: 8px; margin-top: 14px; padding: 10px 12px;
  border: 1.5px dashed var(--border-alt); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text-muted);
}
.cs-sheet.is-editing .cs-tray { display: flex; }
.cs-tray-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-tray-label { font-weight: 600; color: var(--text); }
.cs-tray-none { font-style: italic; }
.cs-tray-chip { cursor: pointer; font-size: var(--text-sm); padding: 4px 10px; min-height: 32px; }
.cs-tray-chip.is-spell { background: var(--accent-soft); color: var(--accent-soft-text); border-color: transparent; }
/* ---- the Sheet's warnings (RB5-19; docs/LAYOUT.md "Warnings") ---- */
.cs-warnings {
  margin-bottom: 12px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--warning-soft); color: var(--warning-soft-text); font-size: var(--text-sm);
}
.cs-warnings[hidden] { display: none; }
.cs-warnings-h { cursor: pointer; font-weight: 600; min-height: 28px; display: list-item; }
.cs-sheet.is-touch .cs-warnings-h { min-height: 44px; line-height: 44px; }
.cs-warnings-h:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.cs-warnings-list { margin: 4px 0 2px; padding-left: 18px; }
.cs-warning { overflow-wrap: break-word; }
.cs-warning + .cs-warning { margin-top: 2px; }
.cs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cs-empty { margin: 32px auto; text-align: center; color: var(--text-muted); }

/* ---- the board, the stack and its pages ---- */
.cs-board { overflow-x: clip; height: var(--h, auto); }
.cs-stack { transform-origin: top left; }
.cs-page { position: relative; }
.cs-page-body { position: relative; height: var(--h, auto); }
.cs-page-label { display: none; }
.cs-sheet.is-paged .cs-stack {
  width: fit-content; margin-inline: auto; background: var(--surface);
  border-radius: 4px; box-shadow: var(--shadow-2);
}
.cs-sheet.is-paged .cs-page { width: 816px; height: 1056px; padding: 24px; }
.cs-sheet.is-paged.is-a4 .cs-page { width: 794px; height: 1123px; }
.cs-sheet.is-paged .cs-page + .cs-page::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px dashed var(--border-alt); }
.cs-sheet.is-paged .cs-page-label {
  display: block; position: absolute; top: -10px; right: 22px; z-index: 1; padding: 0 8px;
  border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: var(--text-xs);
}

/* Widths: a span of the page body's columns (gap between). */
.cs-section, .cs-placeholder, .cs-continued, .cs-fragment { position: absolute; top: 0; left: 0; width: 100%; }
/* FLIP is the only thing that moves what the engine places: nothing it
 * sets (transform, --h, a width from data-span) is ever a CSS transition. */
.cs-board, .cs-stack, .cs-page-body, .cs-section, .cs-placeholder, .cs-continued, .cs-fragment { transition: none; }
.cs-page-body[data-cols="12"] > [data-span="3"] { width: calc((100% - 11 * var(--cs-gap)) / 12 * 3 + 2 * var(--cs-gap)); }
.cs-page-body[data-cols="12"] > [data-span="4"] { width: calc((100% - 11 * var(--cs-gap)) / 12 * 4 + 3 * var(--cs-gap)); }
.cs-page-body[data-cols="12"] > [data-span="6"] { width: calc((100% - 11 * var(--cs-gap)) / 12 * 6 + 5 * var(--cs-gap)); }
.cs-page-body[data-cols="12"] > [data-span="8"] { width: calc((100% - 11 * var(--cs-gap)) / 12 * 8 + 7 * var(--cs-gap)); }
.cs-page-body[data-cols="6"] > [data-span="3"] { width: calc((100% - 5 * var(--cs-gap)) / 6 * 3 + 2 * var(--cs-gap)); }

/* ---- a section ---- */
.cs-card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: box-shadow var(--duration) var(--ease-standard), border-color var(--duration) var(--ease-standard);
}
.cs-sheet.is-cards .cs-card { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.cs-section-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); user-select: none; -webkit-user-select: none;
}
.cs-section-title { margin: 0; font: inherit; letter-spacing: inherit; }
.cs-grip { display: none; color: var(--text-muted); letter-spacing: 0; }
.cs-section-body { padding: 4px 14px 14px; min-width: 0; }
.cs-section-error { margin: 0; color: var(--danger-text); }
/* Paper: the MPMB homage, squarer boxes and the label under the box. */
.cs-sheet.is-paper .cs-card { border-radius: var(--radius-sm); border: 1.5px solid var(--border-alt); }
.cs-sheet.is-paper .cs-section-head { order: 2; justify-content: center; padding: 4px 10px 6px; border-top: 1px solid var(--border); color: var(--text); }
.cs-sheet.is-paper .cs-section-body { padding-top: 12px; }
.cs-continued {
  /* The band the packer leaves at the top of each page a tall section
     continues on (BAND in views/sheet.js). */
  height: 24px; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}

/* A tall section's copy on the pages it runs onto: no top border, no tools. */
.cs-fragment .cs-card { border-top-color: transparent; }

/* ---- edit mode ---- */
/* On touch only the name bar picks a section up (F-QA, QA-P-14): the rest
   of it lets the page scroll. */
.cs-sheet.is-editing .cs-section { cursor: grab; user-select: none; -webkit-user-select: none; }
.cs-sheet.is-editing .cs-section-head { touch-action: none; }
.cs-sheet.is-editing .cs-section-body { pointer-events: none; }
.cs-sheet.is-editing .cs-card { border-style: dashed; border-color: var(--border-alt); }
.cs-sheet.is-editing .cs-grip { display: inline; }
.cs-section:focus-visible { outline: none; }
.cs-section:focus-visible > .cs-card { box-shadow: var(--ring); }
.cs-tools {
  display: none; position: absolute; top: -10px; left: 6px; right: 6px; z-index: 3;
  justify-content: space-between; align-items: center; pointer-events: none;
}
.cs-sheet.is-editing .cs-tools { display: flex; }
.cs-tools > * { pointer-events: auto; }
.cs-hide {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--text-muted); color: var(--surface); font-weight: 700; line-height: 1; box-shadow: var(--shadow-2);
}
.cs-sizes { display: inline-flex; padding: 2px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: var(--shadow-2); }
.cs-size { border: 0; background: none; padding: 2px 7px; border-radius: var(--radius-full); color: var(--text-muted); font-size: var(--text-xs); cursor: pointer; }
.cs-size[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.cs-size-step { display: none; }
.cs-section.is-lifted { z-index: 10; pointer-events: none; cursor: grabbing; }
.cs-section.is-lifted > .cs-card { box-shadow: var(--shadow-3); border-style: solid; }
.cs-section.is-lifted .cs-tools { visibility: hidden; }
.cs-placeholder {
  height: var(--h); border: 2px dashed var(--border-alt); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

/* ---- the narrow layout (PLAN D15) ---- */
.cs-vitals, .cs-tabbar { display: none; }
.cs-sheet.is-narrow { padding-bottom: 72px; }
.cs-sheet.is-narrow .cs-toolbar { display: none; }
/* below the whole unfolded bar (name, buttons, numbers, conditions, jump chips) */
.cs-sheet.is-narrow .cs-section { scroll-margin-top: 284px; }
.cs-sheet.is-narrow .cs-vitals {
  display: block; position: sticky; top: 0; z-index: 5; margin: -16px -16px 12px; padding: 8px 12px 6px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
/* The name on a line of its own; the class chip and the buttons on one line
   below it, Print / PDF an icon button (UX-sheets-9, review CSUX-3).
   Scrolling down folds the bar to the name and the five numbers
   (.is-compact, set by views/sheet.js, which also gives the folded bar a
   bottom margin so its in-flow height does not change; UX-sheets-10,
   review CSUX-1). */
.cs-vitals-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cs-vitals-summary { flex: 1 1 0; max-width: max-content; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-vitals-top .cs-btn { flex: none; }
.cs-vitals-print { padding: 6px 9px; }
.cs-vitals-name { flex: 1 0 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cs-vitals.is-compact .cs-vitals-summary, .cs-vitals.is-compact .cs-vitals-top .cs-btn,
.cs-vitals.is-compact .cs-jump, .cs-vitals.is-compact .cs-vitals-conditions:empty { display: none; }
.cs-sheet.is-narrow .cs-vitals.is-compact { padding-top: 6px; padding-bottom: 4px; }
.cs-vitals.is-compact .cs-vitals-stats { margin-top: 2px; }
.cs-vitals.is-compact .cs-stat { padding: 1px 0; }
.cs-vitals-stats { display: flex; gap: 6px; margin-top: 4px; }
.cs-stat {
  flex: 1; min-width: 0; padding: 4px 0; text-align: center; border-radius: 10px;
  background: var(--surface); color: var(--text-muted); font-size: var(--text-xs); box-shadow: var(--shadow-1);
}
.cs-stat b { display: block; color: var(--text); font-size: var(--text-base); }
.cs-vitals-conditions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cs-jump { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.cs-jump-chip { flex: none; min-height: 28px; cursor: pointer; }
.cs-sheet.is-narrow .cs-tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-around;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
}
.cs-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; min-height: 48px; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--text-xs); text-decoration: none;
}
.cs-tab[aria-current="page"] { color: var(--link); }
.cs-tab-icon { font-size: var(--text-xl); line-height: 1; }

/* ---- 44 px targets on a phone and on any touch screen (A3a-7) ---- */
.cs-sheet.is-touch .cs-btn, .cs-sheet.is-touch .cs-seg-btn, .cs-sheet.is-touch .cs-select,
.cs-sheet.is-touch .cs-jump-chip, .cs-sheet.is-touch .cs-tray-chip { min-height: 44px; }
.cs-sheet.is-touch .cs-btn { min-width: 44px; }
.cs-sheet.is-touch .cs-tools { top: -20px; left: -4px; right: -4px; }
.cs-sheet.is-touch .cs-hide {
  width: 44px; height: 44px; background: radial-gradient(circle, var(--text-muted) 11.5px, transparent 12.5px); box-shadow: none;
}
.cs-sheet.is-touch .cs-sizes { display: none; }
.cs-sheet.is-touch:not(.is-narrow) .cs-size-step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--text);
  font-size: var(--text-sm); box-shadow: var(--shadow-2); cursor: pointer;
}