/* Field guide (/field): the hub page. Uses the site tokens from styles.css. */
.field-site .fg-stack {max-width:920px}
.field-site .fg-updated {font:11px/1.7 var(--mono); color:var(--ink-faint); margin-top:14px}
.field-site .fg-sec {scroll-margin-top:90px}
.field-site .fg-sec h2 {margin-bottom:12px}
.field-site .fg-intro {color:var(--ink-dim); font:17px/1.6 var(--serif); max-width:720px}
.field-site .fg-k-dq {color:#f0a58a; font-weight:600}
.field-site .fg-k-pass {color:#9fd8b4; font-weight:600}

/* three doors */
.fg-doors {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:34px 0 8px}
.fg-door {display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--rule); border-radius:16px; background:rgba(7,6,8,.62); text-decoration:none; transition:border-color .2s, transform .2s}
.fg-door:hover, .fg-door:focus-visible {border-color:rgba(255,208,137,.55); transform:translateY(-2px)}
.fg-door-k {font:10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--light)}
.fg-door-t {font:600 20px/1.25 var(--serif); color:var(--ink)}
.fg-door-s {font:15px/1.5 var(--serif); color:var(--ink-dim)}

/* question cards */
.fg-q {position:relative; margin-top:22px; padding:24px 24px 20px 74px; border:1px solid var(--rule); border-radius:16px; background:rgba(7,6,8,.62); scroll-margin-top:90px}
.fg-q-n {position:absolute; left:22px; top:24px; font:12px/1 var(--mono); color:var(--light); letter-spacing:.1em}
.fg-q h3 {font:600 24px/1.2 var(--serif); color:var(--ink); margin:0 0 10px}
.fg-plain {font:17px/1.6 var(--serif); color:var(--ink-dim); margin:0}
.fg-dl {margin:6px 0 0}
.fg-dl dt {font:10px/1.4 var(--mono); color:var(--light); letter-spacing:.1em; text-transform:uppercase; margin-top:16px}
.fg-dl dd {font:15px/1.6 var(--serif); color:var(--ink-dim); margin:6px 0 0; overflow-wrap:anywhere}
.fg-sets {list-style:none; margin:0; padding:0}
.fg-sets li {margin:0 0 9px; padding-left:14px; position:relative}
.fg-sets li::before {content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--light); opacity:.6}

/* verdict chips */
.fg-chip {display:inline-block; font:10px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; margin:2px 2px 2px 0; border-radius:10px; border:1px solid var(--rule); color:var(--ink-faint); white-space:nowrap; vertical-align:1px}
.fg-chip a {color:inherit; text-decoration:none}
.fg-chip.is-dq {color:#f0a58a; border-color:rgba(240,165,138,.45); background:rgba(240,165,138,.08)}
.fg-chip.is-pass {color:#9fd8b4; border-color:rgba(159,216,180,.45); background:rgba(159,216,180,.08)}
.fg-chip-next {color:var(--light); border-color:rgba(255,208,137,.45)}
.fg-chip-open {color:var(--ink-faint)}
.fg-tally {color:var(--ink); font-weight:600}

/* live board */
.fg-board {margin-top:20px}
.fg-board-fallback {font:15px/1.6 var(--serif); color:var(--ink-dim)}
.fg-summary {display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.fg-stat {flex:1 1 150px; padding:14px 16px; border:1px solid var(--rule); border-radius:14px; background:rgba(7,6,8,.62)}
.fg-stat b {display:block; font:600 30px/1.1 var(--serif); color:var(--ink)}
.fg-stat span {font:11px/1.5 var(--mono); color:var(--ink-faint)}
.fg-group {margin-top:18px}
.fg-group h3 {font:10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--light); margin:0 0 8px}
.fg-group-note {font:14px/1.5 var(--serif); color:var(--ink-faint); margin:0 0 8px}
.fg-rows {list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.fg-row {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:10px 2px; border-bottom:1px solid var(--rule); align-items:baseline}
.fg-row-name {font:13px/1.5 var(--mono); color:var(--ink); overflow-wrap:anywhere}
.fg-row-name small {color:var(--ink-faint); font-size:11px; margin-left:6px}
.fg-row-meta {grid-column:1 / -1; font:14px/1.5 var(--serif); color:var(--ink-dim)}
.fg-bar {position:relative; display:inline-block; width:120px; height:6px; margin:0 8px 0 0; border-radius:3px; background:rgba(239,230,212,.10); vertical-align:middle}
.fg-bar i {position:absolute; top:0; bottom:0; left:0; border-radius:3px; background:rgba(240,165,138,.75)}
.fg-bar u {position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-faint)}
.field-site .fg-foot {font:12px/1.7 var(--mono); color:var(--ink-faint); margin-top:18px}

/* tools */
.fg-tools {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px}
.fg-tool {padding:20px; border:1px solid var(--rule); border-radius:16px; background:rgba(7,6,8,.62); min-width:0}
.fg-tool h3 {font:600 20px/1.2 var(--serif); color:var(--ink); margin:0 0 10px}
.fg-tool p {font:15px/1.55 var(--serif); color:var(--ink-dim); margin:0 0 14px}
.fg-tool code {display:block; font:12px/1.5 var(--mono); color:var(--light); padding:9px 10px; border-radius:8px; background:rgba(0,0,0,.35); overflow-x:auto; white-space:nowrap}

/* glossary */
.fg-gloss {display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 22px; margin:14px 0 0}
.fg-gloss dt {font:600 16px/1.5 var(--serif); color:var(--ink); padding:12px 0; border-top:1px solid var(--rule); scroll-margin-top:90px}
.fg-gloss dd {font:15px/1.6 var(--serif); color:var(--ink-dim); margin:0; padding:12px 0; border-top:1px solid var(--rule)}
.fg-gloss dt:target, .fg-gloss dt:target + dd {background:rgba(255,208,137,.07)}

/* next + beyond */
.fg-next {margin:16px 0 0; padding-left:22px}
.fg-next li {font:16px/1.6 var(--serif); color:var(--ink-dim); margin:0 0 12px}
.fg-next b {color:var(--ink)}
.fg-beyond {list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px}
.fg-beyond li {padding:10px 0; border-top:1px solid var(--rule)}
.fg-beyond li > a {font:600 16px/1.4 var(--serif)}
.fg-beyond span {display:block; font:14px/1.5 var(--serif); color:var(--ink-dim); margin-top:3px}

@media (max-width:760px){
  .fg-doors, .fg-tools {grid-template-columns:1fr}
  .fg-q {padding:20px 18px 16px}
  .fg-q-n {position:static; margin-bottom:8px}
  .fg-gloss {grid-template-columns:1fr}
  .fg-gloss dd {border-top:0; padding-top:0}
  .fg-beyond {grid-template-columns:1fr}
  .fg-bar {width:80px}
}