/**
 * terminal-forge.css — the Core terminal, built of the world's materials (2026-09-22, William: "you had upgrades
 * /quarters/ and [the world page], so I was hoping you could just upgrade the terminal look").
 *
 * It KEEPS the terminal's identity — brown, parchment, a notice you read, and the dark-invert hover that terminal.css
 * already gets right. What changes is the CRAFT, so it stands beside Quarters and the world's home page:
 *
 *   · a real oak frame with forged iron corners, instead of a 3px tan outline
 *   · an oak-grain header/footer beam bound by a riveted iron strap
 *   · Cinzel for titles and plaque labels, EB Garamond for reading (was Georgia everywhere)
 *   · parchment texture on the sheet instead of flat #f4edd8
 *   · gilt rules with a lozenge under the group headings and the section title
 *   · nav plaques that look pressed, and invert to dark oak with a gilt edge on hover
 *   · a brass-plate account badge
 *
 * NOT the tech look — that is the HUD, the consoles and the spinning emblem (motivation-ideas/style-library.md). The
 * terminal is a thing the town built, so it wears the town's materials.
 *
 * LAYERED: terminal.css / terminal-mobile.css / terminal-content.css stay loaded and untouched; this sheet is linked
 * AFTER them and only overrides surfaces. Delete the one <link> in views/overlay.php + views/overlay-mobile.php and
 * the old look is back, unharmed. Sprites and fonts belong to the Forge family (public/assets/css/STYLE-FAMILIES.md).
 */
@import url(/public/assets/css/fonts-forge.css);

.terminal-overlay,
.tm-overlay {
    --tf-ink: #33220f;
    --tf-ink-soft: #6b5740;
    --tf-oak: #3d2b1f;
    --tf-gilt: #b8892b;
    --tf-gilt-hi: #e8c46e;
    --tf-wax: #7a1f1a;
    --tf-serif: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --tf-caps: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
    --tf-parchment: url(/public/assets/images/quarters/forge/parchment.svg);
    --tf-oakgrain: url(/public/assets/images/quarters/forge/oak-grain.svg);
    --tf-strap: url(/public/assets/images/quarters/forge/strap.svg);
}

/* ══ The frame: an oak board with forged iron corners ══════════════════ */
.terminal-overlay .terminal-frame {
    border: 0;
    border-radius: 2px;
    background:
        radial-gradient(ellipse at 20% -10%, rgba(255, 253, 244, 0.7), transparent 52%),
        var(--tf-parchment) 0 0 / 420px 420px repeat,
        linear-gradient(168deg, #f6ecd2, #ece0bd 58%, #e2d3ad);
    box-shadow:
        0 30px 80px rgba(8, 5, 2, 0.72),
        inset 0 0 90px rgba(120, 90, 45, 0.14);
}
/* The iron frame is drawn OVER the sheet, so it never scrolls away with the body. */
.terminal-overlay .terminal-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 13px solid transparent;
    border-image: url(/public/assets/images/quarters/forge/frame-card.svg) 34 / 34px / 0 stretch;
}
.terminal-overlay .terminal-border {
    background: rgba(10, 7, 3, 0.74);
    backdrop-filter: blur(2px);
}
.terminal-overlay--page-mode {
    background: radial-gradient(ellipse at 50% 0%, #1b140c, #0b0703 70%);
}

/* ══ Header: an oak beam, an iron strap along its lower edge ═══════════ */
.terminal-overlay .terminal-header {
    position: relative;
    z-index: 2;
    border-bottom: 0;
    padding-bottom: 23px;
    background:
        var(--tf-oakgrain),
        linear-gradient(180deg, #4b3522, #2b1c10);
    box-shadow: 0 5px 14px rgba(18, 11, 4, 0.4);
}
.terminal-overlay .terminal-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 11px;
    background: var(--tf-strap) 0 50% / 54px 11px repeat-x;
    opacity: 0.95;
}
.terminal-overlay .terminal-title {
    font-family: var(--tf-caps);
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    color: var(--tf-gilt-hi);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 16px rgba(232, 196, 110, 0.22);
}
.terminal-overlay .terminal-seal {
    color: var(--tf-gilt);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.terminal-overlay .terminal-close {
    border-radius: 2px;
    border-color: rgba(232, 196, 110, 0.35);
    background: rgba(0, 0, 0, 0.22);
    text-decoration: none;
}
.terminal-overlay .terminal-close:hover {
    background: rgba(122, 31, 26, 0.5);
    border-color: var(--tf-gilt);
    color: #ffeec0;
}

/* ══ The sheet ════════════════════════════════════════════════════════ */
.terminal-overlay .terminal-welcome,
.terminal-overlay .terminal-section-content,
.terminal-overlay .terminal-section-desc {
    font-family: var(--tf-serif);
    color: var(--tf-ink);
}
.terminal-overlay .terminal-welcome { font-size: 1.14rem; line-height: 1.78; }
.terminal-overlay .terminal-address {
    font-family: var(--tf-caps);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.terminal-overlay .terminal-signature { font-family: var(--tf-serif); color: var(--tf-ink-soft); }

/* ══ Group headings: small capitals over a gilt rule with a lozenge ════ */
.terminal-overlay .terminal-nav-section {
    border: 1px solid rgba(120, 92, 52, 0.38);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 252, 241, 0.62), rgba(212, 190, 149, 0.22));
    box-shadow: inset 0 1px 0 rgba(255, 254, 248, 0.9), 0 1px 2px rgba(61, 43, 31, 0.07);
}
.terminal-overlay .terminal-nav-section-title {
    font-family: var(--tf-caps);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--tf-wax);
    margin-bottom: 14px;
}
.terminal-overlay .terminal-nav-section-title::after {
    content: "";
    display: block;
    height: 11px;
    margin-top: 7px;
    background:
        url(/public/assets/images/quarters/forge/lozenge.svg) 0 50% / 11px 11px no-repeat,
        linear-gradient(90deg, var(--tf-gilt) 0 0) 15px 50% / calc(100% - 15px) 1.5px no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 100%);
}

.terminal-overlay .terminal-nav-kind {
    font-family: var(--tf-caps);
    font-style: normal;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a6d4a;
}

/* ══ Nav plaques: pressed parchment, inverting to dark oak on hover ════ */
.terminal-overlay .terminal-nav-btn {
    font-family: var(--tf-caps);
    border: 1px solid rgba(120, 92, 52, 0.55);
    border-radius: 2px;
    background: linear-gradient(180deg, #fbf3de, #ece1c2 55%, #e0d1ab);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 3px rgba(61, 43, 31, 0.16);
}
.terminal-overlay .terminal-nav-btn:hover,
.terminal-overlay .terminal-nav-btn.active {
    background:
        var(--tf-oakgrain),
        linear-gradient(180deg, #4b3522, #2b1c10);
    border-color: var(--tf-gilt);
    box-shadow: 0 5px 14px rgba(28, 18, 8, 0.35), inset 0 1px 0 rgba(232, 196, 110, 0.18);
}
.terminal-overlay .terminal-nav-btn.active {
    box-shadow: 0 5px 14px rgba(28, 18, 8, 0.35), inset 0 0 0 1px rgba(232, 196, 110, 0.45);
}
.terminal-overlay .terminal-nav-btn:focus-visible {
    outline: 2px solid var(--tf-gilt);
    outline-offset: 2px;
}
.terminal-overlay .terminal-nav-label {
    font-family: var(--tf-caps);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--tf-ink);
}
.terminal-overlay .terminal-nav-btn:hover .terminal-nav-label,
.terminal-overlay .terminal-nav-btn.active .terminal-nav-label { color: #f2e4c0; }
.terminal-overlay .terminal-nav-icon { color: #6b4a2a; }
.terminal-overlay .terminal-nav-key {
    font-family: var(--tf-caps);
    border-radius: 2px;
    border-color: rgba(120, 92, 52, 0.45);
}

/* A locked plaque reads as unstruck brass: flatter, cooler, its note in wax red. */
.terminal-overlay .terminal-nav-btn--locked {
    background: linear-gradient(180deg, #f2ead6, #e4d9bd 55%, #d9caa6);
    border-style: dashed;
    border-color: rgba(120, 92, 52, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.terminal-overlay .terminal-nav-btn--locked:hover,
.tm-overlay .terminal-nav-btn--locked:hover { border-style: solid; }
.terminal-overlay .terminal-nav-lock,
.tm-overlay .terminal-nav-lock { font-family: var(--tf-serif); font-size: 0.72rem; color: var(--tf-wax); }
.terminal-overlay .terminal-nav-btn--locked:hover .terminal-nav-lock { color: #f0a893; }
.tm-overlay .terminal-nav-btn--locked { border-style: dashed; opacity: 0.78; }

/* ══ The account badge: a brass plate, pinned beside the address ═══════ */
.terminal-overlay .terminal-acct {
    border: 1px solid #8f6f3d;
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(255, 250, 233, 0.86), rgba(233, 216, 178, 0.7)),
        var(--tf-parchment);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(184, 137, 43, 0.22),
        0 4px 10px rgba(61, 43, 31, 0.2);
}
.terminal-overlay .terminal-acct-title {
    font-family: var(--tf-caps);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--tf-wax);
}
.terminal-overlay .terminal-acct-btn {
    font-family: var(--tf-caps);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    border-radius: 2px;
    border-color: rgba(143, 111, 61, 0.55);
}
.terminal-overlay .terminal-acct-sub { font-family: var(--tf-serif); font-size: 0.86em; letter-spacing: 0; }
/* The plate is nailed up: two iron rivets at the head, a gilt hairline under the title, and one struck action.
   (2026-09-22, William asked for this section to be taken further.) */
.terminal-overlay .terminal-acct { position: relative; padding-top: 16px; }
.terminal-overlay .terminal-acct::before,
.terminal-overlay .terminal-acct::after {
    content: "";
    position: absolute;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #9a8258, #4a3a22 60%, #241a0c);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.terminal-overlay .terminal-acct::before { left: 9px; }
.terminal-overlay .terminal-acct::after  { right: 9px; }
.terminal-overlay .terminal-acct-title {
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(184, 137, 43, 0.45);
    margin-bottom: 2px;
}
.terminal-overlay .terminal-acct-btn--primary {
    color: #2a1d08;
    border-color: #a9832f;
    background: linear-gradient(180deg, #f0d391, #d8ae55 55%, #c59a3c);
    box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.85), 0 2px 0 #8a6a1f, 0 3px 8px rgba(61, 43, 31, 0.25);
}
.terminal-overlay .terminal-acct-btn--primary:hover {
    color: #2a1d08;
    border-color: #f0d89a;
    background: linear-gradient(180deg, #f8e2ab, #e2bb63 55%, #cfa444);
}
.terminal-overlay .terminal-acct-btn--primary .terminal-acct-icon,
.terminal-overlay .terminal-acct-btn--primary .terminal-acct-sub { color: #5e4712; }
.terminal-overlay .terminal-acct-note { font-family: var(--tf-serif); font-size: 0.84rem; color: #7b6547; }

/* ══ Sign in: the one wax-red plate on the badge, gilt catching the light ═══════════════════════════
   2026-09-26, William: "this one is not styled" — the 2026-09-22 town portal (violet light in an iron doorway, for "this
   is the most important button in the entire thing, make it magic") was the only thing on the sheet not made of this
   world's materials. It is now the world's own PRIMARY: oxblood lacquer in a gilt border with gilt capitals, the same
   one-button colours as the Smutt Rock sign's card (style-library.md: "the sign's own colours for the ONE button").
   The magic stays as ONE motion: a slow glint crossing it, like light over gold leaf. No pulse, nothing else moves. */
.terminal-overlay .terminal-acct-btn--portal {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 11px 12px;
    color: #f3d98a;
    border: 1px solid #b8892b;
    background:
        radial-gradient(ellipse at 50% -30%, rgba(255, 214, 150, 0.28), transparent 62%),
        linear-gradient(180deg, #6b2528 0%, #56191c 55%, #3f1113 100%);
    box-shadow:
        inset 0 0 0 1px rgba(243, 217, 138, 0.28),
        inset 0 1px 0 rgba(255, 226, 160, 0.35),
        0 2px 0 #1d0a0b,
        0 3px 8px rgba(40, 14, 10, 0.35);
}
/* The glint: one narrow band of warm light, crossing slowly, then a long rest. */
.terminal-overlay .terminal-acct-btn--portal::before {
    content: "";
    position: absolute;
    inset: -40% -60%;
    z-index: -1;
    background: linear-gradient(105deg,
        transparent 44%,
        rgba(255, 222, 150, 0.22) 48.5%,
        rgba(255, 240, 200, 0.4) 50%,
        rgba(255, 222, 150, 0.22) 51.5%,
        transparent 56%);
    animation: tf-portal-drift 7s ease-in-out infinite;
}
@keyframes tf-portal-drift {
    0%, 55% { transform: translateX(-42%); }
    100%    { transform: translateX(42%); }
}
.terminal-overlay .terminal-acct-btn--portal:hover,
.terminal-overlay .terminal-acct-btn--portal:focus-visible {
    color: #ffe9ad;
    border-color: #e8c46e;
    background:
        radial-gradient(ellipse at 50% -30%, rgba(255, 214, 150, 0.36), transparent 62%),
        linear-gradient(180deg, #7a2a2d 0%, #621d20 55%, #481416 100%);
    box-shadow:
        inset 0 0 0 1px rgba(243, 217, 138, 0.45),
        inset 0 1px 0 rgba(255, 226, 160, 0.45),
        0 2px 0 #1d0a0b,
        0 0 14px rgba(232, 196, 110, 0.35);
}
.terminal-overlay .terminal-acct-btn--portal .terminal-acct-icon {
    color: #e8c46e;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
.terminal-overlay .terminal-acct-btn--portal .terminal-acct-label {
    font-weight: 700;
    letter-spacing: 0.07em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* The phone shell's Sign in row: the same wax-red plate, flatter — it is a list row, not a plate. */
.tm-overlay .tm-nav-row[data-section="signin"] {
    color: #f3d98a;
    border-color: #b8892b;
    background: linear-gradient(180deg, #6b2528, #4a1517);
    box-shadow: inset 0 0 0 1px rgba(243, 217, 138, 0.25), 0 2px 0 #1d0a0b;
}
.tm-overlay .tm-nav-row[data-section="signin"] .tm-nav-row-label { color: #f3d98a; }
.tm-overlay .tm-nav-row[data-section="signin"] .tm-nav-row-desc  { color: #e2c7a4; }
.tm-overlay .tm-nav-row[data-section="signin"] .tm-nav-row-icon,
.tm-overlay .tm-nav-row[data-section="signin"] .tm-nav-row-chevron {
    color: #e8c46e;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ══ A section: capitals over the gilt rule, parchment reading width ═══ */
.terminal-overlay .terminal-section-title {
    font-family: var(--tf-caps);
    font-weight: 700;
    font-size: 1.24rem;
    letter-spacing: 0.06em;
    color: var(--tf-ink);
}
.terminal-overlay .terminal-section-icon { color: var(--tf-gilt); }
.terminal-overlay .terminal-section-divider {
    height: 13px;
    background:
        url(/public/assets/images/quarters/forge/lozenge.svg) 0 50% / 13px 13px no-repeat,
        linear-gradient(90deg, var(--tf-gilt) 0 0) 17px 50% / calc(100% - 17px) 1.5px no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 60%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 60%, transparent 100%);
}
.terminal-overlay .terminal-section-content { font-size: 1.06rem; line-height: 1.75; }
.terminal-overlay .tree-node-doc { font-size: 1.14rem; }
.terminal-overlay .terminal-section-content h3,
.terminal-overlay .terminal-section-content h4,
.terminal-overlay .terminal-section-content h5 {
    font-family: var(--tf-caps);
    letter-spacing: 0.03em;
    color: var(--tf-ink);
}
.terminal-overlay .terminal-back-btn {
    font-family: var(--tf-caps);
    border-radius: 2px;
    border-color: rgba(120, 92, 52, 0.55);
    background: linear-gradient(180deg, #fbf3de, #e6d7b2);
}
.terminal-overlay .terminal-back-btn:hover {
    background: var(--tf-oak);
    border-color: var(--tf-gilt);
}
.terminal-overlay .terminal-section-chip { border-radius: 2px; border-color: rgba(120, 92, 52, 0.45); }

/* ══ Footer: the beam again, the one gilt action on it ════════════════ */
.terminal-overlay .terminal-footer {
    position: relative;
    z-index: 2;
    border-top: 0;
    padding-top: 19px;
    background:
        var(--tf-oakgrain),
        linear-gradient(180deg, #2b1c10, #4b3522);
}
.terminal-overlay .terminal-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 11px;
    background: var(--tf-strap) 0 50% / 54px 11px repeat-x;
    opacity: 0.95;
}
.terminal-overlay .terminal-footer-left {
    font-family: var(--tf-caps);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: rgba(232, 196, 110, 0.55);
}
.terminal-overlay .terminal-footer-right { font-family: var(--tf-serif); font-size: 0.82rem; }
.terminal-overlay .terminal-footer kbd { font-family: var(--tf-serif); border-radius: 2px; }
.terminal-overlay .terminal-enter-cta {
    font-family: var(--tf-caps);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    border-radius: 2px;
    background: linear-gradient(180deg, #e8c46e, #c59a3c);
    border: 1px solid #f0d89a;
    box-shadow: 0 2px 0 #6b4a12, 0 4px 10px rgba(0, 0, 0, 0.35);
}
.terminal-overlay .terminal-enter-cta:hover {
    background: linear-gradient(180deg, #f5d894, #d8ac4c);
}

.terminal-overlay .terminal-body::-webkit-scrollbar-track { background: rgba(120, 92, 52, 0.12); }
.terminal-overlay .terminal-body::-webkit-scrollbar-thumb { background: #9a7c4e; border-radius: 2px; }

/* ══ Mobile sheet (.tm-*): same materials, its own shape ══════════════
   The mobile shell is deliberately full-bleed, not a framed card, so it takes the typography, the gilt and the oak
   beams — never the frame. */
.tm-overlay .tm-header {
    background:
        var(--tf-oakgrain),
        linear-gradient(180deg, #4b3522, #2b1c10);
    border-bottom: 3px solid rgba(184, 137, 43, 0.5);
}
.tm-overlay .tm-header-name {
    font-family: var(--tf-caps);
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--tf-gilt-hi);
}
.tm-overlay .tm-header-seal { color: var(--tf-gilt); }
.tm-overlay .tm-greeting-line,
.tm-overlay .tm-section-content { font-family: var(--tf-serif); }
.tm-overlay .tm-nav-group-title {
    font-family: var(--tf-caps);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--tf-wax);
}
.tm-overlay .tm-nav-row-label,
.tm-overlay .tm-section-title {
    font-family: var(--tf-caps);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.tm-overlay .tm-nav-row-desc { font-family: var(--tf-serif); }
.tm-overlay .tm-nav-row-icon { color: #6b4a2a; }
.tm-overlay .tm-nav-row-chevron { color: var(--tf-gilt); }

@media (prefers-reduced-motion: reduce) {
    .terminal-overlay .terminal-nav-btn,
    .terminal-overlay .terminal-enter-cta { transition: none; }
    .terminal-overlay .terminal-enter-cta:hover { transform: none; }
    /* The glint stops (2026-09-26); the wax-red plate alone still reads as the one important button. */
    .terminal-overlay .terminal-acct-btn--portal::before { animation: none; display: none; }
}

/* ══ Room inside the iron (2026-09-26, William: "it is bleeding into the header and footer ... give the header a lil
   more padding top and footer padding bottom, so we can keep the cool border"). The frame is a 13px border drawn OVER
   the card (::after above), so the beams' own padding has to start past it: the # and × touched its top line and the
   Enter button sat on its bottom one, with the corner irons (34px) crowding both ends. Only where the frame is drawn. ══ */
@media (min-width: 576px) {
    .terminal-overlay .terminal-header { padding-top: 25px; padding-left: 32px; padding-right: 32px; }
    .terminal-overlay .terminal-footer { padding-bottom: 23px; padding-left: 32px; padding-right: 32px; }
}

/* ══ xs: the sheet is full-bleed (terminal.css drops the card), so the iron frame goes with it ══ */
@media (max-width: 575.98px) {
    .terminal-overlay .terminal-frame::after { display: none; }
}