/* ═══════════════════════════════════════════════════════════
   Geforce.ir — site shell
   Loaded on every page, after styles.css. Inherits every token.

     Mono face        engineering data only (mm, W, MHz, FPS)
     Boot screen      once per session, skippable, never blocks content
     Page transitions native View Transitions, no JS
     Cart drawer      <dialog>, slides from the cart icon's side
     Finder           fullscreen predictive search + quick navigation

   Typography rule (locked):
     engineering values -> Latin digits in --mono, like a datasheet
     prices, counts, copy -> Persian digits in Vazirmatn
   Accent rule stays locked: heat, signal and focus are all shown with
   the one green, through intensity rather than a second hue.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/geist-mono-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00B0, U+00D7, U+2013, U+2022, U+2192, U+2588, U+25B8;
}

:root {
  /* Persian glyphs fall through to Vazirmatn, whose digits are tabular. */
  --mono: 'Geist Mono', 'Vazirmatn', ui-monospace, 'Cascadia Mono', monospace;
  --trace: rgba(47, 206, 85, .085);
  --scrim: rgba(3, 5, 4, .62);

  --z-tray: 50;
  --z-dialog: 80;
  --z-boot: 100;
}
[data-theme="light"] {
  --trace: rgba(23, 128, 56, .1);
  --scrim: rgba(6, 20, 11, .38);
}

/* Engineering values are Latin: isolate them so "358 mm" never reads
   back as "mm 358" inside a right-to-left line. */
.mono {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -.01em;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Headings and panels that receive focus from script (so a screen reader
   starts reading there) are not controls, and draw no focus ring. */
[tabindex="-1"]:focus { outline: none; }

kbd {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  color: var(--text-mute);
  background: var(--surface);
}

/* Lock the page behind any open modal. */
html:has(dialog.cart[open], dialog.finder[open], dialog.cmp[open], .sheet.is-open) { overflow: hidden; }

/* ─── Nav additions ──────────────────────────────────────── */
.nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 40px;
  padding-inline: 11px;
}
.nav__search kbd { display: none; }
@media (min-width: 1280px) {
  .nav__search { padding-inline: 14px 8px; }
  .nav__search kbd { display: inline-block; }
}

.iconbtn.is-busy { opacity: .6; pointer-events: none; }

/* ─── Boot: POST screen, first page of the session only ──── */
.boot { display: none; }
html.is-booting { overflow: hidden; }
html.is-booting .boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--text-mid);
  cursor: pointer;
  /* Failsafe: if the shell script never runs, get out of the way anyway. */
  animation: bootFailsafe .01s 2.8s forwards;
}
@keyframes bootFailsafe { to { opacity: 0; visibility: hidden; } }

.boot__screen {
  width: min(560px, 86vw);
  direction: ltr;
  text-align: left;
  font: 500 clamp(11px, 1.6vw, 13px) / 2 var(--mono);
}
.boot__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.boot__head img { width: 22px; height: 22px; }
.boot__line { white-space: pre; opacity: 0; }
.boot__line.is-on { opacity: 1; }
.boot__ok { color: var(--green); }
.boot__foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.boot__bar { flex: 1; height: 2px; background: var(--line-2); overflow: hidden; }
.boot__bar i {
  display: block;
  height: 100%;
  background: var(--green);
  transform-origin: left center;
  transform: scaleX(0);
}
.boot__pct { min-width: 4ch; text-align: right; color: var(--text); white-space: pre; }
.boot__skip { margin-top: 18px; color: var(--text-mute); font-size: .92em; }

/* ─── Page transitions: native, progressive ──────────────── */
@view-transition { navigation: auto; }

/* The bar holds still; the page underneath is scanned in from the
   reading edge, like a frame being drawn. */
.nav { view-transition-name: site-nav; }

::view-transition-old(root) { animation: vtOut .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .46s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn  { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
[dir="ltr"]::view-transition-new(root) { animation-name: vtInLtr; }
@keyframes vtInLtr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* A product photo morphs from its card into the product page. */
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ─── Shared modal frame ─────────────────────────────────── */
dialog.cart, dialog.finder, dialog.cmp {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}
dialog.cart::backdrop, dialog.finder::backdrop, dialog.cmp::backdrop { background: transparent; }

.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (prefers-reduced-transparency: reduce) {
  .scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ─── Toast (refines styles.css) ─────────────────────────── */
.toast { z-index: calc(var(--z-dialog) + 5); max-width: min(420px, calc(100vw - 32px)); }

/* The little packet that travels from a button to the cart. */
.packet {
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-dialog) + 4);
  width: 9px; height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft), 0 0 18px var(--green);
  pointer-events: none;
}

.btn.is-added { --btn-bg: var(--green-soft); --btn-fg: var(--green); --btn-bd: var(--green-line); }

/* ─── Cart drawer ────────────────────────────────────────── */
.cart__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(460px, 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.cart__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.cart__head h2 { font-size: 1.1rem; }
.cart__meta { color: var(--text-mute); font-size: .84rem; margin-inline-end: auto; }

.cart__body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px 18px; }
.cart__list { list-style: none; margin: 0; padding: 0; }

.line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.line__thumb {
  width: 72px; height: 54px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.line__main { display: grid; gap: 4px; min-width: 0; }
.line__name { font-weight: 700; font-size: .92rem; line-height: 1.5; }
.line__name:hover { color: var(--green); }
.line__unit { font-size: .82rem; color: var(--text-mid); }
.line__unit small { color: var(--text-mute); }
.line__side { display: grid; justify-items: end; align-content: space-between; gap: 10px; }

.line__rm {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-mute);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.line__rm:hover { color: var(--text); background: var(--surface-2); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.qty button {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.qty button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty output { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; }

/* Warranty: two pills, the extension priced per line. */
.warr { border: 0; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.warr legend { font-size: .72rem; color: var(--text-mute); margin-bottom: 4px; padding: 0; width: 100%; float: inline-start; }
.warr label { position: relative; cursor: pointer; }
.warr input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.warr span {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-mid);
  transition: background-color .2s, border-color .2s, color .2s;
}
.warr input:checked + span { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.warr input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

.cart__foot {
  padding: 16px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 12px;
}
.sum { margin: 0; display: grid; gap: 6px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.sum dt { color: var(--text-mute); }
.sum dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum dd small { color: var(--text-mute); font-weight: 500; }
.sum__total { padding-top: 8px; margin-top: 2px; border-top: 1px dashed var(--line-2); font-size: 1rem !important; }
.sum__total dt { color: var(--text) !important; font-weight: 700; }
.sum__total dd { font-weight: 800; font-size: 1.12rem; }
.cart__note { font-size: .76rem; color: var(--text-mute); }
.cart__go { width: 100%; }
.cart.is-busy .cart__list { opacity: .6; pointer-events: none; }

/* ─── Branded empty states ───────────────────────────────── */
.nil {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 44px 8px 20px;
}
.nil h3 { font-size: 1.1rem; }
.nil p { color: var(--text-mute); font-size: .9rem; max-width: 34ch; }
.nil__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.nil__links .chip { text-decoration: none; }

/* An empty DIMM slot, drawn in CSS: pins, the key notch, two latches,
   and a scan line looking for a module that is not there. */
.slotart { display: grid; justify-items: center; gap: 12px; margin-bottom: 8px; }
.slotart__slot {
  position: relative;
  width: 230px; height: 26px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(var(--surface), var(--surface)) 58% 50% / 7px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 5px) 50% 50% / calc(100% - 16px) 10px no-repeat,
    var(--surface-2);
  overflow: hidden;
}
.slotart__slot::before, .slotart__slot::after {
  content: "";
  position: absolute;
  inset-block: -1px;
  width: 10px;
  background: var(--line-2);
}
.slotart__slot::before { left: -1px; border-radius: 5px 0 0 5px; }
.slotart__slot::after  { right: -1px; border-radius: 0 5px 5px 0; }
.slotart__scan {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, var(--green-soft), var(--green-line), transparent);
  animation: slotScan 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes slotScan { from { transform: translateX(-30px); } to { transform: translateX(230px); } }
.slotart__cap { font-size: .72rem; color: var(--text-mute); direction: ltr; }

/* Flatline: no results, no signal. */
.flat { width: min(260px, 70%); height: 46px; overflow: visible; }
.flat path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flat .flat__blip { stroke: var(--green); stroke-dasharray: 60 400; animation: flatRun 2.2s linear infinite; }
@keyframes flatRun { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -400; } }

/* ─── Finder: fullscreen predictive search ───────────────── */
.finder__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
@media (prefers-reduced-transparency: reduce) {
  .finder__panel { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.finder__bar {
  max-width: 920px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: clamp(18px, 4vh, 44px) 14px;
  border-bottom: 1px solid var(--line-2);
}
.finder__bar > i { font-size: 1.6rem; color: var(--green); }
.finder__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 8px 0;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.01em;
}
.finder__input::placeholder { color: var(--text-mute); font-weight: 500; }
.finder__input::-webkit-search-cancel-button { display: none; }
.finder__bar kbd { display: none; }
@media (hover: hover) { .finder__bar kbd { display: inline-block; } }

.finder__scopes {
  max-width: 920px;
  display: flex;
  gap: 8px;
  padding-block: 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.finder__scopes::-webkit-scrollbar { display: none; }
.scope { position: relative; flex-shrink: 0; }
.scope input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scope span {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
  transition: color .2s, background-color .2s, border-color .2s;
}
.scope input:checked + span { background: var(--text); color: var(--ink); border-color: var(--text); }
.scope input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

.finder__body { overflow-y: auto; overscroll-behavior: contain; }
.finder__inner { max-width: 920px; padding-block: 18px 40px; }

.fhead {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-mute);
  margin: 22px 0 10px;
}
.fhead:first-child { margin-top: 4px; }

.ftiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.ftile {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 16px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s, transform .2s var(--ease);
}
.ftile:hover, .ftile:focus-visible { border-color: var(--green-line); transform: translateY(-2px); }
.ftile i { font-size: 1.5rem; color: var(--green); margin-bottom: 6px; }
.ftile b { font-size: .98rem; }
.ftile small { font-size: .76rem; color: var(--text-mute); }
.ftile__n { position: absolute; top: 12px; inset-inline-end: 14px; font-size: .74rem; color: var(--text-mute); direction: ltr; }

.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchips .chip { display: inline-flex; align-items: center; gap: 7px; }
.fchips .chip i { color: var(--green); }

.fstatus { font-size: .8rem; color: var(--text-mute); margin-bottom: 6px; min-height: 1.4em; }

.flist, .flist ul { list-style: none; margin: 0; padding: 0; }
.fgroup {
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-mute);
  padding: 16px 12px 6px;
}
.fopt {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .15s;
}
.fopt.is-active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--green); }
[dir="rtl"] .fopt.is-active { box-shadow: inset -3px 0 0 var(--green); }
.fopt__thumb {
  width: 58px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.fopt__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fopt__thumb i { font-size: 1.3rem; color: var(--green); }
.fopt__main { display: grid; gap: 2px; min-width: 0; }
.fopt__name { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt__name mark { background: var(--green-soft); color: var(--green); border-radius: 3px; padding-inline: 1px; }
.fopt__meta { display: flex; gap: 10px; font-size: .76rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; }
.fopt__meta .mono { direction: ltr; }
.fopt__end { display: grid; justify-items: end; gap: 2px; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.fopt__end small { font-weight: 500; color: var(--text-mute); }
.fopt--intent .fopt__thumb { background: var(--green-soft); border-color: var(--green-line); }
.fopt--intent .fopt__end { color: var(--green); }

.fnone { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 12px; }
.fnone h3 { font-size: 1.05rem; }
.fnone p { color: var(--text-mute); font-size: .9rem; }

.finder__keys {
  max-width: 920px;
  display: flex;
  gap: 18px;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--text-mute);
}
.finder__keys span { display: inline-flex; align-items: center; gap: 6px; }
@media (hover: none) { .finder__keys { display: none; } }

.fskel { height: 92px; border-radius: var(--r); border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 260% 100%;
  animation: shimmer 1.25s linear infinite; }

@media (max-width: 640px) {
  .fopt { grid-template-columns: 48px 1fr; }
  .fopt__thumb { width: 48px; height: 38px; }
  .fopt__end { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: 10px; }
  .ftiles { grid-template-columns: repeat(2, 1fr); }
  .cart__head, .cart__foot { padding-inline: 16px; }
  .cart__body { padding-inline: 16px; }
  .line { grid-template-columns: 56px 1fr; }
  .line__thumb { width: 56px; height: 42px; }
  .line__side { grid-column: 2; grid-auto-flow: column; justify-content: space-between; align-items: center; }
}

/* ─── 404 / offline: system error ────────────────────────── */
.err { padding-block: clamp(48px, 9vw, 110px); }
.err__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.err__code {
  font-family: var(--mono);
  font-size: clamp(4rem, 13vw, 9.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--green);
  direction: ltr;
  text-shadow: 0 0 48px var(--green-soft);
  white-space: nowrap;
}
.err__copy { display: grid; gap: 16px; min-width: 0; }
.err__copy h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.err__copy p { color: var(--text-mid); max-width: 48ch; }
.err__log {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .8rem;
  line-height: 1.9;
  color: var(--text-mid);
  text-align: left;
  white-space: pre;
  overflow-x: auto;
}
.err__cursor { color: var(--green); animation: errBlink 1s steps(1) infinite; }
@keyframes errBlink { 50% { opacity: 0; } }
.err__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.err__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; }
.err__links a { color: var(--text-mid); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.err__links a:hover { color: var(--green); border-bottom-color: var(--green-line); }
@media (max-width: 900px) { .err__inner { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .slotart__scan, .flat .flat__blip, .err__cursor { animation: none; }
}