/* Desoul Review. Follows the system light/dark setting. System fonts only (full Vietnamese coverage, nothing to load).
   Only the DESOUL logo is brand; the rest is a plain index: rows, not boxes. */
:root {
  color-scheme: light dark;
  --bg: #fbfbf9; --surface: #ffffff; --sunk: #eceee9; --ink: #15181a; --muted: #586068; --line: #dfe2dc;
  --accent: #23603d; --accent-ink: #ffffff; --accent-tint: #e3efe6;
  --bad: #b42318; --bad-tint: #fbe9e7; --warn: #8f4a07; --warn-tint: #fcefd9;
  --logo-pad: transparent;
  --r: 16px; --r-sm: 10px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 16px; --tw: 96px;
  accent-color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1211; --surface: #181c1a; --sunk: #141816; --ink: #e9eeeb; --muted: #9ba49f; --line: #2a302d;
    --accent: #7ccf9a; --accent-ink: #0f1211; --accent-tint: #1d3326;
    --bad: #ff9a8f; --bad-tint: #3a1c19; --warn: #f5c07a; --warn-tint: #3a2a12;
    --logo-pad: #f4f5f2;  /* the logo's dark outline vanishes on a dark page; a light pad keeps it as drawn */
  }
}
@media (min-width: 720px) { :root { --gutter: 32px; --tw: 128px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; overflow-wrap: anywhere; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--sans); }
img { max-width: 100%; height: auto; }
search { display: block; }
a { color: var(--accent); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: 0; }
p, li { text-wrap: pretty; }
.num, time, code, pre { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quiet { color: var(--muted); }

/* frame */
.top, main { max-width: 1040px; margin-inline: auto; padding-inline: var(--gutter); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px 0; }
.brand { display: block; line-height: 0; background: var(--logo-pad); border-radius: 14px; padding: 4px 8px; margin-inline-start: -8px; }
.brand img { width: 104px; height: auto; }
@media (min-width: 720px) { .brand img { width: 112px; } }
.lang, .button, .clear {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .9375rem/1 var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.lang:hover, .clear:hover { border-color: var(--muted); }
.button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
main { padding-block: 4px 80px; }

.intro, .block > h2, .repo, .prose h1, .finding-card h3 { font-family: var(--serif); font-weight: 600; }
.intro { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); max-width: 48ch; margin-block: 8px 0; }
.block { margin-top: 20px; }
.block > h2 { font-size: 1.25rem; margin-bottom: 12px; }
.label { font: 650 .8125rem/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }

/* verdict + evidence */
.marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.verdict {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font: 650 .8125rem/1 var(--sans); white-space: nowrap; background: var(--sunk); color: var(--muted);
}
.verdict::before { font-weight: 800; }
.verdict[data-v="best-pick"] { background: var(--accent); color: var(--accent-ink); }
.verdict[data-v="best-pick"]::before { content: "★" / ""; }
.verdict[data-v="works"], .verdict[data-v="idea-adapted"] { background: var(--accent-tint); color: var(--accent); }
.verdict[data-v="works"]::before, .verdict[data-v="idea-adapted"]::before { content: "✓" / ""; }
.verdict[data-v="not-as-claimed"] { background: var(--bad-tint); color: var(--bad); }
.verdict[data-v="not-as-claimed"]::before { content: "≠" / ""; }
.verdict[data-v="risky"] { background: var(--warn-tint); color: var(--warn); }
.verdict[data-v="risky"]::before { content: "!" / ""; }
/* most rows are "Not tested yet": plain text, no pill, so the rows that are tested stand out */
.verdict[data-v="not-tested-yet"] { background: none; padding: 0; min-height: 0; font-weight: 500; }
.evidence { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.bars i { width: 4px; border-radius: 2px; background: var(--line); }
.bars i:nth-child(1) { height: 6px; } .bars i:nth-child(2) { height: 9px; } .bars i:nth-child(3) { height: 12px; } .bars i:nth-child(4) { height: 15px; }
.bars[data-n="1"] i:nth-child(-n+1), .bars[data-n="2"] i:nth-child(-n+2),
.bars[data-n="3"] i:nth-child(-n+3), .bars[data-n="4"] i:nth-child(-n+4) { background: var(--ink); }
.marks.big .verdict { min-height: 34px; font-size: .9375rem; padding: 0 14px; }
.marks.big .verdict[data-v="not-tested-yet"] { min-height: 0; padding: 0; }
.marks.big .evidence { font-size: .9375rem; }

/* findings strip (only rendered once a finding exists) */
.cards, .findings, .plain, .sources, .jobs { list-style: none; margin: 0; padding: 0; }
.findings {
  display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: min(80%, 320px); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-snap-type: x mandatory;
}
.finding-card {
  position: relative; height: 100%; padding: 18px 20px; border-radius: var(--r); background: var(--accent-tint);
  display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start;
}
.finding-card h3 { font-size: 1.125rem; }
.finding-card time { font-size: .8125rem; color: var(--muted); }

/* thumbnails: wide crop (2:1) so text-heavy previews keep their words; avatars sit on a blurred copy of themselves */
.thumb { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; }
.fallback { position: relative; display: grid; place-items: center; overflow: clip; --face: 36px; }
.fallback .blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.4); scale: 1.5; opacity: .6; }
.fallback .face { position: relative; width: var(--face); height: var(--face); border-radius: calc(var(--face) / 4); box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
.fallback .initial { font: 700 1.5rem/1 var(--serif); color: var(--muted); }
@media (min-width: 720px) { .fallback { --face: 44px; } }

/* tools: finder on top, then one-column index rows */
[aria-labelledby="tools-h"] > search { padding: 12px 16px 4px; background: var(--surface); border-radius: var(--r); margin-bottom: 12px; border: 1px solid var(--line); }
.cards { display: block; border-top: 1px solid var(--line); }
.cards > li { border-bottom: 1px solid var(--line); }
.cards > li:nth-child(n+13) { content-visibility: auto; contain-intrinsic-size: auto 132px; }
@media (max-width: 719px) { .cards > li:nth-child(n+13) { contain-intrinsic-size: auto 190px; } }  /* measured row heights: 130-134 wide, 180-236 narrow */
.card {
  position: relative; container-type: inline-size; display: grid; grid-template-columns: var(--tw) minmax(0, 1fr); column-gap: 16px; row-gap: 4px;
  padding: 14px 0; align-content: start;
}
.card > :not(.thumb) { grid-column: 2; }
.card > .thumb { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.card-link { color: var(--ink); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible), .finding-card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.card:has(.card-link:hover) h3 { text-decoration: underline; text-underline-offset: .2em; }
.card header { display: flex; flex-direction: column; gap: 6px; }
.card h3 { font: 600 1.0625rem/1.3 var(--serif); }
.owner { color: var(--muted); font-weight: 450; }
.desc { margin: 0; color: var(--muted); font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card footer { display: flex; flex-direction: column; gap: 4px; font-size: .8125rem; color: var(--muted); }
.card .jobs { display: flex; flex-wrap: wrap; }
.card .jobs li + li::before { content: "·" / ""; margin-inline: 6px; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
@container (min-width: 640px) {
  .card header { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
  .card footer { flex-direction: row; justify-content: space-between; gap: 16px; }
}

/* finder */
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.field.grow { flex: 3 1 240px; }
/* the placeholder and the select's first option already say what each control is: labels stay for screen readers only */
.field label, legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
input[type="search"], select {
  font: inherit; font-size: max(1rem, 1em); min-height: 44px; width: 100%; padding: 0 14px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
input[type="search"]:hover, select:hover { border-color: var(--muted); }
input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
fieldset { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; position: relative; }
/* job chips: one scrolling row at every width; the right edge fades to show there is more */
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px;
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); scroll-padding-inline: 2px;
}
.chip {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-weight: 550; font-size: .9375rem;
  white-space: nowrap; cursor: pointer;
}
.chip:hover { border-color: var(--muted); }
.chip input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.chip::before {
  content: "" / ""; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 5px; flex: none;
  display: grid; place-items: center; font: 800 .6875rem/1 var(--sans); color: var(--accent-ink);
}
.chip .num { font-size: .8125rem; color: var(--muted); }
.chip:has(:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.chip:has(:checked)::before { content: "✓" / ""; background: var(--accent); border-color: var(--accent); }
.chip:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.status { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; margin: 0; color: var(--muted); font-size: .9375rem; }
.status .key[open] { flex: 1 1 100%; order: 3; }
.status b { font-weight: 650; color: var(--ink); }
.status .clear { min-height: 36px; padding: 0 14px; }

.key { margin: 0; }
.key summary { cursor: pointer; color: var(--accent); font-size: .9375rem; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.key dl { margin: 4px 0 8px; background: var(--bg); display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.key dd { margin: 4px 0 0; color: var(--muted); }
.key .evidence { color: var(--ink); font-weight: 600; }

.empty { margin-top: 16px; padding: 32px 16px; text-align: center; background: var(--surface); border-radius: var(--r); }
.empty p { max-width: 36ch; margin: 12px auto 16px; }

/* tool page */
.back { margin: 8px 0 8px; font-size: .9375rem; }
.back a { display: inline-flex; align-items: center; min-height: 44px; }
.hero { margin: 0 0 20px; max-width: 760px; }
.hero .thumb { border-radius: var(--r); }
.hero .fallback { --face: 96px; }
.hero .fallback .blur { filter: blur(32px) saturate(1.4); }
.hero .fallback .initial { font-size: 3rem; }
.repo { font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.5rem); line-height: 1.15; }
.lead { font-size: 1.1875rem; max-width: 60ch; margin: 12px 0 24px; color: var(--muted); }
.panel { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.panel p { margin: 0 0 8px; } .panel p:last-child { margin-bottom: 0; }
.verdict-panel { max-width: 760px; }
.verdict-panel .marks { margin-bottom: 16px; }
.fit { display: grid; gap: 16px; margin-top: 16px; max-width: 760px; }
@media (min-width: 640px) { .fit { grid-template-columns: 1fr 1fr; } }
.panel img + .label { margin-top: 16px; }
.good .label::before { content: "✓ " / ""; color: var(--accent); }
.bad .label::before { content: "✕ " / ""; color: var(--bad); }
.sources { display: grid; gap: 16px; max-width: 760px; }
.sources figure { margin: 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.sources blockquote { margin: 0 0 8px; font: 600 1.0625rem/1.45 var(--sans); }
.sources figcaption { font-size: .875rem; color: var(--muted); }
.facts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 20px; margin: 20px 0; max-width: 760px; }
.facts-list dt { font: 650 .8125rem/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.facts-list dd { margin: 2px 0 0; }
.facts-list .lic { grid-column: 1 / -1; order: 9; }
.facts-list dd small { display: block; max-width: 60ch; margin-top: 2px; font-size: .875rem; color: var(--muted); }
.jobs:not(.card .jobs) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.jobs:not(.card .jobs) a, .tags li {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: .9375rem; white-space: nowrap; text-decoration: none;
}
.tags li { min-height: 32px; font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.plain li { padding-block: 4px; }
.plain a { display: inline-flex; min-height: 44px; align-items: center; }

/* finding */
.prose { max-width: 68ch; }
.prose h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
.prose > time { display: block; margin: 8px 0 20px; color: var(--muted); font-size: .9375rem; }
.prose h2 { font: 600 1.375rem/1.2 var(--serif); margin: 28px 0 8px; }
.prose p, .prose li { line-height: 1.7; }
.prose code { font-size: .9em; background: var(--sunk); padding: 1px 5px; border-radius: 4px; }
.prose pre { overflow-x: auto; padding: 16px; background: var(--sunk); border-radius: var(--r-sm); overflow-wrap: normal; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 16px 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--line); color: var(--muted); }

/* touch: every control reaches 44px (the desktop chips are 38px to keep rows above the fold) */
@media (pointer: coarse) { .chip, .status .clear, .key summary { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .panel, .finding-card, .verdict, .thumb { border: 1px solid CanvasText; } }