:root{
  --bg:#FAF7FB; --surface:#FFFFFF; --surface-2:#F4EFF6; --surface-3:#EBE3EF;
  --line:#E5DCEA; --line-strong:#CBBBD4;
  --ink:#1C1220; --ink-2:#5A4A63; --ink-3:#8B7A94;
  /* Deep plum carries the interface; pink is the highlight, never body text. */
  --accent:#5B2A6E; --accent-2:#431F53; --accent-ink:#FFFFFF; --accent-soft:#F0E4F5;
  --pink:#C2367F; --pink-soft:#FBE4F0;
  --ok:#2C7A4B; --ok-soft:#E4F2E8;
  --warn:#95620F; --warn-soft:#F9EDD8;
  --bad:#B02F52; --bad-soft:#FBE3EA;
  --ring:#5B2A6E;
  --shadow:0 1px 2px rgba(28,18,32,.05), 0 10px 28px -18px rgba(28,18,32,.35);
  --r:10px;
  color-scheme:light;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#130E17; --surface:#1B1420; --surface-2:#241A2B; --surface-3:#2E2136;
    --line:#33253B; --line-strong:#4A3854;
    --ink:#F1EAF4; --ink-2:#BCA9C4; --ink-3:#8E7C97;
    /* Dark mode lifts the plum to orchid so it stays legible on a dark ground. */
    --accent:#C79BE0; --accent-2:#DCBBF0; --accent-ink:#1F0F27; --accent-soft:#331F3D;
    --pink:#F07EB8; --pink-soft:#3A1A2C;
    --ok:#66C288; --ok-soft:#14301F;
    --warn:#DEA53F; --warn-soft:#332810;
    --bad:#F0788F; --bad-soft:#3A1620;
    --ring:#C79BE0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#130E17; --surface:#1B1420; --surface-2:#241A2B; --surface-3:#2E2136;
  --line:#33253B; --line-strong:#4A3854;
  --ink:#F1EAF4; --ink-2:#BCA9C4; --ink-3:#8E7C97;
  /* Dark mode lifts the plum to orchid so it stays legible on a dark ground. */
  --accent:#C79BE0; --accent-2:#DCBBF0; --accent-ink:#1F0F27; --accent-soft:#331F3D;
  --pink:#F07EB8; --pink-soft:#3A1A2C;
  --ok:#66C288; --ok-soft:#14301F;
  --warn:#DEA53F; --warn-soft:#332810;
  --bad:#F0788F; --bad-soft:#3A1620;
  --ring:#C79BE0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif; line-height:1.7}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .brand-name,html[dir="rtl"] .stat-num{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif}

h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-.015em; line-height:1.2}
h1{font-size:1.55rem; font-weight:700}
h2{font-size:1.15rem; font-weight:600}
h3{font-size:.98rem; font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:4px}
.mono,.time,td.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.rail{
  background:var(--surface); border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px; padding:20px 14px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; padding:0 8px 18px}
.brand-mark{
  width:32px; height:32px; border-radius:8px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:15px; flex:none;
}
.brand-name{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:1.02rem}
.brand-sub{font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600}
.navlink{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  background:none; border:0; padding:9px 10px; border-radius:8px; cursor:pointer;
  color:var(--ink-2); font-weight:500; font-size:.92rem;
}
.navlink:hover{background:var(--surface-2); color:var(--ink)}
.navlink[aria-current="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.navlink .badge{margin-inline-start:auto}
.nav-sect{font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); font-weight:600; padding:16px 10px 6px}
.rail-foot{margin-top:auto; border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; gap:8px}
.who{padding:0 10px}
.who-name{font-weight:600; font-size:.9rem}
.who-role{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600}
.langswitch{display:flex; gap:4px; padding:0 6px}
.langswitch button{
  flex:1; border:1px solid var(--line); background:none; border-radius:7px; padding:4px 6px;
  font-size:.78rem; font-weight:600; cursor:pointer; color:var(--ink-2);
}
.langswitch button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:22px 30px 0; min-height:34px}
.page{padding:18px 30px 64px; max-width:1120px; width:100%}
.eyebrow{font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); font-weight:600}
.muted{color:var(--ink-2)} .dim{color:var(--ink-3)} .small{font-size:.82rem}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.card-body{padding:16px}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.spacer{flex:1 1 auto}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.grid-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.stat-num{font-family:var(--font-display); font-size:1.7rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600}
.stat.ok .stat-num{color:var(--ok)} .stat.warn .stat-num{color:var(--warn)} .stat.bad .stat-num{color:var(--bad)}

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:8px 13px; font-weight:600; font-size:.87rem; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.ghost{border-color:transparent; background:none; color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.sm{padding:5px 9px; font-size:.79rem; border-radius:7px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field > label{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=time],input[type=number],select,textarea{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  padding:8px 11px; width:100%; font-size:.92rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ring); outline-offset:-1px; border-color:var(--ring)}
textarea{resize:vertical; min-height:64px; line-height:1.5}
select{cursor:pointer}
.hint{font-size:.78rem; color:var(--ink-3)}
.check-row{display:flex; align-items:center; gap:8px; font-size:.88rem}

.pill{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  padding:2px 9px; font-size:.72rem; font-weight:600;
  background:var(--surface-2); color:var(--ink-2); border:1px solid transparent; white-space:nowrap;
}
.pill.done{background:var(--ok-soft); color:var(--ok)}
.pill.late{background:var(--warn-soft); color:var(--warn)}
.pill.overdue,.pill.missed{background:var(--bad-soft); color:var(--bad)}
.pill.pending{background:var(--surface-2); color:var(--ink-3)}
.pill.accent{background:var(--accent-soft); color:var(--accent)}
.badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--bad); color:#fff; font-size:.7rem; font-weight:700; font-family:var(--font-mono);
}
.badge.quiet{background:var(--surface-3); color:var(--ink-2)}

/* ---------- checklist rows ---------- */
.list-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.list-head{display:flex; align-items:flex-start; gap:12px; padding:15px 17px; border-bottom:1px solid var(--line)}
.progress{height:5px; background:var(--surface-3); border-radius:999px; overflow:hidden; width:100%}
.progress > i{display:block; height:100%; background:var(--pink); border-radius:999px; transition:width .3s ease}
.progress.full > i{background:var(--ok)}

.item{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
  padding:12px 17px 12px 14px; border-top:1px solid var(--line); position:relative;
}
.item:first-child{border-top:0}
.item::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:transparent}
.item.is-overdue::before,.item.is-missed::before{background:var(--bad)}
.item.is-late::before{background:var(--warn)}
.item.is-done::before{background:var(--ok)}
.item-main{min-width:0; display:flex; flex-direction:column; gap:6px}
.item-text{font-weight:500; line-height:1.45}
.item.is-done .item-text,.item.is-late .item-text{color:var(--ink-2)}
.item-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-3)}
.item-side{display:flex; align-items:center; gap:6px}
.time{font-size:.78rem; color:var(--ink-2)}

.check{position:relative; display:grid; place-items:center; width:26px; height:26px; margin-top:1px; flex:none}
.check input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.check .box{
  width:22px; height:22px; border-radius:7px; border:2px solid var(--line-strong);
  background:var(--surface); display:grid; place-items:center; transition:all .14s ease; pointer-events:none;
}
.check .box svg{width:13px; height:13px; stroke:var(--accent-ink); stroke-width:3.2; fill:none; opacity:0; transform:scale(.6); transition:all .14s ease}
.check input:checked + .box{background:var(--accent); border-color:var(--accent)}
.check input:checked + .box svg{opacity:1; transform:scale(1)}
.check input:hover + .box{border-color:var(--accent)}
.check input:focus-visible + .box{outline:2px solid var(--ring); outline-offset:2px}
.check input:disabled{cursor:not-allowed}
.check input:disabled + .box{opacity:.5}

.check .box.is-on{background:var(--accent); border-color:var(--accent)}
.check .box.is-on svg{opacity:1; transform:scale(1)}

.answer{grid-column:2 / -1; display:flex; flex-direction:column; gap:6px; margin-top:2px}
.answer-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3)}
.answer-label .req{color:var(--bad); margin-inline-start:3px}
.answer-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.answer-row input{flex:1; min-width:180px}
.answer-read{
  background:var(--surface-2); border-inline-start:2px solid var(--accent);
  border-start-end-radius:7px; border-end-end-radius:7px;
  padding:7px 11px; font-size:.86rem; white-space:pre-wrap;
}
.answer-cell{white-space:pre-wrap}
.tag{
  display:inline-block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:1px 6px; border-radius:5px; border:1px solid var(--line-strong); color:var(--ink-3);
}

/* ---------- edit history ---------- */
.hist{grid-column:2 / -1; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.hist-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;
  border-inline-start:2px solid var(--line-strong); padding-inline-start:10px}
.hist-list li{font-size:.82rem; color:var(--ink-2); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline}
.hist-time{font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:.76rem; min-width:74px}
.hist-old{text-decoration:line-through; color:var(--ink-3)}
.hist-new{color:var(--ink); font-weight:500}

/* ---------- a checklist whose window has shut ---------- */
.list-card.is-shut{opacity:.85}
.pill.shut{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-strong)}

/* ---------- the time picker we draw ourselves ---------- */
.timepick{display:inline-flex; align-items:center; gap:3px}
.timepick select{width:auto; min-width:0; padding-inline:7px}
.timepick .tp-colon{color:var(--ink-3)}
.timepick.is-empty select{color:var(--ink-3)}
.timepick .tp-clear{padding:2px 7px; min-width:28px; line-height:1.2}
.tp-set{white-space:nowrap}
.window-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.stamppick{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.stamppick input[type="date"]{width:auto}
.window-grid{display:flex; flex-direction:column; gap:8px}
.window-grid .wg-label{font-size:.78rem; color:var(--ink-3); min-width:52px; display:inline-block}
.window-grid > .wg-label{margin-bottom:-4px}

.note{grid-column:2 / -1; display:flex; flex-direction:column; gap:7px}
.note-read{
  background:var(--surface-2); border-inline-start:2px solid var(--line-strong);
  border-start-end-radius:7px; border-end-end-radius:7px;
  padding:7px 11px; font-size:.86rem; color:var(--ink-2); white-space:pre-wrap;
}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.86rem}
th{
  text-align:start; font-size:.68rem; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3);
  font-weight:600; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface);
}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num{white-space:nowrap}

/* ---------- banners / toast ---------- */
.banner{display:flex; gap:11px; align-items:flex-start; padding:12px 15px; border-radius:var(--r); border:1px solid; font-size:.88rem}
.banner.bad{background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 30%, transparent); color:var(--bad)}
.banner.warn{background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 30%, transparent); color:var(--warn)}
.banner.info{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 25%, transparent); color:var(--accent)}
.banner.ok{background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 30%, transparent); color:var(--ok)}
.banner .list{margin:6px 0 0; padding-inline-start:18px}

#toast{
  position:fixed; inset-inline:0; bottom:22px; margin:auto; width:fit-content; max-width:90vw;
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:999px;
  font-size:.85rem; font-weight:600; opacity:0; transform:translateY(12px); pointer-events:none;
  transition:all .2s ease; z-index:60; box-shadow:var(--shadow); text-align:center;
}
#toast.show{opacity:1; transform:translateY(0)}

/* ---------- modal ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,16,14,.5); display:grid; place-items:center; padding:18px; z-index:50; overflow-y:auto}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); width:min(560px,100%); max-height:calc(100vh - 36px); display:flex; flex-direction:column}
.modal-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.modal-body{padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px}
.modal-foot{display:flex; gap:9px; justify-content:flex-end; padding:14px 18px; border-top:1px solid var(--line); flex-wrap:wrap}

/* ---------- auth ---------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.auth{width:min(410px,100%); display:flex; flex-direction:column; gap:14px}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:26px}
.auth-brand{display:flex; align-items:center; gap:11px; margin-bottom:20px}

/* ---------- misc ---------- */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--surface); border-radius:999px; padding:5px 11px; font-size:.82rem; cursor:pointer; font-weight:500}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600}
.empty{padding:34px 20px; text-align:center; color:var(--ink-3); display:flex; flex-direction:column; gap:8px; align-items:center}
.divider{height:1px; background:var(--line)}
.bar{height:7px; border-radius:999px; background:var(--surface-3); overflow:hidden; min-width:90px; flex:1; max-width:150px}
.bar > i{display:block; height:100%; background:var(--pink)}
.item-list-editor{display:flex; flex-direction:column; gap:8px}
.item-edit{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center;
  padding:9px 0; border-top:1px solid var(--line);
}
.item-edit:first-child{border-top:0; padding-top:0}
.item-edit-kind{grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.item-edit-kind select{width:auto; min-width:180px}
.item-edit-kind input{flex:1; min-width:160px}
/* ---------- the pin-drop map ---------- */
.map-frame{
  height:260px; border-radius:var(--r); border:1px solid var(--line);
  overflow:hidden; background:var(--surface-2);
}
.map{position:relative; touch-action:none; cursor:grab; user-select:none}
.map.is-dragging{cursor:grabbing}
.map-tiles{position:absolute; inset:0}
.map-tiles img{position:absolute; top:0; left:0; width:256px; height:256px; pointer-events:none}
/* The circle and pin are painted at the centre; the map moves beneath them. */
.map-circle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
}
.map-pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  pointer-events:none; color:var(--pink); filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.map-pin svg{display:block; fill:currentColor}
.map-pin-hole{fill:var(--surface)}
.map-zoom{position:absolute; top:8px; inset-inline-end:8px; display:flex; flex-direction:column; gap:4px}
.map-zoom button{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-size:17px; font-weight:700; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.map-zoom button:hover{background:var(--surface-2)}
.map-attr{
  position:absolute; bottom:0; inset-inline-end:0; font-size:.62rem; color:var(--ink-2);
  background:color-mix(in srgb, var(--surface) 82%, transparent); padding:1px 6px;
  border-start-start-radius:6px;
}
.map-offline{
  position:absolute; inset-inline:10px; bottom:16px; text-align:center;
  font-size:.76rem; color:var(--ink-2); background:color-mix(in srgb, var(--surface) 90%, transparent);
  border:1px solid var(--line); border-radius:8px; padding:6px 9px;
}
/* ---------- the face photo ---------- */
.avatar{border-radius:50%; object-fit:cover; flex:none; background:var(--surface-3); display:inline-block}
.avatar-initials{
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-weight:700;
}
.cell-person{display:flex; align-items:center; gap:10px; min-width:0}
.cam-wrap{
  position:relative; width:100%; max-width:340px; aspect-ratio:3/4; margin:0 auto;
  border-radius:var(--r); overflow:hidden; background:#000;
}
.cam-video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.cam-shot{width:100%; height:100%; object-fit:cover; display:block}
/* A guide to put the face in, rather than leaving people to guess the framing. */
.cam-oval{
  position:absolute; inset:8% 14%; border:2px dashed rgba(255,255,255,.75);
  border-radius:50%; pointer-events:none;
}
.guide{margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:5px;
  font-size:.85rem; color:var(--ink-2)}
.photo-strip{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px}
.photo-strip figure{margin:0; flex:none; width:84px; text-align:center}
.photo-strip img{width:84px; height:84px; border-radius:10px; object-fit:cover; border:1px solid var(--line)}
.photo-strip figcaption{font-size:.66rem; color:var(--ink-3); margin-top:4px; line-height:1.3}

/* ---------- attendance ---------- */
.today-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px}
.today-cell{background:var(--surface-2); border-radius:var(--r); padding:10px 12px}
.today-cell .l{font-size:.68rem; color:var(--ink-3); margin-bottom:2px; text-transform:uppercase; letter-spacing:.08em}
.today-cell .v{font-size:1rem; font-weight:600}
.clock-btn{width:100%; justify-content:center; padding:13px; font-size:.95rem}
.btn.danger-solid{background:var(--bad); border-color:var(--bad); color:#fff}
.btn.danger-solid:hover{background:var(--bad); filter:brightness(1.08)}

input[type=range]{accent-color:var(--accent)}

.loading{min-height:100vh; display:grid; place-items:center; color:var(--ink-3)}

/* The phone header. Hidden on desktop, where the rail carries all of this. */
.phonebar{display:none}
.brandmenu{display:none}
.rail-scrim{display:none}

@media (max-width:860px){
  /* Nothing may push the page wider than the screen. Wide content scrolls inside
     its own box (.table-wrap), never by dragging the whole page sideways. */
  html,body{max-width:100%; overflow-x:hidden}
  .shell{grid-template-columns:1fr; min-width:0}
  .main{min-width:0; max-width:100%}

  /* The navigation becomes a drawer behind a menu button, so the tabs stop
     being a sideways-scrolling strip. */
  .phonebar{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:var(--surface); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:30;
  }
  /* Brand and menu are one button: tapping the logo opens the navigation. */
  .brandmenu{
    display:flex; align-items:center; gap:9px; min-width:0;
    background:none; border:1px solid var(--line); border-radius:10px;
    padding:5px 10px 5px 6px; cursor:pointer; color:var(--ink);
  }
  .brandmenu:hover{background:var(--surface-2)}
  .brandmenu .brand-mark{width:26px; height:26px; font-size:12px}
  .brandmenu .brand-name{
    font-family:var(--font-display); font-weight:700; font-size:.94rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw;
  }
  .brandmenu svg{color:var(--ink-3); flex:none}
  .phonebar .langswitch{padding:0; flex:none}
  .phonebar .langswitch button{flex:none; padding:4px 9px}

  .rail{
    position:fixed; inset-block:0; inset-inline-start:0; width:min(84vw, 290px);
    height:100dvh; z-index:60; border-inline-end:1px solid var(--line);
    transform:translateX(-102%); transition:transform .22s ease; overflow-y:auto;
  }
  html[dir="rtl"] .rail{transform:translateX(102%)}
  .menu-open .rail{transform:translateX(0)}
  .menu-open .rail-scrim{
    display:block; position:fixed; inset:0; z-index:50;
    background:rgba(28,18,32,.45);
  }
  .rail .brand{display:flex}
  .rail-foot{margin-top:auto}
  /* The language switch lives in the phone header; no need for it twice. */
  .rail .langswitch{display:none}

  .topbar{padding:14px 16px 0}
  .page{padding:14px 16px 60px; max-width:100%}

  /* Rows that were laid out for a wide screen */
  .item{grid-template-columns:auto minmax(0,1fr); padding-inline-end:14px}
  .item-side{grid-column:2; justify-content:flex-start}
  /* Item text gets a full row of its own; time and delete share the next. */
  .item-edit{grid-template-columns:minmax(0,1fr) auto}
  .item-edit > input[data-di="text"]{grid-column:1 / -1}
  .answer-row{flex-direction:column; align-items:stretch}
  .answer-row .btn{width:100%; justify-content:center}
  .timepick{flex-wrap:wrap}
  .stamppick{width:100%}
  .stamppick input[type="date"]{flex:1; min-width:140px}
  .card-head{flex-wrap:wrap}
  .modal{width:100%; max-width:100%}
  .grid-stats{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
}

/* Anything genuinely wide keeps its own scroller at every size. A table squeezed
   into 350px is unreadable, so on a phone it keeps a sensible width and scrolls
   inside its box — the page around it stays put. */
.table-wrap{max-width:100%; -webkit-overflow-scrolling:touch}
@media (max-width:860px){
  .table-wrap table{min-width:620px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ---------- printing, which is also how a PDF is produced ----------
   The browser's own renderer draws the PDF, which is the only way Arabic comes
   out correctly shaped and right-to-left without embedding a shaping engine. */
.print-only{display:none}
@media print{
  @page{size:A4 landscape; margin:12mm}
  html,body{background:#fff; color:#000; font-size:10.5pt}
  .rail, .phonebar, .topbar, .rail-scrim, .toast, #toast,
  .btn, .langswitch, [data-act="nav"], .card-head .spacer,
  .filters-card, .filters-row, input, select, textarea{display:none !important}
  /* The stat tiles read better as one row across a landscape page. */
  .grid-stats{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .shell{display:block}
  .page{padding:0; max-width:100%}
  .print-only{display:block}
  .card{border:0; box-shadow:none; break-inside:avoid; margin-bottom:10mm}
  .card-head{border-bottom:1px solid #999; padding:0 0 4mm}
  .card-body{padding:0}
  .table-wrap{overflow:visible}
  table{min-width:0 !important; width:100%; font-size:9pt}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  th{border-bottom:1px solid #666; color:#000}
  td{border-bottom:1px solid #ddd}
  .grid-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:4mm}
  .stat{border:1px solid #ccc; padding:3mm}
  .stat-num{font-size:16pt}
  .pill{border:1px solid #999; background:none !important; color:#000 !important; padding:0 4px}
  .hist-list, .banner, .hint{display:none !important}
  a[href]:after{content:''}
}

/* The header that only appears on paper: who, what, when. */
.print-head{margin-bottom:8mm}
.print-head h1{font-size:16pt; margin-bottom:2mm}
.print-head .meta{font-size:9pt; color:#333; display:flex; gap:6mm; flex-wrap:wrap}