/* Palette matched to SDLE Review: teal family, amber accent, warm off-white
   surfaces. Token names mirror the ones used there (--teal-*, --amber, --ink,
   --line, --surface, --muted) so the two projects stay in step. */

:root{
  --teal-900:#04343A;      /* deepest — headings, ink */
  --teal-700:#0A5C66;
  --teal-500:#0C7C87;      /* primary interactive */
  --teal-300:#7FC6CE;      /* hairlines, rules */
  --teal-50:#E7F3F4;       /* washes */

  --amber:#9C6005;         /* secondary accent — pay, highlights */
  --amber-bg:#FBF1E0;
  --red:#A93226;
  --red-bg:#FAEBE8;

  --ink:#0F2A2E;
  --text:var(--ink);
  --muted:#5B7176;
  --tag-fg:#37545A;
  --ref:#9BAEB1;
  --placeholder:#9BAEB1;

  --bg:#F3F8F8;            /* page */
  --surface:#FFFFFF;       /* cards */
  --surface-2:#F0F6F6;     /* inputs, wells */
  --line:#D8E6E7;
  --line-soft:#E4EEEF;
  --line-2:#B9CFD1;

  --btn-fg:#FFFFFF;
  --lift:0 1px 2px rgba(15,42,46,.05);
  --shadow:0 10px 30px rgba(15,42,46,.18);
  --pad:clamp(16px,4vw,40px);
  color-scheme:light;
}

*{box-sizing:border-box}
/* .btn sets display:inline-flex, which outranks the hidden attribute's
   default. Without this, hiding a button by setting .hidden does nothing. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--pad) 110px}
.wrap.wide{max-width:860px}
::selection{background:var(--teal-500);color:var(--btn-fg)}

/* masthead */
header{padding:clamp(34px,7vw,76px) 0 26px}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.18em;
  color:var(--teal-500);text-transform:uppercase;margin:0 0 16px}
h1{font-family:Tajawal,sans-serif;font-weight:800;font-size:clamp(30px,7.5vw,54px);
  line-height:1.1;margin:0 0 18px;letter-spacing:-.015em;color:var(--teal-900)}
.standfirst{max-width:52ch;color:var(--muted);margin:0 0 20px;font-size:clamp(15px,2.4vw,16.5px)}
.standfirst a{color:var(--teal-500);text-decoration:none;border-bottom:1px solid var(--teal-300);
  padding-bottom:1px}
.standfirst a:hover{border-bottom-color:var(--teal-500)}
.count{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);
  letter-spacing:.04em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--teal-500);
  background:var(--teal-500);color:var(--btn-fg);border-radius:10px;padding:11px 20px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.btn:hover{background:var(--teal-700);border-color:var(--teal-700)}
.btn.ghost{background:transparent;color:var(--teal-500)}
.btn.ghost:hover{background:var(--teal-50)}
.btn.danger{background:transparent;border-color:#E4C9C5;color:var(--red)}
.btn.danger:hover{background:var(--red-bg);border-color:var(--red)}
.btn.sm{padding:7px 14px;font-size:13.5px;border-radius:8px}
.btn:disabled{opacity:.4;cursor:not-allowed}
:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}

.fab{position:fixed;inset-inline-end:18px;bottom:18px;z-index:20;box-shadow:var(--shadow)}

/* filters */
.filters{position:sticky;top:0;z-index:5;background:var(--bg);
  padding:14px 0 13px;border-bottom:1px solid var(--line-soft);margin-bottom:4px}
.filter-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.filter-row::-webkit-scrollbar{display:none}
.filter-row + .filter-row{margin-top:8px}
.pill{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:10px;padding:7px 15px;font-family:inherit;font-size:13.5px;cursor:pointer;
  white-space:nowrap;transition:color .14s ease,border-color .14s ease,background .14s ease}
.pill:hover{color:var(--text);border-color:var(--teal-300)}
.pill[aria-pressed="true"]{background:var(--teal-500);border-color:var(--teal-500);
  color:var(--btn-fg);font-weight:600}

/* city bands */
.city-mark{display:flex;align-items:baseline;gap:14px;padding:40px 0 14px}
.city-name{font-family:Tajawal,sans-serif;font-weight:800;font-size:clamp(21px,4.6vw,26px);
  line-height:1;letter-spacing:-.01em;white-space:nowrap;color:var(--teal-900)}
.city-rule{flex:1 1 auto;height:1px;background:linear-gradient(
  to left,var(--teal-300),var(--line) 55%,transparent)}
.city-count{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--teal-500);
  letter-spacing:.1em;white-space:nowrap;font-variant-numeric:tabular-nums}

/* job cards */
.job{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;
  box-shadow:var(--lift);padding:20px clamp(16px,3.6vw,24px);display:grid;gap:9px;
  margin-bottom:10px;transition:border-color .16s ease,box-shadow .16s ease}
.job:hover{border-color:var(--teal-300);box-shadow:0 2px 10px rgba(15,42,46,.08)}
.job h2{font-family:Tajawal,sans-serif;font-weight:700;font-size:clamp(17.5px,3.3vw,20px);
  margin:0;line-height:1.35;letter-spacing:-.005em;color:var(--teal-900)}
.where{color:var(--muted);font-size:14px;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.tag{font-size:12px;padding:4px 11px;border-radius:8px;background:var(--surface-2);
  color:var(--tag-fg);border:1px solid var(--line)}
.tag.pay{background:var(--amber-bg);color:var(--amber);border-color:#EBD9BC}
.tag.src{background:transparent;color:var(--muted)}
.tag.state{background:var(--amber-bg);color:var(--amber);border-color:#EBD9BC}
.tag.state.rejected{background:var(--red-bg);color:var(--red);border-color:#E4C9C5}
.note{font-size:13.5px;color:var(--muted);margin:0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:5px;padding-top:12px;border-top:1px solid var(--line-soft)}
.when{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);letter-spacing:.06em}
.ref{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ref)}
.actions{display:flex;gap:7px;flex-wrap:wrap}
.link{font-size:13.5px;font-weight:600;color:var(--teal-500);text-decoration:none;
  background:none;border:none;font-family:inherit;cursor:pointer;padding:0;
  border-bottom:1px solid var(--teal-300)}
.link:hover{border-bottom-color:var(--teal-500)}
.link.quiet{color:var(--muted);border-bottom-color:transparent;font-weight:400;font-size:12px}
.link.quiet:hover{color:var(--text);border-bottom-color:var(--line)}
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:11px 13px;
  background:var(--teal-50);border:1px solid var(--teal-300);border-radius:10px;font-size:14px}
.contact a{color:var(--teal-700);font-weight:600;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.02em}
.contact a:hover{color:var(--teal-900)}
.contact .sep{color:var(--teal-300)}

/* forms */
.field{display:grid;gap:6px;margin-bottom:18px}
.field label{font-size:13.5px;font-weight:600;letter-spacing:.01em}
.field .hint{font-size:12px;color:var(--muted);font-weight:400}
input,select,textarea{font-family:inherit;font-size:16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  color:var(--text);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--teal-500);background:var(--surface)}
input::placeholder{color:var(--placeholder)}
textarea{min-height:88px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;
  box-shadow:var(--lift);padding:clamp(20px,4vw,30px)}
.msg{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:18px}
.msg.err{background:var(--red-bg);color:var(--red);border:1px solid #E4C9C5}
.msg.ok{background:var(--teal-50);color:var(--teal-700);border:1px solid var(--teal-300)}

.empty{padding:60px 0;text-align:center;color:var(--muted)}
.empty strong{display:block;font-family:Tajawal,sans-serif;font-size:19px;color:var(--text);
  margin-bottom:6px;font-weight:700}
.demo-banner{background:var(--teal-900);color:#FFFFFF;text-align:center;padding:8px 14px;
  font-size:13px;font-weight:600;letter-spacing:.02em}
footer{margin-top:60px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--muted);line-height:1.75}
footer a{color:var(--teal-500);text-decoration:none;border-bottom:1px solid var(--teal-300)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- headline counters (public) ---- */
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;
  box-shadow:var(--lift);padding:10px 16px;display:flex;align-items:baseline;gap:7px}
.stat b{font-family:Tajawal,sans-serif;font-weight:800;font-size:20px;color:var(--teal-700);
  line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--muted)}

/* ---- admin dashboard ---- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
@media(min-width:640px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;
  box-shadow:var(--lift);padding:16px 18px;display:grid;gap:3px}
.kpi b{font-family:Tajawal,sans-serif;font-weight:800;font-size:clamp(24px,5.5vw,30px);
  line-height:1.1;color:var(--teal-700);font-variant-numeric:tabular-nums}
.kpi span{font-size:12.5px;color:var(--muted)}
.kpi.alert b{color:var(--amber)}
.chart{margin:14px 0 8px}
.bars{display:flex;align-items:flex-end;gap:5px;height:110px}
.bar{flex:1 1 0;height:100%;display:flex;align-items:flex-end;border-radius:4px;
  background:var(--surface-2)}
.bar-fill{width:100%;background:var(--teal-500);border-radius:4px;min-height:3px;
  transition:height .2s ease}
.bar:hover .bar-fill{background:var(--teal-700)}
.bars-cap{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);
  margin:12px 0 0;letter-spacing:.04em}

/* ---- import progress ---- */
.progress{margin-top:16px}
.progress-bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;
  border:1px solid var(--line)}
.progress-bar > div{height:100%;width:0;background:var(--teal-500);
  border-radius:99px;transition:width .25s ease}
input[type=file]{padding:9px 12px;font-size:14px}
input[type=file]::file-selector-button{font-family:inherit;font-size:13.5px;font-weight:600;
  border:1px solid var(--teal-500);background:transparent;color:var(--teal-500);
  border-radius:8px;padding:6px 13px;margin-inline-end:10px;cursor:pointer}
code{font-family:"IBM Plex Mono",monospace;font-size:.9em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px}

/* ============================================================ LANDING ====
 * The hero is the city ledger: real cities, real counts, ranked by volume.
 * A dentist's first question is "is there anything near me", so the answer
 * is the first thing on the page — and it doubles as the filter. A stock
 * clinic photo would say nothing this says.
 */

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0 0;
}
.mark{
  font-family:'Reem Kufi',Tajawal,sans-serif;
  font-size:clamp(17px,2.6vw,21px); font-weight:600;
  color:var(--teal-900); text-decoration:none;
}
.mark span{ color:var(--teal-500); }
.topbar nav{ display:flex; gap:18px; align-items:center; }
.topbar nav a{
  font-size:14px; color:var(--muted); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.topbar nav a:hover,.topbar nav a:focus-visible{
  color:var(--teal-700); border-bottom-color:var(--teal-300);
}

.hero{ padding:clamp(34px,7vw,68px) 0 clamp(24px,4vw,36px); }
.hero h1{
  font-family:Tajawal,sans-serif; font-weight:800;
  font-size:clamp(34px,7.5vw,60px); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 14px; color:var(--teal-900);
}
.hero h1 em{ font-style:normal; color:var(--teal-500); }
.hero .lede{
  font-size:clamp(15px,2.2vw,17px); line-height:1.6;
  color:var(--muted); max-width:52ch; margin:0 0 22px;
}

/* Live counts, set in the mono face so they read as data, not marketing. */
.meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin-bottom:clamp(24px,4vw,38px);
}
.meta b{
  font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:500;
  color:var(--teal-700); margin-inline-end:6px;
}
.meta span{ font-size:13.5px; color:var(--muted); }

.ledger-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:10px;
}
.ledger-head h2{
  font-weight:600; font-size:14px; color:var(--tag-fg); margin:0;
}
.ledger-head .hint{ font-size:12.5px; color:var(--ref); }

.ledger{ display:grid; gap:1px; background:var(--line-soft); border-radius:12px;
         overflow:hidden; border:1px solid var(--line-soft); }
.ledger button{
  display:flex; align-items:baseline; gap:14px; width:100%;
  background:var(--surface); border:0; cursor:pointer; text-align:start;
  padding:14px 18px; font:inherit; color:var(--ink);
  transition:background .14s ease, padding-inline-start .14s ease;
}
.ledger button:hover,.ledger button:focus-visible{
  background:var(--teal-50); padding-inline-start:24px;
}
.ledger .city{
  font-family:Tajawal,sans-serif; font-weight:700;
  font-size:clamp(17px,3vw,20px); flex:1; color:var(--teal-900);
}
.ledger .n{
  font-family:'IBM Plex Mono',monospace; font-size:15px;
  color:var(--teal-500); font-variant-numeric:tabular-nums;
}
.ledger .bar{
  height:6px; border-radius:3px; background:var(--teal-300);
  align-self:center; flex:0 0 auto;
}
.ledger .skel{ height:49px; background:var(--surface); }

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* Rows arrive in order, which reinforces that the ranking means something. */
@media (prefers-reduced-motion:no-preference){
  .ledger button{ animation:rise .42s cubic-bezier(.22,.7,.3,1) backwards; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(7px); } }

/* Descriptor sits under the mark so the brand reads as one unit, not two links. */
.mark{ display:inline-flex; flex-direction:column; line-height:1.1; }
.mark small{
  font-family:'IBM Plex Sans Arabic',sans-serif; font-weight:400;
  font-size:11.5px; color:var(--muted); margin-top:3px;
}

/* The dua and the maintainer's name sit above the legal small print, in a
 * bordered block — this is the human signature on the work, not a disclaimer,
 * so it should not read as part of the fine print below it. */
footer .sig{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0; margin:0 0 18px;
}
footer .dua{
  font-family:Tajawal,sans-serif; font-weight:700;
  font-size:clamp(16px,2.6vw,19px); color:var(--teal-700);
  margin:0 0 6px;
}
footer .by{ font-size:14px; color:var(--muted); margin:0; }
footer .by a{ font-family:'IBM Plex Mono',monospace; font-size:13.5px; }
footer .small{ margin:0 0 10px; }