/* The tactical-editorial look (from the WTS design system), in olive: one accent, hairline borders,
   panels with a header strip, big-number tiles. Noto Kufi Arabic for text, Oswald for the big
   numbers, JetBrains Mono for codes — all stored in the app, nothing from the internet. */
@font-face{font-family:'Noto Kufi Arabic';font-weight:400;font-display:swap;src:url(/fonts/kufi-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-weight:400;font-display:swap;src:url(/fonts/kufi-latin-400.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Noto Kufi Arabic';font-weight:600;font-display:swap;src:url(/fonts/kufi-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-weight:600;font-display:swap;src:url(/fonts/kufi-latin-600.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Noto Kufi Arabic';font-weight:700;font-display:swap;src:url(/fonts/kufi-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-weight:700;font-display:swap;src:url(/fonts/kufi-latin-700.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Noto Kufi Arabic';font-weight:800;font-display:swap;src:url(/fonts/kufi-arabic-800.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-weight:800;font-display:swap;src:url(/fonts/kufi-latin-800.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Oswald';font-weight:300;font-display:swap;src:url(/fonts/oswald-300.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Oswald';font-weight:400;font-display:swap;src:url(/fonts/oswald-400.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(/fonts/oswald-500.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500.woff2) format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:100 700;font-display:block;src:url(/fonts/material-symbols-rounded.woff2) format('woff2')}

/* Olive. Light is the default; dark follows the device (تلقائي) or is chosen on this device
   (data-theme on <html>, set before the first paint by /theme.js). Two values were moved from
   the approved palette for WCAG AA: light warn #9C6A12 → #875C0F, dark danger #CF5B4E → #DB6C5F.
   --dim is never used for text (it is below 4.5:1 in dark); --field (the underline of a box
   to type in) is --muted, since --line-strong is under 3:1 against the surface. */
:root{
  --canvas:#EEEDE3;--surface:#FFFFFF;--surface-alt:#E4E5D6;--surface-hi:#FBFBF4;--line:#CACCB8;--line-strong:#9EA28A;
  --text:#171A14;--muted:#4D5546;--dim:#6A7262;--accent:#4E5E12;--accent-dim:#7F8F35;--on-accent:#f7f9ec;
  --danger:#A93A30;--warn:#875C0F;--ok:#2F6E33;--info:#235F83;
  --scrim:rgba(23,26,20,.42);--shadow:0 1px 2px rgba(23,26,20,.06);--shadow-lg:0 18px 48px rgba(23,26,20,.22);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --canvas:#0C0F0B;--surface:#131810;--surface-alt:#192015;--surface-hi:#1F281A;--line:#232C1F;--line-strong:#33402C;
  --text:#E9ECE4;--muted:#87907D;--dim:#55604C;--accent:#B7C46A;--accent-dim:#6E7A35;--on-accent:#12150a;
  --danger:#DB6C5F;--warn:#E3A946;--ok:#7FBF6A;--info:#6FA8C8;
  --scrim:rgba(0,0,0,.6);--shadow:none;--shadow-lg:0 20px 60px rgba(0,0,0,.55);
  color-scheme:dark}}
:root[data-theme=dark]{
  --canvas:#0C0F0B;--surface:#131810;--surface-alt:#192015;--surface-hi:#1F281A;--line:#232C1F;--line-strong:#33402C;
  --text:#E9ECE4;--muted:#87907D;--dim:#55604C;--accent:#B7C46A;--accent-dim:#6E7A35;--on-accent:#12150a;
  --danger:#DB6C5F;--warn:#E3A946;--ok:#7FBF6A;--info:#6FA8C8;
  --scrim:rgba(0,0,0,.6);--shadow:none;--shadow-lg:0 20px 60px rgba(0,0,0,.55);
  color-scheme:dark}
/* Paper is official: printed from a dark screen, it is still black on white. */
@media print{:root,:root[data-theme=dark],:root:not([data-theme=light]){
  --canvas:#fff;--surface:#fff;--surface-alt:#f2f2f2;--surface-hi:#fff;--line:#bbb;--line-strong:#555;
  --text:#000;--muted:#333;--dim:#555;--accent:#000;--accent-dim:#333;--on-accent:#fff;
  --danger:#000;--warn:#000;--ok:#000;--info:#000;color-scheme:light}}
/* The names the screens use, from the tokens above. */
:root{
  --bg:var(--canvas);--surface-2:var(--surface-alt);--fg:var(--text);--ink:var(--accent);--on-ink:var(--on-accent);
  --err:var(--danger);--focus:var(--accent);--field:var(--muted);
  --err-bg:color-mix(in srgb,var(--danger) 12%,var(--surface));--warn-bg:color-mix(in srgb,var(--warn) 12%,var(--surface));
  --ok-bg:color-mix(in srgb,var(--ok) 12%,var(--surface));--info-bg:color-mix(in srgb,var(--info) 12%,var(--surface));
  --accent-bg:color-mix(in srgb,var(--accent) 14%,var(--surface));
  --font:'Noto Kufi Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;--num:'Oswald','Noto Kufi Arabic',sans-serif;--mono:'JetBrains Mono',Consolas,ui-monospace,monospace;
  --r-sm:6px;--r:8px;--r-lg:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.6}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.boot{padding:24px;text-align:center;color:var(--muted)}
.ms{font-family:'Material Symbols Rounded';font-size:22px;line-height:1;font-weight:normal;font-style:normal;display:inline-block;direction:ltr;font-feature-settings:'liga'}
.wrap{max-width:1180px;margin:0 auto;padding:16px 16px 120px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.narrow{max-width:460px;margin:24px auto;padding:24px;display:flex;flex-direction:column;gap:16px}
h1{margin:0;font-size:24px;font-weight:800;line-height:1.35}
h2{margin:0;font-size:17px;font-weight:700;line-height:1.45}
.hint{color:var(--muted);font-size:13px;margin:0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grow{flex:1;min-width:0}
.btn{min-height:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background-color .12s,border-color .12s}
.btn:hover:not(:disabled){background:var(--surface-hi);border-color:var(--muted)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 86%,var(--text));border-color:color-mix(in srgb,var(--accent) 86%,var(--text))}
.btn.danger{background:var(--err-bg);color:var(--err);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 18%,var(--surface));border-color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.block{width:100%}
.btn.sm{min-height:44px;padding:0 12px;font-size:13.5px}
/* A label with a short line before it that grows and turns olive while its box has focus
   (the WTS tactical field); the box itself is underlined, not boxed. */
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.field label::before{content:'';width:6px;height:1px;background:var(--line-strong);flex:none;transition:width .2s,background-color .2s}
.field:focus-within>label{color:var(--accent)}
.field:focus-within>label::before{width:14px;background:var(--accent)}
.input{min-height:46px;border-radius:var(--r-sm) var(--r-sm) 0 0;border:0;border-bottom:1px solid var(--field);background:color-mix(in srgb,var(--surface-alt) 55%,transparent);font-size:16px;font-weight:600;padding:0 12px;width:100%;caret-color:var(--accent)}
.input:focus{outline:none;background:var(--surface-hi);box-shadow:inset 0 -2px 0 var(--accent)}
.input:focus-visible{outline:none}
textarea.input{min-height:140px;padding:10px 12px;font-size:14.5px;font-weight:400;line-height:1.7;border:1px solid var(--line);border-bottom-color:var(--field)}
.err{color:var(--err);font-weight:700;margin:0}
.pill{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12.5px;padding:1px 8px;border-radius:4px;border:1px solid currentColor;background:transparent;white-space:nowrap;line-height:1.7}
.pill.ok{color:var(--ok)}.pill.warn{color:var(--warn)}.pill.dis{color:var(--err)}.pill.info{color:var(--info)}
.key{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:1px;direction:ltr;text-align:center;background:var(--surface-alt);border:1px dashed var(--line-strong);border-radius:var(--r);padding:14px;overflow-wrap:break-word}
@media screen{.sheet-meta{display:none}}
.users{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.user{border:1px solid var(--line);background:var(--surface-alt);border-radius:var(--r);padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-weight:700;font-size:14px;min-height:96px}
.user:hover{border-color:var(--line-strong);background:var(--surface-hi)}
.user[aria-pressed=true]{border-color:var(--accent);background:var(--accent-bg);box-shadow:inset 0 0 0 1px var(--accent)}
.av{width:44px;height:44px;border-radius:var(--r-sm);background:var(--surface-hi);color:var(--text);border:1px solid var(--line-strong);display:grid;place-items:center;font-weight:800;flex:none}
.user[aria-pressed=true] .av{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.course{padding:16px;display:flex;flex-direction:column;gap:8px;text-align:start;cursor:pointer;border:1px solid var(--line);border-inline-start:3px solid var(--accent);background:var(--surface);border-radius:var(--r);min-height:120px;color:var(--text);transition:background-color .12s,border-color .12s}
.course:hover{background:var(--surface-hi);border-color:var(--line-strong);border-inline-start-color:var(--accent)}
/* A note on the screen, WTS's alert block: tinted, with a bar of its colour on the leading edge. */
.banner{--tone:var(--warn);display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 16px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--tone) 40%,transparent);border-inline-start:3px solid var(--tone);background:color-mix(in srgb,var(--tone) 10%,var(--surface));color:var(--text);font-weight:700;margin-bottom:12px}
.banner>.ms{color:var(--tone)}
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100%}
.rail{background:var(--surface);border-inline-end:1px solid var(--line);padding:0 8px 0;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.nav{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;text-align:start}
.nav:hover{color:var(--text);background:var(--surface-hi)}
.nav .ms{font-size:20px}
.nav[aria-current=page]{background:var(--surface-alt);color:var(--text)}
.nav[aria-current=page] .ms{color:var(--accent)}
.nav[aria-current=page]::before{content:'';position:absolute;inset-inline-start:-8px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)}
.bnav{display:none}
.tbl-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
/* A table wider than its card shows a shadow on the side that has more: columns never vanish unnoticed. */
.tbl-wrap:has(table.edit){background:linear-gradient(90deg,var(--surface) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--surface) 30%,transparent) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--fg) 22%,transparent),transparent) left/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--fg) 22%,transparent),transparent) right/14px 100% no-repeat scroll}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}
th{font-size:12.5px;color:var(--muted);font-weight:700;background:var(--surface-2)}
tr.bad td{background:var(--err-bg)}
.modal-bg{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:16px;z-index:40}
.modal{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);width:min(620px,100%);max-height:88vh;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-lg)}
.modal>.row:first-child{border-bottom:1px solid var(--line);margin:-20px -20px 0;padding:12px 16px 12px 20px;background:var(--surface-alt);border-radius:var(--r-lg) var(--r-lg) 0 0}
.modal-body{display:flex;flex-direction:column;gap:12px;min-width:0}
/* A toast is WTS's snack bar: a raised surface with a hairline, its action in olive. */
.toast{position:fixed;bottom:24px;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);background:var(--surface-hi);color:var(--text);border:1px solid var(--line-strong);border-inline-start:3px solid var(--accent);border-radius:var(--r);box-shadow:var(--shadow-lg);padding-block:6px;padding-inline:16px 6px;font-weight:700;z-index:60;display:flex;gap:10px;align-items:center}
.toast.toast-err{border-inline-start-color:var(--danger)}
.toast button{min-height:44px;border-radius:var(--r-sm);border:0;background:var(--accent);color:var(--on-accent);font-weight:700;padding:0 14px;cursor:pointer}
.placeholder{padding:40px 16px;text-align:center;color:var(--muted)}
/* ---- 2b daily screens ---- */
.modal.wide{width:min(760px,100%)}
.input.past{border-bottom-color:var(--warn);background:var(--warn-bg)}
.warn-text{color:var(--warn);font-weight:700}
.stack{display:flex;flex-direction:column;gap:12px}
.pad{padding:14px 16px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.top h1{flex:1;min-width:160px}
.top .input{width:min(320px,100%)}
/* WTS stat tile: a coloured edge, a small tag with a dot, the number big and light. */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{--tone:var(--accent);padding:14px 16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;border:1px solid var(--line);border-inline-start:3px solid var(--tone);background:var(--surface);border-radius:var(--r);text-align:start;color:var(--text);transition:background-color .15s}
.tile:hover{background:var(--surface-hi)}
.tile b{order:1;font-family:var(--num);font-size:44px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:1}
.tile span{display:flex;align-items:center;gap:6px;color:var(--tone);font-size:12.5px;font-weight:700;line-height:1.5}
.tile span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--tone);flex:none}
.tile.err{--tone:var(--err)}.tile.warn{--tone:var(--warn)}.tile.info{--tone:var(--info)}
.two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
/* A panel's header strip (WTS panel): the title, then its count as a small olive tag. */
.sec-h{display:flex;align-items:center;gap:8px;padding:9px 16px;min-height:46px;background:var(--surface-alt);border-bottom:1px solid var(--line)}
.card>.sec-h:first-child,.card>summary.sec-h{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.sec-h h2{flex:1;font-size:14.5px;font-weight:700}
.sec-h>.ms{font-size:20px;color:var(--muted)}
.sec-h small{color:var(--accent);font-weight:700;font-size:12.5px;font-family:var(--num);letter-spacing:.3px}
.list{list-style:none;margin:0;padding:0}
.li{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);min-height:58px;width:100%;background:transparent;border-inline:0;border-top:0;text-align:start;font:inherit;color:inherit}
.li:last-child{border-bottom:0}
button.li{cursor:pointer}button.li:hover{background:var(--surface-hi)}
.li .av{width:36px;height:36px;font-size:13px}
.nm{flex:1;min-width:0}
.nm b{display:block;font-weight:700;overflow-wrap:anywhere} /* a name is never cut short: it wraps */
.nm small{color:var(--muted);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkish{background:transparent;border:0;padding:0;font:inherit;font-weight:700;cursor:pointer;text-align:start;color:inherit}
.linkish:hover{text-decoration:underline;color:var(--accent)}
.pill .ms{font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:44px;padding:0 14px;border-radius:4px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--muted);background:var(--surface-hi)}
.chip[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:3px;max-width:520px}
.seg button{flex:1;min-height:42px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:var(--surface);box-shadow:var(--shadow)}
.progress{height:6px;border-radius:3px;background:var(--surface-hi);border:1px solid var(--line);overflow:hidden;min-width:80px;box-sizing:content-box}
.progress i{display:block;height:100%;background:var(--accent);border-radius:3px}
.grp-h{padding:7px 16px;background:var(--surface-2);font-weight:700;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
.rc-row{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 16px;border-bottom:1px solid var(--line);min-height:58px}
.rc-row.sel{background:var(--accent-bg)}
.rc-code{min-width:130px;min-height:44px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px}
.rc-code .ms,.codes .ms{font-size:18px}
.present{color:var(--ok)}
.abs{background:var(--err-bg)!important;color:var(--err)!important;border-color:color-mix(in srgb,var(--danger) 45%,transparent)!important}
.late{background:var(--warn-bg)!important;color:var(--warn)!important;border-color:color-mix(in srgb,var(--warn) 45%,transparent)!important}
.other{background:var(--info-bg)!important;border-color:color-mix(in srgb,var(--info) 40%,transparent)!important}
.rc-code:disabled{opacity:.55;cursor:not-allowed}
.chkbox{width:24px;height:24px;accent-color:var(--accent);flex:none}
.sticky{position:sticky;bottom:0;z-index:20;margin-top:12px;padding:10px 16px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-lg);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sum{flex:1;min-width:200px;font-weight:700;display:flex;gap:12px;flex-wrap:wrap}
.sum .a{color:var(--err)}.sum .l{color:var(--warn)}.sum .p{color:var(--ok)}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.codes button{min-height:60px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);font-size:15.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.codes button:hover{border-color:var(--muted)}
.codes button.present{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.g-row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line);min-height:58px;flex-wrap:wrap}
.g-row.off{background:var(--surface-2)}
.g-row .nm{min-width:150px}
.g-in{width:100px;min-height:46px;border-radius:var(--r-sm);border:1px solid var(--line-strong);border-bottom-color:var(--field);background:var(--surface-hi);font-family:var(--num);font-size:21px;font-weight:400;text-align:center;font-variant-numeric:tabular-nums;caret-color:var(--accent)}
.g-in:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:inset 0 -2px 0 var(--accent)}
.g-in.bad{border-color:var(--err);background:var(--err-bg)}
.g-in.big{width:180px;font-size:36px;min-height:76px}
.g-res{min-width:110px;text-align:end}
.parts{display:flex;gap:6px;flex-wrap:wrap}
.parts label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);font-weight:700}
.p-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.p-head .av{width:60px;height:60px;font-size:22px;border-radius:var(--r)}
.bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.bar{--tone:var(--accent);background:var(--surface-2);border:1px solid var(--line);border-inline-start:3px solid var(--tone);border-radius:var(--r);padding:12px}
.bar b{font-family:var(--num);font-size:24px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.2}
.bar small{display:block;color:var(--muted);font-weight:700;font-size:12.5px}
.bar .progress{margin-top:8px;background:var(--surface)}
.bar .progress i{background:var(--tone)}
.bar.err{--tone:var(--err)}.bar.warn{--tone:var(--warn)}
.reasons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.reasons li{display:flex;gap:8px;font-size:14.5px;align-items:flex-start}
.reasons .ms{font-size:20px}
.r-dismiss .ms,.r-fail .ms{color:var(--err)}.r-warning .ms{color:var(--warn)}.r-info .ms{color:var(--muted)}
.qa{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.qa button{min-height:64px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13.5px}
.qa button:hover{border-color:var(--muted);background:var(--surface-hi)}
.qa button .ms{color:var(--accent)}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.tl li:last-child{border-bottom:0}
.tl time{color:var(--muted);font-family:var(--mono);font-size:12px;min-width:86px;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:end;padding-top:2px}
.tl .ms{font-size:18px;color:var(--muted)}
.course small{color:var(--muted);font-weight:600}
td.hot{color:var(--err);font-weight:700}
/* ---- 2c settings ---- */
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sm-gap{gap:8px}
.lbl{font-size:14.5px;font-weight:700;margin:6px 0 0}
.sec .sec-ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);color:var(--accent);display:grid;place-items:center;flex:none}
.sec.off .sec-h{border-bottom:0;border-radius:calc(var(--r) - 1px)}
.sec.off .sec-ic{opacity:.6}
.sec-b{padding:16px;display:flex;flex-direction:column;gap:12px}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{position:absolute;inset:-8px 0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--field);transition:background-color .15s,border-color .15s}
.switch span::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:4px;background:var(--muted);transition:transform .15s,background-color .15s}
.switch input:checked+span{background:var(--accent);border-color:var(--accent)}
.switch input:checked+span::after{transform:translateX(-20px);background:var(--on-accent)}
.switch input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.issues{list-style:none;margin:0;padding:10px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--line)}
.issues li{display:flex;gap:6px;align-items:flex-start;font-weight:700;font-size:13.5px}
.issues li.e{color:var(--err)}.issues li.w{color:var(--warn)}
.issues .ms{font-size:18px}
.input.sm{min-height:44px;font-size:14.5px;padding:0 10px;min-width:72px}
table.edit td{padding:6px 8px;vertical-align:middle}
table.edit select.input.sm{min-width:140px}
table.edit input.input.sm{min-width:90px}
table.edit td:first-child input.input.sm{min-width:160px}
table.edit td.del{white-space:nowrap}
table.edit td.del small{display:block}
.icon-btn{width:44px;height:44px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--muted);cursor:pointer;display:inline-grid;place-items:center}
.icon-btn:hover:not(:disabled){background:var(--err-bg);color:var(--err)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
.add{font-size:14px;font-weight:700;min-height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px dashed var(--line-strong);background:transparent;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.add:hover{background:var(--accent-bg);border-color:var(--accent)}
.pbtn{font-size:13px;font-weight:700;min-height:44px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:4px;margin-inline-end:4px}
.pbtn.has{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.sub-detail{box-shadow:none;background:var(--surface-2)}
.sub-detail h3{margin:0;font-size:15.5px;font-weight:700}
.rule{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.chk{display:flex;align-items:center;gap:10px;font-weight:600;min-height:44px;cursor:pointer}
.chk input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.calc{color:var(--muted);font-size:13px;font-weight:700}
.inl{width:84px!important;min-width:0}
.weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.weekdays label{text-align:center;justify-content:center}.weekdays label::before{display:none}.weekdays input{text-align:center}
.ranks{display:flex;flex-wrap:wrap;gap:6px}
.rk{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 12px;border-radius:4px;border:1px solid var(--line-strong);font-weight:600;font-size:13.5px;background:var(--surface-2)}
.rk button{width:32px;height:32px;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.rk button:hover:not(:disabled){color:var(--text);background:var(--surface-hi)}
.rk button:disabled{opacity:.35;cursor:not-allowed}
.lockbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.lockbar.locked{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 40%,transparent);border-inline-start:3px solid var(--warn);color:var(--text)}
.lockbar.locked>.ms{color:var(--warn)}
.err-banner{--tone:var(--danger)}
.set-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.pv{position:sticky;top:16px;overflow:hidden}
.pv-h{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.pv .big{font-family:var(--num);font-size:40px;font-weight:300;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.1}
.pv .big small{font-family:var(--font);font-size:14px;color:var(--muted);font-weight:700;letter-spacing:0}
.savebar{position:sticky;bottom:0;z-index:25;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 16px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.users-tbl td{vertical-align:middle}
.pill.off{color:var(--muted)}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}.rail{display:none}
  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset-inline:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line-strong);padding-bottom:env(safe-area-inset-bottom,0px)}
  .bnav button{border:0;background:transparent;min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:700;font-size:12.5px;cursor:pointer;color:var(--muted)}
  .bnav button[aria-current=page]{color:var(--fg)}
  /* Not by colour alone: the current tab's icon sits on a filled olive block */
  .bnav button[aria-current=page] .ms{background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);padding:2px 16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .set-layout{grid-template-columns:minmax(0,1fr)}.pv{position:static}.pv-col{order:-1}
  .weekdays{grid-template-columns:repeat(4,minmax(0,1fr))}
  .savebar{bottom:70px}
  .two{grid-template-columns:minmax(0,1fr)}
  .rc-code{min-width:104px}
  .g-res{min-width:0}
  .wrap{padding-bottom:90px}
  .sticky{bottom:70px}
  .toast-slot{bottom:84px}
}
/* ---- 2d reports and printing ---- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.rep{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.rtypes{display:flex;flex-direction:column;padding:8px;gap:2px}
.rtype{position:relative;display:flex;align-items:center;gap:10px;min-height:54px;padding:6px 12px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--text);cursor:pointer;text-align:start;font-weight:700}
.rtype:hover{background:var(--surface-hi)}
.rtype .ms{color:var(--muted)}
.rtype small{display:block;color:var(--muted);font-weight:600;font-size:12px}
.rtype[aria-pressed=true]{background:var(--surface-alt)}
.rtype[aria-pressed=true] .ms{color:var(--accent)}
.rtype[aria-pressed=true]::before{content:'';position:absolute;inset-inline-start:-8px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--accent)}
.opts{padding:14px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}
.opts .btn{flex:1}
.paper-stage{background:color-mix(in srgb,var(--fg) 6%,var(--bg));border:1px solid var(--line);border-radius:var(--r);padding:18px;overflow-x:auto;display:flex;flex-direction:column;gap:18px}
/* Paper is always black on white, in dark mode too. */
.paper{color-scheme:light;background:#fff;color:#1a1a1a;width:100%;max-width:794px;margin:0 auto;padding:40px 44px;box-shadow:0 4px 20px rgba(0,0,0,.18);font-size:12.5px;line-height:1.55}
.paper.land{max-width:1100px}
.paper h3{text-align:center;font-size:18px;margin:6px 0 12px}
.paper h4{font-size:14.5px;margin:16px 0 6px}
.paper h4 small{font-weight:600;color:#555;font-size:11.5px}
.lh{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;border-bottom:3px double #1a1a1a;padding-bottom:12px;margin-bottom:14px}
.lh b{font-size:16px;display:block}
.lh span{display:block}
.lh .doc{justify-self:end;text-align:end;font-size:11.5px}
.lh-lines{font-size:12px;line-height:1.6}
.lh-seal{justify-self:center}
.seal{width:62px;height:62px;border:2px solid currentColor;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:22px;object-fit:contain;flex:none}
img.seal{border:0}
.seal.big{width:84px;height:84px;font-size:30px}
.ptbl{border-collapse:collapse;width:100%}
.ptbl th{background:#efeff2;color:#1a1a1a;font-size:11.5px;border:1px solid #c9c9cf;padding:5px 7px;white-space:normal}
.ptbl td{border:1px solid #c9c9cf;font-size:12px;padding:5px 7px;color:#1a1a1a;white-space:normal;overflow-wrap:break-word}
.ptbl td bdi{white-space:nowrap}
.ptbl td.fail{font-style:italic;text-decoration:underline}
.ptbl td.wrapcell{white-space:normal;min-width:220px}
.ptbl thead{display:table-header-group}
.ptbl tr{break-inside:avoid}
.pnote{font-size:11.5px;color:#444;margin:8px 0}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:8px 0}
.kv div{border:1px solid #c9c9cf;border-radius:8px;padding:6px 10px}
.kv small{display:block;color:#555;font-size:11px}
.kv b{font-size:15px}
.preasons{margin:4px 0;padding-inline-start:20px}
.sig{display:flex;justify-content:space-around;gap:20px;margin-top:48px;text-align:center;font-size:12px;break-inside:avoid}
.sig div{flex:0 1 220px;padding-top:6px}
.sig-line{display:block;margin-top:46px;border-top:1px dotted #1a1a1a;padding-top:4px;color:#444}
.cert{padding:30px}
.cert-in{border:4px double #1a1a1a;padding:40px;text-align:center;min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.cert-in .sig{width:100%;max-width:640px}
.cert-title{font-size:28px;font-weight:800}
.cert-text{font-size:15px;max-width:660px;line-height:2;margin:0}
@media (max-width:900px){.rep{grid-template-columns:minmax(0,1fr)}.bnav button{font-size:12.5px}}
/* The recovery key prints alone; a report prints only its paper. */
@media print{
  /* Only the key prints: everything that neither is it, holds it, nor sits inside it is removed
     (hiding by visibility lost to specificity and printed blank pages). */
  body:has(.print-only) :not(.print-only):not(.print-only *):not(:has(.print-only)){display:none!important}
  body:has(.print-only) :has(.print-only){position:static!important;inset:auto!important;transform:none!important;box-shadow:none!important;border:0!important;background:none!important;padding:0!important;margin:0!important;max-width:none!important;overflow:visible!important}
  .print-only{padding:40px;font-size:24px}
  .print-only .key{font-size:26px;background:#fff;border-color:#000}
  .sheet-meta h1{font-size:28px;margin-bottom:6px}
  body:has(.paper-stage){background:#fff}
  body:has(.paper-stage) :is(.no-print,.rail,.bnav,.mtop,.toast-slot,.modal-bg,.restricted,.titlebar){display:none!important}
  body:has(.paper-stage) :is(.shell,main.wrap,.rep,.paper-stage){display:block;padding:0;margin:0;background:none;overflow:visible;border-radius:0;border:0}
  .paper{max-width:none!important;box-shadow:none;padding:0;margin:0}
  .cert{break-after:page;padding:0}.cert:last-child{break-after:auto}
  .cert-in{min-height:170mm}
}
@page{@bottom-center{content:"صفحة " counter(page) " من " counter(pages);font:10px 'Noto Kufi Arabic',sans-serif;color:#555}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* ---- piece 3 sync and hub ---- */
.sync-chip{cursor:pointer;min-height:36px;font-family:inherit}
.qr{width:220px;height:220px;flex:none;border-radius:var(--r);border:1px solid var(--line)}
.pairing{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.mono{font-family:var(--mono);font-size:12.5px;font-weight:500;word-break:break-all;display:block}
.review-row{flex-wrap:wrap}
.mtop{display:none;align-items:center;gap:8px;margin-bottom:8px}
.mtop b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.mtop{display:flex}}
.pair-code{font-family:var(--mono);font-weight:500;font-size:30px;letter-spacing:3px;display:block;color:var(--accent)}
.print-big{font-family:var(--mono);font-weight:500;font-size:19px;letter-spacing:1px;white-space:nowrap}
.code-input{font-family:var(--mono);letter-spacing:2px;text-transform:uppercase}
/* ---- piece 4 phones ---- */
.update-bar{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);background:var(--surface-hi);color:var(--text);border:1px solid var(--line-strong);border-inline-start:3px solid var(--accent);border-radius:var(--r);box-shadow:var(--shadow-lg);padding-block:6px;padding-inline:16px 6px;font-weight:700;z-index:70;display:flex;gap:10px;align-items:center}
.update-bar button{min-height:44px;border-radius:var(--r-sm);border:0;background:var(--accent);color:var(--on-accent);font-weight:700;padding:0 16px;cursor:pointer;font-family:inherit}
.install-hint{text-align:center}
.install-hint .ms{font-size:18px;vertical-align:-4px}
body{padding-top:env(safe-area-inset-top,0px)}
@media (max-width:500px){.narrow{margin:12px}}
.update-bar button.quiet{background:transparent;color:var(--text);padding:0 12px}
.ok-text{color:var(--ok);font-weight:700}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* A certificate is one page of its own: no page counter under it. */
@page cert{@bottom-center{content:none}}
.cert{page:cert}
.sync-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.sync-head .hint{flex:1 1 220px}
.rc-gone summary{cursor:pointer;list-style:revert}
td small.why{display:block;color:var(--err);font-weight:700;white-space:normal}
.pf{display:inline-block;margin-inline-end:12px}
.fp-line{text-align:center;font-weight:700;margin-top:12px}
/* ---- QA3: long names wrap instead of widening the page ---- */
h1,h2,.user,.course h2,.card b{overflow-wrap:anywhere}
.user{min-width:0}
select.input{max-width:100%}
.rail{overflow-y:auto}
.print-big{overflow-wrap:anywhere}
/* ---- UX audit ---- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-btn{position:relative;align-self:flex-start;max-width:100%;overflow-wrap:anywhere}
.file-btn:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.head{min-width:min(240px,100%)}
.tbl-wrap:has(table.users-tbl){background:linear-gradient(90deg,var(--surface) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--surface) 30%,transparent) right/40px 100% no-repeat local,linear-gradient(90deg,color-mix(in srgb,var(--fg) 20%,transparent),transparent) left/12px 100% no-repeat scroll,linear-gradient(270deg,color-mix(in srgb,var(--fg) 20%,transparent),transparent) right/12px 100% no-repeat scroll}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
@media (max-width:600px){
  /* People as cards, not a table to scroll sideways: every control on screen */
  table.users-tbl:not(:has(.chkbox)) thead{display:none}
  table.users-tbl:not(:has(.chkbox)),table.users-tbl:not(:has(.chkbox)) tbody,table.users-tbl:not(:has(.chkbox)) tr,table.users-tbl:not(:has(.chkbox)) td{display:block;width:100%}
  table.users-tbl:not(:has(.chkbox)) tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  table.users-tbl:not(:has(.chkbox)) td{border:0;padding:3px 0}
  .lockbar b.grow,.savebar>.grow{flex:1 1 100%}
  .savebar .btn:not(.primary){flex:1 1 auto}
}
@media (max-width:900px){
  /* Chip rows scroll sideways instead of stacking: the list starts on the first screen */
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .chips::-webkit-scrollbar{display:none}
}
@media (max-width:600px){
  .modal-bg{padding:0}
  .modal{width:100%;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .modal>.row:first-child{border-radius:0}
  .bars{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .bar{padding:8px}
  .g-row{flex-wrap:nowrap}
  .g-row .nm{min-width:0}
  .g-res{min-width:64px}

}
.li .nm small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.g-row{max-width:860px}
input[type=search]::-webkit-search-cancel-button{filter:grayscale(1)}
@media (max-width:600px){
  /* The trainee list as cards: name, then rank · number · group, status, then the counts */
  table.roster-tbl thead{display:none}
  table.roster-tbl,table.roster-tbl tbody{display:block}
  table.roster-tbl tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  table.roster-tbl td{border:0;padding:0}
  table.roster-tbl td.r-name{flex:1 1 60%;font-size:15.5px}
  table.roster-tbl td.r-meta{color:var(--muted);font-size:13px}
  table.roster-tbl td.r-meta+td.r-meta::before{content:"· "}
  table.roster-tbl td.r-num{font-size:13px}
  table.roster-tbl td.r-num[data-l]::before{content:attr(data-l) " ";color:var(--muted)}
  table.roster-tbl td.r-pill{order:-1;flex-basis:100%}
}
/* ---- accessibility audit ---- */
.toast :focus-visible,.update-bar :focus-visible{outline-color:var(--text)}
::placeholder{color:var(--muted);opacity:1}
.seg button{min-height:44px}
.linkish{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:900px){html{scroll-padding-bottom:140px}}
@media (max-height:500px){.sticky{position:static}}
/* The live region holds the toast's place on screen: it is always there, so each message is announced */
.toast-slot{position:fixed;bottom:24px;inset-inline:0;display:flex;justify-content:center;pointer-events:none;z-index:60}
.toast-slot .toast{position:static;pointer-events:auto}
@media (max-width:900px){.toast-slot{bottom:84px}}
@media (max-width:600px){body:has(.sticky) .toast-slot{bottom:150px}}
[data-testid=refused] .nm b{white-space:normal}
.review-vals{display:block;font-size:14.5px;color:var(--fg);margin-top:2px}
.steps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px;font-weight:600}
/* ---- print audit ---- */
.ptbl td.fail{font-style:normal;font-weight:800;text-decoration:underline}
.ptbl.sheet td:nth-child(3),.ptbl.sheet td:last-child,.ptbl.sheet td:nth-last-child(2),.ptbl.sheet td:nth-last-child(3){white-space:nowrap}
.ptbl th{white-space:normal}
.cert-unit{font-weight:800;font-size:16px}
.cert-name{font-size:25px;font-weight:800;margin:4px 0}
.cert-meta{display:flex;gap:24px;justify-content:center;font-size:12.5px;margin-top:8px}
@media print{.ptbl th,.ptbl td,.kv div{border-color:#555!important}.ptbl{border:1.5px solid #1a1a1a}}
/* ---- first steps ---- */
.fs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fs-list li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;min-height:52px;font-weight:600}
.fs-list li.done{color:var(--muted);text-decoration:line-through}
.fs-n{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:var(--num);font-weight:500;flex:none}
.fs-list li.done .fs-n{background:var(--ok);border-color:var(--ok);color:var(--surface);text-decoration:none}
/* ---- settings index ---- */
.sec-index{position:sticky;top:0;z-index:15;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 18px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px)}
.idx-g{display:flex;flex-direction:column;gap:4px;min-width:0}
.idx-l{font-size:12.5px;font-weight:700;color:var(--muted)}
.sec-index .chip{min-height:40px}
.chip.bad{border-color:var(--err);color:var(--err)}
.chip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--err);margin-inline-end:6px}
.sec{scroll-margin-top:150px}
/* A column that doesn't wrap: each group is as wide as the screen and its chips scroll (wrapped,
   a group took its chips' full width and the page scrolled sideways). */
@media (max-width:900px){.sec-index{flex-direction:column;flex-wrap:nowrap;gap:4px}.sec{scroll-margin-top:210px}}
/* ---- verbal chips, quiet status ---- */
.st-quiet{color:var(--muted);font-weight:700}
.chips.verbal{flex-wrap:wrap;margin:0;padding:0}
@media (max-width:600px){
  .g-row:has(.verbal){flex-wrap:wrap}
  .chips.verbal{flex-basis:100%}
  table.roster-tbl td.r-pill:has(.st-quiet){display:none}
}
/* ---- dates ---- */
.date-row{display:flex;gap:6px;align-items:center}
.date-row .input{flex:1;min-width:0}
.date-read{font-weight:700;color:var(--fg)}
.date-step{min-width:44px;padding:0 8px}
.decision{break-before:page}
.dec-title{text-align:center;font-size:19px;margin:6px 0 12px}
/* ---- flow: roll ---- */
/* Roll call's sticky bar says which day and period it counts, and on a wide screen the toast
   clears the bar (the space from its top edge to the screen bottom is measured into --rc-bar-h
   by RollCall). A phone shows toasts at the top (field-app). */
.rc-when{flex-basis:100%;font-weight:700;font-size:13.5px}
.rc-sub{font-size:14.5px;margin:4px 0 0;color:var(--muted)}
body:has(.rc-bar) .toast-slot{bottom:calc(var(--rc-bar-h,64px) + 12px)}
/* ---- flow: grades ---- */
tr.chg td{background:var(--warn-bg)}
td small.chg{display:block;color:var(--warn);font-weight:700;white-space:normal}
/* ---- flow: admin ---- */
.ccard{position:relative;display:grid}
.ccard:has(.ccard-menu)>.course{padding-inline-end:64px}
.ccard-menu{position:absolute;inset-block-start:10px;inset-inline-end:10px;min-width:44px;padding:0}
.ended{margin-top:20px}
.ended>summary{cursor:pointer;font-weight:700;color:var(--muted);padding:10px 4px;min-height:44px}
.ended .clist{margin-top:12px}
.cdates .field{min-width:min(180px,100%)}
.ro-set{border:0;margin:0;padding:0;min-width:0}
.paste-sel{width:auto;max-width:100%}
.pick-ask{margin-top:8px;flex-wrap:wrap}
.hist-ask{gap:6px;flex-wrap:wrap}
.chip.all .ms{font-size:18px;margin-inline-end:4px;vertical-align:-3px}
/* ---- flow: devices ---- */
/* An error toast waits for its close button. */
.toast .toast-x{background:transparent;color:var(--text);min-width:44px;padding:0}
/* The backup line, the «was it saved?» card, the conflicts line on the course list. */
.backup-card{margin-bottom:12px}
.backup-line{gap:10px}
.backup-ask{flex-wrap:wrap}
.conflicts-line{width:100%;font:inherit;text-align:start;cursor:pointer}
.backup-card .banner{margin-bottom:0}
.nm small.wrap-text{white-space:normal}
/* Devices back from a hub backup: keep / remove wrap under the name on a narrow screen. */
.restored-list .li{flex-wrap:wrap}
.restored-list .li .row{flex-wrap:wrap;gap:8px}
.ca-warn{margin-bottom:0}
/* ---- flow: nav ---- */
/* «المزيد»: rows with a line under each, big enough to hit — in the rail under the tabs, and
   as a sheet on a phone. */
.more-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.more-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:6px 14px;border:0;border-radius:var(--r-sm);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.more-row:hover{background:var(--surface-hi)}
.more-row>.ms{color:var(--muted)}
.more-row[aria-current=page]{background:var(--surface-alt);color:var(--text)}
.more-row[aria-current=page]>.ms{color:var(--accent)}
.more-row[aria-current=page]::before{content:'';position:absolute;inset-inline-start:-8px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)}
.more-row[aria-current=page] small{color:inherit}
.more-row .nm{flex:1;min-width:0}
.more-list .backup-ask{margin:4px 0 8px}
.more-rail{border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
.more-h{font-size:12px;font-weight:700;color:var(--muted);padding:8px 10px 4px}
.rail .more-row{min-height:44px;padding:4px 10px;gap:10px;font-size:14px}
.rail .more-row .nm b{font-weight:600}
.rail .more-row:not([aria-current]) .nm b{color:var(--muted)}
.rail .more-row:not([aria-current]):hover .nm b{color:var(--text)}
.rail .more-row>.ms{font-size:20px}
/* Five tabs on a 320px phone: 64px each, the labels must not push the bar wider. */
.bnav button{min-width:0}
@media (max-width:360px){.bnav button{font-size:12px}}
/* ---- flow: help ---- */
/* The guide: big tap targets, numbered steps, the network drawn in boxes (monochrome). */
.help{display:flex;flex-direction:column;gap:14px;min-width:0}
.help-bar{flex-wrap:wrap}
.help-bar .input{min-width:min(220px,100%)}
.help-group h3{font-size:12.5px;font-weight:700;color:var(--muted);margin:6px 0}
.help-topic{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--surface)}
.help-topic>summary{cursor:pointer;font-weight:700;padding:12px 14px;min-height:48px;display:flex;align-items:center;border-radius:calc(var(--r) - 1px)}
.help-topic>summary:hover{background:var(--surface-hi)}
.help-topic[open]>summary{border-bottom:1px solid var(--line);background:var(--surface-alt);border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.help-topic>.btn{margin:0 14px 14px}
.help-steps{margin:10px 0;padding-inline:36px 14px;line-height:1.8}
.help-steps li{margin-bottom:4px}
.help-steps li::marker{color:var(--accent);font-family:var(--num)}
.help-note{margin:0 14px 12px;padding:8px 12px;border-inline-start:3px solid var(--accent);background:var(--accent-bg);border-radius:var(--r-sm);line-height:1.7}
.help-how h3{font-size:15.5px;margin:0 0 8px}
.help-rules{margin:10px 0 0;padding-inline-start:22px;line-height:1.8}
.net{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;border:1px dashed var(--line-strong);border-radius:var(--r);padding:14px 10px 8px}
.net::before{content:'';position:absolute;inset-inline:14%;top:calc(50% - 12px);border-top:1px solid var(--line-strong)}
.net-side{display:flex;flex-direction:column;gap:10px;align-items:center}
.net-dev{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;min-width:0;max-width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);text-align:center;font-size:12.5px}
.net-dev .ms{font-size:26px;color:var(--muted)}
.net-dev small{color:var(--muted);font-size:11.5px}
.net-hub .net-dev{border:1px solid var(--accent);border-inline-start-width:3px;padding:12px 10px}
.net-hub .net-dev .ms{font-size:36px;color:var(--accent)}
.net-cap{grid-column:1/-1;text-align:center;margin:0;color:var(--muted);font-size:12.5px;font-weight:700}
.help-q{min-width:44px;padding:0}
.top:has(.help-q){display:flex;align-items:center;gap:8px}
.top:has(.help-q) h1{flex:1}
.tour{margin-bottom:14px;border:1px solid var(--line-strong);border-inline-start:3px solid var(--accent)}
.tour h2{margin:0}
/* The quick sheet: two columns that fit one portrait A4 page. */
.qs-cols{columns:2;column-gap:24px;font-size:12.5px;line-height:1.55}
.qs-task{break-inside:avoid;margin-bottom:10px}
.qs-task h4{font-size:14px;margin:0 0 3px}
@media screen and (max-width:600px){.qs-cols{columns:1}}
.qs-task ol{margin:0;padding-inline-start:18px}
.qsheet .paper{max-width:794px}
.qsheet.print-only{padding:0;font-size:inherit}
@media print{body:has(.qsheet) .modal-bg:has(.qsheet){display:block!important}}
/* ---- flow: field-roll ---- */
/* Roll call's header kept short so a phone shows the list: search and «تحديد متعدد» on the
   title line, then the date (its weekday is in the sticky bar), then one scrolling row of periods. */
.rc-head{padding:10px 12px;gap:8px;margin-bottom:10px}
.rc-help{margin:10px 4px 0}
@media (max-width:600px){
  .rc-head .field>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rc-head .date-read{display:none}
  .rc-top .input{flex:1 1 160px}
  .rc-top{flex-wrap:nowrap;gap:8px;margin-bottom:6px}
  .rc-top h1{position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rc-top .input{width:auto;min-width:0}
  .rc-bar{padding:6px 12px;gap:4px 10px}
  .rc-bar .rc-when{font-size:13px}
  .rc-head{padding:6px 8px;gap:6px;margin-bottom:6px}
  /* The name keeps its 44 px target; the rank line tucks under its text, not under the target. */
  .rc-row{padding-block:4px;min-height:56px}
  .rc-row .nm small{margin-top:-9px;line-height:1.4}
}
/* A full-day absence is not a period code: last in the sheet, set apart, outlined and dashed. */
.rc-day{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;display:flex;flex-direction:column;gap:8px}
.rc-day .codes{grid-template-columns:minmax(0,1fr)}
.codes button.day-abs{background:var(--surface);color:var(--err);border:2px dashed var(--err)}
.today-rec{margin:0;font-weight:700}
/* ---- flow: field-grades ---- */
/* A long list draws only what is near the screen: opening 120 rows, and each save, laid out
   and painted all of them (the main cost on a slow phone). */
.g-row{content-visibility:auto;contain-intrinsic-size:auto 59px}
/* A refused grade: the message drops to its own line under the box, the name keeps its width. */
.g-row:has(> .g-res .why){flex-wrap:wrap}
.g-row > .g-res:has(.why){flex-basis:100%;min-width:0}
.g-res .why{white-space:normal}
/* «غ» beside the box: phones only (their number pad has no «غ»); typed on a keyboard. */
.g-abs{display:none;min-width:44px;min-height:46px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:17px;font-weight:700;cursor:pointer}
.g-abs[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* Subject, attempt and date on one line; the progress wraps under the name before it squeezes. */
.gr-pick{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.gr-pick > .chips{flex:1 1 160px;min-width:0}
.gr-date{flex:0 1 240px;min-width:0}
.gr-date .field{gap:0}
.gr-sum{row-gap:4px}
.gr-sum .grow{flex:1 1 80px}
/* The daily assessment's words on one line (it scrolls inside the row if it must); ✕ on the chosen one clears it. */
.chips.verbal{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips.verbal::-webkit-scrollbar{display:none}
.chips.verbal{gap:4px}
.chips.verbal .chip{padding:0 9px;flex:none}
.chip-on{display:inline-flex;flex:none;border-radius:4px;background:var(--accent)}
.chip-on .chip{border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:4px}
.chip-x{min-width:36px;min-height:44px;border:0;border-radius:0;border-start-end-radius:4px;border-end-end-radius:4px;background:transparent;color:var(--on-accent);font-size:15px;cursor:pointer}
@media (max-width:900px){
  .g-abs{display:inline-flex;align-items:center;justify-content:center}
  .gr-absent-hint,.seg .m-paste{display:none}
  .gr-head{gap:8px}
  .gr-pick > .chips{margin-inline:0;padding-inline:0}
  .gr-date label,.gr-date .date-read{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gr-date .date-step{display:none}
  .gr-date{flex:0 0 160px}
}
@media (max-width:600px){.g-in:not(.big){width:84px}.g-row .nm{flex:1 1 0}.g-row .nm b{font-size:15px;line-height:1.35}.g-res{min-width:0}.g-res:empty{display:none}}
/* ---- flow: field-app ---- */
/* The PIN offer: one strip above the screen, a box big enough for six digits. */
.pin-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--line);border-inline-start:3px solid var(--accent)}
.pin-offer>.ms{color:var(--accent)}
.pin-offer-text{flex:1 1 240px;min-width:0;font-weight:700}
.pin-offer .pin-box{flex:0 0 160px;width:160px;font-family:var(--mono);font-size:20px;letter-spacing:6px;text-align:center}
.pin-offer .err{flex-basis:100%;margin:0}
.pin-offer .pin-skip{order:1}
.pin-set-short{display:none}
/* A phone: the text with «ليس الآن» on one line, the box with «اعتماد» on the next. */
@media (max-width:600px){
  .pin-offer>.ms{display:none}
  .pin-offer-text{order:1;flex:1 1 140px}.pin-offer .pin-skip{order:2}
  .pin-offer .pin-box{order:3;flex:1 1 160px}.pin-offer .btn.primary{order:4}.pin-offer .err{order:5}
  .pin-set-full{display:none}.pin-set-short{display:inline}
}
/* A wrong device clock: a strip on every screen until it is set right. */
.clock-banner{margin:0;border-radius:0;padding:8px 16px}
.sync-chip{min-height:44px}
/* Login: the recovery key is for an admin who lost his password — there, not in the way. */
.rec-link{align-self:center;font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:underline}
/* On a phone toasts come at the top, under the phone bar: never over the bottom bars, sheets
   and their buttons, or the box being typed in. */
@media (max-width:900px){body:has(.toast-slot) .toast-slot{top:calc(env(safe-area-inset-top,0px) + 64px);bottom:auto}}
/* ---- flow: shell ---- */
/* One frame once logged in (Frame.js): on a wide screen the rail runs the window's full height
   beside the content and only the content scrolls — the rail scrolls itself if it is taller.
   Print and phones keep the page flowing. */
@media (min-width:901px){.frame{grid-template-columns:248px minmax(0,1fr)}}
.frame-main{min-width:0}
.rail-chip{padding:0 8px 8px}
/* A row's line goes to its tooltip in the rail, and its name wraps: never cut short with «…». */
.rail .more-row small{display:none}
.rail .more-row{min-height:44px}
.rail :is(.nm b,.nav){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.page{min-width:0}
@media (min-width:901px){.phone-only{display:none!important}}
@media screen and (min-width:901px){
  html:has(.frame),html:has(.frame) body{height:100%;overflow:hidden}
  #app:has(>.frame){height:100%;display:flex;flex-direction:column}
  #app>.frame{flex:1 1 auto;min-height:0}
  .frame>.rail{position:static;height:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .frame-main{min-height:0;overflow:auto}
}
/* Scrollbars: thin, no track, a hairline thumb — and on a desktop only while the pointer is over
   the part that scrolls. */
html,.frame-main,.rail,.modal,.tbl-wrap{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
@media (hover:hover){.frame-main:not(:hover),.rail:not(:hover),.modal:not(:hover),.tbl-wrap:not(:hover){scrollbar-color:transparent transparent}}
/* The Windows app's own title strip (no Windows title bar): it drags the window; Windows draws
   its three buttons over the strip's free end (the titlebar-area values leave it to them). */
.titlebar{position:sticky;top:0;z-index:45;flex:none;height:34px;background:var(--surface);color:var(--muted);border-bottom:1px solid var(--line);-webkit-app-region:drag;user-select:none}
.titlebar-in{position:absolute;top:0;bottom:0;left:env(titlebar-area-x,0px);width:env(titlebar-area-width,100%);display:flex;align-items:center;gap:8px;padding-inline:12px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.titlebar .av{width:20px;height:20px;border-radius:4px;font-size:11px;background:var(--accent);color:var(--on-accent);border:0}
.titlebar :is(button,a,input){-webkit-app-region:no-drag}
.in-app .modal-bg{top:34px}
/* In the Windows app the chrome isn't text to select; the content (tables, fields) still is. */
.in-app :is(.rail,.bnav,.titlebar,button,.btn,.chip,.pill,h1,h2,h3,summary){user-select:none}
/* ---- flow: look ---- */
/* The rail as in the approved look: the unit on top with its olive tag, the course's tabs and
   «المزيد» as groups with small labels, then a footer — sync, who is logged in with «قفل», and
   the light / dark choice. */
.rail-unit{display:flex;flex-direction:column;gap:2px;padding:14px 10px 12px;margin-inline:-8px;padding-inline:18px;border-bottom:1px solid var(--line);margin-bottom:8px}
.rail-unit .tag{font-size:12px;font-weight:700;color:var(--accent);overflow-wrap:anywhere}
.rail-unit b{font-size:15.5px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.rail-unit small{color:var(--muted);font-size:12px}
/* The footer stays at the bottom of the window; on a short one the rows scroll above it. */
.rail-foot{margin-top:auto;margin-inline:-8px;padding:10px 14px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;background:var(--surface);position:sticky;bottom:0;z-index:1}
.rail-foot .sync-chip{align-self:flex-start;max-width:100%;white-space:normal;text-align:start}
.rail-who{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;min-width:0}
.rail-who .av{width:30px;height:30px;font-size:12px}
.rail-who .grow{overflow-wrap:anywhere}
.rail-who .btn{min-height:36px;padding:0 10px;font-size:13px;color:var(--muted)}
.rail-who .btn .ms{font-size:17px}
/* The 44px target of «قفل» in the footer: its box is 36px, the hit area around it is not. */
.rail-who .btn{position:relative}
.rail-who .btn::after{content:'';position:absolute;inset:-4px 0}
/* Light / dark / follow the device: three small buttons. */
.theme-pick{display:flex;gap:2px;padding:2px;background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--r-sm)}
.theme-pick button{flex:1;min-height:36px;border:0;border-radius:4px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 4px;white-space:nowrap}
.theme-pick button .ms{font-size:16px}
.theme-pick button:hover{color:var(--text)}
.theme-pick button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.theme-pick button[aria-pressed=true] .ms{color:var(--accent)}
.theme-row{display:flex;flex-direction:column;gap:6px;padding:10px 14px 4px;border-top:1px solid var(--line);margin-top:6px}
.theme-row .theme-pick button{min-height:44px;font-size:14px}
.theme-row b{font-size:13px;color:var(--muted)}
/* The restricted-access strip over the content on a wide screen: quiet, a red dot, the time. */
.restricted{display:flex;align-items:center;gap:10px;padding:5px 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--danger) 6%,var(--canvas));font-size:12px;font-weight:700;color:var(--muted)}
.restricted::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--danger);flex:none}
.restricted time{margin-inline-start:auto;font-size:11.5px}
.restricted bdi{font-family:var(--mono);font-weight:500;direction:ltr}
@media (max-width:900px){.restricted{display:none}}
/* Numbers that are figures, not words: Oswald. */
.num,.rail .count{font-family:var(--num);font-variant-numeric:tabular-nums}
.rail .count{margin-inline-start:auto;font-size:13px;color:var(--text);background:var(--surface-alt);border:1px solid var(--line);border-radius:4px;padding:0 6px;line-height:1.6}
/* A checkbox and its words on one line; the words wrap beside the box, not under it. */
label.row{flex-wrap:nowrap}
label.row>input{flex:none}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.course-new{border:1px dashed var(--line-strong);align-items:center;justify-content:center;color:var(--accent)}
.course-new:hover{border-color:var(--accent);border-inline-start-color:var(--accent);background:var(--accent-bg)}
.course-new .ms{font-size:32px}
.course-new b{color:var(--text)}
/* A military number reads as a code. */
.mil{font-family:var(--mono);font-weight:500;font-size:.94em;letter-spacing:.2px}
/* A 320px phone: Kufi is wider than the old face, so roll call gives the name a little more room
   (a narrower code box, a tighter gutter) and a name that still wraps keeps its rank line under it. */
@media (max-width:360px){
  .rc-row{padding-inline:10px 8px;gap:6px}
  .rc-code{min-width:92px;padding:0 6px;font-size:13.5px}
  .rc-row .linkish{font-size:14.5px;line-height:1.4}
  .rc-row .nm small{margin-top:0}
}
/* The date reads day first on every device; the native picker sits invisibly on top of it. */
.date-pick{position:relative;flex:1;min-width:0}
.date-pick .date-show{display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;font-family:var(--mono)}
.date-pick .date-show .ms{font-size:20px;color:var(--muted)}
.date-pick.past .date-show{border-bottom-color:var(--warn);background:var(--warn-bg)}
.date-pick .date-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;font-size:16px}
.date-pick:focus-within .date-show{outline:3px solid var(--focus);outline-offset:2px}