/* Shared header, nav, title plate, and modal shell. Used on every page.
 *
 * Rim Edition interface system (2026-09-04). The theme files supply the
 * variables; this file and its siblings consume them and never name a font
 * or a hex color of their own:
 *   --font-display / --font-primary / --font-institutional  three type roles
 *   --h1-color … --h4-color                                 heading range
 *   --rule-weight (1px)  --radius-control (2px)  --radius-plate (0)
 * Controls are "app-relaxed": 2px corners on buttons, chips, inputs; flat 1px
 * borders on panels and modals; no shadows, no lift, color-only hover. */

/* ===== BASE TYPE (the theme sets the faces; this sets the roles) ===== */
body { letter-spacing: var(--track-body, 0.012em); }
h1, h2, h3, h4 {
  font-family: var(--font-display, var(--font-primary)), sans-serif;
  font-weight: 700;
  line-height: 1.15;
}
h1 { color: var(--h1-color, var(--sub-text)); }
h2 { color: var(--h2-color, var(--sub-text)); }
h3 { color: var(--h3-color, var(--sub-text)); }
h4 { color: var(--h4-color, var(--sub-text)); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--sub-teal);
  outline-offset: 2px;
}

/* ===== HEADER BAND ===== */
.substrate-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0 0.7rem;
  flex-wrap: wrap;
}

.substrate-brand {
  font-family: var(--font-display, var(--font-primary)), sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--h1-color, var(--sub-text));
  text-decoration: none;
  flex-shrink: 0;
}
.substrate-brand:hover { color: var(--sub-teal); }

.substrate-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
  font-family: var(--font-institutional), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-inst, 0.06em);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: var(--rule-weight, 1px) solid var(--sub-border);
  border-radius: var(--radius-control, 2px);
  background: var(--sub-surface);
  color: var(--sub-text);
  text-decoration: none;
  cursor: pointer;
  min-height: 30px;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
/* display:inline-flex above beats the [hidden] attribute's UA display:none,
   so a hidden nav link would otherwise render as an empty button. Same fix
   the admin modals and tab panels carry in css/index.css. */
.nav-link[hidden] { display: none; }
/* Same guard for the role-gated Generators menu. <details> defaults to
   display:block so [hidden] currently wins on its own — this makes that
   explicit, so giving .nav-group a display value later cannot quietly reveal a
   gamemaster menu to every signed-in player. */
.nav-group[hidden] { display: none; }

.nav-link:hover {
  border-color: var(--sub-teal);
  color: var(--sub-teal);
}
/* The current page inverts to Ink: structure, not a Teal semantic. */
.nav-link.active {
  background: var(--sub-text);
  color: var(--sub-bg);
  border-color: var(--sub-text);
}

/* Dropdown groups */
.nav-group {
  position: relative;
}
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 0 12px;
  border: var(--rule-weight, 1px) solid var(--sub-border);
  border-radius: var(--radius-control, 2px);
  background: var(--sub-surface);
  color: var(--sub-text);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after {
  content: "▾";
  font-size: 9px;
  opacity: 0.7;
}
.nav-group > summary:hover,
.nav-group[open] > summary {
  border-color: var(--sub-teal);
  color: var(--sub-teal);
}
.nav-group.has-active > summary {
  background: var(--sub-text);
  color: var(--sub-bg);
  border-color: var(--sub-text);
}

/* A flat 1px panel on the page Ground. No shadow: depth is rule and fill. */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--sub-bg);
  border: var(--rule-weight, 1px) solid var(--sub-border);
  border-radius: var(--radius-plate, 0);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.nav-dropdown a,
.nav-dropdown button {
  display: block;
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--sub-text);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-primary), sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: var(--track-body, 0.012em);
  text-align: left;
  width: 100%;
}
.nav-dropdown a:hover,
.nav-dropdown button:hover {
  background: var(--sub-surface);
  color: var(--sub-teal);
}
.nav-dropdown a.active,
.nav-dropdown button.active {
  background: var(--sub-text);
  color: var(--sub-bg);
}

.nav-dropdown-divider {
  border: none;
  border-top: var(--rule-weight, 1px) solid var(--sub-border);
  margin: 8px 14px;
}
.nav-dropdown-label {
  padding: 4px 14px 6px;
  color: var(--sub-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===== RULES AND THE TITLE PLATE ===== */
.substrate-rule {
  border: none;
  border-top: var(--rule-weight, 1px) solid var(--sub-border);
  margin: 0;
}

/* The title plate: institutional kicker, Condensed caps H1 in the H1 color,
   an italic subtitle, and the one hairline the system allows. Left-aligned
   like every printed reference. */
.page-heading {
  text-align: left;
  padding: 24px 0 10px;
  margin-bottom: 20px;
  border-bottom: 0.5px solid var(--sub-border);
}
.page-kicker {
  font-family: var(--font-institutional), sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-inst, 0.06em);
  color: var(--sub-muted);
  margin-bottom: 4px;
}
.page-heading h1 {
  font-family: var(--font-display, var(--font-primary)), sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--h1-color, var(--sub-text));
  margin: 0;
}
.page-subtitle {
  font-family: var(--font-primary), sans-serif;
  font-size: 14px;
  font-style: italic;
  text-transform: none;
  letter-spacing: var(--track-body, 0.012em);
  color: var(--sub-muted);
  line-height: 1.45;
  margin-top: 6px;
  max-width: 70ch;
  white-space: normal;
}
/* The plate carries its own hairline; the rule that used to follow it is
   redundant now and stays in the markup only so old pages need no edit. */
.page-heading + .substrate-rule { display: none; }

/* ===== MODAL SHELL (changelog, login, feedback) ===== */
.substrate-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem 1rem;
}
.substrate-modal.open { display: flex; }
.substrate-modal-panel {
  background: var(--sub-bg);
  border: var(--rule-weight, 1px) solid var(--sub-border);
  border-radius: var(--radius-plate, 0);
  width: min(720px, 100%);
  max-height: 86vh;
  display: flex; flex-direction: column;
}
.substrate-modal-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: var(--rule-weight, 1px) solid var(--sub-border);
}
.substrate-modal-title {
  font-family: var(--font-display, var(--font-primary)), sans-serif;
  font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--h1-color, var(--sub-text));
}
.substrate-modal-close {
  background: transparent; border: none;
  color: var(--sub-muted); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 0.4rem;
}
.substrate-modal-close:hover { color: var(--sub-teal); }
.substrate-modal-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--font-primary), sans-serif;
  text-transform: none;
  letter-spacing: var(--track-body, 0.012em);
  font-weight: 400;
}
.substrate-modal-body h1 { font-size: 20px; margin: 0 0 0.5rem; }
.substrate-modal-body h2 { font-size: 17px; margin: 1rem 0 0.4rem; border-top: var(--rule-weight, 1px) solid var(--sub-border); padding-top: 0.35rem; }
.substrate-modal-body h3 { font-size: 15px; margin: 0.8rem 0 0.3rem; }
.substrate-modal-body p { margin: 0.4rem 0; }
.substrate-modal-body ul, .substrate-modal-body ol { margin: 0.4rem 0 0.4rem 1.2rem; }
.substrate-modal-body li { margin-bottom: 0.2rem; }
.substrate-modal-body code { background: var(--sub-surface); border: var(--rule-weight, 1px) solid var(--sub-border); padding: 0 4px; border-radius: 3px; font-family: var(--font-institutional), sans-serif; font-size: 12px; }
.substrate-modal-body hr { border: none; border-top: var(--rule-weight, 1px) solid var(--sub-border); margin: 0.8rem 0; }

/* Google sign-in button slot inside the login modal (and on the login page,
   where the same classes apply). The GIS button renders as an iframe with its
   own size, so the slot just gives it room. */
.substrate-google-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.7rem;
}
.substrate-google-slot[hidden] { display: none; }
.substrate-google-sep {
  display: flex;
  align-items: center;
  text-align: center;
  font-family: var(--font-institutional), sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub-muted);
  margin: 0 0 0.6rem;
}
.substrate-google-sep[hidden] { display: none; }
.substrate-google-sep::before,
.substrate-google-sep::after {
  content: "";
  flex: 1;
  border-top: var(--rule-weight, 1px) solid var(--sub-border);
}
.substrate-google-sep span { padding: 0 0.7rem; }

/* Login and feedback forms inside the shared modal */
.substrate-login-form,
.substrate-feedback-form {
  display: grid;
  gap: 0.7rem;
}
.substrate-login-label {
  font-family: var(--font-institutional), sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-inst, 0.06em);
  color: var(--sub-muted);
}
.substrate-feedback-form select,
.substrate-feedback-form textarea,
.substrate-login-form input[type="email"],
.substrate-login-form input[type="password"] {
  padding: 0 10px;
  min-height: 32px;
  background: var(--sub-bg);
  border: var(--rule-weight, 1px) solid var(--sub-border);
  border-radius: var(--radius-control, 2px);
  font-size: 14px;
  color: var(--sub-text);
  font-family: inherit;
}
.substrate-feedback-form textarea {
  min-height: 8rem;
  padding: 8px 10px;
  resize: vertical;
}
.substrate-feedback-form select:focus,
.substrate-feedback-form textarea:focus,
.substrate-login-form input:focus {
  outline: none;
  border-color: var(--sub-teal);
}
.substrate-login-submit {
  margin-top: 0.4rem;
  min-height: 32px;
  padding: 0 14px;
  background: var(--sub-teal);
  color: var(--sub-bg);
  border: var(--rule-weight, 1px) solid var(--sub-teal);
  border-radius: var(--radius-control, 2px);
  font-family: var(--font-institutional), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-inst, 0.06em);
  cursor: pointer;
}
.substrate-login-submit:hover { background: var(--sub-text); border-color: var(--sub-text); }
.substrate-login-submit:disabled { opacity: 0.6; cursor: progress; }
.substrate-login-error {
  font-size: 12px;
  color: var(--sub-danger);
  min-height: 1em;
  margin-top: 0.15rem;
}
.substrate-login-register {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: var(--rule-weight, 1px) solid var(--sub-border);
  font-size: 12px;
  text-align: center;
  color: var(--sub-muted);
}
.substrate-login-register a {
  color: var(--sub-teal);
  text-decoration: underline;
  margin-left: 0.35rem;
  font-weight: 600;
}

@media print {
  .substrate-top,
  .substrate-rule,
  .substrate-modal { display: none !important; }
  .page-heading { padding: 0 0 6px; margin-bottom: 0.6rem; border-bottom-color: #C8C8C8; }
  .page-heading h1 { font-size: 20pt; }
  .page-subtitle { font-size: 10pt; }
}

@media (max-width: 720px) {
  .substrate-nav { font-size: 10px; gap: 4px; }
  .nav-link, .nav-group > summary { padding: 0 9px; }
  .page-heading h1 { font-size: 28px; }
}