/*
 * carot theme — Screen layout.
 * Sections Screen layout of docs/design-system/components/bundle.css.
 * Generated by scripts/pull-design-system.mjs on 2026-10-01. Do not edit: change
 * docs/design-system and re-run the script (feature CAROT_THEME D2).
 */
/* ---------- Screen layout ---------- */
.page-head{display:flex;flex-direction:column;gap:var(--space-2);margin-block:var(--space-4) var(--space-5)}
.page-head h1{font-family:var(--font-display);font-size:var(--text-heading-1);line-height:var(--leading-tight);font-weight:var(--weight-semibold)}
.page-head p{color:var(--muted-foreground);font-size:var(--text-small)}
.hero{padding-block:var(--space-6) var(--space-5)}
.hero__title{font-family:var(--font-display);font-size:var(--text-display);line-height:var(--leading-tight);font-weight:var(--weight-semibold);letter-spacing:-.01em;max-width:18ch}
.hero__lead{font-size:var(--text-lead);line-height:var(--leading-normal);color:var(--muted-foreground);margin-top:var(--space-3);max-width:34rem}
.hero .c-cats{margin-top:var(--space-5)}
.hero__review{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-3) var(--space-4);min-height:var(--touch-target);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);text-decoration:none;font-size:var(--text-small);line-height:var(--leading-snug)}
.hero__review:hover{border-color:var(--border-strong)}
.hero__review:hover span{text-decoration:underline}
.hero__review .icon{color:var(--brand-strong)}
.why{display:grid;gap:var(--space-5);list-style:none;padding:0}
.why li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3)}
.why .icon{grid-row:span 2;color:var(--brand-strong);width:24px;height:24px;margin-top:2px}
.why h3{font-family:var(--font-display);font-size:var(--text-heading-3);line-height:var(--leading-snug);font-weight:var(--weight-semibold)}
.why p{font-size:var(--text-small);line-height:var(--leading-normal);color:var(--muted-foreground)}
@container site (min-width:752px){.why{grid-template-columns:repeat(2,1fr)}}
@container site (min-width:1008px){.why{grid-template-columns:repeat(4,1fr)}}
.toolbar{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5)}
.filters{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);list-style:none;padding-block:2px;margin-block:0}
.filters::-webkit-scrollbar{display:none}
.filters a{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--touch-target);padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--card);font-size:var(--text-small);text-decoration:none;white-space:nowrap}
.filters a:hover{border-color:var(--foreground)}
.filters a[aria-current]{background:var(--brand-muted);border-color:var(--primary);color:var(--brand-strong);font-weight:var(--weight-semibold)}
.filters .n{font-size:var(--text-caption);color:var(--muted-foreground);font-weight:var(--weight-regular)}
.toolbar__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--text-small);color:var(--muted-foreground)}
.sort{position:relative}
.sort>summary{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--touch-target);padding:0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--card);color:var(--foreground);cursor:pointer;list-style:none}
.sort>summary::-webkit-details-marker{display:none}
.sort ul{position:absolute;right:0;top:calc(100% + var(--space-1));z-index:5;min-width:200px;list-style:none;padding:var(--space-1);background:var(--raised);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay)}
.sort ul a{display:flex;align-items:center;justify-content:space-between;min-height:var(--touch-target);padding:0 var(--space-3);border-radius:var(--radius-sm);text-decoration:none;color:var(--foreground)}
.sort ul a:hover{background:var(--surface)}
.sort ul a[aria-current]{font-weight:var(--weight-semibold)}
@container site (min-width:1008px){.toolbar{flex-direction:row;align-items:center;justify-content:space-between}.filters{margin:0;padding-inline:0;flex-wrap:wrap}.toolbar__count{display:none}}
.pdp{display:grid;gap:var(--space-5)}
.pdp__info{display:flex;flex-direction:column;gap:var(--space-4)}
.pdp__title{font-family:var(--font-display);font-size:var(--text-heading-1);line-height:var(--leading-tight);font-weight:var(--weight-semibold)}
.pdp__flags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pdp__body{display:grid;gap:var(--section-gap);margin-top:var(--section-gap)}
.pdp-page{padding-bottom:88px}
@container site (min-width:1008px){.pdp{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-7);align-items:start}.pdp__info{position:sticky;top:96px}.pdp-page{padding-bottom:0}}
.spec{width:100%;border-collapse:collapse;font-size:var(--text-small);max-width:var(--measure-prose)}
.spec th,.spec td{text-align:left;padding:var(--space-2) 0;border-bottom:1px solid var(--border);vertical-align:top}
.spec th{width:40%;font-weight:var(--weight-regular);color:var(--muted-foreground);padding-right:var(--space-3)}
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.article__head{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--measure-prose);margin-top:var(--space-4)}
.article__title{font-family:var(--font-display);font-size:var(--text-heading-1);line-height:var(--leading-tight);font-weight:var(--weight-semibold)}
.article__meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);font-size:var(--text-small);color:var(--muted-foreground)}
.article__cover{border-radius:var(--radius-lg);overflow:hidden;margin-inline:calc(-1 * var(--gutter))}
.article__side{display:none}
@container site (min-width:752px){.article__cover{margin-inline:0}}
@container site (min-width:1008px){
  .article{grid-template-columns:minmax(0,1fr) minmax(0,var(--measure-prose)) minmax(280px,1fr);column-gap:var(--space-6)}
  .article>.article__main{grid-column:2}
  .article__side{display:block;grid-column:3;grid-row:1/span 3}
  .article__side-inner{position:sticky;top:96px;display:grid;gap:var(--space-5)}
  .article__main .c-toc--inline{display:none}
}
.results__group+.results__group{margin-top:var(--space-7)}
.results__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.results__head h2{font-family:var(--font-display);font-size:var(--text-heading-3);font-weight:var(--weight-semibold)}
.results__count{font-size:var(--text-small);color:var(--muted-foreground)}
.mark{background:var(--brand-muted);color:inherit;border-radius:2px;padding:0 2px}