/* DzRouter "pixel" skin for the website. Loaded only when Admin → Settings → Skin is "Pixel"
 * (then <html data-skin="pixel">). It only overrides site.css + models.css; the classic look is untouched.
 * Light/dark follows the site's own mode tokens (site.css); the pixel-specific ones are below.
 *
 * Readability rule: pixel fonts only where they render large (headings, logo, big numbers, code).
 * Everything small (buttons, chips, labels, menus, table headers) stays in IBM Plex Sans; the pixel
 * feel there comes from the shapes: notched corners, bevels, hard shadows.
 * Art: public/site/pixel/*.svg, built by scripts/brand/build_pixel_assets.py.
 * Pixel fonts have no Arabic glyphs: the browser falls back to IBM Plex Sans Arabic per character. */
[data-skin="pixel"] {
  --radius: 0px;
  --px: 4px;                     /* one "art pixel": borders, notches, shadows */
  --hard: #020604;               /* hard drop shadow */
  --offset: #0b6b3a;             /* offset shadow behind accent headings */
  --dither: color-mix(in srgb, var(--accent) 3.5%, transparent);
  --sky: url("/site/pixel/sky.svg");
  --dunes: url("/site/pixel/dunes.svg");
  --display: "Pixelify Sans", var(--sans);
  --crt: "VT323", var(--mono);
  --notch: polygon(0 var(--px), var(--px) var(--px), var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%,
    var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}
/* light mode: darker hard shadows, pale offset, day scene */
[data-skin="pixel"][data-mode="light"] {
  --hard: #1d3328; --offset: #b9dfc4; --dither: color-mix(in srgb, var(--accent) 5%, transparent);
  --sky: url("/site/pixel/sky-light.svg"); --dunes: url("/site/pixel/dunes-light.svg");
}
@media (prefers-color-scheme: light) {
  [data-skin="pixel"]:not([data-mode="dark"]) {
    --hard: #1d3328; --offset: #b9dfc4; --dither: color-mix(in srgb, var(--accent) 5%, transparent);
    --sky: url("/site/pixel/sky-light.svg"); --dunes: url("/site/pixel/dunes-light.svg");
  }
}

[data-skin="pixel"] body {
  background-image: repeating-conic-gradient(var(--dither) 0 25%, transparent 0 50%);
  background-size: 4px 4px;
}
[data-skin="pixel"] ::selection { background: var(--accent); color: var(--accent-ink); }
[data-skin="pixel"] :focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }

/* ── type: pixel fonts only at large sizes ── */
[data-skin="pixel"] h1, [data-skin="pixel"] h2, [data-skin="pixel"] h3, [data-skin="pixel"] .brand,
[data-skin="pixel"] .rate, [data-skin="pixel"] .nf .big, [data-skin="pixel"] .mstats b, [data-skin="pixel"] .est-total b {
  font-family: var(--display); letter-spacing: 0;
}
[data-skin="pixel"] h1 { font-weight: 700; }
[data-skin="pixel"] h2 { font-weight: 600; }
[data-skin="pixel"] h3 { font-size: 19px; font-weight: 600; }
[data-skin="pixel"] .hero h1 em, [data-skin="pixel"] .rate, [data-skin="pixel"] .est-total b { color: var(--accent); text-shadow: var(--px) var(--px) 0 var(--offset); }
/* small labels: crisp sans, uppercase, spaced */
[data-skin="pixel"] .badge, [data-skin="pixel"] .num-badge, [data-skin="pixel"] .pill, [data-skin="pixel"] .chip,
[data-skin="pixel"] .tbl thead th, [data-skin="pixel"] .ftr h4, [data-skin="pixel"] .mb {
  font-family: var(--sans); font-weight: 700; letter-spacing: .06em;
}
[data-skin="pixel"][lang="ar"] .badge, [data-skin="pixel"][lang="ar"] .chip, [data-skin="pixel"][lang="ar"] .tbl thead th { letter-spacing: 0; }

/* ── header ── */
[data-skin="pixel"] .hdr { backdrop-filter: none; border-bottom: var(--px) solid var(--border); }
[data-skin="pixel"] .hdr-in { height: 68px; }
[data-skin="pixel"] .logo { height: 44px; width: 50px; image-rendering: pixelated; }
[data-skin="pixel"] .brand { font-size: 22px; font-weight: 600; }
[data-skin="pixel"] .nav > a:not(.btn) { font-weight: 600; }
[data-skin="pixel"] .langs, [data-skin="pixel"] .langs a, [data-skin="pixel"] .menu-btn, [data-skin="pixel"] .mode-btn { border-radius: 0; }
[data-skin="pixel"] .langs, [data-skin="pixel"] .menu-btn, [data-skin="pixel"] .mode-btn { border-width: 2px; }

/* ── buttons: notched corners, bevel, press down one pixel ── */
[data-skin="pixel"] .btn {
  border-radius: 0; border: 0; clip-path: var(--notch); font-family: var(--sans); font-weight: 700; font-size: 15px;
  letter-spacing: .01em; padding: 13px 24px; transition: none;
  box-shadow: inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 rgba(0, 0, 0, .3), inset var(--px) var(--px) 0 rgba(255, 255, 255, .22);
}
[data-skin="pixel"] .btn:hover { transform: none; filter: brightness(1.08); }
[data-skin="pixel"] .btn:active { transform: translate(2px, 2px); box-shadow: inset var(--px) var(--px) 0 rgba(0, 0, 0, .3); }
[data-skin="pixel"] .btn-ghost { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--border-2), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 rgba(0, 0, 0, .18); }
[data-skin="pixel"] .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--accent), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 rgba(0, 0, 0, .18); }
[data-skin="pixel"] .btn-sm { padding: 9px 16px; font-size: 14px; }

/* ── hero: flat sky, the dune scene with the monument along the bottom ── */
[data-skin="pixel"] .hero { position: relative; background: none; padding-bottom: 196px; overflow: hidden; }
[data-skin="pixel"] .hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 180px; pointer-events: none;
  background: var(--sky) center bottom / auto 128px no-repeat, var(--dunes) left bottom / auto 52px repeat-x;
  image-rendering: pixelated;
}
[data-skin="pixel"] .badge { border-radius: 0; border-width: 2px; clip-path: var(--notch); padding: 6px 14px; font-size: 12px; text-transform: uppercase; }
[data-skin="pixel"] .flag { border-radius: 0; }

/* ── terminal & code: CRT font, scanlines, blinking block cursor ── */
[data-skin="pixel"] .term, [data-skin="pixel"] .code-card, [data-skin="pixel"] .docs pre.code {
  border-radius: 0; border-width: 2px; box-shadow: 8px 8px 0 var(--hard);
}
[data-skin="pixel"] .term { position: relative; }
[data-skin="pixel"] .term::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}
[data-skin="pixel"] .term-bar i { border-radius: 0; }
[data-skin="pixel"] .term pre, [data-skin="pixel"] pre.code { font-family: var(--crt); font-size: 20px; line-height: 1.3; }
[data-skin="pixel"] .term pre::after { content: "\2588"; color: var(--code-accent); animation: px-blink 1s steps(1) infinite; margin-inline-start: 2px; }
[data-skin="pixel"] .term .hl, [data-skin="pixel"] .code-tabs button, [data-skin="pixel"] code { border-radius: 0; }
@keyframes px-blink { 50% { opacity: 0; } }

/* ── surfaces ── */
[data-skin="pixel"] .card, [data-skin="pixel"] .steps li, [data-skin="pixel"] .faq details, [data-skin="pixel"] .tbl-wrap,
[data-skin="pixel"] .empty, [data-skin="pixel"] .mrow, [data-skin="pixel"] .idbox {
  border-radius: 0; border-width: 2px; box-shadow: 6px 6px 0 var(--hard);
}
[data-skin="pixel"] .feat:hover, [data-skin="pixel"] .mrow:hover { border-color: var(--accent); }
[data-skin="pixel"] .steps li::before { border-radius: 0; font-family: var(--display); font-size: 18px; clip-path: var(--notch); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25); }
[data-skin="pixel"] .feat-ic, [data-skin="pixel"] .pav { border-radius: 0; border-width: 2px; }
[data-skin="pixel"] .chip { border-radius: 0; border-width: 2px; clip-path: var(--notch); font-size: 12.5px; padding: 8px 16px; }
[data-skin="pixel"] .pill { border-radius: 0; font-size: 12px; }
[data-skin="pixel"] .m-icon { border-radius: 0; }
[data-skin="pixel"] .ticks li::before { content: ""; width: 10px; height: 10px; top: .55em; background: var(--accent); box-shadow: 3px 3px 0 var(--offset); }

/* ── tables, filters, toggles ── */
[data-skin="pixel"] .tbl thead th { font-size: 11.5px; }
[data-skin="pixel"] .tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
[data-skin="pixel"] .filters input, [data-skin="pixel"] .filters select, [data-skin="pixel"] .cur-toggle button,
[data-skin="pixel"] .msearch, [data-skin="pixel"] .mb-controls select, [data-skin="pixel"] .est-grid input, [data-skin="pixel"] .copy-id {
  border-radius: 0; border-width: 2px;
}
[data-skin="pixel"] .msearch:focus-within { box-shadow: 4px 4px 0 var(--offset); }
[data-skin="pixel"] .cur-toggle button { font-weight: 700; }

/* ── model browser & model pages ── */
[data-skin="pixel"] .mb-toolbar { backdrop-filter: none; border-bottom-width: 2px; top: 68px; }
[data-skin="pixel"] .cchip, [data-skin="pixel"] .pchip { border-radius: 0; border-width: 2px; font-weight: 600; }
[data-skin="pixel"] .cchip[aria-pressed="true"], [data-skin="pixel"] .pchip.on { box-shadow: 3px 3px 0 var(--offset); }
[data-skin="pixel"] .mb { border-radius: 0; font-size: 11px; text-transform: uppercase; }
[data-skin="pixel"] .mrow-title b { font-size: 16px; }
[data-skin="pixel"] .mrow-stats b, [data-skin="pixel"] .mrow-id { font-family: var(--mono); }
[data-skin="pixel"] .estimator .chip { clip-path: none; }
[data-skin="pixel"] .rate-card { border-width: var(--px); }

/* ── faq: pixel arrow instead of + / − ── */
[data-skin="pixel"] .faq summary { font-weight: 600; }
[data-skin="pixel"] .faq summary::after { content: ""; flex-shrink: 0; width: 0; height: 0; margin-top: 6px; border-block: 6px solid transparent; border-inline-start: 8px solid var(--accent); }
[data-skin="pixel"] .faq details[open] summary::after { content: ""; transform: rotate(90deg); }

/* ── docs & legal ── */
[data-skin="pixel"] .docs h2, [data-skin="pixel"] .prose h2 { padding-bottom: 6px; border-bottom: var(--px) dotted var(--border-2); }

/* ── call-to-action band and section edges ── */
[data-skin="pixel"] .cta-band { position: relative; background: var(--bg-2); padding-bottom: 120px; border-top-width: var(--px); }
[data-skin="pixel"] .cta-band::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 52px; pointer-events: none;
  background: var(--dunes) left bottom / auto 52px repeat-x; image-rendering: pixelated;
}
[data-skin="pixel"] .sec.alt { border-block-width: var(--px); }
[data-skin="pixel"] .ftr { border-top-width: var(--px); }
[data-skin="pixel"] .ftr-bottom { border-top-style: dashed; }
[data-skin="pixel"] .nf .big { color: var(--accent); text-shadow: 6px 6px 0 var(--offset); }

@media (max-width: 820px) {
  [data-skin="pixel"] .nav { border-bottom-width: var(--px); }
}
@media (max-width: 600px) {
  [data-skin="pixel"] .hero { padding-bottom: 160px; }
  [data-skin="pixel"] .hero::after { height: 150px; } /* whole-pixel scales: sky and dunes stay at 2 px per cell */
  [data-skin="pixel"] .term pre, [data-skin="pixel"] pre.code { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-skin="pixel"] .term pre::after { animation: none; }
}

/* ── review fixes ── */
/* solid header and model toolbar: the hero scene must not show through when scrolling */
[data-skin="pixel"] .hdr, [data-skin="pixel"] .mb-toolbar { background: var(--bg); }
/* small notes inside headings ("· par million de tokens") stay readable */
[data-skin="pixel"] h1 small, [data-skin="pixel"] h2 small, [data-skin="pixel"] h3 small { font-family: var(--sans); letter-spacing: 0; }
/* the search field's focus ring is drawn on its frame */
[data-skin="pixel"] .msearch input:focus-visible { outline: none; }
[data-skin="pixel"] .pulse-chip { border-radius: 0; border-width: 2px; clip-path: var(--notch); }