/*
 * Field Guide / Reference pages - full-width content area (not the ~62ch
 * .article column used elsewhere), for reference material that doesn't fit
 * prose layout. Covers the index (field-guide.html) and entries (currently
 * just field-guide/ai-generation-forensics.html); promote into
 * components.css if this pattern is needed outside the Field Guide
 * section (same pattern home.css/blog.css already follow - page-scoped
 * until proven reusable).
 */

.fg-main {
  flex: 1;
  padding: 14px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.fg-intro { margin-bottom: 14px; }
.fg-intro .article { max-width: none; }

/* ---------- index (field-guide.html) ----------
 * Deliberately not a card grid like blog.html's .post-grid - these aren't
 * dated articles, they're living references (revised over time, not
 * "published" once), so no byline/read-time/excerpt framing. A plain
 * stacked list reads fine with one entry and still will with a handful;
 * revisit as a grid only if this section grows enough to need one. */
.fg-index-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.fg-index-item {
  display: flex; gap: 20px; align-items: flex-start;
  border: 1px solid var(--line-dim);
  border-radius: 6px;
  background: var(--panel);
  padding: 18px 20px;
  transition: border-color 0.12s ease;
}
.fg-index-item:hover, .fg-index-item:focus-visible { border-color: var(--signal); outline: none; }
/* same character density ramp (.:=+*#%@) as the homepage's ASCII logo -
   hand-drawn here at icon scale, not generated from an image, and static
   on purpose (no per-cell shimmer like the homepage's - this is a small
   list icon, not a hero) */
.fg-index-icon {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 10px; line-height: 1.15;
  color: var(--sky);
  margin: 2px 0 0;
}
.fg-index-body { flex: 1; min-width: 0; }
.fg-index-title {
  font-family: var(--display); font-weight: 900; font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 6px;
}
.fg-index-desc {
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
/* key:value readout, same convention as the homepage's security-audit
   panel - gives the card a texture beyond a plain description paragraph */
.fg-index-meta {
  display: flex; flex-wrap: wrap; gap: 5px 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dim);
  font-family: var(--mono); font-size: 11.5px;
}
.fg-index-meta-item { color: var(--text); }
.fg-index-meta-item .key { color: var(--muted-dim); }
.fg-index-meta-item .dim { color: var(--muted-dim); }
.fg-index-meta-item .flag { color: var(--gold); }

.fg-howto {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  color: var(--muted);
  background: var(--line-dim);
  border-left: 2px solid var(--sky);
  padding: 10px 14px;
  margin: 14px 0 0;
}
.fg-howto strong { color: var(--text); font-weight: 700; }

/* ---------- media-type selector ---------- */
.fg-media-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px;
  font-family: var(--mono); font-size: 12.5px;
}
.fg-media-tab {
  padding: 7px 14px;
  border: 1px solid var(--line-dim);
  border-radius: 6px;
  color: var(--muted);
  background: var(--panel);
  cursor: pointer;
}
.fg-media-tab.active { color: var(--text); border-color: var(--signal); }
.fg-media-tab.disabled { color: var(--muted-dim); cursor: default; }

/* ---------- timeline ----------
 * A real Gantt-style layout, not a table: one CSS grid whose ROWS are
 * generation tracks (see GENERATIONS in field-guide.js - currently 4,
 * newest at track 1) shared by all 4 columns (axis + 3 lanes). Content is
 * rendered by field-guide.js, not hand-authored here - only the header
 * row (spacer + 3 lane headers) is static HTML; everything else is
 * appended by JS from its FINDINGS data.
 *
 * Each lane/generation intersection is a .fg-cell spanning that
 * generation's single track, which can hold MULTIPLE stacked .fg-block
 * items (a generation can have several distinct findings for the same
 * media type - see Generation 1's three separate image findings) rather
 * than being limited to one block per cell. */
/* horizontal-scroll container - lets .fg-timeline enforce a real minimum
   width (below which the Gantt layout stops being legible) without
   forcing the whole page to scroll sideways. Kept
   overflow:visible (a no-op wrapper) above 820px on purpose: setting
   overflow-x:auto unconditionally would make this the sticky-positioning
   containing block for .fg-axis-spacer/.fg-lane-header at EVERY width,
   breaking their stick-while-scrolling on desktop where nothing needs to
   scroll horizontally anyway. Only actually scrolls (and only then loses
   the sticky header - see .fg-mobile-warning) below 820px, where it's
   needed. */
.fg-timeline-scroll {
  margin-bottom: 14px;
}
@media (max-width: 820px) {
  .fg-timeline-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.fg-timeline {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  min-width: 760px;
  padding: 16px;
  border: 1px solid var(--line-dim);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}

.fg-axis-spacer,
.fg-lane-header {
  position: sticky; top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px 14px;
  grid-row: 1;
}
.fg-axis-spacer { grid-column: 1; }
.fg-lane-header {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.3;
}
.fg-lane-header.artifacts { grid-column: 2; }
.fg-lane-header.general { grid-column: 3; }
.fg-lane-header.model { grid-column: 4; }
.fg-lane-header .swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.fg-lane-header.artifacts .swatch { background: var(--gold); }
.fg-lane-header.general .swatch { background: var(--olive); }
.fg-lane-header.model .swatch { background: var(--rust); }

/* full-width tint behind one generation's entire row (axis point + all 3
   lane cells) - without this the axis dot in the 200px-wide left column is
   the only thing tying a row together, which gets lost once the grid is
   1600px wide. Painted behind everything purely by DOM order (rendered
   first in field-guide.js, before axis points/cells) - no z-index needed. */
.fg-row-band {
  grid-column: 1 / -1;
  grid-row: calc(var(--row-start) + 1) / calc(var(--row-start) + 2);
  pointer-events: none;
}
.fg-row-band.odd { background: var(--line-dim); }

/* generation ticks - one per grid row-track (--row-start set inline by JS) */
.fg-axis-point {
  position: relative;
  grid-column: 1;
  grid-row: calc(var(--row-start) + 1) / calc(var(--row-start) + 2);
  padding: 16px 16px 16px 24px;
  border-left: 2px solid var(--line);
  margin-left: 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.fg-axis-dot {
  position: absolute; left: -6px; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--signal);
}
.fg-axis-year {
  font-family: var(--display); font-weight: 900; font-size: 1.05rem;
  color: var(--text);
}
.fg-axis-range {
  font-family: var(--mono); font-size: 12px;
  color: var(--muted);
}
.fg-axis-tag {
  font-family: var(--mono); font-size: 11px;
  color: var(--signal);
}

/* lane/generation cell - spans one generation's track; stacks 1+ finding
   blocks vertically via flex (no grid-row math needed inside it) */
.fg-cell {
  grid-row: calc(var(--row-start) + 1) / calc(var(--row-start) + 2);
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 10px;
}
.fg-cell.artifacts { grid-column: 2; }
.fg-cell.general { grid-column: 3; }
.fg-cell.model { grid-column: 4; }
.fg-cell-empty {
  font-family: var(--mono); font-size: 12px; color: var(--muted-dim);
  padding: 8px 4px;
}

.fg-block {
  display: block; width: 100%;
  text-align: left;
  font: inherit;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  color: var(--text);
  background: none;
  border: 1px solid var(--line-dim);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.fg-block::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  /* signal-decay fade - computed from the cell's own generation track, so
     older generations read as fainter. Text sits on its own layer above
     this (next rule), so legibility never degrades with it. */
  opacity: calc(0.95 - (var(--row-start) - 1) * 0.18);
}
.fg-block > * { position: relative; z-index: 1; }
.fg-cell.artifacts .fg-block::before { background: var(--gold); }
.fg-cell.general .fg-block::before { background: var(--olive); }
.fg-cell.model .fg-block::before { background: var(--rust); }
.fg-block:hover, .fg-block:focus-visible, .fg-block.active {
  border-color: var(--signal);
  outline: none;
}
/* a notable claim, not a citable technique - dashed instead of solid marks
   it as structurally different at a glance, no colour/symbol needed (the
   tooltip spells out why - see .fg-tooltip-unverified below) */
.fg-block.unverified { border-style: dashed; }

/* ---------- floating tooltip ----------
 * follows the cursor on hover, showing only the field matching whichever
 * lane's block triggered it (not artifact+technique+models together - each
 * lane stays meaningfully distinct to interact with). Anchors below the
 * block instead on keyboard focus/tap/click, since those lack a cursor
 * position. pointer-events:none while hovering so it never steals hover
 * from whatever's under it; clicking a block "pins" it (.pinned below)
 * which flips that off so its source links become clickable. See
 * field-guide.js for the full hover-vs-pinned state machine. */
.fg-tooltip {
  position: fixed;
  z-index: 50;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.fg-tooltip[hidden] { display: none; }
/* pinned (clicked) state - fixed near the block instead of cursor-following,
   and interactive so its source links become clickable; the border-color
   change reuses the same "focused/active" signal as .fg-block itself, so a
   pinned tooltip reads as belonging to its block. See field-guide.js. */
.fg-tooltip.pinned { pointer-events: auto; border-color: var(--signal); }
.fg-tooltip-name {
  display: block;
  font-family: var(--display); font-weight: 900; font-size: 0.92rem;
  color: var(--text);
  margin: 0 0 3px;
}
.fg-tooltip-gen {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 10px;
}
.fg-tooltip-field { margin: 0 0 8px; }
.fg-tooltip-field:last-child { margin-bottom: 0; }
.fg-tooltip-field-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 3px;
}
.fg-tooltip-field-label .swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.fg-tooltip-field.artifact .fg-tooltip-field-label { color: var(--gold); }
.fg-tooltip-field.artifact .swatch { background: var(--gold); }
.fg-tooltip-field.technique .fg-tooltip-field-label { color: var(--olive); }
.fg-tooltip-field.technique .swatch { background: var(--olive); }
.fg-tooltip-field.models .fg-tooltip-field-label { color: var(--rust); }
.fg-tooltip-field.models .swatch { background: var(--rust); }
.fg-tooltip-field p {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* flags a finding as a notable real-world claim rather than a citable
   technique (see FINDINGS' unverified/unverifiedNote in field-guide.js) -
   dashed border matches .fg-block.unverified, deliberately not colored as
   an error/warning since it isn't one, just a different epistemic status. */
.fg-tooltip-unverified {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 4px;
}
.fg-tooltip-unverified-label {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.fg-tooltip-unverified-note {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* citation links - only clickable once the tooltip is pinned (pointer-
   events:auto above); reachable unpinned too via the number-key shortcut,
   see the keydown handler in field-guide.js. */
.fg-tooltip-links {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-dim);
}
.fg-tooltip-links-label {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 4px;
}
.fg-tooltip-links-list { display: flex; flex-direction: column; gap: 4px; }
.fg-cite {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--signal);
  text-decoration: none;
}
.fg-cite:hover, .fg-cite:focus-visible { text-decoration: underline; }

.fg-tooltip-hint {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted-dim);
  margin: 8px 0 0;
}

/* lives inside .fg-timeline as its last child, not as a sibling paragraph
   below it - every other cell in this grid sets an explicit grid-row (via
   --row-start), so this is the only auto-positioned item; the grid
   placement algorithm resolves auto-positioned items only after all
   explicit ones, so it always lands in the first fully-open row (right
   after the last generation's row) regardless of generation count. */
.fg-timeline-note {
  grid-column: 1 / -1;
  padding: 12px 16px 2px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--muted-dim);
}

@media (max-width: 820px) {
  .fg-timeline { grid-template-columns: 150px repeat(3, 1fr); }
  .fg-lane-header span:not(.swatch) { display: none; }
}

/* below this width the Gantt layout stops being legible if compressed
   further - the whole point is comparing lane boundaries against a shared
   axis, which needs real room (see .fg-timeline's min-width). Rather than
   squeeze it into an unreadable single column, .fg-timeline-scroll lets
   visitors swipe to see it at a legible width, and this notice sets that
   expectation up front instead of leaving them to discover it. */
.fg-mobile-warning {
  display: none;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--muted);
  background: var(--line-dim);
  border-left: 2px solid var(--gold);
  padding: 10px 14px;
  margin: 0 0 14px;
}
@media (max-width: 560px) {
  .fg-mobile-warning { display: block; }
}