/* ============================================================
   Mentorsy Student Portal — theme
   Matched to learn.mentorsy.in: cream ground, plum ink,
   gold CTA, Playfair display + Nunito Sans body.
   ============================================================ */

/* OLD (to 22 Sep): @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&display=swap'); */
/* NEW (23 Sep) — the same two faces, plus Mulish (the current name of Muli, the WHJR face)
   for the mentor portal and the report card. An @import only works at the very top of a
   stylesheet, so it is added here rather than in the 23 Sep section at the bottom. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* ---- brand ---- */
  --cream:        #FAF5EC;
  --cream-2:      #F3EBDC;
  --surface:      #FFFFFF;
  --surface-2:    #FBF8F2;

  --plum:         #2E0A33;   /* headings / ink */
  --plum-2:       #4A1259;   /* rail, strong borders */
  --plum-3:       #6B1E7A;   /* accent text */
  --plum-soft:    #F0E4F5;   /* pill backgrounds */

  --ink:          #2E0A33;
  --ink-2:        #6B5E70;
  --ink-3:        #9A8FA0;
  --line:         #E8DFD2;
  --line-2:       #D8CCBB;

  --gold:         #F5C542;
  --gold-2:       #E9A825;
  --gold-deep:    #C98A0E;
  --gold-soft:    #FCF2D8;

  --green:        #0F7A4A;
  --green-soft:   #E2F2E9;
  --crimson:      #C41E4E;
  --crimson-soft: #FBE6EC;
  --amber:        #B4611A;
  --amber-soft:   #FBEEDF;

  --radius:       16px;
  --radius-sm:    10px;
  --radius-pill:  999px;

  --shadow-sm:  0 1px 2px rgba(46,10,51,.06), 0 2px 8px -4px rgba(46,10,51,.12);
  --shadow:     0 2px 4px rgba(46,10,51,.05), 0 12px 32px -16px rgba(46,10,51,.28);
  --shadow-gold: 0 4px 14px -4px rgba(233,168,37,.55);

  --rail-w: 76px;

  --font-display: "Playfair Display", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:      #1A0620;
    --cream-2:    #21092A;
    --surface:    #250C2E;
    --surface-2:  #2C0F36;

    --plum:       #F6ECF8;
    --plum-2:     #3A0E46;
    --plum-3:     #D9A6E6;
    --plum-soft:  #3D1149;

    --ink:        #F6ECF8;
    --ink-2:      #BCA8C4;
    --ink-3:      #8A7593;
    --line:       #3C1848;
    --line-2:     #4E2059;

    --gold:       #F7CE5C;
    --gold-2:     #E9A825;
    --gold-deep:  #F7CE5C;
    --gold-soft:  #3A2A0E;

    --green:      #5FCB96;
    --green-soft: #10331F;
    --crimson:    #F286A3;
    --crimson-soft:#3B1220;
    --amber:      #E5A868;
    --amber-soft: #3A250F;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.6);
    --shadow:     0 2px 4px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.8);
    --shadow-gold: 0 4px 14px -4px rgba(233,168,37,.35);
  }
}

:root[data-theme="dark"]{
  --cream:      #1A0620;
  --cream-2:    #21092A;
  --surface:    #250C2E;
  --surface-2:  #2C0F36;
  --plum:       #F6ECF8;
  --plum-2:     #3A0E46;
  --plum-3:     #D9A6E6;
  --plum-soft:  #3D1149;
  --ink:        #F6ECF8;
  --ink-2:      #BCA8C4;
  --ink-3:      #8A7593;
  --line:       #3C1848;
  --line-2:     #4E2059;
  --gold:       #F7CE5C;
  --gold-2:     #E9A825;
  --gold-deep:  #F7CE5C;
  --gold-soft:  #3A2A0E;
  --green:      #5FCB96;
  --green-soft: #10331F;
  --crimson:    #F286A3;
  --crimson-soft:#3B1220;
  --amber:      #E5A868;
  --amber-soft: #3A250F;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.6);
  --shadow:     0 2px 4px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.8);
  --shadow-gold: 0 4px 14px -4px rgba(233,168,37,.35);
}

/* ============================ base ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--plum); margin:0; text-wrap:balance; letter-spacing:-.005em;}
h1{font-size:clamp(28px,4vw,40px); font-weight:700; line-height:1.15;}
h2{font-size:clamp(22px,2.6vw,28px); font-weight:700;}
h3{font-size:19px; font-weight:700;}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}
a{color:var(--plum-3)}
:focus-visible{outline:3px solid var(--gold-2); outline-offset:2px; border-radius:4px}
img{max-width:100%; display:block}

.em{color:var(--plum-3); font-style:italic}
.muted{color:var(--ink-2)}
.tabular{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================ buttons ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:15px; font-weight:800;
  padding:13px 22px; border-radius:var(--radius-sm);
  border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  line-height:1.2;
}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none}

.btn-gold{
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-2) 100%);
  color:#2E0A33; box-shadow:var(--shadow-gold);
}
.btn-gold:hover:not([disabled]){box-shadow:0 6px 20px -4px rgba(233,168,37,.7)}

.btn-outline{
  background:var(--surface); color:var(--plum-3);
  border-color:var(--plum-3);
}
.btn-outline:hover:not([disabled]){background:var(--plum-soft)}

.btn-ghost{
  background:transparent; color:var(--ink-2); border-color:var(--line-2);
}
.btn-ghost:hover:not([disabled]){background:var(--surface-2); color:var(--ink)}

.btn-danger{
  background:var(--surface); color:var(--crimson); border-color:var(--crimson);
}
.btn-danger:hover:not([disabled]){background:var(--crimson-soft)}

.btn-sm{padding:8px 14px; font-size:13.5px; border-radius:8px}
.btn-block{width:100%}
.btn-link{
  background:none;border:none;padding:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.btn-link:hover{color:var(--plum-3)}

/* ============================ pills ============================ */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill);
  background:var(--plum-soft); color:var(--plum-3);
}
.pill-gold{background:var(--gold-soft); color:var(--gold-deep)}
.pill-green{background:var(--green-soft); color:var(--green)}
.pill-crimson{background:var(--crimson-soft); color:var(--crimson)}
.pill-amber{background:var(--amber-soft); color:var(--amber)}
.pill-quiet{background:var(--cream-2); color:var(--ink-2)}

/* ============================ cards ============================ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-topline{border-top:4px solid var(--gold-2)}
.card-topline-green{border-top:4px solid var(--green)}
.card-topline-crimson{border-top:4px solid var(--crimson)}
.card-pad{padding:22px}

/* ============================ forms ============================ */
label.field{display:block; margin-bottom:16px}
label.field > span{
  display:block; font-size:12.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:6px;
}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=time],select,textarea{
  width:100%; font-family:var(--font-body); font-size:16px;
  padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--plum-3); outline:none; box-shadow:0 0 0 3px var(--plum-soft)}
textarea{resize:vertical; min-height:96px}
::placeholder{color:var(--ink-3)}

.hint{font-size:13.5px; color:var(--ink-2); margin-top:-8px; margin-bottom:16px}

.alert{
  border-radius:var(--radius-sm); padding:12px 16px; font-size:14.5px;
  margin-bottom:16px; border:1px solid transparent;
}
.alert-error{background:var(--crimson-soft); color:var(--crimson); border-color:var(--crimson)}
.alert-ok{background:var(--green-soft); color:var(--green); border-color:var(--green)}
.alert-warn{background:var(--amber-soft); color:var(--amber); border-color:var(--amber)}

/* ============================ layout ============================ */
.shell{display:block; min-height:100vh}

/* ---------- the icon rail ----------
   Always in view on a wide screen so the sections are one click
   away. It widens on hover to show the labels. Below 900px it
   steps aside and the hamburger is the only way in. */
.rail{
  position:fixed; top:0; left:0; bottom:0; z-index:40;
  width:var(--rail-w);
  background:linear-gradient(180deg,#3B0A47 0%,#5A1170 100%);
  display:none; flex-direction:column; align-items:stretch;
  padding:14px 10px; gap:6px; overflow-y:auto;
  box-shadow:2px 0 14px rgba(46,10,51,.18);
}

.rail-brand{
  height:48px; min-height:48px; border-radius:12px; text-decoration:none;
  background:linear-gradient(160deg,#7B2D8E,#4A1259);
  color:var(--gold); font-family:var(--font-display); font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(245,197,66,.35); margin-bottom:10px;
}
.rail-links{display:flex; flex-direction:column; gap:4px; flex:1; min-height:0}

.rail a[data-route], .rail-out{
  display:flex; align-items:center; justify-content:center;
  height:46px; min-height:46px; border-radius:12px;
  text-decoration:none; color:#EBD9F2; border:1px solid transparent;
  position:relative;
}
.rail a em{
  font-style:normal; font-size:20px; line-height:1;
  width:24px; flex:0 0 24px; text-align:center;
}
/* the label lives in the tooltip and in the drawer, not here */
.rail .rail-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.rail a[data-route]:hover, .rail-out:hover{background:rgba(255,255,255,.10)}
.rail a[aria-current="page"]{
  background:rgba(255,255,255,.16); border-color:rgba(245,197,66,.4); color:#fff;
}
.rail .dot{
  width:9px; height:9px; border-radius:50%; background:var(--gold);
  position:absolute; top:9px; right:11px;
  border:2px solid #4A1259;
}
.rail-out{margin-top:6px; border-top:1px solid rgba(255,255,255,.14); border-radius:0 0 12px 12px}

@media (min-width:900px){
  .rail{display:flex}
  .main{padding-left:var(--rail-w)}
}

/* ---------- the drawer ----------
   Closed on every screen size. The hamburger opens it over the page and
   it shuts again the moment you pick something. */
/* On a mouse-driven screen the rail is there and hovering opens the
   menu, so the button in the page is clutter. Touch screens have no
   hover and no rail, so it stays — it is the only way in. */
/* OLD (to 23 Sep d) —
@media (hover: hover) and (pointer: fine) and (min-width:900px){
  .topbar > .menu-btn{display:none}
}
*/
/* NEW (23 Sep e) — wherever the rail shows, the page carries no three
   lines, mouse or touch: with a mouse, hovering the rail opens the menu;
   on a touch screen the three lines sit in the rail, right below the
   logo (.rail-menu, at the end of this file). Below 900px there is no
   rail, so the lines stay in the page — the only way in on a phone. */
@media (min-width:900px){
  .topbar > .menu-btn{display:none}
}

.menu-btn{
  width:44px;height:44px;border-radius:12px; flex:0 0 44px;
  display:flex;align-items:center;justify-content:center; gap:4px; flex-direction:column;
  background:var(--plum-soft); border:1px solid var(--line); cursor:pointer; padding:0;
}
.menu-btn i{display:block; width:18px; height:2px; border-radius:2px; background:var(--plum-3)}
.menu-btn:hover{background:#fff}

.scrim{
  position:fixed; inset:0; z-index:60; background:rgba(30,8,40,.45);
  opacity:0; pointer-events:none; transition:opacity .66s ease; /* was .42s */
}
.scrim[data-open]{opacity:1; pointer-events:auto}

.drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:70; width:min(304px, 84vw);
  background:linear-gradient(180deg,#3B0A47 0%,#5A1170 100%);
  display:flex; flex-direction:column; padding:18px 14px;
  transform:translateX(-102%);
  /* OLD — .42s read as a snap on a wide screen
  transition:transform .42s cubic-bezier(.22,.61,.36,1); */
  /* NEW — a long, decelerating glide, the way a good drawer runs on its
     rails: quick to leave, slow to settle. The shadow deepens with it. */
  transition:transform .66s cubic-bezier(.19,.86,.24,1),
             box-shadow .66s ease;
  will-change:transform;
  box-shadow:6px 0 30px rgba(46,10,51,.35); overflow-y:auto;
}
.drawer[data-open]{transform:translateX(0); box-shadow:14px 0 48px rgba(46,10,51,.42)}

/* the contents drift in just behind the panel, so it feels like one movement
   rather than a block of finished UI arriving all at once */
.drawer > *{opacity:0; transform:translateX(-10px); transition:opacity .34s ease, transform .34s ease}
.drawer[data-open] > *{opacity:1; transform:none; transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .drawer > *{opacity:1; transform:none}
}

/* the same three lines, sitting inside the open drawer */
.menu-btn-in{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20);
  margin-bottom:12px;
}
.menu-btn-in i{background:var(--gold)}
.menu-btn-in:hover{background:rgba(255,255,255,.18)}

.drawer .brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; margin-bottom:16px;
}
.drawer .brand .logo{
  width:44px;height:44px;border-radius:12px; flex:0 0 44px;
  background:linear-gradient(160deg,#7B2D8E,#4A1259);
  color:var(--gold); font-family:var(--font-display); font-weight:800; font-size:19px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(245,197,66,.35);
}
.drawer .brand b{color:#fff; font-size:17px; font-family:var(--font-display)}
.drawer .brand span{display:block; color:#D9BFE6; font-size:12px; font-weight:600}

/* ---- SJK Mentorsy wordmark -------------------------------------------
   The same lockup as mentorsy.in: the word "Mentorsy" with SJK set small
   and gold directly over the M. Drawn as SVG so the two never drift apart,
   whatever font loads. The font stack is the site's, letter for letter, so
   the portal and the website render the identical mark.
   OLD (all five pages): <b>Mentorsy</b> — plain text, no SJK. */
.wm{display:block; width:auto; color:#fff}
/* mentorsy.in sets the square mark to 38px and the wordmark to 33.3px —
   about 1.15:1. Matching that ratio here keeps the two sites looking like
   one brand. OLD: 23px / 30px, which left the wordmark dwarfed by the mark. */
.drawer .brand .wm{height:27px}
.auth-brand .wm{height:38px}
@media (max-width:520px){ .auth-brand .wm{height:32px} }


/* who the portal belongs to */
.drawer-profile{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.09); border:1px solid rgba(245,197,66,.28);
  border-radius:14px; padding:12px; margin-bottom:16px;
}
.drawer-profile .pic{
  width:42px;height:42px;border-radius:50%; flex:0 0 42px; overflow:hidden;
  background:var(--gold); color:#4A1259; font-weight:800; font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.drawer-profile .pic img{width:100%;height:100%;object-fit:cover}
.drawer-profile .who{min-width:0}
.drawer-profile .who b{display:block; color:#fff; font-size:15px; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawer-profile .who span{display:block; color:#D9BFE6; font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.drawer a.nav{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  text-decoration:none; color:#EBD9F2; font-size:15px; font-weight:600;
  border:1px solid transparent; position:relative;
}
.drawer a.nav em{font-style:normal; font-size:19px; width:24px; text-align:center; flex:0 0 24px}
.drawer a.nav:hover{background:rgba(255,255,255,.09)}
.drawer a.nav[aria-current="page"]{background:rgba(255,255,255,.16); border-color:rgba(245,197,66,.4); color:#fff}
.drawer a.nav .dot{
  width:8px;height:8px;border-radius:50%; background:var(--gold); margin-left:auto;
}
.drawer .spacer{flex:1; min-height:12px}
.drawer .signout{border-top:1px solid rgba(255,255,255,.14); margin-top:8px; padding-top:10px}

.main{min-width:0}
.wrap{max-width:1080px; margin:0 auto; padding:28px 24px 64px}

.topbar{
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:26px;
}
.topbar .greeting{flex:1; min-width:0}
.greeting .eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--plum-3); margin-bottom:4px;
}

/* a slim line of credits, for the top of the student's home */
.credit-strip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(120deg,#4A1259,#7B2D8E);
  border-radius:var(--radius-sm); padding:12px 16px; margin:28px 0 0;
  color:#F3E6F8; font-size:14.5px;
}
.credit-strip b{color:#fff; font-size:19px; font-family:var(--font-display)}
.credit-strip .low{color:var(--gold); font-weight:700}
.credit-strip a{color:var(--gold); font-weight:700; text-decoration:none; margin-left:auto}
.credit-strip a:hover{text-decoration:underline}

@media (max-width:820px){
  .wrap{padding:20px 16px 56px}
}

/* OLD — scoped to .mentor-panel, so the same avatar drawn anywhere else
   (step 2 of Book a class) had no styles and fell back to an inline box.
.mentor-panel .mentor-pic{
  width:52px;height:52px;flex:0 0 52px;border-radius:14px;overflow:hidden;
  background:var(--plum-soft); color:var(--plum-3);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
}
.mentor-panel .mentor-pic img{width:100%;height:100%;object-fit:cover}
*/
/* NEW — one avatar box, used by every screen that shows a mentor.
   aspect-ratio pins it square even inside a flex row that wants to
   stretch it, and the initials are centred on both axes. */
.mentor-pic{
  width:52px; height:52px; flex:0 0 52px; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  background:var(--plum-soft); color:var(--plum-3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:19px;
  line-height:1; letter-spacing:.02em; text-transform:uppercase;
  align-self:center;
}
.mentor-pic img{width:100%;height:100%;object-fit:cover;display:block}
.mentor-pic-lg{width:64px;height:64px;flex:0 0 64px;border-radius:16px;font-size:23px}
.mini-head{
  font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:4px;
}
.mini-row{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 0; border-top:1px solid var(--line); font-size:14.5px;
}

.stepper{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:14px;
}
.step-btn{
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:2px solid var(--plum-3); background:var(--surface); color:var(--plum-3);
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  padding:0 0 3px;
}
.step-btn:hover:not([disabled]){background:var(--plum-soft)}
.step-btn[disabled]{opacity:.3; cursor:not-allowed}

.recording-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--plum-soft); border:1px solid var(--line);
}
a.recording-row{text-decoration:none; color:inherit; transition:background .15s ease}
a.recording-row:hover{background:#EADAF0}
.recording-row.is-empty{background:var(--surface-2); opacity:.75}
.recording-row.is-empty .rec-mark{background:var(--ink-3)}
.recording-row .rec-mark{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  background:var(--plum-3); color:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center; padding-left:2px;
}

.pager{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}

.week-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:15px;
}
.week-row:last-child{border-bottom:none}

/* ---- the weekly hour picker (Move this weekly class) ----
   The day is its own line and the free hours sit underneath it, so the
   buttons get the full width of the dialog instead of a narrow column. */
.week-block{
  padding:12px 0; border-bottom:1px solid var(--line);
}
.week-block:last-child{border-bottom:none}
.week-day{
  display:block; font-size:15px; margin-bottom:8px;
}
.week-times{
  display:flex; flex-wrap:wrap; gap:8px;
}

/* ============================ report ============================ */
.report-hero{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(120deg,#4A1259 0%,#7B2D8E 55%,#A23FA8 100%);
  border-radius:var(--radius); padding:24px; color:#F6ECF8;
}
.report-hero h2{color:#fff; margin:4px 0 6px}
.report-hero p{color:#E4CDEE; margin:0; font-size:14.5px}
.eyebrow-light{
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}
.report-ring{
  width:116px; height:116px; flex:0 0 116px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:conic-gradient(var(--gold) calc(var(--pct,0) * 1%), rgba(255,255,255,.16) 0);
  position:relative;
}
.report-ring::before{
  content:''; position:absolute; inset:9px; border-radius:50%;
  background:linear-gradient(140deg,#4A1259,#7B2D8E);
}
.report-ring b{position:relative; color:#fff; font-family:var(--font-display); font-size:26px}
.report-ring span{position:relative; color:#E4CDEE; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase}

.metric{
  border-radius:var(--radius); padding:18px 20px; border:1px solid var(--line);
  background:var(--surface); display:flex; flex-direction:column; gap:2px;
  border-left:5px solid var(--plum-3);
}
.metric-label{font-size:12px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-2)}
.metric b{font-family:var(--font-display); font-size:32px; color:var(--plum); line-height:1.1}
.metric-sub{font-size:13.5px; color:var(--ink-2)}
.metric-green{border-left-color:var(--green); background:var(--green-soft)}
.metric-green b{color:var(--green)}
.metric-gold{border-left-color:var(--gold-2); background:var(--gold-soft)}
.metric-gold b{color:var(--gold-deep)}
.metric-crimson{border-left-color:var(--crimson); background:var(--crimson-soft)}
.metric-crimson b{color:var(--crimson)}
.metric-plum{border-left-color:var(--plum-3); background:var(--plum-soft)}
.metric-plum b{color:var(--plum-3)}

.bar-row{display:flex; align-items:center; gap:14px; padding:9px 0}
.bar-name{width:130px; flex:0 0 130px; font-weight:700; font-size:14.5px}
.bar-track{flex:1; height:12px; border-radius:99px; background:var(--cream-2); overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:99px}
.report-ai{border-top:4px solid var(--gold-2)}
@media (max-width:560px){
  .bar-name{width:96px; flex:0 0 96px; font-size:13.5px}
}

/* ============================ grids ============================ */
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.row-end{margin-left:auto}

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:34px 0 16px; flex-wrap:wrap;
}
.section-head h2{margin:0}

/* ============================ credits card ============================ */
.credits{
  background:linear-gradient(150deg,#4A1259 0%,#7B2D8E 100%);
  color:#fff; border-radius:var(--radius); padding:24px;
  position:relative; overflow:hidden; border:1px solid rgba(245,197,66,.25);
}
.credits::after{
  content:""; position:absolute; right:-40px; top:-40px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,197,66,.28),transparent 70%);
}
.credits .label{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#E7CFEF}
.credits .big{
  font-family:var(--font-display); font-size:60px; font-weight:800; line-height:1;
  color:var(--gold); margin:6px 0 2px;
}
.credits .sub{color:#EBD9F2; font-size:14.5px}
.credits .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.18); margin-top:16px; overflow:hidden}
.credits .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:999px}
.credits .warn{
  margin-top:14px; background:rgba(245,197,66,.16); border:1px solid rgba(245,197,66,.45);
  color:#FBEEC4; border-radius:var(--radius-sm); padding:10px 14px; font-size:13.5px; font-weight:600;
}

/* ============================ class card ============================ */
.klass{
  display:flex; gap:18px; padding:20px; align-items:flex-start; flex-wrap:wrap;
}
.klass .avatar{
  width:52px;height:52px;border-radius:14px;flex:0 0 52px;
  background:var(--plum-soft); color:var(--plum-3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:20px;
  overflow:hidden;
}
.klass .avatar img{width:100%;height:100%;object-fit:cover}
.klass .body{flex:1; min-width:200px}
.klass .subject{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--plum);line-height:1.2}
.klass .who{font-size:14.5px;color:var(--ink-2); margin-top:2px}
.klass .when{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:10px; font-size:14.5px; color:var(--ink); font-weight:600;
}
.klass .deadline{font-size:13px;color:var(--ink-2); margin-top:8px}
.klass .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap; margin-top:14px}
.countdown{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:13px;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--cream-2); color:var(--ink-2);
}
.countdown.soon{background:var(--amber-soft); color:var(--amber)}
.countdown.live{background:var(--green-soft); color:var(--green)}

/* ============================ empty ============================ */
.empty{
  text-align:center; padding:48px 24px; color:var(--ink-2);
  border:1.5px dashed var(--line-2); border-radius:var(--radius); background:var(--surface-2);
}
.empty .mark{font-size:34px; margin-bottom:10px}
.empty h3{margin-bottom:6px}

/* ============================ tables ============================ */
.tablewrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
thead th{
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2); padding:12px 18px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
tbody td{padding:13px 18px;border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody td strong{color:var(--ink)}

/* ============================ tabs ============================ */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:2px}
.tabs button{
  font-family:var(--font-body);font-size:14.5px;font-weight:700;
  background:none;border:none;border-bottom:3px solid transparent;
  padding:10px 14px;cursor:pointer;color:var(--ink-2);
}
.tabs button[aria-selected="true"]{color:var(--plum);border-bottom-color:var(--gold-2)}
.tabs button:hover{color:var(--plum)}

/* ============================ modal ============================ */
dialog{
  border:none; padding:0; border-radius:var(--radius); background:var(--surface);
  color:var(--ink); box-shadow:var(--shadow); max-width:min(540px,92vw); width:100%;
  /* a long form must never push its own buttons off the screen */
  max-height:88vh; display:flex; flex-direction:column;
}
dialog:not([open]){display:none}
dialog::backdrop{background:rgba(46,10,51,.55); backdrop-filter:blur(3px)}
.modal-head{padding:22px 24px 0; flex:0 0 auto}
.modal-body{padding:14px 24px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch}
.modal-foot{padding:18px 24px 22px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  flex:0 0 auto; border-top:1px solid var(--line); background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius)}

/* ============================ chat ============================ */
.chat-fab{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:60px;height:60px;border-radius:50%;border:2px solid rgba(245,197,66,.5);
  background:linear-gradient(160deg,#7B2D8E,#4A1259); color:var(--gold);
  font-size:26px; cursor:pointer; box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:820px){.chat-fab{bottom:86px}}
.chat-panel{
  position:fixed; right:20px; bottom:92px; z-index:51;
  width:min(400px,calc(100vw - 32px)); height:min(560px,70vh);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); display:none; flex-direction:column; overflow:hidden;
}
@media (max-width:820px){.chat-panel{bottom:158px}}
.chat-panel[open]{display:flex}
.chat-head{
  background:linear-gradient(150deg,#4A1259,#7B2D8E); color:#fff;
  padding:14px 18px; display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.chat-head strong{font-family:var(--font-display);font-size:17px;font-weight:700}
.chat-head button{background:none;border:none;color:#EBD9F2;font-size:20px;cursor:pointer;line-height:1}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:85%;padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.5}
.bubble.bot{background:var(--cream-2);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.bubble.me{background:var(--plum-2);color:#F6ECF8;align-self:flex-end;border-bottom-right-radius:4px}
.bubble .route{margin-top:8px;display:block}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface-2)}
.chat-form input{flex:1}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ============================ auth page ============================ */
.auth-page{
  min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--cream);
}
@media (max-width:900px){.auth-page{grid-template-columns:1fr}}
.auth-aside{
  background:linear-gradient(165deg,#3B0A47 0%,#5A1170 55%,#7B2D8E 100%);
  color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
@media (max-width:900px){.auth-aside{padding:36px 24px}}
.auth-aside::after{
  content:"";position:absolute;left:-80px;bottom:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,197,66,.22),transparent 68%);
}
.auth-aside h1{color:#fff;font-size:clamp(30px,3.6vw,44px)}
.auth-aside h1 em{color:var(--gold);font-style:italic}
.auth-aside p{color:#E7CFEF;font-size:17px;max-width:44ch;margin-top:14px}
.auth-aside .marks{display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;font-size:14px;color:#EBD9F2}
.auth-aside .marks b{color:#fff}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.auth-brand .logo{
  width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.12);
  border:1px solid rgba(245,197,66,.4); color:var(--gold);
  font-family:var(--font-display);font-weight:800;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.auth-brand span{font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff}
.auth-main{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth-card{width:100%;max-width:410px}
.auth-card h2{margin-bottom:6px}
.auth-switch{
  display:flex;background:var(--cream-2);border-radius:var(--radius-pill);padding:4px;margin:22px 0 24px;
}
.auth-switch button{
  flex:1;font-family:var(--font-body);font-size:14px;font-weight:800;
  border:none;background:none;padding:9px 12px;border-radius:var(--radius-pill);cursor:pointer;color:var(--ink-2);
}
.auth-switch button[aria-selected="true"]{background:var(--surface);color:var(--plum);box-shadow:var(--shadow-sm)}
.otp-boxes{display:flex;gap:8px;justify-content:space-between;margin-bottom:16px}
.otp-boxes input{
  width:100%;text-align:center;font-size:22px;font-weight:800;padding:12px 0;
  font-variant-numeric:tabular-nums;
}
.auth-foot{margin-top:22px;text-align:center;font-size:14px;color:var(--ink-2)}

/* ============================ misc ============================ */
.skeleton{background:linear-gradient(90deg,var(--cream-2) 25%,var(--surface-2) 50%,var(--cream-2) 75%);
  background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--radius-sm);height:96px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.banner-impersonate{
  background:var(--amber-soft); color:var(--amber); border-bottom:2px solid var(--amber);
  padding:10px 18px; font-size:14px; font-weight:700;
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
}

/* OLD — this also flattened the drawer, so the menu snapped open instead of
   gliding. Windows with "animation effects" off reports reduced motion, which
   made the drawer look broken rather than calm.
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
*/
/* NEW — decorative motion still stops, but the drawer keeps its slide. A panel
   that appears out of nowhere is more disorienting than one that eases in, so
   it is kept (a little quicker) even here. */
@media (prefers-reduced-motion:reduce){
  *:not(.drawer):not(.scrim){
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .drawer{transition-duration:.32s !important}
  .scrim {transition-duration:.32s !important}
}

/* ============================================================
   3 SEP — the upcoming-class scroller, the in-portal request
   and the free demo
   ============================================================ */

/* ---------- the scroller, inside the card ----------
   It used to sit under the card as two big circles in the middle of the
   page, which read as a slideshow control on a cheap site. Now it lives in
   the top-right corner of the very card it is paging, small and quiet. */
.next-slot{position:relative}
.next-slot .stepper-in{
  position:absolute; top:14px; right:16px; z-index:2;
  display:flex; align-items:center; gap:7px;
  background:var(--surface);
  border:1px solid var(--line); border-radius:999px;
  padding:3px 5px; box-shadow:0 1px 4px rgba(46,10,51,.06);
}
.next-slot .stepper-in .count{
  font-size:11.5px; font-weight:700; letter-spacing:.05em;
  color:var(--ink-2); min-width:38px; text-align:center; font-variant-numeric:tabular-nums;
}
.step-btn-sm{
  width:25px; height:25px; border-radius:50%; cursor:pointer; padding:0 0 2px;
  border:1px solid var(--line); background:transparent; color:var(--plum-3);
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.step-btn-sm:hover:not([disabled]){background:var(--plum-soft); border-color:var(--plum-3)}
.step-btn-sm:active:not([disabled]){transform:scale(.92)}
.step-btn-sm[disabled]{opacity:.28; cursor:default}
/* keep the card's own text clear of the pill */
.next-slot[data-paged] .klass{padding-right:112px}
/* on a narrow screen the corner is busy — drop it under the heading instead */
@media (max-width:560px){
  .next-slot .stepper-in{position:static; margin:0 0 10px auto; width:max-content}
  .next-slot[data-paged] .klass{padding-right:20px}
}

/* ---------- a quiet "show the rest" line ---------- */
.more-line{
  display:flex; justify-content:center; margin-top:16px;
}
.more-line .btn{min-width:190px}

/* ---------- the free demo ---------- */
.demo-card{
  background:linear-gradient(125deg,#4A1259 0%,#7B2D8E 60%,#A23FA8 100%);
  color:#F6ECF8; border-radius:var(--radius); padding:24px;
}
.demo-card h3{color:#fff; margin:0 0 6px; font-size:20px}
.demo-card p{color:#EBD9F2; font-size:14.5px; margin:0}
.demo-card .demo-state{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  background:rgba(255,255,255,.14); border:1px solid rgba(245,197,66,.45);
  color:var(--gold); border-radius:999px; padding:5px 13px;
  font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.demo-card label.field > span{color:#EBD9F2}
.demo-card input, .demo-card select, .demo-card textarea{
  background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.5);
}
.demo-free{
  display:inline-block; margin-top:12px; padding:8px 14px; border-radius:12px;
  background:rgba(255,255,255,.12); border:1px dashed rgba(245,197,66,.5);
  color:#fff; font-size:13.5px;
}

/* ---------- ask the office (replaces the WhatsApp jump) ---------- */
.ask-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){.ask-grid{grid-template-columns:1fr}}
.zone-note{
  font-size:12.5px; color:var(--ink-2); margin-top:6px; display:block;
}

/* ---- who the message goes to ----
   One team member is attached to each child, so the request box names them
   rather than leaving "support" as a black hole. */
.to-manager{
  margin:0 0 14px; padding:9px 12px; border-radius:10px;
  background:var(--plum-soft); border:1px solid var(--line);
  color:var(--ink); font-size:13.5px;
}

/* ---- "Had an emergency? The credit is on us." ----
   Sits under the times in the reschedule dialog. */
.emergency-note{
  margin-top:18px; padding:14px 16px; border-radius:14px;
  background:var(--plum-soft); border:1px solid var(--line);
}
.emergency-note strong{display:block; font-size:15px; margin-bottom:4px}
.emergency-note p{margin:0; font-size:13.5px; line-height:1.6}


/* ---- filter bar (Activity) -------------------------------------------
   Five controls that must stay usable on a phone: they wrap to one column
   rather than squeezing five date pickers across 380px. */
.filter-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.filter-grid .field span{font-size:12px}

/* ---- who is who, when a child and a parent share a name ---------------
   A small caps label sitting against the name, so the console never leaves
   you guessing which "Aarav Sharma" you are looking at. */
.whois{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--plum-soft); color:var(--plum-3); vertical-align:1px;
}
.whois-parent{background:var(--gold-soft); color:var(--gold-deep)}
.dupe-warn{margin-top:14px}
.dupe-warn .row + .row{border-top:1px solid var(--line); padding-top:8px; margin-top:8px}

/* ---- the arrow on a Credit history row (20 Sep) ----------------------
   A credit lost to a missed or cancelled class is the only one that can be
   given back, so those rows — and only those — carry a small caret. It opens
   a row underneath holding the emergency route. Everywhere else the column
   reads exactly as before. */
.ledger-why{
  appearance:none; border:0; background:transparent; cursor:pointer;
  margin-left:6px; padding:0 3px; border-radius:6px; line-height:1;
  font-size:13px; color:var(--plum-3);
  transition:transform .15s ease, color .15s ease;
}
.ledger-why:hover{color:var(--gold-deep)}
.ledger-why:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}
.ledger-why.is-open{transform:rotate(180deg); color:var(--gold-deep)}

/* the dropdown row itself — no borders of its own, so it reads as part of
   the row above rather than as another entry in the ledger */
tr.ledger-detail > td{
  padding:0 14px 14px; border-top:0; background:transparent;
}
tr.ledger-detail .emergency-note{margin-top:2px}


/* ============================================================
   21 SEP — THE NEW MENTOR PORTAL
   Home (next class, numbers, top performers, today, upcoming,
   announcements, compliments) · My calendar · My earnings ·
   the time-zone picker. Mentor portal only; nothing above changes.
   ============================================================ */

/* the mentor portal is a dashboard — give it more width than the family portal */
body.portal-mentor .wrap{max-width:1320px}

/* ---- status colours for the calendar, light and dark ---- */
:root{
  --st-expected-bg:#F4ECFA;  --st-expected-fg:#5B1A6B;  --st-expected-bd:#B58BC9;
  --st-expired-bg:#EFECF1;   --st-expired-fg:#6E6474;   --st-expired-bd:#C4BBC8;
  --st-tbook-bg:#FFF2CC;     --st-tbook-fg:#7A4E00;     --st-tbook-bd:#E9A825;
  --st-tdone-bg:#D7F2EA;     --st-tdone-fg:#0B5E47;     --st-tdone-bd:#2BA57F;
  --st-tsnsa-bg:#FFE4CF;     --st-tsnsa-fg:#8C3F07;     --st-tsnsa-bd:#F08A3C;
  --st-ttnsa-bg:#FCDDE6;     --st-ttnsa-fg:#94153C;     --st-ttnsa-bd:#E0567A;
  --st-pbook-bg:#DCEBFF;     --st-pbook-fg:#1B4C8C;     --st-pbook-bd:#4A8FE0;
  --st-ptaken-bg:#DDF3D6;    --st-ptaken-fg:#2A6219;    --st-ptaken-bd:#5AAE45;
  --st-psnsa-bg:#F3E3D3;     --st-psnsa-fg:#6E3510;     --st-psnsa-bd:#B8672E;
  --st-ptnsa-bg:#F6D2D2;     --st-ptnsa-fg:#851818;     --st-ptnsa-bd:#C83C3C;
  --cal-line:#EEE7DC;        --cal-hour:#E0D5C5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --st-expected-bg:#3A1648; --st-expected-fg:#E7C8F2; --st-expected-bd:#9B6BB0;
    --st-expired-bg:#2E2433;  --st-expired-fg:#A89AAE;  --st-expired-bd:#5A4B62;
    --st-tbook-bg:#3B2E0C;    --st-tbook-fg:#F7D98A;    --st-tbook-bd:#C99523;
    --st-tdone-bg:#0F3A2E;    --st-tdone-fg:#8FE3C6;    --st-tdone-bd:#2BA57F;
    --st-tsnsa-bg:#40240F;    --st-tsnsa-fg:#F7B98A;    --st-tsnsa-bd:#D9772E;
    --st-ttnsa-bg:#431629;    --st-ttnsa-fg:#F6A4BE;    --st-ttnsa-bd:#D2466C;
    --st-pbook-bg:#132F55;    --st-pbook-fg:#A9CCFA;    --st-pbook-bd:#4A8FE0;
    --st-ptaken-bg:#18361A;   --st-ptaken-fg:#A6E39A;   --st-ptaken-bd:#4F9E3C;
    --st-psnsa-bg:#3A2616;    --st-psnsa-fg:#E7B690;    --st-psnsa-bd:#A85C28;
    --st-ptnsa-bg:#451818;    --st-ptnsa-fg:#F5A3A3;    --st-ptnsa-bd:#C23A3A;
    --cal-line:#34153F;       --cal-hour:#4A1F57;
  }
}
:root[data-theme="dark"]{
  --st-expected-bg:#3A1648; --st-expected-fg:#E7C8F2; --st-expected-bd:#9B6BB0;
  --st-expired-bg:#2E2433;  --st-expired-fg:#A89AAE;  --st-expired-bd:#5A4B62;
  --st-tbook-bg:#3B2E0C;    --st-tbook-fg:#F7D98A;    --st-tbook-bd:#C99523;
  --st-tdone-bg:#0F3A2E;    --st-tdone-fg:#8FE3C6;    --st-tdone-bd:#2BA57F;
  --st-tsnsa-bg:#40240F;    --st-tsnsa-fg:#F7B98A;    --st-tsnsa-bd:#D9772E;
  --st-ttnsa-bg:#431629;    --st-ttnsa-fg:#F6A4BE;    --st-ttnsa-bd:#D2466C;
  --st-pbook-bg:#132F55;    --st-pbook-fg:#A9CCFA;    --st-pbook-bd:#4A8FE0;
  --st-ptaken-bg:#18361A;   --st-ptaken-fg:#A6E39A;   --st-ptaken-bd:#4F9E3C;
  --st-psnsa-bg:#3A2616;    --st-psnsa-fg:#E7B690;    --st-psnsa-bd:#A85C28;
  --st-ptnsa-bg:#451818;    --st-ptnsa-fg:#F5A3A3;    --st-ptnsa-bd:#C23A3A;
  --cal-line:#34153F;       --cal-hour:#4A1F57;
}

/* ---------- the time-zone picker, top right ---------- */
.tz-pick-host{margin-left:auto}
.tz-pick{
  display:flex; align-items:center; gap:8px; margin:0;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:4px 6px 4px 12px; box-shadow:var(--shadow-sm);
}
.tz-pick-icon{font-size:15px; line-height:1}
.tz-pick-label{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap}
.tz-pick select{
  width:auto; min-width:150px; max-width:250px; border:0; background:transparent;
  padding:6px 8px; font-size:14px; font-weight:700; color:var(--plum-3); box-shadow:none; cursor:pointer;
}
.tz-pick select:focus{box-shadow:none}
.tz-pick:focus-within{border-color:var(--plum-3); box-shadow:0 0 0 3px var(--plum-soft)}
.tz-pick-host.is-away .tz-pick{border-color:var(--gold-2); background:var(--gold-soft)}
.tz-away-note{
  margin:-12px 0 18px; font-size:13.5px; color:var(--gold-deep); font-weight:700;
}
@media (max-width:720px){
  .tz-pick-host{margin-left:0; width:100%}
  .tz-pick{width:100%}
  .tz-pick select{flex:1; max-width:none}
}

/* ---------- the home grid ---------- */
.mhome{
  display:grid; gap:20px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "next  stats top"
    "today upc   ann"
    "comp  comp  comp";
}
.mh-next{grid-area:next} .mh-stats{grid-area:stats} .mh-top{grid-area:top}
.mh-today{grid-area:today} .mh-upc{grid-area:upc} .mh-ann{grid-area:ann}
.mh-comp{grid-area:comp; margin-top:8px}
@media (max-width:1099px){
  .mhome{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "next  stats"
      "today upc"
      "top   ann"
      "comp  comp";
  }
}
@media (max-width:719px){
  .mhome{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas: "next" "today" "upc" "ann" "stats" "top" "comp";
  }
}

.mh-card{padding:20px; display:flex; flex-direction:column; min-width:0}
.mh-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.mh-head h2{font-size:19px; margin:0}
.mh-head-out{margin-bottom:12px}
.mh-head-out h2{font-size:22px}
.mh-empty{text-align:center; padding:18px 8px; color:var(--ink-2); margin:auto 0}
.mh-empty .mark{font-size:28px; margin-bottom:6px}
.mh-empty strong{display:block; color:var(--ink); font-size:15.5px}
.mh-empty p{font-size:13.5px; margin:4px 0 10px}

/* the "reports waiting" line above everything */
.mh-nudge{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; margin-bottom:18px; border-radius:var(--radius-sm);
  background:var(--amber-soft); border:1px solid var(--amber); color:var(--ink);
  text-decoration:none; font-size:14.5px;
}
.mh-nudge:hover{filter:brightness(.98)}
.mh-nudge-dot{width:10px; height:10px; border-radius:50%; background:var(--amber); flex:0 0 10px}
.mh-nudge-go{margin-left:auto; font-weight:800; color:var(--amber)}

/* ---------- 1. the next class ---------- */
.mh-next{border-top:4px solid var(--gold-2)}
.mh-when{display:flex; gap:16px; align-items:center}
.mh-date{
  width:74px; flex:0 0 74px; border-radius:16px; padding:8px 0 10px; text-align:center;
  background:linear-gradient(160deg,#7B2D8E,#4A1259); color:#F3E6F8;
  border:1px solid rgba(245,197,66,.35); box-shadow:var(--shadow-sm);
}
.mh-date span{display:block; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.mh-date b{display:block; font-family:var(--font-display); font-size:32px; line-height:1.05; color:var(--gold)}
.mh-when-text{min-width:0}
.mh-time{font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--plum); line-height:1.2}
.mh-day{font-size:14.5px; color:var(--ink-2); font-weight:600; margin:2px 0 6px}
.mh-who{margin-top:16px; display:flex; flex-direction:column; gap:2px}
.mh-who strong{font-size:17px}
.mh-who .muted{font-size:14px}
.mh-their{
  margin-top:10px; font-size:13.5px; font-weight:700; color:var(--plum-3);
  background:var(--plum-soft); border-radius:8px; padding:6px 10px; align-self:flex-start;
}
.mh-after{
  margin-top:14px; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--ink-2);
  background:var(--surface-2); border:1px dashed var(--line-2); align-self:stretch;
}
.mh-after span{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:8px}
.mh-after strong{color:var(--plum)}
.mh-start-row{margin-top:auto; padding-top:16px}
.mh-start{width:100%; font-size:16px; padding:14px 18px}
.mh-start[aria-disabled="true"]{
  background:var(--cream-2); color:var(--ink-3); box-shadow:none; opacity:.75;
  border-color:var(--line-2); filter:saturate(.2);
}
.btn-join{
  background:linear-gradient(180deg,#27A36F 0%,#0F7A4A 100%); color:#fff;
  box-shadow:0 4px 14px -4px rgba(15,122,74,.6);
  animation:joinPulse 1.8s ease-in-out infinite;
}
@keyframes joinPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(39,163,111,.55), 0 4px 14px -4px rgba(15,122,74,.6)}
  50%{box-shadow:0 0 0 8px rgba(39,163,111,0), 0 4px 14px -4px rgba(15,122,74,.6)}
}
.mh-hint{margin-top:8px; font-size:13px; color:var(--ink-2); text-align:center}
.mh-hint.is-waiting{color:var(--green); font-weight:800}

/* ---------- 2. the numbers ---------- */
.mh-metrics{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.mh-metric{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
}
.mh-metric-icon{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
}
.mh-metric-text{display:flex; flex-direction:column; min-width:0; flex:1}
.mh-metric-label{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.mh-metric-sub{font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mh-metric-value{font-family:var(--font-display); font-size:22px; color:var(--plum); white-space:nowrap}
.tone-gold .mh-metric-icon{background:var(--gold-soft); color:var(--gold-deep)}
.tone-green .mh-metric-icon{background:var(--green-soft); color:var(--green)}
.tone-plum .mh-metric-icon{background:var(--plum-soft); color:var(--plum-3)}
.tone-crimson .mh-metric-icon{background:var(--crimson-soft); color:var(--crimson)}
.tone-crimson .mh-metric-value{color:var(--crimson)}
.tone-quiet .mh-metric-icon{background:var(--cream-2); color:var(--ink-2)}
.tone-blue .mh-metric-icon{background:var(--st-pbook-bg); color:var(--st-pbook-fg)}
.mh-audit-note{margin:12px 0 0; font-size:13px; color:var(--ink-2); line-height:1.5}

/* ---------- 3. top performers ---------- */
.spot{position:relative; border-radius:14px; overflow:hidden; background:#2A0B33}
.spot-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.spot-track::-webkit-scrollbar{display:none}
.spot-track:focus-visible{outline:3px solid var(--gold-2); outline-offset:-3px}
.spot-slide{flex:0 0 100%; scroll-snap-align:start; margin:0; position:relative}
.spot-img{display:block; height:232px; background:#2A0B33}
.spot-img img{width:100%; height:100%; object-fit:contain}
.spot-img.is-broken{display:flex; align-items:center; justify-content:center}
.spot-img.is-broken img{display:none}
.spot-img.is-broken::after{content:'Image could not be loaded'; color:#D9BFE6; font-size:13px}
.spot-slide figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px;
  background:linear-gradient(to top, rgba(20,4,26,.85), transparent);
  color:#fff; font-weight:700; font-size:14px;
}
.spot-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(30,8,40,.55); color:#fff; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0 0 3px;
}
.spot-nav:hover{background:rgba(30,8,40,.8)}
.spot-prev{left:8px} .spot-next{right:8px}
.spot-dots{display:flex; justify-content:center; gap:7px; margin-top:12px}
.mh-top .spot{flex:1; display:flex; min-height:232px}
.mh-top .spot-track{flex:1}
.mh-top .spot-img{height:100%; min-height:232px}
.spot-dots button{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line-2); transition:width .25s ease, background .25s ease;
}
.spot-dots button[aria-selected="true"]{width:22px; border-radius:6px; background:var(--gold-2)}

/* ---------- 4 & 5. today and upcoming ---------- */
.mh-list{display:flex; flex-direction:column}
.mh-row{
  display:flex; align-items:center; gap:12px; padding:10px 2px;
  border-top:1px solid var(--line); color:inherit; text-decoration:none;
}
.mh-row:first-child{border-top:0}
a.mh-row:hover{background:var(--surface-2)}
.mh-row-time{width:78px; flex:0 0 78px; display:flex; flex-direction:column; line-height:1.25}
.mh-row-time b{font-size:14.5px; color:var(--plum)}
.mh-row-day{font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase}
.mh-row-main{flex:1; min-width:0; display:flex; flex-direction:column}
.mh-row-main strong{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mh-row-main .muted{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chip{
  flex:0 0 auto; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px;
  background:var(--cream-2); color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.chip-green{background:var(--green-soft); color:var(--green)}
.chip-amber{background:var(--amber-soft); color:var(--amber)}
.chip-crimson{background:var(--crimson-soft); color:var(--crimson)}
.chip-live{background:var(--green); color:#fff}
.chip-quiet{background:var(--cream-2); color:var(--ink-2)}
.mh-more{display:flex; justify-content:center; margin-top:12px}
.mh-more:empty{display:none}

/* ---------- 6. announcements, moving up ---------- */
.ann-viewport{
  height:268px; overflow-y:auto; scrollbar-width:thin; position:relative;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.ann-viewport.is-still{height:auto; max-height:268px; -webkit-mask-image:none; mask-image:none}
.ann-track{display:flex; flex-direction:column; gap:10px; padding:24px 2px 10px}
.ann-item{
  padding:12px 14px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--line); border-left:4px solid var(--plum-3);
}
.ann-item.is-pinned{border-left-color:var(--gold-2); background:var(--gold-soft)}
.ann-item p{margin:0 0 6px; font-size:14.5px; line-height:1.5; color:var(--ink)}
.ann-pin{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:4px;
}
.ann-link{display:inline-block; font-size:13.5px; font-weight:800; margin-right:10px}
.ann-when{font-size:12px; color:var(--ink-3); font-weight:700}

/* ---------- 7. compliments — each in its own colour ---------- */
.comp-stack{display:flex; flex-direction:column; gap:14px}
.comp-card{
  display:flex; gap:18px; align-items:flex-start;
  border-radius:12px; padding:18px 22px 18px 18px; color:#fff;
  box-shadow:0 2px 10px -4px rgba(30,8,40,.35);
}
.comp-pic{
  width:62px; height:62px; flex:0 0 62px; border-radius:50%; overflow:hidden;
  border:3px solid #fff; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:20px; color:#fff;
}
.comp-pic img{width:100%; height:100%; object-fit:cover}
.comp-body{min-width:0; flex:1}
.comp-name{font-weight:800; font-size:15.5px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  text-shadow:0 1px 1px rgba(0,0,0,.12)}
.comp-stars{font-size:13px; letter-spacing:2px; color:#FFE9A8}
.comp-text{margin:4px 0 6px; font-size:18px; line-height:1.5; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.14)}
.comp-meta{font-size:12.5px; font-weight:700; opacity:.85}
.c-periwinkle{background:#7178E8}
.c-salmon{background:#D56A4F}
.c-pink{background:#DE5F87}
.c-sky{background:#4390D6}
.c-mint{background:#25977A}
.c-lilac{background:#9A6BE0}
.c-amber{background:#C27812}
.c-coral{background:#E0605A}
.comp-toggle-row{display:flex; justify-content:center; margin-top:-8px; position:relative; z-index:1}
.comp-toggle{
  border:0; cursor:pointer; border-radius:999px; padding:10px 26px;
  background:rgba(46,62,82,.88); color:#fff; font:inherit; font-weight:800; font-size:15px;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.5);
}
.comp-toggle:hover{background:rgba(46,62,82,1)}
.comp-toggle[hidden]{display:none}
@media (max-width:560px){
  .comp-card{padding:14px; gap:12px}
  .comp-pic{width:48px; height:48px; flex-basis:48px; font-size:16px}
  .comp-text{font-size:16px}
}

/* ---------- MY CALENDAR ---------- */
.cal-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.cal-range{font-size:15.5px}
.cal-legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:16px}
.cal-key{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-2)}
.cal-key i{width:14px; height:14px; border-radius:4px; border:1px solid; border-left-width:4px; display:inline-block}
.cal-wrap{
  overflow:auto; max-height:min(72vh, 920px); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm);
  /* OLD (to 23 Sep) — overscroll-behavior:contain; */
  /* NEW (3 Oct) — this held the scroll inside the calendar: at 12:00 am the wheel did nothing
     and the page stayed put. Now the page carries on when the calendar has no further to go. */
  overscroll-behavior:auto;
}
.cal{display:grid; grid-template-columns:68px repeat(7, minmax(118px, 1fr)); min-width:894px; position:relative}
.cal-corner{
  position:sticky; top:0; left:0; z-index:5; background:var(--surface-2);
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:flex-end; justify-content:center; padding:6px 4px; text-align:center;
}
.cal-dayhead{
  position:sticky; top:0; z-index:4; background:var(--surface-2); border-bottom:1px solid var(--line);
  border-left:1px solid var(--line); padding:8px 6px; text-align:center; line-height:1.15;
}
.cal-dayhead span{display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.cal-dayhead b{display:block; font-family:var(--font-display); font-size:20px; color:var(--plum)}
.cal-dayhead.is-today{background:var(--gold-soft)}
.cal-dayhead.is-today b{color:var(--gold-deep)}
.cal-times{position:sticky; left:0; z-index:3; background:var(--surface); border-right:1px solid var(--line)}
.cal-time{height:30px; padding:2px 6px 0 0; text-align:right; font-size:10.5px; font-weight:700; color:var(--ink-2); white-space:nowrap}
.cal-time.is-half{color:var(--ink-3); font-weight:600}
.cal-col{
  position:relative; height:1440px; border-left:1px solid var(--line);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 59px, var(--cal-hour) 59px, var(--cal-hour) 60px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 29px, var(--cal-line) 29px, var(--cal-line) 30px);
}
.cal-col.is-today{background-color:color-mix(in srgb, var(--gold-soft) 45%, transparent)}
.cal-ev{
  position:absolute; z-index:1; margin:0; padding:3px 6px 3px 7px; overflow:hidden; cursor:pointer;
  border:1px solid; border-left-width:4px; border-radius:7px; text-align:left;
  font:inherit; font-size:11.5px; line-height:1.25; display:flex; flex-direction:column; gap:1px;
  box-shadow:0 1px 2px rgba(46,10,51,.08);
}
.cal-ev:hover{z-index:2; box-shadow:0 4px 12px -4px rgba(46,10,51,.35)}
.cal-ev:focus-visible{z-index:2}
.cal-ev.is-short{flex-direction:row; align-items:center; white-space:nowrap}
.cal-ev-label{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-ev-who{font-weight:600; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-ev.is-due{border-style:dashed; border-left-style:solid}
.cal-now{position:absolute; left:0; right:0; height:2px; background:var(--crimson); z-index:2; pointer-events:none}
.cal-now::before{content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--crimson)}

.st-expected{background:var(--st-expected-bg); color:var(--st-expected-fg); border-color:var(--st-expected-bd); border-style:dashed; border-left-style:solid}
.st-expired{
  background:repeating-linear-gradient(135deg, var(--st-expired-bg) 0 6px, transparent 6px 10px), var(--st-expired-bg);
  color:var(--st-expired-fg); border-color:var(--st-expired-bd);
}
.st-trial-booked{background:var(--st-tbook-bg); color:var(--st-tbook-fg); border-color:var(--st-tbook-bd)}
.st-trial-done{background:var(--st-tdone-bg); color:var(--st-tdone-fg); border-color:var(--st-tdone-bd)}
.st-trial-snsa{background:var(--st-tsnsa-bg); color:var(--st-tsnsa-fg); border-color:var(--st-tsnsa-bd)}
.st-trial-tnsa{background:var(--st-ttnsa-bg); color:var(--st-ttnsa-fg); border-color:var(--st-ttnsa-bd)}
.st-paid-booked{background:var(--st-pbook-bg); color:var(--st-pbook-fg); border-color:var(--st-pbook-bd)}
.st-paid-taken{background:var(--st-ptaken-bg); color:var(--st-ptaken-fg); border-color:var(--st-ptaken-bd)}
.st-paid-snsa{background:var(--st-psnsa-bg); color:var(--st-psnsa-fg); border-color:var(--st-psnsa-bd)}
.st-paid-tnsa{background:var(--st-ptnsa-bg); color:var(--st-ptnsa-fg); border-color:var(--st-ptnsa-bd)}
.cal-key.st-expected, .cal-key.st-expired, .cal-key[class*="st-"]{background:none; border:0}
.cal-key.st-expected i{background:var(--st-expected-bg); border-color:var(--st-expected-bd); border-style:dashed; border-left-style:solid}
.cal-key.st-expired i{background:var(--st-expired-bg); border-color:var(--st-expired-bd)}
.cal-key.st-trial-booked i{background:var(--st-tbook-bg); border-color:var(--st-tbook-bd)}
.cal-key.st-trial-done i{background:var(--st-tdone-bg); border-color:var(--st-tdone-bd)}
.cal-key.st-trial-snsa i{background:var(--st-tsnsa-bg); border-color:var(--st-tsnsa-bd)}
.cal-key.st-trial-tnsa i{background:var(--st-ttnsa-bg); border-color:var(--st-ttnsa-bd)}
.cal-key.st-paid-booked i{background:var(--st-pbook-bg); border-color:var(--st-pbook-bd)}
.cal-key.st-paid-taken i{background:var(--st-ptaken-bg); border-color:var(--st-ptaken-bd)}
.cal-key.st-paid-snsa i{background:var(--st-psnsa-bg); border-color:var(--st-psnsa-bd)}
.cal-key.st-paid-tnsa i{background:var(--st-ptnsa-bg); border-color:var(--st-ptnsa-bd)}

.info-rows{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.info-rows > div{display:flex; flex-direction:column; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line)}
.info-rows span{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.info-rows b{font-size:15px; color:var(--ink)}

/* ---------- MY EARNINGS ---------- */
.earn-head{display:flex; align-items:flex-end; gap:18px 24px; flex-wrap:wrap; margin-bottom:18px}
.earn-tiles{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:18px}
.earn-tiles:empty{display:none}
.earn-tile{
  border-radius:var(--radius); padding:16px 18px; background:var(--surface); border:1px solid var(--line);
  border-left:5px solid var(--plum-3); display:flex; flex-direction:column; gap:2px;
}
.earn-tile b{font-family:var(--font-display); font-size:28px; color:var(--plum); line-height:1.15}
.earn-tile-label{font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2)}
.earn-tile-sub{font-size:13px; color:var(--ink-2)}
.earn-tile.tone-plum{border-left-color:var(--plum-3); background:var(--plum-soft)}
.earn-tile.tone-green{border-left-color:var(--green)}
.earn-tile.tone-gold{border-left-color:var(--gold-2)}
.earn-tile.tone-blue{border-left-color:var(--st-pbook-bd)}

.earn-wrap{box-shadow:var(--shadow-sm)}
/* OLD — table.earn{min-width:1180px; font-size:13px; ...} th, td{padding:9px 10px} — wider than a laptop,
   so the Total column started off-screen */
table.earn{min-width:1040px; font-size:12.5px; border-collapse:separate; border-spacing:0}
table.earn th, table.earn td{padding:8px 7px; border-bottom:1px solid var(--line); white-space:nowrap}
table.earn thead th{background:var(--plum-soft); color:var(--plum-3); text-align:center; letter-spacing:.05em}
table.earn thead th.sub{font-size:10.5px; color:var(--ink-2); background:var(--surface-2)}
table.earn .earn-colhead{border-left:1px solid var(--line); font-size:10.5px; white-space:normal; line-height:1.25; min-width:92px}
table.earn .earn-corner{text-align:left; position:sticky; left:0; z-index:2}
table.earn .num{text-align:right; font-variant-numeric:tabular-nums}
table.earn tbody td{color:var(--ink)}
table.earn tbody td.is-zero{color:var(--ink-3)}
table.earn td.is-neg{color:var(--crimson); font-weight:700}
table.earn .earn-grp{
  text-align:left; vertical-align:top; background:var(--surface); color:var(--plum);
  font-family:var(--font-display); font-size:14.5px; position:sticky; left:0; z-index:1;
  width:104px; min-width:104px; max-width:104px; white-space:normal; border-right:1px solid var(--line);
}
table.earn .earn-grp-note{display:block; font-family:var(--font-body); font-size:11px; color:var(--ink-3); font-weight:600}
table.earn .earn-region{text-align:left; font-weight:700; color:var(--ink-2); background:var(--surface);
  width:96px; min-width:96px; position:sticky; left:104px; z-index:1; border-right:1px solid var(--line); white-space:normal}
table.earn tr.grp-first > *{border-top:2px solid var(--line-2)}
table.earn tbody tr:first-child > *{border-top:0}
table.earn .earn-rowtotal, table.earn .earn-total-head{background:var(--gold-soft); font-weight:800; color:var(--ink)}
/* the Total column stays in view while the rest scrolls sideways */
table.earn .earn-rowtotal, table.earn .earn-total-head, table.earn .earn-grand{
  position:sticky; right:0; z-index:1; min-width:96px; box-shadow:-6px 0 8px -6px rgba(46,10,51,.25);
}
table.earn .earn-corner{width:200px; min-width:200px}
table.earn tfoot th, table.earn tfoot td{background:var(--gold-soft); font-weight:800; color:var(--ink); border-top:2px solid var(--gold-2)}
table.earn tfoot th{text-align:left; position:sticky; left:0}
table.earn .earn-grand{background:var(--gold-2); color:#2E0A33; font-size:14.5px}
table.earn-card{min-width:900px}
.earn-rates summary{cursor:pointer; font-size:15px}
.earn-rates{margin-top:22px}
table.earn-history{min-width:420px}
table.earn-history .num{text-align:right; font-variant-numeric:tabular-nums}
table.earn-history td.is-neg{color:var(--crimson)}

/* the "Class history" rating row on the family portal */
.rate-row{
  margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--gold-soft); border:1px solid var(--line);
}
.rate-row h4{font-family:var(--font-body); font-size:14.5px; margin:0 0 8px; color:var(--ink)}
.rate-stars{display:flex; gap:4px; margin-bottom:10px}
.rate-stars button{
  border:0; background:none; cursor:pointer; padding:0 2px; font-size:30px; line-height:1;
  color:var(--line-2); transition:transform .12s ease, color .12s ease;
}
.rate-stars button.is-on{color:var(--gold-2)}
.rate-stars button:hover{transform:scale(1.12)}
.rate-row textarea{min-height:70px; font-size:15px}
.rate-done{margin-top:14px; font-size:14px; color:var(--ink-2)}
.rate-done b{color:var(--gold-deep); letter-spacing:2px}

/* the console's Mentor board */
.board-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}
.board-thumb{width:100%; height:120px; object-fit:contain; background:#2A0B33; border-radius:10px}
.board-thumb-bad{display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;
  color:#F3E6F8; font-size:13px; line-height:1.45}
.board-list{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.board-item{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
.board-item > div{min-width:0; flex:1}
.rate-grid input{width:92px; padding:8px 10px; font-size:14px; text-align:right}
.rate-grid td, .rate-grid th{padding:8px 10px}

/* earnings on a phone: slimmer sticky labels so the numbers get the room */
@media (max-width:560px){
  table.earn .earn-grp{width:74px; min-width:74px; max-width:74px; font-size:12.5px}
  table.earn .earn-region{width:70px; min-width:70px; left:74px; font-size:11.5px}
  table.earn .earn-corner{width:144px; min-width:144px}
  .earn-tile b{font-size:22px}
  .earn-tile{padding:12px 14px}
}


/* ============================================================
   23 SEP — THE WHITEHAT JR FORMAT
   Two parts, both added below and nothing above changed:
     A. .rc — the monthly report card (family Report tab and the
        mentor's preview), matched to the supplied WHJR report card:
        the same layout and the same colours.
     B. body.portal-mentor — the mentor portal re-dressed in the WHJR
        teacher-dashboard format: grey page, white icon rail, white
        cards with teal titles, peach tags, green Start Class.
   Fonts: Mulish is the current name of Muli, the WHJR face.
   ============================================================ */
/* (Mulish is loaded by the @import at the top of this file.) */

:root{
  --wj-bg:#EFEFEF;  --wj-card:#FFFFFF; --wj-line:#E4E4E4; --wj-line-2:#D9D9D9;
  --wj-teal:#1E8A9A; --wj-teal-2:#10849A; --wj-teal-soft:#E5F2F8; --wj-row:#D9E8ED; --wj-row-grey:#E8E8E8;
  --wj-ink:#292929; --wj-ink-2:#5E5E5E; --wj-ink-3:#8A8A8A;
  --wj-orange:#E8792B; --wj-peach:#FCDDC2; --wj-peach-2:#F4A06A; --wj-note:#FFF4EA;
  --wj-green:#5CC58C; --wj-green-2:#4CB57D; --wj-green-soft:#80D8A8;
  --wj-blue:#3F79D0; --wj-yellow:#F6E53F; --wj-red:#D9534F; --wj-slate:#3A4E59;
  --wj-font:"Mulish","Muli","Nunito Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* NEW (23 Sep b) — titles in the brand purple, the page in the brand cream */
  --wj-title:#6B1E7A; --wj-page:#FAF5EC; --wj-bar:#F1E7D6;
}

/* ============================ A. THE REPORT CARD ============================ */
.rc{font-family:var(--wj-font); color:#333; -webkit-font-smoothing:antialiased}
.rc *{box-sizing:border-box}
.rc-family{background:var(--wj-bg); padding:14px; border-radius:6px}
@media (max-width:640px){ .rc-family{padding:8px; margin:0 -8px} }
.rc-back{display:inline-block; font-size:13.5px; color:var(--wj-teal); text-decoration:none; margin:0 0 12px 4px}
.rc-back:hover{text-decoration:underline}
.rc-sheet{
  background:#fff; border-radius:6px; padding:18px 18px 22px;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.rc-tabs{display:flex; gap:22px; border-bottom:1px solid #E6E6E6; margin:0 0 18px; padding:0 4px}
.rc-tabs button, .rc-tabs a{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:8px 2px 9px; font:inherit; font-size:14px; color:#4A9BA5; cursor:pointer; text-decoration:none;
}
.rc-tabs [aria-selected="true"]{color:var(--wj-teal); font-weight:700; border-bottom-color:var(--wj-teal)}
.rc-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin:0 0 20px}
.rc-head-text{max-width:720px}
.rc .rc-head h2{font-family:var(--wj-font); font-size:19px; font-weight:700; color:#222; margin:0 0 4px; letter-spacing:0}
.rc-head p{font-size:13.5px; line-height:1.6; color:#444; margin:0}
.rc-link{color:var(--wj-teal); text-decoration:none}
.rc-head-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto}
.rc-pick-wrap{display:block; margin:0}
.rc .rc-pick{
  appearance:none; -webkit-appearance:none; width:auto; min-width:150px; max-width:260px;
  background:var(--wj-teal-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:#fff; border:0; border-radius:3px; padding:9px 32px 9px 14px;
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.rc .rc-pick:focus{outline:2px solid #9AD3DB; outline-offset:2px; box-shadow:none}
.rc .rc-pick option{background:#fff; color:#222}
.rc-generated{font-size:12px; color:#555}
.rc-generated b{color:#222; font-weight:700}

.rc-box{background:#fff; border:1px solid #E6E6E6; border-radius:3px}
.rc-top{display:grid; grid-template-columns:minmax(220px, 264px) 1fr; gap:18px; margin-bottom:22px}
.rc-right{display:flex; flex-direction:column; gap:22px; min-width:0}
.rc-two{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* profile */
.rc-profile{display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 12px 16px; background:#FBFBFB}
.rc-avatar{width:132px; height:132px}
.rc-avatar svg{width:100%; height:100%; display:block}
.rc .rc-name{font-size:21px; font-weight:600; color:#222; margin:8px 0 6px; line-height:1.2}
.rc-level{display:inline-block; background:#7A4A36; color:#fff; border-radius:999px; padding:2px 16px; font-size:13px; font-weight:500}
.rc-peer{font-size:13.5px; color:#444; margin-top:8px}
.rc-peer b{color:#222}
.rc-pb{display:flex; justify-content:space-between; width:100%; padding:0 14px; margin-top:22px; font-size:13px; font-weight:700; color:var(--wj-teal)}
.rc-big{display:grid; grid-template-columns:1fr 1fr; width:100%; margin-top:26px}
.rc-big b{display:block; font-size:44px; font-weight:500; color:#222; line-height:1}
.rc-big span{display:block; font-size:14.5px; color:#333; margin-top:10px}

/* the purple quote */
.rc-quote{position:relative; background:#7268DB; color:#fff; border-radius:3px; padding:30px 28px 26px 34px; min-height:150px}
.rc-quote p{position:relative; margin:0; font-size:15.5px; line-height:1.55; max-width:640px}
.rc-quote-mark{position:absolute; left:18px; top:6px; font-size:68px; line-height:1; color:#fff; opacity:.28; font-family:Georgia, serif}

/* standing and classes */
.rc-standing, .rc-cp{padding:14px 14px 12px; text-align:center; display:flex; flex-direction:column; align-items:center}
.rc .rc-standing h3, .rc .rc-cp h3, .rc .rc-skill h4, .rc .rc-ring h4{
  font-family:var(--wj-font); font-size:14.5px; font-weight:600; color:#333; margin:0; letter-spacing:0;
  display:inline-flex; align-items:center; gap:4px;
}
.rc-gauge{width:min(230px, 100%); margin-top:14px}
.rc-gauge svg{width:100%; height:auto; display:block}
.rc-pct{font-size:20px; font-weight:700; color:#FB7A27; margin-top:4px; line-height:1.1}
.rc-pct-sub{font-size:14px; color:#FB7A27; margin-top:4px}
.rc-small{font-size:13px; line-height:1.5; color:#444; margin:10px 0 0}
.rc-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:10px; font-size:11.5px; color:#444}
.rc-legend span{display:inline-flex; align-items:center; gap:5px}
.rc-legend i{width:9px; height:9px; border-radius:50%; display:inline-block}
.rc-bars{width:100%; max-width:320px; margin-top:4px}
.rc-bars svg{width:100%; height:auto; display:block}

/* the (i) */
.rc-i{
  display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%;
  border:1.3px solid var(--wj-teal); color:var(--wj-teal); font-size:9.5px; font-weight:800; font-style:normal;
  font-family:Georgia, serif; cursor:help; line-height:1; flex:0 0 14px; margin-left:3px;
}

/* the four skills */
.rc-skills{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:26px; padding:28px 24px 26px; margin-bottom:22px}
.rc-skill .rc-legend{justify-content:flex-start; margin:10px 0 8px}
.rc-skill-bars{position:relative; padding:4px 0 4px 20px}
.rc-knob{
  position:absolute; left:0; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:#D6EFF4; border:1px solid #C4E1E8; box-shadow:0 1px 3px rgba(0,0,0,.18); z-index:1;
}
.rc-bar-row{display:flex; align-items:center; gap:6px; height:15px}
.rc-bar{display:block; height:11px; border-radius:0 8px 8px 0; min-width:10px}
.rc-bar-val{font-size:9.5px; font-weight:600; white-space:nowrap}
.rc-note{font-size:13.5px; line-height:1.55; color:#444; margin:12px 0 0}

/* the three rings */
.rc-rings{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:26px; padding:30px 24px 30px; margin-bottom:22px}
.rc-ring-row{display:flex; align-items:center; gap:16px; margin-top:12px}
.rc-ring-row b{font-size:42px; font-weight:500; line-height:1}
.rc-ring-svg{width:70px; height:70px; display:block}
.rc-ring-svg svg{width:100%; height:100%; display:block}

/* share */
.rc-share{
  background:#F2FBFD; border-radius:3px; padding:26px 20px 30px; text-align:center;
  box-shadow:0 2px 4px rgba(0,0,0,.12); border:1px solid #E3F1F4;
}
.rc-share p{margin:0 0 18px; font-size:16.5px; color:#333}
.rc-share-row{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.rc-wa, .rc-fb{
  display:inline-flex; align-items:center; gap:14px; padding:8px 12px; border-radius:2px;
  font-size:13.5px; text-decoration:none; font-weight:500;
}
.rc-share a.rc-wa{background:#2CBE6B; color:#fff; border:1px solid #2CBE6B}
.rc-share a.rc-wa:hover{background:#25A85E}
.rc-share a.rc-fb{background:#fff; color:#2A5DB0; border:1px solid #2A5DB0}
.rc-share a.rc-fb:hover{background:#EEF3FC}
.rc-share-ic{display:inline-flex}

/* nothing filed yet */
.rc-empty{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:36px 16px 40px; border:1px dashed #D5E4E8; border-radius:4px; background:#FAFDFE; color:#555}
.rc-empty-mark{width:64px; height:64px}
.rc-empty strong{color:#222; font-size:16px}
.rc-empty span{font-size:13.5px}

@media (max-width:900px){
  .rc-skills{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:860px){
  .rc-top{grid-template-columns:1fr}
  .rc-head{flex-direction:column}
  .rc-head-side{align-items:flex-start}
}
@media (max-width:640px){
  .rc-sheet{padding:14px 12px 18px}
  .rc-two{grid-template-columns:1fr}
  .rc-skills, .rc-rings{grid-template-columns:1fr; padding:20px 16px}
  .rc-quote{padding:28px 18px 20px 26px; min-height:0}
  .rc-big b{font-size:38px}
  .rc-ring-row b{font-size:36px}
}
@media print{
  .rc-share, .rc-pick-wrap, .rc-back, .rc-tabs{display:none}
  .rc-sheet{box-shadow:none}
}

/* ============================ B. THE MENTOR PORTAL, WHJR FORMAT ============================ */
/* The palette the rest of this file reads, re-pointed for the mentor portal only */
body.wj{
  /* OLD (23 Sep) — --cream:#EFEFEF; --cream-2:#EDEDED; --surface:#FFFFFF; --surface-2:#F7F9FA; */
  --cream:#FAF5EC; --cream-2:#F3EBDC; --surface:#FFFFFF; --surface-2:#F7F9FA;   /* NEW (23 Sep b) */
  --plum:#2B2B2B; --plum-2:#1E8A9A; --plum-3:#1E8A9A; --plum-soft:#E5F2F8;
  --ink:#292929; --ink-2:#5E5E5E; --ink-3:#8A8A8A; --line:#E4E4E4; --line-2:#D3D3D3;
  /* OLD (to 23 Sep b) — --gold:#F4A06A; --gold-2:#E8792B; --gold-deep:#D86A1E; --gold-soft:#FFF4EA; */
  --gold:#B98ACB; --gold-2:#7B2D8E; --gold-deep:#6B1E7A; --gold-soft:#F7EEFA;   /* NEW (23 Sep c) — brand purple, not orange */
  --green:#3E9E68; --green-soft:#E3F6EC; --crimson:#D9534F; --crimson-soft:#FBE9E8;
  /* OLD (to 23 Sep b) — --amber:#D86A1E; --amber-soft:#FFF1E4; */
  --amber:#6B1E7A; --amber-soft:#F3E6F8;   /* NEW (23 Sep c) — brand purple, not orange */
  --radius:4px; --radius-sm:3px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow:0 6px 24px rgba(0,0,0,.16); --shadow-gold:none;
  --font-display:var(--wj-font); --font-body:var(--wj-font);
  --rail-w:64px;
  --st-pbook-bg:#E5F2F8; --st-pbook-fg:#1E7F8E; --st-pbook-bd:#2989A2;
  /* OLD (23 Sep) — background:var(--wj-bg); color:var(--wj-ink); font-family:var(--wj-font); font-size:15px; */
  background:var(--wj-page); color:var(--wj-ink); font-family:var(--wj-font); font-size:15px;   /* NEW (23 Sep b) */
}
body.wj h1, body.wj h2, body.wj h3, body.wj h4{font-family:var(--wj-font); letter-spacing:0}
/* OLD (23 Sep) — body.wj h1{font-size:22px; font-weight:500; color:var(--wj-teal)} */
/* OLD (23 Sep) — body.wj h2{font-size:19px; font-weight:500; color:var(--wj-teal)} */
body.wj h1{font-size:22px; font-weight:500; color:var(--wj-title)}   /* NEW (23 Sep b) */
body.wj h2{font-size:19px; font-weight:500; color:var(--wj-title)}   /* NEW (23 Sep b) */
body.wj h3{font-size:16px; font-weight:600; color:#333}
body.wj a{color:var(--wj-teal)}
body.wj :focus-visible{outline:2px solid #7FC6D0; outline-offset:2px}

/* ---------- the welcome bar ---------- */
.wj-top{display:none}
body.wj .wj-top{
  display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  /* OLD (23 Sep) — background:#E4E4E4; padding:9px 24px; min-height:46px; */
  background:var(--wj-bar); padding:9px 24px; min-height:46px; border-bottom:1px solid #E6DAC6;   /* NEW (23 Sep b) */
}
.wj-welcome{display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; font-size:15px; font-weight:600; color:#292929}
.wj-welcome b{font-weight:700; margin-left:4px}
.wj-badge{display:inline-flex; margin:0 3px 0 4px; transform:translateY(1px)}
.wj-role{color:var(--wj-teal); font-weight:700}
body.wj .wj-top .tz-pick-host{margin-left:auto}
body.wj .wj-top .tz-pick{background:transparent; border:0; box-shadow:none; padding:0; gap:6px}
body.wj .wj-top .tz-pick-icon{display:none}
body.wj .wj-top .tz-pick-label{font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:#292929}
body.wj .wj-top .tz-pick-label::after{content:' :'}
body.wj .wj-top .tz-pick select{font-size:14px; font-weight:700; color:#292929; padding:4px 4px; min-width:0; max-width:230px}
body.wj .wj-top .tz-pick:focus-within{box-shadow:none}
/* OLD (to 23 Sep b) — body.wj .wj-top .tz-pick-host.is-away .tz-pick{background:#FFF4EA; border-radius:3px; padding:2px 8px; outline:1px solid #F4A06A} */
body.wj .wj-top .tz-pick-host.is-away .tz-pick{background:#F7EEFA; border-radius:3px; padding:2px 8px; outline:1px solid #B98ACB}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .menu-btn{background:transparent; border:0; width:38px; height:38px; flex:0 0 38px; border-radius:4px}
body.wj .menu-btn i{background:#333; width:24px; height:3px}
/* OLD (23 Sep) — body.wj .menu-btn:hover{background:#D8D8D8} */
body.wj .menu-btn:hover{background:#E6DAC6}   /* NEW (23 Sep b) */
/* OLD (to 23 Sep d) —
@media (hover: hover) and (pointer: fine) and (min-width:900px){
  body.wj .wj-top > .menu-btn{display:none}
}
*/
@media (min-width:900px){   /* NEW (23 Sep e) — see the note at .topbar > .menu-btn */
  body.wj .wj-top > .menu-btn{display:none}
}
@media (max-width:720px){
  body.wj .wj-top{padding:8px 14px}
  body.wj .wj-top .tz-pick-host{margin-left:0; width:100%}
  body.wj .wj-top .tz-pick{width:auto}
}

/* the page title: teal, quiet; none at all on the home */
body.wj .wrap{max-width:1320px; padding:18px 24px 64px}
body.wj .topbar{margin-bottom:16px}
body.wj .greeting .eyebrow{display:none}
/* OLD (23 Sep) — body.wj #page-title{font-size:22px; font-weight:500; color:var(--wj-teal); line-height:1.25} */
body.wj #page-title{font-size:22px; font-weight:500; color:var(--wj-title); line-height:1.25}   /* NEW (23 Sep b) */
body.wj.is-home .topbar{display:none}
@media (max-width:820px){ body.wj .wrap{padding:14px 12px 56px} }

/* ---------- the icon rail: white, teal line icons, peach for "you are here" ---------- */
body.wj em svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block}
body.wj .rail{background:#fff; box-shadow:1px 0 4px rgba(0,0,0,.08); padding:10px 8px; border-right:1px solid #EAEAEA}
body.wj .rail-brand{height:42px; min-height:42px; border-radius:10px; font-size:15px; margin-bottom:12px}
body.wj .rail a[data-route], body.wj .rail-out{color:#1E8A9A; height:44px; min-height:44px; border-radius:4px}
body.wj .rail a em{width:22px; flex:0 0 22px}
body.wj .rail a[data-route]:hover, body.wj .rail-out:hover{background:#F0F7F8}
/* OLD (to 23 Sep b) — body.wj .rail a[aria-current="page"]{background:#FDEEE5; border-color:transparent; color:#17707D} */
body.wj .rail a[aria-current="page"]{background:#F1E4F7; border-color:transparent; color:#17707D}   /* NEW (23 Sep c) — brand purple, not orange */
/* OLD (to 23 Sep b) — body.wj .rail .dot{background:#F4845F; border:2px solid #fff; top:7px; right:9px} */
body.wj .rail .dot{background:#8E3FA8; border:2px solid #fff; top:7px; right:9px}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .rail-out{border-top:1px solid #EEE; border-radius:0}

/* ---------- the drawer: white, like the WHJR menu ---------- */
body.wj .scrim{background:rgba(0,0,0,.32)}
body.wj .drawer{background:#fff; box-shadow:4px 0 22px rgba(0,0,0,.18)}
body.wj .drawer[data-open]{box-shadow:10px 0 36px rgba(0,0,0,.22)}
body.wj .drawer .brand{color:#3B0A47}
body.wj .drawer .brand .wm{color:#3B0A47}
body.wj .drawer .brand span{color:#6F6F6F}
body.wj .drawer-profile{background:#F5F7F8; border:1px solid #E6E6E6; border-radius:4px}
body.wj .drawer-profile .pic{background:#E5F2F8; color:#1E8A9A}
body.wj .drawer-profile .who b{color:#292929}
body.wj .drawer-profile .who span{color:#6F6F6F}
body.wj .drawer a.nav{color:#1E8A9A; font-size:15.5px; font-weight:500; padding:11px 12px; border-radius:4px}
body.wj .drawer a.nav em{width:24px; flex:0 0 24px; display:flex; justify-content:center}
body.wj .drawer a.nav:hover{background:#F0F7F8}
/* OLD (to 23 Sep b) — body.wj .drawer a.nav[aria-current="page"]{background:#FDEEE5; border-color:transparent; color:#17707D} */
body.wj .drawer a.nav[aria-current="page"]{background:#F1E4F7; border-color:transparent; color:#17707D}   /* NEW (23 Sep c) — brand purple, not orange */
/* OLD (to 23 Sep b) — body.wj .drawer a.nav .dot{background:#F4845F} */
body.wj .drawer a.nav .dot{background:#8E3FA8}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .drawer .signout{border-top:1px solid #EEE}

/* ---------- what every screen is made of ---------- */
body.wj .card{border:1px solid #E6E6E6; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.05)}
body.wj .card-topline{border-top:3px solid var(--wj-teal)}
body.wj .pill{font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; border-radius:3px; padding:3px 10px; background:#E5F2F8; color:#1E7F8E}
/* OLD (to 23 Sep b) — body.wj .pill-gold, body.wj .pill-amber{background:#FCDDC2; color:#D86A1E} */
body.wj .pill-gold, body.wj .pill-amber{background:#EEDDF5; color:#6B1E7A}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .pill-green{background:#E3F6EC; color:#2F8656}
body.wj .pill-crimson{background:#FBE9E8; color:#C9302C}
body.wj .pill-quiet{background:#EFEFEF; color:#5E5E5E}
body.wj .btn{font-family:var(--wj-font); font-weight:700; border-radius:3px; padding:11px 20px; font-size:14.5px}
body.wj .btn-sm{padding:7px 14px; font-size:13.5px; border-radius:3px}
body.wj .btn-gold{background:#10849A; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18)}
body.wj .btn-gold:hover:not([disabled]){background:#0C7285; box-shadow:0 1px 2px rgba(0,0,0,.18)}
body.wj .btn-outline{background:#fff; color:#10849A; border:1.5px solid #10849A}
body.wj .btn-outline:hover:not([disabled]){background:#E5F2F8}
body.wj .btn-ghost{background:#fff; color:#5E5E5E; border:1.5px solid #D3D3D3}
body.wj .btn-ghost:hover:not([disabled]){background:#F5F5F5; color:#292929}
body.wj .btn-danger{background:#fff; color:#C9302C; border:1.5px solid #D9534F}
body.wj .btn-link{color:#10849A}
body.wj .btn-join{background:#2E9E5F; box-shadow:none}
body.wj label.field > span{text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:700; color:#444}
body.wj input[type=text], body.wj input[type=email], body.wj input[type=password], body.wj input[type=tel],
body.wj input[type=number], body.wj input[type=date], body.wj input[type=time], body.wj select, body.wj textarea{
  border-radius:3px; border:1px solid #CFCFCF; font-size:15px; padding:10px 12px; font-family:var(--wj-font);
}
body.wj input:focus, body.wj select:focus, body.wj textarea:focus{border-color:#1E8A9A; box-shadow:0 0 0 3px #E0F1F4}
body.wj .alert{border-radius:3px}
body.wj .empty{background:#fff; border:1px dashed #D3D3D3; border-radius:4px}
/* OLD (23 Sep) — body.wj .section-head h2{color:var(--wj-teal)} */
body.wj .section-head h2{color:var(--wj-title)}   /* NEW (23 Sep b) */
body.wj .tablewrap{border-radius:4px}
body.wj dialog{border-radius:4px}
body.wj dialog::backdrop{background:rgba(0,0,0,.45); backdrop-filter:none}
/* OLD (23 Sep) — body.wj .modal-head h2{font-size:20px; font-weight:500; color:var(--wj-teal)} */
body.wj .modal-head h2{font-size:20px; font-weight:500; color:var(--wj-title)}   /* NEW (23 Sep b) */
body.wj .modal-foot{border-radius:0 0 4px 4px}
body.wj dialog.dlg-wide{max-width:min(860px, 95vw)}
body.wj .skeleton{border-radius:4px}
/* OLD (to 23 Sep b) — body.wj .tz-away-note{margin:0 0 14px; color:#D86A1E} */
body.wj .tz-away-note{margin:0 0 14px; color:#6B1E7A}   /* NEW (23 Sep c) — brand purple, not orange */

/* ---------- the home ---------- */
.wj-home{
  display:grid; gap:16px; margin-bottom:16px;
  grid-template-columns:minmax(0, 1.32fr) minmax(0, 1fr);
  grid-template-areas: "upc perf" "rep slots";
}
.wj-upc{grid-area:upc} .wj-perf{grid-area:perf} .wj-rep{grid-area:rep} .wj-slots{grid-area:slots}
@media (max-width:900px){
  .wj-home{grid-template-columns:minmax(0, 1fr); grid-template-areas: "upc" "perf" "rep" "slots"}
}
.wj-card{
  background:#fff; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.08);
  padding:18px 20px; position:relative; display:flex; flex-direction:column; min-width:0;
}
#view > .wj-card, #view > .wj-banners{margin-bottom:16px}
.wj-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px}
/* OLD (23 Sep) — .wj-card h2{font-size:19px; font-weight:500; color:var(--wj-teal); margin:0; line-height:1.3} */
.wj-card h2{font-size:19px; font-weight:500; color:var(--wj-title); margin:0; line-height:1.3}   /* NEW (23 Sep b) */
.wj-muted{color:#5E5E5E; font-size:14px; line-height:1.55; margin:0}
.wj-none{text-align:center; color:#5E5E5E; padding:26px 10px; margin:0; font-size:15px}
.wj-empty{display:flex; flex-direction:column; align-items:flex-start; gap:12px; color:#5E5E5E; font-size:14.5px}
.wj-empty p{margin:0}
/* OLD (to 23 Sep b) — .is-green{color:#4E9A3A} .is-orange{color:#E8792B} .is-red{color:#D9534F} */
.is-green{color:#4E9A3A} .is-orange{color:#7B2D8E} .is-red{color:#D9534F}   /* NEW (23 Sep c) — brand purple, not orange */
.wj-i{
  display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  border:1.3px solid var(--wj-teal); color:var(--wj-teal); font-size:10px; font-weight:800; font-style:normal;
  font-family:Georgia, serif; cursor:help; line-height:1; flex:0 0 15px; margin-left:5px;
}
.wj-chev{font-size:22px; line-height:1; font-weight:400; transform:translateY(-1px)}
.wj-chev.is-down{font-size:15px; transform:translateY(-4px)}
.wj-card-foot{
  margin:auto -20px -18px; padding:12px 20px; border:0; border-top:1px solid #EFEFEF; background:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  color:var(--wj-teal); font:inherit; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; text-align:left;
}
.wj-card-foot:hover{background:#F7FBFC}
.wj-card-foot.is-center{justify-content:center; font-weight:600}
.wj-card > :has(+ .wj-card-foot){margin-bottom:14px}

/* the reports-waiting line */
.wj-alert{
  display:flex; justify-content:space-between; align-items:center; gap:10px 16px; flex-wrap:wrap;
  border:1px solid #E5C443; background:#fff; border-radius:3px; padding:10px 16px; margin-bottom:16px;
  color:#333; text-decoration:none; font-size:14.5px;
}
body.wj a.wj-alert{color:#333}
.wj-alert strong{font-weight:700}
.wj-alert-go{color:var(--wj-teal); font-weight:700; display:inline-flex; align-items:center; gap:4px; white-space:nowrap}

/* 1. Upcoming Class */
.wj-tag{
  /* OLD (to 23 Sep b) — position:relative; background:#FCDDC2; color:#D86A1E; font-weight:600; font-size:14px; line-height:1.2; */
  position:relative; background:#EEDDF5; color:#6B1E7A; font-weight:600; font-size:14px; line-height:1.2;   /* NEW (23 Sep c) — brand purple, not orange */
  padding:5px 10px; margin:-4px -28px 0 0; white-space:nowrap;
}
/* OLD (to 23 Sep b) — .wj-tag::after{content:''; position:absolute; right:0; bottom:-8px; border-top:8px solid #F4A06A; border-right:8px solid transparent} */
.wj-tag::after{content:''; position:absolute; right:0; bottom:-8px; border-top:8px solid #B98ACB; border-right:8px solid transparent}   /* NEW (23 Sep c) — brand purple, not orange */
.wj-upc-when{font-size:17px; color:#4A4A4A; font-weight:500; margin-top:2px}
.wj-upc-who{font-size:17px; color:#333; margin-top:4px}
.wj-upc-their{font-size:13.5px; color:var(--wj-teal); font-weight:700; margin-top:4px}
.wj-note{
  /* OLD (to 23 Sep b) — background:#FFF4EA; border-radius:3px; padding:8px 10px; margin-top:10px; */
  background:#F7EEFA; border-radius:3px; padding:8px 10px; margin-top:10px;   /* NEW (23 Sep c) — brand purple, not orange */
  display:flex; flex-direction:column; gap:3px; font-size:13px; font-style:italic; color:#6F6A63; line-height:1.45;
}
.wj-start{
  display:block; text-align:center; margin-top:14px; background:#4CC585; color:#fff !important;
  font-size:17px; font-weight:500; padding:10px; border-radius:2px; text-decoration:none;
  box-shadow:0 2px 3px rgba(0,0,0,.2);
}
.wj-start:hover{background:#3FB577}
.wj-start[aria-disabled="true"]{background:#80D8A8; cursor:not-allowed; box-shadow:0 2px 3px rgba(0,0,0,.14)}
.wj-start.is-join{background:#2E9E5F; animation:joinPulse 1.8s ease-in-out infinite}
.wj-upc-hint{font-size:13px; color:#5E5E5E; text-align:center; margin-top:8px}
.wj-upc-hint.is-waiting{color:#2E9E5F; font-weight:700}

/* 2. Performance */
.wj-perf h2{color:#555}
.wj-perf-head{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin-bottom:14px}
.wj-link{color:var(--wj-teal); font-weight:600; text-decoration:none; font-size:15px; display:inline-flex; align-items:center; gap:5px}
.wj-toggle{display:inline-flex; border:1px solid #C4E9D5; border-radius:3px; overflow:hidden; flex:0 0 auto}
.wj-perf-head .wj-toggle{margin-left:auto}
.wj-toggle button, .wj-toggle a{
  border:0; background:#DADADA; color:#9A9A9A; font:inherit; font-size:13.5px; font-weight:700;
  padding:6px 14px; cursor:pointer; text-decoration:none; line-height:1.3;
}
body.wj .wj-toggle a{color:#9A9A9A}
.wj-toggle [aria-pressed="true"]{background:#5CC58C; color:#fff}
body.wj .wj-toggle a[aria-pressed="true"]{color:#fff}
.wj-perf-line{display:flex; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; font-size:13.5px; color:#333; margin-bottom:16px}
.wj-perf-line > span{display:inline-flex; align-items:center; gap:3px}
.wj-perf-line b{font-weight:700}
.wj-perf-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:18px}
.wj-perf-grid > div > span{display:flex; align-items:center; gap:2px; font-size:15px; color:#5E5E5E}
.wj-perf-grid b{display:block; margin-top:8px; font-size:15px; font-weight:700; color:#252525}
.wj-perf-grid em{font-style:normal}
.wj-perf-grid .is-c{text-align:center} .wj-perf-grid .is-c > span{justify-content:center}
.wj-perf-grid .is-r{text-align:right} .wj-perf-grid .is-r > span{justify-content:flex-end}
.wj-perf-trials{display:grid; grid-template-columns:auto 1fr; margin-bottom:12px}
.wj-perf-tc{padding-right:14px; border-right:1px solid #DDD}
.wj-perf-tc > span{display:block; font-size:15px; color:#5E5E5E}
.wj-perf-tc b{display:block; margin-top:8px; font-size:15px; color:#252525}
.wj-perf-conv{padding-left:14px; display:flex; flex-direction:column; gap:10px}
.wj-perf-conv > div{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; color:#5E5E5E}
.wj-perf-conv > div > span{display:inline-flex; align-items:center}
.wj-perf-conv b{color:#252525; font-weight:700}
.wj-perf-note{font-size:12.5px; color:#5E5E5E; margin:4px 0 0; line-height:1.55}
.wj-tips{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:15px; color:#333}

/* 3. Monthly Reports */
.wj-trio{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.wj-trio > div > span{display:flex; align-items:flex-start; gap:2px; font-size:13px; color:#5E5E5E; line-height:1.35; min-height:36px}
.wj-trio b{display:block; margin-top:6px; font-size:17px; font-weight:700; color:#333}

/* 4. Slot Count */
.wj-kv{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.wj-kv li{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:15px; color:#5E5E5E}
.wj-kv li > span{display:inline-flex; align-items:center}
/* OLD (to 23 Sep b) — .wj-kv b{color:#E8792B; font-weight:600; min-width:44px; text-align:right} */
.wj-kv b{color:#7B2D8E; font-weight:600; min-width:44px; text-align:right}   /* NEW (23 Sep c) — brand purple, not orange */

/* 5. banners */
.wj-banners{display:flex; flex-direction:column; gap:8px}
.wj-banner{display:flex; align-items:center; gap:18px; border-radius:2px; padding:10px 22px; min-height:84px; position:relative}
.wj-banner-blue{background:linear-gradient(90deg, #3B74CC, #4A84DA); color:#fff}
.wj-banner-pic{width:64px; height:64px; flex:0 0 64px; border-radius:50%; overflow:hidden; background:#fff; border:3px solid #FFD66B; display:block}
.wj-banner-pic img{width:100%; height:100%; object-fit:cover}
.wj-banner-pic.is-broken{background:#FFD66B; display:flex; align-items:center; justify-content:center}
.wj-banner-pic.is-broken img{display:none}
.wj-banner-pic.is-broken::after{content:'\1F3C6'; font-size:28px}
.wj-banner-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.wj-banner-text > span{font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.9}
.wj-banner-text strong{font-size:19px; font-weight:700; line-height:1.3}
.wj-banner-btn{
  background:#fff; color:#2F6BC0; border:0; border-radius:3px; padding:9px 18px; font:inherit; font-weight:800;
  font-size:13px; letter-spacing:.03em; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.2); cursor:pointer; white-space:nowrap;
}
body.wj a.wj-banner-btn{color:#2F6BC0}
.wj-banner-btn.is-teal{background:#0F89A6; color:#fff}
.wj-banner-dots{position:absolute; right:14px; bottom:7px; display:flex; gap:5px}
.wj-banner-dots button{width:7px; height:7px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.45); cursor:pointer}
.wj-banner-dots button[aria-pressed="true"]{background:#fff}
.wj-banner-sky{background:#DCF0F5; border:1px solid #8CCBD9; color:#147890}
.wj-banner-sky strong{font-size:23px; font-weight:800; color:#147890}
.wj-banner-sky strong span{font-weight:500; font-size:inherit; text-transform:none; letter-spacing:0; opacity:1}
.wj-banner-sky .wj-banner-text > span{text-transform:none; letter-spacing:0; font-size:13.5px; color:#3F8C9C; opacity:1}
@media (max-width:640px){
  .wj-banner{flex-wrap:wrap; padding:12px 14px; gap:12px}
  .wj-banner-text strong{font-size:16px}
  .wj-banner-sky strong{font-size:18px}
}

/* 6. Mini Calendar (and the report list, which shares its rows) */
.wj-mini-head{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin-bottom:16px}
/* OLD (23 Sep) — .wj-mini-head h2 small{font-size:14px; color:var(--wj-teal); font-weight:500} */
.wj-mini-head h2 small{font-size:14px; color:var(--wj-title); font-weight:500}   /* NEW (23 Sep b) */
.wj-mini-tools{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap}
.wj-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:2px;
  padding:8px 14px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1.25;
}
.wj-btn-teal{background:#0F7F97; color:#fff}
body.wj a.wj-btn-teal{color:#fff}
.wj-btn-teal:hover{background:#0C6E83}
.wj-btn-teal.is-on{background:#0A5F71; box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.wj-btn-green{background:#4CC585; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2)}
.wj-btn-green:hover{background:#3FB577}
/* OLD (23 Sep) — .wj-btn-orange{background:#F49A44; color:#fff; flex-direction:column; gap:0; padding:6px 16px} */
/* OLD (23 Sep) — .wj-btn-orange small{font-size:11px; font-weight:600; opacity:.9} */
/* OLD (23 Sep) — .wj-btn-orange:hover{background:#EC8B30} */
/* NEW (23 Sep b) — "Schedule via Timezone" in the brand purple, the zone in the brand gold */
.wj-btn-orange{background:linear-gradient(160deg, #7B2D8E, #4A1259); color:#fff; flex-direction:column; gap:0; padding:6px 16px; box-shadow:0 1px 2px rgba(46,10,51,.3)}
.wj-btn-orange small{font-size:11px; font-weight:700; color:#F5C542; opacity:1}
.wj-btn-orange:hover{background:linear-gradient(160deg, #6B2380, #3B0A47)}
.wj-btn-ghost{background:#fff; color:#0F7F97; border:1px solid #0F7F97; padding:7px 13px}
body.wj a.wj-btn-ghost{color:#0F7F97}
.wj-btn-ghost:hover{background:#EEF7F9}
.wj-count{background:#fff; color:#0F7F97; border-radius:999px; font-size:11.5px; font-weight:800; padding:0 7px; line-height:18px}
.wj-rows{display:flex; flex-direction:column; gap:10px}
.wj-row{
  display:grid; align-items:center; gap:10px; padding:12px 14px; border-radius:2px;
  grid-template-columns:minmax(170px, 1.1fr) minmax(110px, 1.2fr) 72px minmax(120px, 1.2fr) minmax(70px, .6fr) minmax(110px, .8fr);
  font:inherit; font-size:13px; color:#2B3537; box-shadow:0 1px 2px rgba(0,0,0,.12); border:0; text-align:left; width:100%;
}
.wj-row.is-booked{background:#D9E8ED}
.wj-row.is-grey{background:#E8E8E8}
.wj-row.is-action{cursor:pointer}
.wj-row.is-action:hover{filter:brightness(.97)}
.wj-row-time{display:flex; align-items:center; gap:6px; white-space:nowrap}
.wj-row-time svg{flex:0 0 13px}
.wj-row-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wj-row-tz{font-size:12px; color:#3F4B4E}
.wj-row-sub{display:flex; align-items:center; gap:6px; font-size:12.5px; overflow:hidden; white-space:nowrap}
.wj-row-sub svg{flex:0 0 14px}
.wj-row-grade{color:var(--wj-teal); font-size:13px}
.wj-row-status{text-align:right; white-space:nowrap}
/* OLD (to 23 Sep b) — .wj-row-status.is-orange{color:#D86A1E; font-weight:700} */
.wj-row-status.is-orange{color:#6B1E7A; font-weight:700}   /* NEW (23 Sep c) — brand purple, not orange */
.wj-row-status.is-red{color:#D9534F; font-weight:700}
.wj-row-status.is-green{color:#3E8E5C; font-weight:700}
.wj-more{display:flex; justify-content:center; margin-top:14px}
.wj-pill{background:#3A4E59; color:#fff; border:0; border-radius:999px; padding:5px 18px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.25)}
.wj-pill:hover{background:#2E3F48}
@media (max-width:760px){
  .wj-row{display:flex; flex-wrap:wrap; gap:4px 12px}
  .wj-row-time{flex:1 1 auto; font-weight:700}
  .wj-row-status{order:2}
  .wj-row-name{order:3; flex:1 1 100%}
  .wj-row-tz{order:4} .wj-row-sub{order:5} .wj-row-grade{order:6}
  .wj-row-tz:empty, .wj-row-sub:empty, .wj-row-grade:empty{display:none}
}

/* 7. Compliments */
.wj-comp-wrap{position:relative; padding-bottom:6px}
.wj-comp-stack{display:flex; flex-direction:column; gap:8px}
.wj-comp-bar{display:flex; align-items:flex-start; gap:12px; border-radius:3px; padding:12px 16px 18px 14px; min-height:74px; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12)}
.wj-comp-pic{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%; border:2px solid #fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:rgba(255,255,255,.12);
}
.wj-comp-pic img{width:100%; height:100%; object-fit:cover}
.wj-comp-body{margin-left:110px; min-width:0; flex:1}
.wj-comp-name{font-size:12px; font-weight:800; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.wj-comp-stars{color:#FFF1B8; letter-spacing:1px; font-size:11px}
.wj-comp-body p{margin:3px 0 0; font-size:14px; line-height:1.5; overflow-wrap:anywhere}
/* OLD (to 23 Sep b) — .wj-c1{background:#8E90F4} .wj-c2{background:#F4A28D} .wj-c3{background:#F58DA8} .wj-c4{background:#8DC2F4} */
.wj-c1{background:#8E90F4} .wj-c2{background:#A673C0} .wj-c3{background:#F58DA8} .wj-c4{background:#8DC2F4}   /* NEW (23 Sep c) — brand purple, not orange */
.wj-comp-toggle{position:absolute; left:50%; bottom:-8px; transform:translateX(-50%)}
.wj-comp-toggle[hidden]{display:none}
.wj-comp{padding-bottom:26px}
@media (max-width:640px){ .wj-comp-body{margin-left:4px} }

/* 8. Notifications & Alerts */
.wj-tabs{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #EEE; margin:0 -20px 4px; padding:6px 30px 0 20px; overflow-x:auto}
.wj-tabs button{
  background:none; border:0; border-bottom:3px solid transparent; padding:8px 4px 9px; font:inherit; font-size:13.5px;
  color:var(--wj-teal); cursor:pointer; position:relative; white-space:nowrap; margin-right:12px;
}
.wj-tabs button[aria-selected="true"]{border-bottom-color:var(--wj-teal); font-weight:700}
.wj-dot{
  position:absolute; top:-2px; right:-14px; background:#E53935; color:#fff; font-size:10px; font-weight:800;
  border-radius:999px; min-width:16px; height:16px; line-height:16px; text-align:center; padding:0 4px;
}
.wj-notif-list{display:flex; flex-direction:column; max-height:360px; overflow:auto}
.wj-notif-item{padding:12px 2px; border-bottom:1px solid #F0F0F0}
.wj-notif-item p{margin:0 0 4px; font-size:14.5px; color:#333; line-height:1.5}
.wj-notif-item.is-pinned p{font-weight:600}
.wj-notif-meta{display:flex; gap:12px; font-size:12.5px; color:#8A8A8A}
.wj-notif-meta a{color:var(--wj-teal); font-weight:700; text-decoration:none}

/* ---------- Monthly reports: the list and the form ---------- */
.wj-progress{position:relative; height:28px; background:#EEF3F4; border-radius:2px; margin-bottom:16px; overflow:hidden}
.wj-progress span{position:absolute; left:0; top:0; bottom:0; background:#BFE6D0}
.wj-progress b{position:relative; display:block; line-height:28px; padding-left:12px; font-size:13px; color:#2B3537}
.wj-reprow{grid-template-columns:40px minmax(150px, 1.4fr) minmax(110px, 1fr) minmax(130px, .9fr) auto}
.wj-rep-av{
  width:34px; height:34px; border-radius:50%; background:#fff; color:var(--wj-teal); display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:12.5px; box-shadow:0 0 0 2px #fff, 0 0 0 3px #BFE3EA;
}
.wj-row-name b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis}
.wj-row-name small{display:block; color:#5E5E5E; font-size:12px}
.wj-rep-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
@media (max-width:760px){
  .wj-reprow .wj-row-name{order:1; flex:1 1 60%}
  .wj-reprow .wj-rep-av{order:0}
  .wj-reprow .wj-row-status{order:2}
  .wj-reprow .wj-row-sub{order:3}
  .wj-reprow .wj-rep-actions{order:4; flex:1 1 100%; justify-content:flex-start}
}
.rf-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.rf-row{border:1px solid #E6E6E6; border-radius:3px; padding:12px; background:#FAFBFB; min-width:0}
.rf-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.rf-top label b{display:block; font-size:14.5px; color:#333}
.rf-top label small{display:block; font-size:12px; color:#6F6F6F; line-height:1.4; margin-top:2px}
.rf-score{display:flex; align-items:center; gap:4px; flex:0 0 auto}
.rf-score i{font-style:normal; font-size:12px; color:#8A8A8A}
body.wj input.rf-num{width:70px; padding:6px 8px; text-align:right; font-weight:700; font-size:15px}
.rf-range{width:100%; margin:10px 0 8px; accent-color:#1E8A9A}
.rf-range.is-unset{opacity:.4}
body.wj textarea.rf-note{min-height:58px; font-size:14px; padding:8px 10px}
.rf-proj-row input{max-width:130px}
@media (max-width:720px){ .rf-grid{grid-template-columns:1fr} }

/* ---------- My calendar, the WHJR way ---------- */
.wj-surge{
  display:block; width:100%; background:#F6E53F; border:0; border-radius:2px; padding:12px 16px; font:inherit;
  font-weight:800; font-size:15px; color:#3E2A0C; cursor:pointer; margin-bottom:10px; letter-spacing:.01em; text-align:center;
}
.wj-surge:hover{background:#F1DE2A}
body.wj .cal-bar{background:#F4FCFF; padding:14px 16px; border-radius:2px 2px 0 0; margin-bottom:0; border:1px solid #E3EEF1; border-bottom:0}
/* OLD (23 Sep) — .wj-week{display:flex; align-items:center; gap:8px; color:var(--wj-teal)} */
/* OLD (23 Sep) — .wj-week button{background:none; border:0; font:inherit; font-size:26px; color:var(--wj-teal); cursor:pointer; line-height:1; padding:0 6px} */
.wj-week{display:flex; align-items:center; gap:8px; color:var(--wj-title)}   /* NEW (23 Sep b) */
.wj-week button{background:none; border:0; font:inherit; font-size:26px; color:var(--wj-title); cursor:pointer; line-height:1; padding:0 6px}   /* NEW (23 Sep b) */
.wj-week strong{font-size:18px; font-weight:500; white-space:nowrap}
.wj-week .wj-week-now{font-size:13px; text-decoration:underline; font-weight:600}
body.wj .cal-wrap{border-radius:0 0 2px 2px; border:1px solid #E6E6E6; box-shadow:none; max-height:min(74vh, 980px)}
body.wj .cal{grid-template-columns:84px repeat(7, minmax(120px, 1fr)); min-width:924px}
body.wj .cal-corner{background:#fff; border-color:#EBEBEB; color:#8A8A8A; font-size:10px}
body.wj .cal-dayhead{background:#fff; border-color:#EBEBEB; padding:10px 6px 12px}
body.wj .cal-dayhead span{font-size:17px; font-weight:700; letter-spacing:0; text-transform:none; color:#222}
body.wj .cal-dayhead b{font-family:var(--wj-font); font-size:16px; font-weight:500; color:#222}
/* OLD (to 23 Sep b) — body.wj .cal-dayhead.is-today{background:#FFF7EF} */
body.wj .cal-dayhead.is-today{background:#F8F0FB}   /* NEW (23 Sep c) — brand purple, not orange */
/* OLD (to 23 Sep b) — body.wj .cal-dayhead.is-today b, body.wj .cal-dayhead.is-today span{color:#E8792B} */
body.wj .cal-dayhead.is-today b, body.wj .cal-dayhead.is-today span{color:#7B2D8E}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .cal-times{background:#fff; border-color:#EBEBEB}
body.wj .cal-time{height:36px; font-size:12.5px; font-weight:800; color:#1A1A1A; padding:11px 10px 0 0; text-align:right}
body.wj .cal-time.is-half{color:#1A1A1A; font-weight:800}
body.wj .cal-col{
  height:1728px; border-color:#EBEBEB;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 35px, #EBEBEB 35px, #EBEBEB 36px);
}
/* OLD (to 23 Sep b) — body.wj .cal-col.is-today{background-color:#FFFCF8} */
body.wj .cal-col.is-today{background-color:#FCF8FD}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .cal-ev{
  border-style:solid; border-color:#C6D1D5; border-width:3px 0 0 0; border-radius:1px;
  background:#EEF3F4; color:#6C7072; font-size:11.5px; padding:4px 8px; gap:1px; justify-content:center;
  box-shadow:0 1px 1px rgba(0,0,0,.07);
}
body.wj .cal-ev:hover{box-shadow:0 3px 8px -2px rgba(0,0,0,.25)}
body.wj .cal-ev-label{font-weight:500; color:#5F6466}
body.wj .cal-ev-who{font-weight:500; color:#6C7072; opacity:1}
body.wj .cal-ev-who.is-struck{color:#D9534F; text-decoration:line-through}
body.wj .cal-ev.st-expected{border-color:#5DC092; background:#EAFBF3; border-style:solid}
body.wj .cal-ev.st-expired{border-color:#C6D1D5; background:#EEF3F4}
body.wj .cal-ev.st-trial-booked, body.wj .cal-ev.st-paid-booked{border-color:#2989A2; background:#E5F2F8}
body.wj .cal-ev.st-trial-done, body.wj .cal-ev.st-paid-taken,
body.wj .cal-ev.st-trial-snsa, body.wj .cal-ev.st-paid-snsa{border-color:#2989A2; background:#EEF3F4}
body.wj .cal-ev.st-trial-tnsa, body.wj .cal-ev.st-paid-tnsa{border-color:#D9534F; background:#FBEFEF}
/* OLD (to 23 Sep b) — body.wj .cal-ev.is-due{border-color:#F49A44; background:#FFF4EA; border-style:solid} */
body.wj .cal-ev.is-due{border-color:#8E3FA8; background:#F7EEFA; border-style:solid}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .cal-now{background:#D9534F}
body.wj .cal-now::before{background:#D9534F}
body.wj .cal-legend{margin:12px 0 0; gap:6px 16px}
body.wj .cal-key{font-size:12px; font-weight:600; color:#5E5E5E}
body.wj .cal-key i{width:20px; height:12px; border:0; border-top:3px solid #C6D1D5; border-radius:1px; background:#EEF3F4}
body.wj .cal-key.st-expected i{background:#EAFBF3; border-top-color:#5DC092; border-style:solid}
body.wj .cal-key.st-trial-booked i, body.wj .cal-key.st-paid-booked i{background:#E5F2F8; border-top-color:#2989A2}
body.wj .cal-key.st-trial-done i, body.wj .cal-key.st-paid-taken i,
body.wj .cal-key.st-trial-snsa i, body.wj .cal-key.st-paid-snsa i{background:#EEF3F4; border-top-color:#2989A2}
body.wj .cal-key.st-trial-tnsa i, body.wj .cal-key.st-paid-tnsa i{background:#FBEFEF; border-top-color:#D9534F}
body.wj .cal-key.st-expired i{background:#EEF3F4; border-top-color:#C6D1D5}
body.wj .info-rows > div{border-radius:3px; background:#F7F9FA}
body.wj .info-rows span{text-transform:none; letter-spacing:0; font-size:12.5px}

/* ---------- My earnings ---------- */
body.wj .earn-tile{border:1px solid #E6E6E6; border-left:4px solid var(--wj-teal); border-radius:3px; background:#fff}
/* OLD (to 23 Sep b) — body.wj .earn-tile b{font-family:var(--wj-font); color:#E8792B; font-weight:700} */
body.wj .earn-tile b{font-family:var(--wj-font); color:#7B2D8E; font-weight:700}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .earn-tile-label{letter-spacing:0; text-transform:none; font-size:14px; color:#5E5E5E; font-weight:600}
/* OLD (to 23 Sep b) — body.wj .earn-tile.tone-plum{background:#fff; border-left-color:#E8792B} */
body.wj .earn-tile.tone-plum{background:#fff; border-left-color:#7B2D8E}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .earn-tile.tone-green{border-left-color:#5CC58C}
/* OLD (to 23 Sep b) — body.wj .earn-tile.tone-gold{border-left-color:#F49A44} */
body.wj .earn-tile.tone-gold{border-left-color:#8E3FA8}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj .earn-tile.tone-blue{border-left-color:#2989A2}
body.wj table.earn thead th{background:#E5F2F8; color:#17707D; letter-spacing:0; text-transform:none; font-size:11.5px}
body.wj table.earn thead th.sub{background:#F4FAFB; color:#5E5E5E}
body.wj table.earn .earn-grp{font-family:var(--wj-font); color:#333; font-weight:700}
/* OLD (to 23 Sep b) — body.wj table.earn .earn-rowtotal, body.wj table.earn .earn-total-head{background:#FFF4EA} */
body.wj table.earn .earn-rowtotal, body.wj table.earn .earn-total-head{background:#F7EEFA}   /* NEW (23 Sep c) — brand purple, not orange */
/* OLD (to 23 Sep b) — body.wj table.earn tfoot th, body.wj table.earn tfoot td{background:#FFF4EA; border-top-color:#F4A06A} */
body.wj table.earn tfoot th, body.wj table.earn tfoot td{background:#F7EEFA; border-top-color:#B98ACB}   /* NEW (23 Sep c) — brand purple, not orange */
/* OLD (to 23 Sep b) — body.wj table.earn .earn-grand{background:#E8792B; color:#fff} */
body.wj table.earn .earn-grand{background:#7B2D8E; color:#fff}   /* NEW (23 Sep c) — brand purple, not orange */
body.wj thead th{letter-spacing:0; text-transform:none; font-size:12px}

/* ============================================================
   23 SEP (c) — added below; nothing above is removed.
     1. The SM mark from the logo, in place of the "SM" letters
     2. The chat box on every mentor and family screen
     3. Open or book a slot (mentor calendar), PTM colours
     4. The console: Support chats and Class timings
   ============================================================ */

/* ---------- 1. the SM mark ---------- */
img.logo.logo-mark{
  object-fit:contain; padding:3px; box-sizing:border-box; display:block;
}
/* on the mentor portal's white menu the mark stands on its own, no tile */
body.wj .drawer .brand img.logo.logo-mark{background:none; border:0; padding:0; width:48px; height:48px; flex:0 0 48px}
.rail-brand .rail-mark{width:34px; height:34px; object-fit:contain; display:block}
body.wj .rail-brand{background:none; border:0}
body.wj .rail-brand .rail-mark{width:40px; height:40px}

/* ---------- 2. the chat box ---------- */
/* its own two tokens: the mentor portal re-points --plum-soft to WHJR teal */
.sc-root{--sc-soft:#F3E8F7; --sc-accent:#6B1E7A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sc-root{--sc-soft:#3D1149; --sc-accent:#D9A6E6} }
:root[data-theme="dark"] .sc-root{--sc-soft:#3D1149; --sc-accent:#D9A6E6}
.sc-root .sc-input:focus, .sc-root .sc-select:focus{outline:none; border-color:#7B2D8E; box-shadow:0 0 0 3px rgba(123,45,142,.18)}
.sc-root{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  font-family:var(--font-body); pointer-events:none}
.sc-root > *{pointer-events:auto}
.sc-launch{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; position:relative;
  background:linear-gradient(160deg,#7B2D8E,#4A1259); color:#fff; font:inherit; font-weight:800; font-size:14.5px;
  padding:11px 18px 11px 14px; border-radius:999px; box-shadow:0 6px 18px -4px rgba(46,10,51,.55);
}
.sc-launch:hover{filter:brightness(1.08)}
.sc-launch:focus-visible{outline:3px solid #F5C542; outline-offset:2px}
.sc-launch-ico{display:inline-flex}
.sc-launch-ico svg{width:22px; height:22px; fill:none; stroke:#F5C542; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sc-badge{position:absolute; top:-6px; right:-4px; background:#D9344F; color:#fff; font-size:11px; font-weight:800;
  min-width:20px; height:20px; line-height:20px; border-radius:999px; text-align:center; padding:0 5px; border:2px solid #fff}
.sc-badge[hidden]{display:none}
.sc-root.is-open .sc-launch-txt{display:none}
.sc-root.is-open .sc-launch{padding:11px 13px}

/* "Raise your grievance" */
.sc-bubble{display:flex; align-items:flex-start; gap:10px; max-width:300px; position:relative;
  background:#4A1259; color:#fff; border-radius:12px; padding:12px 30px 12px 12px; box-shadow:0 8px 24px -8px rgba(46,10,51,.6)}
.sc-bubble[hidden]{display:none}
.sc-bubble::after{content:''; position:absolute; right:26px; bottom:-8px; border-top:9px solid #4A1259; border-left:9px solid transparent}
.sc-bubble-pic{width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:#fff; object-fit:contain; padding:3px; box-sizing:border-box}
.sc-bubble-body{background:none; border:0; color:inherit; text-align:left; font:inherit; cursor:pointer; padding:0; display:flex; flex-direction:column; gap:2px}
.sc-bubble-body b{font-size:15px; color:#F5C542}
.sc-bubble-body span{font-size:13px; line-height:1.4; color:#F3E6F8}
.sc-bubble-x{position:absolute; top:4px; right:6px; background:none; border:0; color:#E7CFEF; font-size:20px; line-height:1; cursor:pointer; padding:2px 5px}
.sc-bubble-x:hover{color:#fff}

/* the panel */
.sc-panel{width:min(380px, calc(100vw - 24px)); height:min(580px, calc(100vh - 110px)); display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 50px -12px rgba(46,10,51,.55); border:1px solid var(--line)}
.sc-panel[hidden]{display:none}
.sc-head{display:flex; align-items:center; justify-content:center; position:relative; padding:12px 44px;
  background:linear-gradient(160deg,#6B1E7A,#3B0A47); color:#fff; font-weight:800; font-size:16px; letter-spacing:.01em}
.sc-min{position:absolute; right:8px; top:6px; background:none; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:4px 10px; border-radius:6px}
.sc-min:hover{background:rgba(255,255,255,.12)}
.sc-body{flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:14px}
.sc-hello{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.sc-hello-pic{width:46px; height:46px; flex:0 0 46px; object-fit:contain}
.sc-hello b{display:block; font-size:16px; color:var(--ink)}
.sc-hello span{display:block; font-size:13px; color:var(--ink-2); line-height:1.45}
.sc-actions{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.sc-btn{border:0; border-radius:10px; font:inherit; font-weight:800; font-size:14.5px; padding:11px 14px; cursor:pointer; text-align:left}
.sc-btn-main{background:linear-gradient(160deg,#7B2D8E,#4A1259); color:#fff; text-align:center}
.sc-btn-main:hover{filter:brightness(1.07)}
.sc-btn-main[disabled]{opacity:.6; cursor:progress}
.sc-btn-ceo{background:var(--surface-2); color:var(--ink); border:1.5px solid #B98ACB; display:flex; flex-direction:column; gap:2px}
.sc-btn-ceo small{font-weight:600; font-size:12.5px; color:var(--ink-2)}
.sc-btn-ceo:hover{border-color:#7B2D8E}
.sc-list-head{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px}
.sc-list{display:flex; flex-direction:column; gap:6px}
.sc-row{display:flex; flex-direction:column; gap:3px; text-align:left; border:1px solid var(--line); background:var(--surface);
  border-radius:10px; padding:9px 11px; cursor:pointer; font:inherit; color:var(--ink)}
.sc-row:hover{border-color:#B98ACB}
.sc-row.is-unread{border-color:#7B2D8E; box-shadow:inset 3px 0 0 #7B2D8E}
.sc-row-top{display:flex; justify-content:space-between; gap:8px; font-size:13.5px}
.sc-row-top b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sc-row-top time{font-size:12px; color:var(--ink-3); white-space:nowrap}
.sc-row-msg{font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sc-row-tags{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.sc-tag{font-style:normal; font-size:11px; font-weight:800; border-radius:999px; padding:2px 8px; background:var(--sc-soft); color:var(--sc-accent)}
.sc-tag.is-closed{background:var(--cream-2); color:var(--ink-2)}
.sc-tag.is-approved{background:#E3F6EC; color:#2F8656}
.sc-tag.is-declined{background:#FBE9E8; color:#C9302C}
.sc-dot{width:9px; height:9px; border-radius:50%; background:#D9344F; display:inline-block}
.sc-empty{font-size:13.5px; color:var(--ink-2); margin:4px 0}
.sc-skel{height:54px; border-radius:10px; background:linear-gradient(90deg,var(--cream-2),var(--surface-2),var(--cream-2)); background-size:200% 100%; animation:scShimmer 1.2s linear infinite}
@keyframes scShimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .sc-skel{animation:none} }
.sc-back{align-self:flex-start; background:none; border:0; color:var(--sc-accent); font:inherit; font-weight:700; font-size:14px; cursor:pointer; padding:2px 0; margin-bottom:10px}
.sc-form{display:flex; flex-direction:column; gap:8px}
.sc-label{font-size:12.5px; font-weight:800; color:var(--ink-2); margin-top:4px}
.sc-select, .sc-input{width:100%; box-sizing:border-box; font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:8px; padding:9px 10px}
.sc-input{resize:vertical; min-height:90px}
.sc-input-sm{min-height:44px; max-height:140px}
.sc-select:focus, .sc-input:focus{outline:none; border-color:#7B2D8E; box-shadow:0 0 0 3px rgba(123,45,142,.18)}
.sc-hint{font-size:12.5px; color:var(--ink-2); margin:0; line-height:1.45}
.sc-resched{display:flex; flex-direction:column; gap:6px}
.sc-resched[hidden]{display:none}
.sc-ceo{display:flex; gap:10px; align-items:flex-start; background:var(--sc-soft); border-radius:10px; padding:10px}
.sc-ceo img{width:40px; height:40px; flex:0 0 40px; object-fit:contain}
.sc-ceo b{display:block; font-size:14.5px}
.sc-ceo span{display:block; font-size:12.5px; color:var(--ink-2); line-height:1.45}
.sc-note{font-size:13px; border-radius:8px; padding:8px 10px; line-height:1.45}
.sc-note-error{background:#FBE9E8; color:#A12622}
.sc-note-info{background:var(--sc-soft); color:var(--sc-accent)}

/* one conversation */
.sc-agent{display:flex; align-items:center; gap:10px; margin:-14px -14px 0; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.sc-agent img{width:34px; height:34px; object-fit:contain}
.sc-agent b{display:block; font-size:14.5px}
.sc-agent span{display:block; font-size:12.5px; color:var(--ink-2)}
.sc-agent-topic{margin-left:auto; font-size:11.5px !important; font-weight:800; color:var(--sc-accent) !important; text-align:right}
.sc-back-ico{font-size:24px; margin:0; padding:0 4px 0 0; line-height:1}
.sc-log{flex:1; min-height:120px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:12px 2px}
.sc-day{align-self:center; font-size:11.5px; color:var(--ink-3); font-weight:700}
.sc-sys{align-self:center; font-size:12px; color:var(--ink-2); background:var(--cream-2); border-radius:999px; padding:4px 10px; text-align:center; max-width:90%}
.sc-msg{max-width:82%; display:flex; flex-direction:column; gap:2px}
.sc-msg p{margin:0; padding:9px 12px; border-radius:14px; font-size:14.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.sc-msg time{font-size:11px; color:var(--ink-3)}
.sc-msg-name{font-size:11.5px; font-weight:800; color:var(--ink-2)}
.sc-msg.is-theirs{align-self:flex-start}
.sc-msg.is-theirs p{background:var(--cream-2); color:var(--ink); border-bottom-left-radius:4px}
.sc-msg.is-mine{align-self:flex-end; align-items:flex-end}
.sc-msg.is-mine p{background:linear-gradient(160deg,#7B2D8E,#5A1170); color:#fff; border-bottom-right-radius:4px}
.sc-tick{color:var(--sc-accent); font-weight:800}
.sc-compose{display:flex; gap:8px; align-items:flex-end; border-top:1px solid var(--line); padding-top:10px}
.sc-send{flex:0 0 42px; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(160deg,#7B2D8E,#4A1259); display:inline-flex; align-items:center; justify-content:center}
.sc-send svg{width:20px; height:20px; fill:#F5C542}
.sc-send[disabled]{opacity:.55}
.sc-foot{display:flex; justify-content:flex-end; padding-top:8px}
.sc-end{background:var(--surface); color:var(--sc-accent); border:1.5px solid var(--sc-accent); border-radius:6px; font:inherit; font-weight:800; font-size:13px; padding:6px 14px; cursor:pointer}
.sc-end:hover{background:#F7EEFA}
body.wj .sc-root{font-family:var(--wj-font)}
@media (max-width:560px){
  .sc-root{right:10px; bottom:10px}
  .sc-root.is-open{left:8px; right:8px; top:8px; bottom:8px; align-items:stretch}
  .sc-root.is-open .sc-panel{width:auto; height:auto; flex:1}
  .sc-root.is-open .sc-launch{align-self:flex-end}
  .sc-bubble{max-width:250px}
  .sc-launch-txt{display:none}
  .sc-launch{padding:12px}
}
@media print{ .sc-root{display:none} }

/* ---------- 3. open or book a slot; PTM ---------- */
.wj-btn-purple{background:linear-gradient(160deg,#7B2D8E,#4A1259); color:#fff; box-shadow:0 1px 2px rgba(46,10,51,.3)}
.wj-btn-purple:hover{background:linear-gradient(160deg,#6B2380,#3B0A47)}
.cal-tip{font-size:12.5px; color:var(--ink-2); margin:8px 0 0}
body.wj .cal-col{cursor:copy}
body.wj .cal-col .cal-ev, body.wj .cal-col .cal-now{cursor:pointer}
.zoom-line{font-size:13.5px; margin-top:10px; padding:8px 10px; border-radius:4px; background:#F7EEFA; color:#4A1259; line-height:1.5}
.slot-time{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-bottom:6px}
.slot-time .slot-zone{grid-column:1 / -1; font-size:12.5px; margin:0}
.slot-field{margin:0}
.slot-field[hidden]{display:none}
.slot-when{font-size:15px; margin:0 0 10px}
.slot-choices{display:flex; flex-direction:column; gap:8px; margin:10px 0 12px}
.slot-choice{display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line-2); border-radius:6px; padding:10px 12px; cursor:pointer; background:#fff}
.slot-choice.is-on{border-color:#7B2D8E; background:#FBF6FD; box-shadow:0 0 0 3px rgba(123,45,142,.12)}
.slot-choice input{margin-top:3px; accent-color:#7B2D8E}
.slot-choice b{display:block; font-size:14.5px; color:#292929}
.slot-choice small{display:block; font-size:12.5px; color:#5E5E5E; line-height:1.45; margin-top:2px}
#dlg-slot .slot-choices + .slot-field, #dlg-slot .slot-field + .slot-field{margin-top:10px}
.slot-time .slot-field{margin-top:0 !important}
@media (max-width:520px){ .slot-time{grid-template-columns:1fr} }
.pill.pill-ptm, body.wj .pill.pill-ptm{background:#EEDDF5; color:#6B1E7A}
body.wj .cal-ev.st-ptm{border-color:#7B2D8E; background:#F1E4F7}
body.wj .cal-ev.st-ptm.is-done{border-color:#B98ACB; background:#F7F1FA}
body.wj .cal-key.st-ptm i{background:#F1E4F7; border-top-color:#7B2D8E}
.cal-ev.st-ptm{border-color:#7B2D8E; background:#F1E4F7; color:#4A1259}

/* ---------- 4. the console ---------- */
.sup-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; border-bottom:1px solid var(--line)}
.sup-tabs button{background:none; border:0; border-bottom:3px solid transparent; padding:8px 12px 10px; font:inherit; font-weight:700; color:var(--ink-2); cursor:pointer}
.sup-tabs button[aria-selected="true"]{color:var(--plum-3); border-bottom-color:var(--plum-3)}
.sup-bar{display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.sup-bar select{max-width:260px}
.sup-split{display:grid; grid-template-columns:minmax(240px, 340px) minmax(0, 1fr); gap:14px; align-items:start}
@media (max-width:860px){ .sup-split{grid-template-columns:1fr} }
.sup-list{display:flex; flex-direction:column; gap:6px; max-height:70vh; overflow:auto}
.sup-item{display:flex; flex-direction:column; gap:4px; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.sup-item:hover{border-color:var(--plum-3)}
.sup-item.is-on{border-color:var(--plum-3); box-shadow:0 0 0 3px var(--plum-soft)}
.sup-item.is-unread{box-shadow:inset 3px 0 0 #D9344F}
.sup-item-top{display:flex; justify-content:space-between; gap:8px; font-size:14px}
.sup-item-top time{font-size:12px; color:var(--ink-3); white-space:nowrap}
.sup-item-tags{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.sup-item-tags .pill{font-style:normal; font-size:11px; padding:2px 8px}
.sup-item-msg{font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sup-dot{width:9px; height:9px; border-radius:50%; background:#D9344F; display:inline-block}
.sup-convo{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; min-height:320px; display:flex; flex-direction:column; gap:10px}
.sup-pick{margin:auto}
.sup-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:10px}
.sup-assign{display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-2)}
.sup-assign select{padding:6px 8px; font-size:13.5px}
.sup-log{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; padding:4px 2px}
.sup-compose{display:flex; gap:8px; align-items:flex-end}
.sup-compose textarea{flex:1; min-height:60px}
.sup-decide{border:1.5px solid var(--plum-3); border-radius:10px; padding:12px; background:var(--plum-soft)}
.sup-decide-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:640px){ .sup-decide-row{grid-template-columns:1fr} }
.sup-req{margin-bottom:12px}
table.timings td, table.timings th{white-space:nowrap; font-size:13.5px}
table.timings td .pill{font-size:11.5px}
/* a short block (a PTM) puts the name on the same line: keep them apart */
body.wj .cal-ev.is-short .cal-ev-who::before{content:'\00b7'; margin:0 4px}

/* ============================================================
   23 SEP (e) — the three lines in the icon rail, for touch screens
   ============================================================
   drawer.js puts <html class="input-touch"> when a finger is used and
   <html class="input-mouse"> when a mouse or touchpad moves. The lines
   show only in touch mode, right below the logo. */
.rail .rail-menu{
  width:100%; height:46px; min-height:46px; flex:0 0 46px; border-radius:12px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  margin:0 0 4px;
}
.rail .rail-menu i{background:var(--gold); width:20px}
.rail .rail-menu:hover{background:rgba(255,255,255,.18)}
html.input-mouse .rail .rail-menu{display:none}
/* the mentor portal's white rail */
body.wj .rail .rail-menu{height:44px; min-height:44px; flex:0 0 44px; border-radius:4px; background:transparent; border:0}
body.wj .rail .rail-menu i{background:#333; width:24px; height:3px}
body.wj .rail .rail-menu:hover{background:#F0F7F8}

/* ============================================================
   23 SEP (f) — the family portal in the mentor portal's clothes
   ============================================================
   app.html now carries body class "wj", so everything in the
   23 SEP (B) section above (white icon rail with line icons, cream
   welcome bar, Mulish, flat white cards, purple titles, teal links)
   applies to it as it does to the mentor portal. What follows is only
   for the pieces the mentor portal doesn't have. */

/* the right-hand end of the welcome bar: which time the page is in */
body.portal-family.wj .wj-zone{margin-left:auto; font-size:14px; font-weight:700; color:#292929; white-space:nowrap}
body.portal-family.wj .wj-zone-label::after{content:' :'}
body.portal-family.wj .wj-zone b{font-weight:700}

/* the home: four cards, laid out as on the mentor's home */
.fam-home{grid-template-areas:"upc cls" "week book"}
.fam-home.is-no-week{grid-template-areas:"upc cls" "book book"}
.fam-upc{grid-area:upc} .fam-cls{grid-area:cls} .fam-week{grid-area:week} .fam-book{grid-area:book}
@media (max-width:900px){
  .fam-home, .fam-home.is-no-week{grid-template-columns:minmax(0, 1fr); grid-template-areas:"upc" "cls" "week" "book"}
}
.fam-wide{margin-bottom:16px}
#view > .fam-wide .grid{margin-top:2px}

/* Upcoming Class — the pager sits where the mentor's tag sits */
.fam-stepper{display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #E4E4E4; border-radius:999px; padding:3px 5px; flex:0 0 auto}
.fam-stepper .count{font-size:11.5px; font-weight:700; color:#5E5E5E; min-width:38px; text-align:center; font-variant-numeric:tabular-nums}
body.portal-family.wj .fam-stepper .step-btn-sm{color:var(--wj-teal); border-color:#D3D3D3}
body.portal-family.wj .fam-stepper .step-btn-sm:hover:not([disabled]){background:#E5F2F8; border-color:var(--wj-teal)}
.fam-upc .wj-start{margin-top:auto}
.fam-upc .wj-note{margin-bottom:14px}
.fam-upc-actions{display:flex; justify-content:center; margin-top:12px}
.fam-upc .wj-empty{margin-bottom:14px}

/* My Classes */
.fam-cls-head{align-items:center}
.fam-cls-head .wj-link{margin-right:auto; margin-left:10px}
.fam-cls-big{display:flex; align-items:baseline; gap:8px; margin:2px 0 10px}
.fam-cls-big b{font-size:40px; font-weight:700; color:var(--wj-title); line-height:1}
.fam-cls-big span{font-size:15px; color:#5E5E5E}
.fam-bar{height:8px; border-radius:999px; background:#EFE7F3; overflow:hidden; margin-bottom:16px}
.fam-bar i{display:block; height:100%; background:linear-gradient(90deg,#9A55AE,#6B1E7A); border-radius:999px}
.fam-low{margin:12px 0 0; font-size:13.5px; font-weight:700; color:#C9302C}
.fam-cls .wj-card-foot{margin-top:auto}
.fam-cls > .wj-kv, .fam-cls > .fam-low{margin-bottom:14px}

/* Weekly Schedule */
.fam-sub{font-size:13px; color:#5E5E5E; font-weight:600; white-space:nowrap; margin-top:4px}
body.portal-family.wj .fam-week .week-row{border-bottom-color:#EFEFEF; padding:11px 0}
body.portal-family.wj .fam-week .week-row strong{font-weight:700; color:#292929}

/* Ready for the next one? */
.fam-book .wj-muted{margin-bottom:16px}
.fam-book-row{margin-top:auto; gap:10px; flex-wrap:wrap}

/* the family's own pieces, in the mentor portal's colours */
body.portal-family.wj .credit-strip{background:#fff; color:#292929; border:1px solid #E6E6E6; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.05)}
body.portal-family.wj .credit-strip b{color:var(--wj-title); font-family:var(--wj-font)}
body.portal-family.wj .credit-strip .low{color:#C9302C}
body.portal-family.wj .credit-strip a{color:var(--wj-teal)}
body.portal-family.wj .klass .subject{font-family:var(--wj-font); font-size:18px; font-weight:700; color:var(--wj-title)}
body.portal-family.wj .klass .avatar{border-radius:4px; background:#E5F2F8; color:#1E8A9A}
body.portal-family.wj .countdown{border-radius:3px}

/* the "Ask a doubt" helper sat exactly under "Chat with us" (both bottom right,
   since 23 Sep c). It now sits just to the left of it, at the same height. */
.chat-fab{right:194px; bottom:18px; width:46px; height:46px; font-size:20px; border-width:1.5px}
@media (max-width:820px){ .chat-fab{bottom:18px} }
@media (max-width:560px){ .chat-fab{right:70px; bottom:10px} }
.chat-panel{bottom:76px}
@media (max-width:820px){ .chat-panel{bottom:76px} }

/* the Credits screen's "Classes remaining" panel: a white card, as the mentor's tiles are */
body.portal-family.wj .credits{background:#fff; color:#292929; border:1px solid #E6E6E6; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.08)}
body.portal-family.wj .credits::after{display:none}
body.portal-family.wj .credits .label{color:#5E5E5E; letter-spacing:.06em}
body.portal-family.wj .credits .big{font-family:var(--wj-font); font-weight:700; font-size:54px; color:var(--wj-title)}
body.portal-family.wj .credits .sub{color:#5E5E5E}
body.portal-family.wj .credits .bar{background:#EFE7F3}
body.portal-family.wj .credits .bar i{background:linear-gradient(90deg,#9A55AE,#6B1E7A)}
body.portal-family.wj .credits .warn{background:#FBE9E8; border-color:#F0B8B6; color:#A12622}

/* the welcome bar on a phone: the lines and "Welcome, …" share the first row, the time the second (as for mentors) */
@media (max-width:720px){
  body.portal-family .wj-top .wj-welcome{flex:1 1 0; min-width:0}
  body.portal-family .wj-zone{margin-left:0}
}

/* ============================================================
   23 SEP (g) — the grievance note bottom left; the student
   portal in the dark; Reschedule beside Cancel
   ============================================================ */

/* ---------- 1. "Raise your grievance", bottom left, as on the WHJR portal ----------
   A round purple exclamation mark with the note beside it (the logo is gone
   from here). "Chat with us" stays bottom right on its own. */
.sc-griev{position:fixed; left:16px; bottom:18px; z-index:60; display:flex; align-items:flex-end; gap:12px;
  font-family:var(--font-body); pointer-events:none}
.sc-griev > *{pointer-events:auto}
@media (min-width:900px){ .sc-griev{left:calc(var(--rail-w) + 16px)} }
.sc-griev-mark{
  width:54px; height:54px; flex:0 0 54px; border-radius:50%; cursor:pointer; padding:0;
  background:#fff; border:3px solid #7B2D8E; color:#7B2D8E;
  font:900 30px/1 Georgia, "Times New Roman", serif;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -4px rgba(46,10,51,.5);
}
.sc-griev-mark:hover{background:#F7EEFA}
.sc-griev-mark:focus-visible{outline:3px solid #F5C542; outline-offset:2px}
.sc-griev-mark span{transform:translateY(1px)}
.sc-griev .sc-bubble{padding:12px 34px 12px 16px}
/* the little point, now on the left, towards the mark */
.sc-griev .sc-bubble::after{right:auto; left:-9px; top:auto; bottom:19px; transform:none;
  border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:9px solid #4A1259; border-left:0}
body.wj .sc-griev{font-family:var(--wj-font)}
@media (max-width:560px){
  .sc-griev{left:10px; bottom:10px; gap:10px}
  .sc-griev-mark{width:46px; height:46px; flex-basis:46px; font-size:26px}
  .sc-griev .sc-bubble::after{bottom:15px}
  .sc-griev .sc-bubble{max-width:min(230px, calc(100vw - 200px))}   /* clear of the two round buttons on the right */
}
@media print{ .sc-griev{display:none} }


/* ---------- 2. Reschedule beside Cancel ---------- */
.fam-upc-actions{gap:10px; flex-wrap:wrap}
.fam-upc-actions .btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------- 3. the switch, top right of the welcome bar ---------- */
body.portal-family #wj-zone{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; justify-content:flex-end}
.wj-mode{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  background:#fff; color:#4A1259; border:1px solid #D9C9E0; border-radius:999px;
  font:inherit; font-size:13px; font-weight:700; padding:5px 12px 5px 9px; line-height:1.2;
}
.wj-mode:hover{background:#F7EEFA}
.wj-mode-ico{display:inline-flex}
.wj-mode-ico svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:720px){ body.portal-family #wj-zone{justify-content:space-between; width:100%} }

/* ---------- 4. the student portal in the dark ----------
   On when the device is in dark mode (or the switch says so): <html data-theme="dark">,
   set by assets/theme-mode.js. First the colours everything reads, then the dark
   partner of every fixed colour in the mentor look (generated below). The monthly
   report card stays a white sheet, like a printed report. */
:root[data-theme="dark"] body.portal-family.wj{
  color-scheme:dark;
  --cream:#16101B; --cream-2:#1E1624; --surface:#231A2A; --surface-2:#2A2031;
  --plum:#EDE6F0; --plum-2:#6CC9D6; --plum-3:#6CC9D6; --plum-soft:#1C343A;
  --ink:#EDE6F0; --ink-2:#BDB1C4; --ink-3:#978B9E; --line:#3A2D42; --line-2:#4A3B53;
  --gold:#B98ACB; --gold-2:#C99BDA; --gold-deep:#D9A6E6; --gold-soft:#33203D;
  --green:#7FD6A3; --green-soft:#17301F; --crimson:#F08A86; --crimson-soft:#3A1A1C;
  --amber:#D9A6E6; --amber-soft:#33203D;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow:0 8px 28px rgba(0,0,0,.55);
  --wj-bg:#1C1522; --wj-card:#231A2A; --wj-line:#3A2D42; --wj-line-2:#4A3B53;
  --wj-ink:#EDE6F0; --wj-ink-2:#BDB1C4; --wj-ink-3:#978B9E;
  --wj-teal:#6CC9D6; --wj-teal-2:#10849A; --wj-teal-soft:#1C343A; --wj-row:#1F3A41; --wj-row-grey:#2A2031;
  --wj-title:#D9A6E6; --wj-page:#16101B; --wj-bar:#221829;
  --st-pbook-bg:#1C343A; --st-pbook-fg:#6CC9D6; --st-pbook-bd:#2989A2;
  background:#16101B; color:#EDE6F0;
}
/* ---------- 23 SEP (g) — DARK, GENERATED ----------
   Made by reading every colour in the mentor look above (sections B to f),
   swapping each light colour for its dark partner, and scoping it to the
   student portal in dark mode (work/gen_dark.py). Colours only — sizes and
   layout come from the rules above. The hand-made dark touches follow it. */
:root[data-theme="dark"] body.portal-family.wj h3{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-top{border-bottom:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .wj-welcome{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-top .tz-pick-label{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-top .tz-pick select{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-top .tz-pick-host.is-away .tz-pick{background:#33203D}
:root[data-theme="dark"] body.portal-family.wj .menu-btn i{background:#D8CCE0}
:root[data-theme="dark"] body.portal-family.wj .menu-btn:hover{background:#3A2D42}
:root[data-theme="dark"] body.portal-family.wj .rail{background:#231A2A; border-right:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .rail a[data-route],
:root[data-theme="dark"] body.portal-family.wj .rail-out{color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .rail a[data-route]:hover,
:root[data-theme="dark"] body.portal-family.wj .rail-out:hover{background:#2A2031}
:root[data-theme="dark"] body.portal-family.wj .rail a[aria-current="page"]{background:#3A2446; color:#7FD3DE}
:root[data-theme="dark"] body.portal-family.wj .rail .dot{border:2px solid #231A2A}
:root[data-theme="dark"] body.portal-family.wj .rail-out{border-top:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .drawer{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .drawer .brand span{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .drawer-profile{background:#2A2031; border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .drawer-profile .pic{background:#1C343A; color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .drawer-profile .who b{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .drawer-profile .who span{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .drawer a.nav{color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .drawer a.nav:hover{background:#2A2031}
:root[data-theme="dark"] body.portal-family.wj .drawer a.nav[aria-current="page"]{background:#3A2446; color:#7FD3DE}
:root[data-theme="dark"] body.portal-family.wj .drawer .signout{border-top:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .card{border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .pill{background:#1C343A; color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .pill-gold,
:root[data-theme="dark"] body.portal-family.wj .pill-amber{background:#3A2446; color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .pill-green{background:#17301F}
:root[data-theme="dark"] body.portal-family.wj .pill-crimson{background:#3A1A1C; color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .pill-quiet{background:#1C1522; color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .btn-outline{background:#231A2A; color:#6CC9D6; border:1.5px solid #4FB3C1}
:root[data-theme="dark"] body.portal-family.wj .btn-outline:hover:not([disabled]){background:#1C343A}
:root[data-theme="dark"] body.portal-family.wj .btn-ghost{background:#231A2A; color:#BDB1C4; border:1.5px solid #4A3B53}
:root[data-theme="dark"] body.portal-family.wj .btn-ghost:hover:not([disabled]){background:#2A2031; color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .btn-danger{background:#231A2A; color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .btn-link{color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj label.field > span{color:#C9BECF}
:root[data-theme="dark"] body.portal-family.wj input:focus,
:root[data-theme="dark"] body.portal-family.wj select:focus,
:root[data-theme="dark"] body.portal-family.wj textarea:focus{border-color:#4FB3C1}
:root[data-theme="dark"] body.portal-family.wj .empty{background:#231A2A; border:1px dashed #4A3B53}
:root[data-theme="dark"] body.portal-family.wj .tz-away-note{color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .wj-card{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .wj-muted{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-none{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-empty{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .is-green{color:#8BD17A}
:root[data-theme="dark"] body.portal-family.wj .is-orange{color:#CFA0E0}
:root[data-theme="dark"] body.portal-family.wj .is-red{color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .wj-card-foot{border-top:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .wj-card-foot:hover{background:#2A2031}
:root[data-theme="dark"] body.portal-family.wj .wj-alert{border:1px solid #8A7630; background:#231A2A; color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj a.wj-alert{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-tag{background:#3A2446; color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .wj-upc-when{color:#E2D9E7}
:root[data-theme="dark"] body.portal-family.wj .wj-upc-who{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-note{background:#33203D; color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-upc-hint{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-upc-hint.is-waiting{color:#7FD6A3}
:root[data-theme="dark"] body.portal-family.wj .wj-perf h2{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-toggle{border:1px solid #2F5A44}
:root[data-theme="dark"] body.portal-family.wj .wj-toggle button,
:root[data-theme="dark"] body.portal-family.wj .wj-toggle a{background:#3A3040; color:#978B9E}
:root[data-theme="dark"] body.portal-family.wj .wj-toggle a{color:#978B9E}
:root[data-theme="dark"] body.portal-family.wj .wj-perf-line{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-perf-grid > div > span{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-perf-tc > span{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-perf-conv > div{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-perf-note{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-tips{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-trio > div > span{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-trio b{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-kv li{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .wj-kv b{color:#CFA0E0}
:root[data-theme="dark"] body.portal-family.wj .wj-banner-pic{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .wj-banner-btn{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .wj-banner-dots button[aria-pressed="true"]{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .wj-btn-ghost{background:#231A2A; color:#6CC9D6; border:1px solid #4FB3C1}
:root[data-theme="dark"] body.portal-family.wj a.wj-btn-ghost{color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .wj-btn-ghost:hover{background:#2A2031}
:root[data-theme="dark"] body.portal-family.wj .wj-count{background:#231A2A; color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .wj-row{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-row.is-booked{background:#1F3A41}
:root[data-theme="dark"] body.portal-family.wj .wj-row.is-grey{background:#2A2031}
:root[data-theme="dark"] body.portal-family.wj .wj-row-tz{color:#D5CBDB}
:root[data-theme="dark"] body.portal-family.wj .wj-row-status.is-orange{color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .wj-row-status.is-red{color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .wj-row-status.is-green{color:#7FD6A3}
:root[data-theme="dark"] body.portal-family.wj .wj-comp-pic{border:2px solid #231A2A}
:root[data-theme="dark"] body.portal-family.wj .wj-tabs{border-bottom:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .wj-notif-item p{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-notif-meta{color:#978B9E}
:root[data-theme="dark"] body.portal-family.wj .wj-progress b{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-rep-av{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .wj-row-name small{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .rf-row{border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .rf-top label b{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .rf-top label small{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .rf-score i{color:#978B9E}
:root[data-theme="dark"] body.portal-family.wj .cal-bar{background:#2A2031; border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .cal-wrap{border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .cal-corner{background:#231A2A; border-color:#3A2D42; color:#978B9E}
:root[data-theme="dark"] body.portal-family.wj .cal-dayhead{background:#231A2A; border-color:#3A2D42}
:root[data-theme="dark"] body.portal-family.wj .cal-dayhead span{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .cal-dayhead b{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .cal-dayhead.is-today{background:#2E1D37}
:root[data-theme="dark"] body.portal-family.wj .cal-dayhead.is-today b,
:root[data-theme="dark"] body.portal-family.wj .cal-dayhead.is-today span{color:#CFA0E0}
:root[data-theme="dark"] body.portal-family.wj .cal-times{background:#231A2A; border-color:#3A2D42}
:root[data-theme="dark"] body.portal-family.wj .cal-col{border-color:#3A2D42}
:root[data-theme="dark"] body.portal-family.wj .cal-col.is-today{background-color:#211725}
:root[data-theme="dark"] body.portal-family.wj .cal-ev-who.is-struck{color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .cal-ev.st-trial-booked,
:root[data-theme="dark"] body.portal-family.wj .cal-ev.st-paid-booked{background:#1C343A}
:root[data-theme="dark"] body.portal-family.wj .cal-ev.is-due{background:#33203D}
:root[data-theme="dark"] body.portal-family.wj .cal-key{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .cal-key.st-trial-booked i,
:root[data-theme="dark"] body.portal-family.wj .cal-key.st-paid-booked i{background:#1C343A}
:root[data-theme="dark"] body.portal-family.wj .info-rows > div{background:#2A2031}
:root[data-theme="dark"] body.portal-family.wj .earn-tile{border:1px solid #3A2D42; background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .earn-tile b{color:#CFA0E0}
:root[data-theme="dark"] body.portal-family.wj .earn-tile-label{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .earn-tile.tone-plum{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj table.earn thead th{background:#1C343A; color:#7FD3DE}
:root[data-theme="dark"] body.portal-family.wj table.earn thead th.sub{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj table.earn .earn-grp{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj table.earn .earn-rowtotal,
:root[data-theme="dark"] body.portal-family.wj table.earn .earn-total-head{background:#33203D}
:root[data-theme="dark"] body.portal-family.wj table.earn tfoot th,
:root[data-theme="dark"] body.portal-family.wj table.earn tfoot td{background:#33203D}
:root[data-theme="dark"] body.portal-family.wj .sc-badge{border:2px solid #231A2A}
:root[data-theme="dark"] body.portal-family.wj .sc-bubble-pic{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .sc-tag.is-approved{background:#17301F}
:root[data-theme="dark"] body.portal-family.wj .sc-tag.is-declined{background:#3A1A1C; color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .sc-note-error{background:#3A1A1C; color:#F4A3A0}
:root[data-theme="dark"] body.portal-family.wj .sc-end:hover{background:#33203D}
:root[data-theme="dark"] body.portal-family.wj .zoom-line{background:#33203D; color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .slot-choice{background:#231A2A}
:root[data-theme="dark"] body.portal-family.wj .slot-choice b{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .slot-choice small{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .pill.pill-ptm,
:root[data-theme="dark"] body.portal-family.wj .pill.pill-ptm{background:#3A2446; color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .cal-ev.st-ptm{background:#3A2446}
:root[data-theme="dark"] body.portal-family.wj .cal-key.st-ptm i{background:#3A2446}
:root[data-theme="dark"] body.portal-family.wj .cal-ev.st-ptm{background:#3A2446; color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .rail .rail-menu i{background:#D8CCE0}
:root[data-theme="dark"] body.portal-family.wj .rail .rail-menu:hover{background:#2A2031}
:root[data-theme="dark"] body.portal-family.wj .wj-zone{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .fam-stepper{background:#231A2A; border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .fam-stepper .count{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .fam-stepper .step-btn-sm{border-color:#4A3B53}
:root[data-theme="dark"] body.portal-family.wj .fam-stepper .step-btn-sm:hover:not([disabled]){background:#1C343A}
:root[data-theme="dark"] body.portal-family.wj .fam-cls-big span{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .fam-bar{background:#3A2D42}
:root[data-theme="dark"] body.portal-family.wj .fam-low{color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .fam-sub{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .fam-week .week-row{border-bottom-color:#3A2D42}
:root[data-theme="dark"] body.portal-family.wj .fam-week .week-row strong{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .credit-strip{background:#231A2A; color:#EDE6F0; border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .credit-strip .low{color:#F08A86}
:root[data-theme="dark"] body.portal-family.wj .klass .avatar{background:#1C343A; color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .credits{background:#231A2A; color:#EDE6F0; border:1px solid #3A2D42}
:root[data-theme="dark"] body.portal-family.wj .credits .label{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .credits .sub{color:#BDB1C4}
:root[data-theme="dark"] body.portal-family.wj .credits .bar{background:#3A2D42}
:root[data-theme="dark"] body.portal-family.wj .credits .warn{background:#3A1A1C; border-color:#6A3432; color:#F4A3A0}
:root[data-theme="dark"] body.portal-family.wj .sc-griev-mark{background:#231A2A; color:#CFA0E0}
:root[data-theme="dark"] body.portal-family.wj .sc-griev-mark:hover{background:#33203D}
:root[data-theme="dark"] body.portal-family.wj .wj-mode{background:#231A2A; color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .wj-mode:hover{background:#33203D}

/* hand-made dark touches (after the generated rules, so they win) */
:root[data-theme="dark"] body.portal-family.wj .wj-card,
:root[data-theme="dark"] body.portal-family.wj .card{background:#231A2A; box-shadow:0 1px 3px rgba(0,0,0,.45)}
:root[data-theme="dark"] body.portal-family.wj .wj-mode{background:#2A2031; color:#F5C542; border-color:#4A3B53}
:root[data-theme="dark"] body.portal-family.wj .wj-mode:hover{background:#33203D}
/* the logo mark keeps a light tile behind it, so its purple and gold still read */
:root[data-theme="dark"] body.portal-family.wj .rail-brand .rail-mark,
:root[data-theme="dark"] body.portal-family.wj .drawer .brand img.logo.logo-mark{background:#F7EEFA; border-radius:10px; padding:3px}
:root[data-theme="dark"] body.portal-family.wj .drawer .brand .wm{color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .wj-start[aria-disabled="true"]{background:#24362C; color:#7FA38C !important; box-shadow:none}
:root[data-theme="dark"] body.portal-family.wj input,
:root[data-theme="dark"] body.portal-family.wj select:not(.rc-pick),
:root[data-theme="dark"] body.portal-family.wj textarea{background:#1C1522; color:#EDE6F0; border-color:#4A3B53}
:root[data-theme="dark"] body.portal-family.wj .sc-griev-mark{background:#231A2A; border-color:#B98ACB; color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .rc-family{background:#1C1522}
/* the monthly report card stays a white sheet: put its own light colours back inside it */
:root[data-theme="dark"] body.portal-family.wj .rc-sheet{
  --wj-teal:#1E8A9A; --wj-teal-2:#10849A; --wj-title:#6B1E7A; --ink:#292929; --ink-2:#5E5E5E; --line:#E4E4E4;
  color:#333; color-scheme:light;
}
:root[data-theme="dark"] body.portal-family.wj .rc-sheet :is(h1, h2, h3, h4){color:#333}
:root[data-theme="dark"] body.portal-family.wj .rc-sheet a{color:#1E8A9A}
:root[data-theme="dark"] body.portal-family.wj .rc-back{color:#6CC9D6}


/* ============================================================
   3 OCT — acting for someone · subject-wise reports · Tasks ·
           mentor grades · handing over a team member's work
   ============================================================ */

/* ---------- the banner when Himanshi (or the team) can act in this portal ---------- */
body.is-acting .banner-impersonate{background:linear-gradient(90deg, #4A1259, #7B2D8E); color:#fff}
body.is-acting .banner-impersonate .btn-ghost{background:#fff; color:#4A1259; border:1.5px solid #fff; font-weight:700}
body.is-acting .banner-impersonate .btn-ghost:hover{background:#F5C542; border-color:#F5C542; color:#2E0A33}

/* ---------- small helpers ---------- */
.field-hint{display:block; font-size:12.5px; color:#6F6F6F; margin-top:4px; line-height:1.45; font-weight:400}

/* ---------- the monthly report form, subject by subject ---------- */
.rf-section{margin:18px 0 10px}
.rf-section:first-of-type{margin-top:12px}
.rf-section h3{font-size:15.5px; font-weight:700; color:#4A1259; margin:0}
.rf-section p{font-size:12.5px; color:#6F6F6F; margin:2px 0 0}
.rf-grid.rf-grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.rf-grid-3 .rf-top{flex-direction:column; gap:8px}
body.wj dialog .rf-section h3{font-size:15.5px; font-weight:700; color:#4A1259; margin:0}
.rf-parts{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
.rf-parts .rf-part{margin:0}
.rf-parts .rf-part:first-child{grid-column:1 / -1}
.rf-parts .rf-part > span{font-size:13.5px; font-weight:700; color:#333}
body.wj .rf-parts textarea.rf-note{min-height:74px}
@media (max-width:720px){
  .rf-grid.rf-grid-3{grid-template-columns:1fr}
  .rf-parts{grid-template-columns:1fr}
}

/* ---------- the report card: the written parts ---------- */
.rc-parts{padding:26px 24px 24px; margin-bottom:22px}
.rc .rc-parts h3{margin:0 0 16px}
.rc-parts-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 22px}
.rc-part{border-left:4px solid #D9C2E3; background:#FBF8FC; border-radius:0 4px 4px 0; padding:12px 14px}
.rc-part h4{font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#6B1E7A; margin:0 0 6px}
.rc-part p{font-size:14.5px; line-height:1.6; color:#333; margin:0; white-space:pre-line; overflow-wrap:anywhere}
.rc-part-topics_covered{grid-column:1 / -1; border-left-color:#86BED9; background:#F5FAFD}
.rc-part-topics_covered h4{color:#1F6E9C}
.rc-part-strengths{border-left-color:#74CEAA; background:#F4FBF8}
.rc-part-strengths h4{color:#23805B}
.rc-part-improve{border-left-color:#F0ADBE; background:#FDF6F8}
.rc-part-improve h4{color:#B4435F}
.rc-part-next_plan{border-left-color:#FDDA72; background:#FFFBEF}
.rc-part-next_plan h4{color:#8A6A00}
.rc-part-home_support{border-left-color:#C9A7D8; background:#FAF5FC}
@media (max-width:720px){ .rc-parts-grid{grid-template-columns:1fr} .rc-parts{padding:20px 16px} }

/* ---------- Tasks ---------- */
.wj-tasks .wj-mini-head, .wj-tasklist .wj-mini-head{margin-bottom:12px}
.tk-wrap{overflow-x:auto; margin:0 -4px; padding:0 4px}
table.tk{width:100%; min-width:940px; border-collapse:separate; border-spacing:0 8px; background:none}
table.tk thead th{
  font-size:12.5px; font-weight:700; color:#5E5E5E; text-align:left; padding:0 10px 2px; white-space:nowrap;
  background:none; border:0; text-transform:none; letter-spacing:0;
}
table.tk tbody td{
  background:#F7FAFB; padding:10px; vertical-align:middle;
  border-top:1px solid #E6EEF0; border-bottom:1px solid #E6EEF0;
}
table.tk tbody td:first-child{border-left:1px solid #E6EEF0; border-radius:4px 0 0 4px}
table.tk tbody td:last-child{border-right:1px solid #E6EEF0; border-radius:0 4px 4px 0}
.tk-who{display:flex; align-items:center; gap:10px; min-width:170px}
.tk-who b{display:block; font-size:14.5px; color:#292929; line-height:1.25}
.tk-who small{display:block; font-size:11.5px; color:#6F6F6F; letter-spacing:.02em; margin-top:2px}
.tk-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  border:1px solid #E3E3E3; border-radius:999px; padding:4px 11px 4px 5px;
  font:inherit; font-size:12.5px; font-weight:700; line-height:1.2; white-space:nowrap;
  background:#fff; color:#5E5E5E; cursor:pointer; text-align:left;
}
span.tk-chip{cursor:default}
.tk-chip i{
  font-style:normal; width:18px; height:18px; flex:0 0 18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; background:#C4C4C4; line-height:1;
}
.tk-chip > span{overflow:hidden; text-overflow:ellipsis}
.tk-chip > span:only-child{padding-left:6px}
.tk-chip.is-done{border-color:#BFE6D0; background:#F1FAF5; color:#23704A}
.tk-chip.is-done i{background:#3FB577}
.tk-chip.is-due{border-color:#DCC3E6; background:#FBF6FD; color:#6B1E7A}
.tk-chip.is-due i{background:#7B2D8E}
.tk-chip.is-part{border-color:#F0DC9E; background:#FFFAEB; color:#7A5D00}
.tk-chip.is-part i{background:#D9A400}
.tk-chip.is-na{border-color:#E6E6E6; background:#FAFAFA; color:#8A8A8A}
button.tk-chip:hover:not(:disabled){box-shadow:0 1px 4px rgba(46,10,51,.18)}
button.tk-chip:focus-visible{outline:2px solid #7B2D8E; outline-offset:2px}
button.tk-chip:disabled{cursor:default; opacity:.75}
.tk-key{display:flex; flex-wrap:wrap; gap:8px 10px; margin:12px 0 0; font-size:12.5px}
.tk-form-row{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px 12px}
.tk-form-row .field{margin:0 0 14px}
#dlg-task textarea{min-height:0; width:100%}
#dlg-task .field > span{font-weight:700}
.tk-ses{border:1px solid #E6E6E6; border-radius:4px; padding:12px 14px; background:#FAFBFB; margin-bottom:10px}
.tk-ses-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.tk-ses-head b{font-size:14.5px; color:#292929}
.tk-ses-log{margin:0; font-size:14.5px; line-height:1.55; color:#333; white-space:pre-line; overflow-wrap:anywhere}
.tk-ses-meta{font-size:13px !important; margin-top:6px !important}
.tk-ses p.wj-muted{font-size:13.5px}
.tk-ses-form{margin-top:12px; padding-top:12px; border-top:1px dashed #D9D9D9}
.tk-ses-form .field{margin-bottom:12px}
/* the home card */
.tk-mini{display:flex; flex-direction:column; gap:8px}
.tk-mini-row{
  display:grid; grid-template-columns:minmax(0, 1fr) auto 64px; align-items:center; gap:12px;
  padding:9px 12px; border:1px solid #E6EEF0; border-radius:4px; background:#F7FAFB; text-decoration:none;
}
body.wj a.tk-mini-row{color:#292929}
.tk-mini-row:hover{background:#F0F6F8}
.tk-mini-name{min-width:0}
.tk-mini-name b{display:block; font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk-mini-name small{display:block; font-size:11.5px; color:#6F6F6F; text-transform:uppercase; letter-spacing:.03em}
.tk-dots{display:inline-flex; gap:5px}
.tk-dots i{
  font-style:normal; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; background:#D0D0D0;
}
.tk-dots i.is-done{background:#3FB577}
.tk-dots i.is-due{background:#7B2D8E}
.tk-dots i.is-part{background:#D9A400}
.tk-mini-count{font-size:13px; font-weight:700; color:#5E5E5E; text-align:right; white-space:nowrap}
@media (max-width:900px){
  .tk-wrap{overflow:visible; margin:0; padding:0}
  table.tk{min-width:0; border-spacing:0; display:block}
  table.tk thead{display:none}
  table.tk tbody{display:flex; flex-direction:column; gap:12px}
  table.tk tbody tr{display:block; border:1px solid #E6EEF0; border-radius:4px; background:#F7FAFB; padding:12px}
  table.tk tbody td{display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:0 !important; border-radius:0 !important; padding:5px 0}
  table.tk tbody td[data-label]::before{content:attr(data-label); font-size:13px; font-weight:700; color:#5E5E5E; flex:0 0 auto}
  table.tk tbody td.tk-who-cell{padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid #E6EEF0 !important}
  .tk-form-row{grid-template-columns:1fr 1fr}
  .tk-form-row .field:first-child{grid-column:1 / -1}
}
@media (max-width:520px){
  .tk-mini-row{grid-template-columns:minmax(0, 1fr) auto}
  .tk-mini-count{display:none}
  .tk-dots i{width:17px; height:17px; font-size:10px}
}

/* ---------- the console: grades a mentor teaches, per subject ---------- */
.sg-list{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.sg-row{border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; background:var(--surface)}
.sg-row.is-on{border-color:var(--plum-3, #7B2D8E); background:var(--plum-soft, #FBF6FD)}
.sg-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sg-head label{display:inline-flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; margin:0}
.sg-head input[type=checkbox]{width:17px; height:17px; accent-color:#7B2D8E}
.sg-sum{margin-left:auto; font-size:12.5px; color:var(--ink-2)}
.sg-grades{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px}
.sg-grades[hidden]{display:none}
.sg-g{
  min-width:34px; height:32px; padding:0 8px; border-radius:8px; border:1.5px solid var(--line-2);
  background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
.sg-g[aria-pressed="true"]{background:#7B2D8E; border-color:#7B2D8E; color:#fff}
.sg-g:focus-visible{outline:2px solid #F5C542; outline-offset:2px}
.sg-band{border:0; background:none; color:var(--plum-3, #7B2D8E); font:inherit; font-size:12.5px; font-weight:700; text-decoration:underline; cursor:pointer; padding:4px 6px}
.sg-sep{width:1px; height:20px; background:var(--line-2); margin:0 4px}
.sg-tag{display:inline-block; font-size:11.5px; font-weight:700; color:var(--ink-2); margin-left:4px}

/* ---------- the console: handing over a team member's work ---------- */
.ho-intro{margin:0 0 14px}
.ho-group{border:1px solid var(--line-2); border-radius:12px; padding:14px; margin-bottom:12px; background:var(--surface)}
.ho-group h3{font-size:16px; margin:0 0 2px}
.ho-group > p{font-size:13.5px; color:var(--ink-2); margin:0 0 10px}
.ho-all{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.ho-all span{font-weight:700; font-size:14px}
.ho-all select, .ho-item select{max-width:260px; min-width:180px; flex:1 1 200px}
.ho-list{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.ho-list[hidden]{display:none}
.ho-item{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; border-radius:8px; background:var(--surface-2)}
.ho-item b{flex:1 1 160px; font-size:14.5px}
.ho-item small{display:block; font-weight:400; font-size:12.5px; color:var(--ink-2)}
.ho-none{font-size:14px; color:var(--ink-2); margin:0}

/* ============================================================
   6 OCT — the writing help under each box a parent will read,
   classes left on My students, and Start a PTM
   ============================================================ */

/* ---------- Fix grammar / Improve writing ---------- */
.ai-row{margin:-8px 0 14px}
.rf-row .ai-row{margin:6px 0 0}
.rf-part-wrap .ai-row{margin:6px 0 0}
.tk-ses-form .ai-row{margin:-8px 0 12px}
.ans-wrap .ai-row{margin:8px 0 0}
.ai-btns{display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap}
.ai-btn{
  display:inline-flex; align-items:center; gap:5px; border:1px solid #DCC3E6; background:#FBF6FD; color:#6B1E7A;
  font:inherit; font-size:12.5px; font-weight:700; line-height:1; padding:6px 10px; border-radius:999px; cursor:pointer;
}
.ai-btn:hover{background:#F1E4F7; border-color:#B98ACB}
.ai-btn:focus-visible{outline:2px solid #F5C542; outline-offset:2px}
.ai-btn:disabled{opacity:.55; cursor:progress}
.ai-btn svg{flex:0 0 auto}
.ai-status{font-size:12.5px; color:#6F6F6F; line-height:1.35}
.ai-status.is-ok{color:#23704A; font-weight:700}
.ai-status.is-warn{color:#9A5B00}
.ai-status .ai-undo{font-size:12.5px; margin-left:2px}
.ai-row.is-busy .ai-status::before{
  content:''; display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px;
  border:2px solid #DCC3E6; border-top-color:#7B2D8E; border-radius:50%; animation:aiSpin .8s linear infinite;
}
@keyframes aiSpin{ to{ transform:rotate(360deg) } }
.ai-sug{margin-top:8px; border:1px solid #DCC3E6; border-left:4px solid #7B2D8E; border-radius:4px; background:#FDFAFE; padding:10px 12px}
.ai-sug[hidden]{display:none}
.ai-sug-text{font-size:14px; line-height:1.5; color:#292929; margin:0 0 10px; white-space:pre-wrap; overflow-wrap:anywhere}
.ai-sug-actions{display:flex; gap:8px; flex-wrap:wrap}
.ai-sug mark, .ai-review mark{background:#FFF1B8; color:inherit; padding:0 2px; border-radius:2px}

/* the check that runs when Save is pressed */
.ai-checking{display:flex; align-items:center; gap:10px; font-size:14px; color:#4A1259; background:#F7EEFA; border-radius:4px; padding:10px 12px; margin:10px 0}
.ai-checking i{
  flex:0 0 auto; width:14px; height:14px; border:2px solid #DCC3E6; border-top-color:#7B2D8E; border-radius:50%;
  animation:aiSpin .8s linear infinite;
}
.ai-review{border:1.5px solid #7B2D8E; border-radius:6px; background:#FDFAFE; padding:14px; margin:12px 0}
.ai-review h4{font-size:15.5px; font-weight:700; color:#4A1259; margin:0 0 2px}
body.wj dialog .ai-review h4{font-size:15.5px; font-weight:700; color:#4A1259; margin:0 0 2px}
.ai-review-note{font-size:12.5px; color:#6F6F6F; margin:0 0 10px}
.ai-review-item{border-top:1px solid #EADDF0; padding:10px 0}
.ai-review-pick{display:flex; align-items:center; gap:8px; margin:0 0 6px; cursor:pointer}
.ai-review-pick input{width:17px; height:17px; accent-color:#7B2D8E; flex:0 0 auto}
.ai-review-pick b{font-size:13.5px; color:#333}
.ai-was, .ai-now{font-size:14px; line-height:1.5; margin:0 0 4px; padding-left:25px; white-space:pre-wrap; overflow-wrap:anywhere}
.ai-was{color:#6F6F6F}
.ai-now{color:#292929}
.ai-was span, .ai-now span{display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A8A8A}
.ai-now span{color:#7B2D8E}
.ai-review-actions{display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid #EADDF0; padding-top:12px; margin-top:2px}

/* the report form: each written part with its buttons, in the same two columns as before */
.rf-parts .rf-part-wrap{min-width:0}
.rf-parts .rf-part-wrap:first-child{grid-column:1 / -1}
.rf-parts .rf-part-wrap .rf-part{margin:0}
.rf-parts .rf-part-wrap .rf-part > span{font-size:13.5px; font-weight:700; color:#333}

/* ---------- My students: classes left ---------- */
.cls-left{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px 12px; flex-wrap:wrap;
  border-radius:4px; padding:8px 10px; margin:0 0 12px; background:#F1FAF5; border-left:4px solid #3FB577;
}
.cls-left-n{font-size:14px; color:#23704A; display:inline-flex; align-items:baseline; gap:4px}
.cls-left-n b{font-size:19px; font-weight:800; margin-right:1px}
.cls-left-n .wj-i{align-self:center; margin-left:4px}
.cls-left-sub{font-size:12.5px; color:#5E5E5E}
.cls-left.is-low{background:#FFF8E6; border-left-color:#D9A400}
.cls-left.is-low .cls-left-n{color:#8A6500}
.cls-left.is-none{background:#FDF0EF; border-left-color:#D9534F}
.cls-left.is-none .cls-left-n{color:#B0332F}
.cls-low-note{
  border:1px solid #E9D08A; background:#FFFBEF; border-radius:4px; padding:10px 14px; margin:0 0 16px;
  font-size:14px; line-height:1.5; color:#333;
}

/* ---------- Start a PTM ---------- */
.slot-time[hidden]{display:none}   /* choosing "Start a PTM now" hides the day and time: it starts now */
.wj-btn-ptm{background:#fff; color:#6B1E7A; border:1.5px solid #7B2D8E}
.wj-btn-ptm:hover{background:#FBF6FD}
.ptm-lead{font-size:15.5px; font-weight:700; color:#4A1259; margin:0 0 8px}
.ptm-steps{margin:0 0 10px 20px; padding:0; font-size:14px; line-height:1.5; color:#333}
.ptm-steps li{margin:0 0 5px}
.ptm-note{margin:0 0 14px; font-size:13px}
.ptm-live{display:flex; align-items:center; gap:10px; background:#F7EEFA; border-radius:6px; padding:12px 14px; font-size:15px; color:#333}
.ptm-live strong{color:#4A1259}
.ptm-live.is-over{background:#F1FAF5}
.ptm-live.is-over strong{color:#23704A}
.ptm-clock{font-weight:700}
.ptm-dot{
  display:inline-block; flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:#D9534F;
  box-shadow:0 0 0 0 rgba(217,83,79,.5); animation:ptmPulse 1.6s ease-out infinite;
}
.ptm-live.is-over .ptm-dot{background:#3FB577; animation:none; box-shadow:none}
@keyframes ptmPulse{ 0%{box-shadow:0 0 0 0 rgba(217,83,79,.5)} 70%{box-shadow:0 0 0 8px rgba(217,83,79,0)} 100%{box-shadow:0 0 0 0 rgba(217,83,79,0)} }
@media (prefers-reduced-motion:reduce){ .ptm-dot, .ai-checking i, .ai-row.is-busy .ai-status::before{animation:none} }

/* the bar at the top of the home while a PTM runs (mentor and family) */
.wj-alert.wj-ptm-bar{border-color:#B98ACB; background:#FBF6FD}
.wj-ptm-bar > span:first-child{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap}
.wj-ptm-bar-go{display:inline-flex; gap:8px; flex-wrap:wrap}
.wj-ptm-bar a.wj-btn-purple, body.wj .wj-ptm-bar a.wj-btn-purple{color:#fff; text-decoration:none}
.wj-upc-end{display:block; width:100%; margin-top:8px; text-align:center}

/* My calendar: a PTM that is running */
body.wj .cal-ev.st-ptm.is-live, .cal-ev.st-ptm.is-live{border-color:#D9534F; background:#FBE9F0; box-shadow:0 0 0 2px rgba(217,83,79,.18)}

:root[data-theme="dark"] body.portal-family.wj .wj-alert.wj-ptm-bar{border-color:#8E3FA8; background:#33203D}


/* ======================================================================================
   7 OCT — everything added on 7 October. Nothing above this line was changed.
     1. the mentor home: Mini Calendar + Compliments on the left, Notifications beside them
     2. Confirm classes: confirmed from Zoom
     3. the report form: empty boxes in red
     4. Improve writing: three versions to choose from
     5. Tasks: attach the study plan (a link or a file); a session log is written once
     6. the report card: where points and badges come from; a standing when alone
     7. the console: removing a mentor; class outcomes on Class timings
   ====================================================================================== */

/* ---------- 1. the mentor home ---------- */
.wj-split{
  display:grid; gap:16px; margin-bottom:16px; align-items:stretch;
  grid-template-columns:minmax(0, 1.75fr) minmax(280px, 1fr);
}
.wj-split-main{display:flex; flex-direction:column; gap:16px; min-width:0}
.wj-split-side{display:flex; min-width:0}
.wj-split-side > .wj-card{flex:1 1 auto; width:100%}
.wj-split .wj-card{margin-bottom:0}
/* in the narrower column the four tabs wrap instead of sliding sideways, and the list is taller */
.wj-split-side .wj-tabs{flex-wrap:wrap; justify-content:flex-start; gap:0 2px; overflow-x:visible; padding-right:20px}
.wj-split-side .wj-tabs button{margin-right:10px}
.wj-split-side .wj-notif-list{max-height:560px}
@media (max-width:1040px){
  .wj-split{grid-template-columns:minmax(0, 1fr)}
  .wj-split-side .wj-notif-list{max-height:360px}
}
/* the "For you" lines: a thin mark for what was missed, nothing for what is routine */
.wj-notif-item.is-red{border-left:3px solid #D9534F; padding-left:10px}
.wj-notif-item.is-amber{border-left:3px solid #8E3FA8; padding-left:10px}
.wj-notif-item.is-plain{padding-left:2px}
.wj-notif-item p b{font-weight:700; color:#222}
/* the quieter line under the main alert: logs to write */
.wj-alert.is-soft{border-color:#DCC3E6; background:#FBF6FD}

/* My calendar: a finished class that is being confirmed from Zoom */
.cal-ev.is-checking, body.wj .cal-ev.is-checking{border-style:dashed; border-color:#2989A2; background:#F3F9FB}

/* ---------- 2. Confirm classes: the last two weeks ---------- */
.cf-list{background:#fff; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:20px}
.cf-row{
  display:grid; grid-template-columns:96px minmax(0, 1fr) auto minmax(110px, auto); gap:6px 14px; align-items:center;
  padding:11px 16px; border-bottom:1px solid #F0F0F0;
}
.cf-row:last-child{border-bottom:0}
.cf-when b{display:block; font-size:14px; color:#292929}
.cf-when span{font-size:12.5px; color:#6F6F6F}
.cf-what{min-width:0}
.cf-what strong{display:block; font-size:14.5px; color:#292929; font-weight:600}
.cf-what span{display:block; font-size:12.5px; line-height:1.45; overflow-wrap:anywhere}
.cf-act{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; font-size:13px}
.cf-done{color:#23704A; font-weight:700; font-size:13px; white-space:nowrap}
@media (max-width:720px){
  .cf-row{grid-template-columns:minmax(0, 1fr) auto; padding:11px 12px}
  .cf-when{grid-column:1 / -1; display:flex; gap:8px; align-items:baseline}
  .cf-when b{display:inline}
  .cf-act{grid-column:1 / -1; justify-content:flex-start}
}

/* ---------- 3. the report form: every box is needed, the empty ones are red ---------- */
.rf-need{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#A12D29; margin:8px 0 2px}
.rf-need i{display:inline-block; flex:0 0 14px; width:14px; height:14px; border:2px solid #D9534F; border-radius:3px; background:#FDECEC}
body.wj dialog input.rf-num.is-blank,
body.wj dialog textarea.rf-note.is-blank{border-color:#D9534F; background:#FFF4F3; box-shadow:0 0 0 1px #D9534F inset}
body.wj dialog input.rf-num.is-blank:focus,
body.wj dialog textarea.rf-note.is-blank:focus{border-color:#D9534F; box-shadow:0 0 0 1px #D9534F inset, 0 0 0 3px #FAD9D7}
body.wj dialog input.rf-num.is-blank::placeholder{color:#C9302C; opacity:1}
.rf-row:has(.is-blank){border-color:#E9A7A3; background:#FFFBFB}
.rf-left{font-size:13.5px; font-weight:700; margin:12px 0 0}
.rf-left.is-due{color:#A12D29}
.rf-left.is-ok{color:#23704A}
.rf-must{font-style:normal; font-weight:700; font-size:12px; color:#A12D29}

/* ---------- 4. Improve writing: three versions ---------- */
.ai-sug .ai-was{padding-left:0; margin-bottom:10px}
.ai-opts{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin:0 0 10px}
.ai-opt{border:1px solid #DCC3E6; border-radius:6px; background:#fff; padding:10px 12px; display:flex; flex-direction:column; gap:8px; min-width:0}
.ai-opt-head{display:flex; flex-direction:column; gap:1px}
.ai-opt-head b{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#7B2D8E}
.ai-opt-head span{font-size:13px; font-weight:700; color:#333}
.ai-opt-text{flex:1 1 auto; margin:0; font-size:14px; line-height:1.5; color:#292929; white-space:pre-wrap; overflow-wrap:anywhere}
.ai-opt .btn{align-self:flex-start}

/* ---------- 5. Tasks ---------- */
/* attach the study plan */
.tk-attach{border:1px dashed #C9B3D3; border-radius:6px; background:#FDFBFE; padding:12px 14px; margin:0 0 14px}
.tk-attach-h{display:block; font-size:14px; font-weight:700; color:#333; margin-bottom:8px}
.tk-attach-h small{font-weight:400; color:#6F6F6F; font-size:12.5px}
.tk-attach-tabs{display:flex; gap:8px; flex-wrap:wrap}
.tk-attach-tab{
  border:1.5px solid #B98ACB; background:#fff; color:#6B1E7A; border-radius:999px; padding:6px 16px;
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; min-height:36px;
}
.tk-attach-tab:hover:not(:disabled){background:#FBF6FD}
.tk-attach-tab.is-on{background:#7B2D8E; border-color:#7B2D8E; color:#fff}
.tk-attach-tab:focus-visible{outline:2px solid #F5C542; outline-offset:2px}
.tk-attach-tab:disabled{opacity:.6; cursor:default}
.tk-attach-body{margin-top:12px}
.tk-attach-body.field{margin-bottom:0}
.tk-file{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip-path:inset(50%)}
.tk-file-btn{
  display:inline-flex; align-items:center; gap:6px; border:1.5px solid #1E8A9A; color:#10849A; background:#fff;
  border-radius:3px; padding:7px 14px; font-size:13.5px; font-weight:700; cursor:pointer; margin-bottom:6px;
}
.tk-file-btn:hover{background:#F2FAFB}
.tk-file-btn:focus-within{outline:2px solid #F5C542; outline-offset:2px}
.tk-attached{display:flex; align-items:center; gap:4px 8px; flex-wrap:wrap; margin:0 0 10px; font-size:14px; color:#292929; overflow-wrap:anywhere}
.tk-attached a{color:#10849A; font-weight:700}
.tk-attached small{color:#6F6F6F; font-size:12.5px}
.tk-attach-x{background:none; border:0; padding:0 2px; font:inherit; font-size:13px; font-weight:700; color:#C9302C; cursor:pointer; text-decoration:underline}
/* a log that is written */
.tk-ses-lock{font-size:13px; line-height:1.45; color:#6F6F6F; margin:8px 0 0}

/* ---------- 6. the report card ---------- */
.rc-pb span{display:inline-flex; align-items:center; gap:2px}
.rc-pb-how{display:flex; flex-direction:column; gap:3px; width:100%; margin:10px 0 0; padding:0 14px; text-align:left; font-size:11.5px; line-height:1.45; color:#666}
.rc-pb-how b{color:#444; font-weight:700}
.rc-alone{font-size:13px; line-height:1.55; color:#555; background:#F6F9FA; border:1px solid #E1ECEF; border-radius:3px; padding:10px 14px; margin:0 0 14px}
.rc-alone b{color:#333}
.rc-bars.rc-bars-1{max-width:260px}

/* ---------- 7. the console ---------- */
/* removing a mentor */
.btn-danger-ghost{background:none; border:1.5px solid transparent; color:var(--crimson)}
.btn-danger-ghost:hover:not([disabled]){background:var(--crimson-soft); border-color:var(--crimson-soft)}
.mentor-gone{background:var(--surface-2)}
.ho-sub{font-size:13px; color:var(--ink-2); margin:10px 0 0}
.ho-plain{margin:0 0 10px 18px; padding:0; font-size:14px; line-height:1.5}
.ho-plain li{margin:0 0 5px}
.ho-duty li small{display:block; font-size:12.5px; color:var(--ink-2)}
dialog.dlg-handover{max-width:min(820px, 96vw); width:min(820px, 96vw)}
dialog.dlg-handover .ho-item b{flex:1 1 300px}
dialog.dlg-handover .ho-item select, dialog.dlg-handover .ho-all select{max-width:340px; flex:1 1 240px}
/* Class timings: what each class was confirmed as */
table.timings td.tm-out{white-space:normal; min-width:250px}
table.timings td.tm-out .pill{white-space:nowrap}
.tm-by{font-size:12px}
.tm-why{font-size:12px; line-height:1.4; white-space:normal; max-width:300px; margin-top:3px}
.tm-decide{display:inline-block; margin-top:4px; font-size:13px; font-weight:700}
table.timings tr.tm-form-row td{white-space:normal; background:var(--surface-2)}
.tm-form{max-width:820px; padding:6px 2px 8px}
.tm-form p{margin:0 0 8px; font-size:14px}
.tm-form input[type=text]{width:100%; max-width:520px}
.tm-choices{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0 0 10px}
.tm-choice{
  text-align:left; border:1.5px solid var(--line-2); border-radius:10px; background:var(--surface); color:inherit;
  padding:10px 12px; font:inherit; cursor:pointer; min-height:44px;
}
.tm-choice b{display:block; font-size:14px}
.tm-choice small{display:block; font-size:12.5px; line-height:1.4; color:var(--ink-2); margin-top:2px; white-space:normal}
.tm-choice.is-on{border-color:var(--plum-3); box-shadow:0 0 0 2px var(--plum-soft)}
.tm-choice:disabled{opacity:.55; cursor:default}
.tm-choice:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}
@media (max-width:720px){ .tm-choices{grid-template-columns:1fr} }


/* ======================================================================================
   7 OCT (b) — the second pass of 7 October. Nothing above this line was changed.
     1. the student's home: Homework and the Leaderboard
     2. the mentor: Homework to check; "What happened?" for a class that was not held
     3. the console: what the mentor said, on Class timings
     4. the recording player (a recording plays inside the portal)
   ====================================================================================== */

/* ---------- 1. the student's home ---------- */
.fam-duo{
  display:grid; gap:16px; margin-bottom:16px; align-items:start;
  grid-template-columns:minmax(0, 1.32fr) minmax(0, 1fr);
}
.fam-duo.is-one{grid-template-columns:minmax(0, 1fr)}
.fam-duo > .wj-card{margin-bottom:0}
@media (max-width:900px){ .fam-duo{grid-template-columns:minmax(0, 1fr)} }

/* homework: one row per worksheet — what it is, where it stands, and Submit */
.hw-list{display:flex; flex-direction:column}
.hw-row{
  display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:6px 12px; align-items:center;
  padding:12px 0; border-top:1px solid var(--wj-line, #E4E4E4);
}
.hw-row:first-child{border-top:0; padding-top:2px}
.hw-what{display:flex; flex-direction:column; gap:3px; min-width:0}
.hw-title{font-weight:700; font-size:15.5px; color:var(--wj-ink, #292929); text-decoration:none; overflow-wrap:anywhere}
.hw-title:hover{color:var(--wj-teal, #1E8A9A); text-decoration:underline}
.hw-meta{font-size:13.5px; color:var(--wj-ink-2, #5E5E5E); line-height:1.45}
.hw-remarks{
  margin:4px 0 0; font-size:14px; line-height:1.5; color:var(--wj-ink, #292929);
  background:var(--wj-teal-soft, #E5F2F8); border-radius:4px; padding:7px 10px; overflow-wrap:anywhere;
}
.hw-remarks b{font-weight:700}
.hw-row.is-redo .hw-remarks{background:var(--crimson-soft, #FBE9EA)}
.hw-row .pill{white-space:nowrap; justify-self:start}
.hw-row .btn{white-space:nowrap}
.hw-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--wj-line, #E4E4E4);
  font-size:13.5px; color:var(--wj-ink-2, #5E5E5E);
}
.hw-on-card{margin-top:10px; display:flex; flex-direction:column; align-items:flex-start; gap:6px}
@media (max-width:560px){
  .hw-row{grid-template-columns:minmax(0, 1fr) auto}
  .hw-row .hw-what{grid-column:1 / -1}
  .hw-row .btn{justify-self:end}
}
/* the Submit pop-up */
dialog.hw-dlg{max-width:min(560px, 94vw)}
.hw-dlg-what{margin:0 0 12px; font-size:15px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.hw-dlg .field{margin-top:14px}
.hw-dlg .field[hidden]{display:none}
.hw-dlg input[type="url"]{width:100%}
.hw-dlg .field > .row{margin-top:2px}
.hw-file-out{margin-top:8px}
.hw-dlg input[type="file"]{max-width:100%}

/* the leaderboard */
.lb-me{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;
  background:var(--wj-teal-soft, #E5F2F8); border-radius:4px; padding:10px 8px; margin-bottom:10px;
}
.lb-me > div{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; min-width:0}
.lb-me b{font-size:20px; font-weight:800; color:var(--wj-title, #6B1E7A); font-variant-numeric:tabular-nums; line-height:1.15}
.lb-me span{font-size:11.5px; color:var(--wj-ink-2, #5E5E5E); line-height:1.25}
.lb-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.lb-row{
  display:grid; grid-template-columns:28px 30px minmax(0, 1fr) auto; gap:10px; align-items:center;
  padding:7px 8px; border-radius:4px; font-size:15px; color:var(--wj-ink, #292929);
}
.lb-row + .lb-row{border-top:1px solid var(--wj-line, #E4E4E4)}
.lb-rank{
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; background:var(--wj-row-grey, #E8E8E8); color:var(--wj-ink-2, #5E5E5E);
}
.lb-rank.r1{background:#F2C94C; color:#4D3900}
.lb-rank.r2{background:#CFD6DD; color:#2F3B45}
.lb-rank.r3{background:#E2B08A; color:#55300F}
.lb-av{
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; letter-spacing:.02em; background:var(--wj-row, #D9E8ED); color:var(--wj-teal-2, #10849A);
}
.lb-name{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-name em{
  font-style:normal; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:var(--wj-title, #6B1E7A); color:#fff; border-radius:999px; padding:2px 7px; margin-left:8px; vertical-align:1px;
}
.lb-pts{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.lb-pts i{font-style:normal; font-weight:600; font-size:12px; color:var(--wj-ink-3, #8A8A8A)}
.lb-row.is-me{background:var(--wj-teal-soft, #E5F2F8); box-shadow:inset 3px 0 0 var(--wj-title, #6B1E7A)}
.lb-row.is-me + .lb-row, .lb-row.is-me{border-top-color:transparent}
.lb-gap{text-align:center; color:var(--wj-ink-3, #8A8A8A); line-height:1; padding:2px 0; list-style:none}
.lb-how{margin:10px 0 0; font-size:12.5px; color:var(--wj-ink-2, #5E5E5E); text-align:center; line-height:1.45}
@media (max-width:420px){
  .lb-me{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:10px}
  .lb-row{grid-template-columns:26px minmax(0, 1fr) auto}
  .lb-av{display:none}
}
:root[data-theme="dark"] body.portal-family.wj .lb-name em{background:#8E3FA8; color:#fff}
:root[data-theme="dark"] body.portal-family.wj .lb-me b{color:#D9A6E6}
:root[data-theme="dark"] body.portal-family.wj .lb-av{background:#1F3A41; color:#6CC9D6}
:root[data-theme="dark"] body.portal-family.wj .hw-remarks{background:#1C343A; color:#EDE6F0}
:root[data-theme="dark"] body.portal-family.wj .hw-row.is-redo .hw-remarks{background:#3A1A1C}

/* ---------- 2. the mentor ---------- */
.hw-check h3{overflow-wrap:anywhere}
.hw-note{
  margin:10px 0 0; padding:8px 12px; border-left:3px solid #10849A; background:#F3F9FB; border-radius:0 4px 4px 0;
  font-size:14.5px; line-height:1.5; color:#292929; overflow-wrap:anywhere;
}
.hw-check-act{margin-top:14px; padding-top:12px; border-top:1px solid #E4E4E4}
.hw-check-act .field{margin:0 0 10px}
.hw-check-act textarea{width:100%}
/* "What happened?" — one choice */
.ci-list{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.ci-opt{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border:1.5px solid #D9D9D9; border-radius:4px;
  font-size:14.5px; line-height:1.35; cursor:pointer; background:#fff; color:#292929;
}
.ci-opt:hover{border-color:#10849A}
.ci-opt.is-on{border-color:#10849A; background:#E5F2F8; font-weight:700}
.ci-opt input{accent-color:#10849A; flex:0 0 auto; margin:0}
.ci-opt:focus-within{outline:2px solid #10849A; outline-offset:2px}
@media (max-width:560px){ .ci-list{grid-template-columns:minmax(0, 1fr)} }

/* ---------- 3. the console: what the mentor said ---------- */
.tm-said{margin-top:4px; font-size:13px; line-height:1.4; color:var(--ink, #292929)}
.tm-said b{font-weight:700}

/* ---------- 4. the recording player ---------- */
dialog.rec-dlg{
  max-width:min(980px, 96vw); width:min(980px, 96vw); max-height:94vh; padding:0; overflow:hidden;
  background:var(--surface, #fff); color:var(--ink, #292929);
}
dialog.rec-dlg::backdrop{background:rgba(10, 6, 14, .78)}
.rec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 12px 18px}
.rec-title{display:flex; flex-direction:column; gap:1px; min-width:0}
.rec-title strong{font-size:16px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rec-title span{font-size:13px; color:var(--ink-2, #5E5E5E)}
.rec-close{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:inherit; font-size:17px; line-height:1;
}
.rec-close:hover{background:rgba(127, 127, 127, .18)}
.rec-close:focus-visible{outline:2px solid #10849A; outline-offset:1px}
.rec-stage{
  background:#0E0B12; color:#F2EEF4; display:flex; align-items:center; justify-content:center;
  aspect-ratio:16 / 9; max-height:70vh; width:100%; min-height:200px;
}
.rec-video{width:100%; height:100%; max-height:70vh; background:#000; display:block}
.rec-wait{display:flex; align-items:center; gap:10px; font-size:15px; color:#D8CCE0}
.rec-spin{
  width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255, 255, 255, .25); border-top-color:#fff;
  animation:rec-spin .8s linear infinite;
}
@keyframes rec-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .rec-spin{animation-duration:2.4s} }
.rec-msg{max-width:460px; padding:22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px}
.rec-msg strong{font-size:17px}
.rec-msg p{margin:0; font-size:14.5px; line-height:1.55; color:#CFC4D6}
.rec-speed{padding:12px 18px 16px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line, #E4E4E4)}
.rec-speed[hidden]{display:none}
.rec-speed-head{display:flex; align-items:baseline; gap:10px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2, #5E5E5E)}
.rec-speed-now{font-size:16px; font-weight:800; letter-spacing:0; text-transform:none; color:var(--ink, #292929); font-variant-numeric:tabular-nums}
.rec-speed-chips{display:flex; flex-wrap:wrap; gap:6px}
.rec-chip{
  border:1.5px solid var(--line-2, #D9D9D9); background:transparent; color:inherit; border-radius:999px;
  padding:6px 12px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; font-variant-numeric:tabular-nums; min-width:54px;
}
.rec-chip:hover{border-color:#10849A}
.rec-chip[aria-pressed="true"]{background:#10849A; border-color:#10849A; color:#fff}
.rec-chip:focus-visible{outline:2px solid #10849A; outline-offset:2px}
.rec-speed-any{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:4px 12px; align-items:center; font-size:13.5px; color:var(--ink-2, #5E5E5E)}
.rec-speed-slider{width:100%; accent-color:#10849A}
.rec-speed-ends{grid-column:2; display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3, #8A8A8A)}
.rec-speed-ends i{font-style:normal}
.rec-else{margin:2px 0 0; font-size:13px; color:var(--ink-2, #5E5E5E)}
.rec-else[hidden]{display:none}
.rec-else a{color:#10849A; font-weight:700}
@media (max-width:560px){
  .rec-head{padding:10px 8px 10px 14px}
  .rec-speed{padding:10px 14px 14px}
  .rec-chip{min-width:48px; padding:6px 9px}
}

/* ============================================================
   NEW (20 Oct) — the demo time picker in the console (Leads → Work this lead)
   The family's own time sits in a green box, marked "Asked for by the
   family"; every time shows the family's clock first and the mentor's
   own clock under it; the picked time turns gold.
   ============================================================ */
.dp-times{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.dp-time{display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; line-height:1.25;
  padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font:inherit; font-size:14px; cursor:pointer}
.dp-time b{font-weight:700}
.dp-time small{font-size:12.5px; color:var(--ink-2)}
.dp-time:hover{border-color:var(--gold-2)}
.dp-time.is-picked{border:2px solid var(--gold-2); background:var(--gold-soft); padding:7px 11px}
.dp-ask{margin-top:10px; padding:12px 14px; border-radius:12px; border:2px solid var(--green); background:var(--green-soft)}
.dp-ask-head{font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green)}
.dp-time.dp-ask-time{border:2px solid var(--green); padding:7px 11px}
.dp-time.dp-ask-time.is-picked{border-color:var(--gold-2); background:var(--gold-soft)}
.dp-tag{font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--green)}
.dp-busy{margin-top:6px; font-size:14px; color:var(--ink)}
.dp-day{font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--ink-2); margin-top:14px}
.dp-choice{margin-top:12px; font-size:14.5px}
.dp-resched{margin-top:12px; padding:12px 14px; border-radius:12px; border:1px dashed var(--line-2); background:var(--surface-2)}
/* (20 Oct) the demo's meeting-link box looked like a bare browser box: give url boxes in a form the same look as the others */
label.field input[type=url]{
  width:100%; font-family:var(--font-body); font-size:16px;
  padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink);
}