/* rail.css — assets.gf.cx · left-navigation rail (companion to rail.js)
 * House tokens with hex fallbacks; calm paper-on-paper. v1.3.1 · 2026-10-17
 * v1.2.0 — collapsed rows reveal a styled label flyout on hover
 * v1.3.0 — collapse toggle is a compact icon in a top header row (.gfcx-rail-head)
 * v1.3.1 — rail width 232 -> 196px (trim the dead right gutter; labels still fit)
 * v1.4.0 — two-pane toggle glyph (static, no flip) + styled hover pill (.gfcx-rail-tip);
 *          row hover underlines its label (calm highlight) */

.gfcx-rail {
  --ink: #1a1816;
  --ink-soft: #5a544d;
  --line: rgba(26, 24, 22, .12);
  --paper: #f7f3ec;
  width: 196px;
  box-sizing: border-box;
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gfcx-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.gfcx-rail.is-collapsed .gfcx-rail-head { justify-content: center; }

.gfcx-rail-brand {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* optional brand mark beside the wordmark; the inlined SVG uses currentColor so
   it follows the brand ink in light + dark. A host may tint it via --rail-brand-logo. */
.gfcx-rail-brandlogo {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  color: var(--rail-brand-logo, currentColor);
}
.gfcx-rail-brandlogo svg,
.gfcx-rail-brandlogo img { width: 100%; height: 100%; display: block; }
.gfcx-rail.is-collapsed .gfcx-rail-brand { gap: 0; }
.gfcx-rail-brand-link { color: inherit; text-decoration: none; }
.gfcx-rail-brand-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.gfcx-rail-find {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 6px;
  padding: 5px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 13px;
}
.gfcx-rail-find:focus { outline: none; border-bottom-color: var(--ink); }
.gfcx-rail.is-collapsed .gfcx-rail-find,
.gfcx-rail.is-collapsed .gfcx-rail-brand { display: none; }

.gfcx-rail-sec-h {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 16px 0 4px;
  padding: 0 6px;
}
.gfcx-rail-sec:first-child .gfcx-rail-sec-h { margin-top: 2px; }

.gfcx-rail-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-soft);
}

.gfcx-rail-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .55;
}

.gfcx-rail-label {
  font-size: 14px;
  line-height: 1.2;
}

/* --- hover + active states --- */
.gfcx-rail-row:hover { color: var(--ink); }
.gfcx-rail-row:hover .gfcx-rail-ic { opacity: 1; }
/* calm highlight: the hovered row underlines its own label (expanded rail only —
   when collapsed the label is a flyout pill, which shouldn't be underlined) */
.gfcx-rail:not(.is-collapsed) .gfcx-rail-row:hover .gfcx-rail-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.gfcx-rail-row.is-active { color: var(--ink); }
.gfcx-rail-row.is-active .gfcx-rail-ic { opacity: 1; }

.gfcx-rail-tick {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  background: var(--ink);
  border-radius: 1px;
}

/* --- active domain's record groups --- */
.gfcx-rail-groups {
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px 34px;
}
.gfcx-rail-grp {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 6px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}
.gfcx-rail-grp:hover { color: var(--ink); }
.gfcx-rail-grp-n { font-variant-numeric: tabular-nums; }

/* --- alert dot (one-bit at-rest signal) + folio counts (on demand) --- */
.gfcx-rail-dot {
  width: 5px; height: 5px; flex: 0 0 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.gfcx-rail-n {
  margin-left: auto;
  padding-left: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  display: none;
}
.gfcx-rail.is-folio .gfcx-rail-n { display: inline; }
.gfcx-rail.is-collapsed .gfcx-rail-n { display: none; }

/* --- mobile sheet (shares tokens + row styles) --- */
.gfcx-rail-sheet-btn,
.gfcx-rail-sheet { display: none; }

.gfcx-rail-sheet {
  --ink: #1a1816; --ink-soft: #5a544d; --line: rgba(26, 24, 22, .12); --paper: #f7f3ec;
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

@media (max-width: 900px) {
  .gfcx-rail { display: none; }

  .gfcx-rail-sheet-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--line, rgba(26,24,22,.12));
    background: #f7f3ec;
    color: #1a1816;
    font: 500 15px 'Newsreader', Georgia, serif;
    cursor: pointer;
  }
  .gfcx-rail-sheet-ico { font-size: 16px; }

  .gfcx-rail-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--paper);
    transform: translateY(100%);
    transition: transform .2s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gfcx-rail-sheet.is-open { transform: translateY(0); }

  .gfcx-rail-sheet-close {
    all: unset;
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    padding: 4px 12px;
    font-size: 26px;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .gfcx-rail-sheet-close:hover { color: var(--ink); }

  .gfcx-rail-sheet-body {
    padding: 48px 16px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 18px;
  }
  .gfcx-rail-sheet-body .gfcx-rail-sec { break-inside: avoid; }
  .gfcx-rail-sheet-body .gfcx-rail-ic { width: 20px; height: 20px; flex-basis: 20px; }
  .gfcx-rail-sheet-body .gfcx-rail-pinned { grid-column: 1 / -1; }
}

/* --- dark mode (selected step-set; both media + explicit toggle) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gfcx-rail,
  :root:not([data-theme="light"]) .gfcx-rail-sheet {
    --ink: #ece7de; --ink-soft: #a39c90; --line: rgba(236, 231, 222, .14); --paper: #1c1a17;
  }
  /* heraldic SVGs are dark-fill → lift them to light ink on dark paper */
  :root:not([data-theme="light"]) .gfcx-rail-ic {
    filter: invert(1) brightness(1.08) sepia(.12);
  }
}
:root[data-theme="dark"] .gfcx-rail,
:root[data-theme="dark"] .gfcx-rail-sheet {
  --ink: #ece7de; --ink-soft: #a39c90; --line: rgba(236, 231, 222, .14); --paper: #1c1a17;
}
:root[data-theme="dark"] .gfcx-rail-ic {
  filter: invert(1) brightness(1.08) sepia(.12);
}

/* --- collapse --- */
.gfcx-rail { transition: width .15s ease; }
.gfcx-rail.is-collapsed { width: 56px; border-right: 0; }
.gfcx-rail.is-collapsed .gfcx-rail-label,
.gfcx-rail.is-collapsed .gfcx-rail-sec-h,
.gfcx-rail.is-collapsed .gfcx-rail-groups { display: none; }
.gfcx-rail.is-collapsed .gfcx-rail-row { justify-content: center; gap: 0; padding: 0; }

/* collapsed: hovering an icon reveals its label as a paper flyout to the right
   (instant, styled — replaces reliance on the browser's slow native title) */
.gfcx-rail.is-collapsed .gfcx-rail-row:hover .gfcx-rail-label {
  display: block;
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  box-shadow: 0 2px 12px rgba(26, 24, 22, .14);
  z-index: 30;
  pointer-events: none;
}

.gfcx-rail-toggle {
  all: unset;
  position: relative;        /* anchors the hover pill */
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
}
.gfcx-rail-toggle:hover { color: var(--ink); background: rgba(26, 24, 22, .06); }
.gfcx-rail-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.gfcx-rail-toggle-ic { display: block; }

/* toggle hover pill — styled, instant (replaces the native title) */
.gfcx-rail-tip {
  display: none;
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  box-shadow: 0 2px 12px rgba(26, 24, 22, .14);
  z-index: 40;
  pointer-events: none;
}
.gfcx-rail-toggle:hover .gfcx-rail-tip,
.gfcx-rail-toggle:focus-visible .gfcx-rail-tip { display: block; }