/* AUTHOR: Claude Opus 4.7 (1M context) // SCook (Computer Systems Engineering)
 * Created: 2026-05-18 in "char-tracker subdomain migration" session
 * Updated: 2026-05-18 in "flipmap admin modal scroll-lock + fill viewport" session
 * =============================================================================
 * chrome.css - shared top-bar + button + admin-modal design tokens
 * =============================================================================
 * Loaded on EVERY page (after dist.css). Defines the unified header chrome
 * for char-tracker AND its sibling flipmap. Same file lives at:
 *   src/css/chrome.css  (char-tracker)
 *   flipmap/css/chrome.css  (paizo-flipmap)
 * Keep them byte-identical.
 *
 * Design language: Society's layout + Eurostile Extended title font, with
 * Flipmap's button styles and abyssal-purple accents.
 *
 * Modal targets: every .shinra-modal rule below ALSO matches
 * .modal-box.shinra-modal so that flipmap's openModal() helper - which
 * wraps a <div class="modal-box shinra-modal"> in a .modal-overlay rather
 * than using a native <dialog> - picks up the same panel chrome and beats
 * the lower-specificity .modal-box base rules from flipmap/css/modals.css.
 * ============================================================================= */

/* CSS variables - same names as flipmap/core.css so .btn rules port verbatim. */
:root {
  --shc-bg-darkest: #1e1f22;
  --shc-bg-dark:    #2b2d31;
  --shc-bg-medium:  #313338;
  --shc-bg-light:   #383a40;
  --shc-bg-hover:   #4e505860;
  --shc-text-primary:   #f2f3f5;
  --shc-text-secondary: #b5bac1;
  --shc-text-muted:     #949ba4;
  --shc-text-faint:     #6d6f78;
  --shc-accent-blue:        #5865f2;
  --shc-accent-blue-hover:  #4752c4;
  --shc-accent-abyssal:     #6e5fa8;
  --shc-accent-abyssal-hov: #5a4d8c;
  --shc-accent-amber:       #f0b232;
  --shc-accent-red:         #ed4245;
  --shc-border-thin: #3f4147;
  --shc-radius-sm: 6px;
  --shc-radius-md: 8px;
  --shc-radius-lg: 10px;
  --shc-font-display: 'Eurostile Extended', 'Eurostile', 'Microgramma D', sans-serif;
}

/* =============================================================================
 * Top-bar / chrome header
 * ============================================================================= */
.shinra-chrome {
  background: var(--shc-bg-darkest);
  border-bottom: 2px solid var(--shc-border-thin);
  /* Lock the chrome's font-size to 1rem so em-based grid columns
     and child paddings evaluate identically regardless of what the
     surrounding body sets. Required because society/character.php
     has body.text-sm (Tailwind = 0.875rem) which would otherwise
     squeeze every em-sized column to 87.5%, clipping Release Notes
     and wrapping the user-bar. */
  font-size: 1rem;
  /* rem (not em) so the bar is the SAME pixel height on both sites
     regardless of body font-size. Tailwind base is 16px; flipmap's
     core.css sets body font-size to 12pt which is also 16px - but if
     any parent ever wraps the chrome with a different font-size,
     em-based padding would drift between sites.
     Bottom padding bumped from 0.7rem to 1rem to accommodate the
     descenders of the title font ('g', 'p', 'y' in 'Org Play
     Tracker' / 'Flip Map Tracker'). .chrome-title uses inline-flex
     + align-items:baseline which sizes the box to the baseline, not
     the full line-box, so descenders need to live in the bar's
     padding instead of the title's own box. */
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.shinra-chrome .chrome-inner {
  /* PIXEL-PARITY GRID. Both subdomains (society.shinra.cc and flipmap)
     render the same column structure in the same order with FIXED
     column widths. This guarantees that if you overlay the two sites'
     headers, every word position aligns exactly, regardless of whether
     the underlying button label has 6 chars (Global / Roster) or 7
     chars (Compare). Columns:
       1. title           : 14em - fits "Org Play Tracker v2.7.1"
       2. primary-nav     :  7em - fits "Global", "Roster", "Compare"
       3. id-slot         :  9em - "ID: 1234567 EDIT" or empty on flipmap
       4. admin           :  6em - "Admin" + gear icon
       5. search          :  1fr - elastic; absorbs free space
       6. release-notes   : 10em - "Release Notes"
       7. user-bar        : 11em - "<user> + logout icon"
  */
  display: grid;
  /* Title column is 18em (was 14em) - the extra 4em ≈ 64px shifts
     Primary-Nav / Org-ID / Admin / Search all right by 64px while the
     right-anchored Release-Notes + User-bar stay put (the elastic 1fr
     search absorbs the change). Per the user's eyeball spec. */
  grid-template-columns: 18em 7em 9em 6em minmax(8em, 1fr) 10em 11em;
  align-items: center;
  gap: 0.75rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* Every direct child of chrome-inner fills its grid column.
   Buttons that share a column (admin slot empty on non-admin viewers,
   id-slot empty on flipmap) still reserve the column width via
   `visibility:hidden`-style placeholders rendered in the PHP/template. */
.shinra-chrome .chrome-inner > * {
  min-width: 0;
  justify-self: stretch;
}
.shinra-chrome .chrome-inner > .btn.btn-sm {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shinra-chrome .chrome-inner > .user-bar {
  justify-self: end;
}
.shinra-chrome .chrome-title {
  font-family: var(--shc-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--shc-text-primary);
  font-size: 1.35rem;
  /* line-height grows the inline-box that owns the gradient background
     on .title-text below. The title uses -webkit-background-clip: text
     with text-fill-color: transparent, so the letters' visible color
     IS the gradient image showing through the glyph shapes. Descenders
     ('g', 'p', 'y') extend below a default line-box, landing in an
     area with no gradient -> they render transparent, looking 'clipped'.
     1.5 grows the line-box enough to cover the descenders. */
  line-height: 1.5;
  white-space: nowrap;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
}
.shinra-chrome .chrome-title .title-text {
  background: linear-gradient(180deg, #fff 0%, #d5d8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Version pill (rendered inside the admin modal title now, no longer
   in the chrome header where it was crowding the primary-nav button). */
.shc-version-pill,
.shinra-chrome .chrome-title .title-version {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--shc-text-faint);
  background: rgba(110, 95, 168, 0.12);
  border: 1px solid rgba(110, 95, 168, 0.35);
  padding: 0.15em 0.5em;
  border-radius: 4px;
  text-transform: lowercase;
  margin-left: 0.6em;
  vertical-align: middle;
}
.shinra-chrome .chrome-id-slot {
  /* The grid column above gives this slot 9em. Anything inside it
     (the ID badge when present, or empty on flipmap) renders within
     that fixed width so the Admin button to its right sits at the
     same x-position on both subdomains. */
  display: inline-flex;
  align-items: center;
  min-height: 1.6em;
}
.shinra-chrome .chrome-id-slot .id-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--shc-bg-dark);
  border: 1px solid var(--shc-border-thin);
  padding: 0.35em 0.7em;
  border-radius: var(--shc-radius-sm);
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--shc-text-muted);
}
.shinra-chrome .chrome-id-slot .id-badge .id-value {
  color: var(--shc-text-primary);
  font-weight: 700;
}
.shinra-chrome .chrome-id-slot .id-badge .id-edit {
  background: transparent;
  border: none;
  font-family: var(--shc-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--shc-accent-abyssal);
  cursor: pointer;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s;
}
.shinra-chrome .chrome-id-slot:hover .id-edit { opacity: 1; }
.shinra-chrome .chrome-search {
  flex: 1 1 auto;
  max-width: 32em;
  min-width: 10em;
}
.shinra-chrome .chrome-search input {
  width: 100%;
  background: var(--shc-bg-dark);
  border: 1px solid var(--shc-border-thin);
  border-radius: 999px;
  padding: 0.5em 1em;
  font-family: var(--shc-font-display);
  font-size: 0.78rem;
  color: var(--shc-text-primary);
  outline: none;
  transition: border-color 0.2s;
}
.shinra-chrome .chrome-search input::placeholder { color: var(--shc-text-faint); }
.shinra-chrome .chrome-search input:focus { border-color: var(--shc-accent-abyssal); }
.shinra-chrome .user-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--shc-font-display);
  font-size: 0.78rem;
  color: var(--shc-text-muted);
  margin-left: auto;
}
.shinra-chrome .user-bar i { color: var(--shc-text-faint); margin-right: 0.3em; }
.shinra-chrome .user-bar .logout-link {
  color: var(--shc-text-faint);
  font-size: 1.05em;
  text-decoration: none;
  padding: 0.15em 0.35em;
  border-radius: 4px;
  transition: color 0.15s;
}
.shinra-chrome .user-bar .logout-link:hover { color: var(--shc-accent-red); }

/* =============================================================================
 * Button system - ported from flipmap/core.css
 * ============================================================================= */
.shinra-chrome .btn,
.shinra-modal .btn,
.modal-box.shinra-modal .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 1em;
  border-radius: var(--shc-radius-md);
  font-family: var(--shc-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.shinra-chrome .btn-sm,
.shinra-modal .btn-sm,
.modal-box.shinra-modal .btn-sm { padding: 0.4em 0.75em; font-size: 0.7rem; }
.shinra-chrome .btn-mini,
.shinra-modal .btn-mini,
.modal-box.shinra-modal .btn-mini { padding: 0.25em 0.55em; font-size: 0.62rem; gap: 0.3em; }
.btn-primary { background: var(--shc-accent-blue); color: #fff; }
.btn-primary:hover { background: var(--shc-accent-blue-hover); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--shc-border-thin); color: var(--shc-text-muted); }
.btn-ghost:hover { background: var(--shc-bg-hover); color: var(--shc-text-primary); }
.btn-amber { background: var(--shc-accent-amber); color: #000; }
.btn-amber:hover { background: #d9a02e; color: #000; }
.btn-abyssal { background: var(--shc-accent-abyssal); color: #fff; }
.btn-abyssal:hover { background: var(--shc-accent-abyssal-hov); color: #fff; }
.btn-danger { background: var(--shc-accent-red); color: #fff; }
.btn-danger:hover { background: #c03537; color: #fff; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* =============================================================================
 * Admin modal - 90vw / 90vh fill with split-panel body
 * -----------------------------------------------------------------------------
 * Every selector is doubled: the bare .shinra-modal form targets a native
 * <dialog class="shinra-modal"> (char-tracker / abyssal-engine pattern),
 * the .modal-box.shinra-modal form targets flipmap's openModal() output
 * (a <div class="modal-box shinra-modal"> wrapped in a .modal-overlay).
 * The doubled selector also out-specifies the .modal-box base rules in
 * flipmap/css/modals.css (single-class, specificity 0,0,1,0) so size,
 * padding, and overflow are forced correctly without !important.
 * ============================================================================= */
.shinra-modal,
.modal-box.shinra-modal {
  padding: 0;
  border: 1px solid var(--shc-border-thin);
  border-radius: var(--shc-radius-lg);
  background: var(--shc-bg-dark);
  color: var(--shc-text-primary);
  /* Fill the viewport with only a thin breathing room around the modal.
     The overlay (.modal-overlay) ALSO has its own 1em padding by default
     in flipmap/css/modals.css; we kill that with the .overlay-shinra class
     that openModal() adds when the inner panel is a .shinra-modal. */
  width: 96vw;
  max-width: 1800px;
  height: 96vh;
  max-height: 96vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}
.shinra-modal::backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(2px); }

/* When a shinra-modal sits inside flipmap's .modal-overlay, drop the
   default 1em overlay padding so the modal can actually fill the area
   we asked for above. JS sets .overlay-shinra on the overlay when the
   inner panel class includes 'shinra-modal'. */
.modal-overlay.overlay-shinra { padding: 0; }

/* Body scroll-lock applied by flipmap's openModal() helper when a modal
   is open. Native <dialog>.showModal() locks the body automatically;
   the div-overlay path needs this class to do the same. */
body.shinra-modal-open { overflow: hidden !important; }

.shinra-modal .modal-head,
.modal-box.shinra-modal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9em 1.2em;
  border-bottom: 1px solid var(--shc-border-thin);
  background: var(--shc-bg-darkest);
}
.shinra-modal .modal-head h2,
.modal-box.shinra-modal .modal-head h2 {
  font-family: var(--shc-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1rem;
  margin: 0;
  text-transform: uppercase;
  color: var(--shc-accent-abyssal);
}
.shinra-modal .modal-close,
.modal-box.shinra-modal .modal-close {
  background: transparent;
  border: none;
  color: var(--shc-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.shinra-modal .modal-close:hover,
.modal-box.shinra-modal .modal-close:hover { color: var(--shc-accent-red); background: var(--shc-bg-hover); }
.shinra-modal .modal-body,
.modal-box.shinra-modal .modal-body {
  /* Modal head is ~3.5em tall; subtract from the 96vh outer height so
     the body fills the rest exactly (no gap, no double scrollbar). */
  height: calc(96vh - 3.5em);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 0;
}
.shinra-modal .panel-section,
.modal-box.shinra-modal .panel-section {
  padding: 0.9em 1.2em;
  border-bottom: 1px solid var(--shc-border-thin);
  overflow-y: auto;
}
.shinra-modal .panel-section h4,
.modal-box.shinra-modal .panel-section h4 {
  font-family: var(--shc-font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shc-text-muted);
  margin: 0 0 0.7em 0;
  font-weight: 700;
}
.shinra-modal .panel-section h4 i,
.modal-box.shinra-modal .panel-section h4 i { margin-right: 0.4em; color: var(--shc-accent-abyssal); }
.shinra-modal .panel-section.split-pane,
.modal-box.shinra-modal .panel-section.split-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: none;
}
.shinra-modal .split-left, .shinra-modal .split-right,
.modal-box.shinra-modal .split-left, .modal-box.shinra-modal .split-right {
  padding: 0.9em 1.2em;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shinra-modal .split-left,
.modal-box.shinra-modal .split-left { border-right: 1px solid var(--shc-border-thin); }

/* Admin user table */
.shinra-modal .user-table,
.modal-box.shinra-modal .user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.shinra-modal .user-table th,
.modal-box.shinra-modal .user-table th {
  font-family: var(--shc-font-display);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shc-text-faint);
  text-align: left;
  padding: 0.45em 0.6em;
  border-bottom: 1px solid var(--shc-border-thin);
}
.shinra-modal .user-table td,
.modal-box.shinra-modal .user-table td {
  padding: 0.55em 0.6em;
  border-bottom: 1px solid rgba(63, 65, 71, 0.5);
  color: var(--shc-text-secondary, var(--shc-text-muted));
}
.shinra-modal .user-table .uname,
.modal-box.shinra-modal .user-table .uname { color: var(--shc-text-primary); font-weight: 700; }
.shinra-modal .user-table .uemail, .shinra-modal .user-table .uip,
.modal-box.shinra-modal .user-table .uemail, .modal-box.shinra-modal .user-table .uip {
  font-family: 'Fira Code', monospace; font-size: 0.72rem; color: var(--shc-text-faint);
}
.shinra-modal .user-table .protected-tag,
.modal-box.shinra-modal .user-table .protected-tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--shc-text-faint); font-style: italic;
  padding: 0.2em 0.5em; border: 1px solid var(--shc-border-thin); border-radius: 4px;
}

/* Maintenance / emergency button grid */
.shinra-modal .ops-grid,
.modal-box.shinra-modal .ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6em;
}
.shinra-modal .ops-grid .btn,
.modal-box.shinra-modal .ops-grid .btn { width: 100%; justify-content: center; }
.shinra-modal .ops-grid form,
.modal-box.shinra-modal .ops-grid form { display: contents; }

/* File browser */
.shinra-modal .fb-pathbar,
.modal-box.shinra-modal .fb-pathbar {
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  color: var(--shc-text-faint);
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.shinra-modal .fb-pathbar i,
.modal-box.shinra-modal .fb-pathbar i { color: var(--shc-accent-abyssal); }
.shinra-modal .fb-list,
.modal-box.shinra-modal .fb-list {
  font-family: 'Fira Code', monospace;
  font-size: 0.78rem;
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid var(--shc-border-thin);
  border-radius: var(--shc-radius-sm);
  background: var(--shc-bg-darkest);
}
.shinra-modal .fb-row,
.modal-box.shinra-modal .fb-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.6em;
  border-bottom: 1px solid rgba(63, 65, 71, 0.4);
  cursor: default;
}
.shinra-modal .fb-row:hover,
.modal-box.shinra-modal .fb-row:hover { background: var(--shc-bg-hover); }
.shinra-modal .fb-row.fb-dir,
.modal-box.shinra-modal .fb-row.fb-dir { cursor: pointer; }
.shinra-modal .fb-row.fb-dir .fb-name,
.modal-box.shinra-modal .fb-row.fb-dir .fb-name { color: var(--shc-accent-abyssal); font-weight: 700; }
.shinra-modal .fb-row.fb-up .fb-name,
.modal-box.shinra-modal .fb-row.fb-up .fb-name { color: var(--shc-accent-amber); font-weight: 700; }
.shinra-modal .fb-row .fb-size,
.modal-box.shinra-modal .fb-row .fb-size { color: var(--shc-text-faint); font-size: 0.7rem; text-align: right; }
.shinra-modal .fb-row .fb-dl,
.modal-box.shinra-modal .fb-row .fb-dl {
  color: var(--shc-accent-blue);
  text-decoration: none;
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.shinra-modal .fb-row .fb-dl:hover,
.modal-box.shinra-modal .fb-row .fb-dl:hover { background: var(--shc-bg-hover); color: var(--shc-text-primary); }

/* Console viewer */
.shinra-modal .console-head,
.modal-box.shinra-modal .console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
}
.shinra-modal .console-head .console-actions,
.modal-box.shinra-modal .console-head .console-actions { display: flex; gap: 0.4em; }
.shinra-modal .console-view,
.modal-box.shinra-modal .console-view {
  flex: 1 1 auto;
  background: #000;
  border: 1px solid var(--shc-border-thin);
  border-radius: var(--shc-radius-sm);
  padding: 0.7em 0.9em;
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.72rem;
  color: #88f188;
  white-space: pre-wrap;
  overflow-y: auto;
  min-height: 0;
}
.shinra-modal .console-view.empty,
.modal-box.shinra-modal .console-view.empty { color: var(--shc-text-faint); font-style: italic; }

/* Modal-check checkbox label (shared with flipmap) */
.shinra-modal .modal-check-label,
.modal-box.shinra-modal .modal-check-label { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.72rem; cursor: pointer; }

/* =============================================================================
 * Release-notes modal (lighter than admin)
 * ============================================================================= */
.shinra-modal.release-modal,
.modal-box.shinra-modal.release-modal {
  width: 540px;
  max-width: 90vw;
  height: auto;
  max-height: 80vh;
}
.shinra-modal.release-modal .modal-body,
.modal-box.shinra-modal.release-modal .modal-body {
  display: block;
  height: auto;
  max-height: calc(80vh - 3.5em);
  overflow-y: auto;
  padding: 1em 1.4em;
}
.shinra-modal .release-entry,
.modal-box.shinra-modal .release-entry { margin-bottom: 1.4em; }
.shinra-modal .release-entry:last-child,
.modal-box.shinra-modal .release-entry:last-child { margin-bottom: 0; }
.shinra-modal .release-head,
.modal-box.shinra-modal .release-head {
  display: flex;
  gap: 0.7em;
  align-items: baseline;
  margin-bottom: 0.25em;
}
.shinra-modal .release-version,
.modal-box.shinra-modal .release-version {
  font-family: var(--shc-font-display);
  font-weight: 700;
  color: var(--shc-accent-abyssal);
  letter-spacing: 0.05em;
}
.shinra-modal .release-date,
.modal-box.shinra-modal .release-date { font-size: 0.75rem; color: var(--shc-text-faint); }
.shinra-modal .release-title,
.modal-box.shinra-modal .release-title { color: var(--shc-text-primary); font-weight: 700; margin-bottom: 0.4em; }
.shinra-modal .release-notes,
.modal-box.shinra-modal .release-notes { margin: 0 0 0 1.4em; padding: 0; color: var(--shc-text-muted); font-size: 0.85rem; line-height: 1.5; }
.shinra-modal .release-notes li,
.modal-box.shinra-modal .release-notes li { margin-bottom: 0.3em; }
.shinra-modal hr,
.modal-box.shinra-modal hr { border: 0; border-top: 1px solid var(--shc-border-thin); margin: 1em 0; }

/* Scrollbar consistency inside any chrome / modal area */
.shinra-chrome ::-webkit-scrollbar,
.shinra-modal ::-webkit-scrollbar,
.modal-box.shinra-modal ::-webkit-scrollbar { width: 8px; height: 8px; }
.shinra-chrome ::-webkit-scrollbar-track,
.shinra-modal ::-webkit-scrollbar-track,
.modal-box.shinra-modal ::-webkit-scrollbar-track { background: var(--shc-bg-darkest); }
.shinra-chrome ::-webkit-scrollbar-thumb,
.shinra-modal ::-webkit-scrollbar-thumb,
.modal-box.shinra-modal ::-webkit-scrollbar-thumb { background: var(--shc-border-thin); border-radius: 4px; }
.shinra-chrome ::-webkit-scrollbar-thumb:hover,
.shinra-modal ::-webkit-scrollbar-thumb:hover,
.modal-box.shinra-modal ::-webkit-scrollbar-thumb:hover { background: var(--shc-text-faint); }

/* =============================================================================
 * Society palette unification
 * -----------------------------------------------------------------------------
 * Society pages were built with Tailwind's slate-* palette (cool blue-black).
 * Flipmap uses the Discord-style warm gray palette. The user wants both sites
 * to read identically, so rebind Tailwind's slate-800/900/950 to the Discord
 * gray tokens defined at the top of this file.
 *
 * Specificity note: `body.bg-slate-900` is (0,2,0) and beats Tailwind's
 * `.bg-slate-900` (0,1,0) without !important. The `.bg-slate-800` rule
 * within a body falls back to !important because Tailwind utility classes
 * are the same specificity (0,1,0) and Tailwind's late-loading utility
 * layer otherwise wins by source order even when chrome.css loads after.
 * ============================================================================= */

/* Body backgrounds */
body.bg-slate-900,
body.bg-slate-950,
body.bg-slate-800 { background-color: var(--shc-bg-medium) !important; }

/* Card surfaces (anywhere bg-slate-800 is used on a non-body element) */
.bg-slate-800:not(body) { background-color: var(--shc-bg-dark) !important; }

/* Nested deeper darks (admin tables, dropdown bg, scenario lists, etc.) */
.bg-slate-900:not(body),
.bg-slate-950:not(body) { background-color: var(--shc-bg-darkest) !important; }

/* Lighter hover surfaces used on row highlights and the like */
.bg-slate-700 { background-color: var(--shc-bg-light) !important; }

/* Borders that were slate-700 / slate-800 read as cool-blue on a warm
   gray bg. Re-route to the Discord border token. */
.border-slate-700,
.border-slate-800 { border-color: var(--shc-border-thin) !important; }

/* =============================================================================
 * Responsive collapse for the chrome header
 * -----------------------------------------------------------------------------
 * The default 7-column grid measures ~57em (~912px at the default font size).
 * Below that the columns would overlap or the last ones would push off-screen.
 * Each breakpoint drops the lowest-priority slot first.
 *
 * Priority (high -> low, last to drop on each step down):
 *   Title > User-bar > Primary-nav > Admin > Search > Id-slot > Release-notes
 * ============================================================================= */

/* Below ~1200px: drop the Release Notes button (it's also reachable via admin
   on a future iteration if we want; for now it just hides). */
@media (max-width: 1199px) {
  .shinra-chrome .chrome-inner {
    grid-template-columns: 18em 7em 9em 6em minmax(8em, 1fr) 11em;
  }
  .shinra-chrome #btn-release-notes { display: none; }
}

/* Below ~950px: drop the Org ID slot. Society users can edit their ID from
   the index page roster card; the chrome's EDIT shortcut is convenience only. */
@media (max-width: 949px) {
  .shinra-chrome .chrome-inner {
    grid-template-columns: 17em 6em 5em minmax(6em, 1fr) 8em;
  }
  .shinra-chrome .chrome-id-slot { display: none; }
}

/* Below ~720px: TRUE MOBILE layout. Stack vertically with BIGGER fonts
   and proper touch targets. Mobile users need 16px+ text and 44px+ tap
   areas - the opposite of "make it smaller to fit." */
@media (max-width: 719px) {
  .shinra-chrome { padding: 0.6rem 0; }
  .shinra-chrome .chrome-inner {
    /* Flex column overrides the desktop grid entirely. */
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0 0.8rem;
    max-width: 100%;
  }
  .shinra-chrome .chrome-title {
    /* Bigger than desktop 1.35rem - chrome title is the primary affordance
       on mobile, where there's no room for secondary nav clutter. */
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    justify-content: center;
  }
  /* Every button stretches full width and gets a 44px tappable area
     (iOS HIG min). Font 0.95rem ~ 15px - readable without being huge. */
  .shinra-chrome .chrome-inner > a.btn,
  .shinra-chrome .chrome-inner > button.btn {
    width: 100%;
    min-height: 44px;
    font-size: 0.95rem;
    padding: 0.7em 1em;
    justify-content: center;
    letter-spacing: 0.06em;
  }
  /* Drop org-id slot and release-notes on mobile - rare interactions; the
     ID can be edited from the roster page, release notes via Admin modal. */
  .shinra-chrome .chrome-id-slot,
  .shinra-chrome #btn-release-notes { display: none; }
  /* Search input: full width, font-size: 1rem (16px) to prevent iOS Safari
     auto-zoom on focus (any input below 16px triggers the zoom). */
  .shinra-chrome .chrome-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .shinra-chrome .chrome-search input {
    font-size: 1rem;
    min-height: 44px;
    padding: 0.7em 1em;
  }
  /* User bar: centered + bigger logout target. */
  .shinra-chrome .user-bar {
    width: 100%;
    font-size: 0.95rem;
    justify-content: center;
    gap: 0.9em;
  }
  .shinra-chrome .user-bar .logout-link {
    font-size: 1.3rem;
    padding: 0.4em 0.6em;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Below ~480px (phone portrait): keep all the mobile-flex behaviour,
   just trim the title size a notch so it doesn't dominate the viewport. */
@media (max-width: 479px) {
  .shinra-chrome .chrome-title { font-size: 1.3rem; }
}

/* =============================================================================
 * Page-body mobile fixes (apply to char-tracker pages that use chrome).
 * The chrome above handles the top bar; these rules keep the page body
 * usable on a phone (text big enough to read, no horizontal scroll).
 * ============================================================================= */
@media (max-width: 719px) {
  body { font-size: 16px; }             /* baseline readable body text */
  /* Stop horizontal page overflow on Society's Tailwind layouts. */
  body, html { overflow-x: hidden; }
  /* Common Society containers shrink their inner padding on phones. */
  body .max-w-7xl { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  body .p-6      { padding: 0.75rem !important; }
  /* Roster + character cards: stack single-column on phones (the
     existing Tailwind sm:grid-cols-2 was firing at 640px which is still
     too narrow for the 2-col card layout). */
  body .grid-cols-2,
  body .md\:grid-cols-2,
  body .lg\:grid-cols-3,
  body .lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  /* Inputs: 16px min font to prevent iOS Safari focus-zoom across the
     whole site, not just the chrome search. */
  body input[type="text"],
  body input[type="number"],
  body input[type="search"],
  body input[type="email"],
  body input[type="password"],
  body textarea,
  body select {
    font-size: 16px !important;
  }
  /* Tab strip wraps to multiple rows instead of overflowing. */
  .shc-tab-strip { flex-wrap: wrap; }
  .shc-tab { flex: 1 1 auto; min-height: 44px; font-size: 0.78rem; }
}

/* =============================================================================
 * Number-input alignment (site-wide on both subdomains)
 * -----------------------------------------------------------------------------
 * Force digits to left-justify regardless of any text-align:center coming
 * from utility classes or theme defaults. DO NOT add padding-right - that
 * shifts the spinner arrows inward; the goal is to leave the browser's
 * default spinner position alone and just relocate the text out from
 * under it.
 * ============================================================================= */
input[type="number"] {
  text-align: left !important;
}