/* ============================================================
   character.css — the character tabs, and page one of the 2024 character sheet
   ============================================================ */

/* ─── CHARACTER TABS ─────────────────────────────────────── */
/* One tab per character, right-aligned above the inventory. Positioned so it
   stacks above #gm-placeholder, which otherwise paints over the whole panel —
   a GM with nobody selected still needs these to pick someone. */
#character-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 2px;
  padding: 0 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 6;
}
#character-tabs::-webkit-scrollbar { display: none; }

.char-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  border-radius: 0 0 7px 7px; /* hanging from the top edge of the panel */
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.char-tab:hover:not(.active) { color: var(--text); }
.char-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.char-tab-caret { font-size: 8px; opacity: 0.7; }

#char-tab-menu {
  position: fixed;
  z-index: 2000;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 3px;
  box-shadow: var(--shadow-deep), inset 0 0 0 1px var(--emboss-hi);
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 3px;
}
.char-view-btn {
  padding: 7px 12px;
  text-align: left;
  border-radius: 2px;
  font-size: 12px;
  transition: background 0.1s, color 0.1s;
}
.char-view-btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.char-view-btn.active { color: var(--accent); }
.char-view-btn.active::after { content: ' ✓'; }

/* ─── CHARACTER SHEET ────────────────────────────────────── */
/* One switch drives the swap: the sheet and the inventory never both show. */
/* ─── CHARACTER SHEET ────────────────────────────────────── */
/* Page one of the 2024 sheet. Every section on it is a widget the reader can
   drag into a different slot — see sheet-layout.css for where they sit; this
   file is what is drawn inside them. */
#character-sheet { display: none; }
#inventory-panel.sheet-view #character-sheet {
  display: block;
  flex: 1;
  overflow-y: auto;
  /* Reserved whether or not the sheet is currently long enough to need it. The
     widget rows fold when they run out of width (see sheet-layout.js), a fold
     makes the sheet taller, and a scrollbar arriving at that moment would take
     back the width the fold was measured against. */
  scrollbar-gutter: stable;
  /* Guarantees room for the torn edge even when the panel is squeezed narrow
     enough that `.sheet-scroll`'s auto side margins collapse to nothing. */
  padding: 0 62px;
  /* Transparent — it is drawn on the same torn sheet as the inventory, which
     the panel behind it provides. */
  background: transparent;
}
#inventory-panel.sheet-view #grid-scroll,
#inventory-panel.sheet-view #stash-section,
#inventory-panel.sheet-view #container-tabs { display: none; }

/* `auto` on the sides keeps it centred; the block margin comes from
   `.paper-sheet`, whose torn edge needs the room. */
.sheet-scroll { max-width: 1100px; margin: 62px auto; padding: 20px 22px 40px; }

/* ── Header ── */
/* The rule and the gold line it used to carry moved to `.widget-title` in
   sheet-layout.css: the identity block is one section among several now, and
   every one of them heads itself the same way. */
.sheet-head { position: relative; }

.sheet-name-input {
  width: 100%;
  padding: 2px 0;
  font-family: var(--font-title);
  font-size: 29px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: transparent;
  border: none;
  border-bottom: 1px dashed transparent;
}
.sheet-name-input:hover:not(:disabled) { border-bottom-color: var(--border2); }
.sheet-name-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* ── The identity block ──────────────────────────────────────────────────────
   A row of facts under the name, each named above and answered below: class,
   species, background, alignment, level. Built by renderSheetIdentity().

   **No box, no border, no rule.** These are not fields — they are what the
   character is, printed. Chrome around them would make them look editable,
   which is the thing the gear took away.

   Each fact is only as wide as it needs to be and the gap does the separating,
   so the row reads as a run of small captions rather than a table. It wraps
   whole facts on a narrow sheet, never a label away from its value. */
.sheet-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-bottom: 14px;
}

.identity-fact { display: flex; flex-direction: column; gap: 2px; }

.identity-key {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.identity-val {
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
}
/* An unset fact keeps its place with an em dash — a column that vanished would
   shuffle the rest along and leave the reader working out which one went. */
.identity-val.empty { color: var(--text-dim); }

.sheet-id-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 14px;
}

/* ── Shared field chrome ── */
.sheet-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.sheet-field > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sheet-field input,
.sheet-field select,
.sheet-field textarea { width: 100%; }
.sheet-field.narrow { max-width: 90px; }

.sheet-h {
  margin: 20px 0 10px;
  padding-bottom: 5px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}

/* Where the sections sit is no longer settled here. Every section is a widget
   the reader can drag somewhere else, and the row/column tree that holds them
   lives in sheet-layout.css and src/js/sheet-layout.js. The 2:1 the abilities
   used to be given by hand is now the default layout's opening share, and the
   reader can drag the seam to change it. */

/* ── Ability groups ── */
/* One number read three ways — the modifier, the save, the skills — so they are
   boxed together.

   Two columns, and never a third: the percentage in that `max()` is what caps
   it. A track can be no narrower than 46% of the row, so two is all that will
   ever fit, while the 196px floor still drops the grid to a single column when
   the sheet is squeezed narrower than two real columns — the auto-fit idiom the
   rest of the app uses, with a ceiling on it. Raising 46% past 50% would allow
   only one column ever; dropping it to a third would let three in.

   `align-items: start` lets a short group (Constitution has no skills at all)
   end where it ends instead of stretching to match its neighbour. */
.ability-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(196px, 46%), 1fr));
  gap: 10px;
  align-items: start;
}
.ability-group {
  padding: 8px 9px 7px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 var(--emboss-hi);
}
.ability-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* The modifier is what gets rolled with, so it is the big figure; the score is
   the smaller box beside it that it is worked out from. */
.ability-head {
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 7px;
}
.ability-mod {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px;
}
.ability-score-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 46px;
  padding: 2px 0 3px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border2);
  border-radius: 4px;
}
.ability-score-box > span {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ability-score {
  width: 100%;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--text);
  background: transparent;
  border: none;
}
.ability-score:focus { outline: none; color: var(--accent); }

/* ── Proficiency rows (saves + skills) ── */
.prof-list { display: flex; flex-direction: column; gap: 1px; }
.prof-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 3px;
}
.prof-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.prof-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1.5px solid var(--border2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.prof-dot:hover:not(:disabled) { border-color: var(--accent); }
.prof-dot[data-level="1"] { background: var(--accent); border-color: var(--accent); }
/* Expertise reads as a ring around a filled dot — more than proficient, and
   distinguishable without relying on colour alone. */
.prof-dot[data-level="2"] {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);
}
.prof-dot:disabled { cursor: default; opacity: 0.5; }

/* The save belongs to the ability itself, where each skill below is its own
   thing — bolded, and ruled off from them. */
.save-row { border-bottom: 1px solid var(--border); margin-bottom: 2px; padding-bottom: 4px; }
.save-row .prof-name,
.save-row .prof-value { font-weight: 700; }
.save-row .prof-name { letter-spacing: 0.02em; }

.prof-name { flex: 1; font-size: 12px; }
.prof-value {
  min-width: 26px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  color: var(--accent);
}

/* ── Stat tiles ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}
.hp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 6px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 var(--emboss-hi);
}
.stat-tile > span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}
.stat-tile input,
.stat-tile select {
  width: 100%;
  padding: 1px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  background: transparent;
  border: none;
}
.stat-tile input:focus, .stat-tile select:focus { outline: none; color: var(--accent); }
.stat-tile select { font-size: 12px; }
/* A worked-out number is not a box you can type in, and should not look like one. */
.stat-tile.derived {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  border-style: dashed;
}
.stat-tile.derived strong { font-size: 16px; color: var(--accent); }

/* ── Death saves ── */
.death-row { display: flex; gap: 16px; margin: 12px 0; flex-wrap: wrap; }
.death-block { display: flex; flex-direction: column; gap: 5px; }
.death-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.death-pips { display: flex; gap: 5px; }
.death-pip {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1.5px solid var(--border2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.death-pip:hover:not(:disabled) { border-color: var(--accent); }
.death-pip.filled { background: var(--enc-ok); border-color: var(--enc-ok); }
.death-pips.fail .death-pip.filled { background: var(--danger); border-color: var(--danger); }
.death-pip:disabled { cursor: default; opacity: 0.5; }

/* ── Checkboxes ── */
.sheet-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  font-size: 12px;
  cursor: pointer;
}
.sheet-check input { width: 14px; height: 14px; cursor: pointer; }
.sheet-check.inline { margin: 0; font-size: 11px; }

.armor-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.armor-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Someone else's sheet: readable, obviously not yours to change. */
#character-sheet.sheet-readonly input,
#character-sheet.sheet-readonly select,
#character-sheet.sheet-readonly textarea { opacity: 0.75; cursor: default; }

#viewing-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}

#viewing-banner-text { flex: 1; }

#gm-placeholder {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gm-ph-inner {
  text-align: center;
  color: var(--text-dim);
  max-width: 260px;
  line-height: 1.8;
  pointer-events: none;
}

.gm-ph-icon {
  font-size: 36px;
  margin-bottom: 14px;
  opacity: 0.35;
}