/* ─── ui/kit.css ───────────────────────────────────────────────────────────────
   The shared UI kit (docs/ui_design_bible.md §8, built 2026-10-17, step 2).
   Palette and fonts come from the tokens in index.html (styleguide.md); this file
   adds what a phone needs: touch sizes, a type floor, and the parts every screen
   reuses: buttons, the sheet, the top bar, rows, the segmented switch, chips, the
   status strip and the tab bar. Kit classes start with `k-`, shell parts `tw-`.
   ────────────────────────────────────────────────────────────────────────────── */

:root {
  --tap: 44px;               /* smallest thing a finger presses */
  --gap-tap: 6px;            /* space between neighbouring targets */
  --fs-body: 15px;           /* reading text floor */
  --fs-label: 12px;          /* labels and chips; nothing goes below 11px */
  --fs-small: 11px;
  --strip-h: 56px;
  --tabs-h: 60px;
  --rail-w: 84px;
  --brass: #b98a35;
  --brass-hi: #e7bf62;
  --mana: #6fa8dc;
  --gp: #e0b860;
  --hp: #5ab06a;
  --hp-mid: #d0a040;
  --hp-low: #d04a3a;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── The frame: strip on top, screen in the middle, tabs at the bottom ───────── */
/* (A rail down the left on a wide screen.) Hidden parts collapse their tracks. */
body.tw-framed {
  display: grid;
  grid-template-areas: "strip" "root" "tabs";
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}
@supports (height: 100dvh) { html, body.tw-framed { height: 100dvh; } }
/* No stacking layer of its own, so an overlay inside it (settings, a dialogue)
   can rise over the strip and the tabs. */
body.tw-framed #screen-root { grid-area: root; height: auto; min-height: 0; min-width: 0; z-index: auto; }
body.tw-framed .tw-strip { grid-area: strip; }
body.tw-framed .tw-tabs  { grid-area: tabs; }
@media (min-width: 900px) {
  body.tw-framed {
    grid-template-areas: "strip strip" "tabs root";
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.tw-strip[hidden], .tw-tabs[hidden] { display: none !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
/* Reset the game-wide brass `button` look, then three kinds (bible §8). */
.k-btn {
  min-height: var(--tap); padding: 0 16px; border-radius: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: none; box-shadow: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.k-btn:disabled { opacity: .45; cursor: default; }
.k-btn-pri   { background: linear-gradient(var(--brass-hi), var(--brass)); color: #1b1006; border: 1px solid #f0d080; }
.k-btn-sec   { background: transparent; color: var(--gold); border: 1px solid var(--brass); }
.k-btn-quiet { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.k-btn-wide  { width: 100%; }
.k-why { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ── Top bar: one kind of back (bible §3) ──────────────────────────────────── */
.k-topbar {
  display: flex; align-items: center; gap: 8px; min-height: var(--strip-h);
  padding: var(--safe-top) 8px 0 4px;
  background: linear-gradient(#2a180c, #1d1109); border-bottom: 1px solid var(--brass);
  position: relative; z-index: 5;
}
.k-back {
  width: var(--tap); height: var(--tap); flex: none; border-radius: 50%;
  background: transparent; border: none; box-shadow: none; color: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.k-back svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }
.k-topbar-title { font-family: var(--font-ui); font-size: 16px; color: var(--light); letter-spacing: .04em; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-topbar-right { font-family: var(--font-mono); font-size: 13px; color: var(--gold); flex: none; }

/* ── Sheet: slides up from the bottom; swipe down, Close, outside or back ────── */
.k-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 900; opacity: 0; transition: opacity .2s ease; }
.k-sheet-backdrop.open { opacity: 1; }
.k-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; max-height: 85dvh; overflow-y: auto;
  background: linear-gradient(#2a180c, #1d1109); border-top: 1px solid var(--brass); border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(16px + var(--safe-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.6);
  transform: translateY(105%); transition: transform .22s ease;
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text);
}
@media (min-width: 900px) { .k-sheet { left: 50%; right: auto; width: 520px; margin-left: -260px; } }
.k-sheet.open { transform: none; }
.k-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--dim); margin: 2px auto 10px; }
.k-sheet h3 { font-family: var(--font-ui); font-size: 17px; color: var(--light); letter-spacing: .03em; margin: 0 0 6px; }
.k-sheet p { margin: 0 0 10px; line-height: 1.45; }
.k-sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.k-sheet-actions .k-btn { flex: 1 1 auto; }

/* ── Rows, switch, chips, toast ──────────────────────────────────────────────── */
.k-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid #3a2414; cursor: pointer; }
.k-row .k-row-tx { flex: 1; min-width: 0; }
.k-row b { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--light); font-weight: 600; }
.k-row span { display: block; font-size: 14px; color: var(--muted); }
.k-seg { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.k-seg > button { flex: 1; min-height: 40px; background: transparent; border: none; box-shadow: none; color: var(--muted);
  font-family: var(--font-ui); font-size: 13px; text-transform: none; letter-spacing: .02em; }
.k-seg > button.on { background: #3a2414; color: var(--light); }
.k-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text); white-space: nowrap; }
.k-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + 16px + var(--safe-bottom)); z-index: 950;
  background: rgba(26,15,7,.94); border: 1px solid var(--brass); border-radius: 10px; padding: 10px 14px; max-width: min(92vw, 420px);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--light); box-shadow: 0 4px 14px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.k-toast.show { opacity: 1; }

/* ── Status strip (bible §2) ─────────────────────────────────────────────────── */
.tw-strip {
  display: flex; align-items: center; gap: 10px; min-height: var(--strip-h);
  padding: calc(4px + var(--safe-top)) 6px 4px 8px;
  background: linear-gradient(#2a180c, #1d1109); border-bottom: 1px solid var(--brass);
  position: relative; z-index: 20;
}
.tw-who { display: flex; align-items: center; gap: 8px; min-height: var(--tap); flex: none; max-width: 38%;
  background: transparent; border: none; box-shadow: none; padding: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.tw-face { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--gold); background: #2e1b10 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); color: var(--gold); font-size: 16px; overflow: hidden; }
.tw-who-tx { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.15; }
.tw-who-tx b { font-family: var(--font-ui); font-size: 14px; color: var(--light); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-who-tx small { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-meters { flex: 1; min-width: 0; max-width: 380px; display: flex; flex-direction: column; gap: 3px; }
.tw-strip-extra, .tw-gear { margin-left: auto; }
.tw-strip-extra + .tw-gear { margin-left: 0; }
.tw-meter { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.tw-meter > span:first-child { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); }
.tw-meter > i { display: block; height: 6px; border-radius: 3px; background: #120a05; overflow: hidden; }
.tw-meter > i > b { display: block; height: 100%; border-radius: 3px; }
.tw-meter > em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--text); min-width: 38px; text-align: right; }
.tw-meter.hp > i > b { background: var(--hp); }
.tw-meter.hp.mid > i > b { background: var(--hp-mid); }
.tw-meter.hp.low > i > b { background: var(--hp-low); }
.tw-meter.mp > i > b { background: var(--mana); }
.tw-meter.gp > i > b { background: var(--gp); }
.tw-strip-extra { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; flex: none; }
.tw-strip-extra:empty { display: none; }
.tw-gear { width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; padding: 0;
  background: transparent; border: none; box-shadow: none; color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.tw-gear svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ── Tab bar (bible §2); a left rail on wide screens ───────────────────────────── */
.tw-tabs {
  display: flex; min-height: var(--tabs-h); padding-bottom: var(--safe-bottom);
  background: linear-gradient(#24150b, #170d06); border-top: 1px solid var(--brass);
  position: relative; z-index: 20;
}
.tw-tab {
  flex: 1; min-width: 0; min-height: var(--tabs-h); padding: 6px 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: none; box-shadow: none; border-radius: 0; cursor: pointer;
  color: var(--muted); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 400;
  letter-spacing: .02em; text-transform: none; -webkit-tap-highlight-color: transparent;
}
.tw-tab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tw-tab.on { color: var(--gold); }
.tw-tab.on svg { filter: drop-shadow(0 0 4px rgba(225,184,90,.5)); }
.tw-tab:hover:not(.on) { color: var(--text); background: transparent; }
@media (min-width: 900px) {
  .tw-tabs { flex-direction: column; justify-content: flex-start; width: var(--rail-w); min-height: 0; padding: 8px 0;
    border-top: none; border-right: 1px solid var(--brass); }
  .tw-tab { flex: none; min-height: 72px; }
}

/* ── Pages: the character sheet as the Character and Pack tabs ──────────────── */
.cs-page { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cs-page .tw-modal { width: min(640px, 100%); max-height: none; height: auto; margin: 0 auto;
  border: none; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.cs-page .tw-modal-body { overflow: visible; padding: 14px 16px 24px; font-size: var(--fs-body); }
.cs-page .tw-modal-tabs { position: sticky; top: 0; z-index: 2; background: rgba(24,14,8,.96); padding-top: 10px; }
.cs-page .tw-modal-tab { min-height: 40px; font-size: 13px; padding: 8px 16px; }

/* ── A screen that opens on top: its top bar, then its body filling the rest ─── */
.k-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.k-page > .k-topbar { flex: none; }
.k-page > :not(.k-topbar) { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }

/* ── State reset ──────────────────────────────────────────────────────────────
   The game-wide `button`, `button:hover`, `button:active` and `button.on` rules
   paint brass gradients, shadows and a purple glow. Kit and shell buttons keep
   their own look in every state. */
.tw-tab, .tw-tab:hover, .tw-tab:active, .tw-tab.on,
.tw-who, .tw-who:hover, .tw-who:active,
.tw-gear, .tw-gear:hover, .tw-gear:active,
.k-back, .k-back:hover, .k-back:active,
.k-seg > button, .k-seg > button:hover, .k-seg > button:active {
  background: transparent; border: none; box-shadow: none;
}
.k-seg > button.on, .k-seg > button.on:hover { background: #3a2414; color: var(--light); }
.k-btn-pri, .k-btn-pri:hover, .k-btn-pri:active { background: linear-gradient(var(--brass-hi), var(--brass)); box-shadow: none; color: #1b1006; }
.k-btn-pri:active { filter: brightness(.9); }
.k-btn-sec, .k-btn-sec:hover, .k-btn-quiet, .k-btn-quiet:hover { background: transparent; box-shadow: none; }
.k-btn-sec:active, .k-btn-quiet:active, .tw-tab:active, .k-back:active, .tw-gear:active { background: rgba(225,184,90,.08); }
.tw-tab.on { color: var(--gold); }