/* =====================================================================
   Phase 30 - calm, flat, light design layer (loaded after app.css).
   Rules: white tiles on a quiet grey page; 1px borders instead of shadows;
   ONE accent colour; colour is used only when it means something
   (green = good, amber = needs a look, red = problem); one big number per
   group, the rest smaller. Shadows only on things that float (menu drawer,
   search suggestions, sticky save bar).
   ===================================================================== */
:root{
  --ink:#101828; --text:#1d2939; --muted:#667085;
  --paper:#f6f7f9; --surface:#fff; --line:#e4e7ec; --line-2:#eef0f4;
  --blue:#1b5fc1; --blue-d:#154c9b; --soft:#eef3fb;
  --ok:#157347; --ok-bg:#e9f5ee; --warn:#9a6700; --warn-bg:#fff6df; --danger:#b42318; --err-bg:#fdecea;
  --radius:14px; --radius-s:10px; --shadow:none;
}
body{background:var(--paper);color:var(--text);font-variant-numeric:tabular-nums}
h1,h2,h3{letter-spacing:-.01em}

/* ---- flat surfaces: border, no shadow ---- */
.panel,.figure,.task-card,.guide,.guide-full,.hub-card,.tile{box-shadow:none!important;border:1px solid var(--line)!important;border-radius:var(--radius)}
.panel>h2{border-bottom:1px solid var(--line-2);padding:14px 20px;font-size:1rem;font-weight:650}
.panel>h2 svg.i{color:var(--muted)}
a.hub-card:hover,a.hub-card:focus-visible{box-shadow:none;border-color:var(--blue)}
.btn{box-shadow:none;border-radius:var(--radius-s)}
.btn-primary{background:var(--blue);border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
.topbar{box-shadow:none}
.tabbar{box-shadow:none}
.side{box-shadow:none}
@media (max-width:860px){.side{box-shadow:0 0 40px rgba(16,24,40,.18)}}   /* the drawer floats */
.page-head h1{font-size:1.5rem;font-weight:650}
.page-head p{color:var(--muted)}

/* ---- sign-in page: plain, no glow or grid overlay ---- */
.auth-side{background:var(--ink)!important}
.auth-side::after{display:none}
.auth-main{background:var(--surface)}
.auth-points .ic{background:rgba(255,255,255,.08)}

/* ---- numbers: one bigger lead figure + smaller supporting tiles ---- */
.figures{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;background:transparent;border:0;overflow:visible}
.figure{flex:1 1 150px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;text-align:left;background:var(--surface);padding:16px 18px;min-height:92px;min-width:0}
.figure b{font-size:1.6rem;font-weight:650;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.figure span{font-size:.88rem;color:var(--muted)}
.figure .fig-ic{display:none}
main>.figures>.figure:first-child,.bento>.figures>.figure:first-child{flex:2 1 280px;min-height:112px}
main>.figures>.figure:first-child b,.bento>.figures>.figure:first-child b{font-size:2.4rem}
.panel .figures{margin:0;padding:14px 16px 4px;gap:10px}
.panel .figure{background:var(--paper);border:0!important;min-height:0;flex:1 1 120px}
@media (max-width:520px){.figures{gap:10px}.figure{flex-basis:calc(50% - 5px);padding:14px;min-height:84px}main>.figures>.figure:first-child,.bento>.figures>.figure:first-child{flex-basis:100%}}

/* ---- bento board: tiles of different sizes on one grid ---- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:start;margin-bottom:12px}
.bento{grid-auto-flow:dense}
.bento>*{grid-column:span 12;margin-bottom:0;min-width:0}
.bento>#today,.bento>#todo,.bento>#setup,.bento>#recent,.bento>#my-classes{grid-column:span 12}
@media (min-width:1100px){
  .bento>#today,.bento>#todo,.bento>#setup,.bento>#recent{grid-column:span 6}
  .bento>#my-classes{grid-column:span 12}
}
.bento .panel{margin-bottom:0}

/* ---- notices: flat strip with a coloured edge, colour only for meaning ---- */
.notice,.alert-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid #d9a21b;border-radius:var(--radius-s);padding:12px 16px;margin-bottom:12px}
.alert-card svg.i{color:var(--warn)}
.notice a{font-weight:600}
.flash{border-radius:var(--radius-s)}

/* ---- tables and badges: quiet ---- */
table.data th{background:transparent;color:var(--muted);font-weight:600;font-size:.82rem;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line)}
table.data td{border-top:1px solid var(--line-2)}
.badge{border-radius:99px;font-weight:600}
.guide-bar i{background:var(--blue)}
.is-next .step-no,.next-tag{background:var(--blue)}
.step-ic,.guide-ic{background:var(--soft);color:var(--blue)}

/* ---- menu: light, selected item is a soft tint, no coloured icon tiles ---- */
.side nav a[aria-current="page"]{background:var(--soft);color:var(--blue)}
.brand-mark{border-radius:10px}

/* ---- floating things keep a shadow ---- */
#side-suggest,.suggest-list,.sticky-actions{box-shadow:0 8px 24px rgba(16,24,40,.10)}
.sticky-actions{box-shadow:none}

@media print{.panel,.figure{box-shadow:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* setup checklist folds away once everything is done */
details.panel>summary{list-style:none;cursor:pointer}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary h2{border-bottom:0;display:flex;align-items:center;gap:10px;padding:14px 20px;font-size:1rem;font-weight:650;margin:0}
details.panel[open]>summary h2{border-bottom:1px solid var(--line-2)}
details.panel>summary::after{content:"\25B8";float:right;margin:-34px 20px 0 0;color:var(--muted);font-size:12px}
details.panel[open]>summary::after{content:"\25BE"}

/* Phase 31: yearly plan rows (readable on a phone), printed notice */
.notice-ok{background:#ecf6ef;border-color:#b7dcc3;color:#1f5b33}
.plan{display:block}
.plan-head,.plan-row{display:grid;grid-template-columns:36px minmax(220px,2.2fr) minmax(130px,1fr) minmax(110px,.8fr) minmax(160px,1.4fr) 70px auto;gap:10px;align-items:center;padding:10px 14px}
.plan-head{font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#667085);border-bottom:1px solid var(--line,var(--line))}
.plan-row{border-bottom:1px solid var(--line,var(--line))}
.plan-row.is-unit{background:var(--surface-2)}
.plan-row.is-unit .plan-name input{font-weight:700}
.plan-row.is-child .plan-name{padding-left:22px}
.plan-row:target{outline:2px solid #2f5fbf;outline-offset:-2px}
.plan-f label{display:none}
.plan-f input,.plan-f select{width:100%;min-width:0;text-overflow:ellipsis}
.plan-used b{font-weight:600}
.plan-lbl{display:none}
.plan-act{display:flex;gap:6px;flex-wrap:wrap}
.plan-no{color:var(--muted,#667085);font-size:.9rem}
@media (max-width:1100px){
  .plan-head{display:none}
  .plan-row{grid-template-columns:1fr 1fr;gap:10px 12px;padding:14px;position:relative}
  .plan-no{position:absolute;top:14px;right:14px;font-size:.8rem}
  .plan-name,.plan-note,.plan-used,.plan-act{grid-column:1 / -1}
  .plan-name{padding-right:30px}
  .plan-row.is-child .plan-name{padding-left:0;border-left:3px solid var(--line);padding-left:10px}
  .plan-f label{display:block;font-size:.8rem;font-weight:600;margin-bottom:4px;color:var(--muted,#667085)}
  .plan-lbl{display:inline;margin-right:6px;color:var(--muted,#667085);font-size:.85rem}
  .plan-act .btn{flex:1 1 auto;min-height:44px}
}
@media (max-width:480px){.plan-row{grid-template-columns:1fr}}

/* Phase 31: marks entry — one item at a time (default), the full table is optional */
.recview .panel-body{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.rv-info{flex:1 1 100%;font-size:.95rem;color:var(--text)}
.rv-pick{display:flex;gap:8px;align-items:center;flex:1 1 360px;max-width:560px}
.rv-pick select{flex:1;min-width:0;min-height:48px;font-size:1rem;font-weight:600}
.rv-pick .btn{min-height:48px;min-width:48px;font-size:1.4rem;line-height:1;padding:0 12px}
.rv-grid{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--muted);min-height:44px}
.rv-grid input{width:20px;height:20px}
.rec-table[data-view=item] .col-item:not(.rv-on){display:none}
.rec-table[data-view=item]:not([data-item="x"]) .col-absent,
.rec-table[data-view=item]:not([data-item="x"]) .col-comment,
.rec-table[data-view=item]:not([data-item="x"]) .col-evid{display:none}
.rec-table[data-view=item],.rec-table[data-view=item] thead,.rec-table[data-view=item] tbody{display:block;width:100%;border:0}
.rec-table[data-view=item] thead tr:first-child{display:none}
.rec-table[data-view=item] .setall-row{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.rec-table[data-view=item] .setall-row th{display:none;padding:0;border:0;background:none;position:static;font-weight:600}
.rec-table[data-view=item] .setall-row th.col-setlabel{display:block}
.rec-table[data-view=item] .setall-row th.rv-on{display:block;flex:1;max-width:320px}
.rec-table[data-view=item] .setall-row th.rv-on select{width:100%;min-width:0}
.rec-table[data-view=item][data-item="x"] .setall-row{display:none}
.rec-table[data-view=item] tr.rec-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.rec-table[data-view=item] tr.rec-row td{display:block;padding:0;border:0;background:none;position:static;min-width:0}
.rec-table[data-view=item] td.col-roll{grid-column:1;font-weight:600;color:var(--muted)}
.rec-table[data-view=item] td.col-student{grid-column:2;grid-row:1;min-width:0}
.rec-table[data-view=item] td.col-student strong{overflow-wrap:anywhere}
.rec-table[data-view=item] td.col-student .same-above{display:inline-block;margin:4px 0 0;min-height:32px}
.rec-table[data-view=item] td.item-cell{grid-column:3;grid-row:1;min-width:0;text-align:right}
.rec-table[data-view=item] td.item-cell .pts-main,.rec-table[data-view=item] td.item-cell .raw{width:96px;min-height:48px;font-size:1.1rem}
.rec-table[data-view=item] td.item-cell .seg{justify-content:flex-end}
.rec-table[data-view=item] td.col-total{grid-column:2;grid-row:2;font-size:.85rem;color:var(--muted)}
.rec-table[data-view=item] td.col-total .marks{font-weight:600;color:var(--text)}
.rec-table[data-view=item] td.col-absent,.rec-table[data-view=item] td.col-comment,.rec-table[data-view=item] td.col-evid{grid-column:2 / -1}
.rec-table[data-view=item] td.col-comment input[type=text]{width:100%}
@media (max-width:640px){
  .rec-table[data-view=item] tr.rec-row{grid-template-columns:30px minmax(0,1fr)}
  .rec-table[data-view=item] td.item-cell{grid-column:2;grid-row:2;text-align:left}
  .rec-table[data-view=item] td.item-cell .seg{justify-content:flex-start}
  .rec-table[data-view=item] td.item-cell .pts-main,.rec-table[data-view=item] td.item-cell .raw{width:100%;max-width:200px}
  .rec-table[data-view=item] td.col-total{grid-row:3}
}
/* the full table: the name column no longer sits on top of the marks, and the save bar stays above the phone's bottom menu */
.rec-table[data-view=grid] td.col-student,.rec-table[data-view=grid] th.col-student{min-width:170px;max-width:220px}
.rec-table[data-view=grid] td.col-student .same-above{display:block;margin:4px 0 0}
.rec-table[data-view=grid] td:nth-child(2),.rec-table[data-view=grid] th:nth-child(2){box-shadow:1px 0 0 var(--line)}
.sticky-actions{background:var(--paper);border-top:1px solid var(--line);padding:12px 0;z-index:5}
@media (max-width:860px){
  .sticky-actions{bottom:calc(66px + env(safe-area-inset-bottom));padding:10px 0}
  #record-form{padding-bottom:12px}
  #record-form .save-hint{display:none}
}

.st-meta{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.rec-table[data-view=grid] .st-meta{display:none}

/* a button hidden by the page script must really be hidden (buttons are inline-flex) */
.btn[hidden],.sticky-actions [hidden]{display:none !important}
@media (max-width:860px){
  .sticky-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .sticky-actions .btn{min-height:44px;padding:0 14px}
  .sticky-actions .save-state{flex:1 1 100%;margin:0;font-size:.8rem}
}

.send-layout{min-height:40px;max-width:260px}
.send-pick>summary{cursor:pointer;padding:12px 16px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sp-actions{display:flex;gap:8px;margin:8px 0}
.sp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 14px}
.sp-list li label{display:flex;gap:8px;align-items:center;min-height:44px;padding:4px 8px;border:1px solid var(--line,var(--line));border-radius:8px;cursor:pointer}
.sp-list li.sp-off label{opacity:.55;cursor:not-allowed;background:var(--surface-2)}
.sp-list input{width:20px;height:20px;flex:none}
.sp-name{font-weight:600}
.method-pick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
tr.unit-off td{opacity:.6}