/* ============================================================
   Mobile Parts Finder — Feature components
   ============================================================ */

/* ---------------- section heading ---------------- */
.sec{ margin-top:26px; }
@media (min-width:768px){ .sec{ margin-top:34px; } }
.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.sec__title{ display:flex; align-items:center; gap:9px; }
.sec__title h2{ font-size:clamp(18px,3vw,23px); }
.sec__count{
  font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--ink-3);
  background:var(--surface-3); padding:3px 8px; border-radius:var(--r-xs);
}

/* ============================================================
   WORKSPACE — full-width 3-panel desktop dashboard
   Below --ws-bp the exact same markup collapses to the original
   single-column page: side panels hide and move into the filter
   sheet, the horizontal category row and mobile toolbar return.
   ============================================================ */
.ws{ display:block; }
.ws__body{ display:block; }
.ws__left,.ws__right{ display:none; }
.ws__center{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.ws-only{ display:none; }

@media (min-width:1180px){
  .main.is-ws{ padding-bottom:0; }

  /* the page itself no longer scrolls — the centre column does */
  .ws{
    height:calc(100dvh - var(--topbar-h));
    display:flex; flex-direction:column;
  }

  /* the hero band is gone on desktop — its search, stats and recent searches
     now live in the compact application header (recents in the dropdown) */
  .ws__band{ display:none; }

  .ws__body{
    flex:1 1 auto; min-height:0;
    display:grid; grid-template-columns:288px minmax(0,1fr) 244px;
  }
  .ws__left,.ws__right{
    display:block; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    background:var(--surface); padding:14px 13px 24px;
  }
  .ws__left{ border-right:1px solid var(--line); }
  .ws__right{ border-left:1px solid var(--line); }
  .ws__center{
    min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    max-width:none; margin:0; padding:0 20px 36px; background:var(--paper);
  }
  .ws__left::-webkit-scrollbar,
  .ws__right::-webkit-scrollbar,
  .ws__center::-webkit-scrollbar{ width:9px; }
  .ws__left::-webkit-scrollbar-thumb,
  .ws__right::-webkit-scrollbar-thumb,
  .ws__center::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

  /* the panels replace these on desktop */
  .ws__center .fbar{ display:none; }
  .ws-only{ display:block; }
  .ws-tools .field{ width:230px; }

  /* flatten the head wrappers so the toolbar's containing block is the
     scroll container itself — otherwise position:sticky can only travel
     as far as its short parent box and scrolls away with it */
  .ws__center .ws__head,
  .ws__center .ws__head .sec{ display:contents; }
  .ws__center .sec__head{
    position:sticky; top:0; z-index:6; margin:0 0 12px;
    padding:14px 0 10px; background:var(--paper);
    box-shadow:0 10px 12px -12px rgba(10,21,18,.35);
  }
  /* card columns follow the real column width, not the viewport width */
  .ws__center .gridcards{ grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); }
}

@media (min-width:1560px){
  .ws__body{ grid-template-columns:322px minmax(0,1fr) 274px; }
  .ws__left,.ws__right{ padding:18px 16px 28px; }
  .ws__center{ padding:0 26px 40px; }
  .ws__band .shell{ padding-inline:26px; }
}

/* ---------------- panel shell (used by both sidebars and the sheet) ------- */
.panel__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; min-height:24px; }
.panel__n{ font-family:var(--f-mono); font-size:11px; color:var(--ink-3); background:var(--surface-3); padding:2px 7px; border-radius:6px; }
.panel__clear{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--ink-3); padding:3px 7px; border-radius:6px; }
.panel__clear:hover{ background:var(--surface-3); color:var(--ink); }
.panel__clear svg{ width:12px; height:12px; }
.panel + .panel{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); }

/* --------- LEFT: image-first category gallery, 3 up ----------------------- */
.ctiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
@media (max-width:359px){ .ctiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ctile{
  --c:var(--teal-500);
  position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:10px 5px 9px; text-align:center; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), border-color .16s, background .16s, box-shadow .16s;
}
.ctile:hover{ transform:translateY(-2px); border-color:var(--c); box-shadow:var(--sh-1); }
/* ---- product renders (one system: category tiles + group cards) ---------- */
.pthumb{
  display:grid; place-items:center; flex:none; overflow:hidden;
  background:var(--pthumb-bg); border:1px solid var(--pthumb-line); border-radius:10px;
  box-shadow:inset 0 -6px 12px -8px rgba(10,21,18,.18);
}
.pimg{ width:100%; height:100%; display:block; object-fit:contain; }
.pthumb--tile{ width:100%; aspect-ratio:1/1; max-width:56px; height:auto; border-radius:9px; }
.pthumb--plate{ width:58px; height:58px; border-radius:12px; }
.ctile__foot{ display:block; min-width:0; width:100%; }
.ctile__name{ display:block; font-size:10.5px; font-weight:700; letter-spacing:-.008em; line-height:1.2; }
.ctile__n{ display:block; font-size:9px; font-weight:600; color:var(--ink-3); margin-top:2px; font-variant-numeric:tabular-nums; }
.ctile__tick{ position:absolute; top:6px; right:6px; color:var(--c); }
.ctile__tick svg{ width:13px; height:13px; }

/* the catch-all category gets a full-width horizontal row of its own */
.ctile--wide{
  grid-column:1 / -1; flex-direction:row; align-items:center; text-align:left;
  gap:11px; padding:8px 11px;
}
.ctile--wide .pthumb--tile{ width:42px; max-width:42px; flex:none; }
.ctile--wide .ctile__foot{ flex:1; }
.ctile--wide .ctile__name{ font-size:12px; }
.ctile--wide .ctile__n{ font-size:10px; }
.ctile--wide .ctile__tick{ top:50%; right:10px; transform:translateY(-50%); }
.ctile.is-on{
  background:color-mix(in srgb,var(--c) 11%,var(--surface));
  border-color:var(--c); box-shadow:0 0 0 1px var(--c) inset;
}
.ctile.is-on .ctile__name{ color:color-mix(in srgb,var(--c) 72%,var(--ink)); }
.ctile.is-on .pthumb{ border-color:color-mix(in srgb,var(--c) 55%,var(--line)); }

/* ---------------- RIGHT: brand explorer ---------------------------------- */
.brandsearch{ margin-bottom:9px; }
.brandsearch .input{ height:34px; font-size:13px; padding-left:33px; padding-right:30px; }
.brandsearch .field svg{ left:10px; width:15px; height:15px; }
.field__clear{
  position:absolute; right:6px; width:22px; height:22px; border-radius:99px;
  display:grid; place-items:center; background:var(--surface-3); color:var(--ink-3);
}
.field__clear:hover{ background:var(--teal-050); color:var(--teal-700); }
.field__clear svg{ position:static; width:12px; height:12px; pointer-events:none; }
.brandempty{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:22px 10px; color:var(--ink-3); font-size:12.5px; font-weight:600;
}
.brandempty svg{ width:22px; height:22px; opacity:.7; }
.brow--empty{ opacity:.52; }
.brow--empty:hover{ opacity:.85; }

.brows{ display:flex; flex-direction:column; gap:2px; }
.brow{
  display:flex; align-items:center; gap:9px; width:100%; padding:6px 8px;
  border-radius:var(--r-xs); text-align:left; border:1px solid transparent;
  transition:background .14s, border-color .14s, color .14s;
}
.brow:hover{ background:var(--surface-3); }
.brow__n{ font-size:13.5px; font-weight:700; letter-spacing:-.012em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brow__c{ margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); flex:none; }
.brow__all{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:var(--surface-3); color:var(--ink-3);
}
.brow__all svg{ width:15px; height:15px; }
.brow.is-on{ background:var(--teal-050); border-color:var(--teal-100); }
.brow.is-on .brow__n,.brow.is-on .brow__c{ color:var(--teal-700); }
.brow.is-on .brow__all{ background:var(--grad-brand); color:#fff; }

/* ---------------- filter controls ---------------- */
.field{ position:relative; display:flex; align-items:center; }
.field svg{ position:absolute; left:11px; width:17px; height:17px; color:var(--ink-3); pointer-events:none; }
.input{
  width:100%; height:42px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface-2); padding:0 12px; font-size:14.5px; font-weight:600; outline:none;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.input::placeholder{ color:var(--ink-3); font-weight:500; }
.input:focus{ border-color:var(--teal-500); background:var(--surface); box-shadow:0 0 0 3px rgba(20,179,154,.16); }
.field .input{ padding-left:36px; }
select.input{ appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.checkline{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; font-weight:600; cursor:pointer; }
.checkline input{ accent-color:var(--teal-600); width:17px; height:17px; }

/* ---- horizontal product-category rail (under the main search) ----------- */
.crail{
  display:flex; gap:8px; margin-top:16px; padding:2px 0 4px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.crail::-webkit-scrollbar{ display:none; }
.crail__item{
  flex:none; width:78px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 6px 7px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.17);
  color:#fff; text-align:center;
  transition:background .16s, border-color .16s, transform .16s cubic-bezier(.2,.8,.3,1);
}
.crail__item:hover{ background:rgba(255,255,255,.18); }
.crail__item:active{ transform:scale(.97); }
.crail__name{ font-size:10.5px; font-weight:700; line-height:1.2; letter-spacing:-.005em; }
.crail__n{ font-size:9px; font-weight:600; opacity:.72; font-variant-numeric:tabular-nums; }
.crail__item.is-on{
  background:#fff; border-color:#fff; color:var(--teal-900);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
}
.crail__item.is-on .crail__n{ opacity:.7; }
.pthumb--rail{ width:46px; height:46px; }

/* group filter — a plain row inside the Compatibility Groups section */
.fbar{
  display:flex; gap:8px; align-items:center; margin:0 0 14px;
}

/* ---------------- RESULT PAGE ------------------------------------------- */
/* the app header is not repeated above the result head on small screens */
@media (max-width:1179px){
  .app.is-result .topbar{ display:none; }
}
.rhead{
  position:sticky; top:0; z-index:58;
  border-radius:0; padding:10px 0 11px;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.8);
}
.rhead__row{ display:flex; align-items:center; gap:10px; }
.rhead__row .searchwrap{ flex:1 1 auto; min-width:0; margin-top:0; }
.rhead__row .search{ height:48px; }
.rhead__x{
  width:48px; height:48px; flex:none; border-radius:var(--r-sm);
  display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  transition:background .16s, transform .16s;
}
.rhead__x:hover{ background:rgba(255,255,255,.26); }
.rhead__x:active{ transform:scale(.95); }
.rhead__x svg{ width:20px; height:20px; }
/* the result rail is a touch tighter than the home one — this block is
   sticky, so it has to stay light on a phone screen */
.rhead .crail{ margin-top:10px; }
.rhead .crail__item{ width:68px; padding:7px 5px 6px; gap:5px; }
.rhead .pthumb--rail{ width:38px; height:38px; }
.rhead .crail__name{ font-size:10px; }
.crail__item.is-empty{ opacity:.42; pointer-events:none; }
@media (min-width:1180px){
  /* the app header already carries the search up here */
  .rhead{ position:static; }
  .rhead__row .searchwrap{ display:none; }
  .rhead__row{ justify-content:flex-end; }
}

/* category block heading inside a grouped "All Parts" result */
.catgroup{
  display:flex; align-items:center; gap:10px; margin:22px 0 12px;
  padding-bottom:9px; border-bottom:2px solid color-mix(in srgb,var(--c) 35%,var(--line));
}
.catgroup:first-child{ margin-top:4px; }
.pthumb--head{ width:32px; height:32px; border-radius:9px; }
.catgroup__name{
  font-family:var(--f-display); font-size:15px; font-weight:700; letter-spacing:-.015em;
  color:color-mix(in srgb,var(--c) 62%,var(--ink)); text-transform:uppercase;
}
.catgroup__n{
  margin-left:auto; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
  background:var(--surface-3); padding:3px 8px; border-radius:var(--r-xs);
}
@media (min-width:1180px){ .fbar{ display:none; } }
.fbar .field{ flex:1; min-width:0; }
.fbar__btn{ position:relative; }
.fbar__btn .dotn{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:99px; background:var(--amber-500); color:#2A1405;
  font-size:10.5px; font-weight:800; display:grid; place-items:center;
}

/* ---------------- category chips / grid ---------------- */
.cats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:560px){ .cats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .cats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.cat{
  position:relative; overflow:hidden; text-align:left; padding:13px 13px 12px;
  border-radius:var(--r); border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--sh-1); transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.cat:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.cat::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.pthumb--cat{ width:34px; height:34px; margin-bottom:9px; }
.cat__name{ font-weight:700; font-size:14px; letter-spacing:-.015em; line-height:1.25; }
.cat__n{ font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; }
.cat.is-on{ border-color:var(--c); box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 26%,transparent), var(--sh-2); }
.cat.is-off{ opacity:.42; }
.cat__tick{ position:absolute; top:10px; right:10px; color:var(--c); opacity:0; transition:opacity .16s; }
.cat__tick svg{ width:17px; height:17px; }
.cat.is-on .cat__tick{ opacity:1; }


/* ---------------- part-label group card ---------------- */
.gridcards{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .gridcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .gridcards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.plate{
  --c:var(--teal-600);
  position:relative; display:flex; flex-direction:column; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden;
  content-visibility:auto; contain-intrinsic-size:auto 250px; cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.plate:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--c) 40%,var(--line)); }
/* printed label strip */
.plate__strip{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:color-mix(in srgb,var(--c) 9%,var(--surface-2));
  border-bottom:1px dashed color-mix(in srgb,var(--c) 32%,var(--line));
  font-family:var(--f-mono); font-size:11.5px; font-weight:600; color:color-mix(in srgb,var(--c) 72%,var(--ink));
  min-width:0;
}
.plate__strip > span:not(.plate__catbadge){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plate__strip .sep{ opacity:.4; flex:none; }
.plate__catbadge{ flex:none; }
.plate__strip .cat{ margin-left:auto; }
.plate__catbadge{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px;
  border-radius:var(--r-pill); background:var(--c); color:#fff;
  font-family:var(--f-ui); font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.plate__body{ padding:14px; display:flex; flex-direction:column; gap:12px; flex:1; }
.plate__master{ display:flex; gap:12px; align-items:center; }
.plate__mname{ font-family:var(--f-display); font-size:18.5px; font-weight:700; letter-spacing:-.028em; line-height:1.18; }
@media (min-width:768px){ .plate__mname{ font-size:19.5px; } }
.plate__mmeta{ display:flex; align-items:center; gap:7px; margin-top:4px; font-size:12px; color:var(--ink-3); font-weight:600; }
.plate__mmeta i{ font-style:normal; width:3px; height:3px; border-radius:99px; background:currentColor; }
.masterflag{
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border-radius:5px;
  background:var(--amber-050); border:1px solid var(--amber-100); color:var(--amber-700);
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px;
}
.masterflag svg{ width:11px; height:11px; }

.fitline{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.fitline__n{ font-family:var(--f-display); font-size:22px; font-weight:800; letter-spacing:-.04em; color:var(--c); line-height:1; font-variant-numeric:tabular-nums; }
.fitline__t{ font-size:12px; font-weight:700; color:var(--ink-2); line-height:1.25; }
.fitline__bar{ margin-left:auto; display:flex; gap:3px; align-items:flex-end; height:22px; }
.fitline__bar span{ width:4px; border-radius:2px; background:color-mix(in srgb,var(--c) 45%,var(--line)); }

.devchips{ display:flex; flex-wrap:wrap; gap:6px; }
.devchip{
  font-size:12px; font-weight:600; padding:4px 9px; border-radius:var(--r-pill);
  background:var(--surface-3); color:var(--ink-2); border:1px solid transparent;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.devchip--more{ background:transparent; border-color:var(--line); color:var(--ink-3); font-weight:700; }
.devchip--hit{ background:var(--teal-050); border-color:var(--teal-100); color:var(--teal-700); font-weight:700; }
.plate__foot{
  margin-top:auto; display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-top:1px solid var(--line-soft); background:var(--surface-2);
}
.plate__foot .mono{ font-size:11px; color:var(--ink-3); }
.plate__cta{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--c); }
.plate__cta svg{ width:15px; height:15px; transition:transform .18s; }
.plate:hover .plate__cta svg{ transform:translateX(3px); }

/* ---------------- match result ---------------- */
.match{
  position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--teal-100);
  background:linear-gradient(180deg,var(--teal-050),var(--surface) 42%); box-shadow:var(--sh-2);
}
.match__head{
  display:flex; align-items:center; gap:8px; padding:13px 14px; flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft);
}
@media (min-width:600px){ .match__head{ gap:10px; padding:14px 16px; } }
.match__badge{
  display:inline-flex; align-items:center; gap:7px; height:29px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--grad-brand); color:#fff; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:var(--glow-brand);
}
.match__badge svg{ width:14px; height:14px; }
.match__body{ padding:16px; display:grid; gap:16px; }
@media (min-width:900px){ .match__body{ grid-template-columns:1.1fr 1fr; padding:20px; gap:22px; } }

.idgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:560px){ .idgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.idcell{ background:var(--surface); padding:10px 12px; min-width:0; }
.idcell span{ display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.idcell b{ display:block; font-family:var(--f-mono); font-size:13px; font-weight:600; margin-top:3px; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; }

.mastercard{
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:16px;
  background:var(--grad-bench); color:#fff; box-shadow:var(--sh-2);
}
.mastercard::after{ content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:99px; background:radial-gradient(circle,rgba(255,138,61,.28),transparent 65%); }
.mastercard__in{ position:relative; z-index:1; }
.mastercard h3{ color:#fff; font-size:clamp(20px,3.4vw,26px); letter-spacing:-.03em; margin-top:8px; }
.mastercard .t-lab{ color:rgba(214,255,244,.7); }
.mspecs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.mspec{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:5px 9px; font-size:11.5px; font-weight:700; color:#DCFAF2; }

/* ---------------- compatible device list ---------------- */
.complist__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.devlist{ display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.dev{
  display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--surface); text-align:left; width:100%;
  transition:background .14s;
}
.dev:hover{ background:var(--surface-2); }
.dev__i{ font-family:var(--f-mono); font-size:11px; color:var(--ink-3); width:26px; flex:none; }
.dev__n{ font-weight:600; font-size:14px; letter-spacing:-.012em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev__b{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-3); flex:none; }
.dev.is-master{ background:var(--amber-050); }
.dev.is-hit{ background:var(--teal-050); box-shadow:inset 3px 0 0 var(--teal-500); }
.dev.is-hit .dev__n{ font-weight:800; color:var(--teal-700); }

.expandbtn{
  width:100%; height:44px; border-radius:var(--r-sm); border:1px dashed var(--line);
  color:var(--ink-2); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; background:var(--surface-2); transition:all .16s;
}
.expandbtn:hover{ border-color:var(--teal-500); color:var(--teal-700); background:var(--teal-050); }
.expandbtn svg{ width:16px; height:16px; transition:transform .2s; }
.expandbtn.is-open svg{ transform:rotate(180deg); }

/* ---------------- model cards / brands ---------------- */
.brandgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:600px){ .brandgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:960px){ .brandgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1240px){ .brandgrid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.brandcard{
  position:relative; overflow:hidden; text-align:left; padding:16px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.brandcard:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.brandcard::after{
  content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:99px;
  background:radial-gradient(circle,color-mix(in srgb,var(--b1) 26%,transparent),transparent 68%);
}
.brandcard__n{ font-family:var(--f-display); font-size:17px; font-weight:700; letter-spacing:-.025em; margin-top:11px; }
.brandcard__c{ font-size:12px; color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums; }

.modelgrid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px){ .modelgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .modelgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mcard{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:12px 14px;
  border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1);
  content-visibility:auto; contain-intrinsic-size:auto 74px;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.mcard:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--teal-500); }
.mcard__n{ font-weight:700; font-size:15px; letter-spacing:-.018em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcard__m{ font-size:12px; color:var(--ink-3); font-weight:600; display:flex; gap:7px; align-items:center; }
.mcard__m i{ font-style:normal; width:3px; height:3px; border-radius:99px; background:currentColor; }
.mcard__go{ margin-left:auto; color:var(--ink-3); flex:none; }
.mcard__go svg{ width:17px; height:17px; }

/* spec sheet */
.specs{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:520px){ .specs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.spec{ background:var(--surface); padding:11px 13px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.spec dt{ font-size:12.5px; color:var(--ink-3); font-weight:600; }
.spec dd{ margin:0; font-size:13.5px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

/* ---------------- overlay: sheet + modal ---------------- */
.scrim{
  position:fixed; inset:0; z-index:90; background:rgba(6,20,18,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:fade .2s ease;
}
@keyframes fade{ from{ opacity:0; } }
.sheet{
  position:fixed; z-index:100; left:0; right:0; bottom:0; max-height:92dvh;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-3); display:flex; flex-direction:column; overflow:hidden;
  animation:slideup .3s cubic-bezier(.2,.9,.25,1);
}
@keyframes slideup{ from{ transform:translateY(6%); opacity:.6; } }
@media (min-width:820px){
  .sheet{
    left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%);
    width:min(860px,calc(100vw - 64px)); max-height:min(88dvh,880px); border-radius:var(--r-xl);
    animation:zoomin .22s cubic-bezier(.2,.9,.25,1);
  }
  @keyframes zoomin{ from{ transform:translate(-50%,-48%) scale(.97); opacity:0; } }
}
.sheet__grab{ width:38px; height:4px; border-radius:99px; background:var(--line); margin:9px auto 0; flex:none; }
@media (min-width:820px){ .sheet__grab{ display:none; } }
.sheet__head{
  display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-soft); flex:none;
}
.sheet__body{ overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; overscroll-behavior:contain; }
@media (min-width:820px){ .sheet__body{ padding:20px; } }
.sheet__foot{ flex:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); background:var(--surface-2); display:flex; gap:10px; }

/* ---------------- states ---------------- */
.state{ text-align:center; padding:38px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.state__art{ width:78px; height:78px; border-radius:22px; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-3); }
.state__art svg{ width:34px; height:34px; }
.state__art--brand{ background:var(--teal-050); color:var(--teal-600); }
.state h3{ font-size:18px; }
.state p{ color:var(--ink-2); font-size:14px; max-width:44ch; }

.skel{ background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%); background-size:400% 100%; animation:sh 1.3s ease-in-out infinite; border-radius:8px; }
@keyframes sh{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.skelplate{ border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); padding:14px; display:flex; flex-direction:column; gap:11px; }

/* ---------------- paywall ---------------- */
.paywall{
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:22px 18px;
  background:linear-gradient(150deg,#2A1405 0%,#7A3B0C 55%,#B45309 100%); color:#FFF3E6;
  box-shadow:var(--sh-2); text-align:center;
}
.paywall::before{
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%);
}
.paywall > *{ position:relative; z-index:1; }
.paywall h3{ color:#fff; font-size:clamp(19px,3.4vw,25px); margin-top:12px; }
.paywall p{ color:rgba(255,240,225,.82); font-size:14px; margin:8px auto 0; max-width:46ch; }
.paywall__lock{ width:52px; height:52px; border-radius:16px; margin:0 auto; display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#FFD9A8; }
.paywall__lock svg{ width:24px; height:24px; }
.paywall__acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }

/* deliberate locked state — replaces the old blurred-data treatment.
   Nothing real is ever obscured; restricted fields are simply not rendered. */
.lockbox{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  border-radius:var(--r); border:1px dashed var(--amber-100);
  background:var(--amber-050);
}
.lockbox__ico{
  width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--amber-100); color:var(--amber-700);
}
.lockbox__ico svg{ width:18px; height:18px; }
.lockbox__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lockbox__body b{ font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.lockbox__body span{ font-size:12px; color:var(--ink-2); }

/* ---------------- plans ---------------- */
.plans{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:820px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } }
.plan{
  position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--sh-1); padding:20px;
}
.plan--hero{ border-color:transparent; background:var(--grad-bench); color:#EAFBF6; box-shadow:var(--sh-3); }
.plan--hero::after{ content:""; position:absolute; right:-90px; bottom:-90px; width:280px; height:280px; border-radius:99px; background:radial-gradient(circle,rgba(255,138,61,.3),transparent 66%); }
.plan__in{ position:relative; z-index:1; }
.plan__tag{
  position:absolute; top:16px; right:16px; z-index:2; height:26px; padding:0 11px; border-radius:var(--r-pill);
  background:var(--grad-amber); color:#2A1405; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; display:inline-flex; align-items:center;
}
.plan__name{ font-family:var(--f-display); font-size:19px; font-weight:700; letter-spacing:-.025em; }
.plan--hero .plan__name{ color:#fff; }
.plan__price{ display:flex; align-items:baseline; gap:6px; margin-top:10px; }
.plan__price b{ font-family:var(--f-display); font-size:clamp(38px,8vw,52px); font-weight:800; letter-spacing:-.045em; line-height:1; }
.plan__price span{ font-size:14px; font-weight:700; color:var(--ink-3); }
.plan--hero .plan__price span{ color:rgba(214,255,244,.7); }
.plan__note{ font-size:13px; margin-top:8px; color:var(--ink-2); }
.plan--hero .plan__note{ color:rgba(214,255,244,.78); }
.plan__feats{ display:flex; flex-direction:column; gap:9px; margin:16px 0 18px; }
.plan__feats li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; font-weight:600; }
.plan__feats svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--teal-600); }
.plan--hero .plan__feats svg{ color:var(--amber-400); }

/* ---------------- auth: Google button, registration form, country picker -- */
.gbtn{
  display:flex; align-items:center; justify-content:center; gap:11px; width:100%;
  height:52px; padding:0 18px; border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  font-size:15.5px; font-weight:700; letter-spacing:-.01em; box-shadow:var(--sh-1);
  transition:border-color .16s, box-shadow .16s, transform .16s, opacity .16s;
}
.gbtn:hover{ border-color:var(--ink-3); box-shadow:var(--sh-2); }
.gbtn:active{ transform:translateY(1px); }
.gbtn__g{ display:grid; place-items:center; width:20px; height:20px; flex:none; }
.gbtn.is-disabled,.gbtn[disabled]{
  opacity:.5; cursor:not-allowed; box-shadow:none;
  background:var(--surface-2); color:var(--ink-3); border-style:dashed;
}
.gbtn.is-disabled:hover{ border-color:var(--line); box-shadow:none; }
.gbtn.is-busy{ opacity:.7; pointer-events:none; }

.regform{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.regform__sub{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--line-soft);
}
.ffield{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.ffield .t-lab{ display:block; }
.ffield__err{ font-size:11.5px; font-weight:700; color:var(--bad); }
.ffield.has-error .input{ border-color:var(--bad); background:var(--bad-bg); }
.ffield.has-error .input:focus{ box-shadow:0 0 0 3px rgba(220,75,82,.18); }
.ffield--pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:379px){ .ffield--pair{ grid-template-columns:1fr; } }

.phonerow{ display:flex; gap:8px; align-items:stretch; }
.phonerow .input{ flex:1 1 auto; min-width:0; }
.ccpick{
  display:flex; align-items:center; gap:6px; flex:none; max-width:46%;
  height:42px; padding:0 9px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  font-size:13.5px; font-weight:600;
}
.ccpick:hover{ border-color:var(--ink-3); }
.ccpick__flag{ font-size:17px; line-height:1; }
.ccpick__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ccpick__dial{ color:var(--ink-2); font-family:var(--f-mono); font-size:12.5px; }
.ccpick svg{ width:14px; height:14px; color:var(--ink-3); flex:none; }

.clist{ display:flex; flex-direction:column; gap:1px; background:var(--line-soft);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.crow{
  display:flex; align-items:center; gap:11px; padding:11px 13px; width:100%;
  background:var(--surface); text-align:left; transition:background .14s;
}
.crow:hover{ background:var(--surface-2); }
.crow.is-on{ background:var(--teal-050); }
.crow.is-on .crow__name{ color:var(--teal-700); font-weight:800; }
.crow__flag{ font-size:20px; line-height:1; flex:none; }
.crow__name{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crow__dial{ margin-left:auto; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3); flex:none; }

/* ---------------- account: access list, plans, meter, profile edit ------- */
.acclist{ display:flex; flex-direction:column; gap:9px; }
.acclist li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:600; }
.acclist svg{ width:17px; height:17px; flex:none; margin-top:2px; }
.acclist__on svg{ color:var(--ok); }
.acclist__off{ color:var(--ink-3); }
.acclist__off svg{ color:var(--ink-3); }
.acclist__tag{
  margin-left:auto; flex:none; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--amber-700); background:var(--amber-050);
  border:1px solid var(--amber-100); border-radius:var(--r-pill); padding:2px 8px;
}

.planpick{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:560px){ .planpick{ grid-template-columns:1fr 1fr; } }
.planpick__item{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); padding:14px 13px 13px;
}
.planpick__item--best{
  border-color:var(--amber-100); background:var(--amber-050);
  box-shadow:0 0 0 1px var(--amber-100) inset;
}
.planpick__item.is-current{ border-color:var(--teal-500); background:var(--teal-050); }
.planpick__tag{
  position:absolute; top:-9px; right:12px; height:20px; padding:0 9px; border-radius:var(--r-pill);
  background:var(--grad-amber); color:#2A1405; font-size:10px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; display:inline-flex; align-items:center;
}
.planpick__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.planpick__name{ font-family:var(--f-display); font-size:16px; font-weight:700; letter-spacing:-.02em; }
.planpick__price b{ font-family:var(--f-display); font-size:22px; font-weight:800; letter-spacing:-.04em; }
.planpick__price span{ font-size:11.5px; color:var(--ink-3); font-weight:700; }
.planpick__note{ font-size:12px; color:var(--ink-2); margin:6px 0 12px; }

.submeter{ margin-top:14px; }
.submeter__bar{ height:9px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.submeter__bar i{ display:block; height:100%; border-radius:99px; background:var(--grad-brand); transition:width .4s ease; }
.submeter__row{
  display:flex; justify-content:space-between; gap:10px; margin-top:7px;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.submeter__row b{ color:var(--ink); font-size:14px; }

.avatar--img{ padding:0; overflow:hidden; background:var(--surface-3); }
.avatar--img img{ width:100%; height:100%; object-fit:cover; display:block; }

.editform{ display:flex; flex-direction:column; gap:12px; }
.phrow{ display:flex; gap:14px; align-items:flex-start; }
.locbox{
  border:1px dashed var(--line); border-radius:var(--r);
  background:var(--surface-2); padding:12px;
}
.locpin{ display:flex; gap:10px; align-items:center; font-size:13.5px; }
.locpin svg{ width:18px; height:18px; flex:none; color:var(--ok); }
.locpin b{ display:block; font-size:13.5px; }
.locpin .mono{ font-size:11.5px; color:var(--ink-3); }

/* ---------------- account ---------------- */
.acct{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:900px){ .acct{ grid-template-columns:1.05fr .95fr; align-items:start; } }
.statusbar{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.statusbar i{ display:block; height:100%; border-radius:99px; background:var(--grad-brand); }
.segmented{ display:flex; gap:4px; padding:4px; background:var(--surface-3); border-radius:var(--r-sm); }
.segmented button{ flex:1; height:36px; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--ink-2); transition:all .16s; }
.segmented button.is-on{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }

/* ---------------- toast ---------------- */
.toasts{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index:200; display:flex; flex-direction:column; gap:8px; width:min(420px,calc(100vw - 32px)); pointer-events:none; }
@media (min-width:940px){ .toasts{ bottom:24px; } }
.toast{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-sm);
  background:var(--ink); color:var(--paper); box-shadow:var(--sh-3); font-size:13.5px; font-weight:600;
  animation:toastin .26s cubic-bezier(.2,.9,.25,1);
}
@keyframes toastin{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
.toast svg{ width:17px; height:17px; flex:none; color:var(--teal-400); }

/* ---------------- misc ---------------- */
.sentinel{ height:1px; }
.loadmore{ display:flex; justify-content:center; padding:20px 0 4px; }
.copybtn{ display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--ink-2); padding:4px 8px; border-radius:7px; background:var(--surface-3); transition:all .14s; }
.copybtn:hover{ background:var(--teal-050); color:var(--teal-700); }
.copybtn svg{ width:13px; height:13px; }
.crumbs{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-3); flex-wrap:wrap; }
.crumbs button:hover{ color:var(--teal-700); }
.crumbs svg{ width:14px; height:14px; }
.notice{ display:flex; gap:11px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2); font-size:13.5px; }
.notice svg{ width:18px; height:18px; flex:none; color:var(--ink-3); margin-top:1px; }
.notice--amber{ background:var(--amber-050); border-color:var(--amber-100); }
.notice--amber svg{ color:var(--amber-600); }
.notice--brand{ background:var(--teal-050); border-color:var(--teal-100); }
.notice--brand svg{ color:var(--teal-600); }

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

/* ============================================================================
   DEVICE PAGE  (#/model/<id>)
   ----------------------------------------------------------------------------
   A showcase, not a form. Three bands in the order a shop owner needs them:
   identity and price, the four specs that decide a repair quote, then the full
   sheet and compatibility.

   Everything is built on the shared tokens, so both themes come out of one set
   of rules — there is no colour here that exists only inside a dark block.
   ========================================================================== */

.dev-page{ padding-bottom:40px; }

/* -------------------------------------------------------------- sticky head
   The model name has to stay reachable through a long spec sheet, so the head
   pins under the app header rather than scrolling away with the hero. */
.dhead{
  /* Stacks BELOW the app header, which is itself sticky at top:0 with z-index
     60. Both at top:0 meant the topbar simply covered this one and the model
     name vanished the moment the page scrolled. */
  position:sticky; top:var(--topbar-h); z-index:30;
  background:var(--surface); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(8px);
}
.dhead__in{
  max-width:1180px; margin:0 auto; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-height:56px;
}
.dhead__t{
  flex:1; min-width:0; font-family:var(--f-display); font-weight:800;
  font-size:15px; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dhead__cta{ flex:none; }

/* ---------------------------------------------------------------------- hero */
.dhero{
  display:grid; gap:22px; align-items:center;
  padding:24px 0 8px;
}
.dshot{
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--teal-050), transparent 70%),
    var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r);
  padding:26px 20px; min-height:260px;
}
.dshot__svg{ height:230px; width:auto; max-width:100%; filter:drop-shadow(0 14px 26px rgba(0,0,0,.24)); }

.dintro{ min-width:0; }
.dintro__brand{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:10px;
}
.dintro__h{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(24px,5.4vw,38px); line-height:1.06; letter-spacing:-.03em;
  margin:0 0 12px; text-wrap:balance; color:var(--ink);
}
.dintro__meta{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.dmeta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:99px;
  padding:5px 11px; font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.dmeta svg{ width:14px; height:14px; flex:none; }

.dprice{ display:flex; align-items:baseline; gap:9px; margin-bottom:18px; }
.dprice__n{
  font-family:var(--f-display); font-weight:800; font-size:26px;
  letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.dprice__l{ font-size:12.5px; color:var(--ink-3); }

/* --------------------------------------------------------------- colours */
.dcolours{ margin-bottom:20px; }
.dcolours .t-lab{ display:block; margin-bottom:9px; }
.dsw__row{ display:flex; flex-wrap:wrap; gap:9px; }
.dsw{
  width:34px; height:34px; border-radius:11px; padding:0; cursor:pointer;
  background:var(--sw); border:1px solid rgba(0,0,0,.22);
  box-shadow:inset 0 -6px 10px -6px rgba(0,0,0,.45);
  transition:transform .12s ease, box-shadow .12s ease;
}
.dsw:hover{ transform:translateY(-1px); }
/* The ring is drawn OUTSIDE the swatch so it reads on a white finish as well
   as a black one — an inset ring disappears into a pale colour. */
.dsw.is-on{
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--teal-500),
             inset 0 -6px 10px -6px rgba(0,0,0,.45);
}
.dsw:focus-visible{ outline:2px solid var(--teal-500); outline-offset:3px; }

.dintro__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.dintro__note{ font-size:13px; color:var(--ink-3); }

/* ------------------------------------------------------------- key specs
   The four numbers a repair quote turns on. Scanned, never read. */
.dkeys{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  margin:24px 0 30px;
}
.dkey{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; min-width:0;
}
.dkey__i{ display:block; color:var(--teal-600); margin-bottom:9px; }
.dkey__i svg{ width:19px; height:19px; }
.dkey__l{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px;
}
.dkey__v{
  display:block; font-family:var(--f-display); font-weight:800; font-size:17px;
  letter-spacing:-.02em; color:var(--ink); line-height:1.2;
  overflow-wrap:anywhere;
}
.dkey__s{ display:block; font-size:12px; color:var(--ink-3); margin-top:3px; }

/* ------------------------------------------------------------ spec blocks */
.dsecs{ display:grid; gap:12px; margin-bottom:30px; }
.dsec{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.dsec__h{
  display:flex; align-items:center; gap:9px; margin:0;
  padding:13px 16px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
  font-family:var(--f-display); font-weight:800; font-size:13.5px;
  letter-spacing:-.01em; color:var(--ink);
}
.dsec__h svg{ width:16px; height:16px; color:var(--teal-600); flex:none; }
.dsec__b{ margin:0; padding:4px 16px 12px; }
.dspec{
  display:grid; grid-template-columns:minmax(96px,38%) 1fr; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.dspec:last-child{ border-bottom:0; }
.dspec dt{ font-size:13px; color:var(--ink-3); min-width:0; overflow-wrap:anywhere; }
.dspec dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); min-width:0; overflow-wrap:anywhere; }

/* ----------------------------------------------------------- compatibility */
.dcompat{ margin-bottom:26px; }
.dcompat__p{ font-size:13.5px; margin:5px 0 14px; }

.dnote{
  display:flex; gap:9px; align-items:flex-start;
  font-size:12.5px; color:var(--ink-3); margin:0;
}
.dnote svg{ width:15px; height:15px; flex:none; margin-top:1px; }

/* ==========================================================================
   BREAKPOINTS
   Each size gets a layout, not a squeeze: the hero goes side-by-side only when
   there is room for the handset to stay large enough to read.
   ========================================================================== */

/* small phones — keep the handset visible without pushing the name off screen */
@media (max-width:399px){
  .dshot{ padding:18px 14px; min-height:210px; }
  .dshot__svg{ height:180px; }
  .dkeys{ gap:8px; }
  .dhead__cta span{ display:none; }      /* icon-only CTA, still 44px tall */
}

/* tablet and up: hero splits, spec sheet goes two-up */
@media (min-width:700px){
  .dhero{ grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:30px; padding:30px 0 10px; }
  .dshot{ min-height:330px; padding:30px; }
  .dshot__svg{ height:280px; }
  .dkeys{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  .dsecs{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .dhead__in{ padding:9px 20px; }
}

/* laptop: the shot can breathe */
@media (min-width:1024px){
  .dhero{ grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:40px; padding:36px 0 14px; }
  .dshot{ min-height:400px; }
  .dshot__svg{ height:340px; }
  .dkey{ padding:16px 17px; }
}

/* wide desktop: three spec columns rather than a long two-column scroll */
@media (min-width:1320px){
  .dsecs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .dsw{ transition:none; }
  .dsw:hover{ transform:none; }
}

/* ============================================================================
   TOUCH TARGETS
   ----------------------------------------------------------------------------
   A finger needs about 44px; a mouse pointer does not. These rules grow the
   HIT area without changing the visual weight of the control, so the design is
   unchanged and the buttons simply become hittable.

   Two offenders the audit caught at 360px: the search input sat 27px tall
   inside a 56px field — the surrounding padding belonged to a plain div, so
   tapping it did nothing — and the "Open group" button was 22px.
   ========================================================================== */
@media (pointer:coarse), (max-width:900px){
  /* The search input carries no class, so it has to be matched by element —
     `.search .input` silently matched nothing and left it 27px tall. */
  .search input,
  .field input,
  .input{ min-height:44px; }
  .plate__cta{ min-height:40px; }
  .dsw{ width:38px; height:38px; }
  /* The breadcrumb is the back route on a phone — 22px tall is a miss. */
  .crumbs button{ min-height:40px; padding-inline:2px; }
}

/* ============================================================================
   BRAND DASHBOARD TILE
   ----------------------------------------------------------------------------
   The tile earns the space it takes: logo and name, then the counts in the
   order that matters when pricing a repair — phones first and largest, split
   flat/curved, then the other device classes.

   Cards are a fixed minimum height so a brand with no tablets does not sit
   half as tall as one that has them. Ragged card heights across a grid read as
   a broken layout, not as information.
   ========================================================================== */
.brandcard{
  display:flex; flex-direction:column; gap:10px; min-height:168px;
}
.brandcard__top{ display:flex; align-items:center; gap:11px; min-width:0; }
.brandcard__id{ display:flex; flex-direction:column; min-width:0; }
.brandcard__n{
  font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:-.02em;
  color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.brandcard__c{ font-size:11.5px; color:var(--ink-3); }

/* the headline number */
.brandcard__lead{ display:flex; align-items:baseline; gap:6px; margin-top:auto; }
.brandcard__lead b{
  font-family:var(--f-display); font-weight:800; font-size:30px; line-height:1;
  letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.brandcard__lead span{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}

/* Flat vs curved, drawn to scale. The curved remainder is the track itself, so
   the two segments cannot disagree with each other. */
.curvebar{
  display:block; height:5px; border-radius:99px; overflow:hidden;
  background:var(--b1, var(--teal-600)); opacity:.9;
}
.curvebar__flat{ display:block; height:100%; background:var(--ink-3); opacity:.55; }

.brandcard__split{ display:flex; gap:12px; flex-wrap:wrap; }
.brandcard__extra{
  display:flex; gap:12px; flex-wrap:wrap;
  padding-top:9px; border-top:1px solid var(--line);
}
.bcs{ font-size:11.5px; color:var(--ink-3); white-space:nowrap; }
.bcs b{
  font-weight:800; color:var(--ink-2); font-variant-numeric:tabular-nums;
  margin-right:2px;
}
/* A dot in each label ties the number to its half of the bar. */
.bcs--flat::before, .bcs--curved::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:99px;
  margin-right:5px; vertical-align:middle;
}
.bcs--flat::before{ background:var(--ink-3); opacity:.55; }
.bcs--curved::before{ background:var(--b1, var(--teal-600)); }

/* On the narrowest phones the tile drops the split bar rather than squeezing
   two labels onto one 150px line. */
@media (max-width:400px){
  .brandcard{ min-height:150px; }
  .brandcard__lead b{ font-size:26px; }
  .brandcard__split{ gap:8px; }
  .bcs{ font-size:11px; }
}

/* ============================================================================
   BRAND MODEL PAGE — header, controls, and three views
   ========================================================================== */

/* ------------------------------------------------------------------ header */
.bhead{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; margin-bottom:14px;
}
.bhead__id{ display:flex; align-items:center; gap:13px; min-width:0; }
.bhead__n{
  font-family:var(--f-display); font-weight:800; font-size:22px;
  letter-spacing:-.03em; margin:0; color:var(--ink);
}
.bhead__c{ margin:2px 0 0; font-size:12.5px; color:var(--ink-3); }
/* Search and the view switch sit together on the right, as one tool group. */
.bhead__tools{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; }
.bhead__q{ min-width:min(260px, 100%); }

/* View switch: three icons, not three words. The name is on the tooltip and
   the aria-label, so the control keeps its width in any language. */
.vswitch{
  display:flex; gap:2px; padding:3px; flex:none;
  background:var(--surface-3); border:1px solid var(--line); border-radius:11px;
}
.vswitch__b{
  display:grid; place-items:center; width:36px; height:34px; padding:0;
  border:0; border-radius:8px; background:transparent; color:var(--ink-3); cursor:pointer;
  transition:background .15s, color .15s;
}
.vswitch__b svg{ width:17px; height:17px; }
.vswitch__b:hover{ color:var(--ink-2); background:var(--surface); }
.vswitch__b.is-on{ background:var(--surface); color:var(--teal-700); box-shadow:var(--sh-1); }
.vswitch__b:focus-visible{ outline:2px solid var(--teal-500); outline-offset:1px; }

/* ---------------------------------------------------------------- controls */
.bctl{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.fsel{ position:relative; display:inline-flex; }
.fsel__l{
  position:absolute; left:11px; top:-7px; padding:0 4px; z-index:1;
  background:var(--paper); font-size:9.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); pointer-events:none;
}
.fsel select{
  appearance:none; -webkit-appearance:none;
  min-height:40px; padding:0 30px 0 11px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  /* chevron drawn in CSS so it inherits the theme ink colour */
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 15px) 18px, calc(100% - 11px) 18px;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.fsel select:hover{ border-color:var(--ink-3); }
.fsel select:focus-visible{ outline:2px solid var(--teal-500); outline-offset:1px; }
/* An applied filter must be visible at a glance, or a shortened list reads as
   missing data rather than as a filtered one. */
.fsel.is-set select{ border-color:var(--teal-500); color:var(--teal-700); font-weight:700; }
.bctl__clear{ margin-left:auto; }
.bcount{ font-size:12.5px; color:var(--ink-3); margin:0 0 12px; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------- shared device art */
.dvc{ display:block; width:auto; height:100%; filter:drop-shadow(0 6px 12px rgba(0,0,0,.22)); }
.dvc--xs{ height:30px; filter:none; }

/* --------------------------------------------------------------- grid view */
.dgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:560px){ .dgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .dgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1280px){ .dgrid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.dcard{
  display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.dcard:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--teal-500); }
.dcard:focus-visible{ outline:2px solid var(--teal-500); outline-offset:2px; }
/* The device image leads — showing it instead of a repeated brand logo is the
   whole reason this view exists. */
.dcard__shot{
  display:grid; place-items:center; height:132px; padding:14px 10px;
  background:radial-gradient(120% 90% at 50% 0%, var(--teal-050), transparent 70%), var(--surface-2);
  border-bottom:1px solid var(--line);
}
.dcard__b{ display:flex; flex-direction:column; gap:5px; padding:11px 12px 13px; min-width:0; }
.dcard__n{
  font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dcard__m{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.dcard__t{ display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }

.tag{
  font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:2.5px 7px; border-radius:99px;
  background:var(--surface-3); color:var(--ink-3); white-space:nowrap;
}
.tag--curved{ background:var(--teal-100); color:var(--teal-700); }
.tag--parts{ background:var(--teal-100); color:var(--teal-700); }

/* --------------------------------------------------------------- list view */
.dlist{ display:flex; flex-direction:column; gap:8px; }
.drow{
  display:flex; align-items:center; gap:13px; text-align:left; width:100%;
  padding:10px 13px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; transition:border-color .15s, background .15s;
}
.drow:hover{ border-color:var(--teal-500); background:var(--surface-2); }
.drow:focus-visible{ outline:2px solid var(--teal-500); outline-offset:2px; }
.drow__shot{ display:grid; place-items:center; width:38px; height:52px; flex:none; }
.drow__main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.drow__n{
  font-weight:700; font-size:14px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.drow__m{
  font-size:12px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.drow__side{ display:flex; align-items:center; gap:8px; flex:none; }
.drow__y{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------- table view */
.dtable-wrap{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.dtable{ width:100%; border-collapse:collapse; font-size:13px; }
.dtable th{
  text-align:left; padding:10px 13px; white-space:nowrap;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.dtable td{
  padding:9px 13px; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:middle; white-space:nowrap;
}
.dtable tbody tr{ cursor:pointer; transition:background .12s; }
.dtable tbody tr:hover{ background:var(--surface-2); }
.dtable tbody tr:focus-visible{ outline:2px solid var(--teal-500); outline-offset:-2px; }
.dtable tbody tr:last-child td{ border-bottom:0; }
.tcell-dev{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); }
.c-device{ min-width:190px; }

/* Columns drop from the least useful end as the viewport narrows, so the table
   never needs a horizontal scrollbar. Hiding in CSS rather than in JS means a
   resize costs nothing — there is no re-render. */
@media (max-width:1499px){ .dtable .c-res{ display:none; } }
@media (max-width:1399px){ .dtable .c-camera{ display:none; } }
@media (max-width:1279px){ .dtable .c-ram, .dtable .c-storage{ display:none; } }
@media (max-width:1099px){ .dtable .c-chipset{ display:none; } }
@media (max-width:999px){ .dtable .c-network{ display:none; } }

/* Below 900 the table stops being a table. A grid this wide on a phone can
   only scroll sideways, which hides exactly the column someone is looking for,
   so each row becomes a card and every cell carries its own label. */
@media (max-width:899px){
  .dtable thead{ display:none; }
  .dtable, .dtable tbody, .dtable tr, .dtable td{ display:block; width:100%; }
  .dtable-wrap{ background:transparent; border:0; border-radius:0; }
  .dtable tr{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    margin-bottom:8px; padding:6px 2px;
  }
  .dtable td{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    border-bottom:0; padding:6px 13px; white-space:normal;
  }
  .dtable td::before{
    content:attr(data-label);
    font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    color:var(--ink-3); flex:none;
  }
  .dtable .c-device{ min-width:0; padding-top:9px; }
  .dtable .c-device::before{ display:none; }     /* the name is its own label */
  .dtable .c-battery, .dtable .c-chipset, .dtable .c-network,
  .dtable .c-ram, .dtable .c-storage{ display:flex; }
}

/* ------------------------------------------------------------ small screens */
@media (max-width:640px){
  .bhead{ padding:13px; gap:12px; }
  .bhead__tools{ width:100%; margin-left:0; }
  .bhead__q{ flex:1; min-width:0; }
  .bhead__n{ font-size:19px; }
  /* the filter bar scrolls sideways rather than stacking into a wall */
  .bctl{
    flex-wrap:nowrap; overflow-x:auto; padding:8px 0 4px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .bctl::-webkit-scrollbar{ display:none; }
  .fsel select{ min-height:44px; }
  .bctl__clear{ margin-left:0; flex:none; }
  .dcard__shot{ height:112px; }
}

@media (prefers-reduced-motion:reduce){
  .dcard, .drow, .vswitch__b, .dtable tbody tr{ transition:none; }
  .dcard:hover{ transform:none; }
}

/* ============================================================================
   DEVICE PAGE — hero balance and the variant picker
   ----------------------------------------------------------------------------
   The highlight cards used to sit below the fold while the right half of the
   hero stood empty. They are part of the hero now, in a three-column band, so
   the specs that decide a repair quote are the first thing read.
   ========================================================================== */

/* A real content container. Without this the page ran to the browser edge on
   a wide window and looked unfinished. */
.dev-page .wrap{
  max-width:1240px; margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 32px);
}

/* ------------------------------------------------------------ highlights */
.dkeys{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .dkeys{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Six cards over two rows of three keeps every card the same height; four
   across leaves a two-card orphan row on a wide screen. */
@media (min-width:1024px){ .dkeys{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } }
.dkey__s{ line-height:1.4; }

/* --------------------------------------------------------- variant picker */
.vpick{
  display:flex; flex-direction:column; gap:11px;
  padding:14px; margin-bottom:18px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.vpick__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vpick__l{
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); width:52px; flex:none;
}
.vpick__chips{ display:flex; gap:6px; flex-wrap:wrap; }

.vchip{
  min-height:36px; padding:0 13px; cursor:pointer;
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); border-radius:9px;
  font:inherit; font-size:12.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:border-color .14s, color .14s, background .14s;
}
.vchip:hover:not(:disabled){ border-color:var(--ink-3); color:var(--ink); }
.vchip.is-on{
  border-color:var(--teal-500); background:var(--teal-100);
  color:var(--teal-700); box-shadow:inset 0 0 0 1px var(--teal-500);
}
/* A pair that is not sold stays visible but dead — hiding it would make the
   row jump every time RAM changes. */
.vchip:disabled{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.vchip:focus-visible{ outline:2px solid var(--teal-500); outline-offset:2px; }

.vpick__out{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-top:11px; border-top:1px solid var(--line);
}
.vprice{
  font-family:var(--f-display); font-weight:800; font-size:21px;
  letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.vmeta{ font-size:12.5px; color:var(--ink-3); }
.vstock{
  display:inline-flex; align-items:center; gap:4px; margin-left:auto;
  font-size:11.5px; font-weight:700;
}
.vstock svg{ width:13px; height:13px; }
.vstock.is-in{ color:var(--teal-700); }
.vstock.is-out{ color:var(--ink-3); }

@media (max-width:520px){
  .vpick__l{ width:100%; }
  .vstock{ margin-left:0; width:100%; }
  .vchip{ min-height:40px; }
}

@media (prefers-reduced-motion:reduce){ .vchip{ transition:none; } }

/* Boot placeholder — shown only while assets/dataset.json downloads. */
.bootwait{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:70vh; color:var(--ink-3); font-size:13.5px;
}
.bootwait svg{ opacity:.85; }