/*
 * Herald — Character Sheet Layout
 * Richer sheet sections ported from wod-character-sheets,
 * adapted to the journal/parchment aesthetic.
 */

/* -------------------------------------------------------------------------
   SITEWIDE Z-INDEX SCALE — fixed/viewport-level overlays only.
   This does NOT cover local z-index (a component beating its own ::before/
   ::after or a sibling within its own stacking context, e.g. .alias-overlay
   in htr-sheet.css or .wizard-page::after's grain texture) — those stay as
   plain small integers scoped to their own component, untouched here.

   Every `position: fixed` overlay that can appear across more than one
   page/component was previously numbered in isolation (values ranged from
   100 to 10000 with no shared logic, and some pages could stack a modal
   *below* the sitewide dice FAB or save-indicator since neither of those
   sitewide elements was accounted for when the modal's own number was
   picked). Consolidated into five tiers, low → high:

     5000  Ambient/decorative — pointer-events:none atmosphere (Despair
           vignette, HTR cursor spotlight). Never interactive, so it only
           needs to sit above page content, not above real UI.
     6000  Persistent floating chrome — the dice FAB (dice-fab.css). Always
           reachable, but must yield to any modal that opens on top of it.
     6500  Persistent status toast — .save-indicator. Above the FAB (a
           status readout should stay legible over floating chrome) but
           still below any modal, which should visually cover it.
     8000  Modal backdrops + content — every dialog/modal in the app
           (wizard steps, mobile detail sheet, hdialog, share-modal, the
           dice roll-results modal). Unified at one tier so any one of them
           reliably covers the FAB/toast/ambient tiers; the app doesn't
           layer two of these at once, so relative order among modals
           themselves is just DOM order, not a numbering concern.
     9000  Full-page loading/error block — .loading-overlay/.error-overlay.
           Represents the sheet being unusable, so it sits above even an
           open modal.

   See dice-fab.css, htr-sheet.css, vtm-sheet.css, wta-sheet.css,
   journal-theme.css, wizard.css, and dice3d.js's #dice-modal-overlay for
   the consumers of this scale.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   PORTRAIT GRID — multi-slot portrait layout
   ------------------------------------------------------------------------- */
.portrait-grid-htr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 90px 90px auto 170px;
  gap: 6px;
  position: relative;
  min-height: 380px;
}

.portrait-body {
  grid-row: 1 / 5;
  grid-column: 1;
}

.portrait-hobby-1 { grid-row: 1; grid-column: 2; }
.portrait-hobby-2 { grid-row: 1; grid-column: 3; }
.portrait-hobby-3 { grid-row: 2; grid-column: 2; }
.portrait-hobby-4 { grid-row: 2; grid-column: 3; }
.portrait-alias  { grid-row: 3; grid-column: 2 / 4; }
.portrait-face   { grid-row: 4; grid-column: 2 / 4; }

.portrait-box {
  background-size: cover;
  background-position: center;
  background-color: var(--parchment-800);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--motion-base) var(--ease-standard),
              box-shadow   var(--motion-base) var(--ease-standard);
}

.portrait-box:hover {
  border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* VTM portrait grid — same structure, simpler (single body + face + 4 hobby) */
.portrait-grid-vtm {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 90px 90px auto 170px;
  gap: 6px;
  position: relative;
  min-height: 380px;
}

/* -------------------------------------------------------------------------
   ALIAS INPUT — stamped over portrait
   ------------------------------------------------------------------------- */
.alias-input {
  width: 100%;
  background: transparent;
  border: none;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 1.4rem;
  color: var(--accent);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9); /* one-off heading text-shadow, not a duplicate of the box-shadow elevation tokens */
  padding: 4px 0;
}

.alias-input::placeholder {
  color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* -------------------------------------------------------------------------
   TRACKER BOXES — square boxes for health/willpower (cycle click)
   Used for the 10-box health/willpower trackers from wod-character-sheets
   ------------------------------------------------------------------------- */
.box-tracker {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.tracker-box {
  width: 26px;
  height: 26px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  transition: border-color var(--motion-fast) var(--ease-standard),
              background    var(--motion-fast) var(--ease-standard),
              box-shadow    var(--motion-fast) var(--ease-standard);
}

.tracker-box:hover {
  border-color: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
}

.tracker-box.empty {
  background: transparent;
}

.tracker-box.superficial {
  background: var(--gold-700);
  border-color: var(--gold-500);
  color: var(--gold-100);
}

.tracker-box.aggravated {
  background: var(--crimson-700);
  border-color: var(--crimson-500);
  color: var(--gold-100);
}

.tracker-box.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Danger / Desperation dot boxes (10-box trackers) */
.tracker-box.danger-filled {
  background: var(--crimson-500);
  border-color: var(--crimson-400);
  box-shadow: 0 0 6px color-mix(in srgb, var(--crimson-500) 40%, transparent);
}

.tracker-box.desperation-filled {
  background: var(--gold-700);
  border-color: var(--gold-500);
  box-shadow: 0 0 6px color-mix(in srgb, var(--gold-500) 35%, transparent);
}

/* -------------------------------------------------------------------------
   DESPAIR TOGGLE — emergency alarm button (journal palette)
   ------------------------------------------------------------------------- */
.despair-toggle {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid var(--crimson-600);
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(
    45deg,
    var(--crimson-600),
    var(--crimson-600) 8px,
    var(--crimson-900) 8px,
    var(--crimson-900) 16px
  );
  color: var(--gold-500);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
  text-shadow:
    -1px -1px 0 var(--crimson-900), 1px -1px 0 var(--crimson-900),
    -1px 1px 0 var(--crimson-900),  1px 1px 0 var(--crimson-900);
}

.despair-toggle:hover {
  border-color: var(--crimson-400);
  box-shadow: 0 0 12px color-mix(in srgb, var(--crimson-600) 50%, transparent);
}

.despair-toggle.active {
  background: linear-gradient(145deg, var(--crimson-600), var(--crimson-800));
  border-color: var(--crimson-400);
  color: var(--gold-100);
  box-shadow: 0 0 20px color-mix(in srgb, var(--crimson-500) 70%, transparent),
              0 0 40px color-mix(in srgb, var(--crimson-500) 30%, transparent);
  animation: despair-pulse 1.5s ease-in-out infinite;
}

@keyframes despair-pulse {
  0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--crimson-500) 70%, transparent),
                          0 0 40px color-mix(in srgb, var(--crimson-500) 30%, transparent); }
  50%       { box-shadow: 0 0 30px color-mix(in srgb, var(--crimson-500) 90%, transparent),
                          0 0 60px color-mix(in srgb, var(--crimson-500) 50%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes despair-pulse {
    0%, 100%, 50% { box-shadow: 0 0 20px color-mix(in srgb, var(--crimson-500) 70%, transparent); }
  }
}

/* Despair overlay — full-page vignette */
.despair-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5000; /* ambient/decorative tier — see z-index scale doc above */
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    color-mix(in srgb, var(--crimson-700) 60%, transparent) 100%
  );
  animation: despair-pulse-overlay 2s ease-in-out infinite;
}

@keyframes despair-pulse-overlay {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* -------------------------------------------------------------------------
   DRIVE-BOOSTED SKILL ROW
   ------------------------------------------------------------------------- */
.skill-row-boosted .skill-label {
  color: var(--accent);
}

.skill-boost-diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: rotate(45deg);
  margin-right: 4px;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   SPECIALTY TAGS
   ------------------------------------------------------------------------- */
/* Badge (§Badge — .hbadge recipe applied in place; see journal-theme.css) */
.specialty-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid var(--accent);
  clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0% calc(100% - 3px), 0% 3px);
  border-radius: 0;
  padding: 2px 10px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: 'Special Elite', monospace;
}

.specialty-tag::before,
.specialty-tag::after {
  content: '\25C6';
  font-size: 0.48em;
  opacity: 0.55;
}

.specialty-tag button {
  color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.specialty-tag button:hover { color: var(--crimson-400); }

/* -------------------------------------------------------------------------
   EDGE / ADVANTAGE / FLAW ENTRIES
   ------------------------------------------------------------------------- */
.edge-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--parchment-800) 50%, transparent);
}

.edge-description,
.perk-description {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

.perk-entry {
  margin-left: 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* -------------------------------------------------------------------------
   XP LOG ENTRIES
   ------------------------------------------------------------------------- */
.xp-entry {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 3px 0;
  border-bottom: 1px solid var(--parchment-700);
}

.xp-entry:last-child { border-bottom: none; }

.xp-entry.add .xp-amount { color: var(--success); }
.xp-entry.spend .xp-amount { color: var(--crimson-400); }

/* -------------------------------------------------------------------------
   PAGE BREAK DIVIDER
   ------------------------------------------------------------------------- */
.sheet-divider-htr {
  height: 28px;
  margin: 1.5rem 0;
  background: repeating-linear-gradient(
    90deg,
    var(--crimson-600),
    var(--crimson-600) 20px,
    var(--crimson-900) 20px,
    var(--crimson-900) 40px
  );
  border-radius: var(--radius-sm);
  border: 1px solid var(--crimson-800);
  box-shadow: var(--shadow-e2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-divider-vtm {
  height: 28px;
  margin: 1.5rem 0;
  background: repeating-linear-gradient(
    90deg,
    var(--crimson-800),
    var(--crimson-800) 20px,
    var(--crimson-900) 20px,
    var(--crimson-900) 40px
  );
  border-radius: var(--radius-sm);
  border: 1px solid var(--crimson-700);
  box-shadow: var(--shadow-e2);
}

/* -------------------------------------------------------------------------
   TOUCHSTONE / ADVANTAGE / FLAW ENTRIES
   ------------------------------------------------------------------------- */
.list-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  background: color-mix(in srgb, var(--parchment-800) 40%, transparent);
}

/* -------------------------------------------------------------------------
   DOT TRACKER — ● character style (wod-character-sheets style)
   Used for attribute/skill dots in the richer layout
   ------------------------------------------------------------------------- */
.dot-tracker-wod {
  display: flex;
  gap: 2px;
  align-items: center;
}

.dot-tracker-wod .dot {
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
  color: var(--border);
  user-select: none;
}

.dot-tracker-wod .dot.filled {
  color: var(--accent);
  text-shadow: 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent);
}

.dot-tracker-wod .dot:hover {
  color: var(--accent-hover);
}

/* -------------------------------------------------------------------------
   ATTRIBUTE / SKILL ROW
   ------------------------------------------------------------------------- */
.attr-row,
.skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
  min-height: 26px;
}

.attr-row:hover,
.skill-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border-radius: var(--radius-sm);
}

.skill-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* -------------------------------------------------------------------------
   LOADING / ERROR OVERLAYS
   ------------------------------------------------------------------------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--parchment-900) 90%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000; /* full-page block tier — see z-index scale doc in this file's header */
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--parchment-700);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   WATERMARK
   ------------------------------------------------------------------------- */
/* #fossil 2026-07-19: orphaned — zero references. Duplicated at
   vtm-sheet.css:1471, also orphaned. */
.sheet-watermark {
  text-align: center;
  color: var(--parchment-700);
  font-family: 'IM Fell English', serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 1rem 0 0.5rem;
}