/* sign-in, account and administration pages (same tokens as the portal) */
.auth-wrap{display:grid;place-items:start center}
.auth-card{width:min(30rem,100%);background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow);padding:2rem 2rem 1.5rem;margin-top:1.5rem}
.auth-card h1{font-size:var(--fs-h1);margin-bottom:.3rem;font-weight:400}
.auth-card form,.newgrid{display:grid;gap:.35rem;margin-top:1rem}
.auth-card label,.newgrid label{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin-top:.6rem;display:grid;gap:.35rem;font-variant-numeric:tabular-nums lining-nums}
.auth-card input,.newgrid input,.newgrid select,.editgrid input,.editgrid select{font:inherit;font-weight:400;color:var(--ink);padding:.7rem .85rem;min-height:46px;border:var(--bw) solid var(--line-field);border-radius:var(--r);background:var(--paper);width:100%;font-family:var(--sans);font-size:1rem;letter-spacing:0;text-transform:none;transition:border-color .15s}
.auth-card input:focus,.newgrid input:focus,.newgrid select:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.auth-card .btn{margin-top:1rem;justify-content:center}
.hint{font-size:.88rem;color:var(--muted);margin:.2rem 0 0;line-height:1.5}
/* Users: what each permission opens (question test, 27 October 2026) */
.adm-perm-d{max-width:var(--measure);margin:var(--sp-2) 0 var(--sp-3);padding-inline-start:var(--sp-5);font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-2)}
.adm-perm-d li{margin:0 0 var(--sp-1)}
.msg{min-height:1.3em;margin:.8rem 0 0;font-size:.92rem}
.msg.err{color:var(--bad)} .msg.ok{color:var(--good);font-weight:600}
.admin-new{margin:1.2rem 0}
.newgrid{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.6rem 1.2rem;align-items:end;margin-top:.4rem}
.pwrow{display:flex;gap:.4rem}.pwrow input{font-family:var(--code);font-variant-numeric:tabular-nums lining-nums}
.perms{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;padding-top:.4rem}
.ck{display:inline-flex!important;align-items:center;gap:.5rem;font-weight:600!important;color:var(--ink)!important;letter-spacing:0!important;font-size:.92rem!important;margin:0!important;min-height:40px}
.ck input{width:20px;height:20px;min-height:0;accent-color:var(--blue)}
.row{grid-column:1/-1;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.sec-h{font-size:1.25rem;margin:2rem 0 .7rem;font-weight:400}
table.list .yr{color:var(--muted);font-size:.8rem}
table.list.small{font-size:.85rem}
td.acts{white-space:normal;min-width:15rem}
td.acts button{border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);font-size:.84rem;font-weight:600;padding:.45rem .65rem;min-height:36px;border-radius:var(--r);margin:.1rem}
td.acts button.danger{color:var(--bad)}
.editgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.6rem 1rem;padding:.6rem 0}
.editgrid label{display:grid;gap:.3rem;font-size:.84rem;font-weight:700;color:var(--muted)}
/* email alerts card */
#alerts-card h2{font-size:1.25rem;margin:.1rem 0 .4rem}
.al-addr{margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;word-break:break-all}
.al-prefs{border-top:1px solid var(--rule-soft);margin:1.1rem 0 0;padding:.9rem 0 0;display:grid;gap:.45rem;justify-items:start}
#alerts-card [hidden]{display:none!important}
.al-prefs .lbl{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:0;font-variant-numeric:tabular-nums lining-nums}
.al-prefs .lbl+.lbl,.al-prefs .ck+.lbl{margin-top:.6rem}
.al-prefs .ck-sub{margin-inline-start:1.75rem!important;font-weight:500!important} /* daily briefs, under "a new report" (PRD 29.4) */
#alerts-card .row .btn{margin-top:.6rem}
.al-sub{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--navy);margin:1.2rem 0 .2rem;padding-top:.9rem;border-top:1px solid var(--rule-soft)}
#al-dev .row .btn{margin-top:.5rem}
/* Users page (PRD 26): the action panel under an account, the new credentials, and cards on phones */
td.acts .act-link{display:inline-flex;align-items:center;border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);font-size:.84rem;font-weight:600;padding:.45rem .65rem;min-height:36px;border-radius:var(--r);margin:.1rem;text-decoration:none}
td.acts .act-link:hover,td.acts button:hover{border-color:var(--navy)}
#msg,#created,tr.editrow{scroll-margin-top:4.5rem;scroll-margin-bottom:1rem}
tr.editrow>td{background:var(--raise);border-top:var(--bw-accent) solid var(--brass)}
.pwpanel{display:grid;gap:.5rem;max-width:34rem;padding:.4rem 0}
.pwpanel .pw-l{display:grid;gap:.35rem;font-size:.84rem;font-weight:700;color:var(--muted)}
.pwpanel .pwrow input{font:inherit;font-family:var(--code);font-size:1rem;color:var(--ink);padding:.6rem .8rem;min-height:44px;border:var(--bw) solid var(--line-field);border-radius:var(--r);background:var(--paper);width:100%;min-width:0;font-variant-numeric:tabular-nums lining-nums}
.pwpanel .pwrow input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.pwpanel .msg,.editrow .msg{margin:.2rem 0 0}
.pwpanel .row .btn,.editrow .row .btn{min-height:40px}
.created{margin-top:1rem;padding:1rem 1.1rem;background:var(--raise);border:1px solid var(--rule);border-top:var(--bw-accent) solid var(--good)}
.created .msg{margin:0 0 .6rem}
.cred{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:.2rem 0 .4rem;align-items:baseline}
.cred dt{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.cred dd{margin:0;text-align:start}
.cred code{font-family:var(--code);font-size:1.05rem;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:.15rem .5rem;border-radius:var(--r);word-break:break-all;user-select:all;font-variant-numeric:tabular-nums lining-nums}
html[dir="rtl"] .cred dt{letter-spacing:0;text-transform:none;font-family:var(--arabic);font-size:.9rem}
html[dir="rtl"] table.users-t td.num,html[dir="rtl"] table.log-t td.num:first-child{font-family:var(--arabic);letter-spacing:0}
/* the accounts table and the log become labelled cards whenever the table is wider than its box: always on phones, and on
   iPads upright or narrow windows (auth.js sets .cards by fit, PRD 27.2) */
.tw:has(table.cards){overflow:visible;background:none;border:0;box-shadow:none}
table.cards{display:block}
table.cards thead{display:none}
table.cards tbody{display:grid;gap:.7rem}
table.cards tr{display:block;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow);padding:.6rem .9rem}
table.cards tbody tr:hover{background:var(--paper)}
table.users-t.cards tr.editrow{margin-top:-.8rem;border-top:0;box-shadow:none;background:var(--raise)}
table.users-t.cards tr.editrow[hidden]{display:none}
table.users-t.cards tr.editrow>td{border:0;background:none;padding:.2rem 0}
table.cards td{display:block;border:0;padding:.3rem 0}
table.cards td[data-l]{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;align-items:baseline}
table.cards td[data-l]::before{content:attr(data-l);font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
html[dir="rtl"] table.cards td[data-l]::before{letter-spacing:0;text-transform:none;font-family:var(--arabic);font-size:.85rem}
table.users-t.cards td:first-child{display:block;padding-bottom:.4rem;border-bottom:1px solid var(--rule-soft);margin-bottom:.2rem}
table.users-t.cards td:first-child::before{content:none}
table.users-t.cards td.acts{min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.4rem;padding-top:.6rem}
table.users-t.cards td.acts button,table.users-t.cards td.acts .act-link{margin:0;min-height:44px;justify-content:center;width:100%}
table.log-t.cards td:not([data-l]):empty{display:none}
table.log-t.cards td:not([data-l]){padding-inline-start:8.1rem;color:var(--muted)}
@media (max-width: 760px){
  .cred{grid-template-columns:1fr;gap:.15rem}
  .cred dd+dt{margin-top:.4rem}
  .pwpanel .pwrow{flex-wrap:wrap}
  .pwpanel .pwrow input{flex:1 1 12rem}
}

/* ---------- the sign-in page: the cover of the portal (programme PRD 13.5; persuade surface) ----------
   Direction (taste-skill, within the identity): the cover of the Center's own publication. The masthead's navy field
   becomes the page's left two thirds and carries what only this portal has: both names of the Center at cover size in
   its publication faces (Noto Serif, Noto Naskh Arabic) with the brass double rule between them, the portal's name,
   what it holds and its publishing hours. The form sits on paper beside it, a plain working form. No picture, gradient,
   card stack or badge: the subject's own words and colours carry the page. One authored moment: the brass rule draws
   once per visit; reduced motion keeps it still. */
body.cover-page{background:var(--ground)}
.cover{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,7fr) minmax(22rem,5fr);grid-template-rows:1fr auto;grid-template-areas:"field side" "more side"}
/* the field is two sections, the names and then what the portal holds, so that on a phone the form comes between them */
.cover-field,.cover-more{background:var(--head);color:var(--head-ink);padding-inline:clamp(1.5rem,5vw,5rem)}
.cover-field{grid-area:field;padding-block:clamp(1.5rem,3vw,2.5rem) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5)}
.cover-more{grid-area:more;padding-block:0 clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;gap:var(--sp-5)}
.cover-side{grid-area:side}
.cover-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:auto}
.cover-logo{width:4rem;height:4rem;flex:none}
.cover-top .top-tools{padding:0}
.cover-names{margin-top:clamp(2.5rem,8vh,6rem);display:grid;gap:var(--sp-4);justify-items:start}
.cover-name{font-family:var(--display);font-weight:500;font-size:clamp(2.125rem,1.25rem + 2.6vw,3.375rem);line-height:1.08;letter-spacing:-.018em;color:var(--head-ink);max-width:19ch;margin:0;text-wrap:balance}
.cover-rule{width:min(16rem,62%);height:5px;border-top:1px solid var(--head-brass);border-bottom:1px solid var(--head-brass);transform-origin:0 50%}
.cover-alt{font-family:var(--display-ar);font-size:clamp(1.55rem,1.05rem + 1.7vw,2.375rem);line-height:1.55;color:var(--head-brass);margin:0;max-width:24ch;text-align:left}
html[dir="rtl"] .cover-alt{text-align:right}   /* the other language's name keeps to the page's edge, under the first */
.cover-alt[lang="en"]{font-family:'Noto Serif',Georgia,serif;line-height:1.2;letter-spacing:-.01em}
.cover-sub{font-family:var(--sans);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-brand);text-transform:uppercase;color:var(--head-brass);margin:var(--sp-3) 0 0}
.cover-p{font-size:1.1875rem;line-height:1.55;color:var(--head-muted);max-width:34rem;margin:0}
.cover-sched{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);margin:var(--sp-2) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--head-line)}
.cover-sched dt{font-weight:700;color:var(--head-ink);font-size:var(--fs-small)}
.cover-sched dd{margin:0;color:var(--head-muted);font-size:var(--fs-small);font-variant-numeric:tabular-nums lining-nums}
.cover-side{display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,4vw,4rem) clamp(1.25rem,4vw,3.5rem)}
.cover-side .auth-card{margin:0;width:min(25rem,100%);background:transparent;border:0;box-shadow:none;padding:0}
.cover-side .auth-card h1{font-size:var(--fs-h2);margin-bottom:var(--sp-2)}
.cover-side .btn.primary{min-height:48px;font-size:var(--fs-ui)}
@media (prefers-reduced-motion: no-preference){ html.first-visit .cover-rule{animation:draw .7s var(--ease-out) .1s both} }
html[dir="rtl"] .cover-rule{transform-origin:100% 50%}
html[dir="rtl"] .cover-name{letter-spacing:0;line-height:1.45}
html[dir="rtl"] .cover-sub{letter-spacing:0;text-transform:none;font-family:var(--arabic);font-size:var(--fs-small)}
html[dir="rtl"] :is(.cover-p,.cover-sched){line-height:1.8}
@media (max-width: 900px){
  .cover{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"field" "side" "more"}
  .cover-field{gap:var(--sp-4);padding-bottom:var(--sp-6)}
  .cover-names{margin-top:var(--sp-5)}
  .cover-more{padding-top:var(--sp-6)}
  .cover-p{font-size:var(--fs-body)}
  .cover-side{align-items:flex-start;padding-block:var(--sp-6) var(--sp-7)}
}
/* agreements lane, Phase 2 (Agreements PRD 20.1): the restricted-items tick box sits on its own row, its note under it */
.perm-rx{flex-direction:column;align-items:flex-start;gap:0;border-top:1px solid var(--rule);margin-top:.2rem}

/* Who can see what (PRD 37): one tick box per account and permission */
table.who-t th.c{white-space:normal;text-align:center;vertical-align:bottom;min-width:5.25rem}   /* eleven switches fit a desktop row (PRD-access-by-tab) */
table.who-t td.c{text-align:center;vertical-align:middle}
table.who-t .who-ck{display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;min-height:44px;justify-content:center}
table.who-t .who-ck input{width:1.15rem;height:1.15rem}
table.who-t .who-ck input:disabled{opacity:.55}
table.who-t .who-m{font-size:var(--fs-label);min-height:1em}
table.who-t .who-m.ok{color:var(--good)}
table.who-t .who-m.err{color:var(--bad)}
/* Today's priorities for everyone at once (its PRD, Section 2) */
.tp-all{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-3)}
.tp-all .who-m{font-size:var(--fs-label)}
.tp-all .who-m.ok{color:var(--good)}
.tp-all .who-m.err{color:var(--bad)}
table.who-t.cards td.c{display:grid;grid-template-columns:1fr auto;text-align:start}
table.who-t.cards .who-ck{flex-direction:row;min-height:44px}

/* Alerts card on the users page (docs/PRD-decision-tools.md, Section 8) */
.als-list{list-style:none;margin:.6rem 0 .8rem;padding:0;display:grid;gap:.45rem}
.als-list li{display:flex;gap:.6rem;align-items:baseline;line-height:1.5}
.als-dot{flex:none;inline-size:.7rem;block-size:.7rem;border-radius:50%;background:var(--good);transform:translateY(.05rem)}
.als-bad .als-dot{background:var(--bad)}
.als-chip{display:inline-block;font-size:.75rem;font-weight:700;padding:.05rem .4rem;border-radius:2px;background:var(--bad-soft);color:var(--bad)}
.als-fail{color:var(--bad);font-weight:700}
.als-act{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.8rem 0 .2rem}
.als-act .hint{margin:0}