/* ═══════════════════════════════════════════════════════════════════════
   Field Guide v3 — embedded styles
   Scoped so fg3 vars and layout don't bleed into the main HTH shell.
   Originally inline in field-guide-v3.html; extracted for SPA embedding.
═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=IM+Fell+English:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Scoped variables ─────────────────────────────────────────────────── */
#view-field-guide {
  --bg:         #1a130a;
  --parchment:  #e9dab0;
  --parchment2: #d9c896;
  --ink:        #2a1d0c;
  --ink-soft:   #5a4425;
  --gilt:       #c8913a;
  --gilt-lt:    #e0b057;
  --gilt-deep:  #8c6520;
  --crimson:    #8c3a2a;
  --forest:     #3a6a38;
  --slate:      #5a7090;
  --paper-line: rgba(90, 68, 37, 0.12);
  --f-head:     'Cinzel', serif;
  --f-body:     'IM Fell English', Georgia, serif;
  --f-mono:     'JetBrains Mono', monospace;
  --r-sm: 3px;
  --r:    6px;
  --r-lg: 10px;

  display: flex;
  flex-direction: column;
  /* 2026-04-30: padding-top clears the fixed app top bar (52px) +
     12px breathing room. Was 16px which let the .fg3-topbar header
     (BACK / FIELD GUIDE / user) get hidden under the fixed app bar. */
  padding: calc(var(--top-bar-h, 52px) + 12px) 20px 0;
  background: #120a03
    radial-gradient(ellipse at top, #2a1d0c 0%, #120a03 70%);
  min-height: calc(100vh - 60px);
  /* 2026-04-30: was `overflow-x: hidden`. With overflow-x:hidden +
     overflow-y unset, the spec forces overflow-y:auto, making this a
     nested scroll container inside the body's scroll. The L-shape
     page-edge ::after (extends 14px past book's right edge) tipped
     this over the threshold and made scrolling buggy.
     `overflow-x: clip` clips horizontal overflow WITHOUT creating a
     scroll container, so overflow-y stays visible and the body is
     once again the only scroll surface. Supported in all evergreen
     browsers since 2022. */
  overflow-x: clip;
}

/* ── Time-of-day tint on the book, not the whole page ────────────────── */
.fg3-book[data-fg3-time="dusk"]  { filter: brightness(0.96) saturate(1.04); }
.fg3-book[data-fg3-time="night"] { filter: brightness(0.88) saturate(0.98); }
.fg3-book[data-fg3-time="late"]  { filter: brightness(0.78) saturate(0.92); }

body.reading-light #view-field-guide .fg3-book {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 82% 72% at 50% 28%, rgba(255, 246, 215, 0.44) 0%, transparent 60%),
    linear-gradient(180deg, #f0ddb1 0%, #dabe86 100%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 174, 80, 0.52),
    inset 0 0 58px rgba(94, 60, 16, 0.20),
    0 28px 80px rgba(0, 0, 0, 0.48);
}

body.reading-light #view-field-guide .fg3-book[data-fg3-time="dusk"],
body.reading-light #view-field-guide .fg3-book[data-fg3-time="night"],
body.reading-light #view-field-guide .fg3-book[data-fg3-time="late"] {
  filter: brightness(1.02) saturate(1.02);
}

body.reading-light #view-field-guide .fg3-page,
body.reading-light #view-field-guide .fg3-row,
body.reading-light #view-field-guide .fg3-ward,
body.reading-light #view-field-guide .fg3-stat,
body.reading-light #view-field-guide .fg3-warning-banner {
  color: #24180a;
}

body.reading-light #view-field-guide .fg3-lede,
body.reading-light #view-field-guide .fg3-detail-name,
body.reading-light #view-field-guide .fg3-row-name,
body.reading-light #view-field-guide .fg3-ward-name,
body.reading-light #view-field-guide .fg3-card-pearl {
  color: #211508;
}

body.reading-light #view-field-guide .fg3-row-name small,
body.reading-light #view-field-guide .fg3-detail-sys,
body.reading-light #view-field-guide .fg3-history-line,
body.reading-light #view-field-guide .fg3-card-progress-meta,
body.reading-light #view-field-guide .fg3-card-sources,
body.reading-light #view-field-guide .fg3-card-mini {
  color: #5f4729;
}

/* ── Top strip: title + user chip ────────────────────────────────────── */
.fg3-topbar {
  max-width: 1280px;
  margin: 0 auto 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
  color: var(--parchment);
  width: 100%;
}
.fg3-topbar-left {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}
.fg3-topbar h1 {
  font-family: var(--f-head);
  font-size: 20px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--gilt-lt);
  text-transform: uppercase;
}
.fg3-topbar h1::before { content: '✦ '; color: var(--gilt); opacity: 0.75; }
.fg3-who {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--parchment2);
  opacity: 0.7;
}
.fg3-who .user { color: var(--gilt-lt); font-weight: 600; }

/* Back-to-the-wagon — button styled as understated link */
.fg3-back-link {
  font-family: var(--f-mono);
  /* 2026-04-30: bumped 11→13px / 0.6→0.9 opacity / weight 500
     so the exit affordance reads at a glance. Adds a subtle border
     + 1px gilt-tint background so it feels like an actual button,
     not vestigial text. Kbd hint (esc) shown alongside. */
  font-size: 13px;
  font-weight: 500;
  color: var(--parchment);
  opacity: 0.9;
  text-decoration: none;
  letter-spacing: 0.06em;
  margin-right: 18px;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgba(200, 145, 58, 0.28);
  border-radius: 4px;
  background: rgba(200, 145, 58, 0.05);
  transition: opacity 0.14s, color 0.14s, background 0.14s, border-color 0.14s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fg3-back-link:hover {
  opacity: 1;
  color: var(--gilt-lt);
  background: rgba(200, 145, 58, 0.12);
  border-color: rgba(200, 145, 58, 0.55);
}
.fg3-back-link kbd {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment2);
  opacity: 0.65;
  padding: 1px 5px;
  border: 1px solid rgba(200, 145, 58, 0.30);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  line-height: 1;
}
.fg3-back-link:hover kbd {
  opacity: 0.9;
}

/* ── The book ────────────────────────────────────────────────────────── */
/* 2026-04-30: toned down per OG fireside-cozy direction.
   Polish pass: leather binding rendered as pixel-art via border-image
   (21×21 SVG, 7px slices), cross-stitch gilt trim via ::before, and
   page-edge layers at the bottom via ::after — no raster assets, all
   inline SVG + CSS. image-rendering:pixelated on the SVGs keeps the
   grain crisp instead of bilinear-blurred. */
.fg3-book {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  height: calc(100vh - 170px);
  background:
    /* parchment fiber noise */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E"),
    /* lantern-lit vignette: bright at center-top, fades at edges */
    radial-gradient(
      ellipse 80% 70% at 50% 30%,
      rgba(255, 235, 190, 0.20) 0%,
      transparent 55%
    ),
    /* aged parchment — dimmer, warmer */
    linear-gradient(180deg, #dcc59a 0%, #c4a974 100%);
  /* Pixel-art leather binding via border-image. The 21×21 SVG has
     subtle 1px highlights/lowlights scattered across the leather base
     (#2a1810) plus corner accent pixels. shape-rendering:crispEdges
     keeps the SVG pixel-stepped; border-image-slice:7 cuts a 9-grid
     so corners are static and edges tile via 'round'. */
  border: 7px solid #2a1810;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'><rect width='21' height='21' fill='%232a1810'/><rect x='0' y='2' width='21' height='1' fill='%233a2818' opacity='0.45'/><rect x='0' y='4' width='21' height='1' fill='%231a0c06' opacity='0.5'/><rect x='0' y='16' width='21' height='1' fill='%231a0c06' opacity='0.5'/><rect x='0' y='18' width='21' height='1' fill='%233a2818' opacity='0.45'/><rect x='2' y='0' width='1' height='21' fill='%233a2818' opacity='0.45'/><rect x='4' y='0' width='1' height='21' fill='%231a0c06' opacity='0.5'/><rect x='16' y='0' width='1' height='21' fill='%231a0c06' opacity='0.5'/><rect x='18' y='0' width='1' height='21' fill='%233a2818' opacity='0.45'/><rect x='3' y='1' width='1' height='1' fill='%234a3220'/><rect x='9' y='3' width='1' height='1' fill='%231a0c06'/><rect x='14' y='5' width='1' height='1' fill='%234a3220'/><rect x='6' y='15' width='1' height='1' fill='%234a3220'/><rect x='12' y='19' width='1' height='1' fill='%231a0c06'/><rect x='1' y='1' width='1' height='1' fill='%233a2818'/><rect x='2' y='2' width='1' height='1' fill='%234a3220'/><rect x='18' y='1' width='1' height='1' fill='%233a2818'/><rect x='19' y='2' width='1' height='1' fill='%234a3220'/><rect x='1' y='18' width='1' height='1' fill='%233a2818'/><rect x='2' y='19' width='1' height='1' fill='%234a3220'/><rect x='18' y='18' width='1' height='1' fill='%233a2818'/><rect x='19' y='19' width='1' height='1' fill='%234a3220'/></svg>") 7 / 7px / 0 round;
  border-radius: 5px;
  /* image-rendering keeps the SVG pixel-stepped, not blurred */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow:
    /* gilt trim just inside leather */
    inset 0 0 0 1px rgba(200, 145, 58, 0.42),
    /* corner-darkening vignette */
    inset 0 0 80px rgba(60, 38, 12, 0.32),
    /* spine-side fold shadow */
    inset 0 0 24px rgba(40, 24, 6, 0.25),
    /* desk drop-shadow */
    16px 40px 80px -20px rgba(0, 0, 0, 0.78),
    0    8px  18px rgba(0, 0, 0, 0.45);
  position: relative;
}

/* Cross-stitch gilt trim — pixel-art dashes just inside the leather.
   2026-04-30: removed right-edge stitching so it doesn't visually fight
   with the right-side page-edges. Real book binding stitches anchor
   along the spine + top + bottom — not the open edge. */
.fg3-book::before {
  content: '';
  position: absolute;
  inset: 1px;
  pointer-events: none;
  z-index: 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, var(--gilt) 0 3px, transparent 3px 7px) top    / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--gilt) 0 3px, transparent 3px 7px) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg,  var(--gilt) 0 3px, transparent 3px 7px) left   / 1px 100% no-repeat;
  opacity: 0.55;
}

/* L-shaped page-edge wrap — bottom + right + corner (2026-04-30 polish).
   Single ::after spans the full L by extending past the book's bottom and
   right edges. Two background layers handle each face, positioned so they
   don't overlap (corner is owned by the right-side gradient).
   Pixel-art SVG noise overlay adds wear / fading marks. Thicker than the
   prior pass (12px bottom, 14px right) so the page block reads with weight. */
.fg3-book::after {
  content: '';
  position: absolute;
  /* Offsets account for the 7px leather border. Absolute positioning's
     containing block is the padding edge (inside the border), so to
     extend N px past the leather's outer face we need N+7. */
  top: 0;
  left: -7px;          /* child left edge at leather outer left */
  right: -21px;        /* child extends 14px past leather outer right */
  bottom: -19px;       /* child extends 12px below leather outer bottom */
  pointer-events: none;
  z-index: -1;         /* renders behind the book's leather + parchment */
  /* 2026-04-30: noise overlays removed. background-size + repeat on the
     edge-scoped SVG layers caused horizontal hash patterns to tile
     across the parchment (the stretched image looped vertically). The
     graduated gradient stripes alone read as page-edges; the "worn"
     character can come back later via color variation in the gradients
     themselves, not a separate noise layer. */
  background:
    /* RIGHT-edge: vertical stripes filling the rightmost 14px, full height.
       2026-04-30: outer stripe deepened (#a08350 → #705028) for stronger
       thickness read against the dark shell; inner stripe lightened
       (#d6bc88 → #e0c894) for highlight contrast. */
    linear-gradient(
      90deg,
      #e0c894 0   3px,
      #c4a974 3px 6px,
      #b89763 6px 9px,
      #a08350 9px 11px,
      #705028 11px 14px
    ) right top / 14px 100% no-repeat,
    /* BOTTOM-edge: horizontal stripes filling the bottom 12px,
       stopping 14px short of the right (right-stripe owns the corner). */
    linear-gradient(
      180deg,
      #e0c894 0   2px,
      #c4a974 2px 4px,
      #b89763 4px 6px,
      #c4a974 6px 8px,
      #ad8d5a 8px 10px,
      #705028 10px 12px
    ) left bottom / calc(100% - 14px) 12px no-repeat;
  /* page-block drop-shadow via box-shadow (NOT filter — filter would
     create a stacking context and break the z-index:-1 layering). */
  box-shadow: 3px 6px 10px -2px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.fg3-page {
  padding: 26px 30px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.fg3-page-left  { border-right: 1px solid var(--paper-line); }
.fg3-page-right {
  border-left: 1px solid var(--paper-line);
  overflow-y: auto;
}

/* Spine */
.fg3-spine {
  background: linear-gradient(
    90deg,
    rgba(80,50,20,0.65) 0%,
    rgba(40,24,8,0.9)  50%,
    rgba(80,50,20,0.65) 100%
  );
  position: relative;
  box-shadow:
    inset 4px 0 8px rgba(0,0,0,0.35),
    inset -4px 0 8px rgba(0,0,0,0.35);
}
.fg3-spine::after {
  content: 'Hank the Healer · Field Guide';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--f-head);
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--gilt);
  opacity: 0.55;
  text-transform: uppercase;
}

/* Authorial signature */
.fg3-signature {
  margin-top: auto;
  padding-top: 18px;
  text-align: right;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.55;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}

/* ── View tabs (left page) ───────────────────────────────────────────── */
.fg3-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 0;
}
.fg3-tab {
  background: none;
  border: none;
  padding: 6px 0 10px;
  margin-bottom: -1px;
  font-family: var(--f-head);
  /* 2026-04-30: bumped 13→14 / 600→700 / 0.12→0.14em so the chapter
     strip reads as the primary navigation, heavier than the small
     scope chip below it. */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.fg3-tab:hover  { color: var(--ink); }
.fg3-tab.is-on  { color: var(--gilt-deep); border-bottom-color: var(--gilt); }
.fg3-tab .count {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--crimson);
  margin-left: 6px;
  vertical-align: super;
  letter-spacing: 0;
  font-weight: 500;
}

/* ── Scope chip (2026-04-30) ────────────────────────────────────────────
   Replaces the previous heavy pill toggle. Reads as a small annotation
   in the top-right of the page — "showing today · next exam 4d · all"
   — with the active scope picked out in gilt. Tertiary visual weight,
   below the chapter tabs (heaviest) and the items themselves
   (the actual content). */
.fg3-scope-chip {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin: -4px 4px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: lowercase;
}
.fg3-scope-chip .fg3-scope-label {
  opacity: 0.55;
  margin-right: 2px;
}
.fg3-scope-chip .fg3-scope-sep {
  opacity: 0.4;
  user-select: none;
}
.fg3-scope-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.12s;
}
.fg3-scope-btn:hover {
  color: var(--ink);
}
.fg3-scope-btn.is-on {
  color: var(--gilt-deep);
  font-weight: 700;
}
.fg3-scope-meta {
  opacity: 0.65;
  font-weight: 400;
  margin-left: 2px;
}
.fg3-scope-btn.is-on .fg3-scope-meta { opacity: 0.85; }

/* ── Generic row/list items ──────────────────────────────────────────── */
.fg3-view { flex: 1; overflow-y: auto; padding-right: 4px; }
.fg3-view::-webkit-scrollbar { width: 6px; }
.fg3-view::-webkit-scrollbar-thumb {
  background: rgba(120,80,20,0.22);
  border-radius: 3px;
}

.fg3-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px dotted var(--paper-line);
  cursor: pointer;
  transition: background 0.12s;
}
.fg3-row:hover       { background: rgba(200, 145, 58, 0.08); }
.fg3-row.is-selected { background: rgba(200, 145, 58, 0.14); }

.fg3-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--slate);
}
.fg3-dot.m-struggling { background: #7a2020; box-shadow: 0 0 6px rgba(122,32,32,0.55); }
.fg3-dot.m-learning   { background: #8c3a2a; }
.fg3-dot.m-reviewing  { background: #7a6020; }
.fg3-dot.m-new        { background: var(--slate); }
.fg3-dot.m-known      { background: var(--forest); }
.fg3-dot.m-mastered   { background: #2a5a2a; box-shadow: 0 0 6px rgba(42,90,42,0.55); }

.fg3-row-name {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg3-row-name small {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-transform: uppercase;
  opacity: 0.75;
}

.fg3-miss-chip {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--crimson);
  background: rgba(140, 58, 42, 0.10);
  border: 1px solid rgba(140, 58, 42, 0.35);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.fg3-miss-chip.is-zero { opacity: 0; }

/* Severity glyph */
.fg3-sev {
  display: inline-block;
  font-size: 9px;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1;
  transform: translateY(-1px);
}
.fg3-sev-sentinel { color: #b02040; text-shadow: 0 0 4px rgba(224,48,96,0.4); }
.fg3-sev-major    { color: #b05010; }

/* Overdue chip */
.fg3-overdue-chip {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--gilt-deep);
  background: rgba(200, 145, 58, 0.10);
  border: 1px solid rgba(200, 145, 58, 0.30);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
  margin-right: 2px;
  white-space: nowrap;
}

.fg3-chevron {
  font-family: var(--f-head);
  color: var(--gilt-deep);
  opacity: 0.5;
  font-size: 14px;
}

/* ── Section headers ─────────────────────────────────────────────────── */
.fg3-eyebrow {
  font-family: var(--f-head);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gilt-deep);
  margin: 10px 4px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fg3-eyebrow::before,
.fg3-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-line);
}
.fg3-eyebrow span { flex: 0; white-space: nowrap; }
.fg3-eyebrow-first { margin-top: 0; }

.fg3-lede {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 4px 14px;
  line-height: 1.5;
  font-style: italic;
}

/* ── Pattern view (fingerprint bar) ──────────────────────────────────── */
.fg3-pattern-bar {
  display: flex;
  width: 100%;
  height: 44px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(90, 68, 37, 0.35);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  margin: 6px 0 8px;
}
.fg3-pattern-seg {
  height: 100%;
  cursor: pointer;
  position: relative;
  transition: filter 0.14s, transform 0.14s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.fg3-pattern-seg:hover { filter: brightness(1.12); }
.fg3-pattern-seg.is-selected {
  filter: brightness(1.2);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
}
.fg3-pattern-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.fg3-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.fg3-legend-item:hover      { background: rgba(200,145,58,0.10); }
.fg3-legend-item.is-selected { background: rgba(200,145,58,0.20); }
.fg3-legend-swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.2);
}

.fg3-pattern-hint {
  background: rgba(200, 145, 58, 0.08);
  border-left: 3px solid var(--gilt);
  padding: 10px 14px;
  margin: 14px 0;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fg3-pattern-hint strong { color: var(--gilt-deep); font-weight: 700; }

.fg3-pattern-remedy {
  background: rgba(58, 106, 56, 0.06);
  border-left: 3px solid var(--forest);
  padding: 11px 14px;
  margin: 10px 0 14px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fg3-remedy-label {
  display: block;
  font-family: var(--f-head);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3a6a38;
  margin-bottom: 5px;
  font-weight: 700;
}

/* Calibration stripe */
.fg3-calibration-stripe {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(176, 32, 64, 0.06);
  border: 1px solid rgba(176, 32, 64, 0.30);
  border-left: 3px solid #b02040;
  padding: 12px 14px;
  margin: 12px 0 10px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fg3-calibration-stripe strong { color: #8a1a30; font-weight: 700; }
.fg3-calibration-stripe em     { font-style: italic; color: #8a1a30; }
.fg3-calib-glyph {
  font-size: 14px;
  color: #b02040;
  flex-shrink: 0;
  line-height: 1.5;
}

/* History line */
.fg3-history-line {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--paper-line);
}
.fg3-history-line em { font-style: italic; }

/* Calibration note (per-concept) */
.fg3-calibration-note {
  background: rgba(176, 32, 64, 0.05);
  border-left: 3px solid #b02040;
  padding: 9px 12px;
  margin: 12px 0;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fg3-calibration-note strong { color: #8a1a30; font-weight: 700; }
.fg3-calib-label {
  display: block;
  font-family: var(--f-head);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a1a30;
  margin-bottom: 4px;
  font-weight: 700;
}

/* ── Wards view ─────────────────────────────────────────────────────── */
.fg3-ward {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--paper-line);
  background: rgba(200, 145, 58, 0.04);
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.fg3-ward:hover { background: rgba(200, 145, 58, 0.10); border-color: rgba(200,145,58,0.3); }

.fg3-ward-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.fg3-ward-name {
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  flex: 1;
}
.fg3-ward-risk {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b02040;
  background: rgba(224, 48, 96, 0.08);
  border: 1px solid rgba(224, 48, 96, 0.30);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Ward drill button — action anchor for targeted PANCE prep */
.fg3-ward-drill-btn {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gilt-deep);
  background: rgba(200, 145, 58, 0.10);
  border: 1px solid rgba(200, 145, 58, 0.30);
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.fg3-ward-drill-btn:hover {
  background: rgba(200, 145, 58, 0.22);
  border-color: var(--gilt);
  color: var(--ink);
}

.fg3-ward-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.fg3-ward-count .mastered { color: var(--forest); font-weight: 600; }

.fg3-ward-yet {
  margin-top: 6px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.fg3-wards-footer {
  margin-top: 18px;
  padding: 10px 4px;
  border-top: 1px dotted var(--paper-line);
  font-family: var(--f-body);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.55;
  text-align: center;
  letter-spacing: 0.02em;
}

.fg3-ward-bar {
  display: flex;
  height: 10px;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(90, 68, 37, 0.16);
  border: 1px solid rgba(90, 68, 37, 0.2);
}
.fg3-ward-seg { height: 100%; }
.fg3-ward-seg.m-struggling { background: #7a2020; }
.fg3-ward-seg.m-learning   { background: #8c3a2a; }
.fg3-ward-seg.m-reviewing  { background: #7a6020; }
.fg3-ward-seg.m-new        { background: var(--slate); }
.fg3-ward-seg.m-known      { background: #3a6a38; }
.fg3-ward-seg.m-mastered   { background: #2a5a2a; }

.fg3-ward-concepts { display: none; margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--paper-line); }
.fg3-ward.is-open .fg3-ward-concepts { display: block; }

/* ── Right page: detail ───────────────────────────────────────────────── */
.fg3-detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  font-family: var(--f-body);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.75;
}
.fg3-detail-empty::before {
  content: '✦';
  display: block;
  font-size: 30px;
  color: var(--gilt);
  margin-bottom: 14px;
  opacity: 0.5;
}

.fg3-detail-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-line);
}
.fg3-detail-eyebrow {
  font-family: var(--f-head);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt-deep);
  margin-bottom: 6px;
}
.fg3-detail-name {
  font-family: var(--f-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}
.fg3-detail-sys {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.fg3-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
  margin-right: 6px;
}
.fg3-badge.m-struggling { background: rgba(122,32,32,0.12);  color: #7a2020; border: 1px solid rgba(122,32,32,0.35); }
.fg3-badge.m-learning   { background: rgba(140,58,42,0.12);  color: #8c3a2a; border: 1px solid rgba(140,58,42,0.35); }
.fg3-badge.m-reviewing  { background: rgba(122,96,32,0.14);  color: #7a6020; border: 1px solid rgba(122,96,32,0.38); }
.fg3-badge.m-new        { background: rgba(90,112,144,0.12); color: #5a7090; border: 1px solid rgba(90,112,144,0.35); }
.fg3-badge.m-known      { background: rgba(58,106,56,0.12);  color: var(--forest); border: 1px solid rgba(58,106,56,0.35); }
.fg3-badge.m-mastered   { background: rgba(42,90,42,0.15);   color: #2a5a2a; border: 1px solid rgba(42,90,42,0.4); }
.fg3-badge.severity-sentinel { background: rgba(224,48,96,0.14); color: #b02040; border: 1px solid rgba(224,48,96,0.4); }
.fg3-badge.severity-major    { background: rgba(200,100,40,0.10); color: #b05010; border: 1px solid rgba(200,100,40,0.35); }

.fg3-anchor {
  background: rgba(200, 145, 58, 0.10);
  border-left: 3px solid var(--gilt);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fg3-anchor-label {
  display: block;
  font-family: var(--f-head);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt-deep);
  margin-bottom: 5px;
  font-style: normal;
}

.fg3-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.fg3-stat {
  text-align: center;
  padding: 10px 6px;
  background: rgba(90, 68, 37, 0.06);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
}
.fg3-stat-num {
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.fg3-stat-label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}
.fg3-stat.miss .fg3-stat-num  { color: var(--crimson); }
.fg3-stat.seen .fg3-stat-num  { color: var(--ink); }
.fg3-stat.right .fg3-stat-num { color: var(--forest); }

/* Miss log */
.fg3-miss-log { margin-bottom: 18px; }
.fg3-miss-log-title {
  font-family: var(--f-head);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt-deep);
  margin-bottom: 8px;
}
.fg3-miss-entry {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dotted var(--paper-line);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.fg3-miss-entry .when { color: var(--ink-soft); }
.fg3-miss-entry .why  { color: var(--crimson); text-align: right; }

/* Actions */
.fg3-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 6px;
}
.fg3-action-hint {
  margin-top: 8px;
  font-family: var(--f-body);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0.78;
  line-height: 1.5;
}
.fg3-action {
  padding: 10px 12px;
  border: 1px solid var(--paper-line);
  background: transparent;
  font-family: var(--f-head);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--r-sm);
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fg3-action:hover {
  background: rgba(200, 145, 58, 0.12);
  border-color: var(--gilt);
  color: var(--ink);
}
.fg3-action-primary {
  background: linear-gradient(180deg, #d6a84e 0%, #a47030 100%);
  color: #170e00;
  border-color: #856228;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(200,145,58,0.25);
  animation: fg3-button-breath 3.5s ease-in-out infinite;
}
.fg3-action-primary:hover {
  background: linear-gradient(180deg, #e0b85a 0%, #b08040 100%);
  color: #170e00;
  animation-play-state: paused;
  box-shadow: 0 3px 12px rgba(200,145,58,0.50);
}
@keyframes fg3-button-breath {
  0%, 100% { box-shadow: 0 2px 6px rgba(200,145,58,0.25); }
  50%      { box-shadow: 0 2px 8px rgba(200,145,58,0.35), 0 0 18px rgba(200,145,58,0.20); }
}

/* ── Toast ───────────────────────────────────────────────────────────── */
#fg3-toast {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  background: var(--ink);
  color: var(--parchment);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 99;
  border: 1px solid var(--gilt-deep);
}
#fg3-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Loading / error ─────────────────────────────────────────────────── */
.fg3-loading, .fg3-error {
  padding: 20px;
  font-family: var(--f-body);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}
.fg3-error { color: var(--crimson); font-style: normal; }

/* ── Nav badge on Field Guide button ─────────────────────────────────── */
.fg3-nav-badge {
  display: inline-block;
  background: #b02040;
  color: #fff;
  border-radius: 10px;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── Warning banner — surfaces what the badge is alerting on ─────────── */
#view-field-guide .fg3-warning-banner {
  margin: 0 0 14px;
  padding: 10px 12px 12px;
  background: rgba(176, 32, 64, 0.06);
  border-left: 3px solid #b02040;
  border-radius: 4px;
  font-family: var(--f-body, 'IM Fell English', serif);
}
#view-field-guide .fg3-warning-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#view-field-guide .fg3-warning-glyph {
  color: #b02040;
  font-size: 1rem;
  flex-shrink: 0;
}
#view-field-guide .fg3-warning-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink, #2a1a08);
  letter-spacing: 0.01em;
}
#view-field-guide .fg3-warning-ack {
  background: transparent;
  border: 1px solid rgba(176, 32, 64, 0.4);
  color: #b02040;
  padding: 3px 10px;
  border-radius: 3px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
#view-field-guide .fg3-warning-ack:hover {
  background: #b02040;
  color: #fff;
}
#view-field-guide .fg3-warning-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#view-field-guide .fg3-warning-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  color: var(--ink, #2a1a08);
  transition: background 0.1s;
}
#view-field-guide .fg3-warning-item:hover {
  background: rgba(176, 32, 64, 0.08);
}
#view-field-guide .fg3-warning-name {
  flex: 1;
  font-size: 0.82rem;
  font-style: italic;
}
#view-field-guide .fg3-warning-meta {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  color: #b02040;
  opacity: 0.8;
  flex-shrink: 0;
}
#view-field-guide .fg3-warning-more {
  padding: 4px 6px;
  font-size: 0.7rem;
  color: var(--ink-soft, #6a4a28);
  font-style: italic;
}

/* ── Codex cards — collectible illness mastery shelf ────────────────── */
.fg3-card-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.fg3-card-counts {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.fg3-card-counts strong {
  color: var(--gilt-deep);
  font-size: 14px;
}
.fg3-card-counts em {
  margin-left: 8px;
  color: var(--crimson);
  font-style: normal;
}
.fg3-card-search {
  width: 150px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(90, 68, 37, 0.22);
  border-radius: 4px;
  background: rgba(255, 248, 220, 0.24);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  outline: none;
}
.fg3-card-search:focus {
  border-color: rgba(200, 145, 58, 0.65);
  box-shadow: 0 0 0 2px rgba(200, 145, 58, 0.12);
}
.fg3-card-filters,
.fg3-card-systems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.fg3-card-system,
.fg3-card-filter {
  border: 1px solid rgba(90, 68, 37, 0.18);
  background: rgba(255, 248, 220, 0.18);
  color: var(--ink-soft);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.fg3-card-system span,
.fg3-card-filter span {
  opacity: 0.62;
}
.fg3-card-system:hover,
.fg3-card-filter:hover {
  color: var(--ink);
  border-color: rgba(200, 145, 58, 0.45);
}
.fg3-card-system.is-on,
.fg3-card-filter.is-on {
  color: var(--ink);
  background: rgba(200, 145, 58, 0.14);
  border-color: rgba(200, 145, 58, 0.58);
}
.fg3-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  padding: 2px 2px 12px;
}
.fg3-codex-card {
  --tier-a: #6a5540;
  --tier-b: #2c2118;
  --codex-a: #8a7356;
  --codex-b: #3a2d20;
  position: relative;
  min-height: 158px;
  padding: 12px 10px 11px;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  color: #f4ead0;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.24)),
    radial-gradient(circle at 50% 37%, color-mix(in srgb, var(--codex-a) 34%, transparent), transparent 45%),
    radial-gradient(circle at 50% 37%, rgba(255, 231, 165, 0.13), transparent 62%),
    linear-gradient(180deg, #352719, #17100b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 180, 0.10),
    0 6px 12px rgba(42, 29, 12, 0.16);
  transform: translateZ(0);
}
.fg3-codex-card::before,
.fg3-codex-card::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  pointer-events: none;
  background:
    linear-gradient(var(--tier-a), var(--tier-a)) 0 0 / 8px 2px no-repeat,
    linear-gradient(var(--tier-a), var(--tier-a)) 0 0 / 2px 8px no-repeat,
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)) 2px 2px / 2px 2px no-repeat;
}
.fg3-codex-card::before {
  top: 7px;
  left: 7px;
}
.fg3-codex-card::after {
  right: 7px;
  bottom: 7px;
  transform: rotate(180deg);
}
.fg3-codex-card:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 180, 0.16),
    0 9px 16px rgba(42, 29, 12, 0.20);
}
.fg3-codex-card.is-selected {
  outline: 2px solid rgba(200, 145, 58, 0.7);
  outline-offset: 2px;
}
.fg3-card-frame {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  background:
    linear-gradient(var(--tier-a), var(--tier-a)) top / 100% 4px no-repeat,
    linear-gradient(var(--tier-b), var(--tier-b)) bottom / 100% 4px no-repeat,
    linear-gradient(90deg, var(--tier-a), var(--tier-b)) left / 4px 100% no-repeat,
    linear-gradient(90deg, var(--tier-b), var(--tier-a)) right / 4px 100% no-repeat,
    linear-gradient(var(--codex-a), var(--codex-b)) left 4px top 18px / 3px calc(100% - 36px) no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,0.42) 0 2px, transparent 2px 6px) top 4px left 9px / calc(100% - 18px) 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(0,0,0,0.36) 0 2px, transparent 2px 6px) bottom 4px left 9px / calc(100% - 18px) 1px no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.36),
    inset 0 0 18px color-mix(in srgb, var(--codex-b) 42%, transparent);
}
.fg3-codex-card.t-locked { --tier-a: #5a5146; --tier-b: #2a261f; filter: saturate(0.75); opacity: 0.70; }
.fg3-codex-card.t-bronze { --tier-a: #b5793e; --tier-b: #5a321c; }
.fg3-codex-card.t-silver { --tier-a: #c5ccd0; --tier-b: #667078; }
.fg3-codex-card.t-gold { --tier-a: #edc35c; --tier-b: #8c6520; }
.fg3-codex-card.t-diamond { --tier-a: #93d9ec; --tier-b: #476f90; }
.fg3-codex-card.t-sentinel { --tier-a: #eeb45e; --tier-b: #8c2636; }
.fg3-codex-card.t-gold .fg3-card-frame,
.fg3-codex-card.t-diamond .fg3-card-frame,
.fg3-codex-card.t-sentinel .fg3-card-frame {
  animation: fg3-card-shimmer 3.8s linear infinite;
}
@keyframes fg3-card-shimmer {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.16); }
}
.fg3-card-system-mark,
.fg3-card-tier,
.fg3-card-mini {
  position: relative;
  z-index: 2;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fg3-card-system-mark {
  justify-self: center;
  max-width: 92%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: rgba(244, 234, 208, 0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg3-card-system-sigil {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--codex-a) 62%, #fff0be);
  border-radius: 3px;
  color: #fff1c6;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--codex-a) 62%, transparent), color-mix(in srgb, var(--codex-b) 76%, transparent)),
    rgba(0,0,0,0.28);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--codex-a) 34%, transparent);
}
.fg3-card-system-icon {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    sepia(0.18)
    saturate(1.12)
    brightness(1.18)
    drop-shadow(0 1px 1px rgba(0,0,0,0.7));
}
.fg3-card-danger {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 3;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #8c2636;
  color: #ffe4ad;
  border: 1px solid rgba(255, 220, 150, 0.56);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(238, 180, 94, 0.32);
}
.fg3-card-sigil {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: 54px;
  height: 54px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--f-head);
  font-size: 19px;
  font-weight: 700;
  color: rgba(255, 241, 197, 0.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--codex-a) 35%, transparent), transparent 66%),
    rgba(0, 0, 0, 0.22);
  border: 1px solid color-mix(in srgb, var(--codex-a) 38%, rgba(255, 231, 170, 0.22));
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.16),
    0 0 18px color-mix(in srgb, var(--codex-a) 26%, transparent);
}
.fg3-card-sigil::before,
.fg3-card-sigil::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 241, 197, 0.12);
  border-radius: 2px;
}
.fg3-card-sigil::after {
  inset: 10px;
  border-color: color-mix(in srgb, var(--codex-a) 38%, transparent);
  transform: rotate(45deg);
}
.fg3-card-sigil span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.65);
}
.fg3-card-name {
  position: relative;
  z-index: 2;
  min-height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.12;
  color: #fff3d6;
}
.fg3-card-tier {
  font-size: 10px;
  font-weight: 700;
  color: #f0c15a;
}
.fg3-card-mini {
  font-size: 8px;
  color: rgba(244, 234, 208, 0.62);
  text-transform: none;
}
.fg3-card-more {
  margin: 8px 0 0;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-soft);
  opacity: 0.75;
}
.fg3-card-detail {
  padding-bottom: 8px;
}
.fg3-card-detail-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gilt-deep);
  margin-bottom: 8px;
}
.fg3-card-progress {
  margin: 16px 0;
}
.fg3-card-progress-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(90, 68, 37, 0.16);
  box-shadow: inset 0 0 0 1px rgba(90, 68, 37, 0.12);
}
.fg3-card-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gilt-deep), var(--gilt-lt));
}
.fg3-card-progress-meta,
.fg3-card-sources,
.fg3-card-pearl {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.fg3-card-progress-meta {
  margin-top: 6px;
  font-style: italic;
}
.fg3-card-pearl {
  padding: 10px 0;
  border-top: 1px dotted var(--paper-line);
}
.fg3-card-pearl strong,
.fg3-card-sources span {
  color: var(--ink);
}
.fg3-card-sources {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dotted var(--paper-line);
  overflow-wrap: anywhere;
}
.fg3-card-sources span {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* 2026-04-30: padding-top must still clear the fixed app top bar.
     The earlier fix on the desktop rule was being overridden here. */
  #view-field-guide { padding: calc(var(--top-bar-h, 52px) + 12px) 10px 0; }
  /* Half-screen view: leather binding only on the LEFT (the spine),
     bumped 7px → 11px for stronger book-presence. Two gold bands +
     gilt thread overlay the leather (subtle codex polish, ref
     reference image). Top/right/bottom drop their leather so the
     page-edge stripes (::after) read cleanly down the right side and
     across the bottom — no parallel leather strip competing. */
  .fg3-book {
    grid-template-columns: 1fr;
    height: auto;
    border-width: 0 0 0 11px;
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'><rect width='21' height='21' fill='%232a1810'/><rect x='2' y='0' width='1' height='21' fill='%233a2818' opacity='0.45'/><rect x='4' y='0' width='1' height='21' fill='%231a0c06' opacity='0.5'/><rect x='3' y='4' width='1' height='1' fill='%234a3220'/><rect x='5' y='10' width='1' height='1' fill='%231a0c06'/><rect x='2' y='15' width='1' height='1' fill='%234a3220'/></svg>") 7 / 0 0 0 11px / 0 round;
    border-radius: 5px 0 0 5px;
    /* Gilt trim only on left — no inset glow wrapping right/top/bottom. */
    box-shadow:
      inset 1px 0 0 0 rgba(200, 145, 58, 0.42),
      inset 0 0 80px rgba(60, 38, 12, 0.32),
      inset 0 0 24px rgba(40, 24, 6, 0.25),
      16px 40px 80px -20px rgba(0, 0, 0, 0.78),
      0    8px  18px rgba(0, 0, 0, 0.45);
  }
  .fg3-book::before {
    /* Repurposed in mobile: overlays the 11px leather strip with two
       gold horizontal bands (top + bottom of spine — codex tradition)
       and a thin gilt thread where the leather meets the parchment.
       z-index:1 paints above the border-image leather. */
    inset: 0 auto 0 -11px;
    width: 11px;
    z-index: 1;
    border-radius: 5px 0 0 5px;
    opacity: 1;
    background:
      /* Top gold band — 4-stop gradient gives subtle depth highlight */
      linear-gradient(180deg, var(--gilt-deep), var(--gilt-lt), var(--gilt), var(--gilt-deep)) left 14% / 11px 4px no-repeat,
      /* Bottom gold band */
      linear-gradient(180deg, var(--gilt-deep), var(--gilt-lt), var(--gilt), var(--gilt-deep)) left 86% / 11px 4px no-repeat,
      /* Thin gilt thread along the right edge of the leather */
      linear-gradient(var(--gilt-deep), var(--gilt-deep)) right top / 1px 100% no-repeat;
  }
  .fg3-book::after {
    /* Page-edges adjusted for 11px left border: left starts at book
       outer left, right extends 14px past book outer right. */
    top: 0;
    left: -11px;
    right: -14px;
    bottom: -12px;
  }
  .fg3-page { padding: 18px 18px 22px; height: auto; }
  .fg3-page-left  { border-right: none; border-bottom: 1px solid var(--paper-line); }
  .fg3-page-right { border-left: none; overflow-y: visible; }
  .fg3-spine { display: none; }
  .fg3-tabs { gap: 18px; }
  .fg3-tab { font-size: 11px; }
  .fg3-detail-name { font-size: 18px; }
  .fg3-stats { grid-template-columns: repeat(3, 1fr); }
  .fg3-card-toolbar { align-items: stretch; flex-direction: column; }
  .fg3-card-search { width: 100%; }
  .fg3-card-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}