/* Design language TD-1 (silexi/portfolio docs/tasarim-dili.md). This repo's own copy of the tokens (MK-20).
   Neutrals are the stone scale shared across Bartu's sites; --a is HowDefend's one accent. */
:root {
  --td: "TD-1";
  --bg: #fafaf9; --fg: #1c1917; --mute: #57534e; --rule: #e7e5e4; --a: #1f5fbf;
  --good: #1f7a4d; --bad: #b42318; --panel: #f3f2f0;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --target: 24px; /* WCAG 2.5.8; 44px on touch screens */
  color-scheme: light;
}
@media (pointer: coarse) { :root { --target: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }
@media (prefers-color-scheme: dark) {
  :root { --bg: #12100e; --fg: #e7e5e4; --mute: #b3ada7; --rule: #292524; --a: #7aa7ef; --good: #4cc38a; --bad: #f07167; --panel: #1c1a17; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.6; }
a { color: var(--a); text-underline-offset: .25em; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
button, input, textarea { font: inherit; color: inherit; }

.top, main, footer { max-width: 1100px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.top { display: flex; align-items: center; gap: 4px 16px; padding-top: 12px; }
/* Header and footer links are standalone targets: at least 24px, 44px on touch (TD-1 3.4). Padding with an equal negative margin keeps the text in place. */
.top a, footer a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 6px; margin: 0 -6px; }
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
.crumb { color: var(--mute); }
.lang { margin-left: auto; display: flex; gap: 4px; }
.lang button { background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 0.875rem; min-height: var(--target); }
.lang button[aria-pressed="true"] { border-color: var(--fg); }

h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; margin: 32px 0 12px; }
h2 { font-size: 1.15rem; margin: 32px 0 8px; }
h3 { font-size: 1rem; margin: 20px 0 6px; }
.lede, .meta, .note { color: var(--mute); }
.meta { font-size: 0.875rem; margin: 0; }
.note { font-size: 0.875rem; margin: 6px 0; }
.lede { max-width: 68ch; }

.challenges { list-style: none; padding: 0; margin: 24px 0; border-top: 1px solid var(--rule); }
.challenges li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; }
.challenges a { font-weight: 600; font-size: 1.1rem; }
.challenges .meta { grid-column: 1; }
.badge { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 0.8125rem; font-weight: 700; color: var(--good); }

.brief p { max-width: 72ch; }
details { margin: 6px 0; }
summary { cursor: pointer; color: var(--a); }

.editor { margin-top: 24px; }
.bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bar label { font-weight: 600; }
.spacer { flex: 1; }
button.primary { background: var(--fg); color: var(--bg); border: 0; border-radius: 6px; padding: 7px 16px; cursor: pointer; font-weight: 600; min-height: var(--target); }
button.quiet { background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 6px 12px; cursor: pointer; min-height: var(--target); }
textarea { width: 100%; font: 14px/1.5 var(--mono); background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 12px; tab-size: 2; resize: vertical; }

.result { margin-top: 16px; }
.verdict { font-weight: 700; margin: 0; }
.verdict.ok { color: var(--good); }
.counts { list-style: none; padding: 0; margin: 8px 0; }
.counts li { padding: 2px 0 2px 16px; position: relative; }
.counts li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--mute); }
.counts li.good::before { background: var(--good); }
.counts li.bad::before { background: var(--bad); }
.error { color: var(--bad); font-family: var(--mono); font-size: 0.875rem; white-space: pre-wrap; }

input[type="search"] { min-height: var(--target); width: 100%; max-width: 420px; border: 1px solid var(--rule); background: transparent; border-radius: 6px; padding: 6px 10px; margin: 6px 0 10px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; max-height: 480px; overflow-y: auto; }
table { border-collapse: collapse; font: 0.8125rem/1.45 var(--mono); width: 100%; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { position: sticky; top: 0; background: var(--panel); font-weight: 600; }
td { max-width: 520px; overflow-wrap: anywhere; }

footer { margin-top: 64px; padding: 16px; border-top: 1px solid var(--rule); color: var(--mute); font-size: 0.875rem; display: flex; gap: 16px; flex-wrap: wrap; }
footer .sig { margin-left: auto; color: var(--fg); }