/* People & admin office screens: student profile, admission wizard, staff, partner schools,
   batches, fees (v2.1 preview), settings. Builds on tna.css + app.css tokens only. */

/* ---------- profile head (student) ---------- */
.profile-ov{align-items:center}
.profile-id{display:flex;gap:18px;align-items:center}
.profile-id h1{margin-bottom:6px}
.profile-id .meta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--ink-2);font-size:var(--t-14)}
.profile-id .meta>span{display:inline-flex;gap:6px;align-items:center}
.profile-id .meta .ico-sm{color:var(--ink-3)}
.profile-ov+.insight{margin-bottom:20px}
.figure .seal{--sz:34px;display:inline-grid;vertical-align:middle;margin-right:6px}
.figure dd .seal{font-size:13px}

/* ---------- marksheet (the marked answer sheet) ---------- */
.marksheet td.subj{text-align:right}
.marksheet .tick{margin-left:6px}
.marksheet tr.latest td{background:var(--paper)}
.marksheet .pen-circle{font-weight:700;color:var(--brand-900)}
.rank-cell{display:flex;justify-content:flex-end}
.rank-cell .seal{--sz:34px}

/* ---------- subject strengths ---------- */
.strengths{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.strengths li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline}
.strengths .meter{grid-column:1/-1}
.strengths b{font-weight:600}
.strengths .pill{margin-left:8px;vertical-align:1px}

/* ---------- attendance month calendar ---------- */
.att-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.att-cal .dow{font:600 var(--t-12)/1 var(--f-display);color:var(--ink-2);text-align:center;padding:4px 0 6px;letter-spacing:.03em}
.att-cal .day{min-height:74px;border:1px solid var(--line);border-radius:10px;padding:7px 8px;display:flex;flex-direction:column;justify-content:space-between;background:var(--sheet)}
.att-cal .day>b{font:600 var(--t-14)/1 var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums}
.att-cal .st{display:flex;align-items:center;gap:4px;font:600 var(--t-12)/1.1 var(--f-body)}
.att-cal .day.p .st{color:var(--success)}
.att-cal .day.a{background:var(--danger-bg);border-color:#ecc2c2}
.att-cal .day.a .st{color:var(--danger)}
.att-cal .day.l{background:var(--warn-bg);border-color:#efd8a3}
.att-cal .day.l .st{color:var(--warn)}
.att-cal .day.off{background:var(--paper);border-style:dashed}
.att-cal .day.off .st{color:var(--ink-3);font-weight:500}
.att-cal .day.test{box-shadow:inset 0 -3px 0 var(--accent-500)}
.att-cal .blank{border:0;background:none}
.cal-legend{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:var(--t-12);color:var(--ink-2);margin-top:14px}
.cal-legend span{display:inline-flex;gap:5px;align-items:center}
.cal-legend .p{color:var(--success)} .cal-legend .a{color:var(--danger)} .cal-legend .l{color:var(--warn)}
.cal-legend .t{width:14px;height:3px;background:var(--accent-500);border-radius:2px}

/* ---------- guardians, documents ---------- */
.person-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.person-row .who{flex:1 1 240px}
.linked{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--paper)}
.doc-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-700);flex:none}

/* ---------- WhatsApp preview ---------- */
.wa-phone{background:var(--paper-2);border-radius:var(--r-md);padding:16px;border:1px solid var(--line)}
.wa-to{display:flex;gap:10px;align-items:center;font-size:var(--t-14);margin-bottom:12px;color:var(--ink-2)}
.wa-bubble{position:relative;max-width:92%;margin-left:auto;background:#dcf3d2;color:#13301f;border-radius:12px 4px 12px 12px;padding:10px 12px 22px;font-size:var(--t-14);line-height:1.5;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa-bubble time{position:absolute;right:10px;bottom:5px;font-size:11px;color:#3f6a52}

/* ---------- wizard ---------- */
.wz-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.wz-steps{display:flex;list-style:none;margin:0;padding:14px 20px;gap:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;counter-reset:wz}
.wz-step{display:flex;align-items:center;gap:8px;flex:1 1 auto;font:600 var(--t-14)/1.2 var(--f-display);color:var(--ink-2);white-space:nowrap}
.wz-step+.wz-step::before{content:"";flex:1 1 12px;min-width:12px;height:1px;background:var(--line-2);margin-right:4px}
.wz-step .n{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:var(--t-12);background:var(--sheet);flex:none;font-variant-numeric:tabular-nums}
.wz-step .n .ico-sm{display:none}
.wz-step[aria-current]{color:var(--brand-900)}
.wz-step[aria-current] .n{background:var(--brand-900);border-color:var(--brand-900);color:#fff;box-shadow:0 0 0 3px var(--accent-100)}
.wz-step.done{color:var(--ink-1)}
.wz-step.done .n{background:var(--success-bg);border-color:#bfdccb;color:var(--success)}
.wz-step.done .n b{display:none}
.wz-step.done .n .ico-sm{display:block;width:14px;height:14px}
.wz-panel{padding:24px 20px}
.wz-panel>h2{margin-bottom:4px}
.wz-panel>.lead-say{color:var(--ink-2);font-size:var(--t-14);margin-bottom:20px}
.wz-nav{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);border-radius:0 0 var(--r-md) var(--r-md)}
.wz-nav .grow{flex:1}
.wz-nav [data-wz-next]{min-width:150px}
.wz-done{padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.wz-done .done-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--success-bg);color:var(--success)}
.wz-done .done-mark .ico{width:30px;height:30px}
.wz-done p{color:var(--ink-2);max-width:52ch}
.wz-done .row{justify-content:center;margin-top:8px}
.photo-pick{display:flex;gap:14px;align-items:center}
.photo-pick .ph{width:72px;height:88px;border-radius:10px;border:1.5px dashed var(--border-input);display:grid;place-items:center;color:var(--ink-3);background:var(--paper);flex:none}

/* option cards (batch, fee plan, role) */
fieldset.pick{border:0;margin:0;padding:0;min-width:0}
fieldset.pick>legend{font:600 var(--t-14) var(--f-body);color:var(--ink-1);margin-bottom:10px;padding:0}
.pick-list{display:flex;flex-direction:column;gap:10px}
.pick-opt{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--sheet);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.pick-opt:hover{border-color:var(--brand-700)}
.pick-opt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand-900);flex:none}
.pick-opt:has(input:checked){border-color:var(--accent-500);background:var(--accent-50);box-shadow:0 0 0 1px var(--accent-500)}
.pick-opt:has(input:focus-visible){box-shadow:var(--focus)}
.pick-opt:has(input:disabled){cursor:not-allowed;background:var(--paper);color:var(--ink-2)}
.pick-body{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center}
.pick-body b{font:600 var(--t-16)/1.3 var(--f-display);color:var(--brand-900)}
.pick-body small{grid-column:1;color:var(--ink-2);font-size:var(--t-14)}
.pick-body .end{grid-row:1/span 2;grid-column:2;text-align:right}
.cap{display:flex;flex-direction:column;gap:6px;min-width:150px;font-size:var(--t-12);color:var(--ink-2);text-align:right}
.cap b{font:600 var(--t-14) var(--f-display);color:var(--ink-1)}
.money{font:700 var(--t-18)/1.2 var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums}

/* review step */
.review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.review section{padding:16px 18px;border-top:1px solid var(--line)}
.review section:nth-child(-n+2){border-top:0}
.review section:nth-child(even){border-left:1px solid var(--line)}
.review h3{font-size:var(--t-14);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.review h3 .btn{margin-left:auto}
.issued{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.issued div{padding:14px 16px;border-radius:var(--r-md);background:var(--brand-50);border:1px solid var(--brand-100)}
.issued dt{font-size:var(--t-12);color:var(--ink-2);display:flex;gap:6px;align-items:center}
.issued dd{margin:4px 0 0;font:700 var(--t-18)/1.2 var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums;word-break:break-all}
.issued dd small{display:block;font:500 var(--t-12) var(--f-body);color:var(--ink-2);margin-top:2px}

/* ---------- split layouts (schools, settings) ---------- */
.split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
.school-list .list>li{cursor:pointer}
.school-list .list>li[aria-current]{background:var(--accent-50)}
.school-list .list>li[aria-current] b{color:var(--brand-900)}
.school-list a.who{text-decoration:none;color:inherit;flex:1}
.mini-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-bottom:1px solid var(--line)}
.mini-figs div{padding:14px 20px;border-left:1px solid var(--line)}
.mini-figs div:first-child{border-left:0}
.mini-figs dt{font-size:var(--t-12);color:var(--ink-2)}
.mini-figs dd{margin:2px 0 0;font:700 var(--t-20)/1.2 var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums}
.mini-figs dd small{font:500 var(--t-12) var(--f-body);color:var(--ink-2);margin-left:3px}
.detail-sec{padding:18px 20px;border-bottom:1px solid var(--line)}
.detail-sec:last-child{border-bottom:0}
.detail-sec>h3{font-size:var(--t-16);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.detail-sec>h3 .end{margin-left:auto}
.login-box{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line)}
.login-box code{font:600 var(--t-14) var(--f-body);color:var(--brand-900);background:var(--sheet);border:1px solid var(--line);padding:3px 8px;border-radius:6px}

/* ---------- staff ---------- */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0}
.roles>div{padding:16px 20px;border-left:1px solid var(--line)}
.roles>div:first-child{border-left:0}
.roles dt{font:600 var(--t-16) var(--f-display);color:var(--brand-900);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.roles dd{margin:0;font-size:var(--t-14);color:var(--ink-2)}
.roles dd ul{margin:8px 0 0;padding-left:18px}
.roles dd li{margin:2px 0}
.subj-list{display:flex;flex-wrap:wrap;gap:4px}

/* ---------- batches ---------- */
table.data tr.group-row th{position:static;background:var(--paper);font:650 var(--t-14)/1.3 var(--f-display);color:var(--brand-900);letter-spacing:0;padding:14px 16px 10px;border-top:1px solid var(--line-2);text-transform:none}
table.data tr.group-row:first-child th{border-top:0}
table.data tr.group-row th span{font:500 var(--t-12) var(--f-body);color:var(--ink-2);margin-left:8px}
.seat{display:flex;flex-direction:column;gap:5px;min-width:120px}
.seat span{font-size:var(--t-12);color:var(--ink-2)}
.seat b{font:600 var(--t-14) var(--f-display);color:var(--ink-1)}
.teach{list-style:none;margin:0;padding:0;font-size:var(--t-12);color:var(--ink-2);line-height:1.6}
.teach b{color:var(--ink-1);font-weight:600}
.load{list-style:none;margin:0;padding:0}
.load li{display:flex;gap:12px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line)}
.load li:last-child{border-bottom:0}
.load .who{flex:1}
.load .dots{display:flex;gap:3px}
.load .dots i{width:8px;height:18px;border-radius:3px;background:var(--d4)}
.load .dots i.o{background:var(--d1)}

/* ---------- fees ---------- */
.v21{display:inline-flex;vertical-align:middle;margin-left:10px}
dialog.drawer[open]{display:flex;flex-direction:column}
dialog.drawer .dlg-body{flex:1;overflow-y:auto}
.receipt{position:relative;background:var(--sheet);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:18px 18px 16px 34px;font-size:var(--t-14);background-image:repeating-linear-gradient(transparent 0 27px,var(--paper-2) 27px 28px)}
.receipt::before{content:"";position:absolute;top:0;bottom:0;left:20px;width:2px;background:var(--margin-rule)}
.receipt header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.receipt header b{font:700 var(--t-14) var(--f-display);color:var(--brand-900);display:block}
.receipt header small{color:var(--ink-2);font-size:var(--t-12);display:block}
.receipt .rno{text-align:right}
.receipt .amt{font:700 var(--t-24)/1.2 var(--f-display);color:var(--brand-900);margin:8px 0;font-variant-numeric:tabular-nums}
.receipt .kv{font-size:var(--t-12)}
.receipt .sign{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;font-size:var(--t-12);color:var(--ink-2)}
.receipt .stamp{border:2px solid var(--success);color:var(--success);font:700 var(--t-12) var(--f-display);letter-spacing:.1em;padding:4px 10px;border-radius:6px;transform:rotate(-4deg)}
.inst{display:flex;gap:4px}
.inst i{width:22px;height:8px;border-radius:4px;background:var(--line-2)}
.inst i.paid{background:var(--success)}
.inst i.due{background:var(--accent-500)}

/* ---------- settings ---------- */
.settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.subnav{position:sticky;top:calc(var(--topbar) + 20px);display:flex;flex-direction:column;gap:2px}
.subnav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--ink-2);text-decoration:none;font:500 var(--t-14) var(--f-body)}
.subnav a:hover{background:var(--paper-2);color:var(--brand-900)}
.subnav a[aria-current]{background:var(--sheet);color:var(--brand-900);font-weight:600;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.subnav a[aria-current] .ico-sm{color:var(--accent-600)}
.set-sec{scroll-margin-top:calc(var(--topbar) + 20px)}
.set-sec .sheet-body>p.muted{margin-bottom:16px;font-size:var(--t-14);max-width:70ch}
.set-sec .sheet-foot{justify-content:flex-end}
.set-sec .sheet-foot .note{margin-right:auto}
.edit-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-md)}
.edit-list li{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--t-14)}
.edit-list li:last-child{border-bottom:0}
.edit-list li b{font-weight:600}
.edit-list .end{margin-left:auto;display:flex;gap:8px;align-items:center}
.add-row{display:flex;gap:10px;margin-top:12px}
.add-row .input{flex:1}
.example{padding:12px 14px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);font-size:var(--t-14)}
.example ol{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.example li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;max-width:420px}
.example .seal{--sz:40px;font-size:15px}
.example .mark{justify-self:end;font-variant-numeric:tabular-nums}
.lb-prev{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.lb-prev span{display:flex;gap:10px;align-items:center;font-size:var(--t-14)}
.lb-prev .seal{--sz:28px}
.prefix-out{font:700 var(--t-20) var(--f-display);color:var(--brand-900);letter-spacing:.02em}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .wz-layout{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .roles{grid-template-columns:minmax(0,1fr)}
  .roles>div{border-left:0;border-top:1px solid var(--line)}
  .roles>div:first-child{border-top:0}
}
@media (max-width:920px){
  .settings{grid-template-columns:minmax(0,1fr)}
  .subnav{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .subnav a{white-space:nowrap;border:1px solid var(--line-2);background:var(--sheet);padding:7px 12px}
  .review{grid-template-columns:minmax(0,1fr)}
  .review section{border-left:0!important;border-top:1px solid var(--line)!important}
  .review section:first-child{border-top:0!important}
  .issued{grid-template-columns:minmax(0,1fr)}
  .mini-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-figs div:nth-child(3){border-left:0}
  .mini-figs div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .profile-id{align-items:flex-start}
  .profile-id .avatar-lg{--sz:52px}
  .att-cal{gap:4px}
  .att-cal .day{min-height:50px;padding:5px;align-items:center}
  .att-cal .st span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wz-step:not([aria-current]) .lbl{display:none}
  .wz-panel{padding:20px 16px}
  .wz-nav{padding:12px 16px}
  .wz-nav [data-wz-next]{flex:1;min-width:0}
  .pick-body{grid-template-columns:minmax(0,1fr)}
  .pick-body .end{grid-row:auto;grid-column:1;text-align:left}
  .cap{text-align:left;min-width:0}
  .person-row{flex-direction:column}
  table.data.cards tr.group-row{padding:12px 16px 8px;background:var(--paper)}
  table.data.cards tr.group-row th{display:block;padding:0;border:0;background:none}
  .seat{min-width:0;align-items:flex-end}
  .seat .meter{width:120px}
  .teach{text-align:right}
  .add-row{flex-direction:column}
}
@media print{
  .profile-ov .actions,.tabs{display:none!important}
}
/* round-2 fixes */
.inst-note{display:block;margin-top:4px}
#dues td.lead{min-width:170px}
.issued dd small{word-break:normal}
.teach li{white-space:nowrap}
.seat>span:last-child{display:inline-flex;gap:4px;align-items:center}
.load .dots i{width:6px;height:14px}
@media (max-width:640px){
  .sheet-head{flex-wrap:wrap;row-gap:2px}
  .sheet-head .sub{order:3;flex-basis:100%}
  table.data.cards td.margin-col .mark{margin-left:auto}
  table.data.marksheet.cards tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}
  table.data.marksheet.cards td{flex-direction:column;align-items:flex-start;text-align:left;gap:0}
  table.data.marksheet.cards td.lead{grid-column:1/-1}
  table.data.marksheet.cards td.margin-col{grid-column:span 2;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
  table.data.marksheet.cards td.margin-col::before{flex-basis:100%}
  table.data.marksheet.cards td.margin-col .mark{margin-left:0}
  table.data.marksheet.cards .rank-cell{justify-content:flex-start}
  .inst-note{white-space:normal}
}
#dues td:nth-child(2){min-width:104px}
#dues .pill{white-space:normal}
.receipt .rno b{white-space:nowrap}
table.data tr.group-row th{white-space:normal}
.date-range{flex-wrap:nowrap}
@media (max-width:640px){
  .date-range{flex-wrap:wrap}
  .date-range .input{flex:1 1 140px}
  .edit-list li{flex-wrap:wrap;row-gap:2px}
  .edit-list li .muted{flex-basis:100%;order:3;font-size:var(--t-12)}
  .add-row .input{flex:none}
  .login-box .who{flex-basis:100%!important}
}