:root{
    --grid:#cfcfcf; --band:#d9ead3; --bandline:#b6d7a8; --gold:#ffe699; --goldline:#bf9000;
    --ink:#202124; --sub:#6b6f74; --diag:#1c5d99; --pre:#6a3d9a; --teach:#2e7d32; --inclass:#0e7c7b; --flag:#8c1d40;
    --again:#c0392b; --hard:#b45309; --good:#2e7d32; --easy:#0b5394;
    --secure:#0b5394; --maint:#2e7d32; --fragile:#c0392b; --unseen:#9aa0a6; --prov:#8a5a00;
    /* BUILD SPEC v3 1.5, board A309 and ruling 369: LEVEL-UP IS MAGENTA, on every level-up surface.
       Blue is not free (secure and Easy have it) and the two colours level-up wore before this were
       amber, which means Hard, and purple, which means Pre-teach. One colour, one meaning. */
    --lvup:#a4157f; --lvup-ink:#8e1367; --lvup-line:#c25aa6; --lvup-fill:#fceaf5;
    /* 1.2: the three button colours. One green only; #38761d and #3f6b39 are retired. */
    --btn-line:#b9c3cc; --btn-ink:#3a4148; --btn-go:#2f5c29; --btn-withdraw:#8c1d40;
    /* F85 (ruling 573): PRIVATE IS SLATE, the one hue family the app had given no meaning to. A slate box is typed into the
       identity store under the student code and never into the Planner file. */
    --vault:#3e5368; --vault-ink:#2c3e50; --vault-line:#8698ad; --vault-fill:#e6ecf2;
    /* F161 (the layout and spacing pass, his words of 5 Oct 2026: "clarity and simplification are key"): ONE SPACING SCALE
       AND ONE TYPE SCALE for the Lead Educator face (Students, Leads, Tutors, Access log). Space is 4, 8, 12, 16 or 24; type is
       11, 12, 13, 15 or 18; one line colour for rows and frames, one head colour, one navy, one focus ring. */
    --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
    --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:15px; --fs-xl:18px;
    --line:#e3e6ea; --line-strong:#cfd5dc; --head:#f5f7f9; --ink-2:#4a5560; --navy:#1b3348; --focus:#2f5fb3;
  }
  *{box-sizing:border-box}
  body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#f4f5f7;margin:0;padding:22px 16px 60px}
  .wrap{max-width:1240px;margin:0 auto}
  h1{font-size:20px;margin:0 0 4px}
  .note{background:#fff8e1;border:1px solid #e6c65c;border-radius:6px;padding:10px 14px;font-size:12.5px;color:#5f4c00;margin:10px 0 16px;line-height:1.5}
  /* F296 (UX-A, AUDIT U1 and U2): THE SIGN-IN CARD AND THE REFUSAL PAGE are the plain white house card with its head band,
     not the amber .note, and their one press is the house main press (.btn-push) at the press size: 32 high, 44 on a phone */
  .fbcard{max-width:560px;padding:0;font-size:var(--fs-md);line-height:1.5}
  .fbcard > .card-head{margin:0;padding:10px 14px;background:var(--head,#f5f6f8);border-radius:6px 6px 0 0;font-size:var(--fs-lg);color:var(--ink,#292929);letter-spacing:0;text-transform:none}
  .fbcard > .fbcardbody{padding:4px 14px 8px}
  .fbcard .fbpress{min-height:32px;font-size:var(--fs-md);padding:0 16px;box-sizing:border-box}
  @media (max-width: 599px){ .fbcard .fbpress{min-height:44px} }
  .tabs{display:flex;gap:6px;flex-wrap:wrap}
  /* ---- Feature 1: pre-planning integration ---- */
  .section{border:1px solid var(--grid);border-radius:6px;margin:14px 0;overflow:hidden;background:#fff}
  .section-head{background:#eef6ea;border-bottom:1px solid var(--grid);padding:8px 12px;font-weight:bold;font-size:12.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  .section-head .section-number{display:inline-block;background:#3f6b39;color:#fff;border-radius:4px;font-size:10.5px;padding:1px 6px;margin-right:8px}
  .section-head .section-source{font-weight:normal;font-size:11px;color:var(--sub)}
  /* F275 (V27 of the visual audit, 13 Oct 2026): A SECTION HEAD AND A LESSON HEAD ARE BUTTONS, so Tab reaches them and F161's
     ring shows. The reset gives back what the div had (the full width, no top or side line, the page's type and ink, text
     from the start); everything .section-head sets above still decides its look. */
  button.section-head{width:100%;margin:0;border-top:0;border-left:0;border-right:0;border-radius:0;font-family:inherit;font-style:inherit;line-height:inherit;letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;text-indent:0;text-shadow:none;text-align:inherit;color:inherit}
  button.section-head:focus-visible{outline-offset:-2px}   /* the head's .section clips what is outside it (overflow:hidden), so F161's ring is drawn just inside the head */
  .section-body{padding:12px 14px}
  /* F376 (LIST row 11.4): BUILD NEXT BLOCK'S FOUR STEPS, one open at a time, each opening with its What you do now line; a
     folded step is one line. The cards of the step sit inside it; a card's explanation is under its small (?). */
  .bnbsteps{margin:10px 0}
  .bnbstep{border:1px solid var(--grid);border-radius:6px;margin:8px 0;background:#fff}
  .bnbstep-on{border-color:#3f6b39;box-shadow:0 0 0 1px #3f6b39 inset}
  button.bnbstep-head{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:8px 12px;border:0;border-radius:6px;background:transparent;font:inherit;font-weight:bold;font-size:13px;color:inherit;text-align:left;cursor:pointer}
  button.bnbstep-head:focus-visible{outline-offset:-2px}
  .bnbstep-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:999px;background:#3f6b39;color:#fff;font-size:11px}
  .bnbstep-title{flex:1}
  .bnbstep-done{font-weight:normal;font-size:11px;color:var(--sub);white-space:nowrap}
  .bnbstep-body{padding:2px 14px 12px;border-top:1px solid var(--grid)}
  .bnbstep-body>.nowthen{margin-top:10px}
  .bnbstep-helps{margin-top:14px}
  .bnbstep-body .nowthen-what{color:var(--ink)}
  .bnbstep-next{white-space:nowrap}
  .bnbsum-row{margin:2px 0}
  .bnbsum-sub{font-weight:600}
  .bnbsum{border:1px solid var(--grid);border-radius:6px;padding:8px 12px;margin:10px 0;background:#f8faf7;font-size:12.5px;line-height:1.5}
  .section-head .section-q{font-weight:normal;font-size:11px;color:var(--sub);cursor:help;margin-left:4px}
  @media (max-width: 599px){ .bnbstep-done{white-space:normal} }
  .field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px 18px}
  .field{font-size:12px;line-height:1.45}
  .field b{display:block;font-size:10.5px;letter-spacing:.4px;color:var(--sub);font-weight:bold}
  .field-auto{background:#f4f7f4;border-left:4px solid #9dbd96;padding:4px 8px;border-radius:0 4px 4px 0}
  .field-typed{background:#fffdf3;border-left:4px solid #d9b23a;padding:4px 8px;border-radius:0 4px 4px 0}
  .field-live{background:#eef3fa;border-left:4px solid #7d9dc4;padding:4px 8px;border-radius:0 4px 4px 0}
  .field-number{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:3px 8px;border-bottom:1px dotted var(--grid)}
  .field-number span:last-child{font-weight:bold;font-variant-numeric:tabular-nums}
  .input-area{width:100%;min-height:54px;font:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--grid);border-radius:4px;background:#fffdf3;resize:vertical}
  .input{font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--grid);border-radius:4px;background:#fffdf3}
  .tally{font-size:12.5px;font-weight:bold;padding:6px 10px;border-radius:6px;display:inline-block}
  .tally-ok{background:#eaf5e6;border:1px solid #7ea875;color:#2f5c29}
  .tally-warn{background:#fdf3e0;border:1px solid #d9a441;color:#7a5410}
  .tally-bad{background:#fbe9e9;border:1px solid #c06a6a;color:var(--fragile)}
  .step{display:flex;gap:9px;align-items:flex-start;font-size:12px;padding:4px 0;border-bottom:1px dotted var(--grid)}
  .step .step-number{background:#e9eaec;border-radius:4px;padding:0 6px;font-weight:bold;font-size:11px}
  .step-done{color:#2f5c29}
  .btn-push{background:var(--btn-go);color:#fff;border:none;border-radius:4px;padding:8px 14px;font-weight:bold;font-size:12.5px;cursor:pointer}
  .btn-push:disabled{background:#9aa39a;cursor:default}
  .subnote{font-size:11.5px;color:var(--sub)}
  .outcome{font-weight:bold}
  .outcome-met{color:#2f5c29}.outcome-part{color:#7a5410}.outcome-missed{color:var(--fragile)}
  .tabdivider{align-self:flex-end;font-size:9.5px;letter-spacing:1.2px;color:#9aa0a8;font-weight:bold;padding:0 10px 11px;border-bottom:1px solid var(--grid)}
  .said{color:#22406b;font-style:italic}
  .label{font-weight:bold}
  .star{color:var(--fragile);font-weight:bold}
  .tickmark{color:#2f5c29;font-weight:bold}
  .crossmark{color:#b0b4ba}
  .card{border:1px solid var(--grid);border-radius:6px;padding:10px 12px;background:#fff}
  .card-head{font-size:11.5px;letter-spacing:.2px;color:var(--sub);font-weight:bold;border-bottom:1px solid var(--grid);padding-bottom:4px;margin-bottom:6px}
  .keyvalue{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:2px 0}
  .keyvalue span:first-child{color:var(--sub)}
  .keyvalue span:last-child{text-align:right}
  /* F276 (V18): THE DETAILS CARDS' VALUE COLUMN IS ONE WIDTH. The label takes a fixed 104 pixels and the value the rest, and a
     box in it fills it, so the Parent email box shows the whole address where it was cut at the box's own width */
  .detailscard .keyvalue > span:first-child{flex:0 0 104px;min-width:0}
  .detailscard .keyvalue > span:last-child{flex:1 1 0;min-width:0}
  .lroom{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}   /* F459: the box and its save wrap inside the card */
  .lroom input{flex:1 1 60px;min-width:0;width:auto;max-width:340px}
  select.lroomadd{width:100%;min-width:0;max-width:340px}
  .lroom .lroomsaid{flex-basis:100%;display:block;font-size:11px;margin-top:2px;color:#2d5e44}   /* F459: the lesson room box's one line under it */
  .lroom .lroomsaid.warn{color:#8a5a00}
  .lroom .lroomsaid.why{color:#b3261e}
  .lroombar .lroomopen{margin-left:8px;text-decoration:none;background:#2f6b3a;border-color:#2f6b3a;color:#fff}   /* F459: Open lesson room on the student's bar */
  .tint-term{background:#eef6ea}
  .tint-derived{background:#faf7f0;color:#6b6f76}
  .advice-card{border:1px solid var(--grid);border-left:4px solid #7d9dc4;border-radius:6px;padding:9px 12px;margin:7px 0;background:#fff}
  .advice-card.added{border-left-color:#3f6b39;background:#f4f9f2}
  .advice-card.deferred{border-left-color:#d9a441;background:#fdfaf2}
  .advice-card.rejected{border-left-color:#b0b4ba;background:#f7f7f8;opacity:.62}
  .advice-card.probe{border-left-style:dashed}
  .advice-title{font-weight:bold;font-size:13px}
  .advice-sub{font-size:11.5px;color:var(--sub);margin-bottom:4px}
  .advice-reason{font-size:12.5px;margin:5px 0;line-height:1.5}
  .advice-chain{font-size:12.5px;margin:5px 0;line-height:1.55;background:#eef3fa;border-left:4px solid #7d9dc4;padding:6px 9px;border-radius:0 4px 4px 0}
  .readnote{font-size:11.5px;color:var(--sub);margin:4px 0;line-height:1.5}
  /* F375 (finding 43, his design rule of 16 Oct 2026): THE ONE LINE, ui/common.js nowThen. What you do now with its one button,
     Then quiet under it, the details folded. */
  .nowthen{margin:4px 0 6px;line-height:1.45}
  .nowthen-now{font-weight:600;color:var(--ink)}
  .nowthen-now .nowthen-btn{display:inline-block;margin-left:4px}
  .nowthen-then{font-size:var(--fs-sm,12px);color:var(--sub);margin-top:2px}
  .nowthen-lbl{font-weight:bold;white-space:nowrap}
  .nowthen-then .nowthen-lbl{font-weight:600}
  .nowthen-more{margin-top:3px;font-size:var(--fs-sm,12px)}
  .nowthen-more>summary{cursor:pointer;color:var(--sub)}
  .nowthen-q{font-size:11px;color:var(--sub);cursor:help;margin-left:4px;white-space:nowrap}
  .leadnextcell .nowthen{margin:0}
  .leadnextcell .nowthen-now{font-weight:normal}
  .tag-advice{display:inline-block;font-size:10.5px;border:1px solid var(--grid);border-radius:999px;padding:1px 7px;margin:2px 4px 2px 0;background:#f4f5f6;color:#4a4f56}
  .tag-advice.hot{background:#fbeaea;border-color:#d9a1a1;color:var(--fragile)}
  .tag-advice.also{background:#eef6ea;border-color:#9dbd96;color:#2f5c29}
  .advice-buttons{margin-top:7px}
  .advice-buttons button{margin-right:5px}
  .advice-state{font-size:11.5px;font-weight:bold;margin-top:5px}
  /* ITEM 5 (board A463, his answer A, built under board A570 (the four items of A463 F56 could not reach)): ONE LINE PER
     RECOMMENDATION CARD WITH AN EXPANDER, option a only. A shut card is its name, its instruction chip, its urgency tag and
     its three buttons on one row; an open card is exactly what it was before, plus the arrow. Nothing is removed. */
  /* RULING 451 (the fourteen tutor page display and simplification answers) ITEM 22, board A565 part b: the inline
     confirmation that replaced the success alert on the school position card. */
  .check-said{margin-top:6px;font-size:12px;color:#2f5c29;background:#f2f8f0;border:1px solid #cfe3c9;border-radius:6px;padding:5px 9px}
  .recline{cursor:pointer}
  .recarrow{color:var(--sub);font-weight:normal}
  .recline-tags{margin:3px 0}
  .advice-card.shut{padding:5px 10px;margin:4px 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
  .advice-card.shut .recline{flex:1 1 300px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .advice-card.shut .recline-tags{margin:0;white-space:nowrap}
  .advice-card.shut .advice-buttons{margin-top:0}
  .advice-card.shut .advice-state{margin-top:0}
  .lane{border:1px solid var(--grid);border-radius:6px;margin:12px 0;overflow:hidden}
  .lane-head{background:#eef3fa;border-bottom:1px solid var(--grid);padding:8px 12px;font-weight:bold;font-size:12.5px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
  .lane-head .lane-count{font-weight:normal;font-size:11.5px;color:var(--sub)}
  .lane-body{padding:10px 12px}
  .lane-hero .lane-head{background:#e8f0e5}
  .sortbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
  .btn-sort{border:1px solid var(--btn-line);background:#fff;border-radius:4px;padding:3px 11px;font-size:11.5px;color:var(--btn-ink);cursor:pointer}
  .btn-sort.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:bold}   /* F289 (D22): a selected state is navy, green is only the go press */
  .banner{border-radius:6px;padding:8px 12px;font-size:12.5px;margin:8px 0;border:1px solid #9dbd96;background:#f2f8f0;color:#2f5c29}
  .banner.stale{border-color:#d9a441;background:#fdf3e0;color:#7a5410}
  .provenance{background:#fff8e1;border:1px dashed #e6c65c;border-radius:6px;padding:6px 10px;font-size:11.5px;color:#5f4c00;margin:6px 0}
  .advice-here{font-size:10.5px;padding:1px 7px}
  .positionrow{background:#eef6ea !important}
  .daylabel{display:block;font-size:12px;font-weight:bold;color:#3f4a5a;margin-bottom:3px}
  .readonly{background:#f4f5f6;border:1px dashed var(--grid);border-radius:6px;padding:3px 7px;display:inline-block;font-size:12px;color:#6b6f76}
  .missing-value{background:#fbeaea;border:1px solid #d9a1a1;border-radius:6px;padding:3px 7px;display:inline-block;font-size:12px;color:var(--fragile)}
  .guidance{color:#555555;font-style:italic;font-size:12px;line-height:1.5}
  .goldtext{color:#8A7347;font-weight:bold;font-size:12.5px}
  .greytext{color:#6E6B66;font-weight:bold}
  .sectionband{background:#3f4a5a;color:#fff;font-weight:bold;padding:7px 12px;border-radius:6px;margin:18px 0 8px;font-size:13px}
  /* F120 (rulings 649 to 658): the call card, the parent's time zone, Time in UK and the parent questions. */
  .callcard{position:sticky;top:0;z-index:15;background:#fff;border:2px solid #3f4a5a;border-radius:6px;padding:10px 14px;margin:12px 0 16px;box-shadow:0 2px 8px rgba(27,51,72,.12)}
  .callcard .cc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px}
  .callcard.folded{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:7px 14px}
  .cc-chev{width:24px;height:24px;border:1px solid #9aa1a8;border-radius:4px;background:#fff;color:#3f4a5a;font-size:12px;line-height:20px;padding:0;cursor:pointer}
  .cc-pill{background:#3f4a5a;color:#fff;font-weight:bold;font-size:11px;letter-spacing:.6px;border-radius:4px;padding:2px 8px}
  .cc-name{font-size:14px}
  .cc-sep{color:#9aa1a8}
  .cc-line{font-size:13.5px;color:#1b3348}
  .cc-clock{font-size:12.5px;color:#4b4f55}
  .cc-qbtn{border-color:#2f6b3a;color:#2f6b3a;font-weight:bold}
  .cc-grid{display:grid;grid-template-columns:1.1fr 1.2fr 1.2fr .8fr;gap:8px 18px;border-top:1px solid #e3e6ea;padding-top:8px}
  .cc-label{font-size:10.5px;font-weight:bold;color:#5b6470;letter-spacing:.4px;margin-bottom:3px;display:flex;align-items:center;gap:5px}
  .cc-big{display:flex;align-items:center;gap:6px}
  .cc-big .input,.cc-big .cc-contact{font-size:16px;padding:5px 8px}   /* F351: the call card's boxes, private or not, one input style */
  .cc-big .cc-contact{width:100%}
  .cc-wa{white-space:nowrap;font-size:11.5px}
  /* F395: the phone cell's link, blanks line and tick sit under the phone box (ui/tab-consultation.js consultCard, big's under
     slot), never in its flex line, so the box keeps its cell's full width and a held number reads whole */
  .cc-field > .leadwacard{display:flex;margin-top:4px;max-width:100%}
  .cc-field > .leadwacard .cc-wa{white-space:normal;text-align:left}
  .cc-second{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:12px}
  .cc-second .cc-label{margin:0}
  .cc-secondbox{flex:1;min-width:150px}
  .callcard .privbar{margin:6px 0 0}
  .tzctl{position:relative;display:inline-block}
  .tzbtn{font-size:12.5px}
  .tzlist{position:absolute;left:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid #c9ced6;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);padding:6px;min-width:440px}
  .tzopt{display:grid;grid-template-columns:18px 1fr 70px 130px;align-items:center;gap:6px;width:100%;text-align:left;background:none;border:0;border-radius:4px;padding:5px 6px;font:inherit;font-size:12.5px;cursor:pointer}
  .tzopt:hover{background:#eef2f6}
  .tzopt.on{font-weight:bold}
  .tzoff{color:#4b4f55}
  .tzchg{color:#8a6d1a;font-size:11.5px}
  .tzother{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border-top:1px solid #e3e6ea;margin-top:4px;padding:6px 6px 2px;font-size:12.5px}
  .tzother .input-date{flex:1;min-width:180px}
  .tztick{display:inline-block;width:14px;color:#2f6b3a}
  .tzrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0}
  .tzboth{font-size:12.5px;color:#4b4f55}   /* F349: both clocks under a lead card's day and time */
  .tzboth b{color:#1b3348}
  .newgrid .tzctl,[data-onb-tz] .tzctl{justify-self:start}   /* F349: the one picker in a card's grid and on Set up the family */
  .tznote{color:#6E6B66;font-size:12px;margin:0 0 6px}
  .availgrid th.ukcol,.availgrid td.ukcol{background:#eef2f6}
  .uknone,.ukbad{display:inline-block;min-width:18px;height:18px;line-height:16px;text-align:center;border:1px dashed #9aa1a8;border-radius:999px;color:#6b6f76;font-size:11px}
  .ukbad{border-style:solid;border-color:#c98a1a;color:#8a5a00;font-weight:bold}
  .tzwarn{background:#fff6c7;border:1px solid #e6cf6a;border-radius:6px;padding:7px 12px;margin:6px 0;font-size:12.5px;color:#4a3d00}
  .pqpanel{border:2px solid #8A7347;border-radius:6px;background:#fdfbf6;padding:12px 14px;margin:12px 0}
  .pqtitle{color:#8A7347;font-weight:bold;font-size:13px;margin-bottom:8px}
  .pqgroup{display:grid;grid-template-columns:150px 1fr;align-items:start;gap:8px;margin:4px 0}
  .pqglabel{font-size:10.5px;font-weight:bold;color:#5b6470;letter-spacing:.4px;padding-top:6px}
  .pqbtns{display:flex;flex-wrap:wrap;gap:6px}
  .pqbtn{border:1px solid #c9ced6;background:#fff;border-radius:999px;padding:4px 11px;font:inherit;font-size:12px;color:#303438;cursor:pointer}
  .pqbtn:hover{border-color:#22406b}
  .pqbtn.on{background:#22406b;border-color:#22406b;color:#fff;font-weight:bold}
  .pqresp{background:#eef2f9;border-left:4px solid #22406b;border-radius:6px;padding:12px 18px 14px;margin-top:12px}
  .pqhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .pqstd{font-size:10.5px;font-weight:bold;letter-spacing:.6px;color:#3f4a5a}
  .pqswitch{display:inline-flex;border:1px solid #22406b;border-radius:999px;overflow:hidden}
  .pqswitch button{border:0;background:#fff;color:#22406b;font:inherit;font-size:11px;font-weight:bold;padding:3px 10px;cursor:pointer}
  .pqswitch button.on{background:#22406b;color:#fff}
  .pqq{font-weight:bold;font-size:16px;color:#1b2430;margin:6px 0}
  .pqwhen{color:#8A8781;font-style:italic;font-size:12px;margin-bottom:4px}
  .pqkeys{margin:4px 0 0 4px;padding-left:18px;color:#22406b;font-size:16.5px;line-height:1.75}
  .pqfull{margin:4px 0 0;color:#22406b;font-size:16.5px;line-height:1.6}
  .pqside-back{position:fixed;inset:0;background:rgba(27,51,72,.25);z-index:45;display:flex;justify-content:flex-end}
  .pqside{position:relative;width:min(680px,100vw);height:100%;overflow:auto;background:#fff;box-shadow:-6px 0 18px rgba(0,0,0,.2);padding:14px 16px;box-sizing:border-box}
  .pqside .pqpanel{margin:20px 0 0}
  .pqclose{position:absolute;right:12px;top:8px;border:0;background:none;font-size:22px;color:#6b6f76;cursor:pointer}
  @media (max-width: 900px){ .cc-grid{grid-template-columns:1fr 1fr} .pqgroup{grid-template-columns:1fr} .tzlist{min-width:0;width:calc(100vw - 40px)} .tzopt{grid-template-columns:18px 1fr 60px} .tzchg{grid-column:2 / -1} }
  /* F139 (boards A1127 and A1130): the FAQs button on the heading of section 5's questions box, and Consultation Notes on the call card. */
  .pqtop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px}
  .pqtop .pqtitle{margin-bottom:0}
  .pq-faqs{font-size:12px;padding:3px 10px}
  .cc-zoom{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px}   /* F414: the booking's Zoom link */
  .cc-zoom .cc-zoomlink{overflow-wrap:anywhere;font-size:13px}
  /* F1176 (join 2 on staging v376): narrow, the bar the card folds to as the page scrolls stays one line under 60 px: the student's
     name shortened to fit, the clocks and FAQs whole, the pill and the zone picker left to the open card */
  @media (max-width: 600px){
    .callcard[data-autofold="1"]{padding-top:4px;padding-bottom:4px}
    .callcard[data-autofold="1"] > .cc-top{flex-wrap:nowrap;overflow:hidden}
    .callcard[data-autofold="1"] > .cc-top > .cc-pill,.callcard[data-autofold="1"] > .cc-top > .tzctl{display:none}
    .callcard[data-autofold="1"] > .cc-top > *{flex-shrink:0}
    .callcard[data-autofold="1"] > .cc-top > .cc-who{flex:1 1 auto;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  }
  /* F454 (his words of 19 Oct 2026, "usability is the highest priority ... very easy on mobile"): THE RESCHEDULE TAB, a week
     calendar in Google Calendar's look (the matching design, section 3.1): days across, the 24 hour clock down, a line each hour
     and a fainter one each half hour, today marked and the time now a red line; large touch targets and no horizontal scroll at
     390 wide; the confirm box a sheet from the bottom on a phone and a box in the middle on a wider screen. */
  .rtab{--rt-gut:44px;--rt-blue:#1a73e8;--rt-blue-fill:#e8f0fe;--rt-ev:#039be5;--rt-ev-ink:#fff;margin:8px 0 14px;max-width:100%}
  .rt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:6px}
  .rt-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .rt-navbtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
  .rt-today{height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font:inherit;font-size:var(--fs-md);font-weight:600;color:var(--ink);cursor:pointer}
  .rt-navbtn:hover,.rt-today:hover{background:var(--head)}
  .rt-range{font-size:var(--fs-xl);color:var(--ink);margin-left:4px}
  .rt-zones{font-size:var(--fs-sm);color:var(--ink-2)}
  .rt-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:4px 0 6px;font-size:var(--fs-md)}
  .rt-layer{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer}
  .rt-layer input{width:20px;height:20px}
  .rt-layer.off{color:var(--sub);cursor:default}
  .rt-hours{display:inline-flex;gap:6px}
  .rt-hours .btn{min-height:36px;border-radius:999px;padding:0 12px}
  .rt-src{margin:0 0 6px}
  .rt-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));width:min(560px, calc(100% - 24px));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#174ea6;color:#fff;border-radius:6px;padding:8px 8px 8px 14px;font-size:var(--fs-md);font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.3)}
  .rt-hint .btn{min-height:44px;background:#fff;color:#174ea6;border-color:#fff;font-weight:700}
  .rt-grid{border:1px solid var(--line);border-radius:6px;background:#fff;overflow:clip;max-width:100%}
  .rt-head{display:grid;grid-template-columns:var(--rt-gut) repeat(var(--rt-days), minmax(0, 1fr));border-bottom:1px solid var(--line-strong);background:#fff;position:sticky;top:0;z-index:7}
  .rt-dayhead{display:flex;flex-direction:column;align-items:center;padding:6px 0 4px;box-shadow:inset 1px 0 0 var(--line);min-width:0}
  .rt-wd{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
  .rt-dn{font-size:20px;line-height:32px;width:32px;height:32px;text-align:center;border-radius:999px;color:var(--ink)}
  .rt-dayhead.today .rt-wd{color:var(--rt-blue)}
  .rt-dayhead.today .rt-dn{background:var(--rt-blue);color:#fff}
  .rt-body{display:grid;grid-template-columns:var(--rt-gut) repeat(var(--rt-days), minmax(0, 1fr));position:relative;
    background-image:linear-gradient(to bottom, var(--line) 1px, transparent 1px), linear-gradient(to bottom, #f1f3f4 1px, transparent 1px);
    background-size:100% var(--rt-hour), 100% calc(var(--rt-hour) / 2);background-position:0 0, 0 0;background-repeat:repeat-y}
  .rt-gutter{position:relative;background:#fff}
  .rt-hr{position:absolute;right:6px;transform:translateY(-50%);font-size:var(--fs-xs);color:var(--sub);white-space:nowrap}
  .rt-col{position:relative;box-shadow:inset 1px 0 0 var(--line);min-width:0}
  .rt-col.today{background:rgba(26,115,232,.04)}
  .rt-col.picking{cursor:copy;background:rgba(26,115,232,.06)}
  .rt-col.picking:hover{background:rgba(26,115,232,.1)}
  .rt-now{position:absolute;left:0;right:0;height:2px;background:#ea4335;z-index:3;pointer-events:none}
  .rt-now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:999px;background:#ea4335}
  .rt-busy{position:absolute;right:0;width:28%;background:repeating-linear-gradient(45deg, #dadce0, #dadce0 4px, #e8eaed 4px, #e8eaed 8px);border-radius:4px;z-index:1;pointer-events:none}
  .rt-ev{position:absolute;left:2px;right:2px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:1px;overflow:hidden;text-align:left;
    border:0;border-radius:6px;padding:3px 6px;background:var(--rt-ev);color:var(--rt-ev-ink);font:inherit;font-size:var(--fs-sm);line-height:1.25;cursor:pointer;
    box-shadow:0 1px 2px rgba(60,64,67,.3);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .rt-ev.wise{background:#0b8043}
  .rt-ev:hover{filter:brightness(1.06)}
  .rt-ev.on{outline:3px solid #174ea6;outline-offset:1px;box-shadow:0 4px 10px rgba(60,64,67,.45);z-index:4}
  .rt-ev.dragging{opacity:.45}
  .rt-ev.past{background:#9aa0a6;cursor:default}
  .rt-ev.gone{background:#fff;color:var(--sub);border:1px dashed #9aa0a6;box-shadow:none;cursor:default}
  .rt-ev.movedin{background:#7986cb;cursor:default}
  .rt-ev-time{font-weight:700;white-space:nowrap}
  .rt-ev-end{font-weight:400}
  .rt-ev-fam,.rt-ev-sub{font-size:var(--fs-xs);opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .rt-ghost{position:absolute;left:2px;right:2px;z-index:5;border:2px dashed #174ea6;border-radius:6px;background:rgba(26,115,232,.18);color:#174ea6;font-size:var(--fs-sm);font-weight:700;padding:2px 6px;pointer-events:none}
  .rt-sheet-back{position:fixed;inset:0;z-index:60;background:rgba(32,33,36,.45);display:flex;align-items:center;justify-content:center;padding:16px}
  .rt-sheet{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.3);padding:18px 18px 16px;font-size:var(--fs-md);outline:none}
  .rt-sheethead{font-size:var(--fs-xl);font-weight:700;color:var(--ink);margin-bottom:4px}
  .rt-lesson{color:var(--ink-2);margin-bottom:10px}
  .rt-tutor{color:var(--ink)}
  .rt-fromto{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin-bottom:8px}
  .rt-arrow{align-self:center;font-size:22px;color:var(--sub)}
  .rt-when{border:1px solid var(--line);border-radius:6px;padding:8px}
  .rt-when[data-rt-when="to"]{border-color:#aecbfa;background:var(--rt-blue-fill)}
  .rt-whenhead{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--sub);margin-bottom:2px}
  .rt-clockrow{display:flex;flex-direction:column;margin-top:4px}
  .rt-clockname{font-size:var(--fs-xs);color:var(--ink-2)}
  .rtab .tag-warning{display:block;margin:6px 0;padding:8px 10px;border-radius:6px;font-size:var(--fs-md);line-height:1.4}
  .rt-sheet .rt-late,.rt-sheet .rt-free{display:block;margin:8px 0;padding:8px 10px;border-radius:6px;font-size:var(--fs-md);line-height:1.4;font-weight:600}
  .rt-free{background:#e6f4ea;color:#137333}
  .rt-label{display:block;font-weight:600;margin:10px 0 4px}
  .rt-seg{display:flex;gap:8px;flex-wrap:wrap}
  .rt-segbtn{flex:1 1 140px;min-height:44px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font:inherit;font-size:var(--fs-md);color:var(--ink);cursor:pointer}
  .rt-segbtn.on{background:var(--rt-blue-fill);border-color:var(--rt-blue);color:#174ea6;font-weight:700}
  .rt-why{width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:4px;padding:8px 10px;font:inherit;font-size:16px}
  .rt-after{margin:10px 0 4px}
  .rt-actions{display:flex;gap:8px;margin-top:12px}
  .rt-actions .btn{flex:1;min-height:48px;font-size:var(--fs-lg);border-radius:999px}
  .rt-go{background:var(--rt-blue);border-color:var(--rt-blue);color:#fff;font-weight:700}
  .rt-go:disabled{background:#c6dafc;border-color:#c6dafc;color:#fff}
  .rt-done{border:1px solid #ceead6;background:#e6f4ea;border-radius:6px;padding:10px;margin:0 0 8px;font-size:var(--fs-md)}
  .rt-done textarea{width:100%;margin-top:6px}
  .rt-donewise,.rt-donemsg{margin-top:6px}
  .rt-donehead{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:var(--fs-lg)}
  .rt-donelate{font-size:var(--fs-sm);font-weight:700;color:#9c4a00;background:#fde3d1;border:1px solid #e2ab5f;border-radius:999px;padding:1px 8px}
  .rt-doneline{margin:2px 0}
  .rt-uk{color:var(--ink-2)}
  /* F455 (his words of 19 Oct 2026, "so the button can be pressed easily to grant access"): the student's access in WISE on each
     lesson, SUSPENDED in red, and Grant access one tap on a phone (44 px); the same line on the face's Overdue in WISE alert. */
  .rt-ev.noaccess{box-shadow:inset 0 0 0 3px #b3261e}
  .rt-ev-access{font-size:var(--fs-xs);font-weight:700;border-radius:4px;padding:0 4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rt-ev-access.ok{background:rgba(255,255,255,.25)}
  .rt-ev-access.off{background:#b3261e;color:#fff}
  .rta-bar{margin:0 0 6px}
  .rta-row,.rta-sheet,.rta-face{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0;padding:6px 10px;border-left:4px solid #b3261e;border-radius:4px;background:#fce8e6;font-size:var(--fs-md)}
  .rta-sheet{margin:0 0 8px}
  .rta-off{color:#b3261e;font-weight:700}
  .rta-ok{color:#137333;font-weight:700}
  .btn.rta-grant{min-height:44px;padding:0 16px;border-radius:999px;background:#b3261e;border-color:#b3261e;color:#fff;font-weight:700}
  .rta-granted{display:inline-block;padding:4px 8px;border-radius:4px}
  .rt-hint .rta-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:600}
  .rt-hint .rta-off{color:#fff;background:#b3261e;border-radius:4px;padding:2px 6px}
  .rt-hint .btn.rta-grant{background:#b3261e;border-color:#fff;color:#fff}
  @media (max-width: 639px){
    .rtab{--rt-gut:38px}
    .rt-range{font-size:var(--fs-lg);flex-basis:100%;margin-left:0}
    .rt-hours .btn{min-height:44px;min-width:64px}
    .rt-layeroff{display:block;flex-basis:100%}
    .rt-layer{flex-wrap:wrap}
    .rt-sheet-back{align-items:flex-end;padding:0}
    .rt-sheet{width:100%;max-height:92vh;border-radius:6px 6px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
    .rt-fromto{grid-template-columns:1fr;gap:6px}
    .rt-arrow{transform:rotate(90deg);justify-self:center;line-height:1}
  }
  .cc-notes{border-top:1px solid #e3e6ea;margin-top:8px;padding-top:8px}
  .cc-notesbox{width:100%;box-sizing:border-box;min-height:44px;max-height:30vh;resize:vertical;font-size:14px}
  .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:#6b6f76}
  .calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin-top:10px}
  .calmonth{border:1px solid var(--grid);border-radius:6px;overflow:hidden;background:#fff}
  .calmonth-head{background:#f2f4f6;border-bottom:1px solid var(--grid);padding:5px 9px;font-weight:bold;font-size:12px}
  .calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--grid);padding:1px}
  /* BASE COLOUR = school-year status only. Nothing else touches the background. */
  .calday{background:#fff;min-height:56px;padding:2px 3px 3px;font-size:10.5px;position:relative;text-align:right}
  .calday.weekday{background:#f7f8f9;min-height:0;text-align:center;font-weight:bold;font-size:9px;color:var(--sub);padding:2px 0}
  .calday.out{background:#f1f2f3;color:#bfc3c8}                    /* outside the school year: dulled */
  .calday.pad{background:#f7f8f9}                                  /* not a day, just grid padding */
  .calday.term{background:#e4f0e0;color:#2c5427}                   /* term time: green */
  .calday.holiday{background:#eef0f2;color:#5a6068}                    /* holiday: neutral. 1.5: purple is Pre-teach alone. */
  /* OVERLAY BARS. A day can carry all three at once. */
  .daybars{position:absolute;left:2px;right:2px;bottom:2px}
  /* RULED 27 Aug: every bar SAYS what it is. B1, B2, Absence, Mock, Exam. */
  .daybars i{display:block;height:11px;line-height:11px;border-radius:4px;margin-top:2px;
          font-style:normal;font-size:8px;font-weight:bold;letter-spacing:.2px;color:#fff;
          text-align:center;overflow:hidden;white-space:nowrap}
  .daybars i.block{background:#4a6b96}                               /* learning block, recoloured per block */
  .daybars i.exam{background:#c0392b}                                /* mock or exam: the one red (1.5) */
  .daybars i.absence{background:#e07b00}                               /* family absence, bold */
  .calday.today{outline:2px solid #1d4f8c;outline-offset:-2px;font-weight:bold}
  /* A1: a section head that folds. The year is entered once and then forgotten. */
  .foldhead{background:#eef1f4;border:1px solid var(--grid);border-radius:6px;padding:6px 11px;margin:14px 0 6px;
         font-weight:bold;font-size:12.5px;cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center}
  .foldhead .foldnote{font-weight:normal;font-size:11px;color:var(--sub)}
  .addrow{margin:8px 0 2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .explainer{border:1px solid #cdd8e4;border-left:4px solid #4a6b96;background:#f6f9fc;border-radius:6px;padding:9px 13px;margin:8px 0;font-size:12.3px;line-height:1.5}
  .explainer b{font-size:12.3px}
  .explainer ol{margin:6px 0 2px;padding-left:20px}
  .explainer li{margin:3px 0}
  .legendstrip{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;align-items:center;margin:8px 0}
  .legendstrip i{display:inline-block;width:13px;height:13px;border-radius:4px;border:1px solid var(--grid);vertical-align:-2px;margin-right:5px}
  /* school position check + pre-teach timing */
  .check{border:1px solid var(--grid);border-left:4px solid #4a6b96;border-radius:6px;background:#f6f9fc;padding:10px 13px;margin:10px 0}
  .check.stale{border-left-color:#d9a441;background:#fdfaf2}
  .check h4{margin:0 0 6px;font-size:12.5px;letter-spacing:.4px}
  .check-ask{color:#22406b;font-style:italic;font-size:13px;margin:6px 0 9px;line-height:1.5}
  .check-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
  /* RULING 440 (the position card becomes a carousel and the honesty label moves onto the chip), part (a): the strip of
     unit tiles is a CAROUSEL over the whole scheme. An arrow at each end, and the tiles cut at the edge the carousel can
     still travel towards, so five tiles never read as all there is. */
  .check-carousel{display:flex;align-items:stretch;gap:6px;margin:6px 0}
  .check-carousel .check-row{flex:1;flex-wrap:nowrap;overflow:hidden;margin:0}
  .check-carousel .check-row.cut-left{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px);mask-image:linear-gradient(to right,transparent 0,#000 16px)}
  .check-carousel .check-row.cut-right{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 16px);mask-image:linear-gradient(to left,transparent 0,#000 16px)}
  .check-carousel .check-row.cut-left.cut-right{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
  .btn-carousel{flex:0 0 26px;border:1px solid var(--grid);border-radius:6px;background:#fff;color:#22406b;font-size:13px;cursor:pointer;padding:0}
  .btn-carousel:hover:not([disabled]){background:#eef3fa;border-color:#7d9dc4}
  .btn-carousel[disabled]{color:#c3c9cf;cursor:default}
  .carousel-count{font-size:10.5px;color:var(--sub);margin:0 0 2px}
  .unit{border:1px solid var(--grid);border-radius:6px;background:#fff;padding:6px 9px;font-size:11.5px;min-width:150px;max-width:230px;flex:1}
  .unit .unit-name{font-weight:bold;font-size:11.5px;line-height:1.35}
  .unit .unit-sub{color:var(--sub);font-size:10.5px;margin:2px 0 5px}
  .unit.expected{border-color:#7d9dc4;background:#eef3fa}
  .unit.confirmed{border-color:#3f6b39;background:#eef6ea}
  .unit.both{border-color:#3f6b39;background:#e9f4e4;box-shadow:inset 0 0 0 1px #7d9dc4}
  .unit.both .tag-unit{background:#3f6b39;color:#fff}
  /* .check-basis held the closing position sentence and is cut with it (ruling 442 (the eight F25c display answers)
     item 2, and ruling 440 (the position card becomes a carousel) part (c)). Nothing prints in that place now. */
  .unit .tag-unit{display:inline-block;font-size:9.5px;letter-spacing:.4px;font-weight:bold;border-radius:999px;padding:0 6px;margin-bottom:3px}
  .unit.expected .tag-unit{background:#4a6b96;color:#fff}
  .unit.confirmed .tag-unit{background:#3f6b39;color:#fff}
  .check-delta{font-size:12px;margin-top:6px}
  .window{border:1px solid var(--grid);border-radius:6px;margin:10px 0;overflow:hidden}
  .window-head{background:#fdf3e0;border-bottom:1px solid var(--grid);padding:7px 12px;font-weight:bold;font-size:12.5px}
  .window-body{padding:8px 12px}
  .window-row{display:flex;gap:10px;align-items:baseline;font-size:12px;padding:5px 0;border-bottom:1px dotted var(--grid)}
  .window-row b{min-width:210px}
  .tag-timing{display:inline-block;font-size:10.5px;font-weight:bold;border-radius:999px;padding:1px 8px;white-space:nowrap}
  .tag-timing.ok{background:#eaf5e6;border:1px solid #7ea875;color:#2f5c29}
  .tag-timing.early{background:#eef3fa;border:1px solid #7d9dc4;color:#22406b}
  .tag-timing.late{background:#fbe9e9;border:1px solid #c06a6a;color:var(--fragile)}
  .tag-timing.none{background:#f4f5f6;border:1px solid var(--grid);color:#6b6f76}
  .helpword{border-bottom:1px dotted var(--sub);cursor:help}
  .coverage{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:4px 0;border-bottom:1px dotted var(--grid)}
  .coverage span:first-child{cursor:help;border-bottom:1px dotted #b0b4ba}
  .coverage b{font-variant-numeric:tabular-nums}
  .sowbox{border:1px dashed #7d9dc4;background:#f6f9fc;border-radius:6px;padding:10px 13px;margin:10px 0}
  /* F373 (LIST row 8.16, W16): this year's scheme table fits its page, no sideways scroll at 1280: fixed layout at the page's
     width, the column widths set on the header, every cell's words wrapping inside it, the subtopic picker its cell's width */
  table.sowtable{table-layout:fixed;width:100%;min-width:1100px}   /* F410: the School unit never squeezed to nothing; F634: the minimum under the box's 1114px at a 1237 window with a classic scrollbar (1157px at 1280), so neither scrolls sideways */
  table.sowtable th,table.sowtable td{overflow-wrap:normal;word-break:normal}
  /* F410 (the v218 walk, entry 1253): no word broken mid-word at 1280. Each narrow column holds its longest word and its press
     (the #'s edit and done, the Medium chip, the Lessons and Confidence headers, the half term picker in edit, the term's UNDATED); the room comes
     from the wide ones (School unit, the rest of the page's width; Our topic; Our subtopics), whose lines wrap between words and
     break a word only when one alone is wider than its cell */
  table.sowtable col.sowc-n{width:70px}
  table.sowtable col.sowc-here{width:74px}
  table.sowtable col.sowc-week{width:96px}   /* F634: was 98 */
  table.sowtable col.sowc-ht{width:72px}
  table.sowtable col.sowc-term{width:74px}
  table.sowtable col.sowc-les{width:70px}   /* F634: was 72 */
  table.sowtable col.sowc-unit{width:auto}   /* the School unit takes the rest of the page's width (F634: 134px at a 1237 window, 177px at 1280) */
  table.sowtable col.sowc-val{width:86px}   /* F634: was 110; its press and chip words still whole */
  table.sowtable col.sowc-topic{width:110px}
  table.sowtable col.sowc-sub{width:136px}   /* F634: was 160; the wide column gives its room, its lines wrap between words, its widest hyphened chip word whole */
  table.sowtable col.sowc-conf{width:92px}
  table.sowtable col.sowc-note{width:100px}   /* F634: was 112 */
  table.sowtable td:nth-child(7),table.sowtable td:nth-child(9),table.sowtable td:nth-child(10),table.sowtable td:nth-child(12){overflow-wrap:break-word}
  table.sowtable .skill-code{white-space:nowrap}   /* a code never breaks at its hyphen */
  table.sowtable td:first-child{vertical-align:top}   /* edit and done in one place, so a double press on edit lands on done, never on remove */
  table.sowtable td .input,table.sowtable td select{max-width:100%;box-sizing:border-box}
  table.sowtable td .btn{margin:2px 0}
  /* 1g: the two chip columns give their width back to Skill, Rating and Note */
  td.tight{padding-left:5px;padding-right:5px;font-size:10.8px;line-height:1.3}
  td.tight .tag-instruction,td.tight .tag-level,td.tight .tag-state{font-size:9.4px;padding:1px 5px}
  td.tight .tag-timing-inline{font-size:9px;display:inline-block;margin-top:2px}
  .question{background:#fff8e1;border:1px solid #e6c65c;border-radius:6px;padding:9px 12px;margin:8px 0;font-size:12.5px}
  /* v9: the check is a collapsible card, and it lives inside a lesson */
  .check h4{cursor:pointer;user-select:none}
  .check-inlesson{margin:8px 0 10px}
  .check-summary{border:1px solid var(--grid);border-left:4px solid #7d9dc4;border-radius:6px;background:#f8fafc;padding:8px 12px;margin:8px 0;font-size:12px}
  .check-summary h4{margin:0;font-size:11.5px;letter-spacing:.4px;cursor:pointer;user-select:none}
  .check-summary .check-body{margin-top:7px}
  .check-summary.warn{border-left-color:#d9a441;background:#fdfaf2}
  /* v9: the prerequisite tile row - EVERY prerequisite, wrapped, never truncated (ruling 4c) */
  .prereqtiles{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 3px}
  .tile-prereq{border:1px solid var(--grid);border-radius:6px;background:#fff;padding:2px 6px;font-size:10.5px;line-height:1.35;max-width:210px}
  .tile-prereq b{display:block;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile-prereq .tile-prereq-state{font-size:9.5px;letter-spacing:.2px}
    /* 1.5: secure is blue and maintaining is green, the same way round as everywhere else in the app.
     They were the wrong way round here and nowhere else. */
  .tile-prereq-secure{border-color:#a9c3de;background:#f2f6fb}
  .tile-prereq-maintaining{border-color:#9dbf95;background:#f1f7ef}
  .tile-prereq-fragile{border-color:#d99a9a;background:#fbf1f1}
    .tile-prereq-unseen{border-color:#d5d8dc;background:#f7f8f9}
  .prereqlabel{font-size:10.5px;color:var(--sub);letter-spacing:.3px;font-weight:bold;margin-top:8px}
  .skilllist{margin:7px 0 2px;border:1px dashed var(--grid);border-radius:6px;padding:6px 8px;background:#fcfcfd}
  .skillline{display:flex;align-items:center;gap:6px;font-size:10.8px;padding:1px 0}
  .skillline span.skillline-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .recapcard{border:1px solid #c9b98a;border-left:4px solid #b79c68;border-radius:6px;background:#fdfaf2;padding:10px 13px;margin:10px 0}
  .recapcard h4{margin:0 0 6px;font-size:12.5px;letter-spacing:.4px}
  /* RULING 442 (the eight F25c display answers) item 10: three tiles where the recap day card had prose, and one hover
     word beside them holding both readings of ruling 209 (WR5) in full. */
  .recaptiles{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 7px}
  .rtile{display:inline-block;border:1px solid #c9b98a;border-radius:6px;background:#fff;padding:4px 9px;font-size:13px;line-height:1.2}
  .rtile .rtile-label{display:block;font-size:9.6px;letter-spacing:.3px;color:var(--sub);font-weight:bold}
  .question .question-text{font-weight:bold;margin-bottom:6px}
  .question.question-oneline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .question.question-oneline .question-text{margin:0;flex:1;min-width:280px}
  .instructionselect{padding:2px 4px;font-size:11px}
  .examline{font-size:11.5px;line-height:1.45;white-space:nowrap}
  .examline b{font-weight:600;color:var(--sub);font-size:10.5px;letter-spacing:.2px}
  .tag-timing-inline{display:inline-block;font-size:9.8px;font-weight:bold;border-radius:999px;padding:0 6px;margin-left:5px;white-space:nowrap}
  .tag-timing-inline.ok{background:#eaf5e6;border:1px solid #7ea875;color:#2f5c29}
  .tag-timing-inline.early{background:#eef3fa;border:1px solid #7d9dc4;color:#22406b}
  .tag-timing-inline.late{background:#fbe9e9;border:1px solid #c06a6a;color:var(--fragile)}
  .tag-timing-inline.none{background:#f4f5f6;border:1px solid var(--grid);color:#6b6f76}
  .overviewbar{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:12px;flex-wrap:wrap}
  .blocklist{display:flex;flex-direction:column;gap:5px;margin:10px 0;max-width:760px}
  .blockrow{display:flex;align-items:center;gap:10px;border:1px solid var(--grid);border-left-width:4px;border-radius:6px;padding:6px 11px;font-size:12.5px}
  .blockrow .blockname{min-width:66px;font-weight:bold}
  .blockrow .blockdates{min-width:150px}
  .blockrow .blockweeks{min-width:132px}
  .blockrow .blocknote{flex:1;color:var(--sub);font-size:11.5px}
  .tint-break{background:#f6f0e6}
  .tint-exam{background:#fbeef0}
  .tint-window{background:#eef3fa}
  .yearband{background:#e7edf6;border:1px solid var(--grid);border-left:4px solid #4a6b96;padding:7px 12px;font-weight:bold;font-size:13px;margin:18px 0 0;border-radius:6px 6px 0 0}
  .tab{border:1px solid var(--grid);border-bottom:none;background:#e9eaec;padding:9px 14px;font-size:12.5px;font-weight:bold;border-radius:6px 6px 0 0;cursor:pointer;color:var(--sub)}
  .tab.active{background:#fff;color:var(--ink)}
  /* F275 (V27): A PAGE TAB IS A BUTTON. The reset gives back the div's type and alignment; .tab above and the tab bar's rules
     still set its line, fill, padding, size, weight and ink. */
  button.tab{margin:0;font-family:inherit;font-style:inherit;line-height:inherit;letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;text-indent:0;text-shadow:none;text-align:inherit}
  button.tab[title]{cursor:help}   /* the short tabs (Calendar, SOW, Block Overview (LE)) kept the hover cursor of div[title] */
  .tab .tag-count{display:inline-block;background:var(--flag);color:#fff;border-radius:999px;font-size:10.5px;padding:1px 7px;margin-left:6px}
  .sheet{background:#fff;border:1px solid var(--grid);border-radius:0 6px 6px 6px;padding:20px 22px 28px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
  .pagehead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--goldline);padding-bottom:8px;margin-bottom:14px;flex-wrap:wrap;gap:6px}
  .pagehead h2{font-size:17px;margin:0}
  .pagehead .context .pagesub{color:var(--sub)}   /* F288 (D26): the page's title is its tab's name; the rest is this grey subtitle on the head line */
  .context{font-size:12.5px;color:var(--sub)}
  /* F122 (ruling 675): the School Schemes of Work header reads as the School Calendar's line; each item links to its box on Details (F154) */
  .context .sowhead-go{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;cursor:pointer}
  .context .sowhead-go:hover{color:var(--ink)}
  .context .sowhead-empty{color:#c0392b}
  .context .sowhead-none{color:var(--vault);font-weight:normal}
  .input.rec-need{transition:background-color .15s,border-color .15s}   /* F122: a box that must be filled; its red edge follows its value as it is typed, here or in another box of the field */
  /* F154 (board A1131): the pre initial consult checklist; a ticked row reads quieter, so the open items stand out */
  .precheck tr.pre-done td.label{color:var(--sub)}
  .precheck input[type=checkbox]{width:16px;height:16px;cursor:pointer}
  .guide{border:1px solid #d4d8dc;background:#fafbfc;border-radius:6px;padding:9px 14px;margin-bottom:12px}
  .guide b{font-size:12.5px}
  .guide b.guidehead{cursor:pointer;user-select:none;display:block}
  .guide ul{margin:5px 0 2px;padding-left:20px}
  .guide li{font-size:12.2px;color:#444;margin:2px 0;line-height:1.45}
  .rules{border:1px solid #b7c9d8;background:#eef4f9;border-radius:6px;padding:9px 14px;margin-bottom:14px;font-size:12px;color:#24425c;line-height:1.65}
  .rules b{color:#16304a}
  table{border-collapse:collapse;width:100%;font-size:12.7px}
  th{background:#f0f1f3;border:1px solid var(--grid);padding:6px 8px;font-size:11.6px;text-align:left;color:#444}
  td{border:1px solid var(--grid);padding:6px 8px;vertical-align:middle;background:#fff}
  tr.topicband td{background:var(--band);border-color:var(--bandline);font-weight:bold;font-size:13px;padding:8px}
  tr.subtopicband td{background:#eef6ea;font-weight:bold;font-size:12.4px}
  .topicid{font-weight:normal;color:#38761d;font-size:11px;margin-left:7px}
  /* section 5: the tag says the instruction, never its initial. .badge.D and .badge.U are culled with the
     scheme that made them: normInstr turns Diagnose into Teach and no instruction has ever begun with U. */
  .tag-instruction{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:bold;color:#fff;white-space:nowrap}
  .tag-instruction-preteach{background:var(--pre)} .tag-instruction-teach{background:var(--teach)}
  .tag-instruction-recap{background:#0b5453} .tag-instruction-sowlevel{background:#7a4b00}
  .tag-state{font-size:10.5px;font-weight:bold;border-radius:999px;padding:2px 8px;white-space:nowrap}
  .tag-state-secure{background:#d7e5f5;color:var(--secure)} .tag-state-maintaining{background:#dff0d8;color:#2e6b30}
  .tag-state-fragile{background:#fbe0da;color:var(--fragile)} .tag-state-unseen{background:#eceef0;color:#7a7f85}
  .tag-covered{display:inline-block;background:#eaf3ee;border:1px solid #a9cdb7;color:#2d5e44;border-radius:999px;font-size:10px;font-weight:bold;padding:1px 6px;margin-left:6px;white-space:nowrap}   /* F233: covered before the Planner */
  #cbcard .cbcounts{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}   /* F233: the dry run's counts */
  #cbcard .cbcounts .tag-quiet{margin-left:0}
  .tag-provisional{display:inline-block;background:#fdf3dd;border:1px solid #e2c78f;color:var(--prov);border-radius:999px;font-size:10px;font-weight:bold;padding:1px 6px;margin-left:6px;white-space:nowrap}
  .tag-target{display:inline-block;background:#e8f0f7;border:1px dashed var(--secure);color:var(--secure);border-radius:999px;font-size:10.6px;font-weight:bold;padding:2px 9px;margin-left:6px}
  .tag-topic{display:inline-block;background:var(--band);border:1px solid var(--bandline);color:#2d5016;border-radius:999px;font-size:10.8px;padding:1px 7px;white-space:nowrap}
  .rating{display:inline-flex;gap:4px}
  .rating button{width:106px;min-height:38px;border:1px solid var(--grid);background:#fafafa;border-radius:4px;font-size:11px;cursor:pointer;color:var(--sub);font-weight:bold;padding:3px 4px}
  .rating button.again.on{background:var(--again);border-color:var(--again);color:#fff}
  .rating button.hard.on{background:var(--hard);border-color:var(--hard);color:#fff}
  .rating button.good.on{background:var(--good);border-color:var(--good);color:#fff}
  .rating button.easy.on{background:var(--easy);border-color:var(--easy);color:#fff}
  .hintnote{font-size:10.6px;color:var(--sub);white-space:nowrap;margin-left:6px;vertical-align:middle}
  tr.unrated td{background:#fffdf2}
  .tag-unrated{display:inline-block;background:#fff3cd;border:1px solid #e2c78f;color:#8a5a00;border-radius:999px;font-size:10px;font-weight:bold;padding:1px 6px}
  /* v5 (ruled): EVERY input wears the f1in look, the date pickers' colour. The class names stay for the suites and the key. */
  .input-date{font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--grid);border-radius:4px;background:#fffdf3;outline:none}
  .input-text{font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--grid);border-radius:4px;background:#fffdf3;outline:none;width:280px}
  /* ITEM 12 (board A463, his answer A, built under board A570 (the four items of A463 F56 could not reach)): THE TRIGGER
     DROPDOWN TAKES ITS COLUMN'S WIDTH. The select in section 2 of Build Next Block is as wide as its longest option, which
     is wider than the grid column it sits in, so its chevron printed on top of the OUR TEACHING WEEKS number in the cell
     beside it and the sentence under that number wrapped around it. This is the one width his answer asked for, and it is
     read as the rule it belongs to rather than as one page's patch: a field cell whose whole content is one dropdown gives
     that dropdown the cell. A cell that holds a dropdown BESIDE something else (the block window's number of weeks, which
     follows a date input) is not :only-child and does not move. */
  .field-typed > select.input-date:only-child{width:100%;max-width:100%}
  /* ITEM 8 (board A463, his answer A, built under board A570): THE STUDENT'S NAME IS THE LARGEST THING ON THE BAR. It was
     13 point beside a 16 point note; it is 16 point bold and it comes first, and the note has gone into a hover. */
  .stuname{font-size:16px;font-weight:bold;line-height:1.2;margin-right:4px}
  /* RULING 465 (four of the five clarity items are built) ITEM 9, finding 9 of tier 1: THE RECAP DAY EXPLAINER SITS BELOW
     THE SENTENCE. .explainer is a bordered, padded box; on a <span> that padding and border paint OUTSIDE the line box, so
     on the RECAP DAY card, where the explainer follows the allocation sentence inline, the box printed over the sentence it
     belongs to and the sentence could not be read under it. His answer: a hover, or below the sentence. It is below. The
     rule is scoped to the recap day card, which is the card the finding names, so no other page's inline explainer moves. */
  .recapcard span.explainer{display:block;margin:7px 0 0}
    .btn{border:1px solid var(--btn-line);background:#fff;border-radius:4px;font-size:11.4px;padding:5px 10px;cursor:pointer;color:var(--btn-ink)}
  .btn:hover{background:#f2f5f8}
  /* F372 (LIST row 12.2, T16): A LOCKED PRESS LOOKS LOCKED. A disabled press was drawn in full colour with the pointer of a live
     one; it is greyed, its pointer says no, and its reason is page text beside it (.lockwhy), never only a hover. A value shown
     inert on the tutor's face (a rating or a level, F31) keeps its colours so it still reads, and takes the same pointer. */
  .btn:disabled,.btn:disabled:hover{background:#f1f2f4;border-color:#d4d8dc;color:#8a9097;cursor:not-allowed}
  #pages.tutorface button:disabled{cursor:not-allowed}
  .lockwhy{display:inline-block;margin-left:8px;font-size:12px;font-weight:normal;color:#5b6470;font-style:italic;white-space:normal}
  th .lockwhy{display:block;margin:2px 0 0}
  /* F31, board A281 item 2: an action button inside a table cell wraps inside it rather than running out of
     it. The what happened? flip is the long one and the cell it sits in is 130px wide. */
  td > .btn, td > div > .btn{max-width:100%;white-space:normal;text-align:left;box-sizing:border-box}
  /* 1.2: the three button colours are three classes and nothing else decides them. */
  .btn-withdraw{border-color:var(--btn-withdraw);color:var(--btn-withdraw);font-weight:bold}
  .btn-primary{border-color:var(--btn-go);color:var(--btn-go);font-weight:bold}
  .suggestlist{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0}
  /* 1.1 a button is a rectangle, 1.2 neutral is the default: the starter suggestions are controls and
     read as controls, but they are not the primary action on the page, so they take the neutral outline. */
  .btn-suggest{border:1px solid var(--btn-line);background:#fff;border-radius:4px;padding:5px 11px;font-size:11.4px;color:var(--btn-ink);cursor:pointer}
  .btn-suggest:hover{background:#f2f5f8}
  .btn-suggest b{color:#1b3348}
  .btn-suggest .plus{color:var(--btn-go);font-weight:bold;margin-left:5px}
  /* 1.7 THE STARTER TILE SPLITS. .btn-suggest.levelUp was two different things wearing one class: a NEW SKILL
     ready for its first attempt, and a level-up pair. They are now two classes and two colours, and the
     Pre-teach purple they both borrowed goes back to meaning Pre-teach alone. */
  .btn-suggest.newskill{border-color:#d6700a;color:#8a4500;background:#fffaf4}
  .btn-suggest.levelUp{border-color:var(--lvup-line);color:var(--lvup-ink);background:#fffafd}
  /* F54 (ruling 439): .starter and its h4 are gone with the panel; the box is .starter-box, below. */
  .lesson{border:1px solid var(--grid);border-left:4px solid var(--goldline);border-radius:6px;margin-bottom:13px;padding:11px 14px;background:#fdfdfd}
  .lesson-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
  .lesson-number{font-size:18px;font-weight:bold;width:66px}
  .lesson-number small{display:block;font-size:9.6px;color:var(--sub);font-weight:normal}
  .btn-group{width:21px;height:21px;border:1px solid #9aa2aa;background:#eef0f2;border-radius:4px;font-weight:bold;font-size:13px;line-height:19px;text-align:center;cursor:pointer;color:#444;flex:none}
  .lesson-summary{font-size:12.2px;color:#444}
  /* F417: the summary for the parent, under the lesson's Session line on the Lead Educator's face (ui/lesson-rows.js lsumHtml) */
  .lsum{margin:6px 0 2px}
  .lsumbox{margin-top:6px;max-width:640px}
  .lsumwords{font-size:12.5px;line-height:1.45;color:var(--ink);background:#f4f5f7;border:1px solid var(--line);border-radius:6px;padding:6px 8px;white-space:pre-wrap;overflow-wrap:anywhere}
  .lsumpress{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .tag-quiet{display:inline-block;background:#eef0f2;border:1px solid #d4d8dc;border-radius:999px;padding:1px 9px;margin-left:7px;font-size:10.6px;color:#555}
  .blockband{background:#f6f0dc;border:1px solid #d9c87e;border-left:4px solid #7f6000;border-radius:6px;padding:8px 13px;margin:16px 0 9px;font-size:12.4px;color:#7a6a2f}
  .blockband b{font-size:13px;color:#5f4c00}
  .inbox{border:1px solid #d3a1b3;background:#faf1f4;border-radius:6px;padding:11px 13px;margin-top:16px}
  .inbox h3{margin:0 0 3px;font-size:13px;color:#6e1730}
  .inbox .sub{font-size:11.4px;color:#9a5c70;margin-bottom:7px}
  .tag-inbox{display:inline-block;font-size:10.6px;font-weight:bold;border-radius:999px;padding:2px 7px;white-space:nowrap;
             border:1px solid transparent;background:#eceef0;color:#41474d;cursor:default}
  /* 1.6 THE INBOX, FINAL. Seven groups, every one of them real. kre (Needs reteach, the OLD VOCABULARY named on purpose) and khts (Awaiting
     level-up) are deleted: no item is ever built with either kind, so they were two colours nobody could
     ever see. kalert and kexam ARE built and were never printed, which is why the count said 5 and four
     rows appeared. The amber ink is #96600b and not #9c640c, which measured 4.47 to 1 on this background,
     under the 4.5 floor; #96600b is 4.77. */
  .tag-inbox-descope{background:#f3dbe3;color:#8c1d40} .tag-inbox-teach{background:#e4f0e0;color:#2f5c29}
  .tag-inbox-arose{background:#d8efee;color:#0b5453} .tag-inbox-newskill{background:#fdebd6;color:#8a4500}
  .tag-inbox-alert{background:#fdf2e0;color:#96600b} .tag-inbox-exam{background:#eceef0;color:#41474d}
  .tag-inbox-missing{background:#eceef0;color:#41474d}
  .segbar{display:inline-flex;height:10px;width:120px;border-radius:999px;overflow:hidden;border:1px solid #d4d8dc;vertical-align:middle}
  .segbar i{display:block;height:100%}
  .segbar .secure{background:var(--secure)} .segbar .maintaining{background:var(--maint)}
  .segbar .fragile{background:var(--fragile)} .segbar .unseen{background:var(--unseen)}
  .popover{position:absolute;background:#fff;border:1px solid #9aa2aa;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.2);padding:10px 12px;z-index:30;max-width:420px;font-size:12px}
  .popover h5{margin:0 0 6px;font-size:12px}
  .popover .popover-strong{font-weight:bold;color:#16304a}
  .popover .popover-soft{color:#9aa0a6}
  .popover .probe{cursor:pointer;color:var(--diag);text-decoration:underline}
  .hider{position:fixed;inset:0;z-index:20}
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;display:flex;align-items:center;justify-content:center}
  .modal .box{background:#fff;border-radius:6px;padding:18px 20px;max-width:520px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,.3)}
  .modal h4{margin:0 0 8px;font-size:14px}
  .modal textarea{width:100%;min-height:64px;font-family:Arial;font-size:12.5px;padding:7px;border:2px solid var(--goldline);background:var(--gold);border-radius:4px}
  .modal .row{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
  .filterbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px;align-items:center}
  .btn-filter{border:1px solid var(--btn-line);background:#fff;border-radius:4px;padding:5px 13px;font-size:11.6px;color:var(--btn-ink);cursor:pointer;font-weight:bold}
  .btn-filter.on{background:var(--navy);border-color:var(--navy);color:#fff}   /* F289 (D22) */
  .empty{padding:20px;text-align:center;color:var(--sub);font-size:12.6px;border:1px dashed var(--grid);border-radius:6px;margin-top:6px}
  .skillrow td{background:#fbfcfd}
  .skillname{font-size:12.4px}
  /* ---- v32 section AW (F31, 16 Sep 2026, board A288): ONE ROW PER SKILL ----
     Joshua's answer, options 2 and 6b: the name takes what is left and is cut with an ellipsis (the whole
     name stays in its hover), the two controls sit at a fixed size snapped right in the same place on every
     row, and the cell never grows to a second line. skillCellLayout() in ui/common.js adds .onerow and the
     .cellrow wrapper after every render, so the five modules that print a skill cell carry no copy of this. */
  td.skillname.onerow{width:100%}
  td.skillname.onerow .cellrow{display:flex;align-items:center;gap:10px;min-width:0}
  td.skillname.onerow .name{flex:1 1 0;min-width:0;position:relative;height:1.4em;overflow:hidden}
  td.skillname.onerow .name .name-inner{position:absolute;left:0;right:0;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  td.skillname.onerow .actions{flex:0 0 auto;display:flex;gap:6px;align-items:center}
  td.skillname.onerow .actions .btn-inline{margin-left:0;text-align:center;min-width:80px;box-sizing:border-box}
  td.skillname.onerow .actions .btn-picker{min-width:108px;box-sizing:border-box}
  td.skillname.onerow .actions a.btn-link, td.skillname.onerow .actions .btn-link.ghost{min-width:46px}
  td.skillname.onerow .actions .btn-link.ghost{border-color:transparent;background:transparent;cursor:default;pointer-events:none}
  /* F372 (LIST row 8.13): a tap on a cut name shows the whole of it, wrapped, until a second tap (skillCellLayout) */
  td.skillname.onerow .name.full{height:auto;overflow:visible}
  td.skillname.onerow .name.full .name-inner{position:static;white-space:normal;overflow:visible}
  /* the other cells of a Progress skill row keep to one line too, which is the whole of 6b: a wrap anywhere
     in the row makes the row two rows high, and his complaint was the height and not the column */
  td.cell-state, td.cell-history, td.cell-plan, td.cell-override{white-space:nowrap}
  td.cell-override > .btn{white-space:nowrap}   /* the Lead Educator's own row is one line too: the button keeps its words and its cell fits them */
  /* ---- A141 (F31): THE VERSION SELECTOR, THE SPLIT STATE CELL AND THE WHOLE-SKILL ROW ----
     DESIGN RECORD - The Version Selector, The Split State Cell And The Recap Row v1, sections 2 to 5. The picker and the
     subparts control are rail controls, so they take .btn-inline's geometry and only say what they mean here; bright and
     dim are the whole point of the list and are one variant word, .dim, shared by the picker and the record popup. */
  /* THE RAIL IS STILL A RAIL (board A288: the controls sit at a fixed size, snapped right, in the same place on every
     row). The picker's label changes with what is picked, so it is given the fixed width the other rail controls have
     and a row whose skill has no catalogue family prints the ghost, exactly as a row with no Dr Frost link does. */
  .btn-picker{font-weight:bold;min-width:108px;max-width:108px;overflow:hidden;text-overflow:ellipsis}
  .btn-picker.on{border-color:var(--diag);color:var(--diag)}
  .btn-picker.ghost{border-color:transparent;background:transparent;cursor:default;pointer-events:none}
  .btn-request{margin-left:auto;color:var(--btn-go);border-color:var(--btn-go)}
  .btn-subparts{margin-left:0;color:var(--sub)}
  .picker-note{font-size:10.8px;color:var(--sub);margin:0 0 6px;line-height:1.5}
  /* A FAMILY CAN BE TWENTY-SIX PARTS LONG, so the list scrolls inside the popover rather than running off the screen. */
  .picker-list{max-height:52vh;overflow:auto}
  .picker-row,.record-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:3px 4px;border-radius:4px;font-size:11.4px;cursor:pointer}
  .record-row{cursor:default;display:block}
  .picker-row:hover{background:#f2f5f8}
  .picker-row.on,.record-row.on{background:#eef3f8;font-weight:bold}
  .picker-row.dim,.record-row.dim{color:#9aa0a6;cursor:default}
  .picker-row.dim:hover{background:transparent}
  .picker-code{color:var(--sub);font-size:10.6px;flex:0 0 auto}
  .record-row .picker-code{margin-right:6px}
  .picker-name{flex:1 1 0;min-width:0}
  .record-line{font-size:10.6px;color:var(--sub);line-height:1.5}
  /* THE SPLIT: the upper half is the cell as it was, the lower half is the way into the record. Joshua has seen what it
     costs (a Progress row 37px to 54px, a 900px screen 24 skills to 16) and taken it: "The pixel count will be changed
     in future, I'll look at it once you've built it." */
  .statecell-split{line-height:1.5}
  /* THE READY MARK IS 13.5px AND THE CELL IS NOW THE TALLEST THING IN THE ROW, so without this the seven rows that carry
     an arrow are one pixel taller than the other 357 and A288's "the same place on every row" stops being measurable. */
  .statecell-split .mark{line-height:1}
  .statecell-upper{padding-bottom:2px}
  .statecell-lower{border-top:1px solid var(--grid);padding-top:3px;margin-top:2px}
  tr.familyrow td{background:#f5f7f9}
  tr.partrow td.skillname{border-left:4px solid var(--grid)}
  /* F31 item 7 and item 8: the grey hoverable word that carries what a line used to say out loud, and the
     two overflow tiles that replace four lines and a sentence */
  .hoverword{color:#6b6f76;font-weight:normal;font-size:11.4px}
  /* F31, ruling 319e: the why control beside an instruction chip. The chip's own hover says what to do with
     THIS row; why? holds the mechanism, which is the same on every row and is read once. */
  .whyword{color:#6b6f76;font-size:10.2px;margin-left:4px;cursor:help}
  /* F54 (ruling 439 rule 4, his own line): the two overflow tiles are gone. Their counts are inside the full recap
     list's own title, "The full recap list. 11 due, 1 fragile", which is the control that opens the list. */
  td.cell-history .tag-level{margin-left:6px}
  .skill-code{color:var(--sub);font-size:10.6px;margin-right:6px}
  .due{font-size:11.6px;white-space:nowrap}
  .due.over{color:var(--fragile);font-weight:bold}
  .tag-source{font-size:10px;border-radius:999px;padding:1px 6px;font-weight:bold}
  .tag-source.lesson{background:#dff0d8;color:#2e6b30} .tag-source.test{background:#e8e0f5;color:#6a3d9a} .tag-source.homework{background:#d8efee;color:#0b5453}
  td.logdate{white-space:nowrap}   /* F276 (V4): the Event log's Date and Entered cells keep one line (6 Mar, never 6 / Mar) */
  .unrelated{background:#fde3d1;color:#9c4a00;font-size:10px;border-radius:999px;padding:1px 6px;font-weight:bold}
  .related{background:#dff0d8;color:#2e6b30;font-size:10px;border-radius:999px;padding:1px 6px;font-weight:bold}
  .legend{margin-top:14px;font-size:11.8px;color:var(--sub);background:#f7f8f9;border:1px solid #e3e4e6;border-radius:6px;padding:9px 13px;line-height:1.65}
  .legend b{color:var(--ink)}
  .subline{display:block;font-size:8.1px;font-weight:normal;opacity:.85;line-height:1.2;white-space:normal}
  .tag-level{background:#eef0f2;border:1px solid #c6ccd2;color:#4a5560;border-radius:999px;padding:1px 5px;font-size:10px;margin-left:5px;white-space:nowrap}
  .btn-suggest.fragile{border-color:var(--again);background:#fdf3f2}
  tr.subtopicband td .tag-instruction{margin-left:6px}
  /* 1.3 NO CONTROL IS ORANGE, and 1.8 THE LOOK-BACK CONTROL IS ONE LINE. Orange now means state and
     warning only. This class is still TWO things, the look-back control and every link that leaves the
     app; skillCellLayout tells them apart by tag name, and branch 3b gives the leaving link its own class. */
  /* 1.3 and section 5: .pdlink WAS TWO THINGS, the look-back control and every link that leaves the app, and
     skillCellLayout told them apart by tag name. Three classes now say it instead: btn-inline is the geometry
     of a small control on a rail, btn-lookback is the look-back control and btn-link is a link that leaves the
     app. The colours live on the family, so the same two rules paint the rail and the 2x2 grid. */
  .btn-inline{border-radius:4px;padding:1px 6px;font-size:10px;cursor:pointer;margin-left:6px;white-space:nowrap;display:inline-block}
  .btn-inline,.btn-lookback,.btn-link{border:1px solid var(--btn-line);background:#fff;color:var(--btn-ink)}
  .btn-inline:hover{background:#f2f5f8}
  .tag-needlevel{display:inline-block;border:1px solid var(--lvup-line);background:var(--lvup-fill);color:var(--lvup-ink);border-radius:999px;padding:1px 8px;font-size:10.4px;margin-left:6px}
  .viewband{background:#eef3f8;border:1px solid #b9cbdc;border-radius:6px;padding:3px 9px;font-size:10.8px;color:#2c4a63;margin:6px 0}
  .viewband.exception{background:#fdf7dd;border-color:#e8d98a;color:#7a6a20}
  /* F372 (LIST row 8.21, T21): the homework's view switch, two named options with the current one marked (the Lesson view
     switch's own look, .view-mode), in place of a press naming the other view and a band naming this one */
  .view-mode.hwview{margin-left:6px;vertical-align:middle}
  .view-mode.hwview .view-option{padding:4px 12px}
  .subtopiccard{border:1px solid #cfd8c9;border-radius:6px;margin:8px 0;padding:8px 10px;background:#fcfdfb}
  .subtopiccard-head{font-size:12.4px;background:#eef6ea;border-bottom:1px solid #cfd8c9;margin:-8px -10px 6px;padding:7px 10px;border-radius:6px 6px 0 0}
  .sectionhead{background:#e8eef5;border:1px solid #b9cbdc;border-left:4px solid #5b7c99;border-radius:6px;padding:7px 12px;margin:14px 0 7px;font-size:12.4px;color:#2c4a63}
  .sectionhead b{font-size:13px;color:#1b3348}
  .subtopiccard-head .tag-quiet{margin-left:5px}
  .tag-state-implied{background:#e2f0ec;color:#2e6b5e;border:1px solid #9ec9bd}
  .steplabel{font-size:9.4px;font-weight:bold;color:#4a5560;display:inline-block;width:62px;vertical-align:middle}
  /* F372 (LIST row 8.13, T20): ON THE TUTOR'S FACE, INDEPENDENT WORK'S RATING AND STATE COLUMNS NARROWER, so a skill's name has
     the width: each step's label above its buttons and the buttons 88 wide (106 before), the state's chips wrapping inside their
     column; both tables drawn at their declared widths (a fixed layout: a cut name gives no width back in an automatic one), and
     Progress's Next recall due head on one line. The Lead Educator's face is not touched. */
  #pages.tutorface .iwtable .steplabel{display:block;width:auto;margin:0 0 3px}
  #pages.tutorface .iwtable .rating button{width:88px;padding:3px 2px}
  #pages.tutorface .iwtable td.tight .btn-subparts,#pages.tutorface .iwtable td.tight .btn-inline{white-space:normal;max-width:100%;box-sizing:border-box}
  #pages.tutorface .progtable th.nowrap{white-space:nowrap}
  #pages.tutorface .iwtable,#pages.tutorface .progtable{table-layout:fixed;width:100%}
  #pages.tutorface .iwtable td,#pages.tutorface .progtable td{white-space:normal}
  #pages.tutorface .progtable td .btn-subparts,#pages.tutorface .progtable td .due{white-space:normal;max-width:100%;box-sizing:border-box}
  /* F538: Progress's Deep dives card (ui/dive.js), its checklist panel and the lesson row's dive chip */
  .divecard{margin:0 0 10px}
  .divecard-head .skill-code{margin-left:8px}
  .divelist{width:100%;border-collapse:collapse;margin-top:6px}
  .divelist td{padding:4px 6px;border-top:1px solid var(--grid);vertical-align:middle}
  .divelist td.dive-what{white-space:nowrap;text-align:right}
  .divelist td.dive-name{font-weight:bold;width:32%}   /* the topic ids are its hover, never printed (the tutor face prints no code) */
  .divelist td.dive-sum{color:#555}
  .dive-n{font-weight:bold;margin-right:6px}
  .tag-dive{display:inline-block;background:#eef4fb;border:1px solid #9cb8d8;border-radius:999px;padding:1px 9px;margin-left:7px;font-size:10.6px;color:#2c5282;cursor:pointer}
  .tag-dive.done{background:#e8f5e9;border-color:#7bb77e;color:#2e6b31;cursor:default}
  .divepanel{border-top:2px solid var(--grid);margin-top:8px;padding-top:8px}
  .divepanel-head label{margin-left:10px}
  .dive-msg{color:#9c640c;margin:4px 0}
  .dive-sub{margin:8px 0 4px}
  .dive-subname{font-weight:bold;font-size:12px}
  .dive-skill{display:grid;grid-template-columns:minmax(140px,1fr) minmax(160px,220px) 3fr;gap:8px;align-items:start;padding:4px 0;border-top:1px dotted var(--grid)}
  .dive-ticks{display:flex;flex-wrap:wrap;gap:4px}
  .dive-tick{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--grid);border-radius:4px;padding:1px 4px;font-size:11px}
  .dive-tick.correct{background:#e8f5e9}
  .dive-tick.secure{background:#fdf6e3}
  .dive-tick.none{background:#fff}
  .dive-skillname{font-size:12px}
  .dive-rating{font-size:11px}
  @media (max-width:600px){ .dive-skill{grid-template-columns:1fr} .divelist td.dive-what{white-space:normal} }
  .inboxgrouphead{cursor:pointer;font-size:12px;margin:9px 0 4px;font-weight:bold}
  .missing-panel{border:2px dashed #c0392b;background:#fdf6f5;border-radius:6px;padding:8px 12px;margin:8px 0}
  .tag-level.dim{background:#fbe0da;border-color:var(--fragile);color:var(--fragile)}
  .tag-level.faint{opacity:.6}
  .btn-order{border:1px solid #b9c3cc;background:#f4f7f9;border-radius:4px;font-size:9px;cursor:pointer;padding:1px 5px;margin-left:3px;color:#41505c;font-weight:normal}
  .missing-wrap{outline:2px dashed #d68910;border-radius:4px;display:inline-block;padding:1px}
  .missing-level{color:#9c640c;font-size:9.6px;font-weight:bold;margin-left:5px}
  .tag-quiet.missing{background:#fdf2e0;border-color:#d68910;color:#9c640c}
  .tag-findlevel{display:inline-block;background:#fdebd6;border:1px solid #d6700a;color:#8a4500;font-weight:bold;border-radius:999px;padding:5px 10px;margin:0 4px 0 6px;font-size:12px;vertical-align:middle;cursor:help}
  .tag-state-unseen.findlevel{background:#fdebd6;border-color:#d6700a;color:#8a4500;font-weight:bold}
  .statecell{line-height:1.7}
  .statecell .tag-level{margin-left:0}
  .statecell .tag-level.attarget{background:#e8f1e6;border-color:var(--btn-go);color:var(--btn-go)}
  .overviewlines{font-size:11px;color:#555;margin-top:4px}
  .overviewlines div{display:inline-block;margin-right:14px}
  .tag-quiet.holiday{background:#e8f1e6;border-color:#2f5c29;color:#2f5c29;font-weight:bold}
  .tag-quiet.notes{background:#fff8e6;border-color:#c9a227;color:#6b5410}
  /* 1.5 THE LEVEL CONTROL GOES GRAPHITE. A level is a setting, not a state and not a level-up, so it
     stops wearing the Pre-teach purple. The one exception is the OUTLINED tile below, which is the
     level-up target and is magenta: the validation pass rendered the two side by side and the graphite
     tile read as one more level button rather than as the thing the level-up is aiming at. */
  .rating button.btn-level{width:106px;background:#f7f8f9;border-color:#c6ccd2;color:#4a5560}
  .rating button.btn-level.on{background:#4a5560;border-color:#4a5560;color:#fff}
    .btn.on{background:var(--btn-go);border-color:var(--btn-go);color:#fff;font-weight:bold}
  /* 1.2: the tick keeps maroon for Needs teaching, which is a withdrawal, and gains .taught, which is
     the one green, because Taught today is the primary thing a tutor says on that control. */
  .tick .btn.on{background:var(--btn-withdraw);border-color:var(--btn-withdraw);color:#fff}
  .tick .btn.on.taught{background:var(--btn-go);border-color:var(--btn-go);color:#fff}
  .rating span.tile-target{display:inline-block;width:106px;text-align:center;padding:4px 2px;border:2px solid var(--lvup-line);border-radius:6px;background:#fff;color:var(--lvup-ink);font-weight:bold;vertical-align:middle}
  .rating span.tile-target .subline{display:block;font-weight:normal;font-size:10px;color:#6b6f76}

  textarea.input-date{border:1px solid var(--grid);background:#fffdf3;border-radius:4px;font:inherit;font-size:12px}
  .input.input-missing{border-color:#c0392b;background:#fff5f4}
  .sectionhead[title]{text-decoration:underline dotted #b09a55;text-underline-offset:3px;cursor:help}
  .scroll{overflow-x:auto}
  .tag-warning{font-weight:bold;font-size:10.6px;color:#9c4a00;background:#fde3d1;border:1px solid #e2ab5f;border-radius:4px;padding:1px 7px;margin-left:8px}
.studentbar{display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:7px 10px;background:#fdf6e3;border:1px solid #d9c58a;border-radius:6px;font-size:12.5px}
.studentbar b{letter-spacing:.4px}
.studentbar select{font-size:12.5px;padding:3px 6px;background:#fffdf5;border:1px solid #c9b26a;border-radius:4px}
.studentbar .studentnote{color:#8a7a4a;font-size:11px;margin-left:auto}
  /* v4: anything hoverable says so. Dotted underline = there is a note under the pointer. */
  span[title]:not(.btn-suggest):not(.tag-count):not(.tag-quiet):not(.tag-instruction):not(.tag-advice):not(.tag-provisional):not(.tag-target):not(.tag-warning):not(.outcome):not(.tag-timing):not(.tag-unit):not(.btn-cell),
  b[title], th[title], label[title], i[title]{ text-decoration:underline dotted #b09a55; text-underline-offset:2px; cursor:help; }
  .cite[title]{ text-decoration:underline dotted #b09a55; text-underline-offset:2px; cursor:help; }   /* WR15: a citation moved into the hover of the sentence it closed */
  .btn-suggest .alsodue{ font-size:10.6px; color:#8c1d40; margin-left:4px; }   /* WR19: an owed Teach row that is also due says so on its one chip */
  .btn-suggest[title], .tag-quiet[title], .tag-instruction[title], .tag-advice[title], .tag-provisional[title], .tag-target[title], .tag-warning[title], .tag-level[title], .tag-timing[title]{ border-bottom:1px dotted #b09a55; cursor:help; }
  .field-number[title]>span:first-child{ text-decoration:underline dotted #b09a55; text-underline-offset:2px; }
  div[title], td[title]{ cursor:help; }
  .section-head span[title]{ text-decoration:underline dotted #b09a55; text-underline-offset:2px; }
  /* 10f wiring (feature/10f-wiring): the question tag, the pair chips, the free-roll hover, the gate, the pack import */
  .tag-skill{display:inline-block;background:#e8eaed;border:1px solid #cfd4d9;border-radius:999px;padding:1px 6px;font-size:10.6px;color:#2b3a45;margin-top:2px}
  .tag-pair{display:inline-block;border-radius:999px;padding:1px 8px;font-size:10.2px;font-weight:bold;cursor:help;margin-left:4px}
  .tag-pair.fragile{background:#fbe0da;color:#c0392b;border:1px solid #c0392b}
  .tag-pair.core{background:#e8f0f7;color:#1f4e79;border:1px solid #5b7c99}
  .tag-pair.levelUp{background:var(--lvup-fill);color:var(--lvup-ink);border:1px solid var(--lvup-line)}
  .freeroll{display:inline-block;background:var(--lvup-fill);color:var(--lvup-ink);border:1px dashed var(--lvup-line);border-radius:999px;padding:1px 7px;font-size:10.2px;cursor:help;margin-left:2px}
  .tag-estimate{display:inline-block;color:#b8860b;border:1px dotted #b8860b;border-radius:999px;padding:0 5px;font-size:10.2px;cursor:help;margin-left:4px}
  tr.levelUp-row td{background:#fffafd}
  tr.gated td{background:#f4f4f4}
  .gatenote{font-size:11px;color:#7a8a97;font-style:italic}
  .packimport{margin:8px 0 4px;padding:6px 10px;border:1px dashed #b7c0c8;border-radius:6px;font-size:11.6px;background:#fafbfc}
  .btn-suggest.fragile{border-color:#c0392b}
  .levelUp-bar{margin:2px 0 10px;font-size:11.4px}
  .levelUp-bar .btn{margin-right:4px}
  .levelUp-bar .skill-code{margin-left:6px}
  .levelUp-target{font-size:10.4px;color:var(--lvup-ink);margin:0 0 3px;font-style:italic}
  .btn-levelUp{border:1px solid var(--lvup-line);background:var(--lvup-fill);color:var(--lvup-ink);border-radius:4px;font-size:10.2px;padding:1px 7px;cursor:pointer;margin-left:6px}

  /* ---- v14 section AN (F9 tutor surfaces, 9 Sep 2026): the lesson table's fixed geometry ---- */
  /* The column widths are DECLARED, not measured, so pressing a rating can never move a column. */
  table.lessontable{table-layout:fixed}
  table.lessontable td{vertical-align:top;padding:7px 8px}
  table.lessontable th[title]{cursor:help;text-decoration:underline dotted #b09a55;text-underline-offset:3px}
  /* the skill cell: name and status chips at the top, the four fixed chips in a 2x2 block at the bottom */
  td.skillname .skilltop{font-size:12.4px;line-height:1.35}
  td.skillname .skilltags{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
  td.skillname .skilltags > *{margin-left:0}
  .skill-actions{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:6px;margin-top:10px}
  .btn-cell{display:flex;align-items:center;justify-content:center;text-align:center;min-height:28px;
         border-radius:4px;padding:3px 7px;font-size:10.4px;font-weight:normal;line-height:1.25;
         cursor:pointer;box-sizing:border-box;text-decoration:none;white-space:normal;border:1.5px solid transparent;margin:0}
  /* 1.3: the diagnose mode is the one place this control is filled, and it is filled blue, which is the
     colour diagnose already has in --diag, rather than the orange it borrowed. */
  .btn-cell.btn-lookback.diagnosing{background:#1c5d99;border-color:#17497a;color:#fff;font-weight:bold}
  .btn-cell.ghost{border-color:transparent;background:transparent;cursor:default;pointer-events:none}
  .btn-cell:hover{filter:brightness(0.97)}
  .btn-cell.ghost:hover{filter:none}
  .btn-cell[title], .btn-cell[title]:hover{border-bottom:1.5px solid;text-decoration:none}
  .section-body > .recapcard{border:none;border-left:4px solid #b79c68;border-radius:0;margin:0}
  /* the rating cell: one vertical rhythm, the step label on its own line so the tiles keep a fixed run */
  td.ratecell .steplabel{display:block;width:auto;margin:0 0 5px}
  td.ratecell .rating-group{margin:0 0 10px}
  td.ratecell .rating-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  td.ratecell .rating-line + .rating-line{margin-top:6px}
  td.ratecell .rating-group:last-child{margin-bottom:0}
  td.ratecell .rating{gap:6px;flex-wrap:wrap}
  td.ratecell .tick{display:inline-flex;gap:6px}
  td.ratecell .levelUp{margin-top:8px}
  /* the note fills its cell */
  td.notecell{padding:5px}
  textarea.note-input{width:100%;box-sizing:border-box;min-height:110px;height:100%;font-size:11.2px;
                  border:1px solid #d4d8dc;border-radius:4px;padding:5px 7px;font-family:Arial;resize:vertical;display:block}
  /* the starter: two fixed columns, so every chip wraps in the same place */
  .suggestlist.two{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;align-items:stretch;margin:6px 0}
  .suggestlist.two .btn-suggest{display:block;width:100%;box-sizing:border-box;border-radius:4px;line-height:1.45;padding:7px 11px}
  /* LEARNING BLOCK band, now a collapsible header */
  .blockband.clickable{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  .blockband .bandsource{font-weight:normal;font-size:11px;color:#7a6a2f}
  /* Item 7 (Joshua, 10 Sep): two columns are for a wide window. Below this the starter is one column, because
     two narrow ones read worse than one wide one, which was the whole complaint the change answered. */
  @media (max-width: 1000px){ .suggestlist.two{grid-template-columns:1fr} }

  /* ================= v36 branch one (F31, feature/design-look): the three shapes, three button colours,
     four radii and one colour per meaning. BUILD SPEC - Tiles, Chips and Buttons v3, sections 1.1 to 1.8.
     Everything above this block was edited in place; everything that is NEW lives here. ================= */

  /* 1.5 and ruling 365: THE CLASS IS SPLIT, THE CLASS IS NOT PAINTED. .tag-target has five emitters and two of
     them are not level-up at all (at target on Progress, target N on the planning cards), so painting .tag-target
     magenta would have painted two states that are not level-ups. The three emitters that DO mean level-up
     take this class instead and .tag-target keeps its blue for the state it names. */
  .tag-levelUp{display:inline-block;background:var(--lvup-fill);border:1px solid var(--lvup);color:var(--lvup-ink);
               border-radius:999px;font-size:10.6px;font-weight:bold;padding:2px 9px;margin-left:6px}
  /* the ready-to-level-up arrow beside a state: the only mark in the app that means a level-up is available */
  .mark.ready{color:var(--lvup);font-weight:bold;font-size:13.5px}
  .mark.fragile{color:var(--fragile);font-weight:bold}

  /* 1.1: the inbox kind chips printed OUTSIDE the Planning inbox are TAGS. On Build Next Block section 6 and
     on the Block Review they have always printed as blue clickable-looking pills with no colour rule and no
     click behind them, which is a control that does nothing. They now take the kind's own colour from the
     1.6 table and stop pretending to be pressable. */
  /* branch one made the chips printed OUTSIDE the Planning inbox into tags by adding a second class to a
     button. Section 5 removes the contradiction rather than dressing it: all three emitters now print the
     one tag-inbox tag above, so the rule set exists once and a control that cannot be pressed is not a button. */

  /* 1.4 THE TOKEN COLLAPSE, FINISHED. Branch one wrote the four values as a block of overrides at the foot of the
     sheet, which left twelve values in the declarations above it and the true radius of a card two places apart.
     Every declaration now carries its own ruled value, so this block has nothing left to override: tags 999px,
     buttons 4px, cards 6px, and every left accent 4px. */
  /* 1.7: the quiet new skill pill takes the same orange as the NEW SKILL tile it refers back to */
  .tag-quiet.newskill{background:#fdebd6;border-color:#d6700a;color:#8a4500;font-weight:bold}

  /* ============================================================ F31 branch 3a: LAYOUT 1 AND THE RECAP CELL
     (BUILD SPEC v3 section 3.1, DESIGN RECORD - The Version Selector, The Split State Cell And The Recap Row v1
     sections 7 and 8). ONE ROW SHAPE, met in the starter, in the recap cell and on the bulk recap list. The state
     comes FIRST, immediately after the name, with the recall probability inside the pill, so the percentage says
     what it is about. How overdue is RED ONLY WHEN OVERDUE. What to ask is plain bold text and never a bordered
     rectangle, because a bordered rectangle is a button under the design system that landed at v37. */
  .rcrow{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box}
  /* the row is read left to right, so it takes the whole width of the two-column starter grid. The selector has to
     out-specify .suggestlist.two .btn-suggest{display:block}, which is what makes a starter chip a block today. */
  .suggestlist.two > .btn-suggest.rcrow{grid-column:1 / -1;display:flex}
  .rcname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rcname > b{color:#1b3348}
  .rcsub{color:var(--sub);font-size:10.8px;font-weight:normal;margin-left:6px}
  /* F372 (LIST row 8.14, T24): the skill on one line and its subtopic on the next, each cut on its own line, never run together */
  .rcname > b,.rcname > .rcsub{display:block;overflow:hidden;text-overflow:ellipsis}
  .rcname > .rcsub{margin-left:0}
  .rcstate{flex:0 0 auto;border-radius:999px;padding:2px 11px;font-size:11.2px;font-weight:bold;white-space:nowrap;
           background:#eef0f2;border:1px solid #d4d8dc;color:#41474d;min-width:132px;text-align:center}
  .rcstate.fragile{background:#fbe3df;border-color:#e8b3aa;color:var(--fragile)}
  .rcstate.hold{background:#e4f0e0;border-color:#b7d3af;color:#2f5c29}
  .rcstate.levelUp{background:var(--lvup-fill);border-color:var(--lvup-line);color:var(--lvup-ink)}
  .rcstate.teach{background:#f3dbe3;border-color:#d9a8bb;color:var(--flag)}
  .rcstate.newskill{background:#fdebd6;border-color:#d6700a;color:#8a4500}
  .rcover{flex:0 0 auto;width:96px;text-align:left;font-size:11.4px;color:var(--sub);white-space:nowrap}
  .rcover.over{color:var(--fragile);font-weight:bold}
  .rcover.levelUp{color:var(--lvup-ink);font-weight:bold}
  .rcover.newskill{color:#8a4500;font-weight:bold}
  .rcask{flex:0 0 auto;width:132px;font-size:11.4px;color:#41474d;white-space:nowrap}
  .rcask b{color:#1b3348}
  .rcplus{flex:0 0 auto;color:var(--btn-go);font-weight:bold;font-size:15px;cursor:pointer;padding:0 4px}
  .btn-suggest.rcrow .alsodue{flex:0 0 auto}
  .btn-suggest.rcrow.fragile{border-color:var(--again);background:#fdf3f2}
  .btn-suggest.rcrow.levelUp{border-color:var(--lvup-line);background:#fffafd}
  .btn-suggest.rcrow.teach{border-color:#d9a8bb;background:#fdf6f8}
  .btn-suggest.rcrow.newskill{border-color:#d6700a;background:#fffaf4}
  /* F510: the lesson's instruction rows, one card after the School position check; the tick, the text, the answer box, the cross */
  .instr-card{border:1px solid var(--grid);border-left:4px solid #8a7dc4;border-radius:6px;background:#fbfbfd;padding:8px 12px;margin:2px 0 8px}
  .instr-card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:4px}
  .instr-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;border-top:1px solid #eef0f2}
  .instr-row .instr-tick{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border:1px solid #9aa3ab;border-radius:4px;cursor:pointer;color:#fff;font-weight:bold}
  .instr-row .instr-tick.on{background:var(--good);border-color:var(--good)}
  .instr-row.done .instr-text{color:#6b747c;text-decoration:line-through}
  .instr-row .instr-answer{flex:1 1 200px;min-width:0;font-size:12px}
  .instr-card[data-locked] .instr-tick{cursor:default}
  .instr-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:6px;border-top:1px solid #eef0f2}
  .instr-add .instr-free{flex:1 1 200px;min-width:0}
  .instr-row .instr-text{flex:0 1 auto} .instr-row .instr-hw, .instr-add .instr-pick{font-size:11px} .instr-row .instr-hw-none{font-style:italic} .instr-row .instr-remove{margin-left:auto}
  /* ============ F54: THE STARTER BOX (ruling 439, and the picture is reviews/MOCKUP - The Starter Box, FINAL For
     Validation v2.html). ONE BOX at the head of the next lesson the tutor will teach, replacing the .starter panel
     above the learning blocks and the .recapcell inside every lesson. The rules it draws are all his: no kind tag on a
     row, no pick 4 (a capacity box instead, red when over allocated), the sort order in one hover at the bottom right,
     the two counts inside the list control's own title, and Needs teaching ASAP costing nothing. */
  .starter-box{border:1px solid var(--grid);border-left:4px solid #7d9dc4;border-radius:6px;background:#fbfcfd;padding:10px 12px}
  .starter-box.over{border-left-color:var(--fragile);background:#fdf9f8}
  .box-head{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
  .box-title{font:bold 13.5px Arial;color:#1b3348}
  .box-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;border-top:1px solid var(--grid);padding-top:7px}
  .box-foot.thin{justify-content:flex-end;gap:10px;border-top:none;padding-top:4px;margin-top:6px}
  .box-help{font:11.5px Arial;color:var(--sub);border-bottom:1px dotted var(--sub);cursor:help}
  .starter-box .rcnote{font-size:11.4px;color:#2f5c29;font-weight:bold}
  .box-none{font-size:11.5px;color:var(--sub);margin-top:5px}
  /* the capacity box, top right, four blocks and "2 of 4", NO LABEL above them: a filled block per slot spent, magenta
     for a level-up block, a red block past the fourth, and the number reddens with it. */
  .cap{flex:0 0 auto;text-align:right;cursor:help}
  .cap-seg{display:flex;gap:3px;justify-content:flex-end}
  .cap-seg i{width:20px;height:13px;border-radius:4px;border:1px solid #b9c3cc;background:#fff;display:block}
  .cap-seg i.on{background:#7ea875;border-color:#5d8a55}
  .cap-seg i.levelUp{background:#c25aa6;border-color:#a4157f}
  .cap-seg i.bad{background:var(--fragile);border-color:#8c1d40}
  .cap-seg-count{font:bold 11.5px Arial;color:#2f5c29;margin-top:3px;display:block;font-variant-numeric:tabular-nums}
  .cap-seg-count.bad{color:var(--fragile)}
  /* the three section titles, his wording both sides, the cost on the right so all three read the same way */
  .box-section{margin-top:9px}
  .box-section-head{font:bold 12px Arial;color:#1b3348;border-bottom:2px solid #7d9dc4;padding-bottom:3px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .box-section-head.asap{color:#8c1d40;border-bottom-color:var(--flag)}
  .box-section-head.lvup{color:var(--lvup-ink);border-bottom-color:var(--lvup-line)}
  .box-section-head .cost{font:normal 10.5px Arial;color:var(--sub);flex:0 0 auto}
  .box-rows{margin-top:5px}
  .box-rows .btn-suggest.rcrow{margin:4px 0;display:flex;width:100%;box-sizing:border-box}
  .box-rows .btn-suggest.rcrow.on{opacity:.55;cursor:default}
  .box-rows .btn-suggest.rcrow.on .plus{color:#2f5c29}
  /* section 4: the full recap list, his title wording carrying the two counts. Clicking it opens the list, the caret
     flips and the words do not change. The old bottom count line is gone: its counts are in this title. */
  .box-expand{font:bold 12px Arial;color:#1b3348;border-bottom:2px solid #7d9dc4;padding-bottom:3px;display:flex;
          justify-content:space-between;align-items:baseline;gap:10px;cursor:pointer;margin-top:9px}
  .box-expand:hover{color:var(--secure)}
  .box-toolong{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--fragile)} /* F511: the due list too long for the starters, one line */
  .box-toolong .count{font-weight:bold} .box-toolong .toolong-say{color:#5b6670;font-style:italic} .box-toolong .toolong-offer{font-size:11px}
  .box-expand .caret{display:inline-block;width:12px;color:var(--secure)}
  .box-expand .right{font:normal 10.5px Arial;color:var(--sub);flex:0 0 auto}
  /* F73 ITEM 4 (his 9d and his 9f answer): "61 due, 0 fragile", BOTH NUMBERS AND BOTH WORDS in alert red, ALWAYS, zero
     included. The words now sit inside the same b.count as the number they belong to, so one rule reddens both and the
     line can never redden half of itself again. .count-fragile is kept because the fragile count is still its own span
     and the suite names it, and it now says the same red as its neighbour rather than being the only red thing there. */
  .box-expand b.count{font-variant-numeric:tabular-nums;color:var(--fragile)}
  .box-expand .count-fragile{color:var(--fragile)}
  .box-expand.open{border-bottom-color:#c9d2da}
  .box-expand.warn{border-bottom-color:#d9a441}
  .recap-list-warn{font:normal 11.5px Arial;color:var(--fragile);font-weight:bold}
  .recap-list{margin-top:8px;border:1px solid #c9d2da;border-radius:6px;background:#fff;padding:9px 10px}
  .recap-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
  .recap-list-title{font:bold 12px Arial;color:#1b3348}
  .recap-list-title span{font-weight:normal;color:var(--sub)}
  .recap-list-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .recap-list-rows .rcrow{border:1px solid var(--btn-line);background:#fff;border-radius:4px;padding:4px 10px;margin:3px 0;font-size:12px}
  .recap-list-rows .rcrow.fragile{border-color:var(--again);background:#fdf3f2}
  .recap-list-rows .rcrow.levelUp{border-color:var(--lvup-line);background:#fffafd}
  .recap-list-rows .rcrow.taken{opacity:.5}
  .recap-list-rows .rcask.taken{color:var(--sub)}
  .recap-list-rows .rcplus.faint{color:var(--sub);cursor:default}
  .recap-list-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px;font:11.5px Arial;color:var(--sub)}
  .rctick{flex:0 0 auto;display:flex;align-items:center}
  /* ============ F73 (the list shape). ITEM 2, his 9a and 9b: THE WHOLE ROW IS THE SELECT TARGET and the `+` at the end
     of every row is gone. The checkbox stays as the thing that DRAWS the selection and stops being the thing that is
     PRESSED, so a click on the box itself passes straight through to the row and ticks it exactly like a click anywhere
     else on the row. A row already on the lesson is dim and takes no press, which is his "dimming is the confirmation". */
  .recap-list-rows .rcrow{cursor:pointer}
  .recap-list-rows .rcrow:hover{background:#f4f7fa}
  .recap-list-rows .rcrow.picked{border-color:#7d9dc4;background:#f2f7fd}
  .recap-list-rows .rcrow.taken{cursor:default}
  .recap-list-rows .rcrow.taken:hover{background:#fff}
  .rctick input{pointer-events:none}
  /* ITEM 3: the digit in "Add 3 selected" carries the eye, because it is the thing that changes as he ticks. */
  .recap-list-acts .selcount{font-size:13.5px;font-weight:bold;color:#1b3348}
  /* ============ F73 ITEM 1 AND FINDINGS ITEM 15a: THE ONE FOLD, three then nine then show all, under every long list
     in the app. `show more` is a quiet inline word because it is a step on the way; `show all` is a full width button at
     the FOOT of the expanded list, which is where he asked for it and where the mockup draws it; and the way back is a
     quiet word beside them, because a fold that cannot be closed again is a one way door. */
  .listfold{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
  .listfold-more{font:bold 11.5px Arial;color:var(--secure);border-bottom:1px dotted var(--secure);cursor:pointer}
  .listfold-more:hover{color:#1b3348}
  .listfold-all{flex:1 1 100%;order:2;border:1px solid var(--btn-line);border-radius:6px;background:#f2f5f8;
          padding:6px;font:bold 11.8px Arial;color:var(--btn-ink);text-align:center;cursor:pointer}
  .listfold-all:hover{background:#e7edf3}
  .listfold-less{font:11.5px Arial;color:var(--sub);border-bottom:1px dotted var(--sub);cursor:pointer}
  .listfold-less:hover{color:#1b3348}
  /* ============ F73 ITEM 6: THE TEST BUILDER'S SUGGESTIONS TAKE THE RECAP ROW. Five columns, the recap row's shape
     exactly, with the kind as a leading tag and pull forward behind its own divider at the FOOT of the list, which is
     reviews/MOCKUP - The Builder Row And Its Fold v1.html sections 1a, 2a and 3. The rows reuse .rcrow, so a builder row
     and a recap row are one object to a tutor and cannot drift apart. */
  .bslist{margin:4px 0 2px}
  .bslist .rcrow{border:1px solid var(--btn-line);background:#fff;border-radius:4px;padding:4px 10px;margin:3px 0;font-size:12px;cursor:pointer}
  .bslist .rcrow:hover{background:#f4f7fa}
  .bslist .rcrow.fragile{border-color:var(--again);background:#fdf3f2}
  .bslist .rcrow.levelUp{border-color:var(--lvup-line);background:#fffafd}
  .bstag{flex:0 0 78px;font:bold 11px Arial;letter-spacing:.02em;color:#2f5c29;white-space:nowrap}
  .bstag.pull-forward{color:var(--secure)}
  .bstag.levelUp{color:var(--lvup-ink)}
  .bsdiv{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font:bold 11px Arial;letter-spacing:.02em;color:var(--secure)}
  .bsdiv:after{content:"";flex:1;height:1px;background:var(--grid)}
  .bsdiv.levelUp{color:var(--lvup-ink)}
  .bshead{font:bold 12px Arial;color:#1b3348;border-bottom:2px solid #7d9dc4;padding-bottom:3px;display:flex;
          justify-content:space-between;align-items:baseline;gap:10px;margin:8px 0 0}
  .bshead b.count{font-variant-numeric:tabular-nums;color:var(--fragile)}
  .bshead .box-help{flex:0 0 auto}
  /* ============ F73 ITEM 5, board A805 (the recap day cover list is in a file this row's OWNS line does not name),
     HIS ANSWER a: THE RECAP DAY COVER LIST TAKES THE SAME ROW on the tutor and Lead Educator views alike. It is read
     only, so it has no press and no hover lift: the card says what the day will cover and the lesson page is where a
     recap joins a lesson. */
  .recap-cover{margin:6px 0 2px}
  .recap-cover .rcrow{border:1px solid var(--btn-line);background:#fff;border-radius:4px;padding:4px 10px;margin:3px 0;font-size:12px}
  .recap-cover .rcrow.fragile{border-color:var(--again);background:#fdf3f2}
  .recap-cover .rcrow.levelUp{border-color:var(--lvup-line);background:#fffafd}
  .recap-cover .rcrow.teach{border-color:#d9a8bb;background:#fdf6f8}
  /* RULING 438: the two red controls sit STACKED AT THE FULL WIDTH OF THE NOTE CELL, under the note input. */
  .note-actions{margin-top:6px;display:grid;gap:5px}
  .note-actions .btn-cell{width:100%;box-sizing:border-box;text-align:center}
  /* RULING 437: the app's own confirmation, the one Descope uses, and never the browser box. */
  .modal .modal-say{font-size:12.5px;color:#333;line-height:1.55;margin-bottom:10px}
  .modal .modal-go{border-color:#c0392b;color:#c0392b}
  /* 3.2: the three closest stored names, offered after a description with no code. */
  .matchhits{margin-top:7px;border-top:1px dotted #d9b6b0;padding-top:6px}
  .matchhits .suggestlist{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
  /* F78 (the missing skill box, show all), item 3 of his ruling: the open list keeps EVERY match, with no second cap and no
     truncation, and scrolls inside about 220px, because one word (algebra) scores over a thousand names on a course. */
  .matchhits .suggestlist.msall{max-height:220px;overflow-y:auto;align-content:flex-start}
  /* RULING 481 (the note column on Independent Work prints as text on the tutor face): the note of a homework or test
     question is READ on that face and never typed into, so it is text and not a box. The column has been 150px on both
     tables since v15, which is what this wraps inside; the Lead Educator's input is untouched.
     THE MIN-WIDTH IS THE COLUMN: an input carries an intrinsic width of its own and text does not, so a cell holding
     text alone lets the browser squeeze the column to the width of one word, which is the 43 pixels the reflection
     photographed. 140px inside the 150px the header declares holds the column open at the width it was always given. */
  .notetext{display:block;min-width:140px;font-size:11.4px;line-height:1.45;color:#333;white-space:pre-wrap;overflow-wrap:break-word}
  .notetext-small{font-size:11px;line-height:1.4}

  /* ================= v64 (F68, fix/tutor-face-narrow), RULING 499 (the tutor face gets a narrow layout under 600 px
     and a laptop note), both halves of Joshua's own answer on board A677, BUILT MINIMALLY because a laptop is what a
     tutor is expected to use: this is a FLOOR that keeps a phone usable and never a second design of the tutor face.
     THE DEFECT: the page itself never scrolled sideways, because every table sits in a .scroll box; the TABLE did. At
     390 by 844 the Lesson Sequence skill table is 917px (250 + 104 + 470 + 92 + the note column, declared in a colgroup
     under table-layout:fixed so a rating can never move a column) inside a 260px box, so the level buttons and the four
     grade buttons were off screen to the right of EVERY row and a tutor graded by scrolling each subtopic box sideways,
     row by row. NOTHING ABOVE 600px MOVES: every rule here is inside the query.
     ONE BREAKPOINT AND NO JAVASCRIPT. The width is read by the stylesheet alone, so there is no resize listener, no
     render-time width test and nothing stored: a tutor who turns the phone sideways crosses the breakpoint and the
     table goes back to its columns with no state to be stale. ================= */
  /* Half (b) of ruling 499, the laptop note: renderLessons() prints it at every width and the stylesheet decides.
     THE BASE RULE SITS ABOVE THE QUERY ON PURPOSE. A media query adds no specificity, so a later .narrownote rule of
     the same weight would win at every width and the note would never appear; the order is the whole of the switch. */
  .narrownote{display:none;border:1px solid #cdd8e4;border-left:4px solid #4a6b96;background:#f6f9fc;border-radius:6px;
    padding:8px 11px;margin:8px 0;font-size:12px;line-height:1.45;color:var(--ink)}

  /* ================= F372 (LIST row 8.10, T6, entry 1107 check 33): A 14px FLOOR ON THE TUTOR'S PAGES =================
     Every text on the tutor's home was under 13px (10.6px on several lines). On the tutor's home and profile (#home) and on the
     tutor's face of the four student pages (#pages.tutorface, named by skillCellLayout after each render), and on the home's bar,
     no text is drawn under 14px: each element takes the larger of 14px and its parent's size, so a heading above it keeps its own and nothing
     falls below. The codes under a name (.namecode) are the one small grey kept. The Lead Educator's face is not touched. */
  #stubar:has(#homeme) *,#home *:not(h1, h2, h3, h1 *, h2 *, h3 *, .namecode),#pages.tutorface *:not(h1, h2, h3, h1 *, h2 *, h3 *, .namecode){font-size:max(14px, 1em) !important}
  #home :is(h1, h2, h3) *:not(.namecode),#pages.tutorface :is(h1, h2, h3) *:not(.namecode){font-size:14px !important}
  #home,#pages.tutorface{font-size:14px}
  #home .homever{font-weight:normal;color:var(--sub);margin-left:4px}
  /* F398 (the v213 walk's shortfall, F372 part 1): THE FLOOR REACHES THE BAR AND THE TABS of the tutor's student pages. The walk
     read the tabs at 12.5px, the group labels Plan and Teach at 10px, Saved at 10.6px, More at 11.4px and the viewing as tutor
     line at 11.5px while every page body held 14px. The bar (#stubar) and the tabs (#tabs) sit beside #pages in .wrap, so the
     rule is read off #pages.tutorface (skillCellLayout names it after every render); the Lead Educator's own seat never carries
     that class and its bar and tabs draw as they did. The codes under a name (.namecode) stay the one small grey. */
  .wrap:has(> #pages.tutorface) > :is(#stubar, #tabs) *:not(.namecode){font-size:max(14px, 1em) !important}
  .wrap:has(> #pages.tutorface) > :is(#stubar, #tabs){font-size:14px}
  /* F372 (LIST row 8.12, T14): the lesson about to be taught is marked Next lesson on its head */
  .nextmark{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;background:#1f2d3d;color:#fff;font-size:11.5px;font-weight:bold;letter-spacing:.2px}
  /* F477: Happened recently, happening next, the strip at the top of the day's lesson (ui/lesson-strip.js); each phrase wraps
     between words and never past the card, so it reads at 390 wide without cutting a word */
  .lstrip{margin:4px 0 10px;padding:6px 10px;border:1px solid var(--grid);border-left:4px solid #1f2d3d;border-radius:6px;background:#f7f9fb;font-size:12.5px;line-height:1.7;max-width:100%;box-sizing:border-box;overflow-wrap:normal;word-break:normal}
  .lstrip-half{display:block}
  .lstrip-title{margin-right:4px}
  .lstrip-item{display:inline;white-space:normal;font:inherit;color:inherit;background:#fff;border:1px solid var(--grid);border-radius:999px;padding:0 8px;margin:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  button.lstrip-item{cursor:pointer;text-decoration:underline dotted}

  /* ================= F72, THE TUTOR FACE VISUAL PASS (21 Sep 2026) =================
     Ten things Joshua read on the running v67 (the tutor face at phone width) at the screen, items 2 to 8, 11, 12 and
     16 of state/FINDINGS AT THE SCREEN - What Joshua Saw, 21 Sep 2026 v1.md. Every one of them is display and not one
     of them moves a stored shape. SIX OF THE TEN ARE HERE, in the stylesheet, because the fix is geometry and not
     markup; the other four are in ui/lesson-rows.js and ui/tab-lessons.js and say so where they are built.
     THE WHOLE BLOCK SITS ABOVE THE 600px QUERY ON PURPOSE, for the reason the .narrownote note above gives: a media
     query adds no specificity, so a rule of the same weight written after it would win at every width and the narrow
     layout would quietly stop being a layout. Everything below the query restates what it needs to. */

  /* F72 ITEM 1, the collapsed skill row's arrow. His answer on 2a is RESTYLE THE EXISTING ONE to match the subtopic
     header arrow, no second arrow, and it stays on the left where every other one lives. The glyph was already the
     subtopic header's glyph and was drawn in #888 with an inline rule, which is what made it read as punctuation. The
     ink and the size are the subtopic header's (.subtopiccard-head, 12.4px, the page's own ink), the 14px box is the
     one the fold already reserved so no word on that line moves, and the row's press target is the whole line as it
     was. */
  .foldarrow{display:inline-block;width:14px;color:var(--ink);font-size:12.4px;line-height:1}

  /* F72 ITEM 2, the record chip wraps INSIDE the State column. His words: "The chip is overlapping the column, it
     should wrap to fit." `record (opens read only)` is a .btn-inline, and .btn-inline is white-space:nowrap, so in a
     92px declared column the chip drew at its own intrinsic width and ran under the Note column and over the note box.
     A CHIP IS AS WIDE AS ITS COLUMN AND NO WIDER: it wraps here and nothing else changes. The words do not change, the
     job does not change and no column is widened, which is the rest of the finding. It is scoped to the State cell of
     a lesson row, so the same chip on the rail of a Progress row keeps the fixed width board A288 gave it. */
  td.statecell .btn-subparts{white-space:normal;max-width:100%;box-sizing:border-box;text-align:left;line-height:1.35}

  /* F72 ITEM 3, Descope and Remove row on ONE line. His words: "Descope and Remove Row should be side by side and only
     use one row. so they each have half width. this makes the row a little less tall." Ruling 438 put the two controls
     in the Note cell stacked at its full width; this halves the stack, Descope left and Remove row with its cross
     right, which is the order they are already printed in. Each keeps its own rule, its own hover and its own confirm.
     The cell loses the height of one control, which is what he asked of it. */
  .note-actions{grid-template-columns:repeat(2, minmax(0, 1fr));gap:6px}

  /* F72 ITEM 4, DFM and Prerequisites / Dependencies pinned to the BOTTOM of the Skill cell. His words: "Two buttons
     DFM and prereqs/deps should be at the bottom of the cell." A table cell is as tall as the tallest cell of its row
     and the rating grid beside it is the tall one, so the two buttons floated in the middle with a tall band of empty
     cell underneath. .skillcell (ui/tab-lessons.js) fills the cell's height and pushes .skill-actions to its foot, so
     the empty space falls between the chips above and the buttons below. THE TD IS STILL A TD: the flex box is the
     div inside it and not the cell, so table-layout:fixed and the declared colgroup widths of section AN item 4a are
     untouched and a rating still cannot move a column. The 2x2 geometry of the two buttons is untouched too. */
  td.skillname .skillcell{display:flex;flex-direction:column;height:100%;min-width:0}
  td.skillname .skillcell .skill-actions{margin-top:auto}

  /* F72 ITEM 5, the folded SCHOOL POSITION CHECK is ONE LINE. His words: "'Click the header to open it.' can be
     removed. 'folded, not skipped: the position was confirmed within 7 days, so the check collapses itself.' should
     live on hover of 'Confirmed 0 days ago'." The banner drew three lines where one would do: the header, the reason
     and a button repeating what the header already is.
     IT IS BUILT HERE AND NOT IN engine/position.js, WHICH THIS ROW'S OWNS LINE DOES NOT NAME. The card already prints
     both pieces in the right order and the whole of the finding is where they are shown, so the stylesheet is the
     right place for it and no file another row holds is touched. Board A783 (the folded position check is built in the stylesheet) records that.
     The card becomes the positioning parent, the reason leaves the flow and becomes a panel under the header, and the
     panel is shown while the pointer is on the `confirmed N days ago` chip and on nothing else, which is his hover to
     the word. The instruction half goes outright. The header itself is still the thing you press to open the card.
     THE SELECTOR NAMES THE FOLDED CASE AND NOTHING ELSE. The same card prints a .subnote in the same place when the
     school has no scheme of work on file at all ("No scheme of work is on file, so there is no position to point
     at"), which is a sentence a tutor must be able to read without hovering anything. The two are told apart by the
     header above them: the folded-and-fresh card is the only one whose h4 carries a .subnote chip, the `confirmed N
     days ago` the hover is ruled onto, so the rule reaches the reason through that chip and the no-scheme sentence
     stays exactly where it is, in the flow, unhovered. */
  .check-inlesson{position:relative}
  .check-inlesson > h4:has(.subnote) + .subnote{position:absolute;left:0;top:100%;z-index:40;display:none;margin:2px 0 0;
    max-width:520px;background:#fff;border:1px solid var(--grid);border-left:4px solid #7d9dc4;border-radius:6px;
    padding:7px 11px;font-size:11.4px;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.14)}
  .check-inlesson > h4:has(.subnote) + .subnote .explainer{display:none}
  .check-inlesson > h4:has(.subnote:hover) + .subnote{display:block}
  .check-inlesson > h4 .subnote{border-bottom:1px dotted #b09a55;cursor:help}

  /* F72 ITEM 6, an UNDATED Session box carries the amber itself. His answer on 7a is THE AMBER and nothing stronger,
     so the numbers here are .tag-warning's own: its border colour, its ink and its fill, on the box. His answer on 7b
     is that "date it as you teach it" does not survive anywhere, so the box says it by being marked and by nothing
     else. The marking is written from the lesson's own date at render (ui/tab-lessons.js) and drops away the moment a
     date is in it. .session-date carries the geometry the inline rule used to, except that its corner takes the 4px a
     button takes in this stylesheet rather than the 3px the inline rule had: BI3 proves every radius in the sheet is
     one of the four values of the house rule (999px a tag, 6px a card, 4px a button, 0 a square corner), and a rule
     moving out of an attribute and into the sheet is held to it. */
  input.session-date{font-size:11.6px;border:1px solid #d4d8dc;border-radius:4px;padding:2px 4px}
  input.session-date.undated{border:1px dashed #e2ab5f;background:#fde3d1;color:#9c4a00;font-weight:bold}
  /* F374 (LIST row 8.11; MAP section 10): THE ONE DATE PICKER (ui/common.js dayPickHtml). The day reads in the one style in
     .daypick-words and the browser's own date box lies over it unseen, so a press anywhere on it opens the calendar and the
     box still stores YYYY-MM-DD; "07/09/2026" is never drawn. The Session box's own marks (F72 item 6, the amber while it
     holds no date) are drawn on the words it now shows. */
  .daypick{position:relative;display:inline-block;vertical-align:middle;cursor:pointer}
  .daypick-words{display:inline-block;min-width:92px;font-size:12px;border:1px solid #d4d8dc;border-radius:4px;padding:2px 6px;background:#fff;color:#292929}
  .daypick-words::after{content:" \25BE";color:#6b6f76}
  .daypick > input[type="date"]{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;box-sizing:border-box}
  .daypick:has(> input.session-date.undated) .daypick-words{border:1px dashed #e2ab5f;background:#fde3d1;color:#9c4a00;font-weight:bold}
  .daypick:has(> input:focus-visible) .daypick-words{outline:2px solid #7d9dc4;outline-offset:1px}

  /* F72 ITEM 9, THE SECTION HEADERS. His ruling on 12a is the general rule: "Every section header carries its title
     alone and its comment moves to the hover on that title." His words for why: "These comments on the headers make
     the headers unreadable." On the Independent Work page the TESTS comment had wrapped over its own title.
     EVERY SECTION HEADER IN THE APP IS ONE CLASS, .sectionhead, and its comment is one class inside it, .explainer, so
     the rule is one rule and not a change in twelve page modules. The comment leaves the flow and becomes a panel
     under the header while the pointer is on the header, and the title is marked as something with a note under it.
     THE DELETE HALF OF HIS RULING IS NOT BUILT HERE: a comment is deleted outright only where the same words are
     clearly seen elsewhere, which on his own reading is the TESTS header alone, and those words live in
     ui/homework-tests.js, a file this row's OWNS line does not name. Board A784 (the TESTS header comment is a delete in another row's file) carries it. */
  .sectionhead{position:relative}
  .sectionhead > .explainer{position:absolute;left:0;top:100%;z-index:40;display:none;margin:3px 0 0;
    width:max-content;max-width:min(560px, 86vw);box-shadow:0 6px 18px rgba(0,0,0,.14)}
  .sectionhead:hover > .explainer{display:block}
  .sectionhead:has(> .explainer) b{border-bottom:1px dotted #b09a55;cursor:help}

  /* F72 ITEM 10, "How does this work?" beside the Today's Recap tasks title. The link is moved in
     ui/lesson-rows.js, from the foot of the box to the head; this is the head's own line, so the title and the link
     read as one and the capacity box keeps its corner. */
  .box-title-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}

  /* ================= F82 (the Lesson Sequence layout), rulings 549, 551 and 552: handoffs/NOTE FOR DESK - Lesson Sequence
     Layout, What Joshua Settled v2.md, items 2a to 2p, re-implemented here from the overlay reviews/MOCKUP - Lesson Rows v16
     overlay.js, which was a mockup. The markup is ui/tab-lessons.js and ui/lesson-rows.js; the Guidance box and the State
     cell are ui/common.js. Every radius is one of the house four (999px, 6px, 4px, 0). ================= */
  td.ratecell .rate-four{margin:0}
  table.lessontable tr.column-head th{white-space:nowrap}
  td.statecell .lesson-state .level-line, td.statecell .lesson-state .recall-line{min-height:19px}
  .level-ladder.small i{font-size:10px}
  .starter-box.shut .box-head{margin-bottom:0}
  /* 2m THE SUBTOPIC STRIP: slim, no gap above its skills, the whole line is the press. */
  .subtopiccard.subtopic-strip{border:0;border-top:2px solid #cfe0cf;border-radius:0;background:transparent;padding:2px 0 0;margin:6px 0 0}
  .subtopiccard.subtopic-strip .subtopiccard-head{margin:0;padding:1px 4px;font-size:12px;line-height:20px;background:#eef6ea;border-bottom:0;border-radius:0;cursor:pointer}
  .subtopiccard.subtopic-strip .scroll{margin:0;padding:0}
  .subtopiccard.subtopic-strip table.lessontable{margin:0}
  .subtopiccard.subtopic-strip table.lessontable th{padding:3px 8px;font-size:11.5px}
  .subtopiccard.subtopic-strip table.lessontable td{padding:5px 7px}
  table.lessontable td.skillname, table.lessontable td.statecell, table.lessontable td.notecell{height:1px}
  /* 2l THE SKILL CELL: the picker on its own line after Rated as:, DFM and Prereqs / Deps half and half at the foot. */
  td.skillname .rated-as{margin:3px 0 0;font-size:10.5px;line-height:1.5}
  td.skillname .rated-as .state-key{color:#6b6f76;margin-right:4px}
  td.skillname .rated-as .btn-picker{margin:0;display:inline-block;width:auto;min-width:0;max-width:none;overflow:visible;white-space:nowrap;vertical-align:baseline}
  td.skillname .skillcell .skill-actions{padding-top:8px}
  td.skillname .skill-actions .btn-cell{white-space:nowrap;padding-left:6px;padding-right:6px}
  /* 2e THE INSTRUCTION COLUMN: the pill, Guidance under it, then find the level first. */
  td.instrcell .instr-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  td.instrcell .instr-stack > *{margin-left:0}
  td.instrcell .tag-findlevel{margin:2px 0 0;padding:3px 8px;font-size:11px;line-height:1.2;white-space:normal}
  .tag-instruction-level-up{background:var(--lvup-ink)} .tag-instruction-probe{background:#9c640c}
  /* 2a THE RATING CELL: four columns shared by the level tiles with the stacked tick and by the four recall buttons. */
  td.ratecell .rate-label{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px;margin:0 0 3px}
  td.ratecell .rate-label .steplabel{grid-column:1 / span 3;margin:0}
  td.ratecell .rate-label.rec{margin-top:6px}
  td.ratecell .rate-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px;align-items:stretch}
  td.ratecell .rate-grid.rec > .rating{display:contents}
  td.ratecell .rate-grid > .rate-levels{grid-column:1 / span 3;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:6px;position:relative;flex-wrap:nowrap}
  td.ratecell .rate-grid .rating button{width:auto;min-width:0;margin:0;min-height:36px;padding:2px 3px;position:relative}
  td.ratecell .rate-grid.rec .rating button{min-height:42px}
  td.ratecell .rate-tick{display:flex;flex-direction:column;gap:3px}
  td.ratecell .rate-tick .btn{flex:1 1 0;margin:0;padding:0 4px;font-size:11px;min-height:0;line-height:1.1;white-space:nowrap;text-align:center}
  /* 2b and 2c: a small badge on the corner of the lit tile. */
  .corner-badge{position:absolute;top:-7px;right:-4px;background:#fff;color:#555;border:1px solid #9aa1a8;border-radius:999px;font-size:8.6px;line-height:12px;padding:0 4px;font-weight:bold;white-space:nowrap;z-index:2}
  /* 2d LEVEL MISSING: orange tiles and the badge on their top edge. */
  td.ratecell .rate-levels.level-missing .btn-level{border:2px solid #d6700a;background:#fdebd6}
  .level-missing-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#d6700a;color:#fff;font-weight:bold;font-size:9.5px;line-height:14px;padding:0 8px;border-radius:999px;white-space:nowrap;z-index:2}
  /* 2h 3. LEVEL-UP: a tinted band, 24px buttons, Guidance on its label line, no outline on any tile. */
  td.ratecell .rating-group.level-up-band{margin-top:6px;background:#fbf1f7;border:1px solid #efcfe2;border-radius:6px;padding:4px 5px 5px}
  td.ratecell .level-up-band .level-up-label{display:flex;gap:6px;align-items:center;margin:0 0 3px}
  td.ratecell .level-up-band .level-up-label .steplabel{color:var(--lvup-ink);width:auto}
  td.ratecell .level-up-band .level-up-label .guidance-word{margin:0}
  td.ratecell .level-up-band .rate-grid.rec .rating button{min-height:24px;height:24px;padding:1px 3px;font-size:11px;border-color:#d9a8c8}
  /* 2i and 2j THE STATE CELL: two lines, the ladder and its ?, and the foot half and half. */
  td.statecell .lesson-state{display:flex;flex-direction:column;height:100%;line-height:1.5}
  td.statecell .lesson-state .state-lines{font-size:11px;line-height:1.7;white-space:nowrap}
  td.statecell .lesson-state .state-line{display:flex;align-items:center}
  td.statecell .lesson-state .state-key{color:#6b6f76;flex:0 0 78px}
  td.statecell .lesson-state .state-value{font-weight:bold;color:#1b3348}
  td.statecell .lesson-state .state-value.fragile{color:var(--fragile)}
  td.statecell .lesson-state .state-value.unseen{color:#8a4500}
  td.statecell .lesson-state .state-value.implied{color:#2e6b5e}
  td.statecell .lesson-state .state-extra{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
  td.statecell .lesson-state .state-extra .tag-quiet{margin:0}
  .level-ladder{display:inline-flex;gap:2px;vertical-align:middle}
  .level-ladder i{font-style:normal;font-weight:bold;font-size:10.5px;line-height:15px;padding:0 3px;border-radius:4px;color:#9aa1a8;border:1px solid transparent}
  .level-ladder i.held{background:var(--secure);color:#fff}
  .level-ladder i.aim{background:transparent;border-color:#c2187a;color:#9aa1a8}
  .level-ladder i.held.aim{background:var(--secure);color:#fff;border-color:#c2187a;box-shadow:0 0 0 1px #c2187a}
  /* F129 THE QUESTIONS AREA under a skill row open in full (rulings 701 to 709, 712 to 719; drawing v19 card E1): one header
     line, then three boxes side by side in the exam style. The ladder is .level-ladder with the marks of Current level, a
     little larger so it can be pressed, the level showing underlined. The boxes keep their tops and their feet level. */
  table.lessontable tr.qa-row > td.qa-cell{padding:0 7px 8px;border-top:0}
  .questions-area{background:#fff;border:1px solid #e5e0c8;border-top:0;padding:8px 12px 10px;font-size:12px}
  .qa-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .qa-drop{display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;border:1px solid #9aa4ae;border-radius:4px;font-size:10px;cursor:pointer;background:#fff;user-select:none}
  .qa-title{font-size:12.5px;font-weight:bold}
  .qa-none-say{color:var(--sub);font-size:12px}
  .level-ladder.qa-ladder{gap:5px}
  .level-ladder.qa-ladder i{font-size:12.5px;line-height:19px;padding:0 6px;position:relative}
  .qa-head .level-ladder.qa-ladder i{cursor:pointer}
  .level-ladder.qa-ladder i.show:after{content:"";position:absolute;left:1px;right:1px;bottom:-6px;height:3px;border-radius:0;background:#202124}
  .qa-refresh{margin-left:4px}
  .qa-gap{color:var(--sub);font-size:12px;margin-top:8px}
  .qa-boxes{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;margin-top:10px;align-items:stretch}
  .qa-q{background:#fff;border:1px solid #cfd4d9;border-radius:4px;padding:10px 12px 8px;display:flex;flex-direction:column;color:#000;min-width:0}
  .qa-q.used{border-color:#7fb685;box-shadow:inset 4px 0 0 var(--good)}
  .qa-q.used-before{background:#f6faf6}
  .qa-q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
  .qa-step{font-size:11px;color:#4a5560;font-weight:bold}
  .qa-tick{width:17px;height:17px;border:1.5px solid #9aa4ae;border-radius:4px;background:#fff;color:#fff;font-size:12px;line-height:14px;text-align:center;cursor:pointer;font-weight:bold;user-select:none}
  .qa-q.used .qa-tick{background:var(--good);border-color:var(--good)}
  .qa-q.used-before .qa-tick{background:#a9cfab;border-color:#a9cfab}
  .qa-q-sub{font-size:10.5px;color:var(--sub);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qa-q-body{display:grid;grid-template-columns:26px minmax(0, 1fr);gap:4px;font-size:14px;line-height:1.55}
  .qa-q-n{font-weight:bold;font-size:14.5px}
  .qa-q-text{min-width:0;overflow-wrap:anywhere}
  .qa-q math, .qa-rate math{font-size:1.08em}
  .qa-fig{box-sizing:border-box;margin:10px 0 0 30px;border:1.5px dashed #9aa3ab;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#7a828a;font-size:13px;background:#fafbfc}
  .qa-fig.small{height:110px} .qa-fig.medium{height:170px} .qa-fig.large{height:240px}
  .qa-ansline{margin:16px 0 0 30px;display:flex;align-items:flex-end}
  .qa-ansline i{flex:1;border-bottom:1.5px dotted #333;height:14px}
  .qa-marks{text-align:right;font-weight:bold;font-size:13.5px;margin-top:4px}
  .qa-ma{margin:8px 0 0 30px;border-left:4px solid var(--good);padding-left:10px;color:#1b4d1e;font-size:13.5px;line-height:1.7}
  .qa-ma-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--good);font-weight:bold}
  .qa-ma-l.fin{font-weight:bold}
  .qa-tools{margin-top:auto;padding-top:10px;display:flex;gap:14px;justify-content:flex-end;align-items:center;flex-wrap:wrap;border-top:1px solid #eceff2}
  .qa-foot{margin-right:auto;display:inline-flex;gap:8px;align-items:center}
  .qa-link{color:var(--diag);cursor:pointer;font-size:12px}
  .qa-link.copied{color:var(--good)}
  .qa-tag{display:inline-block;font-size:10.5px;border-radius:999px;padding:1px 8px;border:1px solid #c6ccd2;color:#4a5560;background:#eef0f2}
  .qa-tag.again{background:var(--again);border-color:var(--again);color:#fff} .qa-tag.hard{background:var(--hard);border-color:var(--hard);color:#fff}
  .qa-tag.good{background:var(--good);border-color:var(--good);color:#fff} .qa-tag.easy{background:var(--easy);border-color:var(--easy);color:#fff}
  .modal .box.qa-rate{width:520px;max-width:92%;border-radius:6px;padding:16px 18px 14px}
  .qa-rate-title{margin:0 0 10px;font-size:15px}
  .qa-rate-q{background:#f6f8fa;border-radius:6px;padding:8px 10px;font-size:13.5px;line-height:1.5;margin-bottom:12px}
  .qa-rate-q .qa-fig{margin:8px 0 0}
  .qa-rate-lv{font-size:11.5px;color:#555;margin-bottom:8px}
  .qa-rate-four{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px}
  .qa-grade{min-height:46px;border:1px solid var(--grid);background:#fafafa;border-radius:4px;font-size:11px;cursor:pointer;color:var(--sub);font-weight:bold;padding:6px 4px 3px}
  .qa-grade.again:hover{background:var(--again);color:#fff} .qa-grade.hard:hover{background:var(--hard);color:#fff}
  .qa-grade.good:hover{background:var(--good);color:#fff} .qa-grade.easy:hover{background:var(--easy);color:#fff}
  .qa-rate-foot{display:flex;justify-content:space-between;margin-top:10px}
  @media (max-width: 760px){ .qa-boxes{grid-template-columns:minmax(0, 1fr)} }
  /* F130 (the question report): the report link, its box, the reported question faded with its line, and the Lead
     Educator's line on the list of requests; the drawing is reviews/MOCKUP - Resourcing, Questions And The Resource
     Table, 1 Oct 2026 v14.html. */
  .qa-link.qa-report-link{color:#8c1d40}
  .qa-report-box{margin-top:10px;border:1px solid #d9b8c4;background:#fdf5f8;border-radius:6px;padding:8px 10px;font-size:12px}
  .qa-report-h{font-size:12px;color:#8c1d40}
  .qa-report-reasons{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
  .qa-reason{border:1px solid #c9a3b1;background:#fff;color:#6b1a33;border-radius:999px;padding:2px 9px;font-size:11px;cursor:pointer;user-select:none}
  .qa-reason.on{background:#8c1d40;border-color:#8c1d40;color:#fff}
  .qa-report-note{box-sizing:border-box;width:100%;border:1px solid #d7c3ca;border-radius:4px;padding:4px 7px;font-size:12px;font-family:inherit}
  .qa-report-btns{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:7px}
  .qa-report-send{border:1px solid #8c1d40;background:#8c1d40;color:#fff;border-radius:4px;font-size:11.5px;padding:3px 10px;cursor:pointer;font-family:inherit}
  .qa-q.reported{background:#fbf7f0;border-color:#e2c58f}
  .qa-q.reported .qa-q-body, .qa-q.reported .qa-fig, .qa-q.reported .qa-ansline, .qa-q.reported .qa-marks, .qa-q.reported .qa-q-sub{opacity:.45}
  .qa-reported{margin-top:10px;font-size:12px;color:#8a5a00;background:#fff6e5;border:1px solid #e2c58f;border-radius:6px;padding:6px 9px}
  .tag-inbox-report{background:#f3dbe3;color:#8c1d40}
  .qr-line-head{color:#333}
  .qr-id{font-family:ui-monospace, Menlo, monospace;font-size:11.5px;color:#000}
  .qr-reason{display:inline-block;border-radius:999px;padding:0 7px;background:#f3dbe3;color:#8c1d40;font-size:11px}
  .qr-note{font-style:italic}
  .qr-by{color:var(--sub)}
  .qr-q{margin-top:4px;border:1px solid #e3e6ea;border-radius:4px;background:#fff;padding:6px 8px;color:#000;font-size:13px;line-height:1.5;max-width:560px}
  .qr-q .qa-fig{margin:8px 0 0}
  .qr-btns{display:flex;gap:4px;flex-wrap:wrap}
  .qr-export{margin:4px 0 12px;font-size:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  td.statecell .lesson-state .state-foot{margin-top:auto;padding-top:6px;border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:stretch}
  td.statecell .lesson-state .state-foot > *{margin:0;width:auto;max-width:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;font-size:10px;line-height:1.2;padding:3px 4px;border-radius:4px;min-height:28px}
  td.statecell .lesson-state .state-foot .state-foot-empty{border:0;padding:0}
  /* 2k THE NOTE CELL: the box fills its cell above Descope and Remove row. */
  td.notecell .note-stack{display:flex;flex-direction:column;height:100%;gap:6px}
  td.notecell .note-stack textarea.note-input{flex:1 1 auto;min-height:48px;height:auto;margin:0}
  td.notecell .note-stack .note-actions{margin-top:0}
  td.notecell .note-stack .note-actions .btn-cell{white-space:nowrap;padding-left:3px;padding-right:3px}
  /* 2o THE FOLDED ROW: the name, two chips of fixed width that line up, then the note. */
  table.lessontable td.fold-cell{padding:5px 7px;cursor:pointer}
  .fold-grid{display:grid;grid-template-columns:697px 120px minmax(0, 1fr);align-items:center;font-size:12px}
  .fold-grid > span{min-width:0;padding-right:10px}
  .fold-grid .fold-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fold-grid .fold-chips{display:flex;gap:4px;align-items:center}
  .fold-level{display:inline-block;width:56px;box-sizing:border-box;text-align:center;background:#4a5560;color:#fff;font-weight:bold;font-size:10.5px;line-height:17px;border:1px solid #4a5560;border-radius:4px}
  .fold-level.none{background:#f7f8f9;color:#8a939b;border-color:#c6ccd2;font-weight:normal}
  .fold-grade{display:inline-block;width:50px;box-sizing:border-box;text-align:center;color:#fff;font-weight:bold;font-size:10.5px;line-height:17px;border:1px solid transparent;border-radius:4px}
  .fold-grade.again{background:var(--again)} .fold-grade.hard{background:var(--hard)} .fold-grade.good{background:var(--good)} .fold-grade.easy{background:var(--easy)}
  /* F508: the locked past lesson's Rating cell, the folded row's level and grade chips in a row */
  .ratecell.locked .lock-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .ratecell.locked .fold-grade.none{background:#f7f8f9;color:#8a939b;border-color:#c6ccd2;font-weight:normal}
  .fold-grid .fold-note{display:flex;align-items:center;gap:6px;color:#555;font-size:11.4px}
  .fold-grid .fold-note .tag-quiet, .fold-grid .fold-note .tag-levelUp{margin-left:0;white-space:nowrap}
  .fold-grid .fold-notetext{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fold-grid .fold-press{margin-left:auto;color:#888;font-size:10.6px;white-space:nowrap}
  /* 2p TODAY'S RECAP: its own arrow, the count on the meter's line. */
  .starter-box .box-title-line{cursor:pointer}
  .starter-box .box-title .foldarrow{margin-right:4px}
  .starter-box .cap{display:flex;align-items:center;gap:8px}
  .starter-box .cap .cap-seg-count{margin:0;display:inline-block}
  /* 2f and 2g THE GUIDANCE WORD AND ITS BOX, over the page, never inside a cell. */
  .guidance-word{display:inline-block;margin-left:4px;font-size:10.2px;color:#6b6f76;text-decoration:underline dotted;text-underline-offset:2px;cursor:pointer}
  .guidance-word.box-help{border-bottom:0;font-size:11.5px}
  .guidance-word.guidance-mark{width:14px;height:14px;line-height:12px;text-align:center;border-radius:999px;border:1px solid #9aa1a8;font-size:9.5px;font-weight:bold;text-decoration:none;vertical-align:middle;margin-left:5px}
  .guidance-box{position:absolute;z-index:60;background:#fff;border:1px solid #c98ab4;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.22);padding:9px 28px 10px 12px;font-size:12px;line-height:1.55;color:#303438;width:340px;max-width:calc(100vw - 16px);box-sizing:border-box;white-space:normal;text-align:left;font-weight:normal}
  .guidance-box .guidance-title{display:block;color:#1b3348;margin-bottom:2px}
  .guidance-box .guidance-close{position:absolute;right:9px;top:5px;color:#999;font-size:13px;cursor:pointer}
  .guidance-box .guidance-body > div + div{margin-top:2px}
  .guidance-box .ladder-examples{border-collapse:collapse;margin-top:6px}
  .guidance-box .ladder-examples td{border:0;background:none;padding:3px 8px 3px 0;font-size:12px;vertical-align:middle}
  .guidance-box .ladder-key{font-weight:bold;padding:0 4px;border-radius:4px}
  .guidance-box .ladder-key.held{background:var(--secure);color:#fff}
  .guidance-box .ladder-key.aim{border:1px solid #c2187a;color:#9aa1a8}
  /* F127 (the Resources pop-out; rulings 690, 691 and 699; drawing reviews/MOCKUP - Resourcing, Questions And The Resource
     Table, 1 Oct 2026 v5.html, card 2): the button where DFM was, and the panel it pops out over the page, under it. No
     table and no lines between the rows (ruling 690): name as the link, the level pills, the very short line. */
  .btn-res{cursor:pointer;user-select:none}
  .btn-res.on{background:#eef4fb}
  /* the one-line skill cell's rail: Resources and the ghost that holds its place are one width, so every rail starts at one x */
  td.skillname.onerow .actions .btn-res, td.skillname.onerow .actions .btn-link.ghost{width:78px;min-width:78px;box-sizing:border-box;text-align:center}
  .res-pop{position:absolute;z-index:60;background:#fff;border:1px solid #c9ced4;border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,.16);padding:6px 14px;width:470px;max-width:calc(100vw - 16px);box-sizing:border-box;text-align:left;font-weight:normal;white-space:normal}
  .res-pop .res-line{display:grid;grid-template-columns:minmax(110px,170px) minmax(96px,130px) minmax(0,1fr);align-items:baseline;gap:4px;padding:6px 0;border:0}
  .res-pop a.res-name{color:var(--diag);font-weight:bold;text-decoration:none;font-size:14px;cursor:pointer}
  .res-pop a.res-name:after{content:" \2197";font-weight:normal;font-size:12px}
  .res-pop a.res-name:hover{text-decoration:underline}
  .res-pop .res-levels{white-space:nowrap}
  .res-pop .res-levels .tag-level{font-size:11.5px;padding:2px 9px;margin-left:0;margin-right:3px}
  .res-pop .res-one{color:var(--sub);font-size:12px}

  @media (max-width: 600px){
    /* 1. THE WIDTH BACK. 124px of the 390 was padding, four boxes deep (body 16, .sheet 22, .section-body 14,
       .subtopiccard 10, each side), which is what left the row 260px wide. Trimmed to 56px, so the stacked row has
       328px to draw in. The desk widths are untouched. */
    body{padding:14px 8px 40px}
    .sheet{padding:14px 8px 20px}
    .section-body{padding:10px 6px}
    .subtopiccard{padding:8px 6px}

    /* 2. THE LESSON TABLE BECOMES A STACK OF ROWS. table-layout:fixed and the colgroup are what pin the 917px, so the
       table, its rows and its cells stop being a table at all under this width and every declared column width falls
       away with them. The header row goes with the columns it labelled: with one cell under another the label is the
       control beside it, and a five-cell header above a stack labels nothing. */
    table.lessontable{display:block;width:100%}
    table.lessontable tbody{display:block;width:100%}
    table.lessontable tr.column-head{display:none}   /* F82 item 2n: the header is printed once per lesson and names itself, so the first row of a table is no longer always a header */
    table.lessontable tr{display:flex;flex-direction:column;width:100%;box-sizing:border-box;
      border:1px solid var(--grid);border-radius:6px;margin:0 0 8px;padding:2px 0;background:#fff}
    table.lessontable td{display:block;width:auto;max-width:100%;box-sizing:border-box;padding:6px 8px}

    /* 3. HIS WORDS, AND THEY ARE THE WHOLE OF THIS RULE: the level buttons and the four grade buttons STACK UNDER THE
       SKILL NAME. In the document order the instruction cell sits between them, so the two cells are ordered here and
       the markup is not reshaped: skill name, the rating, then instruction, state and note under it. */
    table.lessontable td.skillname{order:1}
    table.lessontable td.ratecell{order:2;border-top:1px dotted var(--grid)}
    table.lessontable td.instrcell{order:3}
    table.lessontable td.statecell{order:4}
    table.lessontable td.notecell{order:5}
    /* the instruction and the state read as one line each rather than a squeezed column */
    table.lessontable td.tight{font-size:11.4px}

    /* 4. THE CONTROLS AT THIS WIDTH. The two chips in the skill cell go one above the other rather than two across a
       117px half; the rating tiles already wrap (.rating-line is flex-wrap) and now have the room to; the note box
       stops being a 110px empty rectangle in the middle of every row. */
    .skill-actions{grid-template-columns:1fr}
    .note-actions{grid-template-columns:1fr}
    td.notecell{padding:6px 8px}
    textarea.note-input{min-height:56px}
    /* the starter's chips are already one column under 1000px. The subtopic card head bleeds to the card's edge with a
       negative margin that names the card's own padding, so it is restated here against the padding above. */
    .subtopiccard-head{margin:-8px -6px 6px;padding:7px 6px}

    /* 5. THE LAPTOP NOTE, half (b) of ruling 499. It is printed by renderLessons() on every width and shown only here,
       because a note telling a tutor to use a laptop is noise on the laptop it is asking for. */
    .narrownote{display:block}

    /* 6. F82 (the Lesson Sequence layout): phone width is out of its scope (4a of the note), so the new shapes only keep
       the floor this block already holds. The folded row's fixed columns wrap, and the four-column rating grid shares
       what width there is. */
    .fold-grid{display:flex;flex-wrap:wrap;gap:4px 0}
    .fold-grid .fold-name{flex:1 1 100%}
    .fold-grid .fold-note{flex:1 1 100%}
    td.ratecell .rate-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
    td.ratecell .rate-grid > .rate-levels{grid-column:1 / -1}
    td.ratecell .rate-tick{grid-column:1 / -1;flex-direction:row}
    td.ratecell .rate-tick .btn{white-space:normal;min-height:26px}
    td.ratecell .rate-grid .rating button{overflow:hidden;min-width:0}
    td.statecell .lesson-state .state-lines{white-space:normal}
    td.statecell .lesson-state .state-line{flex-wrap:wrap}
  }
  /* F85 (rulings 572 to 577): the private boxes, the Lead Educator face, the new student card and the first name card.
     F351 (LIST row 5.1, his ruling of 16 Oct 2026): ONE INPUT STYLE, so a private box is a plain .input with no slate fill
     and no stripe, and the line before its value is on the page is plain words, never a grey cell. */
  .priv-none{display:inline-flex;align-items:center;gap:5px;color:var(--muted,#64748b);font-size:12px}
  .lock{display:inline-block;width:11px;height:13px;vertical-align:-2px;margin-right:4px}
  .lock svg{display:block;width:100%;height:100%}
  /* F119 (ruling 635): a plain slate lock beside the label, no pill, no circle and no word; its hover carries the words.
     F351: the words are Never shared with the tutor, on hover (the title) and on a tap (.says, the same words under it) */
  .tag-priv{position:relative;display:inline-flex;align-items:center;margin-left:5px;vertical-align:-1px;cursor:help;outline-offset:2px}
  .tag-priv .lock{width:11px;height:13px;margin-right:0;color:var(--vault)}
  .tag-priv.says::after{content:attr(data-says);position:absolute;left:0;top:calc(100% + 4px);white-space:nowrap;background:#1e293b;color:#fff;font-size:11px;font-weight:normal;letter-spacing:0;text-transform:none;line-height:1.3;padding:3px 7px;border-radius:4px;z-index:40;pointer-events:none}
  .privbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
  tr.privrow td.label{color:var(--vault-ink)}
  /* ============================================================ THE LEAD EDUCATOR FACE: Students, Leads, Tutors, Access log
     F85 (rulings 572 to 577) made it; F161 (the layout and spacing pass, his words of 5 Oct 2026: "clarity and simplification
     are key, functionality must be intuitive and clearly laid out") gives its four views ONE LOOK, every change written in
     reviews/REVIEW - The Layout And Spacing Pass v1.md. Space comes from --sp1 to --sp5 and type from --fs-xs to --fs-xl only.
     THE SHAPES: a list is a table with lines between rows and no lines between columns, so the only bordered thing in a row
     is a choice (the hint under Students says so); a card is a white frame with a grey head band; a form card is the same
     frame with a green edge on the left (a red edge when it removes something); a pill is 12 point on a 999px radius; a
     control in the bar is 32 pixels high and one in a row 30; and the page's own tools sit on the first line of the bar,
     each view's tools on the line under it. */
  #face.sheet{border-radius:6px;padding:var(--sp5) var(--sp5) var(--sp4)}   /* no tab row above the face, so every corner is round */
  #face{font-size:var(--fs-md)}
  /* THE BAR: line one, the four views on the left and the page's tool (export the register; F351: hide private details removed) on the
     right; line two, the open view's own tools (+ new, search, filters). The order is the stylesheet's, so no view's markup
     carries it, and a tool a later row adds to a view lands on line two by itself. */
  #face .toolbar{display:flex;gap:var(--sp2);align-items:center;flex-wrap:wrap;margin:0 0 var(--sp4)}
  #face > .toolbar:first-child{row-gap:0}
  #face > .toolbar:first-child > *{order:4;margin-top:var(--sp3)}
  #face > .toolbar:first-child > .seg{order:1;margin-top:0;margin-right:var(--sp2)}
  #face > .toolbar:first-child > #faceexport{order:2;margin-top:0}
  #face > .toolbar:first-child::before{content:"";order:3;flex-basis:100%;height:0}
  #face .toolbar .btn,#face .toolbar .btn-push,#face .toolbar .input.reg,#face .toolbar .input{min-height:32px;font-size:var(--fs-md);padding:0 var(--sp3);border-radius:4px;box-sizing:border-box}
  #face .toolbar select.input.reg{padding:0 var(--sp2)}
  #face .toolbar input[type=date].input.reg{padding:0 var(--sp2)}
  #face .toolbar label{display:inline-flex;align-items:center;font-size:var(--fs-md);color:var(--ink-2);cursor:pointer;white-space:pre}
  #face .toolbar label input[type=checkbox]{width:15px;height:15px;margin:0 6px 0 0}
  #face .toolbar > .skill-code{font-size:var(--fs-sm);color:var(--sub);line-height:1.4}
  /* the view switch is the page's navigation: navy when on; the Leads filter under it is the lighter, secondary kind */
  #face .seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:#fff}
  #face .seg button{border:none;box-shadow:inset 1px 0 0 var(--line);background:#fff;min-height:32px;padding:0 var(--sp4);font:inherit;font-size:var(--fs-md);cursor:pointer;color:var(--ink-2)}
  #face .seg button:first-child{box-shadow:none}
  #face .seg button:hover{background:var(--head)}
  #face .seg button.on{background:var(--navy);color:#fff;font-weight:bold}
  #face .seg button:focus-visible{outline-offset:-3px}
  /* THE LIST: one table shape on all four views. A frame round it, a grey head band, a line under each row, no column lines. */
  #face table.list,.tutorblock table.list{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--fs-md);border:1px solid var(--line);border-radius:6px;background:#fff}
  #face table.list th{text-align:left;background:var(--head);border:0;border-bottom:1px solid var(--line-strong);padding:var(--sp2) var(--sp3);font-size:var(--fs-sm);font-weight:bold;color:var(--ink-2);white-space:nowrap;vertical-align:bottom}
  #face table.list tr:first-child > th:first-child{border-top-left-radius:6px}
  #face table.list tr:first-child > th:last-child{border-top-right-radius:6px}
  #face table.list td{border:0;border-bottom:1px solid var(--line);padding:var(--sp2) var(--sp3);vertical-align:middle;line-height:1.35}
  @media (max-width:1359px){ #face table.list th,#face table.list td{padding-left:var(--sp2);padding-right:var(--sp2)} }
  #face table.list tr:last-child > td{border-bottom:0}
  #face .card table.list{border:0;border-radius:0}   /* a list inside a card: the card is the frame */
  /* F289 (D29): the Lead Educator's own lists on the student pages (Checklist, Consultation, the Event log) take the face's
     rule, a line between rows only; the grid stays where columns are compared (SOW, Progress) */
  table.rowlist th,table.rowlist td{border-left:0;border-right:0;border-top:0;border-bottom:1px solid var(--line)}
  table.rowlist th{border-bottom-color:var(--line-strong)}
  #face tr.click{cursor:pointer} #face tr.click:hover td{background:#f5f8fb} #face tr.fresh td{background:#eef6ea}
  #face a.code,#face .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-sm);background:#eef0f2;border-radius:4px;padding:2px 6px;color:inherit;text-decoration:none;white-space:nowrap}
  #face a.facename{color:inherit;font-weight:bold;text-decoration:none}
  #face a.facename:hover,#face a.code:hover{text-decoration:underline}
  /* the grey line under a list: what a click does, and where the rest is */
  #face .listfoot{margin:var(--sp2) 0 0;font-size:var(--fs-sm);color:var(--sub);line-height:1.5}
  /* THE PILL: one size and weight for every pill on the face (Where they are, report owed, due for removal, the client, a
     lead's stage); the colour alone says what it is */
  .chip{display:inline-block;font-size:var(--fs-xs);font-weight:bold;line-height:16px;border-radius:999px;padding:2px 9px;background:#eef0f2;color:#3a4148;border:1px solid #d4d8dc;white-space:nowrap;vertical-align:middle}
  .chip-new{background:#fff8e1;color:#7a6200;border-color:#e6c65c}
  .chip-missing{background:#fdecea;color:#8c1d40;border-color:#e6a0a0}
  /* named colours for the pills a row draws with its own inline colour today (F89, F88), and for the ones the night's rows
     add (F157's payment pill, F159's stale), so each can drop its inline style for a class when it lands */
  .chip-owed,.chip-stale{background:#fdecea;color:#8c1d40;border-color:#e6a0a0}
  .chip-due,.chip-pay-none{background:#fff4e0;color:#7a4a00;border-color:#e6c07a}
  .chip-paused,.chip-pay-sent{background:#eef3fb;color:#2f4a6e;border-color:#b9c9e0}
  .chip-left{color:#6b6f76}
  .chip-pay-received{background:#f3eefb;color:#4a2f6e;border-color:#c9b9e0}
  .chip-pay-paid{background:#eaf6ec;color:#1f5e2c;border-color:#9fd0a8}
  .chip-done{background:#eaf6ec;color:#1f5e2c;border-color:#9fd0a8}   /* F276 (V23): a sent follow-up wears the green of paid, not the yellow of NEW */
  #face .facepill{margin:2px 4px 2px 0}
  #face .facepill::first-letter{text-transform:uppercase}   /* F290 (D28): every Where they are pill reads in sentence case (report owed, paid 7 Oct, paused until...), the words as stored */
  /* the client column: PRIVATE is the pill that matters, PRINCEPS reads as plain grey words */
  #face td.faceclient .client-tag{font-size:var(--fs-xs);line-height:16px;padding:2px 9px;margin:0;white-space:nowrap}
  #face td.faceclient .client-tag[data-client="PRINCEPS"]{background:none;border-color:transparent;color:var(--sub);font-size:var(--fs-sm);font-weight:normal;padding-left:0}
  /* THE FORM CARD: + new student consultation, status, remove, add a tutor, a lead's cards (and the night's: payment, the
     tutor register's settings, the move). A white frame with a green edge; label column, then the box; the buttons under */
  .newcard{border:1px solid var(--line-strong);border-left:4px solid var(--btn-go);border-radius:6px;background:#fff;padding:var(--sp4);margin:0 0 var(--sp4);box-shadow:0 1px 3px rgba(27,51,72,.06)}
  .newcard h3{margin:0 0 var(--sp3);font-size:var(--fs-lg);color:var(--ink)}
  /* F370 (LIST row 8.8, W19): a box opened from a row's menu stands in a line of its own straight under that row */
  #face #facelist tr.faceboxrow > td{padding:0 0 var(--sp3);background:#fff}
  #face #facelist tr.faceboxrow .newcard{margin:var(--sp1) 0 0}
  /* F370 (LIST rows 12.3 and 12.4): a left student's locked choices and their reason; a left tutor's dated line */
  #face .regpick.faceleftlock{border-style:solid;border-color:var(--line);background:#f3f4f6;color:#6b6f76;font-weight:normal;cursor:not-allowed}
  #face .regpick.faceleftlock::after{content:none}
  #face .faceleftwhy{display:block;font-size:var(--fs-xs);color:var(--sub);margin-top:2px;white-space:normal;max-width:180px}
  .tutorleftline{color:#6b6f76;margin:0 0 var(--sp2)}
  .newcard h3 .skill-code{font-size:var(--fs-sm);font-weight:normal;margin-left:var(--sp1)}
  .newgrid{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px var(--sp4);align-items:center;font-size:var(--fs-md)}
  .newgrid > label{font-size:var(--fs-sm);font-weight:bold;color:var(--ink-2)}
  .newgrid > label.skill-code{font-weight:normal;font-size:var(--fs-md);color:var(--ink-2)}   /* a tick box's own words, beside its label */
  .newcard .input,.newcard .input.reg,.newcard select{min-height:32px;font-size:var(--fs-md);box-sizing:border-box}
  .newcard .btn,.newcard .btn-push{min-height:32px;font-size:var(--fs-md);padding:0 var(--sp4)}
  .newcard .hint{font-size:var(--fs-sm);color:var(--sub);margin-top:var(--sp3);line-height:1.5}
  /* a card that removes something says so in red, its button too: erasing is never the green of going on */
  #removecard,.newcard.leadcard[data-leadcard="remove"]{border-left-color:var(--btn-withdraw)}
  #removecard #rmgo,.newcard.leadcard[data-leadcard="remove"] #leadsave{background:var(--btn-withdraw)}
  .input.reg{background:#fff;border:1px solid #b9c3cc;border-radius:4px;font:inherit;font-size:12.5px;padding:4px 6px}
  /* THE MESSAGE LINES: what was done is one green line, what went wrong one red line, each the width of the page */
  .facemsg{color:#2f5c29;font-weight:bold;margin:6px 0}
  #face .facemsg{display:block;background:#eef7ec;border:1px solid #bfdcb8;color:#245c1f;border-radius:6px;padding:var(--sp2) var(--sp3);margin:0 0 var(--sp3);font-size:var(--fs-md);line-height:1.45}
  #face div.tag-warning{display:block;margin:0 0 var(--sp3);padding:var(--sp2) var(--sp3);font-size:var(--fs-md);font-weight:bold;line-height:1.45;border-radius:6px}
  #face > .skill-code{display:block;font-size:var(--fs-sm);margin:0 0 var(--sp3)}
  .linkbox{background:var(--head);border:1px solid var(--line);border-radius:6px;padding:var(--sp3);margin:0 0 var(--sp3)}
  .linkbox .input.reg{margin-top:var(--sp2);min-height:32px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-sm)}
  /* THE CARD on the face: a white frame, a grey head band with the name on the left and its tools on the right, the body under */
  .card-body{padding:10px 12px}
  #face .card{padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;margin:0 0 var(--sp4)}
  #face .card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp2);flex-wrap:wrap;margin:0;padding:10px var(--sp4);background:var(--head);border-bottom:1px solid var(--line);border-radius:6px 6px 0 0;font-size:var(--fs-md);font-weight:normal;color:var(--ink);letter-spacing:0}
  #face .card-head b{font-size:14px}
  #face .card-head .skill-code{font-size:var(--fs-sm);margin:0 0 0 var(--sp1)}
  #face .card-body{padding:var(--sp3) var(--sp4)}
  /* F451: THE ONE TABBED PANEL in Follow-ups due's place: a row of tabs, each with its count, wrapping at a narrow width and never
     cut, standing on the open card; one pane open; each card drawn whole inside its pane, in the face's one card frame */
  #face .facetasks{margin:0 0 var(--sp4)}
  #face .facetabs{display:flex;flex-wrap:wrap;gap:var(--sp1);padding:0 var(--sp2);position:relative;z-index:1}
  #face .facetab{border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:#fff;min-height:32px;padding:0 var(--sp3);font:inherit;font-size:var(--fs-md);color:var(--ink-2);cursor:pointer;white-space:nowrap;margin-bottom:-1px}
  #face .facetab:hover{background:var(--head)}
  #face .facetab.on{background:var(--head);color:var(--ink);font-weight:bold;border-bottom:1px solid var(--head)}
  #face .facetab[data-task-urgent="1"]:not(.on){color:#b3261e}
  #face .facepane > .card{margin:0}
  #face .facepane > .card + .card{margin-top:var(--sp3)}
  #face .facepane > div:empty{display:none}
  /* F276 (V24): THE FOLLOW-UPS CARD on Block Overview (tutor) is the face's card: the grey head band over a body, and each
     follow-up one line, its tick at the right end of it */
  #fucard{padding:0;border-color:var(--line)}
  #fucard > .card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp2);flex-wrap:wrap;margin:0;padding:10px var(--sp4);background:var(--head);border-bottom:1px solid var(--line);border-radius:6px 6px 0 0;font-size:var(--fs-md);font-weight:normal;color:var(--ink);letter-spacing:0}
  #fucard > .card-head b{font-size:14px}
  #fucard > .card-body{padding:var(--sp3) var(--sp4)}
  #fucard .fuline{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp3)}
  #fucard .fuline > .futick{flex:0 0 auto;white-space:nowrap;font-size:var(--fs-sm);margin:0}
  .tutorblock{margin:0 0 var(--sp4)} .tutorblock .card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp2)}
  .tutorblock .card-head > span:last-child{display:inline-flex;align-items:center;gap:var(--sp2);font-size:var(--fs-sm)}
  .tutorblock .card-head .btn{min-height:28px;font-size:var(--fs-sm)}
  #face .tutorblock table.list td{padding:var(--sp2) var(--sp2)}
  #face .tutorblock table.list td[style*="text-align:right"]{white-space:nowrap}
  #face .tutorblock table.list .btn,#face .tutorblock table.list select{min-height:28px;font-size:var(--fs-sm);vertical-align:middle}
  #face .tutorblock .card-body > select{min-height:28px;font-size:var(--fs-sm)}
  /* WHO WAITS FOR A TUTOR: a heading line, then each student and their pair dropdown, side by side and wrapping whole */
  .waiting{display:inline-flex;align-items:center;gap:var(--sp2);margin:0}
  #facewaiting{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp5);padding:var(--sp3) var(--sp4);margin:0 0 var(--sp4);font-size:var(--fs-md);line-height:1.4;border-radius:6px}
  #facewaiting > b{flex-basis:100%;font-size:var(--fs-md)}
  #facewaiting select{min-height:28px;font-size:var(--fs-sm)}
  .regbar{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;flex-basis:100%;background:#f7f8f9;border:1px solid var(--grid);border-radius:4px;padding:6px 8px}
  .regnew{margin-top:6px}
  .fncard-back{position:fixed;inset:0;background:rgba(27,51,72,.35);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:50}
  .fncard{max-width:520px;width:calc(100% - 32px);box-shadow:0 6px 24px rgba(0,0,0,.18)}
  @media (max-width:820px){.newgrid{grid-template-columns:1fr}}
  /* F107 (the Students list as a to-do list; rulings 620, 623, 624, 630 and 632). ONE HEADER LINE on the face, sign out on
     the right; the version at the foot; the one wait line with its moving bar; the pill a link; Client hidden while every
     student is PRINCEPS; and below about 900 pixels no code or year wraps, Client hides and Course shortens. F161: a row's
     status, data and remove sit under its one small menu at every width (they were three buttons on every row at 1280), as
     the Leads view's rest sits under its menu; the menu is the row's last thing, at the right of Where they are. */
  .facehead{display:flex;align-items:center;gap:var(--sp3);flex:1 1 100%;min-width:0}
  .facehead .stuname{font-size:var(--fs-xl)}
  .facehead #facewho{font-size:var(--fs-sm);color:var(--sub);margin:0}
  .facehead .btn{min-height:30px;font-size:var(--fs-sm);padding:0 var(--sp3)}
  .facehead #facesignout{margin-left:auto}
  .facehead #faceconnect{margin-left:auto;display:inline-flex;align-items:center;text-decoration:none}   /* F149's connect Drive, beside sign out */
  .facehead #faceconnect + #facesignout{margin-left:0}
  .facefoot{margin-top:var(--sp5);padding-top:var(--sp3);border-top:1px solid var(--line);font-size:var(--fs-sm);color:#9aa1a8}
  .facefoot a{color:#6b6f76} .facefoot .note{margin-top:8px;color:#3a4148;font-size:12px}
  .facewait{display:flex;flex-direction:column;gap:10px;max-width:420px;margin:28px auto;font-size:14px;color:#3a4148}
  .facewaitbar{display:block;position:relative;height:4px;border-radius:999px;background:#e6e9ec;overflow:hidden}
  .facewaitbar i{position:absolute;top:0;bottom:0;left:0;width:35%;border-radius:999px;background:#1b3348;animation:facewaitmove 1.1s ease-in-out infinite}
  @keyframes facewaitmove{0%{left:-35%}100%{left:100%}}
  #face a.facepill{text-decoration:none;cursor:pointer} #face a.facepill:hover{filter:brightness(.96);text-decoration:underline}
  #face table.noclient .faceclient{display:none}
  #face table.noroom .faceroom{display:none}   /* F345: the Lessonspace column hidden while no student has a link */
  #face td.facecode,#face td.faceyear{white-space:nowrap}
  #facetable{overflow-x:auto}
  .facerowbtns{display:inline-block;float:right;margin:0 0 0 var(--sp2);text-align:right}
  .facerowbtns .facemenubtn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;padding:0 var(--sp2);font-size:15px;line-height:1;color:var(--ink-2)}
  .facerowbtns .facerowmenu{display:none}
  .facerowbtns.open .facerowmenu{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp1);margin-top:var(--sp1)}
  .facerowbtns.open .facerowmenu .btn{min-height:28px;font-size:var(--fs-sm);text-align:left;white-space:nowrap}
  .facerowbtns.open .facemenubtn{background:var(--head);border-color:var(--line-strong)}
  .facerowbtns .facerowmenu .faceremove{color:var(--btn-withdraw)}   /* remove reads red, as remove does in the Leads view's menu */
  @media (max-width:899px){
    #face table.list .faceclient{display:none}
    #face td.facecourse{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  }
  /* F117 (the confirm box and the register controls; rulings 640, 641, 643, 644, 646 and 648), drawn as the pictures in
     reviews/pictures/COMBINED - James Round One/ (chg_m_register, chg_m_confirm_tutor, chg_m_confirm_course). A CHANGEABLE
     VALUE is a small bordered button with a down arrow, blue on hover, dashed amber with a plus when empty; its one list
     opens under it; a green tick and saved stand beside it after Yes, and a refusal is one red line under it. THE CONFIRM
     BOX is one box over the dimmed page: title, who, From struck through and To in bold, what follows, Cancel and a green Yes. */
  .regctl{position:relative;display:inline-block;max-width:100%;vertical-align:middle}
  .regpick{display:inline-block;max-width:100%;box-sizing:border-box;border:1px solid #b8c0cc;background:#fff;border-radius:4px;padding:4px 9px;font:inherit;font-size:12.5px;color:#1d2330;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;box-shadow:0 1px 0 rgba(0,0,0,.04)}
  .regpick::after{content:"\25BE";color:#5a6372;font-size:11px;margin-left:7px}
  .regpick:hover,.regctl.open .regpick{border-color:#2f5fb3;background:#f1f5fd}
  .regpick.empty{border:1px dashed #c48a1a;background:#fff8ea;color:#7a4a00;font-weight:bold}
  .regpick.empty:hover,.regctl.open .regpick.empty{border-color:#2f5fb3;background:#fff3dc}
  .regpick:disabled{opacity:.6;cursor:default}
  .regmenu{position:absolute;left:0;top:100%;margin-top:4px;background:#fff;border:1px solid #b8c0cc;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.15);min-width:230px;max-height:340px;overflow-y:auto;z-index:35;padding:2px 0;text-align:left;font-size:12.5px;font-weight:normal;white-space:nowrap}
  .regmenu .reggrp{font-size:10.5px;letter-spacing:.05em;color:#7a8190;padding:7px 12px 3px}
  .regmenu .regsep{border-top:1px solid #e3e6ea;margin:2px 0}
  .regmenu .regopt{display:block;width:100%;text-align:left;border:none;background:none;padding:6px 12px;font:inherit;font-size:12.5px;color:#1d2330;cursor:pointer;white-space:nowrap}
  .regmenu .regopt:hover{background:#f1f5fd}
  .regmenu .regopt.on{background:#e8effc;font-weight:bold}
  .regmenu .regopt.warn{color:#8c1d40}
  .regmenu .regsub{color:#7a8190;font-size:11.5px;font-weight:normal}
  /* F355: THE ONE TUTOR PICKER. Each tutor's name on its line, their DBS state, free times and year groups on the line under it
     (NO DBS in red, waiting in amber, checked in green), the left tutors greyed under show left, the list scrolling at its row. */
  .regmenu.tpickmenu{min-width:260px;max-width:min(440px,calc(100vw - 16px))}
  .regmenu .regopt.tpickopt{white-space:normal;padding:6px 12px 7px}
  .regmenu .regopt.tpickopt.left{color:#5a6372}
  .regmenu .regopt.regleft{color:#2f5fb3;font-size:12px}
  .regmenu .regsub.regfacts{display:block;white-space:normal;line-height:1.35;margin-top:1px}
  .regmenu .regsub.regdbs{font-size:inherit}
  .regmenu .regsub.regdbs[data-dbs="none"]{color:#b3261e;font-weight:bold}
  .regmenu .regsub.regdbs[data-dbs="waiting"]{color:#8a5a00}
  .regmenu .regsub.regdbs[data-dbs="checked"]{color:#2e7d32}
  .regmenu .regnone{padding:6px 12px;color:#7a8190;font-size:12px}
  /* F123 (the course picker, course then tier), rulings 676 to 683, drawn as reviews/MOCKUP - Course Picker, Course Then
     Tier, 1 Oct 2026 v4.html: one narrow column that scrolls, the four stages as slate bands with white letters, one name
     per course with a green dot when it fits the student's year, and the tiers as small buttons under the course pressed.
     The register's menu (.regmenu.cpmenu) and the chooser's panel (.cppanel) draw the same list (coursePickList). */
  .regmenu.cpmenu{width:300px;max-width:calc(100vw - 16px);max-height:none;overflow:visible;padding:0;white-space:normal}
  .cppanel{display:block;width:300px;max-width:100%;margin-top:6px;background:#fff;border:1px solid #b8c0cc;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.08);text-align:left;font-size:12.5px;font-weight:normal;white-space:normal}
  .cplist{position:relative;max-height:300px;overflow-y:auto;padding:0 0 4px}
  .cpband{position:sticky;top:0;z-index:1;background:#41505c;color:#fff;font-size:10.5px;font-weight:bold;letter-spacing:.07em;padding:6px 12px;margin:6px 0 2px}
  .cpband:first-child{margin-top:0}
  .cplist button.cpfam{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;box-sizing:border-box;text-align:left;border:none;background:none;padding:6px 12px;font:inherit;font-size:12.5px;color:#1d2330;cursor:pointer;white-space:normal}
  .cplist button.cpfam:hover,.cplist button.cpfam.open{background:#f1f5fd}
  .cplist button.cpfam.on{background:#e8effc;font-weight:bold}
  .cplist button.cpfam[aria-expanded]::after{content:"\25B8";color:#7a8190;font-size:11px}
  .cplist button.cpfam[aria-expanded="true"]::after{content:"\25BE"}
  .cplist .cpcode{color:#7a8190;font-size:11px;font-weight:normal}
  .cplist .cpdot{display:inline-block;width:7px;height:7px;border-radius:999px;background:#2e7d32;margin-left:6px;vertical-align:1px}
  .cplist .cpnow{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid #9aa3b1;border-radius:999px;color:#5a6372;font-size:10px;font-weight:normal;vertical-align:1px}
  .cplist .cptiers{display:flex;flex-wrap:wrap;gap:6px;padding:2px 12px 8px 26px}
  .cplist .cptiers[hidden]{display:none}
  .cplist button.cptier{display:inline-block;width:auto;border:1px solid #2f5fb3;color:#2f5fb3;background:#fff;border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
  .cplist button.cptier:hover{background:#2f5fb3;color:#fff}
  .cplist button.cptier.on{background:#2f6b3a;border-color:#2f6b3a;color:#fff;font-weight:bold}
  .cpcount{font-size:11px;color:#7a8190;padding:6px 12px;border-top:1px solid #e3e6ea;white-space:normal}
  .regsaved{margin-left:6px;color:#2f6b3a;font-weight:bold;font-size:12px;white-space:nowrap}
  .regbusy{margin-left:6px;color:#6b6f76;font-size:11.5px}
  .regerr{color:#8c1d40;font-size:11.5px;margin-top:4px;white-space:normal;max-width:320px}
  .regroom{white-space:nowrap}
  a.regopen{display:inline-block;border:1px solid #2f6b3a;background:#2f6b3a;color:#fff;border-radius:4px;padding:3px 10px;font-size:12px;font-weight:bold;text-decoration:none}
  a.regopen::after{content:" \2197"}
  .regedit{border:1px solid #d0d5dd;border-radius:4px;padding:2px 7px;font:inherit;font-size:11.5px;color:#5a6372;background:#fff;margin-left:4px;cursor:pointer}
  .regaddlink{border:1px dashed #9aa3b1;border-radius:4px;padding:3px 9px;font:inherit;font-size:12px;color:#4a5260;background:#fff;cursor:pointer}
  .regroomedit{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;white-space:normal}
  .regroomedit .input{width:260px}
  .regsave{padding:5px 12px}
  .regroomhint{flex-basis:100%;font-size:11px;color:#6b6f76}
  .facepairnew{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .chgmodal .chgbox{padding:0;max-width:520px;border-radius:6px;overflow:hidden}
  .chgbox h4{margin:0;padding:16px 20px 4px;font-size:17px;color:#1d2330}
  .chgwho{padding:0 20px 10px;color:#4a5260;font-size:13px}
  .chgft{display:grid;grid-template-columns:60px minmax(0,1fr);gap:6px 10px;margin:4px 20px 12px;padding:10px 14px;background:#f6f7f9;border-radius:6px;font-size:13px;overflow-wrap:anywhere}
  .chgft b{color:#5a6372}
  .chgold{text-decoration:line-through;color:#7a8190}
  .chgnew{font-weight:bold;color:#1d2330}
  .chgnote{margin:0 20px 10px;font-size:12.5px;color:#4a5260}
  .chgquiet{color:#6b6f76}
  .chgbrk{margin:0 20px 12px;padding:10px 12px;background:#fff4e0;border:1px solid #e6c07a;border-radius:6px;font-size:12.5px;color:#5a3a00}
  .chgbtns{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid #e3e6ea;background:#fafbfc}
  /* F161: every control in a row is one height (28 pixels) and one type (12 point), so a row's choices, its button and its
     small menu line up; a choice's words wrap inside it only when the list has no room for them on one line (at 1024), and
     the year never wraps; the lists they open are unchanged */
  #face .regpick{font-size:var(--fs-sm);min-height:28px;padding:4px var(--sp2);line-height:1.3;white-space:normal}
  #face td.faceyear .regpick{white-space:nowrap}
  #face .regpick::after{margin-left:5px}
  #face a.regopen{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;font-size:var(--fs-sm);box-sizing:border-box;vertical-align:middle}
  #face .regedit,#face .regaddlink{min-height:28px;font-size:var(--fs-sm);padding:0 var(--sp2);vertical-align:middle}
  #face .regroomedit .input{min-height:28px}
  @media (max-width:1199px){
    #face .regpick{max-width:150px;line-height:1.25}
    /* at 1024 nothing in a row may hold the list wider than the page: a head, a pill and the Lessonspace cell wrap whole
       words onto a second line instead */
    #face table.list th{white-space:normal}
    #face .regroom{white-space:normal}
    #face table.list .chip,#face td.faceclient .client-tag,#face .leadpill{white-space:normal}
  }
  @media (max-width:899px){
    #face td.facecourse .regpick{max-width:100px;white-space:nowrap}
    #face td.facele .regpick,#face td.facetutor .regpick{max-width:112px}
    #face .regpick{padding:4px 6px}
    #face .regroom{white-space:normal}
    #face .regroom .regedit{margin:4px 0 0;display:block}
  }
  /* F168 (section FA12's three findings against F161's own rules). 1. From 1200 pixels a row's choice keeps its words on one
     line, so every Students row is one line at 1280 as F161 says; a Lead Educator's or a tutor's name longer than the choice
     can hold ends in an ellipsis (the choice's title carries it whole, as under 900) rather than push the list sideways.
     Between 900 and 1199 the course's choice is wide enough for its code, so a course breaks only at the space before its
     tier (two lines, not three); Where they are takes only the width of its widest pill, and F157's payment pill keeps to
     one line, so every choice keeps to two lines. 2. The tutor register's row buttons are F161's row control (28 pixels,
     12 point). 3. From 900 pixels F158's conversation line and its handed over line keep to one line in their cell. */
  @media (min-width:1200px){
    #face .regpick{white-space:nowrap}
    #face td.facele .regpick,#face td.facetutor .regpick{max-width:180px}
  }
  @media (min-width:900px) and (max-width:1199px){
    #face td.facecourse .regpick{min-width:10em}
    #face td.facewhere{width:1px}
    #face table.list a.facepay{white-space:nowrap}
  }
  #face td.tregact .btn{min-height:28px;font-size:var(--fs-sm);padding:0 var(--sp3);vertical-align:middle}
  /* F369 (LIST row 8.1, X3): THE TUTOR REGISTER FITS ITS FRAME at 1280 and at 800, Confirmed and DBS in it: the row's presses
     stand one under the other in their own cell and wrap their words, and a long address or word breaks inside its cell
     rather than hold the table wider than the page */
  #face #treglist td{overflow-wrap:anywhere}
  #face #treglist td.tregdbs .btn{white-space:normal}
  #face #treglist td.tregact{white-space:nowrap;overflow-wrap:normal}
  #face #treglist th{white-space:normal}
  #face #treglist td.tregact .btn{white-space:nowrap}
  @media (max-width:999px){
    #face #treglist td.tregact{width:1px;white-space:normal}
    #face #treglist td.tregact .btn{display:block;width:100%;margin:0 0 var(--sp1);white-space:normal;text-align:center}
  }
  @media (min-width:900px){ #face .leadsm.leadholder,#face .leadsm[data-handed]{white-space:nowrap} }
  /* F145 (the Leads view on the Lead Educator face, rulings 749 to 756), drawn as reviews/MOCKUP - The Lead Tracker, Leads
     View, 4 Oct 2026 v5.html, laid out as the Students list is. The filter line (five counted choices, three quiet links,
     my leads), the parent's name with the code and the note beneath, one chip per student, one Where they are pill with a
     ten step bar, one Next line with AMBER ONLY AS ONE SMALL TAG THAT MEANS LATE, their move in grey, one button and the small
     menu. Below about 900 pixels no code wraps, Came in hides and the button folds into the menu. F161: the list takes the
     face's one table shape (lines between rows, none between columns), the pill the face's one pill, and the filter the
     lighter look of a filter, so it never reads as a second row of views. */
  .leadfilters{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp3);align-items:center;margin:0 0 var(--sp3)}
  #face .seg.seg-small{border-color:var(--line-strong);border-radius:999px;background:#fff}
  #face .seg.seg-small button{min-height:28px;padding:0 var(--sp3);font-size:var(--fs-md);color:var(--ink-2)}
  #face .seg.seg-small button.on{background:var(--navy);color:#fff;font-weight:bold}   /* F289 (D22): navy as the face's view switch */
  .leadn{opacity:.8;font-weight:normal;margin-left:2px}
  .leadquiet{font-size:var(--fs-md);color:#6b6f76} .leadquiet a{color:#6b6f76;margin-right:var(--sp3);text-decoration:none;border-bottom:1px dotted #aab3be}
  .leadquiet a.on{color:var(--navy);font-weight:bold;border-bottom-style:solid}
  .leadmine{margin-left:auto}
  #face .leadfilters label.leadmine{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-md);color:var(--ink-2);margin:0 0 0 auto;cursor:pointer}
  #face table.leadlist td{vertical-align:middle}
  .leadname{font-weight:bold;white-space:nowrap}
  .leadsm{display:block;font-size:var(--fs-sm);color:#6b6f76;font-weight:normal;margin-top:2px}
  .leadsm .code{white-space:nowrap}
  .leadsm a{color:var(--navy)}
  /* F334: the one name helper (ui/common.js nameOverCodeHtml, codesLine, personSaysHtml): the name on top and the code under it
     small and grey, as .leadname over .leadsm; the one closing Codes: line; PRONOUNCED AS small beside a name said aloud */
  .nameover{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1.3}
  .nameover .nametop{font-weight:bold}
  .nameover .namecode{font-size:var(--fs-sm);color:#6b6f76;font-weight:normal;white-space:nowrap}
  .codesline{display:block;font-size:var(--fs-sm);color:#6b6f76;font-weight:normal;margin-top:2px}
  /* F336: name over code in every list, a cell's ellipsis kept on the name (the Students list from 1200 pixels), and the one Codes:
     line under a banner's or a notice's words */
  .nameover{max-width:100%}
  .nameover .nametop{overflow:hidden;text-overflow:ellipsis}
  .nameover .namecode{font-size:min(var(--fs-sm),0.88em)}   /* the code smaller than the name in any list, a chip and a quiet line too */
  .facemsg .codesline,#ontmsg .codesline{margin-top:4px}
  .saysas{font-size:var(--fs-sm);color:#6b6f76;font-weight:normal;font-style:italic;margin-left:6px;white-space:nowrap}
  .namesrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .namesrow input{flex:1 1 120px;min-width:0}
  .leadstu{display:inline-block;border:1px solid #b9c9e0;background:#eef3fb;color:#2f4a6e;border-radius:6px;padding:2px 8px;font-size:var(--fs-sm);line-height:16px;margin:2px 4px 2px 0;white-space:nowrap;text-decoration:none}
  a.leadstu:hover{text-decoration:underline}
  .leadpill{display:inline-block;border:1px solid #d4d8dc;border-radius:999px;padding:2px 9px;font-size:var(--fs-xs);font-weight:bold;line-height:16px;background:#eef0f2;color:#3a4148;white-space:nowrap}
  .leadstate{font-size:var(--fs-sm);color:#6b6f76}
  .leadtrack{display:flex;gap:2px;margin-top:6px;width:120px}
  .leadtrack i{flex:1;height:3px;border-radius:999px;background:#e3e8ee} .leadtrack i.filled{background:var(--navy)}
  .leadnext.theirs{color:#6b6f76}
  .leadlate{background:#fff4e0;border:1px solid #e6c07a;color:#7a4a00;border-radius:4px;padding:0 6px;font-size:var(--fs-sm);font-weight:bold;margin-right:6px;white-space:nowrap}
  .leador{display:block;font-size:var(--fs-sm);color:#6b6f76;margin-top:2px} .leador a{color:var(--navy)}
  .leadhint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:4px 8px;border:1px solid #b7dfc4;border-radius:6px;background:#eefaf1;color:#24543a;font-size:var(--fs-sm);font-weight:normal}   /* F386: the WhatsApp chip on a lead's row (ui/face.js faceLeadHint), its Yes and No beside its words */
  td.leadact{white-space:nowrap;text-align:right}
  td.leadact .leadbtn{margin-right:6px}
  #face td.leadact .leadbtn{min-height:28px;font-size:var(--fs-sm);padding:0 var(--sp3);vertical-align:middle}
  .regpick[data-leadmenu]{padding:4px 9px;color:#6b6f76}
  #face td.leadact > .btn,#face td.leadact .regctl{white-space:nowrap;max-width:none}   /* the button that says what happened keeps to one line, and the table counts it whole (at 1024 it ran into the cell's edge) */
  #face .regpick[data-leadmenu]{min-width:28px;padding:0 var(--sp2);font-size:15px;line-height:1;color:var(--ink-2);text-align:center}
  .regpick[data-leadmenu]::after{content:none}
  .regctl[data-ctl^="leadmenu:"] .regopt[data-val="main"]{display:none}
  .leadfoot{margin-top:10px} .leadfoot a{color:var(--navy)}
  /* F361 (LIST rows 3.1 to 3.3 and 3.9): A MESSAGE OPENED FIRST. The box straight under its lead's own row (ui/face.js
     faceLeadWaHtml), headed with the parent's name over the code: the brackets left named first, the words, Review & send in
     WhatsApp, then the small sent tick and close. The same press, brackets line and tick on the call card, School outreach's
     parent-first message and Set up the family step 1 (.leadwasend, .leadwablanks, .leadwatick, .leadwadone) */
  tr.leadwarow > td{padding:0 8px 10px;border-top:0}
  .leadwa{border-left:4px solid #2e8b57;background:#f5faf7;border-radius:0 6px 6px 0;padding:8px 10px;white-space:normal;text-align:left}
  .leadwa .leadwahead{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin-bottom:4px}
  .leadwa .leadwahead .leadsm{display:inline;margin:0}
  .leadwa textarea{display:block;width:100%;box-sizing:border-box;margin:4px 0}
  .leadwa .leadwaver{margin:2px 0 4px}   /* F412: the price's two versions, picked at the press */
  .leadwa .leadwakid{margin:4px 0}   /* F413: one Tutor found message for each child */
  .leadstus .leadtimes, .leadstus .leadfree{display:block;white-space:normal}   /* F413: the times under the children */
  .leadcard .leadtimesline{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:2px 0}   /* F413: the offer and the agreed times */
  .leadwapress{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0}
  .leadwablanks{display:block;flex-basis:100%;font-size:var(--fs-sm);font-weight:bold;color:#7a4a00;margin:2px 0}
  .leadwatick{font-size:var(--fs-sm);min-height:24px;padding:0 var(--sp2);font-weight:normal}
  .leadwadone{font-size:var(--fs-sm);font-weight:bold;color:#1f5e2c;white-space:nowrap}
  .leadwacard{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
  .leadwacard .leadwapress{margin:0}
  .leadcard .leadline{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp3);align-items:center;font-size:var(--fs-md)}
  .leadcard .leadline > label{font-size:var(--fs-sm);font-weight:bold;color:var(--ink-2)}
  .leadcard .leadline .input,.leadcard .leadline select{min-height:32px;font-size:var(--fs-md);box-sizing:border-box}
  .leadcard .leadline .btn,.leadcard .leadline .btn-push{min-height:32px;font-size:var(--fs-md);padding:0 var(--sp4)}
  .leadfigures{margin-top:var(--sp3);max-width:640px} .leadfigures .card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
  /* F157's payment waiting list (each step, then a name per student), drawn by that row in a card above Students */
  .paygroup{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--sp2);padding:var(--sp1) 0}
  /* F159's heading over the pairings, under its tutor register */
  #face h3#tutorpairshead,#face h3.face-heading{margin:var(--sp5) 0 var(--sp3);font-size:var(--fs-lg)}
  @media (max-width:899px){
    #face table.leadlist .leadcame{display:none}
    td.leadact .leadbtn{display:none}
    .regctl[data-ctl^="leadmenu:"] .regopt[data-val="main"]{display:block;font-weight:bold}
    .leadname{white-space:normal}
    tr.leadwarow > td{padding:0 0 10px}   /* F361: the menu's main item opens the same box, the whole width of the list */
    .leadwa .leadwapress .btn{white-space:normal}
  }
  /* F170 (release v143's F161 walk, entry 795 addendum 2): at 1024 the Leads list was wider than its card and the row's button
     (call held) sat past the card's edge until the list was scrolled sideways. From 900 to 1199 the row's menu goes under the
     button, in F161's 4 pixel step, so the action cell is as wide as its button and the whole list fits the card. */
  @media (min-width:900px) and (max-width:1199px){
    #face td.leadact .leadbtn{display:block;margin:0 0 var(--sp1) auto}
    #face td.leadact .leadbtn:only-child{margin-bottom:0}
    #face td.leadact .regctl{display:inline-block}
  }
  /* F369 (LIST rows 8.1 and 8.4, finding 2): BELOW LAPTOP WIDTH NOTHING IN A LEAD'S ROW IS CUT AT THE RIGHT. Under 1200 pixels
     the Lead Educator cell is at most 220 pixels, its conversation and handed over lines keeping F168's one line but ending in
     an ellipsis inside it (each line's hover holds its whole words, F271), where a long name held the list past its frame; and
     What you do now keeps 150 pixels, so the list fits its frame at 868 and 1024 */
  @media (max-width:1199px){
    #face #leadlist td.facele{max-width:220px}
    #face #leadlist .leadsm.leadholder,#face #leadlist .leadsm[data-handed]{max-width:204px;overflow:hidden;text-overflow:ellipsis}
    #face td.leadnextcell{min-width:150px}
    #face td.leadact > .btn,#face td.leadact .leadbtn{width:max-content;max-width:160px;white-space:normal}
  }
  /* F397 (the v213 walk's shortfall, state/entries/1220 item 2 b): THE LEADS LIST FITS ITS FRAME AT 954, 1024 AND 1280 WITH A
     ROW'S PRESS AND NEXT EMAIL. From 900 pixels the action cell wraps its presses: the row's press stands beside next email and
     the small menu (one pair, never parted) only while the list has room, else over them at the cell's right, and a press
     wraps its own words past 160 pixels (200 from 1200), where td.leadact's one line held the list past its frame (1038 in 942
     at 1024, 1277 in 1190 at 1280). Under 1200 the Lead Educator's conversation and handed over lines take the cell's width
     rather than set it (still one line, ending in F369's ellipsis, the hover holding the words) and the ten step bar gives way
     to 60 pixels, so the cells beside them keep their words at 954 and 1024. 868 and 390 are as F369 left them */
  .leadacttail{white-space:nowrap}   /* next email and the small menu, one press pair that never parts (ui/face.js faceLeadRowHtml) */
  @media (min-width:900px){
    #face #leadlist td.leadact{white-space:normal}
    #face #leadlist td.leadact > .btn{padding-top:3px;padding-bottom:3px;line-height:1.25}
    #face #leadlist td.leadact > .btn,#face #leadlist td.leadact > .leadacttail{display:inline-block;margin-top:2px;margin-bottom:2px;vertical-align:middle}
  }
  @media (min-width:1200px){
    #face #leadlist td.leadact > .btn{width:max-content;max-width:200px;white-space:normal}
  }
  @media (min-width:900px) and (max-width:1199px){
    #face #leadlist .leadsm.leadholder,#face #leadlist .leadsm[data-handed]{width:0;min-width:100%}
    #face #leadlist .leadtrack{width:auto;min-width:60px;max-width:120px}
  }
  /* F369 (LIST row 8.9): a lead's own message, on the line under its row */
  #face tr.leadmsgrow > td{padding-top:0}
  #face tr.leadmsgrow .facemsg{margin:0}
  /* F369 (LIST row 12.4, W17): a child who has left, greyed on the lead */
  .leadstu.leadleft{border-color:#d4d8dc;background:#f3f4f6;color:#6b6f76}
  .leadstu.leadleft .nametop{font-weight:normal}
  /* F369 (LIST row 8.4, review (c) 2): THE FACE AT PHONE WIDTH (390). The sheet's padding is smaller, the views and the filters
     wrap, and the Students list, the Leads list and the tutor register stand each row as a card: one cell under the other, each
     named by its column (the cell's data-h) in small grey type, so no row scrolls sideways and nothing is cut at the right */
  @media (max-width:599px){
    #face.sheet{padding:var(--sp3)}
    #face .seg{flex-wrap:wrap;max-width:100%}
    #face .toolbar .input.reg{max-width:100%}
    #face table#facelist,#face table#leadlist,#face table#treglist,#face #facelist tbody,#face #leadlist tbody,#face #treglist tbody,
    #face #facelist tr,#face #leadlist tr,#face #treglist tr,#face #facelist td,#face #leadlist td,#face #treglist td{display:block;width:auto;min-width:0;max-width:none;box-sizing:border-box}
    #face #facelist tr:has(> th),#face #leadlist tr:has(> th),#face #treglist tr:has(> th){display:none}
    #face #facelist tr,#face #leadlist tr.leadrow,#face #treglist tr[data-treg]{position:relative;padding:var(--sp2) 0;border-bottom:1px solid var(--line)}
    #face #facelist tr:last-child,#face #leadlist tr:last-child,#face #treglist tr:last-child{border-bottom:0}
    #face #facelist td,#face #leadlist td,#face #treglist td{border:0;padding:2px var(--sp3);white-space:normal}
    #face #facelist td[data-h]::before,#face #leadlist td[data-h]::before,#face #treglist td[data-h]::before{content:attr(data-h);display:block;font-size:var(--fs-xs);color:var(--sub);font-weight:normal}
    #face #facelist td.facemenucol,#face #treglist td.tregact,#face #leadlist td.leadact{text-align:left;width:auto;max-width:none}
    #face #facelist td.facemenucol{position:absolute;top:var(--sp2);right:0;width:40px;padding:0}
    #face #facelist .regpick,#face #leadlist .regpick,#face #treglist .btn{max-width:100%;white-space:normal}
    #face #facelist td.facefirst a.facename{max-width:none}
    #face #facelist td.facewhere .facepills{width:auto;min-width:0;flex-wrap:wrap;overflow:visible}
    #face #leadlist .leadtrack{width:120px}
    #face #treglist td.tregact .btn{display:inline-block;width:auto;margin:var(--sp1) var(--sp1) 0 0}
    #face table.list:not(#facelist):not(#leadlist):not(#treglist){display:block;overflow-x:auto}
    #face .card-head{padding:var(--sp2) var(--sp3)}
    #face .card-body{padding:var(--sp2) var(--sp3)}
  }
  /* F100 (the lesson view, Overview and Teach), rulings 601 to 608, drawn as reviews/LESSON SEQUENCE - Overview And
     Teach Mode, mockup v10.html. THE CARD: Lesson view, the two way slider, then the adders and Tidy on the same line. */
  .view-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:6px 0 10px;padding:8px 10px;background:#f4f6f8;border:1px solid #d7dbe0;border-radius:6px}
  .view-card .view-title{font-size:13px}
  .view-mode{display:inline-flex;background:#e2e5e9;border-radius:999px;padding:3px}
  .view-option{padding:5px 16px;border-radius:999px;font-weight:700;font-size:13px;color:#3a4148;cursor:pointer;user-select:none}
  .view-option.on{background:#1f2d3d;color:#fff}
  .view-tools{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .view-tools select{margin:0;width:auto;max-width:280px}
  .view-tools .btn{white-space:nowrap}
  .tidy-menu{position:relative;display:inline-block}
  .tidy-list{position:absolute;right:0;top:30px;z-index:60;background:#fff;border:1px solid #c9ced4;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.13);padding:6px;min-width:240px}
  .tidy-item{display:block;padding:7px 10px;border-radius:6px;font-size:13px;white-space:nowrap;cursor:pointer}
  .tidy-item:hover{background:#eef3f8}
  /* F135 (the Add content box), rulings 722 to 725, drawn as layout 1 of reviews/MOCKUP - Lesson View Adders, Typable
     Subtopic And Add A Skill, 1 Oct 2026 v3.html: the one typable box on the Lesson view card and the list under it. */
  .section.ac-open{overflow:visible}   /* the lesson's card would clip the open list at its foot (set while its list is open) */
  .acbox{position:relative;display:inline-block;vertical-align:middle;width:440px;max-width:100%}
  .acbox .ac-input{width:100%;box-sizing:border-box;margin:0}
  .ac-list{position:absolute;right:0;top:calc(100% + 3px);z-index:70;width:max-content;min-width:100%;max-width:min(680px,92vw);background:#fff;border:1px solid #c9ced4;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.15);text-align:left;font:12.3px Arial;color:var(--ink)}
  .ac-chips{display:flex;flex-wrap:wrap;gap:6px;padding:7px 10px;border-bottom:1px solid #e0e4e8}
  .ac-chip{border:1px solid var(--btn-line);border-radius:999px;padding:2px 10px;font-size:11.3px;cursor:pointer;color:var(--btn-ink);background:#fff;white-space:nowrap;user-select:none}
  .ac-chip i{font-style:normal;opacity:.65;margin-left:3px;font-size:10.5px}
  .ac-chip.on{background:#1f2d3d;color:#fff;border-color:#1f2d3d}
  .ac-body{max-height:300px;overflow-y:auto}
  .ac-group{position:sticky;top:0;background:#f4f6f8;border-bottom:1px solid #e0e4e8;padding:5px 10px;font-size:10.8px;font-weight:bold;color:#3a4148;letter-spacing:.03em}
  .ac-group span{font-weight:normal;color:var(--sub);margin-left:6px}
  .ac-item{display:flex;gap:8px;align-items:baseline;padding:6px 10px;cursor:pointer;border-bottom:1px solid #f1f2f4}
  .ac-item .ac-code{color:#1b3348;flex:0 0 auto}
  .ac-item .ac-name{flex:1 1 auto}
  .ac-item.active,.ac-item:hover{background:#eef3f8}
  .ac-item.off{color:#9aa0a6;cursor:default;background:#fff}
  .ac-item.off .ac-code{color:#9aa0a6}
  .ac-right{flex:0 0 auto;margin-left:14px;color:var(--sub);font-size:10.8px;white-space:nowrap}
  .ac-right.other{color:var(--prov);font-weight:bold}
  .ac-right.frag{color:var(--again);font-weight:bold}
  .ac-item mark{background:#ffe699;color:inherit;padding:0 1px}
  .ac-more,.ac-none{padding:7px 10px;color:var(--sub);font-size:11.5px}
  .ac-morechip{color:var(--secure);text-decoration:underline;cursor:pointer;margin-left:4px}
  .ac-bulk{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:7px 10px;border-top:1px solid #e0e4e8;background:#f4f6f8}
  .ac-missing{background:#fdf6f5;border-top:1px solid #e8c7c2;padding:7px 10px;font-size:12px;color:#8a2a1f;cursor:pointer;border-radius:0 0 6px 6px}
  .ac-missing:hover{background:#fbeae7}
  /* F356 (the one picker, LIST row 5.7): one searchable box for a subtopic or a skill, names only, the same on every page, drawn
     as the Add content box above is. Its list floats over the page (fixed, placed under its box by onePickPlace in ui/common.js),
     so a table or a card that clips its overflow never cuts it. */
  .onepick{position:relative;display:inline-block;vertical-align:middle;max-width:100%}
  .onepick .onepick-in{width:100%;box-sizing:border-box;margin:0}
  .onepick-list{position:fixed;z-index:75;width:max-content;max-width:min(560px,92vw);background:#fff;border:1px solid #c9ced4;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.15);text-align:left;font:12.3px Arial;font-weight:normal;color:var(--ink);white-space:normal}
  .onepick-body{max-height:300px;overflow-y:auto}
  .onepick-row{display:flex;gap:8px;align-items:baseline;padding:6px 10px;cursor:pointer;border-bottom:1px solid #f1f2f4}
  .onepick-row .onepick-name{flex:1 1 auto}
  .onepick-row.active,.onepick-row:hover{background:#eef3f8}
  .onepick-row.off{color:#9aa0a6;cursor:default;background:#fff}
  .onepick-right{flex:0 0 auto;margin-left:14px;color:var(--sub);font-size:10.8px;white-space:nowrap}
  .onepick-row mark{background:#ffe699;color:inherit;padding:0 1px}
  .onepick-more,.onepick-none{padding:7px 10px;color:var(--sub);font-size:11.5px}
  .missing-panel .ms-say{font-size:12px;margin:0 0 6px;line-height:1.45}
  .tag-gap{display:inline-block;background:#fff3df;border:1px solid #e3b566;color:var(--prov);border-radius:999px;font-size:10.5px;font-weight:bold;padding:1px 6px;margin-left:6px;white-space:nowrap}
  /* THE HEADING AND THE HOLDING BAR (rulings 602, 606, 607): one block per in-scope skill, pale once due. */
  .grab{color:#9aa0a6;font-size:14px;letter-spacing:-3px;margin-right:8px;cursor:grab;user-select:none}
  .hold-wrap{float:right}
  .hold-bar{display:inline-flex;align-items:center;gap:6px}
  .hold-blocks{display:inline-flex;gap:3px;vertical-align:middle}
  .hold-block{display:block;width:13px;height:12px;border-radius:4px}
  .hold-block.easy{background:var(--easy)} .hold-block.good{background:var(--good)} .hold-block.hard{background:var(--hard)} .hold-block.again{background:var(--again)}
  .hold-block.pale{opacity:.4}
  .hold-block.unseen{background:#fff;border:1px solid #c3c8ce;box-sizing:border-box}
  .guide-wrap{position:relative;display:inline-flex}
  .guide-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #8a939c;border-radius:999px;font:bold 10px Arial;color:#555;cursor:pointer;background:#fff}
  .guide-pop{position:absolute;right:0;top:22px;z-index:80;background:#fff;border:1px solid #c9ced4;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.13);padding:10px 12px;text-align:left;white-space:nowrap;font:12px Arial;color:#333;cursor:default;line-height:1.3}
  .guide-pop b{display:block;margin-bottom:6px;font-size:12.5px}
  .guide-row{display:flex;align-items:center;gap:10px;padding:4px 0}
  .guide-row .hold-blocks,.guide-row .guide-seg{min-width:96px}
  .guide-seg{display:inline-flex!important;justify-content:flex-start}
  .guide-key{display:flex;gap:14px;margin-top:8px;padding-top:7px;border-top:1px solid #eee}
  .guide-swatch{display:inline-flex;align-items:center;gap:4px}
  .guide-swatch em{font-style:normal;color:#555}
  .guide-note{display:block;margin-top:5px;color:#666}
  .starter-box .cap{position:relative}
  /* THE FOLDED LINE (rulings 603, 608): four aligned chip columns, then the check box and the X at the very end. */
  table.lessontable tr.fold-line td.fold-cell{padding:5px 7px}
  .fold-row-grid{display:flex;align-items:center;gap:14px;font-size:12px}
  .fold-row-grid .fold-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fold-columns{display:flex;align-items:center;gap:14px;flex:0 0 540px}
  .col-instruction{flex:0 0 118px;display:flex}
  .col-first,.col-second{flex:0 0 130px;display:flex;align-items:center}
  .col-source{flex:0 0 110px;display:flex}
  .fold-columns .rcover,.fold-columns .rcask{width:auto;font-size:13px;white-space:nowrap}
  .fold-end{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end}
  .rated-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #9aa4ae;border-radius:4px;margin-right:14px;font:bold 13px Arial;color:#fff;background:#fff;box-sizing:border-box}
  .rated-check.on{background:var(--good);border-color:var(--good)}
  .remove-cross{color:var(--flag);font-size:16px;font-weight:700;cursor:pointer;margin-left:8px}
  .source-tag{display:inline-block;font-size:11px;border-radius:999px;padding:1px 8px;border:1px solid #c3c8ce;color:#4a5159;background:#fff;white-space:nowrap}
  .source-tag.source-arose{border-color:#d6a35c;color:#8a5a12;background:#fff8ee}
  .arrow-box{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;margin:-3px 8px 0 -4px;vertical-align:middle;border:1px solid #9aa4ae;border-radius:6px;background:transparent;color:#1f2d3d;font-size:13px;cursor:pointer}
  tr.drag-lifted td{opacity:.35}
  .view-group.drag-lifted{opacity:.5}
  tr.drop-before td{box-shadow:inset 0 3px 0 #1f6fd1} tr.drop-after td{box-shadow:inset 0 -3px 0 #1f6fd1}
  .view-group.drop-before{box-shadow:0 -3px 0 #1f6fd1} .view-group.drop-after{box-shadow:0 3px 0 #1f6fd1}
  /* TEACH (ruling 605): the current card, the next card faded and folded, the greyed line after it, the tick. */
  .teach-card{position:relative;margin:12px 0 0;padding:10px 10px 6px;border:1px dashed #b9c0c8;border-radius:6px;background:#f6f8fa}
  .teach-card .subtopiccard{margin:0}
  .teach-card.teach-next:not(.open) .subtopiccard{opacity:.78;filter:saturate(.75)}
  .teach-card.teach-next tr.fold-line{cursor:pointer}
  .teach-label{display:flex;align-items:center;gap:10px;margin:0 2px 8px;font-size:12px;color:#6b6f74}
  .teach-step{flex:0 0 auto;font-size:13px;font-weight:700;border-radius:999px;padding:3px 12px;color:#fff;background:#1f2d3d}
  .teach-step.now{background:var(--good)} .teach-step.after{background:#1f2d3d}
  .teach-step.then{background:#9aa0a6;font-size:11px;padding:2px 9px}
  .skip-button{margin-left:auto;font:inherit;font-size:14px;font-weight:700;color:#1f2d3d;background:#fff;border:1px solid #9aa4ae;border-radius:6px;padding:5px 16px;cursor:pointer}
  .teach-then{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:9px 12px;border:1px solid #d7dbe0;border-radius:6px;background:#fbfcfd;opacity:.72}
  .teach-then .then-name{font-size:14px;color:#1f2d3d;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .teach-then .then-subtopic{color:#6b6f74;font-size:12px;white-space:nowrap}
  .tick-cover{position:absolute;inset:0;border-radius:6px;background:rgba(232,245,233,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50}
  .tick-mark{width:110px;height:110px;border-radius:999px;background:var(--good);color:#fff;font-size:66px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.2)}
  .tick-cover small{margin-top:10px;font-size:14px;font-weight:700;color:var(--good)}
  .teach-done{font-size:13px;padding:12px}
  @media (max-width: 600px){
    .view-tools{margin-left:0}
    /* F398 (the v213 walk's shortfall, F372 part 8): AT PHONE WIDTH THE LESSON VIEW CARD WRAPS AND NOTHING IS CUT. The adders'
       row kept the + Add content box at its 440px, wider than the lesson at 390 (457 of content in 354), so the box, the
       locked press's reason, tidy and the rest sat past the lesson's edge, where the lesson's own overflow hid them. Here the
       row takes the card's width, the box shrinks to the row, and the reason wraps on as many lines as it needs. */
    .view-card .view-tools{flex:1 1 100%;min-width:0;max-width:100%}
    .view-card .view-tools .acbox{flex:1 1 100%;width:auto;min-width:0}
    .view-card .view-tools .lockwhy{flex:1 1 160px;min-width:0;margin-left:0;overflow-wrap:anywhere}
    .fold-row-grid{flex-wrap:wrap;gap:4px 8px}
    .fold-row-grid .fold-name{flex:1 1 100%}
    .fold-columns{flex:1 1 auto;flex-wrap:wrap;gap:4px 8px}
    .col-instruction,.col-first,.col-second,.col-source{flex:0 0 auto}
  }
  .remove-cross,.rated-check,.guide-mark,.source-tag,.grab,.arrow-box,.hold-blocks{text-decoration:none!important}
  table.lessontable tr.fold-line td{background:#fff}
  .view-overview,.view-teach{margin-top:2px} .teach-now .subtopiccard{opacity:1} .full-row{background:transparent}
  .tidy-button,.add-recap{white-space:nowrap} .source-tag.source-plan{background:#fff}
  .sub-name{font-weight:bold}
  /* ---- F108 (rulings 625 to 628, THE SIMPLE PATH v2 items 6 to 9, 30 Sep 2026): THE BARS, THE TABS, THE THIN LINE ----
     The tabs sit in three labelled groups on one row, Set up, Plan and Teach, with More holding the rest; both bars keep
     to one line, with a More menu for what is reached for once a lesson; view as tutor is one thin line above the bar. */
  /* F119 (ruling 636): A GROUP NEVER SQUEEZES. The row wraps between groups and never inside one, so when there is no
     room the whole group moves to the next line with its label, and no tab is cut, covered or overlapped at any width.
     Each tab has 7 pixels either side of its name, 3 between tabs, and the groups sit 12 apart: one line at 1440 and
     1280, Teach on a second line at 1024. */
  .tabs{align-items:flex-end;gap:6px 12px;flex-wrap:wrap}
  .tabgroup{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;min-width:auto}
  .tabgroup-label{font-size:10px;letter-spacing:.8px;color:#8a9099;font-weight:bold;padding:0 2px 3px;border-bottom:2px solid #d9dce1}
  .tabgroup-more .tabgroup-label{border-bottom-color:transparent}
  .tabgroup-tabs{display:flex;gap:3px;flex-wrap:nowrap}
  .tabgroup-tabs .tab{padding:8px 7px;font-size:12.5px;white-space:nowrap}
  .tabmore{position:relative}
  .tabmore-btn{border:1px solid var(--grid);border-bottom:none;background:#e9eaec;padding:8px 7px;font-size:12.5px;font-weight:bold;border-radius:6px 6px 0 0;cursor:pointer;color:var(--sub);white-space:nowrap}
  .tabmore-btn.active{background:#fff;color:var(--ink)}
  /* F275 (V27): MORE IS A BUTTON, reset as button.tab is; .tabmore-btn above still sets its look */
  button.tabmore-btn{margin:0;font-family:inherit;font-style:inherit;line-height:inherit;letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;text-indent:0;text-shadow:none;text-align:inherit}
  /* F119 (rulings 637 and 638): THE ONE MORE, three sections under small grey capital headings with a thin line between,
     items plain words that shade grey under the pointer, not bordered buttons */
  .tabmenu{position:absolute;top:100%;right:0;z-index:60;display:flex;flex-direction:column;padding:4px 8px 8px;min-width:270px;max-width:340px;background:#fff;border:1px solid var(--grid);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
  .tabmenu[hidden],.barmenu[hidden]{display:none}
  .menusec{display:flex;flex-direction:column}
  .menusec + .menusec{border-top:1px solid #e1e4e8;margin-top:4px}
  .menuhead{font-size:10px;letter-spacing:.8px;color:#8a9099;font-weight:bold;padding:8px 8px 4px}
  .tabmenu .tab,.tabmenu .menuitem{display:block;width:100%;box-sizing:border-box;text-align:left;border:none;background:none;border-radius:4px;padding:7px 8px;font:inherit;font-size:13px;font-weight:normal;color:var(--ink);cursor:pointer;white-space:nowrap}
  .tabmenu .tab:hover,.tabmenu .menuitem:hover{background:#eef0f3}
  .tabmenu .tab.active,.tabmenu .menuitem.on{font-weight:bold;background:#f4f5f7}
  .tabmenu .barmore-file{display:block;padding:3px 8px;color:#7b828b;font-size:11px;font-weight:normal;word-break:break-all;background:none;border:none}
  /* F119 (rulings 638 and 639): THE LEAD EDUCATOR'S BAR, one line, and the slim orange no course line under it */
  .lebar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:4px 0 10px;margin:0 0 8px;border-bottom:1px solid #dfe2e6}
  .lebar-left{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
  .lebar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
  .lebar .stuname{font-size:20px;line-height:1.2;margin-right:0}
  .lebar #allstudents{font-size:12.5px;padding:5px 12px;text-decoration:none}
  .lebar #drivestrip > .skill-code:first-child{color:#6b7280;font-size:12.5px;font-weight:normal}
  .lebar #drivestrip > .skill-code:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:#2e7d32;margin-right:7px;vertical-align:1px}
  .nocourseline{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fde3d3;border:1px solid #efa46b;border-radius:4px;padding:6px 8px 6px 12px;margin:0 0 8px;font-size:12.5px;color:#3b2a1e}
  .nocourseline b{color:#a3480a}
  .nocourseline .btn{flex:0 0 auto;font-size:12px}
  .barmore{position:relative;display:inline-block}
  .barmenu{position:absolute;top:100%;right:0;z-index:60;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:8px;min-width:280px;max-width:420px;background:#fff;border:1px solid var(--grid);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);white-space:normal}
  .barmenu .btn{margin:0}
  .barmore-file{font-size:11px;word-break:break-all} .barmore-warn{line-height:1.35}
  /* F317 (entry 1071): THE TUTOR BAR'S MORE MENU OPENS INSIDE THE SCREEN. Hung from the More button's right edge, it ran
     34 px off the left at 1280 and 42 px at 390, because More sits near the left of the tutor bar. It now hangs from the
     bar's own left edge, under the bar, and is never wider than the bar. */
  #stubar:has(> .barmore){position:relative}
  #stubar > .barmore{position:static}
  #stubar > .barmore > .barmenu{left:0;right:auto;min-width:min(280px,100%);max-width:min(420px,100%);box-sizing:border-box}
  /* F317 (entry 1069): SCHOOL OUTREACH'S HEADS ARE NO LARGER THAN THE PAGE TITLE. What we received and The trail were the
     browser's own h3, 18.72 px under a 17 px title; they take School contacts' size. */
  #outrcontactshead ~ h3{font-size:var(--fs-lg)}
  .tabgroup-more{margin-left:auto}
  .viewasline{font-size:11.5px;color:#5f4c00;background:#fff8e1;border:1px solid #e6c65c;border-radius:4px;padding:2px 8px;margin:0 0 4px}
  .linkbtn{border:none;background:none;padding:0;font:inherit;color:#1f6fd1;text-decoration:underline;cursor:pointer}
  .openingline{font-size:14px;color:var(--sub);padding:18px 4px}
  .changedfoot{margin:22px 0 0;font-size:11px;color:#9aa1a8}
  .changedfoot .linkbtn{color:#9aa1a8}
  /* F299 (UX-D, AUDIT U5): ON THE FIREBASE BUILD the foot's what changed in this build and the version beside the title are for a
     Lead Educator: hidden on the sign-in card, the refusal page and every tutor page, and shown once a Lead Educator is in
     (engine/fb-core.js puts fbbuild on the page and le-in once the boot says le). The Apps Script and standalone builds keep them. */
  html.fbbuild:not(.le-in) #changedfoot,html.fbbuild:not(.le-in) #intronote,html.fbbuild:not(.le-in) .wrap > h1 > span{display:none !important}
  @media (max-width: 1100px){ .tabs{flex-wrap:wrap} }   /* F119 (ruling 636): a group wraps whole, never inside itself */
  /* a phone is narrower than the widest group, so there, and only there, a group's own tabs wrap under each other inside
     the group rather than run off the page: still nothing cut, covered or overlapped */
  @media (max-width: 599px){ .tabgroup{flex:0 1 auto;max-width:100%} .tabgroup-tabs{flex-wrap:wrap} .lebar-right{margin-left:0} }
  /* F125 (the two gate walk fixes), entry 635: MORE STAYS ON THE TAB ROW AT 1440 AND 1280. The page is 1240 wide at both,
     and with the inbox count on Block Overview (LE) the three groups and More needed 1248 (a count of 31) or 1254 (131),
     so More dropped alone to a second line. Two things give the room back and neither touches ruling 636's spacing:
     the groups are still 12 apart (3 of row gap and 9 of margin), and only the space before More, which is not a group,
     is the 3 between tabs, pushed out to the far right by its auto margin whenever there is room; and the count on the
     tab is a smaller pill. */
  .tabs{column-gap:3px}
  .tabs > .tabgroup{margin-right:9px}
  .tabs > .tabgroup:has(+ .tabgroup-more),.tabs > .tabgroup-more{margin-right:0}
  .tabgroup-tabs .tab .tag-count{font-size:10px;padding:1px 4px;margin-left:4px}
  /* F234 (A1282 c, 13 Oct 2026): SCHOOL OUTREACH IN SET UP, AND MORE STILL ON THE ROW. With School outreach beside SOW and
     the tabs reading Calendar and SOW, the three groups and More needed 1253 of the 1240 with a count of 131 on Block
     Overview (LE), so More dropped to a second line at 1440, 1408 and 1280. A tab's side padding goes from 7 to 6 (twelve
     tabs, 24 back); the groups are still 12 apart and every name stays whole. */
  .tabgroup-tabs .tab{padding-left:6px;padding-right:6px}
  /* F125, entry 634: THE DETAILS STUDENT CARD'S COURSE BUTTON STAYS INSIDE ITS CARD. A long course name (the legacy
     build's runs to 62 letters) wraps inside the button, which keeps its full name, and the card never overflows into
     Parent 1 at any width. */
  .keyvalue > span:last-child:has(> .regctl[data-chooser="details"]){min-width:0}
  .regctl[data-chooser="details"] .regpick{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
  /* the narrow width rule (ruling 625): below about 900 pixels a skill's name may take two lines instead of being cut;
     at full width F100's one aligned line is untouched, because none of this applies there */
  @media (max-width: 899px){
    .fold-row-grid .fold-name,.teach-then .then-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
    td.skillname.onerow .name{height:auto;max-height:2.8em}
    td.skillname.onerow .name .name-inner{position:static;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
  }
  /* F161: THE ACCESS LOG reads as a log: the time, the role and the action on one line each, the file id in the code type, and
     the outcome takes what is left; the day picker and its line sit as the face's other bars do */
  #facelog td{padding:var(--sp2) var(--sp3)}
  #facelog td:nth-child(1),#facelog td:nth-child(3),#facelog td:nth-child(5){white-space:nowrap}
  #facelog td:nth-child(1){font-variant-numeric:tabular-nums;color:var(--ink-2)}
  #facelog td:nth-child(4){font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-sm);overflow-wrap:anywhere}
  #face .toolbar:not(:first-child) label.skill-code{font-size:var(--fs-md)}
  #face .toolbar:not(:first-child) > .skill-code{font-size:var(--fs-sm);color:var(--sub);margin:0}
  /* F161: KEYBOARD FOCUS IS ALWAYS VISIBLE. Whatever is reached with Tab (a button, a link, a box, a list, a tick box) wears
     one blue ring, on the face and on every student page; a press with the mouse shows none on a button or a link. It takes
     no room, so nothing on any page moves. */
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
  /* F271 (THE JOURNEY REVIEW visual audit, reviews/AUDIT - Visual Uniformity, Lead Educator Pages, 13 Oct 2026 v1.md section
     2.1, state/entries/998): the house style's one type scale, one press size, one-line pills and lists inside their frame,
     in this one block; the markup each needs is rows F272 to F276's. V1 THE TYPE SCALE REACHES THE FACE'S CARDS: a grey
     line on the face is 12 point, and a press in a card's body or head is the row's press, 12 point and 28 high (the tutor
     register's not given, when tutors confirm and read again, the register edit's presses, School outreach's copy). Written
     under :where(#face), so it fills in only where no rule of the face says more (the bar's 32, a form card's line, a tick
     box's own 13 point words keep theirs). */
  :where(#face) .skill-code{font-size:var(--fs-sm)}
  :where(#face) .card-body .btn,:where(#face) .card-head .btn{min-height:28px;font-size:var(--fs-sm)}
  /* V2 THE PAGE HEAD'S GREY LINE IS A LINE: inside a page head's context an explainer is words, not a bordered box (Lesson
     Sequence), and a context that is itself an explainer (Progress, Independent work) is the context's grey line too */
  .pagehead .context .explainer{display:inline;border:0;background:none;padding:0;margin:0;font-size:inherit;color:var(--sub)}
  .pagehead .context.explainer{border:0;background:none;padding:0;margin:0;color:var(--sub)}
  /* V3 NO PRESS TOO SMALL TO HIT: the small presses (+ add a contact, + add a second parent, SOW's validate, the copy press,
     the plan's order arrows) are 24 high at 11 point, the words centred by the line; a link press on Set up the family, Set up
     the tutor and the Next email place (Open in WISE, Open Gmail) is a box as .btn is, 26 high */
  .btn-inline,.btn-order,.onbcopy{min-height:24px;font-size:var(--fs-xs);line-height:20px;box-sizing:border-box;vertical-align:middle}
  /* F291 (D25 B): a message a parent or a school reads (the WhatsApp ask, School outreach's lines and email) in the body face in a grey copy box; the values typed into WISE stay monospace (onbVal's code) */
  .copybox .copytext{flex:1 1 auto;min-width:0;font-family:inherit;font-size:12.5px;line-height:1.45;color:var(--ink);background:#f4f5f7;border:1px solid var(--line);border-radius:6px;padding:6px 8px;white-space:pre-wrap;overflow-wrap:anywhere}
  .copybox .copylabel{font-size:12.5px}
  /* F373 (LIST row 8.6, entry 1091 1A 15): Set up the family's step 1 in one style, the house font at the page's own size for the
     ask's label and words, its tick and the address boxes; and, repaired at F373 on v213, F361's WhatsApp press line in step 1
     (its brackets left named and its no-mobile note) at the same size, its press (.btn) kept at the press size as every press is */
  .onbfirst .copybox .copylabel,.onbfirst .copybox .copytext,.onbfirst .input,.onbfirst label,.onbfirst .leadwapress .leadwablanks,.onbfirst .leadwapress .skill-code{font-family:inherit;font-size:inherit}
  /* F373 (LIST row 12.1, findings 35 and 36): A LOCK LOOKS LOCKED on Set up the family: the one lock line (onbLockLine) a block with
     its padlock and the reason as page text (r4 on v216: the locked later email part went with F360's later email block) */
  .onblock{display:block;margin:4px 0 6px;font-size:inherit;font-weight:normal;color:#5b4a2a;background:#f3efe6;border-color:#c9bda3}
  /* F278: SOW's validate is a primary press made to this size (.btn btn-primary btn-inline); .btn-inline's own border and ink
     come after .btn-primary's, so the go colour is said again here and the press reads as the primary it was */
  .btn-primary.btn-inline{border-color:var(--btn-go);color:var(--btn-go);font-weight:bold}
  /* the rail of a skill row on Progress and Lesson Sequence (look back, record, the picker, subparts in the State cell) is not
     one of these presses: it keeps
     .btn-inline's own size, so a skill row stays as tall as board A288 and ruling 364 hold it (section BD12) */
  td.skillname .btn-inline,td.cell-state .btn-inline{min-height:0;font-size:10px;line-height:normal;vertical-align:baseline}
  #onbfam a.btn,#ontpage a.btn,#nxpanel a.btn{display:inline-block;min-height:26px;box-sizing:border-box;text-decoration:none;vertical-align:middle}
  /* V5 A PILL KEEPS ONE LINE (the long labels are shortened by row F276); a school unit's tag ends in an ellipsis inside its
     card rather than break its own border. Under 1200 pixels the face's own rule (F161, a pill may wrap at 1024) still wins. */
  .chip,.leadpill,.tag-unit,.tag-pair,.tag-needlevel,.tag-level,.tag-findlevel,.freeroll,.btn-levelUp,.tag-state,.tag-target,.tag-estimate,.tag-unrated{white-space:nowrap}
  .unit .tag-unit{max-width:100%;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;vertical-align:bottom}
  /* V8 THE STUDENTS LIST INSIDE ITS FRAME at 1280 and 1440: the row menu in its own 40 pixel last column (the cell
     td.facemenucol, and th.facemenucol over it, drawn by row F272), and the Lead Educator and Tutor choices at most 150
     pixels, ending in an ellipsis (the choice's hover carries the whole name) */
  #face table.list th.facemenucol,#face table.list td.facemenucol{width:40px;min-width:40px;max-width:40px;padding-left:0;padding-right:0;text-align:center;box-sizing:border-box}
  #face td.facemenucol .facerowbtns{float:none;margin:0}
  /* F303 (section FA12): THE STUDENTS LIST FITS ITS BOX WITH THE MENU COLUMN. Row F272's 40 pixel menu column made every
     column of the night's list stand at its narrowest, and the table came out 3 pixels wider than #facetable at 1280 and 2 at
     1024, so the box scrolled sideways by itself. Where they are gives up its right padding: the menu column beside it
     already keeps a gap (its press centred in 40 pixels, the pill's own 4 pixel margin before it), and the list is 8 pixels
     narrower at every width. */
  #face table.list td.facewhere{padding-right:0}
  @media (min-width:1200px){ #face td.facele .regpick,#face td.facetutor .regpick{max-width:150px} }
  /* V10 THE LEADS LIST AT 1280 WITH THE CONSULTATION FILTER: the Lead Educator cell at most 220 pixels and the Next cell at
     least 150, so Next is never one word a line; the conversation line and the handed over line keep F168's one line each,
     ending in an ellipsis inside the cell */
  @media (min-width:1200px){
    #face table.leadlist td.facele{width:220px;max-width:220px;white-space:normal}
    #face table.leadlist td.facele .leadsm{max-width:220px;overflow:hidden;text-overflow:ellipsis}
    #face table.leadlist td.leadnextcell{min-width:150px}
  }
  /* V15 THE NEXT EMAIL PLACE ON THE SCALE: 13 point, its title 15, its grey notes 12 */
  #nxpanel{font-size:var(--fs-md)}
  #nxpanel h3{font-size:var(--fs-lg)}
  #nxpanel .skill-code{font-size:var(--fs-sm)}
  /* F359: DID NOT ARRIVE, in red, on the lead's row, its Next email and the Lead Educator's home */ .nxbounce{color:#b3261e;font-weight:bold} div.nxbounce{font-size:var(--fs-sm);margin:2px 0} #face .facebounce{border-color:#e6a0a0}
  /* F471: TECHNICAL ISSUES on the live card: the panel of guides under a student's line, in the body face at the house size
     (the Live now line is small grey type), each step a line with its copy press, its picture at most 520 pixels wide */
  #facelivealert .techpanel{display:block;margin:6px 0;padding:8px 10px;border:1px solid #c9d3e0;border-radius:6px;background:#f7f9fc;color:#1d2733;font-family:inherit;font-size:var(--fs-md);font-weight:normal;white-space:normal}
  #facelivealert .techhead{font-weight:600;margin-bottom:6px}
  #facelivealert .techguides{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
  #facelivealert .techsteps{margin:6px 0 4px 20px;padding:0}
  #facelivealert .techsteps li{margin:6px 0}
  #facelivealert .techstep{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
  #facelivealert .techpic{display:block;max-width:min(520px,100%);height:auto;margin-top:4px;border:1px solid #d5dbe3;border-radius:4px}
  /* V16 SET UP THE FAMILY AND SET UP THE TUTOR ON THE SCALE: no line falls back to the browser's 16 pixels */
  #onbfam,#ontpage{font-size:var(--fs-md)}
  /* V17 ONE WIDTH OF BOX IN A CARD: a choice or a date in these two pages' grids is at most 240 pixels (Right to work,
     Tutor Handbook signed on and Activated on; Year and Exam board), not the width of the card */
  #onbfam .newgrid > select,#onbfam .newgrid > input[type=date],#ontpage .newgrid > select,#ontpage .newgrid > input[type=date]{max-width:240px}
  /* F303 (V3, section IP5 on a Mac): THE PAGES' OWN PRESSES KEEP ONE LINE HEIGHT, 14 pixels, whatever font draws a glyph. On
     a Mac the arrow of Open Gmail (U+2197) is not in Arial, its fallback font's taller normal line made that press 29 high
     beside the others' 26; on Linux the arrow is in the first font and every press stood at 26. A fixed line height draws
     every press 26 high on both. */
  #onbfam button.btn,#ontpage button.btn{line-height:14px}
  /* F371 (LIST rows 8.3 and 8.7, findings 29 and 30): THE WISE BOXES OF SET UP THE FAMILY AND SET UP THE TUTOR, plain and neat. A
     card with its head band; a banner of what it does; What you do in one line; one numbered line per action, its mark first (a
     green tick once WISE confirms it, a red cross when refused, a turning spinner while it is sent, an empty ring while it
     waits), the system detail folded under it; the keep open line and the countdown in amber while it runs */
  .ofwbox,.onwbox{margin:var(--sp2) 0;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff}
  .ofwbox.ofwsetup{border:2px solid #B79C68}
  .onwbox.onwstepbox:empty{display:none}
  .ofwbox > .card-head,.onwbox > .card-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--sp2);padding:var(--sp2) var(--sp3);background:var(--head);border-bottom:1px solid var(--line);border-radius:6px 6px 0 0}
  .ofwbox > .card-body,.onwbox > .card-body{padding:var(--sp3)}
  .ofwbanner{font-size:var(--fs-lg);font-weight:bold;color:var(--ink);margin:0 0 var(--sp2)}
  .ofwwhat{font-weight:bold;color:var(--ink);margin:0 0 var(--sp2)}
  .ofwspeed{margin-top:var(--sp2);line-height:1.45}
  .ofwkeep{background:#fff4e0;border:1px solid #e6c07a;color:#7a4a00;border-radius:6px;padding:var(--sp2) var(--sp3);font-weight:bold;margin:0 0 var(--sp2)}
  .ofwmsg{font-weight:600;margin:0 0 var(--sp1)}
  .ofwcount{display:flex;align-items:center;gap:var(--sp2);color:#7a4a00;font-weight:600;margin:0 0 var(--sp2)}
  .ofwops{display:flex;flex-direction:column;gap:var(--sp1)}
  .ofwop{position:relative;padding:var(--sp1) 0 var(--sp1) 26px;line-height:1.45}
  .ofwop .ofwn{font-weight:bold;margin-right:2px}
  .ofwop .ofwline{color:var(--ink)}
  .ofwop .ofwwhy{margin:var(--sp1) 0 0}
  .ofwmark{position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:999px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold;line-height:1}
  .ofwcount .ofwmark{position:static;flex:0 0 auto}
  .ofwtick{background:#eaf6ec;color:#1f5e2c;border:1px solid #9fd0a8}
  .ofwcross{background:#fdecea;color:#b3261e;border:1px solid #e6a0a0}
  .ofwwait{border:2px solid #d4d8dc}
  .ofwspin{border:2px solid #d4d8dc;border-top-color:var(--navy);animation:ofwturn .9s linear infinite}
  @keyframes ofwturn{to{transform:rotate(360deg)}}
  .ofwdetail{margin-top:2px}
  .ofwdetail > summary{cursor:pointer;font-size:var(--fs-sm);color:var(--sub)}
  .ofwdetail > .skill-code{margin:2px 0 0 var(--sp3)}
  .ofwpress{margin-top:var(--sp2)}
  /* F365 (LIST row 6.14): THE TUTOR'S ONE RECORD IN SECTIONS, What they teach, Checks, Pay, WISE and Email, each a quiet head over
     its rows, ruled apart; the register's edit drawn in What they teach keeps its own form */
  #ontrecord .ontsec{border-top:1px solid var(--grid);padding:8px 0 6px}
  #ontrecord .ontsec:first-child{border-top:0;padding-top:0}
  #ontrecord .ontsec-head{font-weight:bold;font-size:var(--fs-md);margin:0 0 6px;color:var(--ink,#292929)}
  #ontrecord .ontsec .tregedit > b{display:none}
  /* F300 (UX-E, AUDIT U23 b and c): the comments chip is a press (a button reset to the quiet oval it was) whose text opens beside
     it, and the Lead Educator's homework summary is read as text on the tutor face (his Q4 A) */
  button.tag-quiet.notes{font-family:inherit;cursor:pointer;line-height:inherit;flex-wrap:wrap}
  .notestext{white-space:pre-line;font-size:11px;color:#4a5560;text-align:left}
  .notes .notestext{display:block;flex-basis:100%;margin-top:3px}
  .hwsummaryread{font-size:12px;white-space:pre-wrap;color:var(--ink)}
  /* F298 (UX-C, AUDIT U14, U15 and U17): THE TUTOR'S PROFILE FORM, on the tutor's page and on a Lead Educator's edit of a tutor:
     one type size (the house 13, so a tick's or a choice's words no longer fall back to the browser's 16), each row a label
     column and its field, and under 600 pixels the label above its field at the full width, so the week's seven boxes and
     Preferences take the screen's width; the answer to send beside its press */
  .tprofform{font-size:var(--fs-md)}
  .tprofform .tprow{display:flex;gap:10px;align-items:flex-start;margin:6px 0}
  .tprofform .tprow-label{flex:0 0 190px;font-weight:bold;font-size:var(--fs-md)}
  .tprofform .tprow-field{flex:1 1 auto;min-width:0}
  .tprofsendrow .tprofmsg{display:inline-block;margin:0 8px 0 4px;vertical-align:middle}
  /* F330 (16 Oct 2026, the journey walk 2C 1, entry 1099): EVERY LABEL OF THE TUTOR PROFILE AT THE HOUSE 13. The week's seven
     day labels sat in a table, whose own 12.7 they took, and the Your DBS form's labels took the new form grid's 12 */
  .tprofform .availgrid,.tprofform .availgrid td.label{font-size:var(--fs-md)}
  #tprofdbsform > label{font-size:var(--fs-md)}
  /* F421: what they teach, a grid of key stages across and subjects down, one tick a cell; it fits a phone as it is */
  .tprofform .tprofgrid{border-collapse:collapse;font-size:var(--fs-md)}
  .tprofform .tprofgrid th,.tprofform .tprofgrid td{padding:3px 8px;text-align:center;border-bottom:1px solid #e6e9ee}
  .tprofform .tprofgrid th[scope="row"]{text-align:left;white-space:nowrap}
  @media (max-width: 599px){
    .tprofform .tprofgrid th,.tprofform .tprofgrid td{padding:3px 4px}
    .tprofform .tprow{display:block}
    .tprofform .tprow-label{display:block;margin:0 0 4px}
    .tprofform .availgrid,.tprofform .availgrid tbody,.tprofform .availgrid tr,.tprofform .availgrid td{display:block;width:auto !important}
    .tprofform .availgrid td.label{padding:4px 0 2px}
    .tprofform [data-offrow] input{max-width:100%;box-sizing:border-box}
  }
  /* F433 (design v2 section 3.1): THE WEEK GRID IN GOOGLE CALENDAR'S LOOK, above the week's pickers: the days across, a day
     not worked a narrow column with +, the 24 hour clock down with a line at each hour and a fainter one at each half hour
     (a half hour is 20 pixels, ui/avail-week.js AWK_PX), today's column tinted and the time now a red line; a green block
     is a free time, its top and bottom edges dragged; the busy lane at a day's right and the peak shading behind it are the
     two empty layers later rows fill */
  .awk{margin:4px 0 10px;max-width:900px;user-select:none;-webkit-user-select:none}
  .awk-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px}
  .awk-bar .awk-arrow{min-width:32px;font-weight:bold}
  .awk-span{font-weight:bold;margin:0 6px}
  .awk-key{font-size:var(--fs-sm);color:#4a5560;margin-left:auto}
  .awk-swatch{display:inline-block;width:12px;height:12px;border-radius:4px;background:#b7e1c1;border:1px solid #33a457;vertical-align:-2px}
  .awk-head,.awk-body,.awk-names{display:flex}
  .awk-name{flex:1 1 0;min-width:0;font-size:11px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .awk-name.awk-named{background:#fef7e0;color:#7a4a00;border-radius:4px}
  .awk-body{position:relative;border-top:1px solid #dadce0;border-bottom:1px solid #dadce0}
  .awk-gutter{flex:0 0 46px;position:relative}
  .awk-head .awk-gutter{height:1px}
  .awk-hour{position:absolute;right:6px;transform:translateY(-50%);font-size:11px;color:#70757a}
  .awk-hour:first-child{transform:none}
  .awk-dh{flex:1 1 0;min-width:0;text-align:center;padding:4px 0;font-size:var(--fs-md);color:#3c4043}
  .awk-dh .awk-dd{font-size:18px}
  .awk-dh.awk-today .awk-dd{display:inline-block;min-width:26px;border-radius:999px;background:#1a73e8;color:#fff}
  .awk-col{flex:1 1 0;min-width:0;position:relative;box-shadow:inset 1px 0 0 #dadce0;touch-action:none;cursor:pointer;
    background:repeating-linear-gradient(to bottom,transparent 0,transparent 19px,#f1f3f4 19px,#f1f3f4 20px,transparent 20px,transparent 39px,#dadce0 39px,#dadce0 40px)}
  .awk-col.awk-today{background-color:#f6faff}
  .awk-dh.awk-fold,.awk-col.awk-fold,.awk-name.awk-fold{flex:0 0 26px;cursor:default}
  .awk-col.awk-fold{background:#f8f9fa}
  .awk-plus{border:1px solid #dadce0;background:#fff;border-radius:999px;width:22px;min-height:44px;padding:0;cursor:pointer;font-weight:bold;color:#1a73e8;display:block;margin:0 auto 2px}
  .awk-layer{position:absolute;top:0;bottom:0;pointer-events:none}
  .awk-peak{left:0;right:0}
  .awk-busy{right:0;width:8px}
  .awk-block{position:absolute;left:2px;right:11px;box-sizing:border-box;background:#b7e1c1;border:1px solid #33a457;border-radius:6px;font-size:11px;color:#0d4f22;overflow:hidden;padding:1px 4px;z-index:1}
  .awk-block.awk-sel{box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:2}
  .awk-block.awk-ghost{opacity:.7;pointer-events:none}
  .awk-edge{position:absolute;left:0;right:0;height:6px;cursor:ns-resize}
  .awk-edge.awk-top{top:0}
  .awk-edge.awk-bottom{bottom:0}
  .awk-bt{display:block;pointer-events:none;white-space:nowrap;margin-top:2px}
  .awk-remove{position:relative;z-index:3;padding:0 6px;font-size:11px}
  .awk-now{position:absolute;left:0;right:0;height:2px;background:#ea4335;z-index:3;pointer-events:none}
  .awk-more{margin:4px 0}
  .awk-why{display:block;margin-top:4px}
  /* F435 (design v2 section 3.3): the peak student hours shaded behind the cells, three blues by level (data/peak-hours.js), and the
     key under the first column, the presses below it moved down to make room */
  .awk-pk{position:absolute;left:0;right:0}
  .awk-pk-quiet{background:transparent}
  .awk-pk-some{background:rgba(26,115,232,.07)}
  .awk-pk-busy{background:rgba(26,115,232,.14)}
  .awk-pk-busiest{background:rgba(26,115,232,.24)}
  .awk-pkkey{position:absolute;top:100%;left:0;margin-top:4px;width:260px;font-size:11px;color:#4a5560;z-index:1}
  .awk-pkkey span{display:inline-block;width:12px;height:10px;vertical-align:-1px;border:1px solid #c8d3e0}
  .awk-body:has(.awk-pkkey) + .awk-more{margin-top:24px}
  .tregpeakgrid{border-collapse:collapse;font-size:11px}
  .tregpeakgrid th{font-weight:normal;color:#70757a;padding:0 2px;text-align:left}
  .tregpeakgrid td{width:12px;height:14px;border:1px solid #eef1f5;cursor:pointer}
  /* F437 (design v2 section 3.2): the tutor's own calendar's busy times, grey blocks with no words in the lane at a day's right;
     the sync panel above the grid and its guide */
  .awk-bz{position:absolute;left:0;right:0;background:#9aa0a6;border-radius:4px}
  .tprofcal{margin:0 0 8px}
  .tprofcal .tprofcal-guide ol{margin:4px 0 4px 18px;padding:0}
  /* F323 (15 Oct 2026, the release v197 walk, entry 1083): on a phone the profile's DBS form is one column, its file input
     inside the card (it pushed the page 16 pixels sideways at 500), and the profile's send and the DBS card's presses are 44
     high like the bar's (they stood 31). The form's columns are an inline style, so the one column here says !important. */
  @media (max-width: 599px){
    #home #tprofdbsform{grid-template-columns:minmax(0, 1fr) !important}
    #home #tprofdbsform > span{min-width:0;overflow-wrap:anywhere}
    #home #tprofdbsform label{white-space:normal !important}
    #home #tprofdbsfile{max-width:100%;box-sizing:border-box}
    #home #tprofsend,#home #tprofdbs .btn,#home #tprofdbs .btn-push{min-height:44px;box-sizing:border-box}
  }
  /* F301 (UX-F, AUDIT U6, U8, U9, U19, U20 and U21), with his Q6 B of 14 Oct 2026 (a tutor reads on a phone and grades on a
     laptop): THE PHONE AND THE PAGE CHROME, in new rules beside F271's. The tutor bar's and the tutor home's presses are 32
     high (44 on a phone, below); the tab group labels, the inactive tabs and the version beside the title take a grey of at
     least 4.5 to 1 (the version's own inline grey is the shell's, so this rule says !important). */
  #stubar > .btn,#stubar > a.btn,#stubar > .barmore > .btn,#homerefresh,#tprofduego,#tprofyes,#homesignin,#home .tprofform .btn{min-height:32px;box-sizing:border-box;vertical-align:middle}
  #stubar > a.btn,#homesignin{display:inline-flex;align-items:center;text-decoration:none}
  .tabgroup-label{color:#5f6670}
  .tab:not(.active),.tabmore-btn:not(.active){color:#5f6670}
  .wrap > h1 > span{color:#5f6670 !important}
  @media (max-width: 599px){
    #stubar > .btn,#stubar > a.btn,#stubar > .barmore > .btn,#homerefresh,#tprofduego,#tprofyes,#homesignin,#home .tprofform .btn{min-height:44px}
    /* the tutor home's list scrolls inside a box the width of the card, so the page is the screen's width */
    #home table#homelist{display:block;max-width:100%;overflow-x:auto}
    /* a recap row puts the skill's name on its own first line and the pills under it, never hiding the name */
    .rcrow{flex-wrap:wrap}
    .rcrow .rcname{flex:1 1 100%;white-space:normal;overflow:visible}
    /* a School position card is at most the screen's width less its arrows, its words wrapping inside it */
    .check-carousel .check-row .unit{flex:0 0 min(240px, 72vw);min-width:0;max-width:min(240px, 72vw);box-sizing:border-box;overflow-wrap:anywhere}
    /* Progress's and Independent work's tables scroll inside their own box (the page stays the screen's width) */
    #pages .scroll{max-width:100%;overflow-x:auto}
  }
  /* F316 (the release v197 walk, entry 1069): THE STUDENTS LIST FITS ITS FRAME WITH REAL DATA at 1280 and 1440, every row one
     line high. Staging's long first names, a course on every row, the Client column and two pills in Where they are held the
     table 40 to 100 pixels wider than #facetable and a two pill row 18 pixels taller than a one pill row. From 1200 pixels:
     the cells keep 6 pixels each side; the first name, the client, the course, the Lead Educator and the tutor end in an
     ellipsis at their width (the whole words in the hover); the pills keep one line in .facepills, the first pill whole and
     any after it cut short with an ellipsis only when the cell has no more room (each pill's hover carries its words). */
  @media (min-width:1200px){
    #face table#facelist th:not(.facemenucol),#face table#facelist td:not(.facemenucol){padding-left:6px;padding-right:6px}
    #face table#facelist td.facewhere{padding-right:0}
    #face #facelist td.facefirst a.facename{display:inline-block;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
    #face #facelist td.faceclient .client-tag{display:inline-block;max-width:96px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
    #face #facelist td.facecourse .regpick,#face #facelist td.facele .regpick,#face #facelist td.facetutor .regpick{max-width:116px}
    /* F397 (the v213 walk, entry 1220 item 2 c): A PRESS'S OWN WORDS ARE NEVER CUT. The course's choice takes its course's whole
       name (up to 280 pixels, so every shipped course reads whole, IB Maths Applications and Interpretation, HL the longest), an
       empty choice's press (+ choose a course) is always whole, and while the Client column is hidden (as on staging) the Lead
       Educator's and the tutor's take V8's 150 (IN3). With the Client column shown they keep F316's 116, so the second pill of
       Where they are stays whole (KC3). Only a name longer than that still ends in its ellipsis, whole in the choice's hover */
    #face #facelist td.facecourse .regpick{max-width:280px}
    #face table#facelist.noclient td.facele .regpick,#face table#facelist.noclient td.facetutor .regpick{max-width:150px}
    #face #facelist .regpick.empty{max-width:none}
    #face #facelist .regroom{white-space:nowrap}
    #face #facelist td.facewhere{width:100%}
    #face #facelist td.facewhere .facepills{display:flex;flex-wrap:nowrap;align-items:center;width:0;min-width:100%;overflow:hidden}
    #face #facelist .facepills > .facepill{flex:0 1000 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
    #face #facelist .facepills > .facepill:first-child{flex-shrink:1}
  }
  /* F316 (F271's V17 kept to the letter): EVERY CHOICE ON SET UP THE FAMILY IS AT MOST 240 PIXELS, not only those in its grids:
     the course's payment terms (Postpaid, per session, after every session) and Next email's Write another email were 266
     and 280 on staging v197; a choice's long words are cut by the box, and the list it opens shows them whole */
  #onbfam select{max-width:240px}
  /* F309 (F295-E, his D12 "in a nice visually clear way" and Q6 B, laptop first): THE VALIDATION VIEW'S TWO PANES AND CLAUDE'S
     OUTLINE, beside F271's block. The work on the left (about 55 per cent), Claude's proposal on the right (about 45), side by
     side with no page scroll sideways at 1280 and 1440; below 900 pixels the two stack. While the view is open it stands in
     place of the card's body (the head and the strips above it stay). The grade Claude proposed is outlined on its press. */
  .hwv-view{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:12px;margin-top:8px;align-items:start}
  .hwv-pane{min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;padding:8px;background:#fff;overflow-wrap:anywhere}
  .hwv-work .hwv-page{max-height:78vh;overflow:auto;border:1px solid var(--line);border-radius:4px;background:#f4f5f7}
  .hwv-row{border-top:1px solid var(--line);padding:6px 0}
  .hwv-row[data-hwv-flag="1"]{background:#fff8e6}
  .hwv-view .rating button{width:auto;min-width:58px}
  .rating button.hwv-claude,.btn.hwv-claude{outline:2px dashed #1f5fbf;outline-offset:1px}
  .lesson:has(> .hwv-band[data-hwv-open="1"]){display:flex;flex-direction:column}
  .lesson:has(> .hwv-band[data-hwv-open="1"]) > .lesson-head{order:-1}
  .lesson:has(> .hwv-band[data-hwv-open="1"]) > .hwv-band[data-hwv-open="1"] ~ :not(.lesson-head){display:none}
  @media (max-width: 899px){ .hwv-view{grid-template-columns:minmax(0,1fr)} }
  /* F528 (ruling 838, F314 V2-2 a: on a phone the checking screen stacks into one column; his Q6 B, the laptop preferred). The
     see the work press is drawn only under 760 pixels, where the work folds above the rows (folded until pressed), every press is
     at least 40 pixels tall (the two file choosers too, review r2) and the grade presses wrap, so nothing scrolls sideways at
     390; at 760 and over nothing moves. */
  .hwv-fold{display:none}
  @media (max-width: 759px){
    .hwv-view{grid-template-columns:minmax(0,1fr)}
    .hwv-fold{display:block;width:100%}
    .hwv-work[data-hwv-folded="1"] > :not(.hwv-fold){display:none}
    .hwv-band button,.hwv-band .btn{min-height:40px}
    .hwv-view .rating{display:flex;flex-wrap:wrap}
    .hwv-view .rating button{flex:1 1 58px}
    .hwv-band input[type="file"]{max-width:100%;min-height:40px;box-sizing:border-box}
  }
  /* F603 (the F556 walk, finding 11): THE WEEKLY AVAILABILITY TABLE ON THE CONSULTATION PAGE TELLS ITS BOXES APART. The example
     is said once, in the hint line above the table; each row's two boxes carry their names (Times and Notes), shown at phone
     width, where the head row is folded away and a day's boxes stack under its name; a time typed in a day's notes is flagged
     under that box. A sheet of its own, listed last (RF01 item 5). */
  .availhint{background:#f4f7fa;border:1px solid #d6dde4;border-radius:6px;padding:7px 12px;margin:6px 0;font-size:12.5px;color:#2d3b48;line-height:1.45}
  .availhint b{color:#1b3348}
  .availlab{display:none;font-size:11px;font-weight:bold;color:#4b4f55;letter-spacing:.3px;margin:0 0 2px}
  .availflag:empty{display:none}
  .availflag{margin:4px 0 0;padding:4px 8px;border:1px solid #e2ab5f;border-radius:4px;background:#fde3d1;color:#7a3a00;font-size:12px;font-weight:bold;line-height:1.4}
  .availflag .btn{margin-left:4px}
  @media (max-width: 599px){
    #pages table.availgrid:has(tr[data-avail-day]),#pages table.availgrid:has(tr[data-avail-day]) tbody{display:block;width:100%}
    #pages table.availgrid:has(tr[data-avail-day]) tr:first-child{display:none}
    #pages table.availgrid tr[data-avail-day]{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding:6px 0;border-bottom:1px solid #e3e6ea}
    #pages table.availgrid tr[data-avail-day] > td{display:block;width:auto;padding:2px 0 !important;border:0}
    #pages table.availgrid tr[data-avail-day] > td.label{grid-column:1 / -1;font-weight:bold}
    #pages table.availgrid tr[data-avail-day] > td.availnotes{grid-column:1 / -1}
    #pages table.availgrid tr[data-avail-day] > td.ukcol::before{content:'Time in UK';display:block;font-size:11px;font-weight:bold;color:#4b4f55;letter-spacing:.3px;margin:0 0 2px}
    #pages table.availgrid tr[data-avail-day] .availlab{display:block}
  }   /* F603: the end of the phone width rules */
  /* F517 (ruling 729, F142's build ask F142-A): RESOURCES IN TEACH MODE. The role in small type before the source's name,
     and a reference in words (no link) for the Textbook line (ruling 831). A new sheet listed last (the build skill v14
     step 4 b); the Resources pop-out's own rules stay in styles/planner-lesson-sequence.css. */
  .res-pop .res-who{display:block;min-width:0}
  .res-pop .res-role{display:block;font-size:10px;line-height:1.3;color:var(--teach);font-weight:bold;text-transform:uppercase;letter-spacing:.03em}
  .res-pop .res-name.res-ref{color:var(--ink);font-weight:bold;font-size:14px}
  /* In Teach mode only, a drawn Resources button is outlined in the Teach instruction's green, and the pop-out opened from
     it (it lives in #pages, outside .view-teach) carries a green top edge. Overview is unchanged. */
  .view-teach .btn-res{outline:2px solid var(--teach);outline-offset:1px;box-shadow:0 0 0 4px rgba(46,125,50,.18)}
  #pages:has(.view-teach .btn-res.on) .res-pop{border-top:3px solid var(--teach)}
  /* F520 (Teach from, F142's build ask F142-D): the line of chips between a Teach row and its questions area, and Our
     sequence's two boxes, the worked example and Try one; the drawing is reviews/MOCKUP - The Teach Side, What Sits Under
     A Teach Row, 2 Oct 2026 v1.html variation D. A new sheet listed last (the build skill v14 step 4 b); the questions
     area's own rules stay in styles/planner-lesson-sequence.css. */
  table.lessontable tr.tf-row > td.tf-cell{padding:0 7px;border-top:0}
  .teach-from{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid #e5e0c8;border-top:0;padding:6px 12px;font-size:12px}
  .tf-h{font-size:10.5px;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;color:var(--teach);margin-right:4px}
  .tf-chip{display:inline-block;border:1px solid var(--teach);color:var(--teach);background:#fff;border-radius:999px;padding:2px 10px;font-size:11.5px;line-height:16px;cursor:pointer;text-decoration:none;font-family:inherit}
  .tf-chip.tf-ours.on{background:var(--teach);color:#fff}
  .tf-chip.tf-words{cursor:default;border-style:dashed}
  .tf-ref{color:#4a5560;margin-left:4px}
  .qa-seq-at{font-size:12px;color:#202124}
  .qa-seq-n{color:var(--sub);margin-left:4px}
  .qa-seq-nav{margin-left:auto;display:inline-flex;gap:4px}
  .qa-seq-nav button[disabled]{opacity:.4;cursor:default}
  .qa-boxes.qa-seq-boxes{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .qa-q.qa-worked{background:#f6faf6;border-color:#a9cfab}
  .qa-try-refresh{margin-left:auto;margin-right:8px}
  @media (max-width: 760px){ .qa-boxes.qa-seq-boxes{grid-template-columns:minmax(0, 1fr)} }
  /* F534 (ruling 845, F488 D1 a): THE SHORTLIST OF SECTION 7 OF BUILD NEXT BLOCK, its room line, its rule, the lane chip on each
     line, and the fold "Everything else, by lane" under it. A sheet of its own, listed last (RF01 item 5). */
  .recshort{margin:6px 0 10px}
  .recshort-room{font-weight:bold;font-size:12.5px;margin:0 0 3px}
  .recshort-rule{font-size:11.5px;color:var(--sub);margin:0 0 4px}
  .recshort-settling .advice-buttons{pointer-events:none}   /* a double press never lands on the card that slid up */
  .recrest{border:1px dashed var(--grid);border-radius:6px;margin:8px 0}
  .recrest-head{padding:7px 12px;font-weight:bold;font-size:12.5px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
  .recrest-count{font-weight:normal;font-size:11.5px;color:var(--sub)}
  .recrest-body{padding:0 10px 8px}
  .tag-lane{display:inline-block;font-size:10.5px;border:1px solid var(--grid);border-radius:999px;padding:0 6px;margin:2px 4px 2px 0;background:#f4f5f6;color:#4a4f56}
  /* F535 (ruling 848, F488 D2 a): a lane's tail, test list, footer and lane 6's due list, each folded to one line with its count */
  .recfold{margin:8px 0 2px;font-size:12px;font-weight:bold;color:var(--sub);cursor:pointer}
  /* F535 (ruling 847, F488 D3 a item 3): the unmatched scheme rows, moved from lane 5 to the School scheme of work page */
  .sowmapfix{margin-top:4px}
  /* F453: SET UP THE FAMILY IN REACH UNTIL IT IS DONE, beside the name on the student's bar and on an active lead's row from Said
     yes: the button while the family's set up is not complete, then on the bar a small dated mark that still opens the page. On
     the lead's row it stands on a line of its own under the row's press and wraps its own words, so the list keeps its frame.
     F844 (one press per lead row): on the lead's row it is a line of the row's ... menu, so its row rules (.onbsetuplead) are gone. */
  .onbsetupslot{display:inline-flex;align-items:center}
  .onbsetupbtn{font-size:12.5px;padding:3px 10px;white-space:nowrap}
  .onbsetupmark{font-size:12px;color:#1e6b34;text-decoration:none;white-space:nowrap}
  .onbsetupmark:hover{text-decoration:underline}
  /* F522 (F218 Q1 b, ruling 832): a tutor's own resources on a lesson. The Yours line, last in a skill's Resources pop-out,
     its chips, and the add box and the text panel it opens over the page. A new sheet listed last (the build skill v14
     step 4 b); the pop-out's own rules stay where they are. */
  .res-pop .res-yours{border-top:1px solid #e3e6ea;margin-top:2px}
  .res-pop .res-yours .res-yours-name{color:var(--teach)}
  .res-pop .res-yours .res-yours-name:after{content:none}
  .res-pop .res-yours-items{grid-column:2 / 4;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0}
  /* F775 (release v277 walk B, shortfall 2): an item's row never runs past the pop-out: the chip shrinks (its title cut with
     dots) and the buttons, never cut, go to a second line when even that does not fit */
  .res-pop .lres-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;max-width:100%;min-width:0}
  .res-pop .lres-item .btn-inline{flex:none}
  .res-pop .lres-chip{background:#eef4fb;border-radius:999px;padding:1px 9px;font-size:12.5px;color:var(--diag);text-decoration:none;cursor:pointer;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0;box-sizing:border-box}
  .res-pop .lres-draft{color:#9a6700}
  .lres-box{position:fixed;z-index:80;left:50%;top:12vh;transform:translateX(-50%);width:520px;max-width:calc(100vw - 32px);box-sizing:border-box;background:#fff;border:1px solid #c9ced4;border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:12px 16px;display:flex;flex-direction:column;gap:8px;text-align:left}
  .lres-box textarea{min-height:140px;resize:vertical;font:inherit}
  .lres-box .lres-textbody{white-space:pre-wrap;max-height:50vh;overflow:auto;border:1px solid #e3e6ea;border-radius:4px;padding:8px;font-size:13px}
  .lres-box .lres-foot{display:flex;gap:8px;justify-content:flex-end}
  .lres-box .lres-draft{color:#9a6700}
  /* F512 (FUTURE WORK line 25, ruling 307, ruled a by Josh B on 19 Oct 2026): THE MARK ON A LINE DRAWN FROM A SCHEME ROW THE LEAD
     EDUCATOR HAS NOT VALIDATED (a lane 1 card, a section 9 line, the pointer, the coverage count). Planning reads every row as
     before; only this mark is added. A sheet of its own, listed last (RF01 item 5). */
  .tag-unchecked{display:inline-block;background:#fdf3dd;border:1px dashed #c9a24a;color:#7a5410;border-radius:999px;font-size:10px;font-weight:bold;padding:1px 6px;margin-left:6px;white-space:nowrap;cursor:help}
  /* a folded card's tags line does not wrap (.advice-card.shut .recline-tags, planner-planning.css), so at a phone's width the
     mark would run past the card's edge; the line carrying it may wrap before it */
  .advice-card.shut .recline-tags:has(> .tag-unchecked){white-space:normal}
/* ============================================================ F679: THE FIRST REVIEW'S BOXES ON NEXT EMAIL (23 Oct 2026)
   The end of intro email, one a child, drafted from the records (ui/next-email.js nxIrHtml): each part a box with the line that
   says where it came from, the subject's parts grouped under its heading, the email as it will go, and the choice of who the
   draft goes to (the test first). A new sheet listed last (RF01 item 5). No em dashes. */
.nxir{margin:6px 0 8px;padding:8px 10px;border:1px solid #e3e3e3;border-left:4px solid #B79C68;border-radius:6px;background:#fffdf8}
.nxir .nxirhead{margin:0 0 6px}
.nxir .nxirhead .skill-code{display:block;margin-top:2px}
.nxir .nxirsub{margin:8px 0 4px;padding:6px 0 0;border-top:1px solid #efe7d6}
.nxir .nxirsubhead{font-family:'Cormorant Infant',Georgia,'Times New Roman',serif;font-size:20px;color:#111039;margin:0 0 4px}
.nxir .nxirbox{margin:4px 0 8px}
.nxir .nxirlabel{font-size:var(--fs-sm);font-weight:600;color:#292929;margin:0 0 2px}
.nxir .nxirlabel .chip{font-weight:normal}
.nxir .nxirreset{font-size:var(--fs-sm);font-weight:normal;margin-left:4px}
.nxir textarea.input-area{width:100%;box-sizing:border-box;min-height:46px;resize:vertical}
.nxir .nxirpaste textarea.input-area{background:#fbfbfb;border-style:dashed}
.nxir .nxirfrom{margin-top:2px}
.nxir .nxirpreview{margin:8px 0}
.nxir .nxirpreview summary{cursor:pointer;font-size:var(--fs-sm)}
.nxir .nxirmail{border:1px solid #ddd;max-height:520px;overflow:auto;background:#fff;margin-top:6px}
.nxir .nxirto{margin:8px 0 4px}
.nxir .nxirto select{max-width:100%}
.nxirwa{margin:4px 0}
/* F695: THE STUDENT AT A GLANCE, the card at the top of the Lead Educator's student page (ui/student-glance.js). */
#glance { margin: 8px 0 6px; }
#glance .glance { margin: 0; }
#glance .glance-now { font-size: 13.5px; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#glance .glance-then { margin-bottom: 6px; }
#glance .glance-sec { border-top: 1px solid #e3e3ea; padding: 4px 0; }
#glance .glance-sec > summary { cursor: pointer; font-size: 12.5px; padding: 2px 0; }
#glance .glance-line { font-size: 12.5px; padding: 3px 6px; margin: 2px 0; border-left: 4px solid transparent; overflow-wrap: anywhere; }
#glance .glance-line.glance-old { background: #fff4d6; border-left-color: #d99a00; }
#glance .glance-src { color: #6b6b78; font-size: 11.5px; white-space: nowrap; }
#glance .glance-go, #glance .glance-del { padding: 0 6px; font-size: 11.5px; }
#glance .glance-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
#glance .glance-add #glancenote { flex: 1 1 220px; min-width: 0; }
  /* F686 (23 Oct 2026): Build Next Block, a new student with the diagnostic skipped: the course in order fold and the trigger's keep line */
  .bco{margin:8px 0;border:1px solid var(--line, #d9d9d9);border-radius:6px;padding:6px 8px}
  .bco-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .bco-title{font-size:12px;font-weight:bold;color:var(--sub);cursor:pointer}
  .bco-room{font-size:11px;color:var(--sub)}
  .bco-body{margin-top:6px}
  .bco-topic{margin:6px 0 2px}
  .bco-topic-name{font-size:12px;font-weight:bold}
  .bco-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px 0 2px 12px;font-size:12px}
  .bco-sub-name{min-width:0;overflow-wrap:anywhere}
  .bco-trig{margin-top:4px;font-size:11px;color:var(--sub)}
  /* F672 (release v259 walk E, entry 1646, a shortfall of F657): THE TUTORS' REGISTER TELLS NOT CONFIRMED FROM OUT OF DATE BY
     COLOUR. Both chips wore chip-stale's one pink, so a tutor asked two weeks ago and one out of date at six looked alike. Not
     confirmed reads amber and out of date red; chip-stale, tregstale and the data attributes stay on both chips for every reader.
     Each text is at contrast 4.5 to 1 or more on its own background. A sheet of its own, listed last (RF01 item 5). */
  .chip.tregchip-notconfirmed{background:#fff4e0;color:#7a4a00;border-color:#e6c07a}
  .chip.tregchip-outofdate{background:#c5221f;color:#fff;border-color:#a31b18}
/* ============================================================ F694: PERSONALISE FROM THE LESSONS, ON THE FIRST REVIEW (23 Oct 2026)
   The press, the paste box and the review list inside F679's first review (ui/next-email.js nxRpHtml): each personal line with
   where it came from, accepted, edited or dropped; an accepted line marked in gold. A new sheet listed last (RF01 item 5). No em dashes. */
.nxrp{margin:6px 0 10px;padding:8px 10px;border:1px dashed #B79C68;border-radius:6px;background:#fff}
.nxrp .nxrphead{margin:0 0 6px}
.nxrp .nxrphead .skill-code{display:block;margin-top:2px}
.nxrp textarea.input-area{width:100%;box-sizing:border-box;min-height:40px;resize:vertical}
.nxrp .nxrprefused{margin:4px 0;font-size:var(--fs-sm);color:#8a5a00}
.nxrp .nxrplist{margin:6px 0 0}
.nxrp .nxrpline{margin:6px 0;padding:6px 8px;border:1px solid #e3e3e3;border-radius:6px}
.nxrp .nxrpline.nxrp-accepted{border-left:4px solid #B79C68;background:#fffdf8}
.nxrp .nxrpline .btn{margin-top:4px}
.nxrp code{white-space:normal}
  /* F689 (Josh B's Q7 answer B of 23 Oct 2026): the School papers tab (ui/tab-papers.js), one line per paper kept in the student's
     Drive folder. A new sheet listed last (the build skill v14 step 4 b); no shared rule is changed. */
  #papwhy, #papconfirm{display:block;margin:6px 0;padding:8px 10px;border-radius:6px;font-size:var(--fs-md);line-height:1.4}
  #papsaid{margin:6px 0}
  #papfolder .papquiet{font-size:var(--fs-sm);padding:2px 8px;margin-left:8px;background:transparent;border:1px solid var(--line-strong);color:var(--ink-2)}
  .papadd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .papadd > .skill-code:last-child{flex-basis:100%}
  .papadd input[type="file"]{max-width:100%}
  .paplist{width:100%}
  .paplist td.papacts{white-space:nowrap}
  .paplist td.papacts .btn{margin:1px 2px}
  .papstate{font-size:var(--fs-sm);border-radius:999px;padding:1px 8px}
  .papstate-filed{background:#fff4d6;color:#7a5200}
  .papstate-checked{background:#e3f4e8;color:#1d6b3a}
  .papstate-rejected{background:#f1f2f4;color:#5b6570;text-decoration:line-through}
  .paplist tr[data-papstate="rejected"] td{color:#7b848d}
  #papchange label, .papadd label{margin-right:4px}
  @media (max-width: 700px){
    .paplist td.papacts{white-space:normal}
    .paplist{display:block;overflow-x:auto}
  }
  /* F548 (the trap box in the question section, F521's build ask F521-B, ruling 866): the fourth box, TRAP, after Start,
     Build and Stretch, narrower, with a dashed edge in the sub grey (no new colour: amber means Hard), and its folded slip;
     the drawing is reviews/MOCKUP - The Core Misconceptions Question Set v1.html panel 1. A new sheet listed last (the
     build skill v14 step 4 b); the three boxes' own rules stay in styles/planner-lesson-sequence.css. */
  .qa-boxes.qa-has-trap{grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, .75fr)}
  .qa-q.qa-trap{border:2px dashed var(--sub)}
  .qa-q.qa-trap.used{border-color:#7fb685;border-style:dashed}
  .qa-slip{border-top:1px solid #e3e6ea;margin-top:6px;padding-top:4px;font-size:12px}
  .qa-slip b{display:block}
  @media (max-width: 760px){ .qa-boxes.qa-has-trap{grid-template-columns:minmax(0, 1fr)} }
  /* F708 (F549's builder, entry 1702): a Teach row's Our sequence grid with the trap as its third box keeps Worked example,
     Try one and the trap on one line (the sequence grid of planner-teach-from.css has two columns); a row without a trap
     keeps its two, and a phone keeps one. */
  .qa-boxes.qa-seq-boxes.qa-seq-has-trap{grid-template-columns:repeat(2, minmax(0, 1fr)) minmax(0, .75fr)}
  @media (max-width: 760px){ .qa-boxes.qa-seq-boxes.qa-seq-has-trap{grid-template-columns:minmax(0, 1fr)} }
  /* F464 (F238 section 5, rulings 791 and 792): OPTIONAL TOPICS. The option step (Which option does the school teach?) on Details
     and at the head of the course picker; Progress's Not sat group, the options a student does not sit, greyed under the spine;
     the Checklist's Choose the option row, drawn and never stored */
  .cpoptions{margin:2px 0}
  .notsat{margin-top:14px;opacity:.6}
  .notsat .notsat-option{margin:4px 0}
  #chk-option-action .tag-warning{font-weight:normal}
  /* F722 (walk LE1 of the full Lead Educator test, 24 Oct 2026, staging v267): WHERE THEY ARE STACKS A CHILD'S SUBJECT LINES.
     From 1200 pixels .facepills keeps its pills on one line (F316), so a child of a Maths and a Science record drew the two
     subject lines side by side and the Science line ran past the cell under the row's more button. A child's subject lines
     (.facesubjs) now sit one under the other, as the Course and Tutor cells' do, each line inside its cell and its pill cut
     with an ellipsis only when the cell has no more room (the pill's hover carries its words). A child of one record keeps
     F316's one line */
  #face #facelist td.facewhere .facepills.facesubjs{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  #face #facelist .facepills.facesubjs > .facesubj{min-width:0;max-width:100%;overflow:hidden}
  #face #facelist .facepills.facesubjs > .facesubj > .facepill{min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* F739 (walk RE1, 25 Oct 2026, staging v273, a fix of F722): WHERE THEY ARE READS WHOLE AT 1280 AND THE COLUMN IS IN VIEW.
     F316's .facepills is 0 wide by its own measure (width 0, at least the cell), so a child's stacked subject lines gave the
     column no width of its own: the table grew past its box on the Lessonspace cell and Where they are kept 98 pixels, each
     pill cut to its first letter. From 1200 pixels a child's subject lines (.facesubjs) give the column the width their pills
     need, each pill whole; the Lessonspace cell's presses keep to their own width (the masked link shortened in faceTableHtml),
     so the table fits its box at 1280. A child of one record keeps F316's one line; 390 keeps its form. */
  @media (min-width:1200px){
    #face #facelist td.facewhere .facepills.facesubjs{width:auto;min-width:0;overflow:visible}
    #face #facelist .facepills.facesubjs > .facesubj{overflow:visible;max-width:none}
    #face #facelist .facepills.facesubjs > .facesubj > .facepill{flex-shrink:0;overflow:visible;text-overflow:clip}
    /* a subject line's chips after its pill (report owed, pay, HW) go under the pill when the column has no more room */
    #face #facelist .facepills.facesubjs > .facesubj{flex-wrap:wrap}
    /* the Lessonspace cell its presses' own width, at most 180 pixels (never squeezed below it, so a short cell keeps one line): the masked class link, copy and open on one line, a second link and edit under them */
    #face #facelist td.faceroom .regroom{display:inline-block;width:max-content;max-width:180px;white-space:normal;vertical-align:middle}
    #face #facelist td.faceroom .regroom code,#face #facelist td.faceroom .regroom button,#face #facelist td.faceroom .regroom a,#face #facelist td.faceroom .regroom .chip{white-space:nowrap}
  }
  /* F776 (the release v277 walk C r2, 25 Oct 2026, a fix of F739): THE STUDENTS LIST FITS 1280 WITH A SCROLLBAR. On staging a
     1280 window with its 15 pixel scrollbar leaves the list a box of 1183, and real course names (KS3 National Curriculum
     Science, Year 8 on a child's second line), a Further Maths line still to choose its course and tutor, and a child with no
     year held the table at 1394, so Where they are sat wholly off screen until the list was scrolled sideways. When the drawn
     table is wider than its box it takes .facetight (faceListFit, ui/face-register.js), and from 1200 pixels: a course's name
     wraps its whole words onto a second line (at least 150 pixels, so a KS3 or IGCSE name takes two lines, never three), and so
     do an empty press (choose a year, + choose a course, + pair a tutor), a subject's name on a child's line and the client's
     tag; the Lessonspace cell keeps to its presses' own width (152, the masked link and copy on one line). Nothing is cut:
     every word still reads, the whole name in the hover. A list with the room never takes it and keeps F316's one line; a
     child of one record and 390 are unchanged. */
  @media (min-width:1200px){
    #face table#facelist.facetight td.faceroom .regroom{max-width:152px}
    #face table#facelist.facetight td.facecourse .regpick{white-space:normal}
    #face table#facelist.facetight td.facecourse .regpick:not(.empty){min-width:150px}
    #face table#facelist.facetight td.faceyear .regpick.empty,#face table#facelist.facetight td.facetutor .regpick.empty{white-space:normal}
    #face table#facelist.facetight .facesubj > .facesubjname{white-space:normal}
    #face table#facelist.facetight td.faceclient .client-tag{white-space:normal}
  }
  /* F800 (one clock for each child, 25 Oct 2026): MY CLOCK'S PRESSES AT THE PRESS SIZE. The bar's presses (keep it, the one
     picker's button, Show times in and change my clock) on the tutor's home and the Lead Educator face are 32 pixels high
     from 600 and 44 on a phone, as every press on the tutor bar and the home is (JP22). */
  .clocksbar .btn,.clocksbar .tzbtn,[id^="clocksdev-"] .btn{min-height:32px;box-sizing:border-box}
  @media (max-width: 599px){ .clocksbar .btn,.clocksbar .tzbtn,[id^="clocksdev-"] .btn{min-height:44px} }
  /* F773 (25 Oct 2026, Juliet: "make science more closely match maths", inside the Choose a course picker): THE SCIENCE STEPS IN
     THE MATHS LIST'S FORM. The rows, bands, pills, count and legend are the maths list's own classes (planner-face.css, F123); this
     sheet holds only what science alone needs: a Which Science? route row carries the maths course row's arrow (it opens a step,
     not tiers), a step's name and Back share one grey line, and a Separate board is a row of tier pills laid out as a course row
     is (its name, then its tiers under it as the maths list's tiers open under a course). A list row's name reads from the left when it wraps (inside Details' key and value card it took the card's right align). */
  .cppanel .cplist .cpname{text-align:left}
  .cplist button.cpfam.cpgo::after{content:"\25B8";color:#7a8190;font-size:11px}
  .cpscihead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 4px}
  .cplist .cpsciboard{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:5px 12px;font-size:12.5px;color:#1d2330}
  .cplist .cpsciboard > .cpname{flex:1 0 100%;min-width:0}
  .cplist .cpsciboard[data-sci-none] > .cpname{flex:1 1 auto}
  .cplist .cpscipills{display:flex;flex-wrap:wrap;gap:6px;padding-left:14px}
  .cplist .cpsciboard[data-sci-none] > .cpscipills{padding-left:0}
  .cpcount[data-sci-count]{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* ============================================================ F792: THE PROPOSED FACTS CARD (25 Oct 2026)
   Row F792 (T458-6 of reviews/DESIGN - One Source Of Truth For Each Student, 25 Oct 2026 v1.md section 5.5, Juliet's Q6 A): the card
   above Student at a glance (ui/fact-proposals.js), one row a proposal with its three presses, the Edit box and Accept all's list.
   Read whole at 1280 and at 390 (the presses wrap). No em dashes. */
.factprops { margin-bottom: 10px; }
.factprops .fp-item { border-top: 1px solid var(--line, #e3e3e3); padding: 6px 0; }
.factprops .fp-row { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.factprops .fp-k { min-width: 84px; color: var(--muted, #666); }
.factprops .fp-src { font-size: 12px; }
.factprops .fp-press { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.factprops .fp-reason { width: 160px; max-width: 100%; }
.factprops .fp-edit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.factprops .fp-contact { width: 140px; max-width: 100%; }
.factprops .fp-all { border-top: 1px solid var(--line, #e3e3e3); padding-top: 6px; }
.factprops .fp-all ul { margin: 4px 0 6px 18px; padding: 0; }
  /* F803 (Bookings, 26 Oct 2026): THE LEAD EDUCATOR'S CALENDAR. The week grid from 640 wide (the days across, Monday first, a
     block a lesson with its three clocks, the tutor's lane beside it) and the day by day list under 640 (a card a lesson, three
     columns, Family, You and Tutor); clock change bands in amber; every press 32 pixels high from 640 and 44 on a phone; nothing
     wider than the page at 390. */
  .fcal{margin:6px 0;max-width:100%;box-sizing:border-box}
  .fcal .btn{min-height:32px;box-sizing:border-box}
  .fcal-bar,.fcal-info{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 0}
  .fcal-title{font-size:16px}
  .fcal-nav{display:flex;gap:4px;align-items:center;margin-left:auto}
  .fcal-wkw{font-weight:600;margin-left:6px}
  .fcal-info{font-size:13px}
  .fcal-age{margin-left:auto;display:flex;gap:6px;align-items:center}
  .fcal-amber,.fcal-band{background:#fefcbf;color:#744210;border-radius:4px}
  .fcal-band{font-size:11px;font-weight:400;padding:2px 4px;margin-top:2px;line-height:1.3}
  .fcal-hourbar{display:flex;gap:8px;align-items:center;margin:4px 0}
  .fcal-grid{border:1px solid #e2e8f0;border-radius:6px;overflow:hidden;background:#fff}
  .fcal-ghead,.fcal-gbody{display:flex}
  .fcal-ghead{border-bottom:1px solid #e2e8f0}
  .fcal-gut{flex:0 0 48px;border-right:1px solid #e2e8f0}
  .fcal-ghead .fcal-dh{flex:1 1 0;min-width:0;border-right:1px solid #edf2f7}
  .fcal-hours{position:relative}
  .fcal-hours span{position:absolute;right:4px;font-size:11px;color:#718096;transform:translateY(-6px)}
  .fcal-day{flex:1 1 0;min-width:0;border-right:1px solid #edf2f7}
  .fcal-day:last-child{border-right:0}
  .fcal-dh{min-height:40px;padding:4px;font-size:13px;box-sizing:border-box}
  .fcal-dh.fcal-today{background:#ebf8ff}
  .fcal-block:hover{z-index:3}
  .fcal-col{position:relative}
  .fcal-line{position:absolute;left:0;right:0;border-top:1px solid #edf2f7}
  .fcal-lane{position:absolute;right:2px;width:16px;border-radius:4px}
  .fcal-lane-times{background:#c6f6d5}
  .fcal-lane-busy{background:#a0aec0;right:4px;width:12px}
  .fcal-block{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:0;overflow:hidden;padding:2px 4px;margin:0;text-align:left;
    font:inherit;font-size:11px;line-height:1.25;background:#f7fafc;border:1px solid #cbd5e0;border-left:4px solid #a0aec0;border-radius:4px;cursor:pointer;box-sizing:border-box;z-index:1}
  .fcal-block[data-cal-on="1"]{background:#fffbea;box-shadow:0 0 0 2px #2b6cb0;z-index:2}
  .fcal-block[data-cal-src="weekly"]{border-style:dashed;border-left-style:solid}
  .fcal-block span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .fcal-bwhen{font-size:12px}
  .fcal-bclk{color:#4a5568}
  .fcal-mark{display:inline-block;font-size:11px;color:#4a5568;padding:0 3px;margin-right:4px}
  .fcal-chosen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0;padding:6px 8px;border:1px solid #cbd5e0;border-radius:6px;background:#fffbea}
  .fcal-cols{display:flex;gap:10px;flex-wrap:wrap}
  .fcal-clk{display:inline-flex;flex-direction:column;min-width:78px;font-size:12px}
  .fcal-clk b{font-size:15px}
  .fcal-clkwho{font-size:11px;color:#718096}
  .fcal-clkat{color:#4a5568}
  .fcal-list{display:none}
  .fcal-lday{margin:8px 0}
  .fcal-lhead{font-weight:700;font-size:13px;letter-spacing:.02em;margin:4px 0}
  .fcal-card{border:1px solid #cbd5e0;border-left:4px solid #a0aec0;border-radius:6px;padding:8px;margin:6px 0;background:#fff;box-sizing:border-box;max-width:100%}
  .fcal-card[data-cal-on="1"]{background:#fffbea}
  .fcal-card .fcal-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:6px 0}
  .fcal-card .fcal-clk{min-width:0;overflow-wrap:anywhere}
  .fcal-cardpress{display:flex;gap:8px;flex-wrap:wrap}
  @media (max-width: 639px){
    .fcal-grid,.fcal-hourbar,.fcal-chosen{display:none}
    .fcal-list{display:block}
    .fcal .btn,.fcal select,.fcal-sw{min-height:44px;box-sizing:border-box}
    .fcal-sw{display:inline-flex;align-items:center}
    .fcal-nav,.fcal-age{margin-left:0}
    .fcal select{max-width:100%}
  }
  /* F805 (a move proposed and accepted with all three clocks, 26 Oct 2026): THE MOVE SHEET over the page (a bottom sheet under
     640 wide), from and to in three clocks, Family, You and Tutor; THE WAITING LIST's cards on Bookings with accept, edit and
     decline; the dashed "was here" outline and the moved mark on the grid. Every press 32 pixels high from 640 and 44 on a
     phone; nothing wider than the page at 390. */
  .fmv-back{position:fixed;inset:0;z-index:60;background:rgba(32,33,36,.45);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
  .fmv-sheet{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.3);padding:18px 18px 16px;font-size:var(--fs-md);outline:none;box-sizing:border-box}
  .fmv-head{font-size:var(--fs-xl);font-weight:700;color:var(--ink);margin-bottom:4px}
  .fmv-lesson{color:var(--ink-2);margin-bottom:8px}
  .fmv-clocks{width:100%;border-collapse:collapse;margin:6px 0 8px;font-size:var(--fs-md)}
  .fmv-clocks th,.fmv-clocks td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
  .fmv-clocks thead th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
  .fmv-clocks td:last-child{background:var(--rt-blue-fill, #e8f0fe);font-weight:600}
  .fmv-to{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px}
  .fmv-to .rt-label{margin:0;flex-basis:100%}
  .fmv-to .input{min-height:32px;box-sizing:border-box}
  .fmv-sheet .tag-warning,.fmv-sheet .tzwarn{display:block;margin:6px 0;padding:8px 10px;border-radius:6px;line-height:1.4}
  .fmv-agreed{display:flex;gap:8px;align-items:center;min-height:32px;margin:8px 0 4px;font-weight:600}
  .fmv-words textarea{width:100%;box-sizing:border-box;font-size:14px}
  .fmv-sheet .rt-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  .fmv-sheet .rt-actions .btn{min-height:32px;flex:1 1 140px}
  .fmv-bar{margin:4px 0}
  .fmv-waiting{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 10px;border-left:4px solid #b7791f;background:#fffbea;border-radius:4px}
  .fmv-list{margin:6px 0;display:flex;flex-direction:column;gap:6px}
  .fmv-listhead{font-weight:700}
  .fmv-card{border:1px solid var(--line);border-left:4px solid #2b6cb0;border-radius:4px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;font-size:13px}
  .fmv-cardwho{color:var(--ink-2)}
  .fmv-cardclk{display:flex;flex-wrap:wrap;gap:4px}
  .fmv-cardpress,.fmv-reasons{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
  .fmv-cardpress .btn,.fmv-reasons .btn,.fmv-bar .btn{min-height:32px;box-sizing:border-box}
  .fmv-reasons .rt-segbtn{flex:0 1 auto;padding:0 12px;min-height:32px}
  .fcal-was{position:absolute;left:0;width:calc(100% - 22px);box-sizing:border-box;border:2px dashed #718096;border-radius:4px;color:#4a5568;font-size:11px;padding:1px 4px;pointer-events:none;z-index:1}
  .fcal-movedmark{color:#137333;font-weight:600}
  .fcal-col.fcal-moving{cursor:crosshair;background:rgba(43,108,176,.04)}
  @media (max-width: 639px){
    .fmv-back{align-items:flex-end;padding:0}
    .fmv-sheet{width:100%;max-height:92vh;border-radius:6px 6px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
    .fmv-sheet .rt-actions .btn,.fmv-to .input,.fmv-cardpress .btn,.fmv-reasons .btn,.fmv-reasons .rt-segbtn,.fmv-bar .btn,.fmv-agreed{min-height:44px}
    .fmv-clocks{font-size:13px}
  }
  /* F874 (DESIGN row 6, design review finding 7, Josh B's "recommended all" of 26 Oct 2026): PHONE PRESSES AND THE WIDE SELECT.
     Lead Educators take WhatsApp replies on a phone, and the house's own rule is a press 44 high on a phone (.fbcard .fbpress,
     F800, F803). Under 600 pixels every press on the face (Students, Leads and the views beside them, its head's sign out), the
     student's tab bar, the tabs' own pages and the changed foot is at least 44 high; the floor says !important because it must
     beat every per-press height rule written for the laptop (28, 30, 32 and 36, each at its own specificity). A lead's card
     opens on What you do now and its press, before who the lead is. A choice on a tab's page is at most its box's width, so
     the add topic choice on Block Overview (LE), which sized itself to its longest option, no longer scrolls the page sideways. */
  @media (max-width:599px){
    #face button,#face .btn,#face a.btn,#face input[type=button],#face input[type=submit],
    #facehead .btn,.tabgroup .tab,.tabgroup .tabmore-btn,
    #pages button,#pages .btn,#pages a.btn,#pages input[type=button],#pages input[type=submit],
    #changedfoot button{min-height:44px !important}
    #face a.btn,#pages a.btn{display:inline-flex;align-items:center}
    #face #leadlist tr.leadrow{display:flex;flex-direction:column}
    #face #leadlist tr.leadrow > td.leadnextcell{order:-2}
    #face #leadlist tr.leadrow > td.leadact{order:-1}
    #pages select{max-width:100%}
    /* F931 (release v295 walk E, F874's shortfall): every link, checkbox and choice on the face is a press too, so the
       Students list's name links, the Leads stage links, every checkbox and the year select reach the same 44 */
    #face a,#facehead a{display:inline-flex;align-items:center;min-height:44px !important}
    #face select,#facehead select{min-height:44px !important}
    #face input[type=checkbox],#facehead input[type=checkbox]{min-height:44px !important;min-width:24px;margin-top:0;margin-bottom:0;vertical-align:middle}
  }
/* F878: YOUR GMAIL SIGNATURE on the Lead Educator's face (ui/email-signoff-card.js): the sign-off shown on a white plate with
   the gold edge, as an email reads it in light mode, in either theme; the html box to select by hand; phone width wraps. */
.esig-sum{cursor:pointer;list-style:revert}
.esig-plate{background:#fff;color:#292929;border-left:4px solid #B79C68;border-radius:6px;padding:12px 14px;margin:0 0 10px;max-width:600px;overflow-wrap:anywhere;word-break:break-word}
.esig-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.esig-html{display:block;width:100%;box-sizing:border-box;margin-top:8px;font-family:monospace;font-size:12px}
.esig-plate table,.esig-plate td{border:0;background:none;width:auto;margin:0}
.esig-plate td{padding:0}
  /* F890 (Josh B's words of 26 Oct 2026 on Details, the TEST rehearsal): THE STUDENT CARD TAKES HALF THE PAGE, THE PICKER FLOATS.
     Parent 1 and Parent 2 stack in one column (.detailsparents), so the Student card is half of the cards' row from 720 wide;
     under that everything is one column, as before. On Details the course picker and the target course picker float over the
     page under their button, raised above the cards at a natural width, free to run into the parents' column; on a phone they
     stay in the page, the card's width. */
  .detailsparents{display:flex;flex-direction:column;gap:8px;min-width:0}
  .detailsparents > .card{margin:0}
  @media (min-width:720px){
    .field-grid.detailsfamily{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
    .detailscard .keyvalue > span:last-child:has(> [data-chooser-panel], > [data-course-target-panel]){position:relative}
    .detailscard [data-chooser-panel="details"],.detailscard [data-course-target-panel]{position:absolute;z-index:40;left:0;width:520px;max-width:calc(100vw - 32px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
  }
/* ------------------------------------------------------------ F896: ONE ROW PER SUBJECT ON THE CONSULTATION (26 Oct 2026)
   Row F896, James BT's feedback via Josh B: section 2's subject rows (ui/add-subject.js subjThisHtml, subjRowsHtml) and the line a
   stored Multiple shows (ui/tab-consultation.js consultMultipleLine). A row's parts wrap on a phone; its press keeps the press size. */
tr.subjhead td.label{font-weight:600}
tr.subjhead[data-subj-row="this"] td{border-top:2px solid var(--line, #d8dde6)}
tr.subjhead[data-subj-row]:not([data-subj-row="this"]):not([data-subj-row="add"]) td{border-top:2px solid var(--line, #d8dde6)}
.subjrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.subjrow select{max-width:100%}
.subjmulti{display:block;margin-top:4px}
@media (max-width:600px){ .subjrow .btn{min-height:44px} }
  /* F930 (Bookings, 26 Oct 2026, release v295 walk E): A UK LINE ON EVERY CARD, AND SAME-TIME LESSONS STACK. The day list's card
     holds four clocks (Family, You, Tutor, UK): four across from 420 wide, two by two under it, so none is cut at 390. The grid's
     blocks are placed by ui/face-calendar.js faceCalStack (each the column's whole width, one under another). */
  .fcal-card .fcal-cols[data-cal-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fcal-bclk[data-cal-who="uk"]{color:#2c5282}
  @media (max-width: 419px){
    .fcal-card .fcal-cols[data-cal-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}
  }
  /* F911 (O1-5 of the onboarding design, Josh B's pick of 26 Oct 2026): A PROPOSED FACT BESIDE ITS OWN FIELD ON DETAILS.
     Each proposal sits under its field's box in a quiet tinted strip (what is proposed, who supplies a missing one, where it came
     from, keep and not this), wrapping on a phone; Check the facts in Claude heads the facts; the personal notes are lines. */
  .fp-at:empty{display:none}
  .fp-at{margin-top:4px}
  .fp-at-item{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:4px 6px;margin-top:2px;border-left:4px solid var(--accent, #c9a227);background:rgba(201,162,39,.08);border-radius:4px;font-size:13px;min-width:0;text-align:left;justify-content:flex-start}
  .fp-at-item .fp-at-what,.fp-at-item .fp-at-who{overflow-wrap:anywhere}
  .fp-at-item .fp-at-src{font-size:12px;overflow-wrap:anywhere}
  .fp-at-item .fp-at-press{display:flex;gap:6px;flex-wrap:wrap}
  .fp-claude-at:empty{display:none}
  .fp-claude-at{margin:6px 0 10px}
  .fp-claude-at .fp-press{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0}
  .detailsnote{padding:3px 0;font-size:13px;overflow-wrap:anywhere}
  .detailsnoteadd{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
  .detailsnoteadd #detailsnote{flex:1 1 220px;min-width:0}
/* ------------------------------------------------------------ F918: THE CONSULTATION OPENS FROM THE LEAD, BEFORE ANY RECORD (26 Oct 2026)
   Row F918 (A3 of reviews/DESIGN - Lead To Consultation To Student, 26 Oct 2026 v1.md section C.5): the bar over the lead's page
   (back, the lead, its stage, the call's time and the saved line), the strip of the call's children, the call card's family boxes
   over the family record and the subject rows over the draft (ui/consult-lead.js). Each part wraps on a phone; no part is wider
   than the page, and the presses keep the press size. */
.cleadbar{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.cleadbar .stuname{overflow-wrap:anywhere}
.cleadsaved[data-clead-saved="why"]{color:#9a3412}
.cleadstrip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 10px}
.cleadstrip .cleadnew{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.cleadstrip #cleadfirst{max-width:100%;width:220px}
.cleadkid.on{font-weight:600}
.clead .cc-big .input{width:100%;min-width:0}
.cleadanswers ul{margin:2px 0 0 18px;padding:0}
tr.cleadsubj td{border-top:2px solid var(--line, #d8dde6)}
.leadnorec{display:block}
@media (max-width:600px){
  .clead .cc-grid{grid-template-columns:1fr}
  .cleadbar .btn,.cleadstrip .btn,#cleadaddsubj{min-height:44px}
}
  /* F904 (the Calendar, 26 Oct 2026, reviews/DESIGN - The Calendar Made Simple, section C.1): ONE STATUS LINE AND TWO LISTS. The
     school year is one line a term with a quiet line for each break; Dates that matter is one row a date, the block being built a
     band and the rows inside it marked on their left edge. Under 600 wide each row wraps to two lines, so nothing is cut at 390. */
  .calssec{margin:14px 0 6px}
  .calshead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;border-bottom:1px solid #d7dde3;padding-bottom:4px;margin-bottom:6px}
  .calsadds{display:flex;flex-wrap:wrap;gap:6px}
  .calsyr{padding:3px 0;font-size:13px}
  .calsyr-break{padding-left:18px;color:#5f6b78;font-size:12px}
  .calsdays{display:inline-block;min-width:200px;color:#33414f}
  .calsrow{display:grid;grid-template-columns:210px 110px minmax(0,1fr) 90px auto;gap:8px;align-items:center;padding:4px 6px;border-left:4px solid transparent;font-size:13px}
  .calsrow + .calsrow{border-top:1px solid #eef1f4}
  .calsrow.calsinblock{border-left-color:#4a6b96;background:#f3f6fa}
  .calskind{color:#5f6b78}
  .calsname{min-width:0}
  .calsyear-list{margin:2px 0}
  .calsyr-term{color:#1f2b37}
  .calsterms{margin:4px 0}
  .calsdraft input.input{font-style:italic}
  .calspaper{margin:8px 0}
  .calspapers{margin:4px 0}
  .calswhen{color:#5f6b78;font-size:12px}
  .calsband{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 2px;padding:5px 6px;background:#e3ebf5;border-left:4px solid #4a6b96;font-size:13px}
  .calsearlier summary{cursor:pointer;color:#5f6b78;font-size:12px;padding:3px 0}
  .calsform{margin:6px 0}
  .calsform-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
  .calsterm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:3px 0}
  .calspaper-row{padding:3px 0}
  @media (max-width: 599px){
    .calsrow{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
    .calsdays{min-width:0}
    .calsrow .calsname{grid-column:1 / -1}
  }
  /* F906 (the exam calendars, 27 Oct 2026, Josh B's pick 16 b): THE HOME PAGE'S EXAM CALENDARS TAB. One card a calendar, its papers one
     line each (the day, the session, the paper, its tier); the form's rows wrap under 600 wide so nothing is cut at 390. */
  .examscal{padding:6px 0;border-top:1px solid #eef1f4}
  .examspapers{margin:2px 0 0 12px}
  .examspaper{font-size:13px;padding:1px 0}
  .examsform-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
  /* F949 (Bookings, 27 Oct 2026, release v301 walk F, summary section 3 item 9): THE AWAY NAME WHOLE ON THE GRID. The grid's block
     cut every line to one row with an ellipsis, so "family away: <name>" lost the name. The away line alone wraps, a long word
     broken anywhere, and ui/face-calendar.js faceCalAwayRows makes the block tall enough for its every row; on a narrow grid the
     block grows past that height (its min-height is the height it was given), so no line of it is cut. */
  .fcal-block[data-cal-away="1"]{height:auto !important}
  .fcal-block[data-cal-away="1"] > span{flex-shrink:0}
  .fcal-block .fcal-mark[data-cal-awaymark="1"]{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word;flex:0 0 auto}
  /* F808, F965 (the Planner on a Lead Educator's phone, 27 Oct 2026; TZ-9 of the Booking Change Calendar design, Juliet's Q7 A):
     BOOKINGS AT 390. The moves waiting first, the one-time card Add the Planner to your home screen (a phone only), the move
     sheet's three clocks stacked (Family, You, Tutor, each its from and to), every press 44 pixels high, nothing wider than the
     page, and the bottom sheet clear of the iPhone's home bar. */
  .fcal-home{display:none}
  @media (max-width: 639px){
    .fcal{display:flex;flex-direction:column}
    .fcal > .fmv-bar{order:-1}
    .fcal-home{display:flex;flex-direction:column;gap:6px;margin:6px 0;padding:10px 12px;border:1px solid #cbd5e0;border-left:4px solid #1c5d99;border-radius:6px;background:#f5f9fd;line-height:1.4}
    .fcal-home .btn{align-self:flex-start;min-height:44px;min-width:88px;box-sizing:border-box}
    .fcal .btn,.fcal .input,.fcal select,.fmv-bar .btn,.fmv-sheet .rt-segbtn,.fmv-sheet .rt-why,.fmv-sheet .btn,.fmv-sheet .input{min-height:44px;box-sizing:border-box}
    .fmv-sheet .rt-why{width:100%}
    /* F965: the sheet's day and time fields held at 44 px (a phone's own date and time fields shrink below a min-height alone),
       and each tick 44 px tall, the family agreed tick and Bookings' Everyone's, beside its 44 px label */
    .fmv-to .input{height:44px;line-height:normal}
    .fmv-agreed input[type="checkbox"],.fcal-sw input[type="checkbox"]{width:24px;height:44px;min-height:44px;margin:0;flex:0 0 auto;box-sizing:border-box}
    .fmv-clocks thead{display:none}
    .fmv-clocks tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
    .fmv-clocks tbody th{grid-column:1 / -1;border-bottom:0;padding-bottom:0}
    .fmv-clocks tbody td{border-bottom:0;overflow-wrap:anywhere}
    .fmv-clocks td[data-fmv-from]::before{content:"From ";color:var(--sub);font-weight:400}
    .fmv-clocks td[data-fmv-to]::before{content:"To ";color:var(--sub);font-weight:400}
    #fcaloffline{display:block;margin:6px 0;padding:8px 10px;border-radius:6px}
  }
/* ------------------------------------------------------------ F942: ONE PRESS PER LEAD ROW, AT EVERY WIDTH (27 Oct 2026)
   Row F942, release v301 walk B (summary section 3 item 2): below 900 pixels the row's own press folded into the ... menu
   (styles/planner-face.css, F361's 899 px rule), so at phone width no stage had a press outside it. The press stays on the row,
   the whole width of the card, and the menu's main item, its stand in, is not drawn twice. */
@media (max-width:899px){
  #face td.leadact .leadbtn{display:block;width:100%;max-width:none;margin:0 0 var(--sp1) 0;white-space:normal}
  #face .regctl[data-ctl^="leadmenu:"] .regopt[data-val="main"]{display:none}
}
/* ------------------------------------------------------------ F909: THE CHECKLIST IS THE ONE JOURNEY (27 Oct 2026)
   Row F909 (O1-3, mocks M1 and M2): the Lead Educator's card (a label column, then the value), the six-stage strip that wraps
   whole stages to a second line at phone width, and each stage a fold whose lines wrap; nothing is wider than the page. */
.ckj{max-width:100%}
.ckjcard{margin:8px 0 10px}
.ckjrow{display:flex;gap:var(--sp2, 8px);align-items:baseline;flex-wrap:wrap;padding:4px 0;font-size:13px}
.ckjlab{flex:0 0 88px;color:#5b6270;font-size:12px}
.ckjval{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.ckjwho{display:inline-block;padding:0 6px;border-radius:999px;background:#eef0f4;color:#3c4350;font-size:11.5px;white-space:nowrap}
.ckjstrip{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ckjstage button{font:inherit;font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid #c9ced6;background:#fff;cursor:pointer;white-space:nowrap;min-height:32px}
.ckjstage.ckj-done button{background:#e7f4ea;border-color:#9fcfab}
.ckjstage.ckj-now button{background:#1f3b63;border-color:#1f3b63;color:#fff;font-weight:600}
.ckjstage.ckj-later button{color:#5b6270}
.ckjstage.ckj-open button{background:#fff7e0;border-color:#e6c46a}
.ckjcount{font-size:11.5px;opacity:.8}
.ckjfold{border:1px solid #e3e3ea;border-radius:6px;margin:6px 0;background:#fff}
.ckjfold > summary{cursor:pointer;padding:8px 10px;font-size:13px}
.ckjbody{padding:0 10px 8px;min-width:0}
.ckjline{font-size:12.5px;padding:5px 0;border-top:1px solid #f0f0f4;overflow-wrap:anywhere}
.ckjline.ckjdone .ckjlabel{color:#5b6270}
.ckjproof{font-style:normal}
.ckjtick{display:inline-block;width:14px;text-align:center}
.ckjnx{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:600px){
  .ckjlab{flex-basis:100%}
  .ckjstage button{white-space:normal}
}
/* ------------------------------------------------------------ F647: THE TUTOR OVERVIEW PANEL'S SMALL READ-ONLY WEEK (27 Oct 2026)
   Row F647 (F440's walk shortfall, its second part): Their week (UK time) drawn as a small grid in the look of the tutor's own
   (ui/face-tutors.js tovWeekHtml): a line each hour (24 px, two half hours of TOVW_PX), the blocks green, each offered slot
   outlined. Classes of its own (tovw-), nothing to press. */
.tovw{width:100%;table-layout:fixed;border-collapse:collapse;font-size:10px}
.tovw th{font-weight:600;padding:0 0 2px;text-align:center}
.tovw th.tovw-hours{position:relative;width:30px;padding:0;vertical-align:top}
.tovw-hr{position:absolute;right:3px;margin-top:-5px;color:#6b7680;font-weight:400;line-height:10px}
.tovw-hr:first-child{margin-top:0}
.tovw td.tovw-day{position:relative;padding:0;vertical-align:top;box-shadow:inset 1px 0 0 #e3e8ee;
  background-image:repeating-linear-gradient(to bottom,#e3e8ee 0,#e3e8ee 1px,transparent 1px,transparent 24px)}
.tovw-block,.tovw-slot{position:absolute;left:0;right:0;overflow:hidden;line-height:11px;padding:1px 2px;box-sizing:border-box;cursor:default;overflow-wrap:anywhere}
.tovw-block{background:#c9ecd2;border:1px solid #7cc492;color:#1d4f2b}
.tovw-slot{background:transparent;border:2px solid #1a73e8;color:#0b3e8a;z-index:1}
.tovw-slot .tovclash{display:block;color:#b3261e}
/* ------------------------------------------------------------ F1032: THE TUTOR OVERVIEW PANEL'S WEEK, ONE LINE EACH (28 Oct 2026)
   Row F1032 (the v313 walk D shortfall of F626): a day cell of the tovw- grid is too narrow for "12:00 to 16:00", so each block
   and each offered slot has its own line under the grid (ui/face-tutors.js tovWeekLines), a time range never broken; in a cell
   the label shows on one line only where the box is wide enough, and the offered slot is shaded blue apart from the green block. */
.tovw-block,.tovw-slot{container-type:inline-size}
.tovw-in{white-space:nowrap}
@container (max-width:74px){.tovw-block .tovw-in{display:none}}
@container (max-width:118px){.tovw-slot .tovw-in,.tovw-slot .tovclash{display:none}}
.tovw-slot{background:repeating-linear-gradient(135deg,rgba(26,115,232,.22) 0,rgba(26,115,232,.22) 3px,transparent 3px,transparent 6px)}
.tovw-lines{margin-top:4px;font-size:11px;line-height:15px}
.tovw-line{padding-left:5px;margin-bottom:2px;border-left:4px solid #7cc492}
.tovw-line b{display:inline-block;min-width:2.4em}
.tovw-t{white-space:nowrap}
.tovw-lslot{border-left-color:#1a73e8;color:#0b3e8a}
.tovw-lclash{color:#b3261e;white-space:nowrap}
/* F806 (27 Oct 2026, TZ-7 of the three clocks design): the tutor's My lessons card, each lesson in three clocks, and the
   Propose a move sheet (ui/tutor-moves.js). A sheet of its own, listed last (RF01 item 5); no shared rule is restyled. */
.tmv .tmv-line{border-top:1px solid #e3e6ea;padding:6px 0}
.tmv .tmv-line:first-child{border-top:0}
.tmv .tmv-line[data-tmv-past]{opacity:.6}
.tmv .tmv-cols{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0}
.tmv .tmv-col{white-space:nowrap}
.tmv .tmv-ask{margin:4px 0}
.tmv .tmv-sheet{margin:6px 0;padding:8px;border:1px solid #d0d7de;border-radius:6px;background:#fafbfc}
.tmv .tmv-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 0}
.tmv .tmv-row label{white-space:nowrap}
.tmv .tmv-row input.reg{width:min(320px,70vw)}
.tmv .btn{min-height:32px}
@media (max-width:640px){.tmv .tmv-col{white-space:normal}.tmv .btn{min-height:44px}}
/* ------------------------------------------------------------ F1073: THE STUDENTS LIST AS A TO-DO (29 Oct 2026)
   Row F1073 (F872 Option A, Josh B's D2 of 29 Oct 2026, with the Opus extra check's changes): the task panel hidden while nothing
   is due, one line in its place; Year, Course, Lead Educator and Tutor as text, a missing one amber; the row's menu press quiet
   (opacity 0, still in the page and focusable) on a screen with a mouse from 600 pixels, shown on the row under the mouse or
   holding focus; the name whole from 1200 pixels; the phone card leads with the name and Where they are, presses 44 high. */
#face #facetasks[hidden],#face #facetasksquiet[hidden]{display:none}
#face .facetasksquiet{margin:0 0 var(--sp3)}
#face #facelist .facetext{white-space:normal}
@media (min-width:1200px){
  /* one line each, as the controls were (F316): the Lead Educator and the tutor end in an ellipsis at the controls' 116 pixels (150
     while the Client column is hidden, F397), the whole names in the cell's hover; F776's .facetight wraps them when the list is
     wider than its box */
  #face #facelist .facetext{white-space:nowrap}
  #face #facelist td.facele .facetext,#face #facelist td.facetutor .facetext{display:inline-block;max-width:116px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
  #face table#facelist.noclient td.facele .facetext,#face table#facelist.noclient td.facetutor .facetext{max-width:150px}
  #face table#facelist.facetight .facetext{white-space:normal}
}
#face #facelist .facemiss{color:#7a4a00;font-weight:bold}
#face .facerowmenu .facecellwhy{display:block;max-width:240px;white-space:normal;font-size:var(--fs-xs);color:var(--sub);padding:2px 4px}
@media (hover:hover) and (pointer:fine) and (min-width:600px){
  #face #facelist .facemenubtn{opacity:0}
  #face #facelist tr:hover .facemenubtn,#face #facelist tr:focus-within .facemenubtn,#face #facelist .facemenubtn:focus,#face #facelist .facerowbtns.open .facemenubtn{opacity:1}
}
@media (min-width:1200px){
  #face #facelist td.facefirst a.facename{max-width:none;overflow:visible;text-overflow:clip}
  #face #facelist td.facefirst .nameover .nametop{overflow:visible;text-overflow:clip}
}
@media (max-width:599px){
  #face #facelist tr.click{display:flex;flex-wrap:wrap;align-items:flex-start}
  #face #facelist tr.click > td{flex:0 0 50%}
  #face #facelist tr.click > td.facefirst{order:1;flex-basis:100%;padding-right:48px}
  #face #facelist tr.click > td.facewhere{order:2;flex-basis:100%}
  #face #facelist tr.click > td.faceyear{order:3}
  #face #facelist tr.click > td.facecourse{order:4}
  #face #facelist tr.click > td.facele{order:5}
  #face #facelist tr.click > td.facetutor{order:6}
  #face #facelist tr.click > td.faceclient{order:7}
  #face #facelist tr.click > td.faceroom{order:8;flex-basis:100%}
  #face #facelist tr.click > td.facemenucol{order:9;flex:none}
  #face:has(#facelist) .toolbar .btn,#face:has(#facelist) .toolbar .seg button,#face:has(#facelist) .toolbar select,#face #facestunow .btn,#face #facelist .btn,#face #facelist .regpick,#face #facetasks .facetab{min-height:44px}
  /* the Students toolbar in three rows under the views (new consultation and my students, the search and the year, show left and
     export), the rows and lines closer, so the first card stands in the first half of the screen */
  #face:has(#facelist) .toolbar{row-gap:4px;margin-bottom:8px}
  #face:has(#facelist) .toolbar > .seg{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}   /* the six views in one row that scrolls inside itself, each press whole */
  #face:has(#facelist) .toolbar > .seg button{flex:none;white-space:nowrap}
  #face:has(#facelist) .toolbar > *{margin-top:0}
  #face:has(#facelist) .toolbar > #facenew{order:3}
  #face:has(#facelist) .toolbar > label:has(#facemine){order:3}
  #face:has(#facelist) .toolbar > #facesearch,#face:has(#facelist) .toolbar > #faceyear{order:4}
  #face:has(#facelist) .toolbar > label:has(#faceleft){order:5}
  #face:has(#facelist) .toolbar > #faceexport{order:5;margin-left:0}
  #face:has(#facelist) .toolbar > #facemoveto{order:6}
  #face .facetasksquiet{margin:0 0 4px}
  #face #facestunow .nowthen{margin:0 0 6px}
  #face #facestunow .nowthen-now{display:flex;align-items:center;gap:8px}
  #face #facestunow .nowthen-now .nowthen-btn{margin-left:auto;flex:none}
}
/* ------------------------------------------------------------ F1074: ONE MAIN PRESS PER SCREEN (29 Oct 2026)
   Row F1074 (F875 Option 1, Josh B's D2 of 29 Oct 2026, with the Opus extra check's changes): the main look (filled green
   --btn-go, white, bold, 32 high, 44 under 600 pixels) goes to ONE press per screen, in CSS alone with :has(), by this order: an
   open card's .btn-push; else the standing message's press (#facemsgnow, a lead's own included); else the view's own line (a
   tab's What you do now [data-tabnow], the Students line #facestunowline, the Tutors line #tutorsnow, Set up the family's #onbnow, an empty Lesson
   Sequence's #lsnowle, on Leads Needs us the first row whose press is ours and not busy); else the view's .btn-push (the house main
   press already; Tutors' + add a tutor, drawn by ui/face-register.js, by its id while the Tutors line has no press). Every other
   .btn-primary stays the green outline, the navy fill stays the selected view and filter, the maroon outline withdraw. */
#pages:not(:has(.newcard .btn-push)) #facemsgnow .nowthen-btn .btn-primary,
#pages:not(:has(.newcard .btn-push)):not(:has(#facemsgnow .nowthen-btn .btn-primary)) :is([data-tabnow], #facestunowline, #tutorsnow, #onbnow, #lsnowle) .nowthen-btn .btn-primary,
#pages:not(:has(.newcard .btn-push)):not(:has(#facemsgnow .nowthen-btn .btn-primary)):not(:has(#tutorsnow .nowthen-btn .btn-primary)) #faceaddtutor,
#pages:not(:has(.newcard .btn-push)):not(:has(#facemsgnow .nowthen-btn .btn-primary)) #leadview:has([data-leadfilter="needs"].on) #leadlist tr.leadrow:has(.leadbtn.btn-primary:not([disabled])):not(tr.leadrow:has(.leadbtn.btn-primary:not([disabled])) ~ tr.leadrow) .leadbtn.btn-primary:not([disabled]){
  background:var(--btn-go);border-color:var(--btn-go);color:#fff;font-weight:bold;min-height:32px;box-sizing:border-box}
/* F1074: the class edits of the design's section 2.3 (Reschedule's confirm, School papers' add the paper): Reschedule's blue gives way */
#pages .rt-go.btn-push:not(:disabled){background:var(--btn-go);border-color:var(--btn-go)}
#pages #papaddgo{min-height:32px}
@media (max-width:599px){
  #pages .newcard .btn-push,#pages #facemsgnow .nowthen-btn .btn-primary,#pages :is([data-tabnow], #facestunowline, #tutorsnow, #onbnow, #lsnowle) .nowthen-btn .btn-primary,#pages #faceaddtutor,#pages #papaddgo,#pages #leadlist .leadbtn.btn-primary{min-height:44px}
}
/* ------------------------------------------------------------ F1439: CHECKLIST, SCHOOL CALENDAR AND BUILD NEXT BLOCK TAKE THEIR MAIN PRESS (4 Nov 2026)
   Release v448 walk part M: the design's section 2.3 gives views 12, 14 and 17 a main press the rule above never reached, so it is named
   here by the same order: the Checklist's Now line's own press (open Follow-ups and the rest ckjGoHtml draws), School calendar's read the
   published calendar in Claude while the line's own press is plain, Build Next Block's on to step n of the step that is open. */
#pages:not(:has(.newcard .btn-push)):not(:has(#facemsgnow .nowthen-btn .btn-primary)):not(:has([data-tabnow] .nowthen-btn .btn-primary)) :is(#ckjcard [data-ckj="now"] :is([data-ckj-go], [data-ckj-first], button[data-ckj-cl="send"], [data-fammailgo]), .bnbstep-next):not(:disabled),
#pages:not(:has(.newcard .btn-push)):not(:has(#facemsgnow .nowthen-btn .btn-primary)) [data-tabnow="S"]:not(:has(.nowthen-btn .btn-primary)) #calsweb:not(:disabled){
  background:var(--btn-go);border-color:var(--btn-go);color:#fff;font-weight:bold;min-height:32px;box-sizing:border-box}
@media (max-width:599px){
  #pages #ckjcard [data-ckj="now"] :is([data-ckj-go], [data-ckj-first], button[data-ckj-cl="send"], [data-fammailgo]),#pages .bnbstep-next,#pages #calsweb{min-height:44px}
}
/* ------------------------------------------------------------ F1082: THE STUDENTS VIEW'S TAB BAR FOLDS, AND AN ALERT TAB STAYS RED (29 Oct 2026)
   Row F1082 (Josh B, 29 Oct 2026, on staging v341): the fold press at the end of the tab bar, a quiet link-like press; folded,
   the panes are hidden and the open header loses its joined bottom edge; a tab whose card is an alert keeps its red, open or not. */
#face .facetabs .facefold{margin-left:auto;align-self:center;background:none;border:0;padding:0 var(--sp2);min-height:32px;font:inherit;font-size:var(--fs-sm);color:var(--ink-2);text-decoration:underline;cursor:pointer}
#face .facetabs .facefold:hover{color:var(--ink)}
#face #facetasks .facepanes[hidden]{display:none}
#face #facetasks[data-tasks-fold="1"] .facetab.on{border-bottom:1px solid var(--line)}
#face .facetab[data-task-alert="1"],#face .facetab[data-task-alert="1"].on{color:#b3261e;box-shadow:inset 0 3px 0 #b3261e}
@media (max-width: 600px){
  #face .facetabs .facefold{min-height:44px}
}
/* ------------------------------------------------------------ F1094: THE QUESTION MARK BESIDE EVERY FAMILY CLASS LINK (30 Oct 2026)
   Row F1094 (Josh B, 30 Oct 2026): the ? press beside the class link (ui/face.js faceClHelpHtml) and its panel, closed by
   default, laid over the page under the link so the narrow Lessonspace column keeps its width; at phone width it is a sheet
   along the foot of the screen, inside the window wherever the link stands, and the ? and close presses are 44 pixels. */
.faceclass{position:relative}
.faceclass .faceclq{min-width:28px;font-weight:bold}
.faceclhelp[hidden]{display:none !important}
.faceclhelp{display:block;position:absolute;left:0;top:100%;z-index:40;margin-top:4px;width:26rem;max-width:calc(100vw - 32px);box-sizing:border-box;padding:var(--sp2, 8px) 12px;background:#fff;border:1px solid var(--line, #d0d5dd);border-radius:6px;box-shadow:0 6px 18px rgba(16,24,40,.14);white-space:normal;text-align:left;font-size:var(--fs-sm, 12.5px);line-height:1.45;color:var(--ink, #1d2433)}
.faceclhelp > span,.faceclhelp > b{display:block}
.faceclhelp-h{font-size:1.05em;margin:0 64px 2px 0}
.faceclhelp .faceclhelp-x{position:absolute;top:6px;right:8px;margin:0}
.faceclhelp-on{margin:2px 0 6px;font-weight:bold}
.faceclhelp-route{margin-top:6px}
.faceclhelp-route ol{margin:2px 0 0;padding-left:1.4em}
@media (max-width: 600px){
  .faceclass .faceclq,.faceclhelp .faceclhelp-x{min-height:44px;min-width:44px}
  .faceclhelp{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-width:none;max-height:70vh;overflow:auto;margin:0;z-index:1000}
  .faceclhelp-h{margin-right:72px;min-height:32px}
}
.faceclhelp-more{margin-top:6px}
/* ------------------------------------------------------------ F1093: THE START DATE, IMMEDIATELY OR A DAY PICKED, MONDAYS IN SOFT GREEN (30 Oct 2026)
   Row F1093 (James's word, passed on by Josh B, 30 Oct 2026): the Consultation's "When would you like to begin?" answer, Immediately
   or a day, and its month grid under the question, Monday first, the Monday column soft green (week commencing); any day pickable. */
.cbegin-opts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.cbegin-opt{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.cbegin-pick{white-space:nowrap}
.cbegin-cal{max-width:340px;margin:2px 0 6px;border:1px solid var(--grid);border-radius:6px;overflow:hidden;background:#fff}
.cbegin-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 6px;background:#f2f4f6;border-bottom:1px solid var(--grid);font-size:12px}
.cbegin-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:1px;background:var(--grid)}
.cbegin-wd{padding:3px 0;background:#f7f8f9;text-align:center;font-size:10px;font-weight:bold;color:var(--sub)}
.cbegin-pad{background:#f7f8f9}
.cbegin-day{min-height:34px;margin:0;padding:0;border:0;border-radius:0;background:#fff;font:inherit;font-size:12px;color:inherit;cursor:pointer}
.cbegin-grid .cbegin-mon{background:#e4f0e0;color:#2c5427}
.cbegin-day:hover:not(:disabled),.cbegin-day:focus-visible{outline:2px solid #6aa35e;outline-offset:-2px}
.cbegin-day:disabled{color:#c3c7cc;cursor:default}
.cbegin-day.cbegin-today{font-weight:bold;text-decoration:underline}
.cbegin-grid .cbegin-day.cbegin-on{background:#1d4f8c;color:#fff;font-weight:bold}
.cbegin-note{padding:4px 6px;font-size:11px;color:var(--sub)}
@media (max-width:600px){.cbegin-cal{max-width:none} .cbegin-day{min-height:44px;font-size:14px} .cbegin-head .btn{min-width:44px;min-height:36px}}
/* ------------------------------------------------------------ F1096: + ADD A STUDENT ON A PHONE (30 Oct 2026)
   Row F1096: the press beside + new consultation reads + add under 600 pixels and sits in the third toolbar row (show left and
   export), so the Students toolbar keeps its three rows and What you do now stays in the first screen (AIK5). */
@media (max-width:599px){
  #face:has(#facelist) .toolbar > #faceaddstu{order:5}
  #face:has(#facelist) .toolbar > #faceaddstu .aixwide{display:none}
}
/* ------------------------------------------------------------ F1107: THE CONSULTATION FROM THE LEAD, FEWER TYPED BOXES (30 Oct 2026)
   Row F1107 (Josh B's 2a, 2b, 2e and 2g of 30 Oct 2026): the day-by-day free times picker (each day a press, the set times as taps),
   the held details as one line on the call card, How did the call end as the page's own presses, and an empty notes cell as a small
   press. Section 8's boxes sized to their words. Phone width: 44 pixel presses. */
.cft{margin:4px 0 10px}
.cft-clock{font-size:12px;color:var(--sub);margin-bottom:6px}
.cft-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cft-day{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;padding:4px 2px;white-space:normal;line-height:1.2}
.cft-day b{font-size:12px}
.cft-span{font-size:11px;color:var(--sub)}
.cft-uk{font-size:10px;color:var(--sub)}
.cft-day.on{background:#e4f0e0;border-color:#6aa35e;color:#2c5427}
.cft-day.on .cft-span{color:#2c5427;font-weight:bold}
.cft-day.open{outline:2px solid #1d4f8c;outline-offset:1px}
.cft-pick{margin-top:8px;padding:8px;border:1px solid var(--grid);border-radius:6px;background:#fff;max-width:640px}
.cft-say{font-size:12.5px;margin-bottom:6px}
.cft-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px}
.cft-at{padding:4px 0;font-size:12px}
.cft-at.on{background:#1d4f8c;color:#fff;border-color:#1d4f8c}
.cft-at.before{color:#9aa1a9}
.cft-foot{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.cleadfamline{font-size:13px}
.cleadfamline .cc-label{margin:0}
.cleadfamheld{overflow-wrap:anywhere}
.cend-how{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0}
.cend-how .cc-label{margin:0}
.cend-ends{display:inline-flex;flex-wrap:wrap;gap:6px}
.cend-ends .btn.on{background:#1d4f8c;color:#fff;border-color:#1d4f8c}
.cend .cend-short{width:100%;max-width:318px}
.consult-noteadd{font-size:11px;color:var(--sub)}
@media (max-width:600px){
  .cft-days{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cft-day,.cft-at,.cend-ends .btn,.consult-noteadd{min-height:44px}
  .cft-times{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
}   /* F1107: the end of the under 600 block */
/* ------------------------------------------------------------ F649: THE PEAK HOURS GRID AS WIDE AS ITS CELLS (27 Oct 2026)
   Row F649 (F435 fix, release v249 walk group 6): the shared table{width:100%} stretched the register's Peak hours grid to the
   card, so the day names took half of it and the 32 half hours squeezed. The grid is as wide as its cells: the day names one short
   column, each half hour a fixed 12 pixel cell, the hour labels over their hour; on a phone it scrolls inside its own .scroll box. */
#tregpeak table.tregpeakgrid{width:auto}
#tregpeak table.tregpeakgrid td{padding:0;min-width:12px}
#tregpeak table.tregpeakgrid tr:first-child th:not(:first-child){padding:0;font-size:10px;white-space:nowrap}
#tregpeak .scroll{max-width:100%;overflow-x:auto}
/* ------------------------------------------------------------ F1105: SET UP THE FAMILY, DONE STEPS AND BY HAND ROWS FOLDED (30 Oct 2026)
   Josh B's answers 1e and 1f to T259 (state/ANSWERS - T259 The Set Up Pages, 30 Oct 2026 v1.md): a done step shows one line, its
   press "Done 30 Oct by you, open"; while Set up in WISE is on, a step's by hand rows sit under one quiet "do it by hand" press. A
   folded part is hidden by its hidden attribute, kept here against any display rule of a shared sheet. */
#onbfam [data-onb-step] > .card-body[hidden], #onbfam .onbbyhandrows[hidden]{display:none !important}
#onbfam [data-onb-folded="1"] > .card-head{margin-bottom:0}
#onbfam .onbfoldpress{min-height:26px;vertical-align:middle;padding:1px 8px;font-size:12.5px;color:#2e7d32;background:transparent;border:1px solid #c8e6c9}
#onbfam .onbbyhand{margin-top:6px}
#onbfam .onbbyhandpress{min-height:26px;padding:1px 8px;font-size:12.5px;background:transparent}
#onbfam .onbbyhandrows{margin-top:4px;padding-left:8px;border-left:4px solid #eeeeee}
/* ------------------------------------------------------------ F1114: SET UP THE TUTOR, STEPS FIRST AND BOXES SIZED (30 Oct 2026)
   Josh B's answers 5a, 5d, 5e and 5h to T259 (state/ANSWERS - T259 The Set Up Pages, 30 Oct 2026 v1.md): the folds of What they
   teach, Do it by hand in WISE and DBS by hand read as one quiet line each; the pay row wraps so the IB box stays inside its card. */
#ontpage details.ontteach > summary, #ontpage details.ontwisehand > summary, #ontpage details.ontdbshand > summary{cursor:pointer;list-style-position:inside}
#ontpage details.ontteach > summary.ontsec-head{display:list-item}
#ontpage details.ontwisehand[open]{padding-left:8px;border-left:4px solid #eeeeee}
#ontpage details.ontdbshand{margin-top:2px}
#ontpage .ontpayrow{display:flex;flex-wrap:wrap;gap:4px 0;min-width:0;max-width:100%}
#ontpage .newgrid > *{min-width:0}
#ontpage [data-ont-when]{max-width:100%;box-sizing:border-box}
/* on a phone the record's two columns stack, so each box has the card's whole width (the columns are set inline, so !important) */
@media (max-width: 600px){ #ontpage #ontrecord .newgrid{grid-template-columns:minmax(0, 1fr) !important} }
/* ------------------------------------------------------------ F1174: THE LEADS ROW MENU SHOWS WHOLE
   Row F1174 (join 2's walk, staging v376, fix spec 4, 31 Oct 2026). A lead's row menu (the regmenu of a leadmenu: control) never
   scrolls inside itself: it is short, so regMenuHold places it whole, under its button or over it where the room below is less,
   at every width, and every item stays inside the window. Its placement over the page after every draw is ui/face-register.js. */
#face .regctl[data-ctl^="leadmenu:"] .regmenu{max-height:none;overflow-y:visible}
/* ------------------------------------------------------------ F1196: SCHOOL OUTREACH FITS A PHONE (31 Oct 2026)
   Row F1196 (join 8's walk, F1138, staging v380, fix spec 1). From 600 pixels the subject table is as before: the path drawn open,
   its fold's summary hidden. Under 600 pixels each subject line is a card (the subject, what to do next, when it is due, the round
   and the days waiting, the one press), the path folded under it behind "the path", and the step's panel below the card at full
   width, so the page never scrolls sideways and the press and the teacher's email are read where they are. */
#outrsubjects details.outrpathfold > summary{display:list-item;cursor:pointer;margin-top:0}
@media (min-width:600px){
  #outrsubjects details.outrpathfold[open] > summary{display:none}
}
@media (max-width:599px){
  #outrsubjects,#outrsubjects > tbody{display:block;width:100%;border:0;background:none}
  #outrsubjects > tbody > tr:first-child{display:none}
  #outrsubjects tr[data-outrsubject]{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:8px 0 0;background:#fff}
  #outrsubjects tr[data-outrsubject] > td{display:block;border:0;padding:0;min-width:0;max-width:100%}
  #outrsubjects tr[data-outrsubject] > td:empty{display:none}
  #outrsubjects tr[data-outrsubject] > td:nth-child(1){order:1;flex:1 1 100%}
  #outrsubjects tr[data-outrsubject] > td:nth-child(1) .outrpill{white-space:normal}
  #outrsubjects tr[data-outrsubject] > td[data-outrnext]{order:2;flex:1 1 100%;font-weight:bold}
  #outrsubjects tr[data-outrsubject] > td[data-outrdue]{order:3}
  #outrsubjects tr[data-outrsubject] > td[data-outrdue]::before{content:"due ";color:var(--sub)}
  #outrsubjects tr[data-outrsubject] > td[data-outrround]{order:4}
  #outrsubjects tr[data-outrsubject] > td[data-outrwaiting]{order:5}
  #outrsubjects tr[data-outrsubject] > td[data-outrwaiting]::after{content:" waiting";color:var(--sub)}
  #outrsubjects tr[data-outrsubject] > td:nth-child(7){order:6;flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
  #outrsubjects tr[data-outrsubject] > td:nth-child(7) .outrbtn{min-height:44px;white-space:normal;max-width:100%}
  #outrsubjects tr[data-outrsubject] > td:nth-child(2){order:7;flex:1 1 100%}
  #outrsubjects tr.outrpanelrow,#outrsubjects tr.outrpanelrow > td{display:block;width:100%;border:0;padding:0;box-sizing:border-box}
  #outrsubjects tr.outrpanelrow #outrpanel{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
  #outrsubjects tr.outrpanelrow #outrpanel .input{max-width:100%;box-sizing:border-box}
}
/* ------------------------------------------------------------ F1205: A KEPT MISCONCEPTION READS IN FULL ON PROGRESS AND ON A TOUCH SCREEN (31 Oct 2026)
   Row F1205 (Juliet T's look, WALK - Juliet T's Look, Transcript Rows F1155 To F1157, pictures 11 and 12). The mark of an open
   misconception (ui/lesson-pastoral.js lpMiscMarkHtml) is its own line: on Progress under the skill's one-line name (the <br> that
   skillCellLayout splits at draws nothing), on a lesson row beside RECALL; its words wrap whole inside the cell, never cut, and
   Sorted keeps a size a finger can press. A subtopic's or whole skill's count starts its own chip. */
td.skillname > br.lp-misc-br{display:none}
.lp-misc[data-misc-mark],.lp-misc[data-misc-fold]{display:block;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.5;margin-top:4px;max-width:100%;box-sizing:border-box}
.lp-misc[data-misc-mark] > .tag-warning,.lp-misc[data-misc-fold] > .tag-warning{margin-left:0;display:inline-block}
.lp-misc[data-misc-mark] .lp-misc-line{font-size:12px;color:var(--ink-2,#333)}
tr.subtopicband td .lp-misc-count{white-space:nowrap;font-weight:bold}
tr.subtopicband td .lp-misc-count[role="button"],.lp-misc[data-misc-fold] .lp-misc-count[role="button"]{cursor:pointer;min-height:24px;line-height:22px}
/* a Sorted just pressed: the same block in the same size, quiet, its box pressing nothing */
.lp-misc.lp-misc-was{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.5;margin-top:4px;max-width:100%;box-sizing:border-box}
.lp-misc.lp-misc-was > .tag-warning{margin-left:0;display:inline-block;color:#6b6f76;background:#f1f2f3;border-color:#c9ccd0}
.lp-misc.lp-misc-was .lp-misc-line{font-size:12px;color:#6b6f76;text-decoration:line-through}
.lp-misc[data-misc-mark] > button[data-misc-sorted],.lp-misc.lp-misc-was > .lp-misc-donebox{display:inline-block;box-sizing:border-box;min-height:32px;min-width:72px;margin-left:4px;vertical-align:middle;white-space:nowrap;text-align:center}
.lp-misc.lp-misc-was > .lp-misc-donebox{cursor:default;color:#6b6f76;border-style:dashed;background:#fafafa}
@media (max-width:599px){ .lp-misc[data-misc-mark] > button[data-misc-sorted],.lp-misc.lp-misc-was > .lp-misc-donebox{min-height:44px} }
  /* ------------------------------------------------------------ F1195: THE ROW'S OPEN THE CHECKLIST PRESS CENTRES ITS LABEL AT PHONE WIDTH
     Row F1195 (join 3's walk, F1138, staging v379, spec 6): at 454 a lead's open the Checklist press (a link, ui/face-leads-row.js,
     F913) stood as a whole-width block (F942) 44 high (F874), so its label sat underlined at the box's top left, where the other
     row presses (buttons) hold theirs in the middle of the line. Under 600 pixels that one press lays its label out in the middle of
     its box, one line, not underlined; the box keeps F874's 44 and F942's width. From 600 pixels nothing changes. */
  @media (max-width:599px){
    #face #leadlist td.leadact a.leadbtn[data-leadchecklistbtn]{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;white-space:nowrap}
  }
  /* F1195, the run's addition (F1203's entry 2583): F1193's Time offered line (time confirmed keeps ..., data-leadconfirmmins) is
     drawn in the row's last cell inside .leadacttail, whose one line (white-space:nowrap) held it unwrapped, so a long line grew
     the Leads table past its box, as F1203 found for the clash line. It wraps as F1203's lines do (FACE_LEAD_WRAP,
     ui/face-leads-free-times.js): a block, normal white-space, at most 360 pixels and its cell, left aligned. */
  #face #leadlist [data-leadconfirmmins]{display:block;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box;max-width:360px;margin:2px 0 0;text-align:left}
/* F1260 (Juliet T, 1 Nov 2026): the parent's name on a lead's row is a press that opens the parent's card (ui/face-parent-card.js),
   + add another student stands under the students, and the card's fields read one a line with their change press beside */
a.leadnamelink{color:inherit;text-decoration:none;cursor:pointer}
a.leadnamelink:hover,a.leadnamelink:focus-visible{text-decoration:underline}
.leadaddstu{display:block;margin:4px 0 0 0;white-space:nowrap}
.leadpcardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.leadpcardfacts th{width:130px;text-align:left;vertical-align:top}
.leadpcardfacts td{overflow-wrap:anywhere}
.leadpcardfacts td > .regedit{margin-left:6px}
.leadpcardedit{margin-top:8px}
.leadpcardedit .newgrid{grid-template-columns:110px minmax(0,1fr)}
@media (max-width:600px){.leadpcardedit .newgrid{grid-template-columns:1fr}}
  /* ------------------------------------------------------------ F1253: THE TUTOR REGISTER'S GLANCE, THE PRESSES STACKED
     Row F1253 (Juliet T, 1 Nov 2026, the Tutor register's two pictures: "Buttons in final column should be stacked as to allow other
     columns to have better row visibility"). The row's presses (review N changes, open the record, lessons (N due)) stand one above
     another in the last column (ui/face-tutors.js .tregpresses), each the column's full width, the column as narrow as its longest
     word allows, so Specialism, Availability, Confirmed, DBS/Background Check and Lesson review get the width. At phone width the
     row stands as a card (F369) and the presses stand one above another under it, at most 20em wide. */
  #face #treglist td.tregact{width:1%;min-width:11em;white-space:normal;overflow-wrap:normal;vertical-align:middle}
  #face #treglist td.tregact .tregpresses{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp1)}
  #face #treglist td.tregact .tregpresses > span{display:block}
  #face #treglist td.tregact .tregpresses .btn{display:block;width:100%;margin:0;white-space:normal;text-align:center;box-sizing:border-box}
  #face #treglist td.tregspec{min-width:7em}
  @media (max-width:599px){
    #face #treglist td.tregact{width:auto;min-width:0}
    #face #treglist td.tregact .tregpresses{max-width:20em;margin-top:var(--sp1)}
  }
  /* ------------------------------------------------------------ F1286: THE PLAN TABLE'S SKILL RAIL WRAPS, SO THE TABLE FITS WITH SKILLS OPEN
     Row F1286 (F1269's builder, 1 Nov 2026): with a subtopic's skills opened on Build Next Block step 1, the one-line skill rail of
     A288 (styles/planner-skill-rows.css: the name, then the picker, Dr Frost and Prereqs on one unbroken line) set the Subtopic
     column's least width to the whole rail, about 320 pixels, so the plan table ran about 100 pixels past its box at 1280 to 1440.
     In this table only (table[data-binp-plan], ui/brief-inputs.js briefPlanTable) the rail may wrap: the name keeps its first line
     and the controls go under it, wrapping among themselves where the column is narrower still. Every other skill rail is as it was. */
  #pages table[data-binp-plan] td.skillname.onerow .cellrow{flex-wrap:wrap;row-gap:4px}
  #pages table[data-binp-plan] td.skillname.onerow .name{flex:1 1 120px}
  #pages table[data-binp-plan] td.skillname.onerow .actions{flex:0 1 auto;max-width:100%;flex-wrap:wrap;row-gap:4px}
/* F1256 (Juliet T, 1 Nov 2026): ONE SHAPE FOR EVERY TAB of the Lead Educator's panel (ui/face-panels.js faceTabHtml and
   faceTabRowHtml), and MY CLOCK on the top line in a floating card (ui/clocks.js clocksChipHtml, clocksCard). */
.facetabshape { font-size: 13px; color: #2b2f33; }
.facetabhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 2px 0 8px; margin-bottom: 6px; border-bottom: 1px solid #e5e2da; }
.facetabtitle { font-size: 15px; font-weight: 600; color: #1f2328; }
.facetabcount { display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 999px; background: #eef1f4; color: #3c4650; font-size: 12px; font-weight: 600; text-align: center; line-height: 18px; }
.facetabcount[data-tab-count="0"] { background: #f4f5f6; color: #8a939c; font-weight: 400; }
.facetabwho { flex: 1 1 260px; font-size: 12.5px; color: #6b737b; }
.facetabset { margin-left: auto; font-size: 12px; padding: 2px 10px; }
.facetabsettings { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #e5e2da; border-radius: 6px; background: #fafaf8; font-size: 12.5px; }
.facetabempty { padding: 6px 0; font-size: 13px; color: #6b737b; }
/* the cards inside a tab drawn flat, so every tab reads as one list under its one head */
#face .facetabrows .card, .facetabrows .card { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0 0 6px; padding: 0; }
#face .facetabrows .card-body, .facetabrows .card-body { padding: 0; }
#face .facetabrows .card-head, .facetabrows .card-head { font-size: 12.5px; padding: 0 0 6px; margin: 0; background: transparent; border: 0; justify-content: flex-start; }
#face .facetabrows .daylabel, .facetabrows .daylabel { margin: 10px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #5a636b; text-transform: none; }
/* one line, four columns: who (the name, its code small beside it), what, when, the press */
.facerow { display: grid; grid-template-columns: 210px minmax(0, 1fr) 170px auto; align-items: center; column-gap: 12px; padding: 2px 4px; border-bottom: 1px solid #f0eee9; font-size: 13px; line-height: 1.3; }
.facerow[hidden] { display: none; }
.facerow:hover { background: #fafaf8; }
.facerow-who { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.facerow-who .code, .facerow-who .skill-code, .facerow-who .namecode { font-weight: 400; font-size: 11.5px; color: #8a939c; }
/* the name with its code small and grey under it, as every list draws a person (F336, section KW) */
.facerow-what { min-width: 0; overflow-wrap: anywhere; }
.facerow-when { min-width: 0; color: #4d565e; font-size: 12.5px; }
.facerow-press { justify-self: end; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.facerow-sep { display: none; }
.facerow .examspapers { margin: 0; }
.clocksfamrow > .facerow { border-bottom: 0; }
/* the lines not drawn by the row helper (the live lesson alerts, the payment tables, the safeguarding lines) in the same type */
.facetabrows .livealert, .facetabrows table.list, .facetabrows .hint, .facetabrows .skill-code { font-size: 12.5px; }
.facetabrows table.list td, .facetabrows table.list th { padding: 5px 8px; }
@media (max-width: 640px) {
  #stubar .clockschipbtn, .clockschipbtn { min-height: 44px; }
  /* a phone: each line flows as one sentence, its separators shown, so a list stays as short as before */
  .facerow { display: block; padding: 3px 2px; }
  .facerow > span { display: inline; }
  .facerow-sep { display: inline; }
  .facerow-press { display: inline; }
}
/* My clock: the chip on the top line, beside sign out, and its floating card */
.clockschip { display: inline-flex; align-items: center; margin: 0 6px; }
.clockschipbtn { font-size: 12.5px; padding: 3px 10px; min-height: 32px; }
.clockschiptime { font-variant-numeric: tabular-nums; color: #4d565e; }
.clockscard { position: fixed; z-index: 40; width: 440px; max-width: calc(100vw - 16px); max-height: calc(100vh - 80px); overflow: auto; padding: 10px 12px; background: #fff; border: 1px solid #d8d4cc; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); font-size: 13px; }
.clockscardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 14px; }
  /* ------------------------------------------------------------ F1254: THE TUTOR'S CARD IN TWO TABS, AND STUDENTS ASSIGNED ON THE REGISTER'S ROW
     Row F1254 (Juliet T, 1 Nov 2026, the Tutors page's two pictures): the card a tutor's name opens (ui/face-tutors.js tovHtml) has two
     tabs, Overview and Students; the Students tab holds the tutor's students with their presses, which stood in the Tutors page's own
     section. The card is drawn outside #face, so the rules the section's presses had there are given here under .tovpanel. The register's
     Students assigned cell is one press, the names and the count of the rest. At phone width the tabs wrap and a student's presses
     stand under their name. */
  .tovpanel .tovtabs{display:flex;flex-wrap:wrap;gap:var(--sp1);margin:var(--sp2) 0;border-bottom:1px solid var(--line)}
  .tovpanel .tovtab{min-height:32px;margin-bottom:var(--sp1)}   /* the chosen tab is the house's chosen press, .btn.on */
  .tovpanel .tovstuhead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2);margin:0 0 var(--sp2)}
  .tovpanel .tovstuhead [data-tutortools]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp2)}
  .tovpanel .tutorblock .btn,.tovpanel .tutorblock select{min-height:28px;font-size:var(--fs-sm);vertical-align:middle}
  .tovpanel .tutorblock table.list td{padding:var(--sp2)}
  .tovpanel .tutorblock table.list td[style*="text-align:right"]{white-space:nowrap}
  .tovpanel .linkbox input{width:100%;box-sizing:border-box;margin-top:var(--sp1)}
  #face #treglist td.tregstudents{min-width:9em}
  #face #treglist td.tregstudents a.tregstugo{color:inherit;text-decoration:none;cursor:pointer}
  #face #treglist td.tregstudents a.tregstugo:hover,#face #treglist td.tregstudents a.tregstugo:focus{text-decoration:underline}
  #face #treglist td.tregstudents .tregstumore{color:#0b57d0;white-space:nowrap}
  @media (max-width:599px){
    .tovpanel .tovtab{flex:1 1 auto}
    .tovpanel .tutorblock table.list td[style*="text-align:right"]{white-space:normal}
    .tovpanel .tutorblock table.list tr[data-pair] td{display:block;text-align:left !important}
  }
  /* ------------------------------------------------------------ F1255: THE WISE CARD IS ONE PRESS, INSIDE STEP 2
     The Set up via WISE API card sits inside step 2, under step 2's own body, so it stands when step 2 folds; its one busy line
     (Expect to be added in 1 minute) with the turning spinner beside it; Do it by hand under the press. Under 600 pixels the card
     keeps a smaller margin. */
  .onbstep > .ofwbox.ofwone{margin:0 var(--sp3) var(--sp3)}
  .ofwone .onbbyhand{margin-top:var(--sp2)}
  .ofwexpect{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap;color:var(--ink);font-size:var(--fs-lg);margin:0 0 var(--sp2)}
  .ofwexpect .ofwmark{position:static;flex:0 0 auto}
  @media (max-width:600px){ .onbstep > .ofwbox.ofwone{margin:0 var(--sp2) var(--sp2)} }
  /* ------------------------------------------------------------ F1299: THE PLAN TABLE'S EXPECTED BY END AND WHY BOXES SHOW THEIR WHOLE CHOICE
     Row F1299 (the W-BLOCK re-walk, 2 Nov 2026): at 1279 to 1415 wide the Expected by end picker read "core holding, heigh" and the
     Why box "never tested, and in r". In Build Next Block step 1's plan table only (table[data-binp-plan], ui/brief-inputs.js
     binpWholeBox) each box draws its chosen text whole and wrapped, in the look of a box, and its own picker or input lies over it,
     unseen until the input is typed in, so a press on the text opens the picker or starts the typing. Its column widths are as F1269 left them. */
  #pages table[data-binp-plan] .binp-whole{position:relative;display:block;width:0;min-width:100%}   /* adds no width of its own to the column: F1269's widths stand */
  #pages table[data-binp-plan] .binp-whole-text{display:block;box-sizing:border-box;font-size:12px;line-height:1.35;padding:3px 6px;
    border:1px solid var(--grid);border-radius:4px;background:#fffdf3;white-space:pre-wrap;overflow-wrap:break-word;text-align:left}
  #pages table[data-binp-plan] .binp-whole[data-binp-whole="expect"] .binp-whole-text{padding-right:16px;background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);
    background-size:4px 4px,4px 4px;background-position:calc(100% - 9px) 9px,calc(100% - 5px) 9px;background-repeat:no-repeat}
  #pages table[data-binp-plan] .binp-whole > select,#pages table[data-binp-plan] .binp-whole > input{position:absolute;left:0;top:0;width:100%;height:100%;
    min-width:0;max-width:none;margin:0;box-sizing:border-box;opacity:0;cursor:pointer}
  #pages table[data-binp-plan] .binp-whole > input{cursor:text}
  #pages table[data-binp-plan] .binp-whole > input:focus{opacity:1}
  #pages table[data-binp-plan] .binp-whole:focus-within .binp-whole-text{outline:2px solid var(--sub);outline-offset:1px}
/* F1350 (Juliet T's re-walk, General 2, 2 Nov 2026: "show the full option"): MY CLOCK'S CARD SHOWS ITS WHOLE LIST. Inside the
   floating card only (#clockscard, ui/clocks.js clocksCardPlace), the one picker's open list flows in the card instead of hanging
   out of it, so the card grows to hold every option, each option's words whole; ui/clocks.js caps the card at the window's bottom
   and scrolls the list in its own box only then. The picker everywhere else (tzPickerHtml, styles/planner-call.css) is as before. */
#clockscard { max-width: calc(100% - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
#clockscard .tzctl.open { display: contents; }
#clockscard .tzlist { position: static; flex: 1 1 100%; min-width: 0; width: auto; max-width: 100%; margin: 2px 0 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
#clockscard .tzopt > span, #clockscard .tzother label { min-width: 0; overflow-wrap: break-word; }
#clockscard .tzother .input-date { min-width: 0; flex: 1 1 160px; }
  /* ------------------------------------------------------------ F1348: THE ON THE CALL BAR NAMES THE PARENTS AND CHILDREN ON THE CALL
     The lead's call card's top row (ui/consult-lead.js cleadWhoHtml): the parents' names, then a chip per child of the call, the
     chosen child's filled; with two or more children each chip is a press. It stays on the bar the card folds to. */
  .cleadwho{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
  .cleadwho .cc-sep{color:#6b7684}
  .cleadwho-par{font-weight:bold;color:#1b3348}
  .cleadwho-kid{display:inline-block;font:inherit;font-size:12px;line-height:1.3;border:1px solid #3f4a5a;border-radius:999px;padding:1px 9px;background:#fff;color:#1b3348}
  button.cleadwho-kid{cursor:pointer}
  button.cleadwho-kid:hover{background:#eef2f6}
  .cleadwho-kid.on{background:#3f4a5a;color:#fff}
  @media (max-width: 600px){
    .callcard[data-autofold="1"] > .cc-top > .cleadwho{display:inline-flex;flex-wrap:nowrap}
  }
/* ------------------------------------------------------------ F1347: THE MESSAGE BOX'S CLOSE AT ITS TOP RIGHT (2 Nov 2026) */
/* Row F1347 (Juliet T's re-walk, BR7a): every message box under a lead's row has its close first in the box (faceLeadWaCloseHtml,
   ui/face-leads-row.js), laid at the box's top right; the head keeps room for it so no word sits under the press. */
.leadwa:has(> .leadwax){position:relative}
.leadwa > .leadwax{position:absolute;top:6px;right:8px;margin:0}
.leadwa > .leadwax ~ .leadwahead{padding-right:64px}
.leadwa .leadwakid > b[data-leadparttitle]{display:block}
  /* ------------------------------------------------------------ F1340: FIGURES BY CHANNEL IS A BUTTON UNDER EXPORT THE REGISTER, AND A POP-UP
     Row F1340 (Juliet T's re-walk reflections, 2 Nov 2026, General 5): on the Leads view the bar's export the register and Figures by
     channel stand in one column on the bar's first line, the same width and height (ui/face-register.js, #leadexportcol); the figures
     open over the page with their own close at the top right (ui/face-first-contact.js faceLeadFiguresHtml, #leadfigback). */
  #face > .toolbar:first-child > .leadexportcol{order:2;margin-top:0;margin-left:auto;display:inline-flex;flex-direction:column;align-items:stretch;gap:4px}
  #face > .toolbar:first-child > .leadexportcol > .btn{margin:0 !important;width:100%}
  .leadfigback{position:fixed;inset:0;z-index:60;background:rgba(32,33,36,.45);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
  .leadfigback > .leadfigures{margin:0;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 12px 32px rgba(0,0,0,.3)}
  .leadfigures .card-head > #leadfighead{margin-right:auto}
  .leadfigclose{border:0;background:none;cursor:pointer;font-size:var(--fs-md);line-height:1;padding:4px 6px;color:var(--ink-2);min-width:32px;min-height:32px}
  .leadfigclose:hover{color:var(--navy)}
/* ------------------------------------------------------------ F1216: THE LEADS LIST STANDS EACH ROW AS A CARD FROM 600 TO 899 PIXELS
   Row F1216 (F1195's walk, entry 2600; Josh B's pick of 2 Nov 2026, A2344 a): between 600 and 899 pixels the Leads row's last
   cell was 79 pixels wide, so its wrapped lines (Time offered, F1203's clash lines) stood very tall. In that band the Leads list
   (and only it) stands each row as a card as under 600 (F369's card, F874's order: What you do now and its press first), each
   wrapped line the card's whole width; Came in stays hidden, as below 900. Under 600 and from 900 nothing changes. */
@media (min-width:600px) and (max-width:899px){
  #face table#leadlist,#face #leadlist tbody,#face #leadlist tr,#face #leadlist td{display:block;width:auto;min-width:0;max-width:none;box-sizing:border-box}
  #face #leadlist tr:has(> th){display:none}
  #face #leadlist tr.leadrow{position:relative;padding:var(--sp2) 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
  #face #leadlist tr:last-child{border-bottom:0}
  #face #leadlist td{border:0;padding:2px var(--sp3);white-space:normal}
  #face #leadlist td[data-h]::before{content:attr(data-h);display:block;font-size:var(--fs-xs);color:var(--sub);font-weight:normal}
  #face #leadlist td.leadact{text-align:left;width:auto;max-width:none}
  #face #leadlist td.leadcame{display:none}   /* Came in stays hidden below 900, as F145 laid it out */
  #face #leadlist tr.leadrow > td.leadnextcell{order:-2}
  #face #leadlist tr.leadrow > td.leadact{order:-1}
  #face #leadlist .regpick{max-width:100%;white-space:normal}
  #face #leadlist .leadtrack{width:120px}
  #face #leadlist td.leadact a.leadbtn[data-leadbtn="checklist"]{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;white-space:nowrap}
  #face #leadlist :is([data-leadconfirmmins],[data-leadtimeslines],[data-leadsessdiffers],[data-leadclash]){max-width:100% !important}
}
  /* ------------------------------------------------------------ F1341: THE PARENT'S CARD HOLDS THE WHOLE FAMILY, THE ROW ONLY SELECT DETAILS
     Row F1341 (Juliet T's re-walk reflections, 2 Nov 2026, AR10): the lead's channel is one small chip at the foot of the Parent cell
     (.leadchan, in place of the Came in column); the Talking line is a quiet link to the card's hand back (.leadtalking); in the card
     each child's subject lines (.leadpcardsubj) stand under the child, and remove reads red as it did in the menu (.leadpcardwarn). */
  #face .leadchan{display:inline-block;margin:4px 0 0;padding:0 6px;border:1px solid #c9d3e1;border-radius:999px;background:#f4f6fa;color:var(--ink-2);font-size:var(--fs-sm);line-height:16px;white-space:nowrap}
  #face .leadparent .leadchan{display:table;margin-top:4px}
  #face a.leadtalking{color:inherit;text-decoration:none;cursor:pointer}
  #face a.leadtalking:hover{text-decoration:underline}
  .leadpcardkid{margin:2px 0 6px}
  .leadpcardkid .leadpcardsubj{display:block;margin:2px 0 0 12px;white-space:normal;overflow-wrap:anywhere}
  .leadpcardsubj .leadpcardtimes{color:var(--sub)}
  .regedit.leadpcardwarn{color:#8c1d40}
  /* ------------------------------------------------------------ F1349: THE CALL CHOOSES A COURSE WITH THE PLANNER'S OWN PICKER
     The call's section 2 (ui/consult-lead.js cleadCoursePanel): the picker opens under its subject line, the list's own classes,
     the width of the line; section 8 shows the course read only with change. */
  .cleadpicker{margin-top:6px;background:#fff;border:1px solid #b8c0cc;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.08);text-align:left;font-size:12.5px;font-weight:normal;white-space:normal}
  .cleadpicker .cpnarrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px}
  .cleadpicker .cppanel.cpcall{width:auto;margin-top:0;border:0;box-shadow:none}
  .cleadcourse .regpick{max-width:100%;white-space:normal;text-align:left}
  .cend .readonly[data-cend-course]{display:inline-block;max-width:70%}
/* ------------------------------------------------------------ F1361: A STAGE'S NICE TO HAVE LINES, IN THEIR OWN QUIETER GROUP (3 Nov 2026)
   Row F1361 (Juliet T's pick a on Q3 of DESIGN - The Standardised SOW Page): after a stage's essential lines, its nice to have lines
   (last year's scheme, the diagnostic set and used) under one small head, Nice to have: improves accuracy, drawn quieter than the
   essential ones, wrapping at phone width like every journey line. */
.ckjnice{margin-top:6px;padding:4px 0 0 8px;border-left:4px solid #e3e3ea}
.ckjnicehead{font-size:11.5px;color:#5b6270;padding:2px 0}
.ckjnice .ckjline{font-size:12px;color:#5b6270;border-top-style:dashed}
.ckjnice .ckjline .ckjlabel{color:#5b6270}
  /* ------------------------------------------------------------ F1342: THE STUDENT'S CARD, OPENED BY THE STUDENT'S NAME
     Row F1342 (Juliet T's re-walk reflection BR6, 2 Nov 2026): the student's card (#stucard, in the parent's card's shell) with its
     one top press (.fscgo) and a line per subject (.fscsubj); the child's name in the parent's and the tutor's cards (.fscname) reads
     as a press, as the Leads row's chip does. */
  #stucard .fsctop{margin:4px 0 10px}
  #stucard .fsctop .fscgo{display:inline-block}
  #stucard .fscsubj{margin:0 0 6px;white-space:normal;overflow-wrap:anywhere}
  #stucard .fscsubj .fsctimes{color:var(--sub);margin:2px 0 0 12px}
  #stucard .fscparent .nameover,#stucard .fschead .nameover{display:inline-flex}
  a.fscname{color:inherit;text-decoration:none;cursor:pointer}
  a.fscname:hover{text-decoration:underline}
/* ------------------------------------------------------------ F1346: THE WHAT YOU DO NOW COLUMN WIDER
   Row F1346 (Juliet T's re-walk reflection BR4, 2 Nov 2026): at 1280 pixels the What you do now lines wrapped three and four times.
   From 900 pixels (the table; under 900 each row stands as a card, F1216) the What you do now column takes a third of the list, so a
   line wraps at most once at 1280, and the other columns, the press column among them, share the rest as the table lays them out
   (a fixed press width put the presses past their cell, sections MD and NE). This row is the one owner of the Leads table's widths. */
@media (min-width:900px){
  #face #leadlist td.leadnextcell{width:34%}
}
/* ------------------------------------------------------------ F1394: THE FAQS AS A FOLD IN THE PAGE (3 Nov 2026)
   The audit of the initial consultation page of 3 Nov 2026, SPEC 4: the ? FAQs list opens in flow under its press, no backdrop and no
   fixed layer; its close sits at the head of the fold, not over it. */
.pqfold{position:static;margin:8px 0 12px;padding:10px 14px;border:1px solid #d7dde4;border-radius:6px;background:#fff}
.pqfold .pqclose{position:static;font-size:13px;margin:0 0 6px}
.pqfold .pqpanel{margin:4px 0 0}
  /* ------------------------------------------------------------ F1344: THE ROW'S PRESSES STACKED AS PATHWAY BUTTONS, ASK WISE NOW AN ICON
     Row F1344 (Juliet T's re-walk reflection BR10, 2 Nov 2026): the row's last cell has no ... menu; under the main press each other
     press is a button of the same width (.leadpaths .leadpath), stacked, its pathway named first; ask WISE now is a small refresh icon
     beside Where they are (.leadwiseicon). */
  #face td.leadact .leadpaths{display:flex;flex-direction:column;margin:0 0 var(--sp1) 0}
  #face td.leadact .leadpaths .leadpathname{display:block;font-size:var(--fs-sm);color:var(--sub);line-height:14px;margin:var(--sp1) 0 2px 0}
  #face td.leadact .leadpaths .leadpath{display:block;width:100%;max-width:none;min-height:28px;margin:0;white-space:normal;text-align:left}
  #face td.leadwhere .leadwiseicon{border:1px solid #c9d3e1;border-radius:999px;background:#f4f6fa;color:var(--ink-2);font-size:var(--fs-sm);line-height:16px;padding:0 6px;cursor:pointer;vertical-align:middle}
  #face td.leadwhere .leadwiseicon[disabled]{opacity:.5;cursor:default}
  /* below 900 pixels the row's own press stays shown (it folded into the ... menu's main item before; there is no menu now) */
  @media (max-width:899px){
    #face td.leadact .leadbtn, #leadlist td.leadact .leadbtn{display:block}
  }
  /* ------------------------------------------------------------ F1345: EVERY PERSON'S NAME IS THE SAME CHIP
     Row F1345 (Juliet T's re-walk reflections General 1 and BR6, 2 Nov 2026): a parent's, a student's or a tutor's name on the Lead
     Educator's pages is one chip (.personchip) in the look of the Leads row's child chip (styles/planner-face.css .leadstu); where it
     opens nothing (the tutor's own seat) it is plain words (.personchipoff). */
  .personchip{display:inline-block;border:1px solid #b9c9e0;background:#eef3fb;color:#2f4a6e;border-radius:6px;padding:2px 8px;font-size:var(--fs-sm);line-height:16px;margin:2px 4px 2px 0;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
  a.personchip{cursor:pointer}
  a.personchip:hover{text-decoration:underline}
  .personchip.personchipoff{border-color:transparent;background:transparent;color:inherit;padding:0;margin:0}
  /* the Students list's name: the chip with no height of its own, so every row keeps one height (section KC) */
  #face #facelist a.facename.personchip{padding:0 6px;margin:0;border:0;box-shadow:inset 0 0 0 1px #b9c9e0;line-height:inherit;vertical-align:middle}
/* ------------------------------------------------------------ F1395: THE RECORDING LINE, THE CALL CARD'S FIRST LINE (3 Nov 2026)
   Say first, the sentence and its said it tap, a line of its own at the head of the call card's top row; amber until tapped. Folded
   to its one line bar as the page scrolls (or by hand), the bar is as before: the line shows with the card open, and section 8
   says in amber while it is not marked said. */
.callcard .cc-say{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px;padding:0 0 6px;border-bottom:1px solid #e3e7ec;margin-bottom:4px}
.callcard .cc-say .cc-said{color:#2d6a3e}
.callcard.folded .cc-say, .callcard[data-autofold="1"] .cc-say{display:none}
/* ------------------------------------------------------------ F1359: THE SCHOOL SCHEME OF WORK IN ONE CARD WITH THREE TABS
   The tab bar, the seven column table (When, School unit, Ours, Sure?, Question, Validate last), the row's question presses, and
   the scheme as received beside the rows; at phone width the pane goes under the rows and the table scrolls inside its card. */
.sowcard { padding: 10px 12px; }
.sowtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--line, #ddd); padding-bottom: 8px; }
.sowtabs .sowtab { margin: 0; }
.sowpane-import .keyvalue { margin: 4px 0; }
.sowtabs .sowtab-n { font-size: 11px; font-weight: normal; }
.sowyears { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.sowundated { margin: 4px 0 8px; }
.sowbeside { display: flex; gap: 12px; align-items: flex-start; }
.sowbeside .sowrows { flex: 1 1 60%; min-width: 0; }
.sowscheme { flex: 1 1 38%; min-width: 0; position: sticky; top: 8px; }
.sowscheme iframe { width: 100%; height: 70vh; border: 1px solid var(--line, #ddd); }
.sowscheme img { max-width: 100%; height: auto; }
.sowscheme pre { white-space: pre-wrap; max-height: 70vh; overflow: auto; font-size: 11px; }
/* the seven columns' widths on their colgroup: the narrow ones (#, When, Sure?, Validate) hold their own words and presses whole,
   the wide ones (School unit, Ours, Question) take the rest and wrap between words; beside the scheme the table lays itself out */
table.sowseven { table-layout: fixed; width: 100%; min-width: 0; }
.sowbeside table.sowseven { table-layout: auto; }
table.sowseven td, table.sowseven th { vertical-align: top; word-break: normal; overflow-wrap: normal; }
table.sowseven td:nth-child(3), table.sowseven td:nth-child(4), table.sowseven td:nth-child(6) { overflow-wrap: break-word; }
table.sowseven td:first-child { white-space: nowrap; }
table.sowseven col.sowc-n { width: 118px; }   /* the row number, done, remove and the school-is-here mark on one line */
table.sowseven col.sowc-when { width: 132px; }
table.sowseven col.sowc-unit { width: auto; }
table.sowseven col.sowc-ours { width: 22%; }
table.sowseven col.sowc-sure { width: 72px; }
table.sowseven col.sowc-q { width: 16%; }
table.sowseven col.sowc-val { width: 104px; }
table.sowseven td .input, table.sowseven td select { max-width: 100%; box-sizing: border-box; }
table.sowseven .btn-inline { margin: 1px 2px; }
.sowhere { font-size: 13px; line-height: 1; }
.sowhere.on { color: var(--accent, #2563eb); margin-left: 3px; }
.sowgot { margin: 2px 0; }
.sowprovide { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sowmanual { margin-top: 8px; }
.sowmanual > div { margin: 6px 0; }
@media (max-width: 600px) {
  .sowbeside { flex-direction: column; }
  .sowscheme { position: static; width: 100%; }
  .sowscheme iframe { height: 50vh; }
}
  /* ------------------------------------------------------------ F1434: THE TWO LESSONS AT ONCE WARNING WRAPS INSIDE THE LEAD'S ROW
     Row F1434 (the release v448 gate walk, part D, spec D-1, 4 Nov 2026): F1384's warning said before the press (data-leadconfirmtwice,
     ui/face-leads-free-times.js faceLeadConfirmMinsHtml) sat in the row's last cell inside .leadacttail's one line, so it stood unwrapped,
     widened the lead's row to about 2023 pixels in a 1191 pixel column and pushed time confirmed off the screen. It wraps as the line
     beside it does (F1195, FACE_LEAD_WRAP): a block, normal white-space, at most 360 pixels and its cell, left aligned; the card's own
     warning (data-lttwice) wraps inside the card. The .tag-warning base (styles/planner-skill-rows.css) is unchanged. */
  #face #leadlist [data-leadconfirmtwice]{display:block;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box;max-width:min(360px,100%);margin:2px 0 0;text-align:left}
  #face [data-lttwice]{white-space:normal;overflow-wrap:anywhere;box-sizing:border-box;max-width:100%}