/* ===========================================================================
   نسق — design system

   The rule that governs everything here: separation comes from SPACE first,
   a hairline second, and a filled surface only when something genuinely needs
   to lift off the page. Boxing every block in a bordered card is what makes an
   interface look assembled rather than designed.

   Marketing runs light; the editor runs dark, because you cannot judge colour
   in a video against a bright surround — the same reason every professional
   NLE is dark. Both share one type scale, one spacing rhythm, one accent.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- Neutrals -----------------------------------------------------------
     Warm-tinted rather than pure grey: a touch of yellow in the neutrals keeps
     the bronze accent from reading as a foreign object. */
  --paper:       #fdfdfb;
  --surface:     #ffffff;
  --sunken:      #f5f4f0;
  --ink:         #16150f;
  --ink-2:       #56544c;
  /* Dimmer text must still clear WCAG AA (4.5:1) on --paper at .8125rem. */
  --ink-3:       #5f5c54;
  --hairline:    rgba(22, 21, 15, .09);
  --hairline-2:  rgba(22, 21, 15, .16);

  /* --- Accent -------------------------------------------------------------
     One accent, deliberately deep. The old site's bright gold gradient read as
     costume jewellery; bronze at small surface area reads as considered. */
  --accent:      #8a6a1f;
  --accent-ink:  #ffffff;
  --accent-tint: rgba(138, 106, 31, .08);
  --accent-line: rgba(138, 106, 31, .22);

  /* --- Severity -----------------------------------------------------------
     Used as small indicators only — never as a filled panel behind text.
     Four coloured blocks stacked is a traffic light, not a report. */
  --critical: #b4372e;
  --warn:     #9a6b10;
  --info:     #2f5d94;
  --good:     #2b6b45;

  /* --- Type ---------------------------------------------------------------
     Tajawal first (Saudi-familiar, requested for this product). IBM Plex and
     Almarai stay as fallbacks so a blocked Google Fonts request still reads. */
  --font: 'Tajawal', 'IBM Plex Sans Arabic', 'Almarai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Rhythm -------------------------------------------------------------
     8px base. Named by role, not by number, so spacing decisions stay honest. */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* Apple's easing: fast out, long settle. Nothing linear. */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --shadow-sm: 0 1px 2px rgba(22,21,15,.05), 0 1px 1px rgba(22,21,15,.03);
  --shadow:    0 4px 16px rgba(22,21,15,.07), 0 1px 2px rgba(22,21,15,.04);
  --shadow-lg: 0 24px 64px rgba(22,21,15,.11), 0 2px 8px rgba(22,21,15,.05);
}

/* --- Dark surface, used by the editor and any section that opts in -------- */
.dark, [data-theme='dark'] {
  --paper:      #0d0d0e;
  --surface:    #131315;
  --sunken:     #0a0a0b;
  --ink:        #f4f3ef;
  --ink-2:      #a3a099;
  /* Dimmer text on --paper #0d0d0e: #9a978f is ~5.8:1, above AA for small type. */
  --ink-3:      #9a978f;
  --hairline:   rgba(255, 255, 255, .09);
  --hairline-2: rgba(255, 255, 255, .17);

  --accent:      #d4ac54;
  --accent-ink:  #17140c;
  --accent-tint: rgba(212, 172, 84, .10);
  --accent-line: rgba(212, 172, 84, .26);

  --critical: #e8685c;
  --warn:     #e0a63c;
  --info:     #6ba3e8;
  --good:     #52c584;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.6);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Physical insets: env(safe-area-inset-left) is always the device's left
     (notch / home indicator), which is NOT inline-start under dir=rtl. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  /* Arabic needs more leading than Latin at the same size to read calmly. */
  line-height: 1.85;
  font-size: 17px;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  /* --kb is the occluded bottom from visualViewport (iOS keyboard). */
  padding-bottom: var(--kb, 0px);
  /* iOS Safari: 100dvh shrinks with the URL bar; svh is the small-viewport floor. */
  min-height: 100svh;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-tint); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: off-canvas until focused, then sits above the sticky nav. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--s4);
  top: -80px;
  z-index: 400;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.2;
}
.skip-link:focus {
  top: calc(var(--s3) + var(--safe-t));
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* --- Type scale ----------------------------------------------------------
   Big jumps between levels. Timid 1.15x steps are why interfaces look flat. */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }

.display {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.title   { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.18; letter-spacing: -.025em; }
.heading { font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.3; letter-spacing: -.02em; }
.subhead { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.5; }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
  line-height: 1.75;
  color: var(--ink-2);
  font-weight: 400;
}
.small  { font-size: .9375rem; line-height: 1.7; }
.tiny   { font-size: .8125rem; line-height: 1.6; }

/* A quiet section marker — replaces the badge-in-a-pill habit. */
.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9em; }
.dim  { color: var(--ink-2); }
.dimmer { color: var(--ink-3); }

/* Latin/numeric runs inside Arabic. Without an isolate the bidi algorithm
   reorders them — "1080x1920" renders as "1920x1080", which on a diagnostic
   tool means showing the user the wrong answer. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }

/* --- Layout -------------------------------------------------------------- */

.wrap        { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.wrap-text   { width: min(680px, calc(100% - 48px)); margin-inline: auto; }
.wrap-wide   { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }

.section     { padding-block: clamp(72px, 11vw, 150px); }
.section-sm  { padding-block: clamp(48px, 7vw, 88px); }

/* A hairline is the correct amount of structure most of the time. */
.rule        { border: 0; border-top: 1px solid var(--hairline); }
.bordered-t  { border-top: 1px solid var(--hairline); }
.bordered-b  { border-bottom: 1px solid var(--hairline); }

.stack > * + * { margin-top: var(--gap, var(--s4)); }
.row     { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.between { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* --- Buttons -------------------------------------------------------------
   Solid or quiet. No gradients: a gradient on a button is decoration standing
   in for hierarchy. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px 24px;
  min-height: 44px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  background: transparent;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              transform .22s var(--ease), opacity .22s var(--ease), color .22s var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { opacity: .88; }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover:not(:disabled) { opacity: .85; }

.btn-quiet { border-color: var(--hairline-2); color: var(--ink); }
.btn-quiet:hover:not(:disabled) { background: var(--sunken); border-color: var(--ink-3); }

.btn-plain { padding-inline: 4px; color: var(--ink-2); }
.btn-plain:hover:not(:disabled) { color: var(--ink); }

.btn-lg { padding: 16px 32px; font-size: 1rem; min-height: 48px; }
.btn-sm { padding: 10px 18px; font-size: .875rem; min-height: 44px; }
.btn-block { width: 100%; }

/* A link that reads as an action without shouting. */
.link {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 1px;
  transition: border-color .22s var(--ease);
}
.link:hover { border-bottom-color: var(--accent); }

/* --- Surfaces ------------------------------------------------------------
   Deliberately few. `.panel` is for things that genuinely float (a preview, a
   form). Ordinary content groups get whitespace and a rule instead. */

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.panel-flush { padding: 0; overflow: hidden; }

/* --- Severity indicator ---------------------------------------------------
   A dot carries the same information as a coloured panel without turning the
   page into a traffic light. */

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; background: var(--ink-3);
  margin-top: .65em;
}
.dot-critical { background: var(--critical); }
.dot-warn     { background: var(--warn); }
.dot-info     { background: var(--info); }
.dot-good     { background: var(--good); }

.sev-label { font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.sev-critical { color: var(--critical); }
.sev-warn     { color: var(--warn); }
.sev-info     { color: var(--info); }
.sev-good     { color: var(--good); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live { animation: pulse 2.4s var(--ease) infinite; }

/* --- Definition rows ------------------------------------------------------
   Replaces the boxed spec grid: label above value, separated by space, with a
   single rule above the group. */

.defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--s5) var(--s4);
}
.def dt { font-size: .75rem; font-weight: 500; color: var(--ink-3); margin-bottom: 2px; }
.def dd { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

/* --- Forms ---------------------------------------------------------------- */

.field { display: block; }
.field > .label {
  display: block;
  font-size: .8125rem; font-weight: 600; color: var(--ink-2);
  margin-bottom: var(--s2);
}
.input, .select, .textarea {
  width: 100%;
  padding: 13px 16px;
  min-height: 44px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  /* 16px is the iOS Safari floor — anything smaller zooms the page on focus. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.textarea { resize: vertical; min-height: 104px; line-height: 1.7; }
.select { cursor: pointer; appearance: none; background-image: none; }

.range {
  width: 100%; accent-color: var(--accent); cursor: pointer;
  /* Visible track stays thin; the 44px height is the finger target. */
  height: 44px; margin: 0; background: transparent;
  touch-action: pan-y;
}

.check {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 44px;
  cursor: pointer; font-size: .9375rem; color: var(--ink-2);
}
.check input { accent-color: var(--accent); width: 22px; height: 22px; flex-shrink: 0; cursor: pointer; }
.check:hover { color: var(--ink); }

/* --- Segmented control (iOS-style) ---------------------------------------- */

.segmented {
  display: inline-flex;
  background: var(--sunken);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  flex: 1;
  padding: 8px 16px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
  padding-top: var(--safe-t);
}
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  height: 58px;
}
.logo {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 1px;
  min-height: 44px;
}
.logo i { font-style: normal; color: var(--ink-3); font-weight: 400; }
.nav-links { display: flex; gap: var(--s5); list-style: none; align-items: center; }
.nav-links a {
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center;
  min-height: 44px;
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--ink); }

.footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s7);
  padding-bottom: calc(var(--s7) + var(--safe-b));
  color: var(--ink-3);
}
.footer a { color: var(--ink-2); transition: color .2s var(--ease); }
.footer a:hover { color: var(--ink); }

/* --- Utility -------------------------------------------------------------- */

.hidden { display: none !important; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

.spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--hairline-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

/* Entrance: content settles in rather than popping. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s var(--ease-out) both; }
.rise-1 { animation-delay: .06s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .18s; }
.rise-4 { animation-delay: .24s; }

/* --- Responsive ----------------------------------------------------------- */

/* Compact 3-step "how it works" — used on the landing page and the editor pick view. */
.howto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.howto-n {
  font-family: var(--mono); font-size: .8125rem; color: var(--accent);
  padding-bottom: var(--s3); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--hairline);
}

.empty {
  padding: var(--s5) 0;
  color: var(--ink-3);
  font-size: .9375rem;
}

.status-line {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: baseline;
  font-size: .875rem;
}

/* Honest capability list: what this browser can actually do. */
.caps-list {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: var(--s3) 0 0;
}
.caps-list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--s3);
  align-items: start;
  min-height: 44px;
  padding-block: var(--s2);
  font-size: .9375rem;
  border-top: 1px solid var(--hairline);
}
.caps-list li:first-child { border-top: 0; }
.caps-mark { font-weight: 700; line-height: 1.6; }
.caps-ok .caps-mark { color: var(--good); }
.caps-no .caps-mark { color: var(--ink-3); }
.caps-note { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: 2px; }

.progress {
  height: 3px; background: var(--hairline); border-radius: 2px; overflow: hidden;
}
.progress > i {
  display: block; height: 100%; width: 0; background: var(--accent);
  transition: width .25s var(--ease);
}
.progress.indet > i {
  width: 32%;
  animation: indet 1.15s var(--ease) infinite;
}
@keyframes indet {
  0%   { transform: translateX(120%); }
  100% { transform: translateX(-350%); }
}

.job-meta {
  display: flex; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s2);
  font-size: .8125rem; color: var(--ink-3);
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.notice { padding: var(--s4); border-radius: var(--r); font-size: .875rem; line-height: 1.6; }
.notice-warn { background: rgba(224,166,60,.09); color: var(--warn); }
.notice-bad  { background: rgba(180,55,46,.08); color: var(--critical); }
.notice-good { background: rgba(43,107,69,.08); color: var(--good); }
[data-theme='dark'] .notice-bad  { background: rgba(232,104,92,.09); }
[data-theme='dark'] .notice-good { background: rgba(82,197,132,.09); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap, .wrap-text, .wrap-wide { width: min(100%, calc(100% - 32px)); }
  .nav-links { display: none; }
  .panel { padding: var(--s5); }
  .howto { grid-template-columns: 1fr; gap: var(--s4); }
  .hero-actions .btn { width: 100%; }
}

/* Scrollbar: present but not decorative. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hairline-2);
  border-radius: var(--r-full);
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }