/* زاد — الدعم
   ─────────────────────────────────────────────────────────────────────────
   The app's own palette, because a support site that looks like a different
   product makes people wonder whether they are still talking to you: cream
   and deep green, gold for what is still waiting on someone. Flat by design —
   no drop shadows doing the work a border should do — and every motion is
   150-200ms, or none at all when the reader asked for none. */
:root {
  color-scheme: light;
  --bg: #f4efe3;
  --bg-glow: rgba(44, 138, 85, 0.09);
  --surface: #fbf8f0;
  --surface2: #efe9db;
  --border: rgba(23, 37, 29, 0.13);
  --border-strong: rgba(23, 37, 29, 0.22);
  --text: #17251d;
  --muted: #5c6d64;
  /* Measured, not picked by eye: #2c8a55 on the light card is 4.06:1 — under
     the 4.5 a chip's own label needs — and this accent IS text (chips, links,
     the «رد جديد» flag), not just a border. #1f6845 clears it at 6.1:1. */
  --mint: #1f6845;
  --mint-solid: #24734e;
  --mint-wash: rgba(44, 138, 85, 0.09);
  --on-mint: #ffffff;
  /* 4.45:1 over its own wash — a hair under. #79570f clears it. */
  --gold: #79570f;
  --gold-wash: rgba(154, 114, 32, 0.11);
  --danger: #a92f24;
  --danger-wash: rgba(169, 47, 36, 0.09);
  --ring: rgba(44, 138, 85, 0.45);
}
:root[data-theme="dark"], html:not([data-theme="light"]) {
  /* placeholder so the selector list below stays symmetrical */
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #07130f;
    --bg-glow: rgba(112, 197, 143, 0.07);
    --surface: #0c1e17;
    --surface2: #112a20;
    --border: rgba(181, 211, 194, 0.15);
    --border-strong: rgba(181, 211, 194, 0.28);
    --text: #f4f0e7;
    --muted: #a8bbb3;
    --mint: #70c58f;
    --mint-solid: #70c58f;
    --mint-wash: rgba(112, 197, 143, 0.11);
    --on-mint: #07130f;
    --gold: #e1b457;
    --gold-wash: rgba(225, 180, 87, 0.12);
    --danger: #e7564a;
    --danger-wash: rgba(231, 86, 74, 0.12);
    --ring: rgba(112, 197, 143, 0.5);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Zain, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100dvh;
  /* One soft light behind the page. Not a gradient for its own sake: the
     signed-out screen is mostly empty by nature, and a flat void reads as a
     page that failed to load. */
  background-image: radial-gradient(120% 55% at 50% -10%, var(--bg-glow), transparent 70%);
  background-attachment: fixed;
}
a { color: var(--mint); text-underline-offset: 3px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 20px 20px 80px; }
svg { width: 1em; height: 1em; flex: none; }

/* ── chrome ─────────────────────────────────────────────────────────────── */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; }
.mark {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--mint-solid); color: var(--on-mint);
  font-weight: 700; font-size: 19px; line-height: 1;
  padding-bottom: 3px;
}
.brand .name { display: flex; flex-direction: column; line-height: 1.25; }
.brand b { font-size: 17px; }
/* Scoped to .name on purpose: a bare `.brand span` also matched the mark and
   painted the «ز» muted-grey at 12px inside its own badge. */
.brand .name span { color: var(--muted); font-size: 12.5px; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.who img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); }
.who .name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

h1 { font-size: 25px; letter-spacing: -0.2px; }
h2 { font-size: 19px; }
p.lede { color: var(--muted); margin-top: 3px; }
.head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; margin: 24px 0 14px; flex-wrap: wrap;
}

/* ── controls ───────────────────────────────────────────────────────────── */
button, .button {
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
button svg, .button svg { font-size: 17px; }
button:hover:not(:disabled), .button:hover { background: var(--surface2); border-color: var(--border-strong); }
button.primary { background: var(--mint-solid); border-color: var(--mint-solid); color: var(--on-mint); }
button.primary:hover:not(:disabled) { filter: brightness(1.1); background: var(--mint-solid); }
button.quiet { background: none; border-color: transparent; color: var(--muted); }
button.quiet:hover { color: var(--text); background: var(--surface2); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
:where(button, a, input, textarea, select, .row):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}

input, textarea, select {
  font: inherit; font-size: 15px; width: 100%;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color 160ms ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }
input:focus, textarea:focus { border-color: var(--border-strong); }
textarea { line-height: 1.9; resize: vertical; min-height: 96px; }
label.field { display: block; margin-bottom: 18px; }
label.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.counter { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); }

/* ── the way in ─────────────────────────────────────────────────────────── */
.center { max-width: 460px; margin: 44px auto; text-align: center; }
.gate-mark {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 19px;
  display: grid; place-items: center; font-size: 27px;
  color: var(--mint); background: var(--mint-wash);
  border: 1px solid var(--border);
}
.center h1 { margin-bottom: 8px; }
.center > p { color: var(--muted); margin: 0 auto; max-width: 42ch; }
.gate-card {
  margin-top: 22px; padding: 20px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.gate-card > small { color: var(--muted); font-size: 12.5px; }
/* Three promises, not a wall of text — the reader is deciding whether signing
   in is worth it, and a list answers that faster than a paragraph. */
.assurances { list-style: none; display: grid; gap: 10px; margin-top: 22px; text-align: start; }
.assurances li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: 14px; }
.assurances svg { font-size: 18px; color: var(--mint); margin-top: 3px; }
.assurances b { color: var(--text); font-weight: 600; }

/* ── the list ───────────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 9px; }
.row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px; width: 100%; height: auto;
  padding: 13px 14px; text-align: right; font-weight: 400;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.row:hover { background: var(--surface2); border-color: var(--border-strong); }
.row .lines { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.row strong { font-size: 15.5px; font-weight: 600; }
.row small { color: var(--muted); font-size: 12.5px; }
.row > .go { color: var(--muted); font-size: 17px; display: grid; place-items: center; }
.row:hover > .go { color: var(--mint); }
.badge {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  font-size: 19px; background: var(--mint-wash); color: var(--mint);
  border: 1px solid var(--border);
}
.badge.bug { background: var(--danger-wash); color: var(--danger); }
.badge.idea { background: var(--gold-wash); color: var(--gold); }

/* A word AND a colour, never a colour alone. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap; border: 1px solid var(--border);
  color: var(--muted); background: var(--surface2);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.open { color: var(--gold); border-color: var(--gold-wash); background: var(--gold-wash); }
.chip.active { color: var(--mint); border-color: var(--mint-wash); background: var(--mint-wash); }
.chip.plain::before { display: none; }
.flag {
  font-size: 11.5px; font-weight: 700; color: var(--mint);
  background: var(--mint-wash); border-radius: 999px; padding: 2px 8px;
}

/* ── the thread ─────────────────────────────────────────────────────────── */
.thread { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 22px; }
.bubble {
  max-width: 78%; padding: 13px 15px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; gap: 9px;
}
.bubble.reader { align-self: flex-start; border-start-start-radius: 5px; }
.bubble.support {
  align-self: flex-end; border-start-end-radius: 5px;
  border-color: var(--mint-wash); background: var(--mint-wash);
}
.bubble header { display: flex; gap: 9px; align-items: baseline; font-size: 12px; color: var(--muted); }
.bubble strong { font-size: 13px; color: var(--text); font-weight: 600; }
.bubble p { white-space: pre-wrap; }
.meta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.shots { display: flex; gap: 10px; flex-wrap: wrap; }
.shot {
  width: 132px; height: 99px; border-radius: 12px; overflow: hidden; position: relative;
  border: 1px solid var(--border); background: var(--surface2);
  display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center;
  transition: border-color 160ms ease;
}
a.shot:hover { border-color: var(--mint); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot button {
  position: absolute; inset-inline-end: 6px; top: 6px;
  height: 28px; width: 28px; padding: 0; border-radius: 9px;
  background: rgba(0, 0, 0, 0.62); color: #fff; border: 0; font-size: 15px;
}
.shot button:hover { background: rgba(0, 0, 0, 0.8); }

/* ── surfaces & states ──────────────────────────────────────────────────── */
.card { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.actions .spacer { flex: 1 1 auto; }
.hint { color: var(--muted); font-size: 12.5px; }
.note { color: var(--gold); font-size: 13px; margin-top: 10px; }
.error { color: var(--danger); font-size: 13.5px; margin-top: 10px; }
.empty { text-align: center; padding: 64px 16px; color: var(--muted); }
.empty > svg { font-size: 42px; color: var(--mint); opacity: 0.75; margin-bottom: 12px; }
.empty h3 { color: var(--text); font-size: 18px; margin-bottom: 5px; }
.hidden { display: none !important; }

/* Something in the shape of the answer, so the page does not jump when it
   arrives — three rows of the right height, not a spinner in a void. */
.skeleton { display: flex; flex-direction: column; gap: 9px; }
.skeleton i {
  display: block; height: 70px; border-radius: 15px;
  border: 1px solid var(--border); background: var(--surface);
  animation: pulse 1.4s ease-in-out infinite;
}
.skeleton i:nth-child(2) { animation-delay: 0.15s; }
.skeleton i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.segmented { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented button { height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; border-radius: 10px; }
.segmented button.on { border-color: var(--mint); color: var(--mint); background: var(--mint-wash); }
.stats { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 8px; }

footer.foot {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 13px;
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}

/* ── على الموبايل ───────────────────────────────────────────────────────────
   Where a support site is actually used: someone hit the bug on their phone
   and reached for it right then. Rows wrap instead of squeezing their words,
   fields are 16px so iOS does not zoom the page on focus, and the layout
   keeps clear of the notch. */
.row small, .bubble p, .who span { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .wrap {
    padding: 12px max(14px, env(safe-area-inset-right)) calc(56px + env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }
  header.top { padding: 12px 0; }
  .who .name { display: none; }
  h1 { font-size: 21px; }
  .head { margin: 18px 0 12px; }
  .row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas: "badge lines go" "chip chip chip";
    row-gap: 9px; padding: 12px;
  }
  .row > .badge { grid-area: badge; width: 38px; height: 38px; font-size: 17px; }
  .row > .lines { grid-area: lines; }
  .row > .go { grid-area: go; }
  .row > .chip { grid-area: chip; justify-self: start; }
  input, textarea, select { font-size: 16px; }
  button, .button { height: 44px; }
  .segmented button { height: 38px; }
  .actions button:not(.quiet) { flex: 1 1 auto; }
  .bubble { max-width: 92%; }
  .shot { width: calc(50% - 5px); height: 112px; }
  .center { margin: 24px auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}