/* Alvazaratus Saifiyah branding, taken from www.alvazarat.org: gold #CE9C01,
   charcoal #212529, sand #DAD7CD, Poly headings, Open Sans text. Gold is only used
   as a fill (buttons, bars) or on dark; as text on light it becomes --primary-text,
   a darker gold that stays readable. */
:root{
  --bg:#F5F3EE; --surface:#FFFFFF; --ink:#212529; --muted:#5F625E; --line:#DAD7CD;
  --primary:#CE9C01; --primary-ink:#1B1E21; --primary-soft:#F6EDD0; --primary-text:#7A5C00;
  --header-bg:#212529; --header-ink:#F5F3EE; --header-muted:#B9B6AC; --header-line:#3A3F44;
  --ok:#2E7A57; --ok-soft:#E3F2EA; --warn:#94620A; --warn-soft:#FBF0DD; --bad:#A83A33; --bad-soft:#F8E4E2;
  --radius-lg:14px; --radius-sm:8px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16181B; --surface:#212529; --ink:#ECEAE3; --muted:#A8A9A4; --line:#363B40;
    --primary:#E0B21C; --primary-ink:#16181B; --primary-soft:#3A3217; --primary-text:#E7C04A;
    --header-bg:#0F1113; --header-ink:#ECEAE3; --header-muted:#A8A9A4; --header-line:#2A2E32;
    --ok:#6CC79A; --ok-soft:#1D3329; --warn:#E3AE5B; --warn-soft:#382B17; --bad:#F08A80; --bad-soft:#3B2020;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16181B; --surface:#212529; --ink:#ECEAE3; --muted:#A8A9A4; --line:#363B40;
  --primary:#E0B21C; --primary-ink:#16181B; --primary-soft:#3A3217; --primary-text:#E7C04A;
  --header-bg:#0F1113; --header-ink:#ECEAE3; --header-muted:#A8A9A4; --header-line:#2A2E32;
  --ok:#6CC79A; --ok-soft:#1D3329; --warn:#E3AE5B; --warn-soft:#382B17; --bad:#F08A80; --bad-soft:#3B2020;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Poly",Georgia,"Times New Roman",serif;font-weight:400;margin:0}
h1{font-size:1.6rem;line-height:1.2}
h2{font-size:1.25rem;line-height:1.3}
h3{font-size:1rem;font-family:inherit;font-weight:600}
p{margin:0}
a{color:var(--primary-text)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

header.top{position:sticky;top:0;z-index:5;background:var(--header-bg);color:var(--header-ink);border-bottom:3px solid var(--primary)}
.top-inner{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:14px;align-items:center;min-width:0}
.brand img{height:40px;width:auto;display:block}
.brand .divider{width:1px;align-self:stretch;background:var(--header-line)}
.brand small{display:block;color:var(--header-muted);font-size:12px;line-height:1.2;letter-spacing:.04em}
.brand strong{display:block;line-height:1.2;font-family:"Poly",Georgia,serif;font-weight:400;font-size:1.1rem}
.views{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--header-line);border-radius:999px;padding:3px}
.views button{border:0;background:transparent;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--header-muted);font-weight:500;white-space:nowrap}
.views button:hover{color:var(--header-ink)}
.views button[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
.views .count{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--header-ink);color:var(--header-bg);font-size:12px;font-weight:600}
.user{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--header-muted)}
.user form{margin:0}
.user .btn{background:transparent;color:var(--header-ink);border-color:var(--header-line)}
@media (max-width:560px){.brand .divider,.brand small{display:none}}

main{max-width:1080px;margin:0 auto;padding:22px 16px 60px}
select,input[type=text],input[type=email],input[type=number],input[type=search],textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;min-width:0}
textarea{width:100%;min-height:90px;resize:vertical}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;min-width:0}
.stack>*+*{margin-top:16px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.grid2.even{grid-template-columns:1fr 1fr}
@media (max-width:820px){.grid2,.grid2.even{grid-template-columns:1fr}}

.btn{border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;font-weight:500;text-decoration:none;display:inline-block}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.ok{color:var(--ok);border-color:var(--ok)}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn.small{padding:4px 10px;font-size:13px}
.btn.link{border:0;background:none;padding:0;color:var(--primary-text)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.field{display:grid;gap:4px}
.field span{font-size:13px;color:var(--muted)}
.readonly{padding:8px 10px;border-radius:var(--radius-sm);background:var(--bg);border:1px dashed var(--line);overflow-wrap:anywhere}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.hint{font-size:13px;color:var(--muted)}
.error{color:var(--bad);font-size:14px}

.journey{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.journey::before{content:"";position:absolute;left:12.5%;right:12.5%;top:15px;height:3px;background:var(--line);border-radius:3px}
.journey .fill{position:absolute;left:12.5%;top:15px;height:3px;background:var(--primary);border-radius:3px;transition:width .5s ease}
.journey li{position:relative;text-align:center;padding:0 4px}
.dot{width:32px;height:32px;margin:0 auto 8px;border-radius:50%;background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted);position:relative;z-index:1}
.journey li.done .dot{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.journey li.now .dot{border-color:var(--primary);color:var(--primary-text)}
.journey li.stop .dot{background:var(--bad);border-color:var(--bad);color:#fff}
.journey b{display:block;font-size:13px}
.journey small{display:block;font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.journey .fill{transition:none}}

.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--primary-soft);color:var(--primary-text)}

.req{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;display:grid;gap:10px;background:var(--surface)}
.req-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.req blockquote{margin:0;padding-left:12px;border-left:3px solid var(--line);color:var(--muted);overflow-wrap:anywhere}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.empty{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-sm)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}
.stat .v{font-size:1.7rem;font-weight:400;font-family:"Poly",Georgia,serif;line-height:1.1}
.stat .l{font-size:13px;color:var(--muted);margin-top:4px}
.meter{height:6px;background:var(--bg);border-radius:6px;margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--primary)}
.meter i.over{background:var(--bad)}

.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:minmax(80px,140px) 1fr 40px;gap:10px;align-items:center;font-size:14px}
.bar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{height:12px;background:var(--bg);border-radius:6px;overflow:hidden}
.bar .track i{display:block;height:100%;background:var(--primary);border-radius:6px}
.bar .n{text-align:right;color:var(--muted)}

.queue{list-style:none;margin:0;padding:0}
.queue li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.queue li:last-child{border-bottom:0}
.queue .who{min-width:0}
.queue .who small{display:block;color:var(--muted);overflow-wrap:anywhere}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:600;color:var(--muted);font-size:13px;background:var(--bg)}
tr:last-child td{border-bottom:0}
td small{display:block;color:var(--muted)}
.toolbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.settings{display:flex;gap:14px;flex-wrap:wrap;align-items:end}
.settings input{width:120px}
.log{list-style:none;margin:0;padding:0;font-size:14px;max-height:320px;overflow:auto}
.log li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.log li:last-child{border-bottom:0}
.log time{color:var(--muted);min-width:90px;font-size:13px;flex-shrink:0}
.alert{background:var(--warn-soft);color:var(--warn);padding:12px 14px;border-radius:var(--radius-sm);font-size:14px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1}
.toast.bad{background:var(--bad);color:#fff}

.login{min-height:100dvh;display:grid;place-items:center;padding:16px}
.login .panel{max-width:420px;width:100%;display:grid;gap:14px;text-align:center;padding:0;overflow:hidden}
.login .crest{background:var(--header-bg);border-bottom:3px solid var(--primary);padding:28px 24px 22px}
.login .crest img{width:100%;max-width:280px;height:auto;display:block;margin:0 auto}
.login .body{display:grid;gap:14px;padding:4px 28px 28px}

/* AMAP: service cards and forms */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.service h2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.login form{display:grid;gap:12px;text-align:left}
.login input{width:100%}
pre.json{max-height:320px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;font-size:12px;white-space:pre-wrap;word-break:break-word}
details summary{cursor:pointer;color:var(--primary-text);font-weight:600}