/* Field guide (2026-10-01): temporary in-place manual, static/js/field-guide.js.
   One fixed espresso palette on purpose: a guide card is a note pinned over the
   page, so it reads the same on every roast theme, light or dark. Nothing here
   targets an app class; everything is .fg-*. */
.fg-layer, .fg-dock, .fg-pop, .fg-manual, .fg-banner {
    --fg-bg: #1E140E; --fg-bg2: #160E08; --fg-edge: #4D3B31; --fg-ink: #FFF7EE; --fg-body: #EBE1D7;
    --fg-mute: #B9A88F; --fg-amber: #E69A4C; --fg-teal: #4CC4B4; --fg-sienna: #D9784F;
    --fg-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --fg-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    font-family: var(--fg-sans); color: var(--fg-body); box-sizing: border-box;
}
.fg-layer *, .fg-dock *, .fg-pop *, .fg-manual *, .fg-banner * { box-sizing: border-box; }
.fg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147482000; }
.fg-dot { position: fixed; pointer-events: auto; width: 20px; height: 20px; display: grid; place-items: center; padding: 0;
    font: 700 10px/1 var(--fg-mono); color: #1E140E; background: var(--fg-amber); border: 1.5px solid #FFF7EE;
    border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 3px rgba(230, 154, 76, .28), 0 2px 6px rgba(0, 0, 0, .45);
    animation: fg-in .25s ease-out both; }
.fg-dot:hover, .fg-dot[aria-expanded="true"] { background: var(--fg-ink); box-shadow: 0 0 0 4px rgba(230, 154, 76, .5), 0 2px 8px rgba(0, 0, 0, .5); }
.fg-dot:focus-visible { outline: 2px solid var(--fg-teal); outline-offset: 2px; }
/* Inline comment beside a few key cues (2026-10-02): readable without opening the card, left of the dot. */
.fg-dot[data-inline]::after { content: attr(data-inline); position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%);
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; border-radius: 9px;
    font: 600 11px/1.4 var(--fg-mono); color: var(--fg-ink); background: rgba(30, 20, 14, .92); border: 1px solid var(--fg-edge);
    pointer-events: none; }

.fg-pop { position: fixed; z-index: 2147483000; width: min(340px, calc(100vw - 16px)); padding: 12px 14px 10px;
    background: var(--fg-bg); border: 1px solid var(--fg-edge); border-top: 2px solid var(--fg-amber);
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7); animation: fg-in .18s ease-out both; }
.fg-part { display: grid; gap: 6px; }
.fg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fg-name { font: 600 14px/1.25 var(--fg-sans); color: var(--fg-ink); }
.fg-tag { font: 500 10px/1.2 var(--fg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); }
.fg-line { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.fg-k { font: 700 9.5px/1.6 var(--fg-mono); letter-spacing: .1em; text-transform: uppercase; }
.fg-line.now .fg-k { color: var(--fg-teal); }
.fg-line.next .fg-k { color: var(--fg-amber); }
.fg-line.mind .fg-k { color: var(--fg-sienna); }
.fg-v { font: 400 13px/1.45 var(--fg-sans); color: var(--fg-body); }
.fg-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(77, 59, 49, .7); }
.fg-link { background: none; border: 0; padding: 0; cursor: pointer; font: 600 11px/1 var(--fg-mono); color: var(--fg-amber); letter-spacing: .04em; }
.fg-link:hover { text-decoration: underline; }
.fg-esc { font: 400 10px/1 var(--fg-mono); color: var(--fg-mute); }

.fg-dock { position: fixed; left: 14px; bottom: 14px; z-index: 2147482500; display: flex; gap: 4px; align-items: center; }
.fg-pill, .fg-mini { font: 600 11px/1 var(--fg-mono); letter-spacing: .06em; color: var(--fg-ink); background: var(--fg-bg);
    border: 1px solid var(--fg-edge); padding: 7px 11px; cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6); }
.fg-pill { border-radius: 999px; }
.fg-pill[aria-pressed="true"] { border-color: var(--fg-amber); color: var(--fg-amber); }
.fg-mini { padding: 7px 9px; border-radius: 999px; display: none; }
.fg-dock.is-on .fg-mini, .fg-manual .fg-mini { display: inline-block; }
.fg-mini[aria-pressed="true"] { color: var(--fg-amber); border-color: var(--fg-amber); }
.fg-x { padding: 6px 9px; color: var(--fg-mute); }
.fg-pill:hover, .fg-mini:hover { background: #2A1C13; }
.fg-pill:focus-visible, .fg-mini:focus-visible, .fg-bbtn:focus-visible { outline: 2px solid var(--fg-teal); outline-offset: 2px; }

.fg-banner { position: fixed; left: 14px; bottom: 54px; z-index: 2147482500; width: min(420px, calc(100vw - 28px));
    display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 10px 12px;
    background: var(--fg-bg); border: 1px solid var(--fg-edge); border-left: 3px solid var(--fg-amber);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); animation: fg-in .3s ease-out both; }
.fg-btext { font: 400 12.5px/1.45 var(--fg-sans); color: var(--fg-body); }
.fg-bnew { font: 700 9.5px/1 var(--fg-mono); letter-spacing: .12em; text-transform: uppercase; color: #1E140E; background: var(--fg-amber); padding: 2px 5px; margin-right: 4px; }
.fg-bbtn { font: 600 11px/1 var(--fg-mono); padding: 7px 10px; cursor: pointer; color: #1E140E; background: var(--fg-amber); border: 1px solid var(--fg-amber); white-space: nowrap; }
.fg-bbtn.ghost { background: transparent; color: var(--fg-mute); border-color: var(--fg-edge); }

.fg-manual { position: fixed; top: 72px; right: 14px; bottom: 96px; /* clears the rail's footer Save/Sign */ z-index: 2147482800; width: min(400px, calc(100vw - 28px));
    overflow-y: auto; padding: 14px 16px 18px; background: var(--fg-bg2); border: 1px solid var(--fg-edge);
    border-top: 2px solid var(--fg-amber); box-shadow: -18px 0 40px -20px rgba(0, 0, 0, .75); animation: fg-slide .22s ease-out both; }
.fg-manual .fg-part { padding: 10px 0 11px; border-bottom: 1px solid rgba(77, 59, 49, .55); }
.fg-mtop { display: flex; justify-content: space-between; align-items: center; }
.fg-mtitle { font: 700 11px/1 var(--fg-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-ink); }
.fg-lede { margin: 8px 0 12px; font: 400 13px/1.45 var(--fg-sans); color: var(--fg-mute); }
.fg-spine { display: grid; gap: 4px; padding: 10px 12px; margin-bottom: 6px; background: var(--fg-bg); border: 1px solid var(--fg-edge); border-left: 3px solid var(--fg-teal); }
.fg-sp-core { font: 700 11px/1.3 var(--fg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-teal); }
.fg-sp-row { font: 400 12.5px/1.45 var(--fg-sans); color: var(--fg-body); }
.fg-group { margin-top: 14px; font: 700 10px/1 var(--fg-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-amber); }
.fg-fine { margin: 14px 0 0; font: 400 11px/1.4 var(--fg-mono); color: var(--fg-mute); }

@keyframes fg-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes fg-slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fg-dot, .fg-pop, .fg-banner, .fg-manual { animation: none; } }
@media print { .fg-layer, .fg-dock, .fg-pop, .fg-manual, .fg-banner { display: none !important; } }