:root {
    --bg:           #0d0a07;
    --panel:        #120d06;
    --panel-raised: #1c1409;
    --border:       #3d2b0e;
    --border-dim:   #251a07;
    --ember:        #c47f17;
    --ember-bright: #e8a020;
    --ember-glow:   rgba(196, 127, 23, 0.15);
    --ember-glow2:  rgba(196, 127, 23, 0.06);
    --text:         #d4aa6a;
    --text-dim:     #8a6734;
    --text-faint:   #5a4522;
    --scanline:     rgba(0,0,0,0.18);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.7;
    overflow: hidden;
}

/* CRT scanlines over everything */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        var(--scanline) 3px,
        var(--scanline) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Ambient ember glow from bottom */
body::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 200px;
    background: radial-gradient(ellipse at bottom, rgba(196,127,23,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.shell {
    display: grid;
    grid-template-rows: 48px 1fr;
    grid-template-columns: 1fr;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* ── TOP BAR ── */
.topbar {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 12px rgba(196,127,23,0.08);
}

.topbar-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-image: url('../mats/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 6px rgba(196,127,23,0.7));
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 6px var(--ember); opacity: 1; }
    50% { box-shadow: 0 0 14px var(--ember-bright); opacity: 0.85; }
}

.topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ember);
    letter-spacing: 0.12em;
    text-shadow: 0 0 12px rgba(196,127,23,0.5);
}

.topbar-sub {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    margin-left: auto;
}

/* ── TOP BAR NAV (section icons) ── */
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
}

.topbar-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.topbar-nav-item:hover { background: rgba(196,127,23,0.08); }

/* The section icons are 75px flame glyphs with transparent backgrounds. They're
   drawn directly as background images (no CSS-mask dependency) and tinted with
   filters so idle/hover/active states keep the ember palette. */
.nav-ico {
    display: block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    filter: brightness(0.78) sepia(0.95) saturate(2.3);
    transition: filter 0.15s;
}

.nav-ico-files {
    background-image: url('../mats/icons/Files_icon.png');
}
.nav-ico-conversations {
    background-image: url('../mats/icons/Conversations_icon.png');
}
.nav-ico-personnel {
    background-image: url('../mats/icons/Personnel_icon.png');
}
.nav-ico-lnf {
    background-image: url('../mats/icons/LnF_icon.png');
}

.topbar-nav-item:hover .nav-ico {
    filter: brightness(1) sepia(1) saturate(2.7) drop-shadow(0 0 4px rgba(196,127,23,0.5));
}

/* Active section: bright glyph plus a shaped glow. The drop-shadow sits on the
   unfiltered parent so it surrounds the whole button. */
.topbar-nav-item.active {
    filter: drop-shadow(0 0 5px rgba(196,127,23,0.6));
    animation: nav-pulse 3s ease-in-out infinite;
}
.topbar-nav-item.active .nav-ico {
    filter: brightness(1.15) sepia(1) saturate(3.1) drop-shadow(0 0 6px rgba(232,160,32,0.8));
}

@keyframes nav-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(196,127,23,0.5)); }
    50%      { filter: drop-shadow(0 0 10px rgba(232,160,32,0.9)); }
}

/* Sections whose pages don't exist yet stay dim and out of the tab order. */
.topbar-nav-item.is-soon { cursor: not-allowed; }
.topbar-nav-item.is-soon .nav-ico { opacity: 0.3; }
.topbar-nav-item.is-soon:hover { background: transparent; }

/* ── BODY LAYOUT ── */
.body {
    grid-row: 2;
    display: grid;
    grid-template-columns: 148px 1fr;
    overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--border-dim);
    padding: 20px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); }

.sidebar-label {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.14em;
    padding: 0 16px 8px;
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: 8px;
}

.nav-item {
    display: block;
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    text-decoration: none;
    line-height: 1.4;
}

.nav-item:hover {
    color: var(--ember-bright);
    border-left-color: var(--ember);
    background: var(--ember-glow2);
    text-shadow: 0 0 8px rgba(196,127,23,0.4);
}

.nav-item.active {
    color: var(--ember);
    border-left-color: var(--ember-bright);
    background: var(--ember-glow2);
    text-shadow: 0 0 10px rgba(196,127,23,0.5);
}

.nav-item .entry-id {
    display: block;
    font-size: 10px;
    color: var(--text-faint);
    margin-bottom: 2px;
}

/* ── MAIN PANEL ── */
.main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 28px;
    background: var(--bg);
}

.entry-header {
    margin-bottom: 16px;
    flex-shrink: 0;
}

.entry-id-tag {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}

.entry-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ember);
    text-shadow: 0 0 16px rgba(196,127,23,0.4);
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.entry-meta {
    font-size: 11px;
    color: var(--text-faint);
    border-top: 1px solid var(--border-dim);
    padding-top: 8px;
    display: flex;
    gap: 24px;
}

/* ── ENTRY BOX — fisheye + fade ── */
.entry-box-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    perspective: 600px;
    border-radius: 12px;
}

.entry-box {
    height: 100%;
    overflow-y: auto;
    /* wheel-picker breathing room: viewport-relative so first/last lines
       sit near the vertical centre regardless of the box width */
    padding: 40vh 24px;
    background: var(--panel-raised);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    transform: rotateX(1.8deg) scaleX(0.97);
    transform-origin: center center;
    transform-style: preserve-3d;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    scroll-behavior: smooth;
    /* fade strongest at edges, clear in the reading zone */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 82%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 82%,
        transparent 100%
    );
}

.entry-box::-webkit-scrollbar { width: 4px; }
.entry-box::-webkit-scrollbar-track { background: transparent; }
.entry-box::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Skip button floats over the entry box's bottom-right corner while a decode
   is running; hidden at rest so it never competes with the entry text. */
.entry-skip-btn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--ember);
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 2px 14px rgba(0,0,0,0.5);
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.entry-box-wrap.is-decoding .entry-skip-btn {
    display: inline-flex;
    animation: skipPulse 2.4s ease-in-out infinite;
}
.entry-skip-btn:hover {
    color: var(--ember-bright);
    border-color: var(--ember);
    box-shadow: 0 0 14px rgba(196,127,23,0.35);
}
@keyframes skipPulse {
    0% { opacity: 0.85; }
    50% { opacity: 1; }
    100% { opacity: 0.85; }
}

.entry-content {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text);
    max-width: 68ch;
}

.entry-content p {
    margin-bottom: 1.2em;
}

.entry-content p:first-child {
    margin-top: 32px;
}

.entry-content p:last-child {
    margin-bottom: 32px;
}

.entry-content .drop {
    font-size: 28px;
    font-weight: 700;
    float: left;
    line-height: 1;
    margin-right: 4px;
    color: var(--ember);
    text-shadow: 0 0 12px rgba(196,127,23,0.5);
}

/* hidden entries */
.entry-content { display: none; }
.entry-content.active { display: block; }
.entry-header-data { display: none; }
.entry-header-data.active { display: block; }

/* ── EDITOR TOGGLE BUTTON ── */
.editor-toggle {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
    font-family: inherit;
}
.editor-toggle:hover {
    color: var(--ember);
    text-shadow: 0 0 8px rgba(196,127,23,0.5);
}

/* ── EDITOR PANEL ── */
.editor-panel {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, border-color 0.3s;
    z-index: 100;
}
.editor-panel.open {
    max-height: 380px;
    border-color: var(--border);
}
.editor-inner {
    padding: 16px 24px 20px;
}
.editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--text-dim);
}
.editor-actions {
    display: flex;
    gap: 8px;
}
.ed-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    padding: 3px 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    letter-spacing: 0.08em;
}
.ed-btn:hover { color: var(--ember); border-color: var(--ember); }
.ed-save:hover { color: #6dbe6d; border-color: #6dbe6d; }
.ed-delete:hover { color: #be6d6d; border-color: #be6d6d; }

.editor-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ed-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.ed-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ed-field label {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.1em;
}
.ed-hint {
    opacity: 0.6;
    font-size: 9px;
}
.ed-field input[type="text"],
.ed-field input[type="password"] {
    background: var(--panel-raised);
    border: 1px solid var(--border-dim);
    color: var(--text);
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
    transition: border-color 0.15s;
}
.ed-field input[type="text"]:focus,
.ed-field input[type="password"]:focus {
    border-color: var(--ember);
}
.ed-field select {
    background: var(--panel-raised);
    border: 1px solid var(--border-dim);
    color: var(--text);
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
    transition: border-color 0.15s;
}
.ed-field select:focus {
    border-color: var(--ember);
}
.ed-field-check {
    justify-content: flex-end;
    padding-bottom: 2px;
}
.ed-field-check label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 11px;
}
.ed-field-check input[type="checkbox"] {
    accent-color: var(--ember);
    width: 13px;
    height: 13px;
    cursor: pointer;
}
.ed-body-field { margin-top: 2px; }
.ed-body-field textarea {
    background: var(--panel-raised);
    border: 1px solid var(--border-dim);
    color: var(--text);
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    line-height: 1.7;
    padding: 8px 10px;
    resize: vertical;
    min-height: 80px;
    max-height: 140px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
}
.ed-body-field textarea:focus {
    border-color: var(--ember);
}

/* ── CONVERSATION EDITOR MESSAGE LIST ── */
/* The Pit's editor panel is taller than the Files one, and its message rows
   flex-wrap so kind/name/time/delay/text/actions degrade gracefully on phones. */
.conv-panel.open { max-height: 560px; }
.conv-msg-list {
    background: var(--panel-raised);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.conv-msg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.conv-msg-row input[type="text"],
.conv-msg-row input[type="number"],
.conv-msg-row select.conv-msg-kind {
    background: var(--panel);
    border: 1px solid var(--border-dim);
    color: var(--text);
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    padding: 3px 6px;
    min-width: 0;
}
.conv-msg-kind { width: 62px; }
.conv-msg-name { width: 130px; }
/* Divider rows are pure cards: name, time and delay columns go away entirely */
.conv-msg-row.is-divider .conv-msg-name,
.conv-msg-row.is-divider .conv-msg-time,
.conv-msg-row.is-divider .conv-msg-delay { display: none; }
.conv-msg-time { width: 58px; }
.conv-msg-delay { width: 76px; }
/* the chapter label exists only on divider rows: it names the card in the dropdown */
.conv-msg-label { width: 190px; }
.conv-msg-row:not(.is-divider) .conv-msg-label { display: none; }
/* a divider's card line stays authorable and reads like the bold board caption */
.conv-msg-row.is-divider .conv-msg-text { font-weight: 700; }
.conv-msg-text { flex: 1 1 160px; min-width: 130px; }
.conv-msg-actions { display: flex; gap: 3px; }
.conv-row-btn { padding: 1px 7px; min-width: 20px; }
.ed-addmsg { margin-top: 6px; }
.ed-addmsg + .ed-addmsg { margin-left: 6px; }

/* account for editor panel pushing layout */
.body {
    transition: margin-top 0.3s;
}

/* ── TAGS IN META ── */
.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.tag {
    font-size: 10px;
    color: var(--text-faint);
    border: 1px solid var(--border-dim);
    padding: 1px 6px;
    letter-spacing: 0.06em;
}

/* ── RESTRICTED BADGE ── */
.restricted-badge {
    font-size: 10px;
    opacity: 0.6;
}

/* ── FORMATTING ── */
.entry-content p strong,
.entry-box p strong { color: var(--ember-bright); font-weight: 700; }

.entry-box p em { font-style: italic; color: var(--text); opacity: 0.85; }

.entry-box p u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ember); }

/* intentional blank line spacer */
.spacer { height: 1.2em; display: block; }

/* ── AIM-STYLE CHAT WINDOW (Conversation Pit) ── */
.chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(196,127,23,0.06), 0 0 0 1px rgba(0,0,0,0.4);
}

.chat-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: linear-gradient(180deg, #241a0c 0%, #17100a 100%);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ember-bright);
    letter-spacing: 0.08em;
    text-shadow: 0 0 10px rgba(196,127,23,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.08em;
}

.chat-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6fbf4a;
    box-shadow: 0 0 6px rgba(111,191,74,0.75);
}
.chat-status-dot.off {
    background: var(--text-faint);
    box-shadow: none;
}

/* decorative window buttons — AIM chrome flavour, non-functional */
.chat-winbtns { display: flex; gap: 4px; margin-left: auto; }
.chat-winbtn {
    width: 14px;
    height: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-size: 8px;
    line-height: 10px;
    text-align: center;
    color: var(--text-faint);
}

.chat-transport {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-dim);
    background: var(--panel);
    flex-shrink: 0;
}

.chat-btn {
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    padding: 3px 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, text-shadow 0.15s;
}
.chat-btn:hover {
    color: var(--ember);
    border-color: var(--ember);
    text-shadow: 0 0 8px rgba(196,127,23,0.5);
}
select.chat-btn {
    color: var(--text-dim);
    background: var(--panel);
    cursor: pointer;
}
select.chat-btn option {
    background: var(--panel);
    color: var(--text-dim);
}

.chat-progress {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.1em;
}

.chat-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.chat-area::-webkit-scrollbar { width: 4px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.chat-msg { margin-bottom: 14px; }

.chat-name-row {
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}
.chat-name { font-weight: 700; color: var(--spk, var(--ember)); }
.chat-time { color: var(--text-faint); font-weight: 400; margin-left: 4px; }

.chat-bubble {
    display: block;
    background: var(--panel);
    border: 1px solid var(--border-dim);
    border-left: 2px solid var(--spk, var(--ember));
    border-radius: 2px 8px 8px 8px;
    padding: 7px 11px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text);
    max-width: 60ch;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* system/action lines: centred, dim, no bubble */
.chat-action {
    text-align: center;
    font-size: 10.5px;
    font-style: italic;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    margin: 10px 0;
}

/* Dividers are chapter cards: a bold centred line, accented like a title.
   Natural playback halts on the cut; the reader moves on with Play or the
   fast-forward dropdown. */
.chat-divider {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ember-bright);
    margin: 14px 0;
}
.chat-divider .chat-divider-cap::before,
.chat-divider .chat-divider-cap::after {
    content: '— ';
    color: var(--text-faint);
    font-weight: 400;
}

/* messages are pre-built but hidden until their timeline slot arrives */
.chat-pending { display: none; }

.chat-msg.in, .chat-action.in, .chat-divider.in { animation: msg-in 0.28s ease-out both; }
@keyframes msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* per-speaker tints (assigned by order of first appearance in JS) */
.spk-0 { --spk: #e8a020; }
.spk-1 { --spk: #c9a227; }
.spk-2 { --spk: #b85c1e; }
.spk-3 { --spk: #d98b5f; }
.spk-4 { --spk: #8f4b2a; }
.spk-5 { --spk: #b0a08c; }
.spk-6 { --spk: #7f9a6a; }
.spk-7 { --spk: #a9c4d8; }

/* typing indicator — decorative, hidden from assistive tech */
.chat-typing {
    font-size: 10.5px;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    margin: 0 0 14px;
    display: none;
}
.chat-typing.on {
    display: block;
    animation: type-blink 1.4s ease-in-out infinite;
}
@keyframes type-blink {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
}

/* fake input strip — the pit is read-only */
.chat-inputbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    font-family: inherit;
    font-size: 11px;
    color: var(--text-faint);
    background: var(--bg);
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    padding: 5px 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-inputbar .chat-hint {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.08em;
}

/* ── MOBILE & ACCESSIBILITY ── */

/* stop mobile browsers from auto-inflating text */
html { -webkit-text-size-adjust: 100%; }

/* keyboard/touch focus ring everywhere */
:focus-visible {
    outline: 2px solid var(--ember-bright);
    outline-offset: 2px;
}

/* skip-link: hidden until focused */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 9998;
    padding: 8px 14px;
    background: var(--panel-raised);
    border: 1px solid var(--ember);
    color: var(--ember-bright);
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.2s;
}
.skip-link:focus { transform: translateY(0); }

/* no grey highlight flash when tapping on phones */
body { -webkit-tap-highlight-color: transparent; }

/* honor reduced motion: kill animations/transitions */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* the mobile arrow + backdrop only exist below the breakpoint */
.sidebar-toggle,
.sidebar-backdrop { display: none; }

/* ── SMALL SCREENS (phones / slim tablets) ── */
@media (max-width: 820px) {
    /* lighter scanlines: keeps the CRT feel, cheaper to paint */
    body { --scanline: rgba(0,0,0,0.05); }

    .body { grid-template-columns: 1fr; }

    .main {
        padding: 14px 14px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    .topbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .topbar-sub { display: none; }
    .topbar-nav { margin-left: 4px; gap: 0; }
    .nav-ico { width: 20px; height: 20px; background-size: 20px 20px; }
    .chat-area { padding: 12px 10px; }
    .chat-bubble { max-width: 100%; }

    /* sidebar slides over the content as a drawer */
    .sidebar {
        position: fixed;
        top: 48px;
        bottom: 0;
        left: 0;
        width: min(300px, 85vw);
        z-index: 60;
        padding-top: 12px;
        box-shadow: 2px 0 18px rgba(0,0,0,0.55);
        transform: translateX(0);
        transition: transform 0.25s ease, visibility 0.25s;
    }
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
        visibility: hidden; /* also drops its links out of the tab order */
    }

    /* dimmed backdrop; tapping it closes the drawer */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        background: rgba(0,0,0,0.45);
        transition: opacity 0.25s;
    }
    body.sidebar-collapsed .sidebar-backdrop {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* floating arrow handle pinned to the drawer's right edge */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: calc(min(300px, 85vw) - 22px);
        transform: translate(0, -50%);
        width: 44px;
        height: 44px;
        z-index: 65;
        background: var(--panel-raised);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--ember-bright);
        font-family: 'Courier Prime', monospace;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        transition: transform 0.25s ease, color 0.15s;
    }
    body.sidebar-collapsed .sidebar-toggle {
        transform: translate(calc(22px - min(300px, 85vw)), -50%);
    }
    .sidebar-toggle:hover { color: var(--ember); }

    .ed-btn {
        min-height: 40px;
        padding: 8px 14px;
    }
    .nav-item { padding: 12px 16px; }
    .editor-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .entry-title { font-size: 20px; }

    /* bigger inputs stop iOS auto-zooming when a field is focused */
    .ed-field input[type="text"],
    .ed-field input[type="password"],
    .ed-body-field textarea { font-size: 16px; }

    /* flatter, shorter run so the text is reachable */
    .entry-box {
        padding: 28vh 16px;
        transform: none;
    }

    /* editor grid: two columns on slim screens */
    .ed-row { grid-template-columns: repeat(2, 1fr); }

    /* the open editor fills the remaining viewport and scrolls itself */
    .editor-panel.open {
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
    }
}

@media (max-width: 520px) {
    .ed-row { grid-template-columns: 1fr; }
    .editor-actions { flex-wrap: wrap; }
}

/* landscape phones: keep the reading line in view */
@media (max-height: 480px) {
    .entry-box { padding: 12vh 16px; }
    .main { padding: 10px 14px; }
}

/* ── RESTRICTED-ARCHIVE GATE ── */
/* The topbar logo doubles as the gate trigger; keep the icon feel but make it
   clearly interactive and keyboard-focusable. */
.topbar-logo {
    cursor: pointer;
}
.topbar-logo:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

/* The gate panel reuses the editor dropdown styles (.editor-panel, .ed-*);
   only the error hint needs its own color. */
.gate-error {
    color: #be6d6d;
    opacity: 1;
}

.gate-shake {
    animation: gate-shake 0.4s;
}
@keyframes gate-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
}