/* Design tokens + shell: header, footer, buttons, cards, tables, drawer, motion. */

@font-face {
  font-family: 'Mulish Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('/assets/mulish-latin-wght-normal.woff2?v=8d1d33d6') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('/assets/mulish-latin-ext-wght-normal.woff2?v=e1ccc857') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --brand: #1464f4;
  --brand-strong: #0b4fd1;
  --ink: #141414;
  --ink-2: #4a4f57;
  --line: #e3e8ef;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --ai: #0e8c88;
  --provenance: #5b6472;
  --danger: #d6001c;
  --r-card: 16px;
  --r-media: 20px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06), 0 8px 24px rgba(20, 20, 20, 0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The Jakarta site: its own neutral surfaces and softer corners; VinFast blue stays the same. */
html[data-site="jakarta"] {
  --surface-2: #f1f7f6; /* teal-tinted panels instead of blue-grey #f4f6fa */
  --line: #dde8e6;
  --r-card: 20px; /* softer cards than the default 16px */
  --r-media: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* A class rule with a plain selector beats the UA's [hidden] rule in the
   cascade the moment it matches on specificity alone — this keeps [hidden]
   winning no matter what else targets the same element (table.js/site.js
   toggle `hidden`, never a class, for exactly this reason). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Mulish Variable', 'Mulish', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.tabular { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
h1 { font-weight: 800; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.1; }
h2 { font-weight: 750; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2; }
h3 { font-size: 1.25rem; line-height: 1.3; }
small, .small { font-size: 0.875rem; line-height: 1.5; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 769px) {
  .container { padding-inline: 32px; }
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  z-index: 100;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 8px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-strong); }
.btn--secondary { background: var(--surface-2); color: var(--ink); }
.btn--secondary:hover { background: var(--line); }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--outline:hover { background: var(--surface-2); }
.btn--block { width: 100%; }

/* Segmented control (2–4 options) */
.segmented {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.segmented__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  color: var(--ink-2);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.segmented__option[aria-pressed='true'] { background: var(--brand); color: #fff; }

/* The header language switch is a quieter control than a filter segmented —
   no black pill, just the active language reading in brand blue. */
.lang-switch { background: transparent; padding: 0; gap: 4px; }
.lang-switch .segmented__option { border: 1px solid transparent; }
.lang-switch .segmented__option[aria-pressed='true'] {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--line);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  /* No backdrop-filter: measured 10fps during scroll on the live host with it,
     59fps without — a blurred sticky header isn't worth a 6x scroll-jank cost. */
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.site-header__brand img { height: 24px; width: auto; }
.site-header__tag {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-2);
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
/* Below 1024px there is less room next to the logo — shrink the tag rather
   than let it wrap awkwardly or clip against the neighbouring flex item. */
@media (max-width: 1024px) {
  .site-header__tag { font-size: 0.75rem; padding-left: 8px; }
}
.site-header__nav { display: none; align-items: center; gap: 28px; }
.nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}
.nav-link[aria-current='page'] { color: var(--brand); border-bottom-color: var(--brand); }
.site-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.site-header__whatsapp { padding: 10px 16px; }
.menu-toggle, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
}
/* Below 1024px there is no room for the full-text WhatsApp pill or a full-size
   language switch next to the menu button — icon-only circle (44x44, name
   still read from aria-label) and a compact switch keep the header inside the
   viewport (measured: the text button alone overflowed 390px by 17px). */
@media (max-width: 1024px) {
  .site-header__actions .segmented { padding: 2px; }
  .site-header__actions .segmented__option { min-height: 28px; padding: 0 8px; font-size: 0.75rem; }
  .site-header__whatsapp {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  .site-header__whatsapp span { display: none; }
  /* Ctrl/⌘-K needs a real keyboard, which a phone doesn't have, and the
     drawer already carries its own "Cari" entry for mobile — one fewer icon
     competing for the header's already-tight space below 1024px. */
  .site-header__actions > .icon-btn[data-palette-open] { display: none; }
}
/* Phones up to 420px: the site tag ran under the language switch (measured:
   "Jakarta" 50px short at 320, still 2px short at 390) — a smaller logo and
   tighter gaps free ~64px so the tag always stays readable. */
@media (max-width: 420px) {
  .site-header__row { gap: 8px; padding-inline: 12px; }
  .site-header__brand { gap: 8px; }
  .site-header__brand img { height: 18px; }
  .site-header__tag { padding-left: 6px; }
  .site-header__actions { gap: 4px; }
}
/* 320px phones were still 16px short after the step above. */
@media (max-width: 359px) {
  .site-header__brand { gap: 6px; }
  .site-header__brand img { height: 14px; }
  .site-header__tag { font-size: 0.6875rem; }
}
@media (min-width: 1025px) {
  .site-header__nav { display: flex; }
  .menu-toggle { display: none; }
}
/* Same specificity as the compact rule above (.site-header__actions
   .segmented__option), placed after it so it wins on an actual touch device:
   padding grows the option's own bounding box to 44px tall (what a touch
   sweep measures), the matching negative margin keeps the header's own
   height and the two options' visual size unchanged. */
@media (pointer: coarse) {
  .site-header__actions .segmented__option,
  .lang-switch .segmented__option {
    min-height: 44px;
    min-width: 44px;
    padding-block: 8px;
    margin-block: -8px;
    margin-inline: -5px;
  }
}

/* Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
  z-index: 49;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--surface);
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
  z-index: 50;
  padding: 20px;
  overflow-y: auto;
}
html.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }
html.drawer-open .drawer { transform: translateX(0); }
html.drawer-open { overflow: hidden; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.drawer__nav .nav-link { padding: 12px 4px; border-bottom: 1px solid var(--line); min-height: 44px; }
.drawer__contacts { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.drawer__search-open { border: none; background: none; width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; }
@media (min-width: 1025px) {
  .drawer, .drawer-overlay { display: none; }
}

/* Ctrl-K palette: a centred modal, built lazily by palette.js on first open. */
.palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.4);
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-top: 12vh;
}
.palette-backdrop[hidden] { display: none; }
.palette-modal {
  width: min(640px, 92vw);
  max-height: 70vh;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.palette-input {
  height: 52px;
  border: none;
  border-bottom: 1px solid var(--line);
  padding-inline: 20px;
  font-size: 1.05rem;
  background: transparent;
}
.palette-input:focus { outline: none; }
.palette-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.palette-item, .palette-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  min-height: 44px;
  cursor: pointer;
}
.palette-item.is-active, .palette-item:hover { background: var(--surface-2); }
.palette-empty { color: var(--ink-2); cursor: default; }
.palette-item__type { height: 22px; padding: 0 10px; font-size: 0.75rem; flex-shrink: 0; }
html.palette-open { overflow: hidden; }

/* AI imagery — every AI-composed scene ships inside one of these, everywhere
   it's used (home hero, category banners, model ambience bands): a figure
   with a quiet round "i" button, bottom-right, so a visitor is never left
   thinking an AI scene is an official photo (P5 provenance) — a popover, not
   a permanent chip, once the reviewer flagged the old one as too loud (house
   law: the label itself is not optional, only how loud it reads). */
.ai-figure { position: relative; margin: 0; }
.ai-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-info-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ai-info-btn:hover { background: #fff; }
/* Same "grow the box, shift the offset to compensate" pattern as
   .compare-col__remove (compare.css) — a real 44px hit area on a coarse
   pointer without moving the button's own visual centre. */
@media (pointer: coarse) {
  .ai-info-btn { width: 44px; height: 44px; bottom: 4px; right: 4px; }
}
.ai-info-popover {
  position: absolute;
  bottom: 44px;
  right: 12px;
  z-index: 2;
  max-width: 220px;
  background: rgba(20, 20, 20, 0.9);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: var(--r-card);
}

/* Footer */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.8); padding-block: 48px 32px; }
.site-footer__grid { display: flex; flex-direction: column; gap: 32px; }
.site-footer__col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 12px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__tag { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.8rem; }
.site-footer__tag p { margin: 4px 0; }
@media (min-width: 900px) {
  .site-footer__grid { flex-direction: row; justify-content: space-between; }
  .site-footer__col { flex: 1; }
}

/* Copy-to-clipboard values */
.copy-value {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  text-align: left;
}
.copy-value[data-copied='true'] { color: var(--ai); }

/* Cards */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: 16px;
}

/* CSS-only orb, no image — the small always-on gradient identity mark for
   Vinz, shared wherever Vinz is namechecked (the chooser header, the home
   Vinz card). */
.vinz-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--ai), var(--brand), var(--ai));
  flex-shrink: 0;
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  transition: background 160ms var(--ease);
}
.chip:hover { background: var(--line); }

/* Provenance / source line — neutral, not --ai teal (reserved for AI surfaces). */
.source-line {
  font-size: 0.8rem;
  color: var(--provenance);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Contact band */
.contact-band {
  background: var(--surface-2);
  border-radius: var(--r-card);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.contact-band__contacts { display: flex; flex-wrap: wrap; gap: 20px; }

/* Data table kit (price list / dealers) */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.search-input-wrap { position: relative; flex: 1 1 240px; min-width: 200px; }
.search-input-wrap .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.search-input,
.select-input {
  /* Clears the sticky header (64px) when the phone keyboard's focus/scroll
     brings the field into view — a device sweep found both hidden under it. */
  scroll-margin-top: 96px;
}
.search-input {
  width: 100%;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  padding: 0 16px 0 42px;
  font-size: 0.95rem;
  background: var(--surface);
}
.select-input {
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  padding: 0 16px;
  font-size: 0.9rem;
  background: var(--surface);
}
.table-count { font-size: 0.875rem; color: var(--ink-2); margin-bottom: 12px; }
/* No overflow-x here: it would create an implicit scroll container and break
   the thead's position: sticky (the sticky ancestor becomes this box, not the
   page). Nothing needs horizontal scroll — narrow screens get stacked cards. */
.table-wrap { width: 100%; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  position: sticky;
  top: var(--header-h);
  background: var(--surface);
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  z-index: 5;
}
.data-table th[aria-sort] { cursor: pointer; user-select: none; }
.data-table td {
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table td.num, .data-table th.num { text-align: right; }
.data-table a.row-link { display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; }
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
@media (max-width: 640px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    margin-bottom: 12px;
    padding: 12px 16px;
    height: auto;
  }
  .data-table td { border: none; padding: 4px 0; height: auto; }
  .data-table td.num, .data-table th.num { text-align: left; }
  .data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    color: var(--ink-2);
    font-weight: 600;
  }
}

/* Sticky mobile CTA bar (model pages) */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -4px 16px rgba(20, 20, 20, 0.08);
  display: flex;
  gap: 10px;
  z-index: 30;
  transform: translateY(100%);
  transition: transform 200ms var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1; height: 48px; min-height: 48px; }
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Content sections shared by model / article / generic-page templates */
.content-section {
  display: grid;
  gap: 24px;
  padding-block: 32px;
  border-top: 1px solid var(--line);
}
/* A model page ships up to 105 images across its sections; skipping layout/
   paint for off-screen sections (restored the instant one scrolls near it) is
   what actually stops long tasks during scroll — but only sections BELOW the
   first two, which real content puts reliably past the fold at every measured
   width; the first two stay normally rendered so their real height is known
   from first paint, never a guessed placeholder (a 360x640 CLS of 0.465 was
   traced to this guess standing in for the first two sections' real height).
   The guess itself is grounded in the real content of every model page
   (`/tmp/hd-exec/measure-sections2.mjs`, median of sections at index >= 2):
   ~865px stacked single-column at 360px wide, ~486px in the two-column
   layout at >= 900px — still a guess for any one section, but a measured
   one, not an arbitrary round number. */
.content-section--defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 850px;
}
.content-text { max-width: 60ch; }
.content-media { display: grid; gap: 12px; }
.content-media img { border-radius: var(--r-media); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.content-media--single img { aspect-ratio: 16 / 10; }
.content-media--grid-2 { grid-template-columns: repeat(2, 1fr); }
.content-media--grid-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .content-section { grid-template-columns: 1fr 1fr; align-items: center; }
  .content-section--media-left { direction: rtl; }
  .content-section--media-left > * { direction: ltr; }
  .content-media--grid-3 { grid-template-columns: repeat(3, 1fr); }
  .content-section--defer { contain-intrinsic-size: auto 500px; }
}

/* Progressive enhancement: without JS (or before site.js runs), [data-animate]
   content is plain, visible content — only html.js (added by site.js) turns on
   the hidden-then-reveal-on-scroll behaviour. */
html.js [data-animate] { opacity: 0; transform: translateY(16px); transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
html.js [data-animate].is-visible { opacity: 1; transform: translateY(0); }
/* A 40ms stagger across a repeating group (a model-card grid) — server-stamped
   `data-animate-index` (0-7, capped: past a full grid row the extra wait stops
   paying off), never a runtime `.style.transitionDelay =` (blocked by this
   site's own `style-src 'self'` CSP, same reason no inline `style=` ships). */
html.js [data-animate-index='1'] { transition-delay: 40ms; }
html.js [data-animate-index='2'] { transition-delay: 80ms; }
html.js [data-animate-index='3'] { transition-delay: 120ms; }
html.js [data-animate-index='4'] { transition-delay: 160ms; }
html.js [data-animate-index='5'] { transition-delay: 200ms; }
html.js [data-animate-index='6'] { transition-delay: 240ms; }
html.js [data-animate-index='7'] { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-animate] { opacity: 1; transform: none; transition: none; }
  html.js [data-animate-index] { transition-delay: 0ms; }
}

/* Touch target floor: a real finger, not a mouse pointer, is doing the
   tapping — every interactive control reaches 44px on an actual touch
   device, without forcing every compact control (the header language
   switch, filter segments) taller on desktop where a pointer is precise. */
@media (pointer: coarse) {
  .chip,
  .segmented__option {
    min-height: 44px;
    padding-block: 10px;
  }
}