/* Toolkit result views. Loads after style.css and only uses its tokens.
   Every state is a word first and a color second; motion is limited to a
   grade settling and bars filling, and goes away under reduced motion. */
:root {
  --tk-ok: var(--ok);
  --tk-warn: var(--warn);
  --tk-bad: var(--danger);
  --tk-info: var(--accent-2);
  --tk-poor: #f4a261;
  --tk-ok-bg: rgba(60,207,145,.1);   --tk-ok-line: rgba(60,207,145,.45);
  --tk-warn-bg: rgba(229,181,63,.1); --tk-warn-line: rgba(229,181,63,.45);
  --tk-bad-bg: rgba(240,106,126,.1); --tk-bad-line: rgba(240,106,126,.45);
  --tk-info-bg: rgba(56,189,248,.1); --tk-info-line: rgba(56,189,248,.45);
  --tk-poor-bg: rgba(244,162,97,.1); --tk-poor-line: rgba(244,162,97,.45);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tk-mono { font-family: var(--mono); font-size: 12.5px; }
/* grid children default to min-width auto, which lets a wide table push the
   whole column past the viewport; results scroll inside their own wrapper */
.tk-layout > * { min-width: 0; }

/* The toolkit page is wider than the rest of the app so the two column tool
   layout has room next to the side nav. */
main:has(> #view-toolkit:not(.hidden)) { max-width: 1400px; }
@media (min-width: 821px) { .tk-layout { grid-template-columns: 236px minmax(0, 1fr); } }

/* ---- side nav: sticky, scrolls within the viewport, clear active item ---- */
.tk-side { max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tk-index-link { border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.tk-group { display: flex; align-items: center; gap: 6px; padding: 12px 10px 4px; }
.tk-group svg { color: var(--text-2); flex: none; }
.tk-item { position: relative; border: 1px solid transparent; }
.tk-item:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.tk-item.on { background: rgba(91,95,232,.16); border-color: rgba(91,95,232,.45); }
.tk-item.on::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-2); }
.tk-item.on .tk-blurb { color: var(--text-2); }
/* the compact tool picker replaces the side nav at phone and tablet widths */
.tk-pick { display: none; margin-bottom: 14px; }
.tk-pick select { width: 100%; }

/* ---- tool page head: group crumb, title, related lesson card ---- */
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tk-head-l { min-width: 0; flex: 1 1 320px; }
.tk-head-l p { margin-bottom: 0; }
.tk-head .row { margin-top: 2px; }
.tk-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.tk-lesson { display: flex; flex-direction: column; gap: 3px; flex: 0 1 300px; min-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); box-shadow: var(--shadow); transition: border-color .15s var(--ease), background .15s var(--ease); }
.tk-lesson:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.tk-lesson-k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tk-lesson-t { font-weight: 600; font-size: 14px; }
.tk-lesson-m { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.tk-lesson-go { font-size: 13px; color: var(--accent-2); margin-top: 2px; }

/* ---- index: intro, filter, group sections and tool cards ---- */
.tk-intro { max-width: 760px; }
.tk-filter { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tk-filter .field { flex: 1 1 260px; max-width: 420px; margin: 0; }
.tk-filter input { width: 100%; }
.tk-filter-n { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-section-g { margin-bottom: 26px; }
.tk-g-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.tk-g-head h2 { margin-bottom: 2px; }
.tk-g-head p { margin: 0; max-width: 640px; }
.tk-g-ic { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent-2); flex: none; background: var(--panel); }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tk-tool { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--text); box-shadow: var(--shadow); transition: border-color .15s var(--ease), background .15s var(--ease); }
.tk-tool:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.tk-tool:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-color: var(--line-2); background: var(--panel-2); }
.tk-tool:hover .tk-tool-ic, .tk-tool:focus-visible .tk-tool-ic { color: var(--accent-2); border-color: var(--line-2); }
.tk-tool-ic { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-2); flex: none; background: var(--bg-2); transition: color .15s var(--ease), border-color .15s var(--ease); }
.tk-tool-body { min-width: 0; flex: 1; }
.tk-tool .tk-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-tool .tk-blurb { margin-top: 2px; }
.tk-filter-none { padding: 20px 0; }

/* ---- tool layout: inputs left, result right from 1100 px ---- */
.tk-tool-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.tk-tool-layout > * { min-width: 0; }
.tk-inputs { margin-bottom: 0; }
.tk-results .card { margin-bottom: 0; }
.tk-results > .tk-out { margin-top: 0; }
.tk-empty { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 22px 24px; }
.tk-empty p { margin: 0; }
.tk-results > .tk-out > .tk-result, .tk-results > .tk-out > .tk-error, .tk-results > .tk-out > .tk-loading { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin: 0; }
.tk-results > .tk-out > .tk-error { border-color: rgba(240,106,126,.4); }
@media (min-width: 1100px) {
  .tk-tool-layout { grid-template-columns: minmax(280px, 31%) minmax(0, 1fr); }
  .tk-inputs { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.tk-hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tk-hint .link-btn { margin-left: 0; }
/* the file picker gets the same frame and height as a text input */
.tk-form input[type=file] { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-3); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; max-width: 100%; }
.tk-form input[type=file]::file-selector-button { font: inherit; font-size: 13px; font-weight: 500; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 10px; margin-right: 10px; cursor: pointer; }

/* ---- verdict strip ---- */
.tk-verdict { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--bg-2); margin: 0 0 16px; }
.tk-verdict-word { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
.tk-verdict-text { margin: 0; font-size: 14px; color: var(--text-2); flex: 1 1 280px; }
.tk-verdict.ok { border-color: var(--tk-ok-line); background: var(--tk-ok-bg); } .tk-verdict.ok .tk-verdict-word { color: var(--tk-ok); }
.tk-verdict.warn { border-color: var(--tk-warn-line); background: var(--tk-warn-bg); } .tk-verdict.warn .tk-verdict-word { color: var(--tk-warn); }
.tk-verdict.bad { border-color: var(--tk-bad-line); background: var(--tk-bad-bg); } .tk-verdict.bad .tk-verdict-word { color: var(--tk-bad); }
.tk-verdict.info { border-color: var(--tk-info-line); background: var(--tk-info-bg); } .tk-verdict.info .tk-verdict-word { color: var(--tk-info); }
.tk-verdict.poor { border-color: var(--tk-poor-line); background: var(--tk-poor-bg); } .tk-verdict.poor .tk-verdict-word { color: var(--tk-poor); }
.tk-runs { list-style: none; margin: 0; padding: 0; }
.tk-runs li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.tk-runs li:first-child { border-top: 0; padding-top: 4px; }
.tk-run-main { min-width: 0; }
.tk-run-t { font-weight: 600; font-size: 14px; }
.tk-run-t .tk-run-s { margin-left: 8px; font-weight: 400; }
.tk-run-l { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.tk-run-s { font-size: 12.5px; color: var(--muted); }

/* ---- form, status line, loading, errors ---- */
.tk-status { margin: 0; font-size: 13px; color: var(--muted); min-height: 20px; flex: 1; min-width: 160px; }
.tk-loading { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 0 4px; font-size: 14px; color: var(--text-2); }
.tk-loading-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex: none; animation: tkPulse 1.2s ease-in-out infinite; }
@keyframes tkPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.tk-error strong { display: block; margin-bottom: 2px; }
.tk-error .hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.tk-chips-field { margin-bottom: 8px; }
.tk-chips-field > span { display: block; font-size: 13px; color: var(--muted); }

/* ---- result frame ---- */
.tk-result { margin-top: 4px; }
.tk-rhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 2px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tk-rhead-l { min-width: 0; flex: 1; }
.tk-rtool { font-weight: 600; font-size: 15px; }
.tk-rtarget { font-family: var(--mono); font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.tk-rmeta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-rhead-r { display: flex; gap: 8px; align-items: center; flex: none; }
.tk-body > h3 { margin-top: 18px; }
.tk-body > h3:first-child { margin-top: 0; }

/* ---- summary strip ---- */
.tk-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 0 0 16px; }
.tk-stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; }
.tk-stat-n { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tk-stat-n.mono { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0; padding-top: 4px; }
.tk-stat-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tk-stat.ok .tk-stat-n { color: var(--tk-ok); }
.tk-stat.warn .tk-stat-n { color: var(--tk-warn); }
.tk-stat.bad .tk-stat-n { color: var(--tk-bad); }
.tk-stat.info .tk-stat-n { color: var(--tk-info); }
.tk-stat.muted .tk-stat-n { color: var(--muted); }

/* ---- state words ---- */
.tk-word { display: inline-flex; align-items: center; font-weight: 600; font-size: 12px; line-height: 1.4; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.tk-word.ok { color: var(--tk-ok); border-color: var(--tk-ok-line); background: var(--tk-ok-bg); }
.tk-word.warn { color: var(--tk-warn); border-color: var(--tk-warn-line); background: var(--tk-warn-bg); }
.tk-word.bad { color: var(--tk-bad); border-color: var(--tk-bad-line); background: var(--tk-bad-bg); }
.tk-word.info { color: var(--tk-info); border-color: var(--tk-info-line); background: var(--tk-info-bg); }
.tk-word.poor { color: var(--tk-poor); border-color: var(--tk-poor-line); background: var(--tk-poor-bg); }
.tk-word.plain { border: 0; padding: 0; background: none; font-size: 13px; }
.tk-flags .tk-word, .tk-notes .tk-word, .tk-risks .tk-word { white-space: normal; }

/* ---- tables: tight, no zebra, numbers right aligned, values in mono that
   wrap instead of overflowing ---- */
.tk-scroll { overflow-x: auto; max-width: 100%; margin: 6px 0 4px; }
.tk-tbl { display: table; margin: 0; min-width: 100%; table-layout: auto; }
.tk-tbl th { white-space: nowrap; padding: 5px 8px; }
.tk-tbl td { font-size: 13.5px; padding: 6px 8px; overflow-wrap: anywhere; }
.tk-tbl th.num, .tk-tbl td.num { text-align: right; }
.tk-tbl td.num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-tbl .note { color: var(--muted); font-size: 13px; }
.tk-tbl .note.on { color: var(--text-2); }
.tk-tbl .fix { font-size: 13px; color: var(--text-2); }
.tk-tbl .fix code { font-size: 12px; color: var(--text); }
.tk-val { display: inline; font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
.tk-val.none { color: var(--muted); font-family: var(--font); font-size: 13px; }
.tk-vals { display: flex; flex-direction: column; gap: 2px; }
.tk-tbl td.key { white-space: nowrap; }
.tk-tbl.cols-kv th:nth-child(1) { width: 26%; }
.tk-tbl.cols-hops th:nth-child(2) { width: 34%; }
.tk-tbl.cols-stxt th:nth-child(1) { width: 16%; }
.tk-tbl.cols-stxt th:nth-child(2) { width: 12%; }
.tk-tbl.cols-rx th:nth-child(1) { width: 40%; }
.tk-tbl.cols-token th:nth-child(1) { width: 30%; }
.tk-tbl.cols-headers th:nth-child(1) { width: 34%; }
.tk-tbl.cols-headers th:nth-child(2) { width: 10%; }
.tk-tbl.cols-headers th:nth-child(3) { width: 28%; }
.tk-tbl.cols-headers th:nth-child(4) { width: 28%; }
.tk-check-name { font-weight: 600; }
.tk-check-lesson { margin-top: 4px; }
.tk-group-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 2px; font-size: 14px; font-weight: 600; }
.tk-group-h:first-child { margin-top: 0; }
.tk-group-h .count { color: var(--muted); font-weight: 400; font-size: 13px; }

/* ---- grade and score ---- */
.tk-grade-row { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.tk-grade { width: 84px; height: 84px; border-radius: 16px; border: 1px solid; display: grid; place-items: center; font-size: 44px; font-weight: 700; letter-spacing: -.03em; background: var(--bg-2); flex: none; animation: tkSettle .22s var(--ease) both; }
.tk-grade.gA { color: var(--tk-ok); border-color: var(--tk-ok-line); }
.tk-grade.gB { color: var(--tk-info); border-color: var(--tk-info-line); }
.tk-grade.gC { color: var(--tk-warn); border-color: var(--tk-warn-line); }
.tk-grade.gD { color: var(--tk-poor); border-color: var(--tk-poor-line); }
.tk-grade.gF { color: var(--tk-bad); border-color: var(--tk-bad-line); }
@keyframes tkSettle { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.tk-grade-text { flex: 1; min-width: 220px; }
.tk-grade-word { font-size: 17px; font-weight: 600; }
.tk-grade-why { color: var(--text-2); font-size: 14px; margin: 2px 0 0; }
.tk-score { margin-top: 10px; }
.tk-score-bar { height: 8px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.tk-score-fill { height: 100%; width: 0; border-radius: 999px; transition: width .25s var(--ease); }
.tk-score-fill.gA { background: var(--tk-ok); } .tk-score-fill.gB { background: var(--tk-info); } .tk-score-fill.gC { background: var(--tk-warn); } .tk-score-fill.gD { background: var(--tk-poor); } .tk-score-fill.gF { background: var(--tk-bad); }
.tk-score-l { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.tk-response { font-size: 13px; color: var(--muted); margin: 0 0 12px; overflow-wrap: anywhere; }

/* ---- hosting checklist ---- */
.tk-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; align-items: start; }
.tk-section { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; min-width: 0; }
.tk-section.wide { grid-column: 1 / -1; }
.tk-section.wide .tk-check li { grid-template-columns: 92px 190px 1fr; }
.tk-section.wide .tk-check .detail { padding-top: 2px; }
.tk-section h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tk-section h3 .count { font-weight: 400; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tk-check { list-style: none; margin: 0; padding: 0; }
.tk-check li { display: grid; grid-template-columns: 92px 1fr; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: start; font-size: 13.5px; }
.tk-check li:first-child { border-top: 0; }
.tk-check .tk-word { justify-self: start; grid-row: 1 / span 2; }
.tk-check .name { font-weight: 600; }
.tk-check .name.mono { font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
.tk-check .detail { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; grid-column: 2; }
.tk-section.wide .tk-check .tk-word { grid-row: auto; }
.tk-section.wide .tk-check .detail { grid-column: auto; }
.tk-fix { margin-bottom: 16px; }
.tk-fix ol { margin: 6px 0 0; padding-left: 22px; }
.tk-fix li { margin: 6px 0; font-size: 14px; }
.tk-fix li .tk-word { margin-right: 6px; }
.tk-plain { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; margin: 0 0 12px; }
.tk-plain strong { white-space: nowrap; }

/* ---- encoder ---- */
.tk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tk-pane { min-width: 0; }
.tk-pane .field { margin-bottom: 6px; }
.tk-counts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 18px; }
.tk-counts .detect { color: var(--text-2); }
.tk-encode-foot { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }

/* ---- JWT ---- */
.tk-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tk-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; }
.tk-panel h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tk-panel h3 .count { font-weight: 400; font-size: 12px; color: var(--muted); }
.tk-json { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.tk-json .k { color: #7dd3fc; }
.tk-json .s { color: #a5b4fc; }
.tk-json .n { color: #fbbf24; }
.tk-json .b { color: var(--tk-ok); }
.tk-json .z { color: var(--muted); }
.tk-sig { font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; margin: 0 0 8px; }
.tk-notes { list-style: none; margin: 8px 0 0; padding: 0; }
.tk-notes li { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: 14px; background: var(--bg-2); }
.tk-notes li.bad { border-color: var(--tk-bad-line); }
.tk-notes li.warn { border-color: var(--tk-warn-line); }
.tk-notes li.ok { border-color: var(--tk-ok-line); }
.tk-notes li .tk-word { flex: none; }
.tk-rel { color: var(--muted); font-size: 12.5px; }

/* ---- hash ---- */
.tk-preview { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; font-size: 13px; }
.tk-preview .lbl { color: var(--muted); flex: none; }
.tk-preview code { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; color: var(--text-2); }
.tk-digests { margin: 4px 0 10px; }
.tk-digest { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.tk-digest:first-child { border-top: 0; }
.tk-digest .alg { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.tk-digest .bits { display: block; color: var(--muted); font-size: 12px; font-family: var(--font); }
.tk-digest code { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; padding-top: 2px; }

/* ---- password ---- */
.tk-pw-top { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-bottom: 14px; }
.tk-entropy { font-size: 36px; font-weight: 650; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tk-entropy small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-top: 6px; }
.tk-pw-label { font-size: 17px; font-weight: 600; }
.tk-pw-label.bad { color: var(--tk-bad); } .tk-pw-label.warn { color: var(--tk-warn); } .tk-pw-label.ok { color: var(--tk-ok); }
.tk-seg { display: flex; gap: 6px; margin: 8px 0; }
.tk-seg span { flex: 1; height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); transition: background .2s var(--ease); }
.tk-seg span.on.bad { background: var(--tk-bad); } .tk-seg span.on.warn { background: var(--tk-warn); } .tk-seg span.on.ok { background: var(--tk-ok); }
.tk-pw-sub { font-size: 13px; color: var(--muted); }
.tk-classes { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.tk-class { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tk-class.on { color: var(--text); border-color: var(--line-2); background: var(--bg-2); }
.tk-class .tk-word { font-size: 11px; padding: 0 6px; }
.tk-advice { margin: 8px 0 0; padding-left: 20px; }
.tk-advice li { margin: 4px 0; font-size: 14px; color: var(--text-2); }
.tk-private { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.tk-private svg { flex: none; color: var(--tk-ok); }

/* ---- cookies ---- */
.tk-risks { list-style: none; margin: 10px 0 0; padding: 0; }
.tk-risks > li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.tk-risks > li:first-child { border-top: 0; }
.tk-risks > li > .tk-word { flex: none; }
.tk-risks code { font-family: var(--mono); font-size: 12.5px; }
.tk-risk-body { min-width: 0; flex: 1; }
.tk-reasons { list-style: none; margin: 6px 0 0; padding: 0; }
.tk-reasons li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 3px 0; font-size: 13px; color: var(--muted); }
.tk-reasons li .tk-word { flex: none; }

/* ---- CSP ---- */
.tk-srcs { display: flex; flex-wrap: wrap; gap: 4px; }
.tk-src { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); overflow-wrap: anywhere; }
.tk-src.bad { color: var(--tk-bad); border-color: var(--tk-bad-line); }
.tk-src.warn { color: var(--tk-warn); border-color: var(--tk-warn-line); }
.tk-src.ok { color: var(--tk-ok); border-color: var(--tk-ok-line); }
.tk-flags { list-style: none; margin: 0; padding: 0; }
.tk-flags li { margin: 0 0 6px; font-size: 13px; }
.tk-flags li:last-child { margin-bottom: 0; }
.tk-flags .why { display: block; color: var(--muted); font-size: 12.5px; }

/* ---- email authentication ---- */
.tk-raw { display: block; font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 420px; }
.tk-tbl.cols-mail th:nth-child(1) { width: 12%; }
.tk-tbl.cols-mail th:nth-child(2) { width: 12%; }
.tk-tbl.cols-mail th:nth-child(3) { width: 38%; }
.tk-details { margin: 12px 0 14px; }
.tk-details details { border-top: 1px solid var(--line); padding: 8px 0; }
.tk-details details:last-child { border-bottom: 1px solid var(--line); }
.tk-details .tk-notes { margin-top: 4px; }
.tk-details .kv { margin-top: 8px; }

/* ---- SRI ---- */
.tk-tag { margin: 4px 0 14px; }
.tk-tag-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-tag-h h3 { margin: 0; }
.tk-tag pre.raw { margin-top: 8px; }
.tk-tag .note { margin: 8px 0 0; font-size: 13px; }
.tk-prose { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 0 0 10px; }

/* ---- URL inspector ---- */
.tk-tbl.cols-parts th:nth-child(1) { width: 14%; }
.tk-tbl.cols-parts th:nth-child(2) { width: 40%; }
.tk-tbl td .note { display: block; margin-top: 2px; overflow-wrap: anywhere; }

/* ---- output encoding helper ---- */
.tk-ctx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.tk-ctx { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-ctx-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tk-ctx-h h3 { margin: 0; }
.tk-ctx-sample { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.tk-ctx-out { margin: 0; max-height: 160px; overflow: auto; }
.tk-ctx-when { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.tk-wrong { border: 1px solid var(--tk-warn-line); background: var(--tk-warn-bg); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 12px; font-size: 14px; }
.tk-wrong h3 { margin-bottom: 6px; }
.tk-wrong p { margin: 6px 0; color: var(--text-2); }
.tk-wrong pre.raw { margin: 6px 0; }

/* ---- SQL linter ---- */
.tk-lint { list-style: none; margin: 12px 0 10px; padding: 0; counter-reset: lint; }
.tk-lint > li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--bg-2); min-width: 0; }
.tk-lint-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tk-lint-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-lint pre.raw { margin: 8px 0; }
.tk-lint-why { margin: 0 0 8px; font-size: 13.5px; color: var(--text-2); }
.tk-lint-fix { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.tk-lint-fix .lbl { font-size: 12px; color: var(--tk-ok); font-weight: 600; white-space: nowrap; }
.tk-lint-fix code { font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; min-width: 0; }

/* ---- build tools: fieldsets, checkboxes, snippets ---- */
.tk-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.tk-fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px 10px; margin: 0; min-width: 0; }
.tk-fieldset legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--text); }
.tk-fieldset > .tk-hint { margin: 0 0 6px; }
.tk-fieldset .field { margin: 6px 0 4px; }
.tk-check-box { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 14px; }
.tk-check-box input { margin: 4px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.tk-check-text { display: flex; flex-direction: column; gap: 1px; }
.tk-check-note { font-size: 12.5px; color: var(--muted); }
.tk-snip { margin: 0 0 14px; }
.tk-snip pre.raw { margin-top: 8px; max-height: 320px; overflow: auto; }
.tk-snip .note { margin: 8px 0 0; font-size: 13px; }
.tk-tag-acts { margin: 0; }

/* ---- CSP builder ---- */
.tk-cspb { display: flex; flex-direction: column; gap: 8px; }
.tk-cspb-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg-2); min-width: 0; }
.tk-cspb-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.tk-cspb-h .note { font-size: 12.5px; color: var(--muted); }
.tk-cspb-row .chip-row { margin: 6px 0 4px; }
.tk-cspb-row .chip.on.tk-chip-warn { background: var(--tk-warn); border-color: var(--tk-warn); color: #1f1a05; }
.tk-chip-note { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 4px 0 2px; font-size: 13px; color: var(--text-2); }
.tk-cspb-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 4px; }
.tk-cspb-add .field { margin: 0; }
.tk-cspb-add .field span { font-size: 12px; }
.tk-cspb-add input { width: 100%; }
.tk-src-x { display: inline-flex; align-items: center; gap: 6px; }
.tk-x { background: none; border: 1px solid transparent; color: var(--accent-2); font: inherit; font-size: 12px; cursor: pointer; padding: 0 4px; border-radius: 4px; }
.tk-x:hover { color: var(--text); background: rgba(255,255,255,.06); }
.tk-csp-live { margin: 2px 0 0; }
.tk-csp-preview { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }

/* ---- validation pattern tester, file type, tokens ---- */
.tk-sample { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.tk-hex { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; }
.tk-hex code { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; overflow-wrap: anywhere; }
.tk-hex-print { color: var(--muted); letter-spacing: .12em; }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .tk-side { display: none; }
  .tk-pick { display: flex; }
  .tk-head { flex-direction: column; }
  .tk-head-l { flex-basis: auto; width: 100%; }
  .tk-lesson { flex-basis: auto; width: 100%; min-width: 0; }
  .tk-split, .tk-panels, .tk-ctx-grid { grid-template-columns: 1fr; }
  .tk-sections { grid-template-columns: 1fr; }
  .tk-section.wide .tk-check li { grid-template-columns: 92px 1fr; }
  .tk-section.wide .tk-check .tk-word { grid-row: 1 / span 2; }
  .tk-section.wide .tk-check .detail { grid-column: 2; }
}
@media (max-width: 640px) {
  .tk-word { white-space: normal; }
  .tk-check li, .tk-section.wide .tk-check li { grid-template-columns: 1fr; gap: 3px; }
  .tk-check .tk-word, .tk-section.wide .tk-check .tk-word { grid-row: auto; }
  .tk-check .detail, .tk-section.wide .tk-check .detail { grid-column: auto; }
  .tk-rhead-r { width: 100%; }
  .tk-rhead-r .btn { width: 100%; justify-content: center; }
  .tk-pw-top { grid-template-columns: 1fr; gap: 12px; }
  .tk-digest { grid-template-columns: 1fr auto; }
  .tk-digest code { grid-column: 1 / -1; }
  .tk-runs li { grid-template-columns: 1fr; }
  .tk-runs li .btn { width: 100%; justify-content: center; }
  .tk-val { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .tk-raw { max-width: 100%; }
  .tk-lint-fix { grid-template-columns: 1fr auto; }
  .tk-lint-fix code { grid-column: 1 / -1; }
  .tk-tag-h .btn, .tk-ctx-h .btn { flex: none; }
  .tk-tag-acts { width: 100%; }
  .tk-tag-acts .btn { flex: 1 1 auto; justify-content: center; }
  .tk-results > .tk-out > .tk-result, .tk-results > .tk-out > .tk-error { padding: 16px; }
  .tk-verdict-word { font-size: 20px; }
  .tk-check-box { min-height: 44px; align-items: center; }
  .tk-check-box input { margin-top: 0; width: 20px; height: 20px; }
  .tk-x { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tk-cspb-add { grid-template-columns: 1fr; }
  .tk-cspb-add .btn { width: 100%; justify-content: center; }
  .tk-filter .field { max-width: none; }
  .tk-tbl.stack th.num, .tk-tbl.stack td.num { text-align: left; }
  .tk-tool { padding: 12px 14px; }
  /* tables collapse to stacked rows, one card per row */
  .tk-tbl.stack thead { display: none; }
  .tk-tbl.stack, .tk-tbl.stack tbody, .tk-tbl.stack tr, .tk-tbl.stack td { display: block; }
  .tk-tbl.stack tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: var(--bg-2); }
  .tk-tbl.stack td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline; }
  .tk-tbl.stack td.num { white-space: normal; font-family: var(--font); font-size: 13.5px; }
  .tk-tbl.stack td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
  .tk-tbl.stack td > .tk-word { justify-self: start; }
  .tk-tbl.stack td.num::before { font-family: var(--font); }
  .tk-tbl.stack td > .tk-mono, .tk-tbl.stack td.num { font-family: var(--mono); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-grade, .tk-loading-dot { animation: none; }
  .tk-score-fill, .tk-seg span { transition: none; }
}