/**
 * terminal-folio.css — the featured plaque as a PAGE FROM A PRINTED BOOK, 1500s (2026-10-01, dev log #1173; ADOPTED the same day,
 * #1174, William: "ok you can apply that one"; drawn first as a UI Lab trial, plaque-folio.css, beside six others).
 *
 * William: "think of like an old 16th century book, and no [practical] buttons". So nothing of a button: no rounded box,
 * no raised edge. A leaf of laid paper, foxed at the edges, the title set the way an early printer set a running head:
 * a rubricated (red) initial, small capitals in ink, a double rule above and below with fleurons at the ends, a printer's
 * device (the swords) at the left, and the folio number in the corner. HOVER: candlelight; the ink deepens, the rubric
 * glows. The paper never moves.
 *
 * Markup: Terminal::FEATURED_DECOR['folio'] (terminal.php): <span class="folio-rule folio-rule--top"> <span class="folio-rule folio-rule--bottom">
 * <span class="folio-number">. LAYERED after terminal-forge.css in views/overlay.php + views/overlay-mobile.php, where terminal-gothic.css
 * was (retired, kept for the UI Lab). The seven trials of the day: tools-internal/ui-lab/featured-plaque/.
 */
.terminal-nav-btn--folio {
    --f-ink: #2a1c10;
    --f-rubric: #9b2d1f;
    --f-paper: #efe4c6;
    --f-candle: 255, 196, 110;
    isolation: isolate;
    overflow: hidden;
    min-height: 64px;
    padding: 16px 20px 16px 18px;
    border: 0 !important;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 0% 100%, rgba(140, 100, 40, 0.18), transparent 40%),    /* foxing in the corners */
        radial-gradient(ellipse at 100% 0%, rgba(140, 100, 40, 0.14), transparent 38%),
        repeating-linear-gradient(0deg, rgba(90, 70, 40, 0.045) 0 1px, transparent 1px 4px),   /* laid lines */
        linear-gradient(180deg, #f3e9cf, var(--f-paper)) !important;
    box-shadow: 1px 2px 4px rgba(42, 31, 20, 0.22), 0 0 0 1px rgba(120, 95, 55, 0.25) !important;
    color: var(--f-ink);
}
/* the rules: a thick and a thin line, fleurons at the ends */
.terminal-nav-btn--folio .folio-rule {
    position: absolute; left: 14px; right: 14px; height: 4px; z-index: 1; pointer-events: none;
    border-top: 1.5px solid var(--f-ink); border-bottom: 0.5px solid var(--f-ink);
    opacity: 0.85;
    transition: border-color 0.15s, opacity 0.15s;
}
.terminal-nav-btn--folio .folio-rule--top    { top: 6px; }
.terminal-nav-btn--folio .folio-rule--bottom { bottom: 6px; border-top-width: 0.5px; border-bottom-width: 1.5px; }
.terminal-nav-btn--folio .folio-rule::before,
.terminal-nav-btn--folio .folio-rule::after {
    content: "\2766"; position: absolute; top: -9px; font: 400 12px/1 Georgia, serif; color: var(--f-rubric);
    background: var(--f-paper); padding: 0 3px;
    transition: color 0.15s, background-color 0.15s;
}
.terminal-nav-btn--folio .folio-rule::before { left: -4px; }
.terminal-nav-btn--folio .folio-rule::after  { right: -4px; transform: scaleX(-1); }
/* the folio number, pencil-grey in the corner */
.terminal-nav-btn--folio .folio-number {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none;
    font: italic 400 12px/1 var(--tf-serif); color: rgba(42, 28, 16, 0.55); letter-spacing: 0.04em;
    transition: color 0.15s;
}
.terminal-nav-btn--folio .folio-number::before { content: "fol. xii"; }
/* the printer's device: the swords inside a small inked ring, like a mark on the title page */
.terminal-overlay .terminal-nav-btn--folio .terminal-nav-icon,
.tm-overlay .terminal-nav-btn--folio .terminal-nav-icon {
    position: relative; z-index: 2; flex: 0 0 auto; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    font-size: 1rem; color: var(--f-ink);
    box-shadow: inset 0 0 0 1.5px var(--f-ink), inset 0 0 0 3px var(--f-paper), inset 0 0 0 3.5px var(--f-ink);
    background: transparent;
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
/* the title: a rubricated initial, then ink small capitals, letterpress-bitten into the paper */
.terminal-overlay .terminal-nav-btn--folio .terminal-nav-label,
.tm-overlay .terminal-nav-btn--folio .terminal-nav-label {
    position: relative; z-index: 2;
    font-family: var(--tf-serif); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.12em;
    font-variant: small-caps; text-transform: none;
    color: var(--f-ink);
    text-shadow: 0 0 0.6px rgba(42, 28, 16, 0.6);
    transition: color 0.15s;
}
.terminal-overlay .terminal-nav-btn--folio .terminal-nav-label::first-letter,
.tm-overlay .terminal-nav-btn--folio .terminal-nav-label::first-letter { color: var(--f-rubric); font-size: 1.35em; font-weight: 700; }
.terminal-overlay .terminal-nav-btn--folio .terminal-nav-lock,
.tm-overlay .terminal-nav-btn--folio .terminal-nav-lock { color: var(--f-rubric); font-family: var(--tf-serif); font-weight: 400; font-variant: normal; letter-spacing: 0.02em; text-transform: none; font-size: 0.8rem; }

/* ── Candlelight (hover / focus / open) ── */
.terminal-overlay .terminal-nav-btn--folio:hover,
.terminal-overlay .terminal-nav-btn--folio:focus-visible,
.terminal-overlay .terminal-nav-btn--folio.active,
.tm-overlay .terminal-nav-btn--folio:hover,
.tm-overlay .terminal-nav-btn--folio.active {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(var(--f-candle), 0.75), rgba(var(--f-candle), 0.25) 45%, transparent 75%),   /* the candle, held close */
        linear-gradient(180deg, rgba(255, 240, 200, 0.35), rgba(255, 220, 160, 0.2)),
        radial-gradient(ellipse at 0% 100%, rgba(140, 100, 40, 0.18), transparent 40%),
        radial-gradient(ellipse at 100% 0%, rgba(140, 100, 40, 0.14), transparent 38%),
        repeating-linear-gradient(0deg, rgba(90, 70, 40, 0.045) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #f3e9cf, var(--f-paper)) !important;
    box-shadow: 1px 2px 4px rgba(42, 31, 20, 0.22), 0 0 0 1px #c9a24a, 0 0 0 2px rgba(201, 162, 74, 0.35), 0 0 28px rgba(var(--f-candle), 0.6) !important;
}
/* the rules and fleurons go rubric red, the folio number and the device darken: the page is being read */
.terminal-nav-btn--folio:hover .folio-rule,
.terminal-nav-btn--folio.active .folio-rule { border-color: var(--f-rubric); opacity: 1; }
.terminal-nav-btn--folio:hover .folio-rule::before, .terminal-nav-btn--folio:hover .folio-rule::after,
.terminal-nav-btn--folio.active .folio-rule::before, .terminal-nav-btn--folio.active .folio-rule::after { color: #c0392b; background: #fbf1d6; }
.terminal-nav-btn--folio:hover .folio-number,
.terminal-nav-btn--folio.active .folio-number { color: var(--f-rubric); }
.terminal-overlay .terminal-nav-btn--folio:hover .terminal-nav-icon,
.terminal-overlay .terminal-nav-btn--folio.active .terminal-nav-icon,
.tm-overlay .terminal-nav-btn--folio:hover .terminal-nav-icon,
.tm-overlay .terminal-nav-btn--folio.active .terminal-nav-icon { background: rgba(var(--f-candle), 0.35); box-shadow: inset 0 0 0 1.5px var(--f-rubric), inset 0 0 0 3px #fbf1d6, inset 0 0 0 3.5px var(--f-rubric); }
.terminal-overlay .terminal-nav-btn--folio:hover .terminal-nav-label,
.terminal-overlay .terminal-nav-btn--folio.active .terminal-nav-label,
.tm-overlay .terminal-nav-btn--folio:hover .terminal-nav-label,
.tm-overlay .terminal-nav-btn--folio.active .terminal-nav-label,
.terminal-overlay .terminal-nav-btn--folio:hover .terminal-nav-icon,
.terminal-overlay .terminal-nav-btn--folio.active .terminal-nav-icon,
.tm-overlay .terminal-nav-btn--folio:hover .terminal-nav-icon,
.tm-overlay .terminal-nav-btn--folio.active .terminal-nav-icon { color: #140c06; }
.terminal-overlay .terminal-nav-btn--folio:hover .terminal-nav-label::first-letter,
.terminal-overlay .terminal-nav-btn--folio.active .terminal-nav-label::first-letter,
.tm-overlay .terminal-nav-btn--folio:hover .terminal-nav-label::first-letter,
.tm-overlay .terminal-nav-btn--folio.active .terminal-nav-label::first-letter { color: #c0392b; }

/* The featured plaque leads its group (the gothic and tome sheets did the same; William, 2026-10-01: "that btn should be
   position 1"). The server orders it first too (Terminal::getNavItems), so lists without this sheet agree. */
.terminal-nav .terminal-nav-btn--folio { order: -1; }