/* ============================================================
   krtffl.dev design system — "night edition / tyrian" v1.0
   krtffl.css — drop-in stylesheet. Requires tokens.css first.
   Replaces risotto.css and all files it imports.
   Component ids (c01…c18) map to doc 2 (component library).
   ============================================================ */

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { background: var(--k-bg-0); }

body {
    margin: 0;
    background: var(--k-bg-0);
    color: var(--k-fg);
    font-family: var(--k-font-mono);
    font-size: var(--t-body-size);
    line-height: 1.65;
}

::selection { background: var(--k-accent); color: var(--k-on-accent); }

:focus-visible {
    outline: 2px solid var(--k-accent);
    outline-offset: 2px;
    border-radius: 0;
}

a { color: var(--k-accent-2); text-decoration: none; transition: color var(--k-t-fast); }
a:hover { color: var(--k-accent); }

/* prose links (inside article bodies) are always underlined */
.prose a {
    color: var(--k-accent-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.prose a:hover { color: var(--k-accent); }
.prose a:visited { color: var(--k-muted); }

/* ---------- page frame ---------- */
.page {
    max-width: var(--k-page-max);
    margin: 0 auto;
    padding: 0 var(--s-5);
}

/* ---------- c01 masthead + nav ---------- */
.masthead__strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--s-5);
    border-bottom: var(--k-rule);
    font-size: var(--t-meta-size);
    color: var(--k-muted);
}
.masthead__strip a { color: var(--k-accent-2); text-decoration: underline; text-underline-offset: 3px; }

.masthead {
    padding: 18px var(--s-5) 12px;
    border-bottom: var(--k-rule-accent);
}
.masthead__logo {
    margin: 0;
    font-family: var(--k-font-display);
    font-weight: 800;
    font-size: var(--t-masthead-size);
    line-height: var(--t-masthead-lh);
    letter-spacing: var(--t-masthead-ls);
    color: var(--k-bright);
}
.masthead__logo a { color: inherit; text-decoration: none; }
.masthead__cursor { color: var(--k-accent); animation: k-blink var(--k-blink-dur) step-end infinite; }

/* subpages: compact masthead (40px), strip row omitted */
.masthead--compact .masthead__logo { font-size: 40px; }
.masthead--compact { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-top: var(--s-4); }
.masthead__path { font-size: var(--t-meta-size); color: var(--k-muted); }

.masthead__deck {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    font-size: var(--t-meta-size);
}
.masthead__tagline { color: var(--k-muted); }

.main-nav { display: flex; gap: 22px; }
.main-nav a { color: var(--k-muted); font-size: var(--t-meta-size); }
.main-nav a:hover { color: var(--k-accent); }
.main-nav a.active {
    color: var(--k-accent);
    font-weight: 700;
    border-bottom: var(--k-rule-accent);
    padding-bottom: 1px;
}

/* ---------- c15 ticker (home only) ---------- */
.ticker {
    background: var(--k-bg-1);
    color: var(--k-accent);
    border-bottom: var(--k-rule);
    font-size: var(--t-meta-size);
    padding: 6px 0;
    overflow: hidden;
    white-space: nowrap;
}
.ticker__inner {
    display: inline-block;
    padding-left: 100%;
    animation: k-ticker var(--k-ticker-dur) linear infinite;
}
.ticker:hover .ticker__inner { animation-play-state: paused; }

/* ---------- front-page grid ---------- */
.front {
    display: grid;
    grid-template-columns: var(--k-rail-w) minmax(0, 1fr) var(--k-aside-w);
    border-bottom: var(--k-rule);
}
.front__rail {
    border-right: var(--k-rule);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 22px;
    font-family: var(--k-font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--k-accent);
}

/* article pages: prose + aside */
.article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--k-aside-w);
}
.article-grid__main { border-right: var(--k-rule); padding: 36px 40px; }
.article-grid__aside { padding: 28px var(--s-5); display: flex; flex-direction: column; gap: 20px; }

/* ---------- c07 lead story ---------- */
.lead {
    padding: var(--s-5);
    border-right: var(--k-rule);
    transition: background-color var(--k-t-fast);
}
.lead:hover { background: var(--k-bg-1); }
.lead__meta { display: flex; gap: var(--s-3); font-size: var(--t-micro-size); margin-bottom: 10px; align-items: center; }
.lead__title {
    margin: 0 0 14px;
    font-family: var(--k-font-display);
    font-weight: 800;
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
    letter-spacing: var(--t-display-ls);
    color: var(--k-bright);
}
.lead__summary { font-size: 13px; line-height: 1.65; max-width: 52ch; color: var(--k-muted); }
.lead__hint { margin-top: var(--s-4); font-size: 13px; color: var(--k-accent-2); }

/* ---------- c06 post row ---------- */
.post-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: var(--s-4);
    padding: 14px var(--s-5);
    border-bottom: var(--k-rule);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--k-t-fast);
}
.post-row:last-child { border-bottom: none; }
.post-row__date { color: var(--k-muted); font-size: var(--t-meta-size); padding-top: 3px; }
.post-row__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);
}
.post-row__meta { font-size: var(--t-meta-size); color: var(--k-muted); }
.post-row__hint { color: var(--k-hint); font-size: var(--t-meta-size); padding-top: 5px; }
.post-row:hover { background: var(--k-bg-1); }
.post-row:hover .post-row__title { color: var(--k-bright); }
.post-row:hover .post-row__hint { color: var(--k-muted); }
/* j/k selection — exactly one per view */
.post-row.is-selected,
.post-row.is-selected:hover { background: var(--k-accent); color: var(--k-on-accent); }
.post-row.is-selected .post-row__date,
.post-row.is-selected .post-row__title,
.post-row.is-selected .post-row__meta,
.post-row.is-selected .post-row__hint { color: var(--k-on-accent); font-weight: 700; }

/* ---------- c02 buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--k-control-h);
    padding: 0 18px;
    border: none;
    border-radius: 0;
    background: var(--k-accent);
    color: var(--k-on-accent);
    font-family: var(--k-font-mono);
    font-weight: 700;
    font-size: 13px;
    text-transform: lowercase;
    cursor: pointer;
    transition: background-color var(--k-t-fast), color var(--k-t-fast), border-color var(--k-t-fast);
}
.btn:hover { background: var(--k-accent-hover); }
.btn:active { background: var(--k-accent-down); }
.btn--secondary {
    background: transparent;
    color: var(--k-fg);
    border: 1px solid var(--k-muted);
}
.btn--secondary:hover { background: transparent; border-color: var(--k-accent); color: var(--k-accent); }
.btn--ghost { background: transparent; color: var(--k-accent-2); padding: 0 var(--s-1); }
.btn--ghost:hover { background: transparent; color: var(--k-accent); }
.btn:disabled, .btn[aria-disabled="true"] {
    background: var(--k-line);
    color: var(--k-muted);
    cursor: not-allowed;
}

/* ---------- c04 forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font-size: var(--t-meta-size); font-weight: 700; color: var(--k-fg); }
.input, .textarea, .select {
    background: var(--k-bg-2);
    border: 1px solid var(--k-line);
    border-radius: 0;
    color: var(--k-fg);
    font-family: var(--k-font-mono);
    font-size: 13px;
    padding: 9px var(--s-3);
    height: var(--k-control-h);
    caret-color: var(--k-accent);
    transition: border-color var(--k-t-fast);
}
.textarea { height: auto; min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--k-muted); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--k-accent); outline: none; }
.field--error .input, .field--error .textarea { border-color: var(--k-err); }
.field__error { font-size: var(--t-meta-size); color: var(--k-err); }
.field__success {
    border: 1px solid var(--k-ok);
    color: var(--k-ok);
    padding: 9px var(--s-3);
    font-size: 13px;
}
.input:disabled, .textarea:disabled {
    background: var(--k-bg-1);
    border-style: dashed;
    color: var(--k-muted);
    cursor: not-allowed;
}
input[type="checkbox"].checkbox {
    appearance: none;
    width: 16px; height: 16px;
    border: 1px solid var(--k-muted);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
}
input[type="checkbox"].checkbox:checked { background: var(--k-accent); border-color: var(--k-accent); }
input[type="checkbox"].checkbox:checked::before {
    content: "✓";
    color: var(--k-on-accent);
    font-size: 11px;
    font-weight: 700;
}

/* ---------- c05 badges, tags, kbd ---------- */
.badge {
    background: var(--k-accent);
    color: var(--k-on-accent);
    padding: 2px var(--s-2);
    font-size: var(--t-micro-size);
    font-weight: 700;
}
.tag {
    display: inline-block;
    border: 1px solid var(--k-line);
    color: var(--k-fg);
    padding: 2px 9px;
    font-size: var(--t-meta-size);
    text-decoration: none;
    transition: border-color var(--k-t-fast), color var(--k-t-fast);
}
.tag:hover { border-color: var(--k-accent); color: var(--k-accent); }
.tag__count { color: var(--k-accent); }
.series-marker { background: var(--k-bg-1); color: var(--k-accent-2); padding: 2px 9px; font-size: var(--t-meta-size); }
.status--draft { color: var(--k-warn); border: 1px dashed var(--k-warn); padding: 2px 9px; font-size: var(--t-micro-size); font-weight: 700; }
kbd {
    background: var(--k-bg-2);
    border: 1px solid var(--k-line);
    border-bottom-width: 2px;
    color: var(--k-fg);
    padding: 1px var(--s-2);
    font-family: var(--k-font-mono);
    font-size: var(--t-meta-size);
}

/* ---------- c08 aside panels ---------- */
.panel { border: var(--k-rule); padding: 18px 20px; }
.panel__title { font-size: var(--t-micro-size); color: var(--k-accent); font-weight: 700; margin: 0 0 var(--s-3); }
.panel__title::before { content: "// "; }
.panel--subscribe { border: none; background: var(--k-accent); color: var(--k-on-accent); }

/* toc scroll tracking */
.toc { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-meta-size); }
.toc a { color: var(--k-muted); border-left: 2px solid transparent; padding-left: 10px; }
.toc a:hover { color: var(--k-fg); }
.toc a.is-active { color: var(--k-accent); border-left-color: var(--k-accent); }
.toc .toc__sub { margin-left: 14px; }

/* ---------- c09 article prose ---------- */
.prose { max-width: var(--k-measure); line-height: var(--t-body-lh); }
.prose h2, .prose h3, .prose h4 {
    font-family: var(--k-font-display);
    color: var(--k-bright);
    margin: var(--s-7) 0 10px;
}
.prose h2 { font-weight: 800; font-size: var(--t-title-size); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.prose h3 { font-weight: 600; font-size: var(--t-heading-size); line-height: var(--t-heading-lh); }
.prose h4 { font-weight: 600; font-size: 16px; }
.prose h2::before { content: "## "; color: var(--k-accent); }
.prose h3::before { content: "### "; color: var(--k-accent); }
.prose h4::before { content: "#### "; color: var(--k-accent); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 22px; }
.prose em { color: var(--k-bright); }
.prose strong { font-weight: 700; color: var(--k-bright); }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 2px; list-style: none; }
.prose ul li, .prose ol li { display: flex; gap: 10px; }
.prose ul li::before { content: "∗"; color: var(--k-accent); }
.prose ol { counter-reset: k-ol; }
.prose ol li { counter-increment: k-ol; }
.prose ol li::before { content: counter(k-ol) "."; color: var(--k-accent); }
.prose blockquote {
    margin: 0 0 22px;
    border-left: var(--k-rule-accent);
    padding: var(--s-1) 0 var(--s-1) 20px;
    color: var(--k-muted);
    font-style: italic;
}
.prose hr { border: 0; margin: 0 0 22px; }
.prose hr::after { content: "---"; color: var(--k-muted); }
.prose img { max-width: 100%; height: auto; border: var(--k-rule); }
.prose figcaption { font-size: var(--t-meta-size); color: var(--k-muted); margin-top: var(--s-2); }
.prose code {
    background: var(--k-bg-2);
    color: var(--k-accent-2);
    padding: 1px 7px;
    font-size: 13px;
}

/* ---------- c10 code block ---------- */
.codeblock { border: var(--k-rule); margin: 0 0 22px; }
.codeblock__bar {
    display: flex;
    justify-content: space-between;
    background: var(--k-bg-1);
    border-bottom: var(--k-rule);
    padding: 7px var(--s-4);
    font-size: var(--t-micro-size);
}
.codeblock__lang { color: var(--k-accent); font-weight: 700; }
.codeblock__copy { color: var(--k-muted); cursor: pointer; background: none; border: none; font: inherit; }
.codeblock__copy:hover { color: var(--k-accent); }
.codeblock pre, .prose pre {
    background: var(--k-bg-2);
    margin: 0;
    padding: 18px 20px;
    font-size: 13px;
    line-height: 1.7;
    overflow-x: auto;
}
.codeblock pre code, .prose pre code { background: none; padding: 0; color: var(--k-fg); }

/* chroma syntax mapping — replaces monokai (set markup.highlight.noClasses=false) */
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kr { color: var(--k-accent-2); } /* keywords */
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb { color: var(--k-ok); }       /* strings */
.chroma .kt, .chroma .nl, .chroma .nt { color: var(--k-accent); }               /* types, labels */
.chroma .c, .chroma .c1, .chroma .cm { color: var(--k-muted); font-style: italic; } /* comments */
.chroma .nf, .chroma .nx { color: var(--k-bright); }                            /* fn names */
.chroma .m, .chroma .mi, .chroma .mf { color: var(--k-warn); }                  /* numbers */

/* ---------- c11 tables ---------- */
.prose table { border-collapse: collapse; margin: 0 0 22px; width: 100%; border: var(--k-rule); }
.prose th {
    background: var(--k-bg-1);
    border-bottom: var(--k-rule-accent);
    text-align: left;
    font-size: var(--t-meta-size);
    font-weight: 700;
    color: var(--k-bright);
    padding: 10px var(--s-4);
}
.prose td { padding: 10px var(--s-4); font-size: 13px; border-bottom: var(--k-rule); }
.prose tr:last-child td { border-bottom: none; }
.prose tbody tr:nth-child(even) { background: var(--k-bg-1); }

/* ---------- c12 search overlay ---------- */
.search-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--k-bg-0) 60%, transparent);
    display: grid;
    place-items: start center;
    padding-top: 15vh;
    z-index: 100;
    animation: k-fade var(--k-t-overlay);
}
.search {
    width: min(640px, calc(100vw - 48px));
    background: var(--k-bg-0);
    border: 1px solid var(--k-accent);
}
.search__bar { display: flex; align-items: center; gap: var(--s-3); padding: 14px 18px; border-bottom: var(--k-rule); }
.search__glyph { color: var(--k-accent); font-weight: 700; }
.search__input { flex: 1; background: none; border: none; color: var(--k-fg); font: 15px var(--k-font-mono); outline: none; }
.search__esc { font-size: var(--t-micro-size); color: var(--k-muted); }
.search__result { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4); padding: var(--s-3) 18px; font-size: 13px; color: var(--k-fg); text-decoration: none; }
.search__result mark { background: var(--k-bg-2); color: var(--k-accent); padding: 0 3px; }
.search__result.is-selected { background: var(--k-accent); color: var(--k-on-accent); font-weight: 700; }
.search__result.is-selected mark { background: var(--k-on-accent); color: var(--k-accent); }
.search__status { padding: 9px 18px; border-top: var(--k-rule); font-size: var(--t-micro-size); color: var(--k-muted); display: flex; gap: var(--s-4); }

/* ---------- c13 pagination ---------- */
.pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5); border-top: var(--k-rule); font-size: 13px; }
.pagination__pages { display: flex; gap: 10px; align-items: center; }
.pagination a { color: var(--k-muted); }
.pagination a:hover { color: var(--k-accent); }
.pagination .is-current { background: var(--k-accent); color: var(--k-on-accent); padding: 2px 9px; font-weight: 700; }
.pagination .is-disabled { color: var(--k-hint); pointer-events: none; }

/* ---------- c14 comments ---------- */
.letters { border: var(--k-rule); margin-top: var(--s-5); }
.letters__head { padding: 14px var(--s-5); border-bottom: var(--k-rule-accent); display: flex; justify-content: space-between; align-items: baseline; }
.letters__title { font-family: var(--k-font-display); font-weight: 800; font-size: 22px; color: var(--k-bright); margin: 0; }
.letters__count { font-size: var(--t-meta-size); color: var(--k-muted); }
.letter { padding: 18px var(--s-5); border-bottom: var(--k-rule); }
.letter__meta { display: flex; gap: var(--s-3); font-size: var(--t-meta-size); margin-bottom: var(--s-2); }
.letter__author { color: var(--k-accent); font-weight: 700; }
.letter__body { font-size: 13px; line-height: 1.7; }
.letter--author { padding-left: var(--s-7); background: var(--k-bg-1); }
.letter--author .letter__author { color: var(--k-accent-2); }
.letter__author-tag { border: 1px solid var(--k-accent-2); padding: 0 5px; font-size: 10px; }

/* ---------- c16 status footer ---------- */
.footer-index { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--k-rule); border-bottom: var(--k-rule); color: var(--k-muted); }
.footer-index__cell { padding: 14px 20px; border-right: var(--k-rule); font-size: var(--t-meta-size); }
.footer-index__cell:last-child { border-right: none; }
.footer-index__label { color: var(--k-fg); font-weight: 700; }
.footer-status { display: flex; justify-content: space-between; padding: 10px var(--s-5); font-size: var(--t-meta-size); color: var(--k-muted); }
.footer-status__keys { display: flex; gap: 20px; }
.footer-status__keys .key { color: var(--k-accent); }

/* ---------- v06 404 ---------- */
.error-page { text-align: center; padding: 80px var(--s-5); }
.error-page__code { font-family: var(--k-font-display); font-weight: 800; font-size: 140px; line-height: .9; color: var(--k-err); }
.error-page__title { font-family: var(--k-font-display); font-weight: 800; font-size: var(--t-title-size); color: var(--k-bright); margin: 18px 0 8px; }
.error-page__hint { color: var(--k-muted); font-size: 13px; margin-bottom: 26px; }

/* ---------- series banner (v03) ---------- */
.series-banner {
    border: 1px solid var(--k-accent-2);
    margin-top: var(--s-6);
    padding: var(--s-4) 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.series-banner__label { color: var(--k-accent-2); }

/* ---------- animations ---------- */
@keyframes k-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes k-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .masthead__cursor { animation: none; }
    .ticker__inner { animation: none; padding-left: 0; }
    .search-overlay { animation: none; }
}

/* ---------- responsive (≤900px) ---------- */
@media (max-width: 900px) {
    .front, .article-grid { grid-template-columns: minmax(0, 1fr); }
    .front__rail { display: none; }
    .lead, .article-grid__main { border-right: none; }
    .article-grid__main { padding: var(--s-5); }
    .masthead__logo { font-size: 56px; }
    .masthead--compact .masthead__logo { font-size: 32px; }
    .footer-index { grid-template-columns: 1fr 1fr; }
    .footer-index__cell:nth-child(2n) { border-right: none; }
    .footer-status__keys { display: none; } /* no keyboard on touch */
    .post-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
    .post-row__date { order: 2; }
    .post-row__hint { display: none; }
}