/* ============================================================
   krtffl.dev — night edition / tyrian
   krtffl-extras.css — page compositions + a11y utilities that
   the component library (doc 2) does not formalize as c-ids
   (home secondary stories, article title/standfirst, taxonomy
   cells, numbered post rail, skip link). Loaded AFTER
   krtffl.css so that stays byte-for-byte the handoff drop-in.
   Every value references tokens.css; no raw color literals.
   ============================================================ */

/* ---------- a11y: skip to content (acceptance #4) ---------- */
.skip-link {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 200;
    background: var(--k-accent);
    color: var(--k-on-accent);
    padding: var(--s-2) var(--s-4);
    font-weight: 700;
    font-size: 13px;
    transform: translateY(-200%);
    transition: transform var(--k-t-fast);
}
.skip-link:focus { transform: translateY(0); }

main:focus { outline: none; }

/* accent key glyphs in keyboard/search strips */
.key { color: var(--k-accent); font-weight: 700; }

/* search overlay empty/loading line (c12) */
.search__empty { padding: var(--s-3) 18px; font-size: 13px; color: var(--k-muted); }
/* krtffl.css sets .search-overlay{display:grid}, which overrides the UA
   [hidden] rule — restore it so the overlay stays closed until "/". */
.search-overlay[hidden] { display: none; }

/* letters (c14) — webmention entries injected by krtffl.js */
.letter__reply { margin-top: var(--s-2); }
.letter__author-tag { margin-left: var(--s-1); }

/* ---------- masthead strip extras (c01) ---------- */
.masthead__strip-right { display: flex; gap: 14px; align-items: center; }
.masthead__theme {
    border: 1px solid var(--k-line);
    background: transparent;
    color: var(--k-accent);
    font-family: var(--k-font-mono);
    font-size: var(--t-meta-size);
    padding: 1px var(--s-2);
    cursor: pointer;
    transition: border-color var(--k-t-fast);
}
.masthead__theme:hover { border-color: var(--k-accent); }
.masthead__compact-id { display: flex; align-items: baseline; gap: 18px; }

/* ---------- home: right-column secondary stories (v01) ---------- */
.front__aside { display: flex; flex-direction: column; }
.lead__meta-date { color: var(--k-muted); }
.lead__series { color: var(--k-accent-2); }
.front__secondary {
    display: block;
    padding: 18px 20px;
    border-bottom: var(--k-rule);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--k-t-fast);
}
.front__secondary:hover { background: var(--k-bg-1); }
.front__secondary-num { font-size: var(--t-micro-size); margin-bottom: 6px; color: var(--k-muted); }
.front__secondary-title {
    font-family: var(--k-font-display);
    font-weight: 600;
    font-size: var(--t-heading-size);
    line-height: var(--t-heading-lh);
    color: var(--k-fg);
}
.front__secondary:hover .front__secondary-title { color: var(--k-bright); }
/* subscribe panel fills the remaining height of the aside column */
.front__aside .panel--subscribe { flex: 1; }

/* subscribe panel: compact inline form used in aside + home ---- */
.subscribe__blurb { font-size: 13px; line-height: 1.5; margin: 0 0 var(--s-3); }
.subscribe__form { display: flex; }
.subscribe__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1.5px solid var(--k-on-accent);
    border-right: none;
    color: var(--k-on-accent);
    font-family: var(--k-font-mono);
    font-size: 12px;
    padding: 6px 10px;
    outline: none;
}
.subscribe__input::placeholder { color: var(--k-on-accent); opacity: .55; }
.subscribe__submit {
    background: var(--k-on-accent);
    color: var(--k-accent);
    border: 1.5px solid var(--k-on-accent);
    font-family: var(--k-font-mono);
    font-weight: 700;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
}
.subscribe__msg { font-size: 12px; margin-top: var(--s-2); }
.subscribe__msg--error { color: var(--k-on-accent); font-weight: 700; }
.subscribe__msg--success { font-size: 13px; }

/* ---------- article header (v03 / single) ---------- */
.article__header { margin-bottom: 30px; }
.article__meta { font-size: var(--t-micro-size); display: flex; gap: var(--s-3); margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.article__meta-dates { color: var(--k-muted); }
.article__title {
    font-family: var(--k-font-display);
    font-weight: 800;
    font-size: 52px;
    line-height: .98;
    letter-spacing: -.02em;
    color: var(--k-bright);
    margin: 0 0 18px;
}
.article__standfirst {
    color: var(--k-muted);
    font-size: 13px;
    border-bottom: var(--k-rule);
    padding-bottom: 22px;
}

/* ---------- numbered post rail (v02 list) ---------- */
.post-row--numbered { grid-template-columns: var(--k-rail-w) 110px minmax(0, 1fr) auto; }
.post-row__num {
    font-family: var(--k-font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--k-accent);
    padding-top: 2px;
}
.post-row.is-selected .post-row__num { color: var(--k-on-accent); }

/* list toolbar row (v02) */
.list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5) 10px;
    border-bottom: var(--k-rule);
    font-size: 13px;
    color: var(--k-muted);
}
.list-toolbar__filter { font-size: var(--t-meta-size); }
.list-toolbar__filter .chip { color: var(--k-fg); }

/* ---------- taxonomy index cells (v05 / terms) ---------- */
.term-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--k-rule); }
.term-cell {
    padding: 28px;
    text-decoration: none;
    color: inherit;
    border-right: var(--k-rule);
    border-bottom: var(--k-rule);
    transition: background-color var(--k-t-fast);
}
.term-cell:hover { background: var(--k-bg-1); }
.term-cell:nth-child(2n) { border-right: none; }
.term-cell__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.term-cell__title { font-family: var(--k-font-display); font-weight: 800; font-size: var(--t-title-size); color: var(--k-bright); }
.term-cell__count { font-family: var(--k-font-display); font-weight: 800; font-size: 22px; color: var(--k-accent); }
.term-cell__desc { font-size: 13px; color: var(--k-muted); margin-bottom: 14px; }
.term-cell__episodes { display: flex; flex-direction: column; gap: 5px; font-size: var(--t-meta-size); color: var(--k-muted); }
.term-cell__episode--latest { color: var(--k-fg); }
.term-cell__latest-mark { color: var(--k-accent-2); }

/* chip index (categories / tags) */
.chip-index { padding: 20px var(--s-5); }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.chip {
    display: inline-block;
    border: 1px solid var(--k-line);
    color: var(--k-fg);
    padding: 4px 12px;
    text-decoration: none;
    transition: border-color var(--k-t-fast), color var(--k-t-fast);
}
.chip:hover { border-color: var(--k-accent); color: var(--k-accent); }
.chip__count { color: var(--k-accent); }

/* ---------- about interview format (v04) ---------- */
.interview { max-width: var(--k-measure); display: flex; flex-direction: column; gap: 18px; line-height: var(--t-body-lh); }
.interview__cmd { color: var(--k-accent); font-weight: 700; }
.interview__answer { color: var(--k-fg); }
.timeline { display: flex; flex-direction: column; gap: 10px; font-size: var(--t-meta-size); color: var(--k-muted); }
.timeline__label { color: var(--k-fg); }
.timeline__label--next { color: var(--k-accent); }
.interview p { margin: 0; }
.interview em { color: var(--k-bright); }
.interview strong { color: var(--k-bright); font-weight: 700; }

/* 404 actions (v06) */
.error-page__actions { display: inline-flex; gap: 14px; }
.aside-links { display: flex; flex-direction: column; gap: var(--s-2); font-size: 13px; }
.aside-links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- letters reply form (c14) ---------- */
.letter__reply-hint { font-size: var(--t-meta-size); color: var(--k-muted); margin-top: var(--s-2); }
.letter-form { padding: 18px var(--s-5); }
.letter-form__actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.letters__empty { padding: 18px var(--s-5); font-size: 13px; color: var(--k-muted); }

/* ---------- responsive additions (≤900px) ---------- */
@media (max-width: 900px) {
    .post-row--numbered { grid-template-columns: minmax(0, 1fr); }
    .post-row__num { display: none; }
    .term-grid { grid-template-columns: minmax(0, 1fr); }
    .term-cell { border-right: none; }
    .article__title { font-size: 36px; }
}

/* nav + strip reflow on phones; ≥44px tap targets (acceptance #8) */
@media (max-width: 640px) {
    .masthead__strip { flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
    .masthead__deck { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
    .masthead--compact { flex-wrap: wrap; gap: var(--s-3); }
    .main-nav { flex-wrap: wrap; gap: 0 var(--s-5); width: 100%; }
    .main-nav a { padding: 11px 0; }
    .masthead__theme { padding: 10px var(--s-3); }
    .error-page__actions { flex-direction: column; gap: var(--s-3); }
    .btn { height: 44px; }
}