/* PTA Web App · screen designs · 12 October 2026
   Built from design.md v0.1 (approved 10 October 2026) and the approved eight key phone screens.
   Fonts are kept with the files (PTA's own server in the real build). */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/newsreader-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/newsreader-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#13276C; --deep:#0B1B45; --red:#E31836; --red-text:#B3122B; --teal:#35D6BE;
  --cream:#FAF9F4; --white:#FFFFFF; --ink:#1B2440; --muted:#55607A; --line:#E4E2DA;
  --navy-tint:#DDE3F5; --red-tint:#FBE3E7; --teal-tint:#D6F6F0; --track:#ECEAE2; --track-2:#F1EFE8;
  --ok:#1F7A6C; --on-navy:#D5DBF0; --on-navy-2:#BFC8E8; --navy-mid:#33458A; --dash:#B9B6AC;
  --sans:Manrope, system-ui, sans-serif; --serif:Newsreader, Georgia, serif;
  --urdu:'Noto Nastaliq Urdu', serif; --naskh:'Noto Naskh Arabic', serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#E9E8E2; font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased}
a{color:var(--navy)} a:hover{color:var(--deep)}
button{font-family:var(--sans); cursor:pointer}
.num{font-variant-numeric:tabular-nums}
svg.i{flex-shrink:0}

/* ---------- review bar (outside the screen; not part of the design) ---------- */
.review{position:sticky; top:0; z-index:50; background:var(--deep); color:#fff; padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:13px}
.review b{font-weight:800}
.review .meta{color:var(--on-navy-2); font-weight:600}
.review a{color:#fff; font-weight:700; text-decoration:none; border:1px solid var(--navy-mid); border-radius:8px; padding:5px 10px}
.review a:hover{background:var(--navy)}
.review .sp{flex-grow:1}
.states{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:14px 16px 0}
.states button{height:34px; padding:0 12px; border-radius:17px; border:1px solid #C9C6BC; background:#fff; color:var(--navy); font-size:12px; font-weight:700}
.states button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.state-note{max-width:680px; margin:8px auto 0; text-align:center; font-size:12px; color:var(--muted); padding:0 16px; line-height:1.5}
[data-state]:not(.on){display:none !important}

/* ---------- the phone ---------- */
.stage{display:flex; justify-content:center; padding:18px 12px 40px}
.phone{width:390px; height:844px; background:var(--cream); border-radius:28px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(11,27,69,.18),0 12px 40px rgba(11,27,69,.12); position:relative}
.phone>.scroll{flex-grow:1; overflow-y:auto; overflow-x:hidden}
@media (max-width:430px){ .stage{padding:0} .phone{width:100%; height:100vh; border-radius:0; box-shadow:none} .review{position:static} }

/* headers */
.top{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 8px}
.top-back{display:flex; align-items:center; gap:10px; padding:16px 16px 10px}
.eyebrow{font-size:12px; font-weight:700; color:var(--muted)}
.title{font-family:var(--serif); font-size:26px; font-weight:600; color:var(--deep); line-height:1.15; margin:0}
.title.sm{font-size:22px}
.sub{font-size:13px; color:var(--muted)}
.icon-btn{position:relative; width:44px; height:44px; border-radius:22px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none}
.icon-btn .dot{position:absolute; top:8px; right:9px; width:10px; height:10px; border-radius:5px; background:var(--red); border:2px solid #fff}

.main{padding:8px 16px 16px; display:flex; flex-direction:column; gap:14px}

/* cards */
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.card.lg{border-radius:16px; padding:14px 16px}
.card.sel{border:2px solid var(--navy)}
.card-title{font-size:14px; font-weight:700; color:var(--ink)}
.row{display:flex; align-items:center; gap:10px}
.row.sb{justify-content:space-between}
.col{display:flex; flex-direction:column; gap:2px}
.small{font-size:12px; color:var(--muted)}
.label{font-size:13px; font-weight:700; color:var(--muted)}
.upper{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.strong{font-size:15px; font-weight:600}
.link-strong{font-size:13px; font-weight:700; color:var(--navy); text-decoration:none}

/* navy hero card */
.hero{background:var(--navy); color:#fff; border-radius:20px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px}
.hero .k{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--on-navy-2)}
.hero .big{font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.05}
.hero .s{font-size:13px; color:var(--on-navy)}
.daysleft{background:var(--teal); color:var(--deep); border-radius:14px; padding:8px 12px; display:flex; flex-direction:column; align-items:center}
.daysleft b{font-size:22px; font-weight:800; line-height:1}
.daysleft span{font-size:11px; font-weight:700}
.weekstrip{display:flex; gap:6px}
.weekstrip span{flex-grow:1; height:6px; border-radius:3px; background:var(--navy-mid)}
.weekstrip .d{background:var(--teal)} .weekstrip .t{background:#fff}
.hero-inner{background:var(--deep); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:6px}
.btn-white{background:#fff; color:var(--navy); border-radius:12px; height:48px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; text-decoration:none; border:none; width:100%}

/* ticks (daily targets) */
.tick{display:flex; align-items:center; gap:10px; font-size:13px; color:#fff; background:none; border:none; padding:2px 0; text-align:left; width:100%}
.tick .box{flex-shrink:0; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--on-navy-2); display:flex; align-items:center; justify-content:center}
.tick[aria-checked="true"] .box{background:var(--teal); border-color:var(--teal)}
.tick[aria-checked="true"] .txt{color:var(--on-navy-2); text-decoration:line-through}

/* due banner */
.due{background:#fff; border:1.5px solid var(--red); border-radius:16px; padding:14px 16px; display:flex; gap:12px; align-items:center}
.due .ic{flex-shrink:0; width:40px; height:40px; border-radius:20px; background:var(--red-tint); display:flex; align-items:center; justify-content:center}
.due .when{font-size:12px; font-weight:700; color:var(--red-text)}
.go{flex-shrink:0; width:44px; height:44px; border-radius:22px; background:var(--navy); display:flex; align-items:center; justify-content:center}

/* buttons */
.btn{height:50px; border-radius:14px; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; padding:0 16px}
.btn.lg{height:54px; font-size:16px}
.btn-primary{background:var(--navy); color:#fff; border:none}
.btn-primary:hover{color:#fff; background:#0F2058}
.btn-secondary{background:#fff; color:var(--navy); border:1px solid #C9C6BC}
.btn-ghost{background:transparent; border:none; color:var(--navy); font-size:13px; font-weight:700; height:40px; padding:0 12px}
.btn-dashed{background:#fff; color:var(--navy); border:2px dashed var(--navy)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.footer{flex-shrink:0; padding:12px 16px 18px; background:#fff; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.footer.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* chips and bands */
.chip{display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border-radius:10px; padding:4px 8px; white-space:nowrap}
.chip.navy{color:var(--navy); background:var(--navy-tint)}
.band{min-width:84px; font-size:11px; font-weight:800; border-radius:10px; padding:4px 8px; text-align:center; flex-shrink:0}
.band.strong{color:var(--deep); background:var(--teal)}
.band.dev{color:var(--navy); background:var(--navy-tint)}
.band.weak{color:var(--red-text); background:var(--red-tint)}
.band.notyet{color:var(--muted); background:var(--track-2); border:1px dashed var(--dash)}
.lo{font-size:11px; font-weight:700; border-radius:8px; padding:6px 8px; text-decoration:none}
.lo.strong{color:var(--deep); background:var(--teal)}
.lo.dev{color:var(--navy); background:var(--navy-tint)}
.lo.weak{color:var(--red-text); background:var(--red-tint); border:1px solid var(--red)}
.lo.notyet{color:var(--muted); background:var(--track-2); border:1px dashed var(--dash)}
.bar{height:8px; border-radius:4px; background:var(--track); overflow:hidden}
.bar>i{display:block; height:100%; background:var(--navy)}

/* bottom bar */
.tabbar{flex-shrink:0; height:72px; background:#fff; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0 6px}
.tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-decoration:none; color:var(--muted); font-size:11px; font-weight:600}
.tabbar a span{width:52px; height:30px; border-radius:15px; display:flex; align-items:center; justify-content:center}
.tabbar a[aria-current="page"]{color:var(--navy); font-weight:700}
.tabbar a[aria-current="page"] span{background:var(--navy-tint)}

/* test screen */
.test-head{background:var(--deep); color:#fff; padding:14px 16px 12px; display:flex; flex-direction:column; gap:10px; flex-shrink:0}
.timer{background:#fff; color:var(--deep); border-radius:12px; padding:6px 12px; display:flex; align-items:center; gap:6px}
.timer b{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.timer.warn{background:var(--red-tint); color:var(--red-text)}
.prog{flex-grow:1; height:6px; border-radius:3px; background:var(--navy-mid); overflow:hidden}
.prog>i{display:block; height:6px; background:var(--teal)}
.opt{display:flex; align-items:center; gap:10px; width:100%; min-height:54px; padding:8px 14px; border-radius:12px; text-align:left; color:var(--ink); background:#fff; border:1px solid var(--line); font-size:15px}
.opt .lbl{flex-shrink:0; min-width:28px; font-weight:700; color:var(--muted)}
.opt[aria-checked="true"]{background:var(--navy-tint); border:2px solid var(--navy)}
.opt[dir="rtl"]{text-align:right}
.urdu{font-family:var(--urdu); line-height:2.2; font-size:19px; text-align:right}
.qmap{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px}
.qmap span{height:32px; border-radius:8px; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); color:var(--muted)}
.qmap .a{background:var(--navy); color:#fff; border:none}
.qmap .f{border:2px solid var(--red); color:var(--red-text)}
.qmap .c{background:var(--teal); color:var(--deep); border:none; outline:2px solid var(--deep); font-weight:800}
.legend{display:flex; flex-wrap:wrap; gap:12px; font-size:11px; font-weight:600; color:var(--muted)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.input{height:52px; border-radius:12px; border:1.5px solid #C9C6BC; background:#fff; padding:0 14px; font-size:16px; font-family:var(--sans); color:var(--ink); width:100%}
.input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-tint)}
.saved{font-size:12px; font-weight:600; color:var(--ok); display:flex; align-items:center; gap:6px}

/* sheets and banners */
.sheet-wrap{position:absolute; inset:0; background:rgba(11,27,69,.45); display:flex; align-items:flex-end}
.sheet{background:#fff; width:100%; border-radius:20px 20px 0 0; padding:20px 16px 18px; display:flex; flex-direction:column; gap:12px}
.grab{width:40px; height:4px; border-radius:2px; background:var(--line); align-self:center}
.note{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; gap:10px; font-size:13px; line-height:1.5}
.warnbox{background:var(--red-tint); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px}
.okbox{background:var(--teal-tint); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; color:var(--deep)}
.infobox{background:var(--navy-tint); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; color:var(--navy)}

/* notifications */
.notif{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:14px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink)}
.notif.unread{border:1.5px solid var(--navy)}
.notif .ic{flex-shrink:0; width:36px; height:36px; border-radius:18px; display:flex; align-items:center; justify-content:center}
.notif .t{font-size:14px; font-weight:700; color:var(--deep)}
.notif .b{font-size:12px; color:var(--muted); line-height:1.45}
.notif .m{display:flex; gap:8px; align-items:center; font-size:11px; font-weight:600; color:var(--muted)}
.notif .rd{flex-shrink:0; width:10px; height:10px; border-radius:5px; background:var(--red); margin-top:6px}
.tabs{display:flex; gap:8px}
.tabs button,.tabs a{height:36px; padding:0 14px; border-radius:18px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px; font-weight:700; display:flex; align-items:center; text-decoration:none}
.tabs [aria-selected="true"],.tabs [aria-current="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}

/* calendar */
.cal{display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); grid-template-rows:repeat(4,20px); grid-auto-flow:column; gap:4px}
.cal span{border-radius:4px; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; background:var(--track-2); color:var(--muted)}
.cal .d{background:var(--navy); color:#fff}
.cal .n{background:var(--teal); color:var(--deep); outline:1.5px solid var(--deep)}
.cal .r{background:var(--red-tint); color:var(--red-text); border:1px solid var(--red)}
.calhead{display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); gap:4px}
.calhead span{font-size:9px; font-weight:700; color:var(--muted); text-align:center}

/* scan */
.pages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.page{position:relative; aspect-ratio:3/4; border-radius:10px; background:#fff; padding:34px 10px 10px; display:flex; flex-direction:column; gap:7px; box-shadow:0 1px 2px rgba(11,27,69,.12); border:1px solid var(--line)}
.page i{height:4px; border-radius:2px; background:#C9CFE0; display:block}
.page.blur{border:2px solid var(--red); filter:blur(.6px)}
.page .no{position:absolute; left:6px; top:6px; min-width:22px; height:22px; border-radius:11px; background:var(--navy); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center}
.pg-btns{display:flex; gap:6px}
.pg-btns button{flex-grow:1; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center}

/* score */
.score{background:var(--navy); color:#fff; border-radius:20px; padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.score .v{font-size:34px; font-weight:800; line-height:1.1}
.pct{background:var(--teal); color:var(--deep); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:2px}
.stat3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:2px}
.stat b{font-size:20px; font-weight:800}

/* choice cards */
.choice{display:flex; gap:14px; align-items:flex-start; width:100%; padding:16px; border-radius:16px; background:#fff; border:1px solid var(--line); text-align:left}
.choice[aria-checked="true"]{border:2px solid var(--navy); box-shadow:0 0 0 3px var(--navy-tint)}
.choice[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.choice .ic{flex-shrink:0; width:48px; height:48px; border-radius:14px; background:var(--navy-tint); display:flex; align-items:center; justify-content:center}
.choice .t{font-size:16px; font-weight:700; color:var(--deep)}
.choice .b{font-size:13px; color:var(--muted); line-height:1.4}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.seg button{min-height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--navy); font-size:13px; font-weight:700; padding:6px 8px}
.seg button[aria-checked="true"]{background:var(--navy-tint); border:2px solid var(--navy)}

/* ---------- desktop (computer) ---------- */
.desk{display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; background:var(--cream)}
.side{background:var(--navy); color:#fff; display:flex; flex-direction:column; padding:20px 14px; gap:6px; position:sticky; top:0; height:100vh}
.side .logo{display:block; padding:4px 8px 18px}
.side .logo img{height:40px; display:block}
.side .who{background:var(--deep); border-radius:12px; padding:10px 12px; margin-bottom:10px; display:flex; flex-direction:column; gap:2px}
.side .who b{font-size:14px} .side .who span{font-size:12px; color:var(--on-navy-2); font-weight:600}
.side a.nav{display:flex; align-items:center; gap:12px; height:44px; padding:0 12px; border-radius:12px; color:var(--on-navy); text-decoration:none; font-size:14px; font-weight:600}
.side a.nav:hover{background:#1B3380; color:#fff}
.side a.nav[aria-current="page"]{background:#fff; color:var(--navy); font-weight:700}
.side .grow{flex-grow:1}
.dmain{display:flex; flex-direction:column; min-width:0}
.dtop{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 36px 8px}
.dbody{padding:8px 36px 40px; max-width:1180px; width:100%}
.dgrid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:start}
.dcol{display:flex; flex-direction:column; gap:16px}
.desk .title{font-size:30px}
.desk-only{display:none}

/* ======================= added 12 Oct 2026 (full screen set) ======================= */
/* forms */
.form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field>label,.flabel{font-size:13px; font-weight:700; color:var(--ink)}
.field .hint{font-size:12px; color:var(--muted); line-height:1.45}
.field-err{font-size:12px; font-weight:700; color:var(--red-text)}
.input.bad,select.bad,textarea.bad{border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint)}
select.input{appearance:none; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2313276C' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center; padding-right:38px}
textarea.input{height:auto; min-height:110px; padding:12px 14px; line-height:1.5; resize:vertical}
.pwrap{position:relative} .pwrap .input{padding-right:70px}
.pwrap button{position:absolute; right:6px; top:6px; height:40px; padding:0 10px; border:none; background:transparent; color:var(--navy); font-weight:700; font-size:13px}
.otp{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.otp input{height:56px; border-radius:12px; border:1.5px solid #C9C6BC; text-align:center; font-size:22px; font-weight:800; font-family:var(--sans); color:var(--deep); width:100%}
.otp input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-tint)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; cursor:pointer}
.check input{width:22px; height:22px; margin:0; flex-shrink:0; accent-color:var(--navy)}
.cbx{display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--line); text-align:left; font-size:14px; color:var(--ink)}
.cbx .box{flex-shrink:0; width:22px; height:22px; border-radius:6px; border:1.5px solid #9EA3B0; display:flex; align-items:center; justify-content:center; background:#fff}
.cbx .box svg{opacity:0}
.cbx[aria-checked="true"]{border-color:var(--navy); background:var(--navy-tint)}
.cbx[aria-checked="true"] .box{background:var(--navy); border-color:var(--navy)}
.cbx[aria-checked="true"] .box svg{opacity:1}
.cbx[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.rad{display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 14px; border-radius:12px; background:#fff; border:1px solid var(--line); text-align:left; font-size:14px; color:var(--ink)}
.rad .dotb{flex-shrink:0; width:22px; height:22px; border-radius:11px; border:1.5px solid #9EA3B0; display:flex; align-items:center; justify-content:center}
.rad[aria-checked="true"]{border:2px solid var(--navy); background:var(--navy-tint)}
.rad[aria-checked="true"] .dotb{border-color:var(--navy)}
.rad[aria-checked="true"] .dotb::after{content:""; width:12px; height:12px; border-radius:6px; background:var(--navy)}
.filebox{display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; border:2px dashed #9EA3B0; background:#fff; cursor:pointer}
.filebox input{position:absolute; width:1px; height:1px; opacity:0}
.filebox:focus-within{border-color:var(--navy)}
.req::after{content:" *"; color:var(--red-text)}

/* steps */
.steps{display:flex; gap:6px; align-items:center}
.steps i{flex-grow:1; height:5px; border-radius:3px; background:var(--track)}
.steps i.d{background:var(--navy)} .steps i.c{background:var(--teal)}
.steplabel{font-size:12px; font-weight:700; color:var(--muted)}

/* lists */
.list{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.li{display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid #EFEDE6; text-decoration:none; color:var(--ink); min-height:56px}
.li:first-child{border-top:none}
a.li:hover,[data-href].li:hover{background:#FBFAF6; cursor:pointer}
.li .ico{flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--navy-tint); display:flex; align-items:center; justify-content:center}
.li .t{font-size:14px; font-weight:700} .li .s{font-size:12px; color:var(--muted); line-height:1.4}
.li .grow{flex-grow:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.kv{display:grid; grid-template-columns:minmax(110px,40%) 1fr; gap:8px 12px; font-size:13px}
.kv dt{color:var(--muted); font-weight:600} .kv dd{margin:0; font-weight:600; color:var(--ink)}
.divider{height:1px; background:var(--line)}

/* status pills */
.pill{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:12px; font-size:11px; font-weight:800; white-space:nowrap}
.pill.grey{background:var(--track-2); color:var(--muted)}
.pill.navy{background:var(--navy-tint); color:var(--navy)}
.pill.teal{background:var(--teal-tint); color:var(--deep)}
.pill.ok{background:var(--teal); color:var(--deep)}
.pill.red{background:var(--red-tint); color:var(--red-text)}
.pill.amber{background:#FFF0D6; color:#7A4A00}
.pill.dark{background:var(--deep); color:#fff}

/* toast and modal */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--deep); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:.25s; z-index:90; max-width:340px; text-align:center}
.phone .toast{position:absolute; bottom:90px}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.modal{position:fixed; inset:0; background:rgba(11,27,69,.45); display:flex; align-items:flex-end; justify-content:center; z-index:80}
.phone .modal{position:absolute}
.modal[hidden]{display:none}
.modal .sheet{max-width:520px}
@media (min-width:700px){ body:not(.mob) .modal{align-items:center} body:not(.mob) .modal .sheet{border-radius:20px} }

/* page-level helpers */
.center{align-items:center; text-align:center}
.bigicon{width:64px; height:64px; border-radius:32px; display:flex; align-items:center; justify-content:center; background:var(--navy-tint)}
.bigicon.red{background:var(--red-tint)} .bigicon.teal{background:var(--teal-tint)}
.h2{font-size:16px; font-weight:800; color:var(--deep); margin:0}
.p{font-size:14px; line-height:1.55; margin:0; color:var(--ink)}
.muted{color:var(--muted)}
.entrybar{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#fff; border-bottom:1px solid var(--line); flex-shrink:0}
.entrybar img{height:32px; display:block}
.chipbar{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px}
.chipbar button{flex-shrink:0; height:34px; padding:0 12px; border-radius:17px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:12px; font-weight:700}
.chipbar button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.search{display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--line); background:#fff}
.search input{border:none; outline:none; flex-grow:1; font-size:14px; font-family:var(--sans); background:transparent}
.video{aspect-ratio:16/9; border-radius:14px; background:linear-gradient(135deg,#0B1B45,#13276C); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.video .bar2{position:absolute; left:12px; right:12px; bottom:12px; height:4px; border-radius:2px; background:rgba(255,255,255,.25)}
.video .bar2 i{display:block; height:4px; width:38%; background:var(--teal); border-radius:2px}
.paper{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 16px; font-size:14px; line-height:1.6; user-select:none}
.paper h4{margin:0 0 6px; font-size:14px; color:var(--deep)}
.tl{display:flex; flex-direction:column}
.tl .st{display:flex; gap:12px; padding-bottom:16px; position:relative}
.tl .st::before{content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line)}
.tl .st:last-child::before{display:none}
.tl .dotc{flex-shrink:0; width:32px; height:32px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background:var(--track-2); color:var(--muted); border:1px solid var(--line); z-index:1}
.tl .dotc.d{background:var(--navy); color:#fff; border:none}
.tl .dotc.c{background:var(--teal); color:var(--deep); border:none; outline:2px solid var(--deep)}
.msg{max-width:84%; padding:10px 12px; border-radius:14px; font-size:13px; line-height:1.5}
.msg.me{align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:4px}
.msg.them{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px}
.cert{border:2px solid var(--navy); border-radius:16px; background:#fff; padding:22px 18px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center}
.qr{width:84px; height:84px; background:repeating-conic-gradient(#0B1B45 0 25%,#fff 0 50%) 0 0/14px 14px; border:6px solid #fff; outline:1px solid var(--line)}

/* desktop: entry pages and admin */
.entry-d{min-height:calc(100vh - 41px); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px 60px; background:var(--cream)}
.entry-card{width:100%; max-width:520px; display:flex; flex-direction:column; gap:16px}
.entry-card .brand{display:flex; justify-content:center; padding-bottom:6px}
.entry-card .brand img{height:44px}
.entry-card .panel{background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 26px 22px; display:flex; flex-direction:column; gap:16px}
.dsingle{max-width:780px}
.dactions{display:flex; gap:12px; flex-wrap:wrap}
.dactions .btn{min-width:200px}
.side .sect{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8E9BC6; padding:12px 12px 4px}
.side .badge{margin-left:auto; min-width:22px; height:22px; border-radius:11px; background:var(--red); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 6px}
.side a.nav[aria-current="page"] .badge{background:var(--red); color:#fff}
.admin .side{background:var(--deep)}
.admin .side .who{background:#13276C}
.admin .side a.nav:hover{background:#13276C}
.table-wrap{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:auto}
table.t{border-collapse:collapse; width:100%; font-size:13px}
table.t th{text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:11px 14px; background:#FBFAF6; border-bottom:1px solid var(--line); white-space:nowrap}
table.t td{padding:12px 14px; border-top:1px solid #EFEDE6; vertical-align:middle}
table.t tr[data-href]{cursor:pointer} table.t tr[data-href]:hover td{background:#FBFAF6}
table.t td .t1{font-weight:700} table.t td .s1{font-size:12px; color:var(--muted)}
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink)}
.kpi b{font-size:26px; font-weight:800; color:var(--deep); font-variant-numeric:tabular-nums}
.kpi span{font-size:12px; font-weight:700; color:var(--muted)}
.kpi.alert{border:1.5px solid var(--red)} .kpi.alert b{color:var(--red-text)}
a.kpi:hover{border-color:var(--navy)}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.toolbar .search{width:300px; max-width:100%}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:700px){ .two,.three{grid-template-columns:1fr} }
.proof{background:repeating-linear-gradient(45deg,#F1EFE8,#F1EFE8 10px,#ECEAE2 10px,#ECEAE2 20px); border-radius:12px; border:1px solid var(--line); min-height:260px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; font-weight:700}
.rubric td input{width:70px}
.split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:start}
.editor{background:#fff; border:1px solid var(--line); border-radius:12px}
.editor .tb{display:flex; gap:4px; padding:6px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.editor .tb button{height:32px; min-width:32px; border:none; background:transparent; border-radius:8px; font-weight:800; color:var(--navy); font-size:13px}
.editor .tb button:hover{background:var(--navy-tint)}
.editor .area{min-height:110px; padding:12px 14px; font-size:14px; line-height:1.6; outline:none}
.tree{display:flex; flex-direction:column; gap:2px; font-size:13px}
.tree .n{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px}
.tree .n.l1{font-weight:800} .tree .n.l2{padding-left:26px; font-weight:700} .tree .n.l3{padding-left:44px}
.tree .n.sel{background:var(--navy-tint)}
.wkgrid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px}
.wk{border:1px solid var(--line); border-radius:10px; background:#fff; min-height:74px; padding:6px; display:flex; flex-direction:column; gap:4px; font-size:10px}
.wk b{font-size:11px; color:var(--muted)}
.wk .lo{font-size:10px; padding:3px 5px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px}
.phone .scroll{flex-grow:1; overflow-y:auto; overflow-x:hidden; min-height:0}
.phone form{display:flex; flex-direction:column; flex-grow:1; min-height:0}
[hidden]{display:none !important}

.acct{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F1EFE8;border-radius:12px;padding:10px 12px}
.acct .num{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;letter-spacing:.02em;color:#13276C;white-space:normal;line-height:1.35}
.acct .btn-ghost{height:32px;padding:0 12px;flex-shrink:0;background:#fff}

.side a.nav.sub{height:34px; font-size:13px; padding-left:44px; font-weight:600}
.ping{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line,#E4E1D6); border-left:4px solid var(--teal); border-radius:16px; padding:12px 14px; text-decoration:none; color:#1B2440}
.ping .pi{flex-shrink:0; width:36px; height:36px; border-radius:18px; background:#D6F6F0; display:flex; align-items:center; justify-content:center}
.ping .pk{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#1F7A6C}
.ping .ph{font-size:14px; font-weight:700; color:#0B1B45; line-height:1.35}
.ping .ps{font-size:12px; color:#55607A}
.newup{display:flex; align-items:center; gap:8px; text-decoration:none; font-size:13px; font-weight:700; color:#13276C; background:#DDE3F5; border-radius:12px; padding:8px 12px}
.newup .nd{width:8px; height:8px; border-radius:4px; background:#B3122B; flex-shrink:0}
.upd-item{display:flex; flex-direction:column; gap:4px; padding:12px 0; border-bottom:1px solid #ECE9DF}
.upd-item:last-child{border-bottom:none}
.upd-item .t{font-size:14px; font-weight:700; color:#0B1B45; line-height:1.4}
.upd-item .b{font-size:13px; color:#3A4560; line-height:1.55}
.upd-item .src{font-size:11px; font-weight:700; color:#55607A}

.phone .kpis{grid-template-columns:1fr 1fr; gap:10px}

.repeat{display:flex; flex-direction:column; gap:10px}
.rrow{background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px}
.rrow .rlab{font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.rrow .rm{width:32px; height:32px; border-radius:16px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer}
.repeat .rrow:only-of-type .rm{visibility:hidden}
.addrow{align-self:flex-start; display:flex; align-items:center; gap:10px; height:44px; padding:0 16px 0 8px; border-radius:22px; border:1.5px dashed var(--navy); background:var(--navy-tint); color:var(--navy); font:700 14px var(--sans); cursor:pointer}
.addrow .plus{width:28px; height:28px; border-radius:14px; background:var(--navy); display:flex; align-items:center; justify-content:center}

.subj-head{display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:2; background:var(--cream); padding:6px 0}
.subj-grp .upper{margin-top:2px}
.subj-why{color:var(--red-text) !important; font-weight:600}
.subj-why.soft{color:var(--muted) !important; font-weight:500}


/* M-01 sign in: centred, logo on top (13 Oct 2026) */
.centre-top{display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px 0 4px}
.centre-top img{height:56px; display:block}
.entry-card .brand.centre-top img{height:60px}
.centre-slogan{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--deep)} .centre-slogan em{color:var(--red)}
.phone .scroll.centre{display:flex; flex-direction:column}
.phone .main.centre{margin:auto 0; padding:24px 16px 22px; gap:18px}
.centre-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px 18px 18px; display:flex; flex-direction:column; gap:14px; box-shadow:0 14px 28px -24px rgba(11,27,69,.5)}
.centre-note{margin:0; text-align:center; font-size:12px; color:var(--muted)}
.or{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; color:var(--muted)}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.dactions.stack{flex-direction:column; align-items:stretch}

.centre-top{position:relative; width:100%}
.centre-back{position:absolute; left:0; top:4px; width:40px; height:40px; border-radius:20px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.entry-card .centre-back{display:none}
.nextsteps{display:flex; flex-direction:column; gap:10px; padding:4px 6px}
.nextsteps ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.nextsteps li{position:relative; display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:var(--muted)}
.nextsteps li:not(:last-child)::after{content:""; position:absolute; left:10px; top:28px; height:calc(100% - 20px); width:2px; background:var(--line)}
.nextsteps .dot{flex:none; width:22px; height:22px; border-radius:11px; border:1.5px solid #B9B6AC; background:var(--cream); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--muted); position:relative; z-index:1}
.nextsteps li.done{color:var(--ink)} .nextsteps li.done .dot{background:var(--teal); border-color:var(--teal)} .nextsteps li.done:not(:last-child)::after{background:var(--teal)}
.nextsteps li.now{color:var(--deep); font-weight:800} .nextsteps li.now .dot{background:var(--navy); border-color:var(--navy); color:#fff}
.nextsteps li b{margin-left:auto; font-size:11px; font-weight:800; color:var(--navy); background:var(--navy-tint); padding:3px 8px; border-radius:10px}


/* M-15: full Terms and Privacy text (13 Oct 2026) */
.lg-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lg-toc{border:1px solid var(--line); border-radius:12px; background:var(--cream)}
.lg-toc summary{padding:10px 12px; font-size:13px; font-weight:800; color:var(--navy); cursor:pointer}
.lg-toc nav{display:flex; flex-direction:column; padding:0 12px 10px}
.lg-toc nav a{font-size:13px; padding:5px 0; color:var(--navy); text-decoration:none; border-top:1px solid var(--line)}
.lg-sec{scroll-margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.lg-sec h2{margin:0 0 8px; font-family:var(--serif); font-size:18px; font-weight:600; color:var(--deep)}
.lg-sec p{margin:0 0 8px; font-size:13px; line-height:1.6; color:var(--ink)}
.lg-sec p b{color:var(--navy); margin-right:2px}

/* desktop only: M-15 Terms and Privacy uses the full width (13 Oct 2026) */
.entry-card:has(.lg-sec){max-width:1040px}
.entry-card:has(.lg-sec) .panel{padding:32px 40px 28px}
.entry-card:has(.lg-sec) .lg-sec p{font-size:14px; line-height:1.7}
/* desktop only: M-15 contents fixed in a left column, text on the right (13 Oct 2026) */
.entry-card:has(.lg-sec) .lg-toc{display:none}
.lg-wrap{display:grid; grid-template-columns:250px minmax(0,1fr); gap:32px; align-items:stretch}
.lg-col{background:var(--cream); border:1px solid var(--line); border-radius:14px}
.lg-side{position:sticky; top:66px; display:flex; flex-direction:column; max-height:calc(100vh - 82px); overflow-y:auto; padding:14px 14px 10px}
.lg-side .upper{padding-bottom:8px}
.lg-side a{font-size:13px; line-height:1.35; padding:7px 10px; border-radius:8px; color:var(--navy); text-decoration:none}
.lg-side a:hover{background:var(--navy-tint)}
.lg-side a.on{background:var(--navy); color:#fff; font-weight:700}
.lg-body .lg-sec:first-child{border-top:0; padding-top:0}
.entry-card:has(.lg-sec) .lg-sec{scroll-margin-top:70px}
.lg-sec p{font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0}
.lg-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line)}
.lg-foot .lg-back{display:inline-flex; align-items:center; gap:8px; width:auto; padding:0 22px}
#lgtop{scroll-margin-top:70px}
/* desktop only, M-02 Create Account only (it is the one screen with #cnic): wider card, fields in two columns (13 Oct 2026, for review) */
.entry-card:has(#cnic){max-width:980px}
.entry-card:has(#cnic) .panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; row-gap:16px; padding:32px 40px 28px}
.entry-card:has(#cnic) .panel > *{grid-column:1 / -1}
.entry-card:has(#cnic) .panel > .field{grid-column:auto}
.entry-card:has(#cnic) .panel > .field:has([role="radiogroup"]){grid-column:1 / -1}
.entry-card:has(#cnic) .panel > .field:has([role="radiogroup"]) [role="radiogroup"]{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.entry-card:has(#cnic) .panel > .dactions{justify-content:flex-end; align-items:flex-end}
.entry-card:has(#cnic) .panel > .dactions .btn{width:auto !important; min-width:320px; padding:0 32px}
.entry-card:has(#cnic) .nextsteps li b{margin-left:12px}
/* desktop only, M-03 Confirm email only (the one card holding .m03-grid): wider card, code on the left, help on the right (13 Oct 2026, for review) */
.m03-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); grid-template-areas:"otp note" "exp ."; column-gap:28px; row-gap:12px; align-items:center}
.m03-otp{grid-area:otp} .m03-note{grid-area:note} .m03-exp{grid-area:exp} .m03-wrong{grid-area:wrong; justify-self:end}
.m03-note .note{min-height:58px; align-items:center; margin:0}
.m03-note .note span{line-height:1.5}
.entry-card:has(.m03-grid){max-width:980px}
.entry-card:has(.m03-grid) .panel{padding:32px 40px 28px}
.entry-card:has(.m03-grid) .panel > .dactions{flex-direction:row; justify-content:space-between; align-items:center; margin-top:4px}
.m03-grid .m03-wrong{display:none}
.m03-wrong2{font-size:14px}
.entry-card:has(.m03-grid) .panel > .dactions .btn{width:auto !important; min-width:320px; padding:0 32px}
.entry-card:has(.m03-grid) .nextsteps li b{margin-left:12px}
.m03-l2{display:block} .m03-note .note{font-size:13px}
/* === M04-WIDE start: desktop only, M-04 only (the card holding the examination choice). Delete this block to undo. (13 Oct 2026) === */
.entry-card:has([data-reveal-group="ex"]){max-width:980px}
.entry-card:has([data-reveal-group="ex"]) .panel{padding:32px 40px 28px}
.entry-card:has([data-reveal-group="ex"]) [role="radiogroup"]{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.entry-card:has([data-reveal-group="ex"]) [data-reveal-group="ex"] .rad{min-height:92px; align-items:flex-start; padding:16px 18px}
.entry-card:has([data-reveal-group="ex"]) [data-reveal-group="ex"] .rad .dotb{margin-top:2px}
.entry-card:has([data-reveal-group="ex"]) [data-reveal-group="ex"] .rad span[style*="font-weight:700"]{font-size:16px}
.entry-card:has([data-reveal-group="ex"]) .panel > .dactions{justify-content:flex-start; align-items:flex-start}
.entry-card:has([data-reveal-group="ex"]) .panel > .dactions .btn{width:auto !important; min-width:320px; padding:0 32px}
.entry-card:has([data-reveal-group="ex"]) .nextsteps li b{margin-left:12px}
/* === M04-WIDE end === */


/* 12-category tag table (C-04, C-07): live and responsive */
.tg-wrap{container-type:inline-size; display:flex; flex-direction:column; gap:8px}
.tagt th:first-child{width:150px}
.tagt .tg-name{font-size:13px; font-weight:600; color:var(--ink)}
.tagt tr.tg-off{opacity:.5}
.tagt tr.tg-off .tg-name{font-weight:500}
.tagt tr.tg-bad, .tagt tr.tg-bad td{background:#FDF1F2}
.tagt .tg-need{display:block; margin-top:4px; font-size:12px; font-weight:700; color:#B3122B}
.tagt .tg-need[hidden]{display:none}
.tg-sum{font-size:13px; line-height:1.5; color:var(--ink); background:#F1EFE8; border-radius:10px; padding:8px 12px}
.tg-sum:empty{display:none}
.tg-err{color:#B3122B; font-weight:700}
.tg-note{color:#0E6E68; font-weight:700}
@container (max-width:640px){
  .tagt thead{display:none}
  .tagt, .tagt tbody{display:block; width:100%}
  .tagt tr{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line)}
  .t.tagt td{display:block; padding:0; border:0; background:transparent}
  .tagt td:last-child{grid-column:1 / -1}
  .tagt tr.tg-off td:last-child{display:none}
}
@container (max-width:380px){
  .tagt .tg-kinds .cbx.mini{flex:1 1 auto; justify-content:center}
}
.tagt .tg-lo{display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:var(--muted)}

.is-gated{opacity:.45; cursor:not-allowed}

/* Grouped admin side bar (Super Admin (A)) · 14 Oct 2026 */
.side a.nav.tight{height:36px; font-size:13.5px; gap:10px; border-radius:10px}
.side .sect{display:block}
.side .sect:first-of-type{padding-top:8px}
.side details.rolegrp{margin-top:6px; border-top:1px solid rgba(255,255,255,.08); padding-top:4px}
.side details.rolegrp summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; border-radius:10px}
.side details.rolegrp summary::-webkit-details-marker{display:none}
.side details.rolegrp summary:hover{color:#fff}
.side details.rolegrp .chev{font-size:11px; transition:transform .15s}
.side details.rolegrp[open] .chev{transform:rotate(90deg)}
.side a.nav.sub2{height:32px; font-size:13px; padding-left:22px; font-weight:600; color:#C9D1EE}

/* A-10: the eight roles as cards · 14 Oct 2026 */
.rgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:1180px){ .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rcard{display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:16px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:box-shadow .15s, transform .15s; min-width:0}
.rcard:hover{box-shadow:0 6px 18px rgba(19,39,108,.10); transform:translateY(-1px)}
.rcard.rc-red{border-color:#E7A3AE; background:#FFF8F9}
.rc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
.rc-no{width:26px; height:26px; border-radius:13px; background:var(--navy); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center}
.rc-ic{width:32px; height:32px; border-radius:10px; background:#E8ECF8; display:flex; align-items:center; justify-content:center}
.rc-name{font-size:14px; line-height:1.25}
.rc-ids{font-size:11.5px; color:var(--muted); font-weight:600}
.rc-lines{display:flex; flex-direction:column; gap:4px; margin:8px 0 6px; padding-top:8px; border-top:1px solid #EFEDE6}
.rc-line{display:flex; gap:6px; align-items:baseline; font-size:12px; color:var(--ink)}
.rc-line b{font-size:17px; min-width:22px}
.rc-go{margin-top:auto; font-size:12.5px; font-weight:800; color:var(--navy)}

/* Next LO marker on the mastery map (15 Oct 2026) */
.lo.isnext{outline:2px solid var(--navy); outline-offset:1px}