/* HomePod mini file — buyer's notes laid out like a spec sheet: paper ground, hairline rules, one steel-blue accent. */
:root {
  --bg: #f4f1ea;          /* page paper */
  --surface: #fffdf8;     /* reading surface */
  --text: #1c1b19;
  --muted: #5a5750;
  --border: #d9d3c6;
  --rule: #1c1b19;
  --accent: #0e5a86;      /* links, active controls */
  --accent-soft: #e3edf3;
  --warn: #7a4300;        /* text on warn-soft */
  --warn-soft: #fbefd9;
  --agree: #14604a;
  --focus: #b45309;
  --container: 72rem;
  --reading: 44rem;
  --gap: 1rem;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.5rem; --s7: 4rem;
  --radius: 4px;
  --font: "Noto Sans Thai", "Sarabun", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.8 var(--font); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--s4); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -4rem; background: var(--text); color: #fff; padding: var(--s3) var(--s4); z-index: 10; }
.skip:focus { top: var(--s2); }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .92em; }
.note { color: var(--muted); font-size: .94rem; margin: var(--s2) 0; line-height: 1.65; }
.meta { color: var(--muted); font-size: .94rem; display: block; }
.tag { margin: 0 0 var(--s1); color: var(--muted); font-size: .9rem; line-height: 1.5; }
.label { margin: 0 0 var(--s3); font-size: .95rem; color: var(--accent); font-weight: 600; }

h1, h2, h3 { line-height: 1.35; font-weight: 600; margin: 0; }
h1 { font-size: clamp(1.65rem, 1.1rem + 2.4vw, 2.6rem); letter-spacing: -.005em; }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.12rem; }

/* header / footer */
.top { background: var(--surface); border-bottom: 2px solid var(--rule); }
.top__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s5); }
.brand { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.menu a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s1); color: var(--text); text-decoration: none; font-size: .98rem; border-bottom: 3px solid transparent; }
.menu a:hover { border-bottom-color: var(--border); }
.menu a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }
main { padding-bottom: var(--s7); }
.foot { background: var(--surface); border-top: 1px solid var(--border); padding: var(--s5) 0; color: var(--muted); font-size: .94rem; line-height: 1.7; }
.foot p { margin: var(--s2) 0; max-width: var(--reading); }
.foot__name { font-weight: 600; color: var(--text); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__nav a[aria-current="page"] { font-weight: 600; color: var(--text); }

.crumbs { padding: var(--s3) 0 0; font-size: .92rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--muted); margin-right: var(--s2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs [aria-current] { color: var(--muted); }

/* blocks */
.block { margin-top: var(--s6); }
.block > h2 { padding-top: var(--s3); border-top: 2px solid var(--rule); margin-bottom: var(--s3); }
.block--narrow { max-width: var(--reading); }
.more { margin-top: var(--s5); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s5); background: var(--accent); color: #fff; border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.btn:hover { background: #0a4766; }
.pagehead { padding: var(--s5) 0 var(--s2); max-width: var(--reading); }
.pagehead h1 { margin-top: var(--s2); }
.pagehead p { margin: var(--s3) 0 0; }

/* hub intro: text column + spec sheet */
.intro { display: grid; gap: var(--s5); padding-top: var(--s5); }
.intro__main { max-width: var(--reading); }
.intro__main h1 { margin-bottom: var(--s3); }
.tagline { font-size: 1.15rem; color: var(--muted); margin: 0 0 var(--s4); line-height: 1.65; }
.intro__main > p:not(.label):not(.tagline) { margin: var(--s3) 0; }
.jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); text-decoration: none; font-size: .96rem; }
.jump a:hover { border-color: var(--accent); }
.spec { background: var(--surface); border: 1px solid var(--rule); border-top-width: 4px; padding: var(--s4); align-self: start; }
.spec h2 { font-size: 1.15rem; }
.spec dl { margin: var(--s3) 0 0; }
.spec dl > div { display: grid; gap: 0; padding: var(--s3) 0; border-top: 1px solid var(--border); }
.spec dt { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.spec dd { margin: 0; font-weight: 600; line-height: 1.55; }
.spec .refs { font-weight: 400; margin: var(--s1) 0 0; }
.swatch-h { margin: var(--s4) 0 var(--s2); font-size: .9rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: var(--s3); }
.swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .94rem; }
.swatches li { display: inline-flex; align-items: center; gap: var(--s2); }
.sw { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .35); display: inline-block; }
.sw--green { background: #6a9a78; } .sw--pink { background: #e6a9b8; } .sw--blue { background: #5578a8; }
.sw--midnight { background: #2a2e39; } .sw--white { background: #f6f6f3; }

/* start here */
.start { list-style: none; margin: 0; padding: 0; }
.start li { display: grid; gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--border); }
.start__for { margin: 0; font-weight: 600; line-height: 1.5; }
.start__clip { margin: 0; font-weight: 600; font-size: 1.08rem; line-height: 1.5; }
.start__why { margin: var(--s2) 0 0; max-width: var(--reading); }
.newlist { list-style: none; margin: 0; padding: 0; }
.newlist li { padding: var(--s3) 0; border-top: 1px solid var(--border); }

/* clip sheet */
.tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3) var(--s4); margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); }
.tools[hidden] { display: none; }
.tools label { display: grid; gap: var(--s1); font-size: .9rem; color: var(--muted); }
.tools select { min-height: 44px; padding: 0 var(--s3); font: inherit; font-size: 1rem; color: var(--text); background: #fff; border: 1px solid #8d887c; border-radius: var(--radius); }
.tools .note { margin: 0; align-self: center; }
.sheet { list-style: none; margin: var(--s3) 0 0; padding: 0; border-top: 2px solid var(--rule); }
.sheet .row[hidden] { display: none; }
.row { display: grid; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.row__img { display: block; aspect-ratio: 16 / 9; background: #d9d3c6; border-radius: var(--radius); overflow: hidden; }
.row__img img { width: 100%; height: 100%; object-fit: cover; }
.row__title { font-size: 1.1rem; margin: 0 0 var(--s1); }
.row__title a { color: var(--text); text-decoration: none; }
.row__title a:hover { color: var(--accent); text-decoration: underline; }
.row__verdict { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.7; }
.row__nums { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); font-size: .92rem; }
.row__nums dt { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.row__nums dd { margin: 0; line-height: 1.5; }
.sheet--compact .row__verdict { display: none; }

/* agree / differ */
.duo { display: grid; gap: var(--s5); }
.duo__col { background: var(--surface); border: 1px solid var(--border); padding: var(--s4); }
.duo__col h3 { padding-bottom: var(--s2); border-bottom: 3px solid var(--agree); }
.duo__col--differ h3 { border-bottom-color: var(--warn); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.ledger li:last-child { border-bottom: 0; }
.ledger p { margin: 0; }
.refs { margin: var(--s1) 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* numbers */
.trio { display: grid; gap: var(--s5); }
.trio h3 { margin-bottom: var(--s2); }
.rank, .timeline { list-style: none; margin: 0; padding: 0; }
.rank li, .timeline li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--border); }
.rank a { display: inline-flex; align-items: center; min-height: 44px; }
.tl-names a { display: inline-block; padding: .35rem 0; }
.timeline li { display: grid; grid-template-columns: 1fr auto; }
.timeline .tl-names { grid-column: 1 / -1; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.chlist { list-style: none; margin: 0; padding: 0; columns: 1; }
.chlist li { break-inside: avoid; padding: var(--s2) 0; border-top: 1px solid var(--border); }
.chlist a { display: inline-flex; align-items: center; min-height: 44px; }

/* faq */
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; padding: var(--s3) 0; min-height: 44px; font-weight: 600; line-height: 1.6; }
.faq__a { padding: 0 0 var(--s3); }
.faq__a p { margin: 0; }

/* video page */
.clip__head { padding: var(--s3) 0 var(--s2); max-width: 52rem; }
.clip__head h1 { margin: var(--s1) 0 var(--s2); }
.orig { margin: 0 0 var(--s3); color: var(--muted); font-size: .95rem; line-height: 1.6; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.facts dt { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.facts dd { margin: 0; line-height: 1.5; }
.lede { font-size: 1.2rem; line-height: 1.75; max-width: var(--reading); margin: var(--s4) 0; }
.player { position: relative; aspect-ratio: 16 / 9; max-width: 56rem; background: #111; border-radius: var(--radius); overflow: hidden; margin: var(--s4) 0 var(--s5); }
.player__link, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.player img { width: 100%; height: 100%; object-fit: cover; }
.player__btn { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; border-radius: 50%; background: rgba(255, 255, 255, .95); border: 2px solid #111; }
.player__btn::after { content: ""; position: absolute; left: 1.75rem; top: 1.25rem; border-style: solid; border-width: .95rem 0 .95rem 1.5rem; border-color: transparent transparent transparent #111; }
.player__link:hover .player__btn { background: #fff; transform: scale(1.05); transition: transform .12s; }
.clip__grid { display: grid; gap: var(--s5); }
.clip__main { min-width: 0; max-width: var(--reading); }
.take { background: var(--surface); border: 1px solid var(--rule); border-left-width: 5px; padding: var(--s4); }
.take h2 { font-size: 1.15rem; }
.take ul { margin: var(--s3) 0 0; padding-left: 1.2rem; }
.take li { margin: var(--s2) 0; }
.verdict { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); background: var(--accent-soft); line-height: 1.7; }
.verdict__k { display: block; font-size: .86rem; color: var(--muted); }
.srcnote { margin: var(--s3) 0 var(--s4); padding: var(--s2) var(--s3); border: 1px solid var(--border); font-size: .94rem; line-height: 1.65; }
.srcnote__k { display: block; font-size: .84rem; color: var(--muted); }
.srcnote--warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.srcnote--warn .srcnote__k { color: var(--warn); }
.toc { margin: var(--s4) 0; padding: var(--s3) var(--s4); border: 1px solid var(--border); background: var(--surface); }
.toc__h { margin: 0 0 var(--s1); font-weight: 600; font-size: .94rem; }
.toc ol { margin: 0; padding-left: 1.3rem; }
.toc a { display: inline-block; padding: .3rem 0; }
.prose h2 { margin: var(--s5) 0 var(--s2); }
.prose h3 { margin: var(--s5) 0 var(--s2); scroll-margin-top: var(--s4); }
.prose p { margin: var(--s3) 0; }
.prose--page { max-width: var(--reading); }
.prose--page h2 { font-size: 1.3rem; margin-top: var(--s5); }
.prose ul { padding-left: 1.3rem; }
.prose li { margin: var(--s2) 0; }
.clip__main section + section { margin-top: var(--s5); }
.clip__main section > h2 { font-size: 1.4rem; margin-bottom: var(--s2); }
.clip__side { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--border); padding: var(--s4); }
.panel h2 { font-size: 1.1rem; margin-bottom: var(--s2); }
.panel p { margin: var(--s2) 0; font-size: .96rem; line-height: 1.7; }
.times { list-style: none; margin: 0; padding: 0; }
.times a { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s3); align-items: start; min-height: 44px; padding: var(--s2) 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); line-height: 1.55; }
.times li:first-child a { border-top: 0; }
.times a:hover span:last-child { text-decoration: underline; color: var(--accent); }
.times .n { color: var(--accent); font-weight: 600; }
.kv { margin: 0; }
.kv > div { padding: var(--s2) 0; border-top: 1px solid var(--border); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.kv dd { margin: 0; font-weight: 600; line-height: 1.55; }
.reslist { list-style: none; margin: 0; padding: 0; }
.reslist li { padding: var(--s2) 0; border-top: 1px solid var(--border); line-height: 1.6; }
.reslist li:first-child { border-top: 0; }
.reslist .url { display: block; color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; word-break: break-all; }
.reslist--full .refs { display: block; }
.chip { display: inline-block; padding: 0 var(--s2); border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn); font-size: .82rem; line-height: 1.6; border-radius: var(--radius); }
.empty { padding: var(--s4); background: var(--surface); border: 1px dashed var(--border); max-width: var(--reading); }

/* wider screens */
@media (min-width: 40rem) {
  .row { grid-template-columns: 11rem 1fr; }
  .row__nums { grid-column: 2; grid-template-columns: repeat(4, auto); justify-content: start; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio > div:last-child { grid-column: 1 / -1; }
  .duo { grid-template-columns: 1fr 1fr; }
  .chlist { columns: 2; column-gap: var(--s5); }
  .start li { grid-template-columns: 14rem 1fr; gap: var(--s5); }
}
@media (min-width: 62rem) {
  .intro { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s6); }
  .row { grid-template-columns: 13rem 1fr 13rem; align-items: start; }
  .row__nums { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: 1fr 1fr 1.2fr; }
  .trio > div:last-child { grid-column: auto; }
  .clip__grid { grid-template-columns: minmax(0, var(--reading)) minmax(0, 22rem); gap: var(--s6); align-items: start; }
  .clip__side { position: sticky; top: var(--s4); }
  .chlist { columns: 3; }
  .sheet--compact .row { grid-template-columns: 10rem 1fr 13rem; }
}