/* student-v2 mockup, round 3 (2026-10-12): the frontend-design pass.
   One bold thing per page (the navy panel); everything else quiet: lists on
   hairlines, few boxes, no hover lifts, no all-caps labels, no dot-joined
   meta, no arrows tacked onto links, no one-word colour accents. One moment
   of motion per page. Blue Rail palette and Google Sans Flex stay.

   Tokens: navy #102240 (the bold panel, text), blue #3070B6 (actions,
   progress), sky #9DCAE3 (progress on navy, tints), white, hairlines in
   navy alpha. WhatsApp green on its own button only. Type scale 12.5, 14,
   15, 18, 22, 30, 42. */

:root{ --wa:#1FAF54; --wa-h:#178C43; --r-lg:18px; }

.main{scrollbar-color:var(--sky-24) transparent}
.v2-n, .iv-ct, .v2-mini b, .jr-v, .v2-cal b, .v2-goal-l span{font-variant-numeric:tabular-nums}

/* ---------- shared ---------- */
.v2-h{font-size:1.125rem; font-weight:600; letter-spacing:-.02em; color:var(--navy); line-height:1.25}
.v2-ph, .v2-sh{display:flex; align-items:center; gap:10px; min-height:28px; margin-bottom:12px}
.v2-sh{margin-bottom:16px}
.v2-ph .pn-link, .v2-sh .pn-link{margin-left:auto}
.pn-link{font-size:.84rem}
.v2-n{font-size:.75rem; font-weight:600; min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--sky-16); color:var(--navy)}
.v2-bar{flex:1; height:6px; border-radius:99px; background:var(--sky-16); overflow:hidden}
.v2-bar i{display:block; height:100%; width:var(--p); background:var(--blue); border-radius:inherit}
.v2-wa{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; background:var(--wa); color:#fff;
  font-weight:600; font-size:.86rem; white-space:nowrap; transition:background-color .2s}
.v2-wa:hover{background:var(--wa-h)}
.v2-wa .i{width:18px; height:18px}
.v2-wa-lg{height:48px; padding:0 22px; font-size:.95rem}
.v2-code{display:inline-flex; font-size:.78rem; font-weight:700; letter-spacing:.12em; padding:5px 11px; border-radius:999px; background:var(--navy); color:#fff}
.medal{flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:.74rem; font-weight:700; color:#fff; background:var(--navy)}
.medal.m2{background:var(--blue)} .medal.m3{background:var(--sky); color:var(--navy)}
.v2-rk{flex:none; width:24px; text-align:center; font-size:.8rem; font-weight:600; color:var(--ink-3)}

.v2-me-av{flex:none; border-radius:50%; transition:box-shadow .2s}
.v2-me-av .av{width:38px; height:38px; background:var(--navy); color:#fff; font-size:.8rem}
.v2-me-av:hover{box-shadow:0 0 0 4px var(--sky-16)}
.top:not(:has(.search)) .v2-me-av{margin-left:auto}

/* ---------- Dashboard ---------- */
.v2-dash{grid-template-columns:minmax(0,1fr) 300px; gap:40px}
.v2-dash .dash-main{gap:36px}

/* the one bold thing: who you are and where you are on the path */
.v2-me{border-radius:24px; padding:36px 40px 28px; background:var(--navy); color:#fff}
.v2-me-t{font-size:clamp(1.9rem, 1.2rem + 1.6vw, 2.625rem); font-weight:600; letter-spacing:-.035em; line-height:1.06; text-wrap:balance}
.v2-me-q{margin-top:10px; font-size:1.02rem; color:rgba(255,255,255,.78)}
.v2-me-a{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px}
.v2-me-code{margin-left:auto; display:flex; gap:4px}
.v2-me-code b{width:38px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:1.2rem; font-weight:650;
  border:1px solid rgba(255,255,255,.2); color:#fff}
.v2-me :focus-visible{outline-color:#fff}

.jr{--at:0; position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); margin-top:30px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12)}
.jr::before, .jr::after{content:""; position:absolute; top:41px; left:10%; height:2px; border-radius:2px}
.jr::before{right:10%; background:rgba(255,255,255,.16)}
.jr::after{width:calc(var(--at) * 20%); background:var(--sky); transform-origin:left; animation:jr-fill 1.2s .3s cubic-bezier(.16,1,.3,1) both}
@keyframes jr-fill{from{transform:scaleX(0)}}
.jr li{position:relative; z-index:1}
.jr a{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:0 4px 2px; border-radius:12px}
.jr-dot{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; margin-bottom:8px; font-size:.84rem; font-weight:650;
  background:var(--navy); border:2px solid rgba(255,255,255,.24); color:rgba(255,255,255,.72)}
.jr-dot .i{width:16px; height:16px; stroke-width:2.6}
.jr .done .jr-dot{background:var(--sky); border-color:var(--sky); color:var(--navy)}
.jr .cur .jr-dot{background:#fff; border-color:#fff; color:var(--navy); box-shadow:0 0 0 6px rgba(157,202,227,.2)}
.jr-k{font-size:.9rem; font-weight:600}
.jr-v{font-size:.8rem; color:rgba(255,255,255,.66)}
.jr li:not(.done):not(.cur) .jr-k{color:rgba(255,255,255,.62)}
.jr a:hover .jr-k{text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.4)}

/* Up next: the only box under the panel */
.v2-un{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; padding:24px 28px; border-radius:var(--r-lg);
  background:var(--sky-06); border:1px solid var(--sky-24)}
.v2-un .v2-h{font-size:.94rem; color:var(--blue)}
.v2-un-t{margin-top:6px; font-size:1.375rem; font-weight:600; letter-spacing:-.025em; line-height:1.25; color:var(--navy)}
.v2-un-m{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:10px; font-size:.86rem}
.v2-un-m a{color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--hair-3); text-underline-offset:3px}
.v2-un-m a:hover{color:var(--blue); text-decoration-color:currentColor}
.v2-due{padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; background:#fff; border:1px solid var(--hair-2); color:var(--navy)}
.v2-due.now{background:var(--blue); border-color:var(--blue); color:#fff}

/* My careers: a list, not cards */
.v2-list{border-top:1px solid var(--hair)}
.v2-list li{display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:center; gap:20px; padding:12px 0; border-bottom:1px solid var(--hair)}
.v2-li-a{display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:16px; text-align:left; border-radius:12px}
.v2-li-art{width:72px; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#EAF3FA; display:grid; place-items:center}
.v2-li-art svg{width:135%; height:auto; max-width:none}
.v2-li-b{display:flex; flex-direction:column; gap:2px; min-width:0}
.v2-li-b b{font-size:1rem; font-weight:600; color:var(--navy); letter-spacing:-.01em}
.v2-li-b small{font-size:.84rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v2-li-a:hover b{color:var(--blue)}
.v2-li-p{display:flex; align-items:center; gap:12px; font-size:.82rem; font-weight:600; color:var(--blue)}
.v2-li-p > span:last-child{flex:none; min-width:84px; text-align:right}
.v2-li-p.fin{color:var(--navy)} .v2-li-p.fin .v2-bar i{background:var(--navy)}
.v2-li-go{justify-self:end; font-size:.84rem; font-weight:600; color:var(--blue); padding:7px 14px; border-radius:999px; border:1px solid var(--blue-40);
  transition:background-color .2s}
.v2-li-go:hover{background:var(--blue-24)}

/* Picked for you: the one place with pictures */
.v2-scroll{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, calc((100% - 42px) / 4)); gap:14px; overflow-x:auto;
  padding:0 0 12px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--sky-24) transparent}
.v2-scroll > *{scroll-snap-align:start}
.pk{position:relative; display:flex; flex-direction:column; border:1px solid var(--edge); border-radius:var(--r-lg); background:#fff; overflow:hidden; cursor:pointer;
  transition:border-color .2s}
.pk:hover{border-color:var(--hair-3)}
.pk:hover .pk-t{color:var(--blue)}
.pk:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.pk-art{aspect-ratio:16/9; overflow:hidden; display:grid; place-items:center; background:#EAF3FA}
.pk-art svg{width:112%; height:auto; max-width:none}
.pk-save{position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--navy)}
.pk-save:hover{background:#fff; color:var(--blue)}
.pk-b{display:flex; flex-direction:column; gap:2px; padding:14px 16px 16px; flex:1}
.pk-t{font-size:1rem; font-weight:600; color:var(--navy); letter-spacing:-.01em; line-height:1.25; transition:color .2s}
.pk-r{font-size:.82rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pk-why{display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:12px}
.pk-why span{font-size:.75rem; font-weight:500; padding:3px 9px; border-radius:999px; background:var(--sky-10); color:var(--navy)}
.pk-why .pk-band{font-weight:600}
.pk-why .b-strong{background:var(--blue); color:#fff}

/* ---------- the rail: flat sections on hairlines ---------- */
.v2-rail{position:sticky; top:calc(var(--toph, 70px) + 24px); display:flex; flex-direction:column}
.v2-rs{padding:22px 0}
.v2-rs:first-child{padding-top:0}
.v2-rs + .v2-rs{border-top:1px solid var(--hair)}
.v2-date{margin-left:auto; font-size:.84rem; color:var(--ink-3)}
.tds{display:flex; flex-direction:column}
.td label{position:relative; display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; padding:10px 0; cursor:pointer}
.td + .td label{border-top:1px solid var(--hair)}
.td input{position:absolute; opacity:0; width:20px; height:20px; margin:0; top:10px; left:0}
.td label:hover .tick{border-color:var(--blue)}
.td input:checked + .tick{background:var(--blue); border-color:var(--blue)}
.td input:checked + .tick .i{opacity:1; transform:none}
.td input:focus-visible + .tick{outline:2px solid var(--blue); outline-offset:3px}
.td-b{display:flex; flex-direction:column; gap:3px; min-width:0}
.td-t{font-size:.92rem; color:var(--ink); line-height:1.35}
.td.is-done .td-t{color:var(--ink-4); text-decoration:line-through; text-decoration-color:var(--hair-3)}
.td-m{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.78rem; color:var(--ink-3)}
.td-m em{font-style:normal; font-weight:600; color:var(--blue)}
.v2-clear{display:flex; align-items:center; gap:8px; padding:8px 0; font-weight:600; color:var(--blue)}
.v2-add{display:flex; align-items:center; gap:6px; margin-top:10px; padding:2px 2px 2px 14px; border-radius:12px; border:1px solid var(--hair-2);
  transition:border-color .2s}
.v2-add:focus-within{border-color:var(--blue)}
.v2-add input{flex:1; min-width:0; border:0; background:none; outline:none; font-size:.86rem; padding:9px 0; color:var(--ink)}
.v2-add input::placeholder{color:var(--ink-3)}
.v2-add .icon-btn{color:var(--blue)}
.v2-up{display:flex; flex-direction:column; gap:6px}
.v2-up li{display:flex; align-items:center; gap:14px; padding:4px 0}
.v2-cal{flex:none; width:42px; height:46px; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  border:1px solid var(--hair-2)}
.v2-cal b{font-size:1.06rem; font-weight:650; color:var(--navy)}
.v2-cal small{font-size:.7rem; color:var(--blue); margin-top:3px; font-weight:600}
.v2-up-b{display:flex; flex-direction:column; gap:2px; min-width:0}
.v2-up-b b{font-size:.92rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v2-up-b small{font-size:.8rem; color:var(--ink-3)}
.v2-mini{display:flex; flex-direction:column}
.v2-mini li{display:flex; align-items:center; gap:12px; padding:7px 8px; border-radius:10px; font-size:.92rem; color:var(--ink)}
.v2-mini li.me{background:var(--blue-24); font-weight:600; color:var(--blue); margin-top:2px}
.v2-mini-n{flex:1; min-width:0}
.v2-mini b{font-weight:650; color:var(--navy)}
.v2-goal{display:flex; flex-direction:column; gap:8px; margin:16px 0}
.v2-goal-l{display:flex; justify-content:space-between; font-size:.84rem}
.v2-goal-l b{font-weight:600; color:var(--navy)}
.v2-goal-l span{color:var(--ink-3)}
.v2-goal .v2-bar{flex:none}
.v2-inv-a{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Careers ---------- */
.v2-picks{margin-bottom:36px}
.v2-pk-t{font-size:clamp(1.7rem, 1.2rem + 1.2vw, 2.25rem); font-weight:600; letter-spacing:-.035em; color:var(--navy)}
.v2-worlds-h{font-size:1.25rem; margin:4px 0 16px}

/* ---------- Invite friends ---------- */
.iv{display:flex; flex-direction:column; gap:36px; max-width:1180px}
.iv-hero{border-radius:24px; padding:40px 40px 40px 44px; background:var(--navy); color:#fff;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:32px 48px; align-items:center}
.iv-hero-l{display:flex; flex-direction:column; gap:20px; min-width:0}
.iv-t{font-size:clamp(2rem, 1.3rem + 2vw, 2.875rem); font-weight:600; letter-spacing:-.04em; line-height:1.04; text-wrap:balance}
.iv-code{display:inline-flex; align-items:center; gap:14px; align-self:flex-start; padding:8px 8px 8px 18px; border-radius:14px;
  border:1px dashed rgba(157,202,227,.55)}
.iv-code span{font-size:.84rem; color:rgba(255,255,255,.72)}
.iv-code b{font-size:1.4rem; font-weight:650; letter-spacing:.1em; color:#fff}
.iv-code .icon-btn{color:#fff} .iv-code .icon-btn:hover{background:rgba(255,255,255,.12); color:#fff}
.iv-share{display:flex; flex-wrap:wrap; gap:10px}
.iv-share .pill-ghost{color:#fff}
.iv-hero :focus-visible{outline-color:#fff}

.iv-prev{margin:0}
.iv-msg{margin-left:auto; max-width:330px; padding:6px 6px 8px; border-radius:16px 4px 16px 16px; background:#E3F2E8; color:#13261A;
  box-shadow:0 16px 32px -20px rgba(0,0,0,.7)}
.iv-card{display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:#fff}
.iv-card-art{aspect-ratio:2/1; overflow:hidden; display:grid; place-items:center; background:#EAF3FA}
.iv-card-art svg{width:100%; height:auto}
.iv-card-b{display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px}
.iv-card-b small{font-size:.72rem; color:#5B6B60}
.iv-card-b b{font-size:.92rem; font-weight:650; color:var(--navy); line-height:1.25}
.iv-card-b span{font-size:.82rem; color:var(--blue); font-weight:600}
.iv-msg-t{font-size:.86rem; line-height:1.4; padding:8px 8px 0}
.iv-link{color:#1666B8; text-decoration:underline; text-underline-offset:2px; word-break:break-all}
.iv-msg-m{display:flex; align-items:center; justify-content:flex-end; gap:3px; font-size:.7rem; color:#5B6B60; padding:2px 6px 0}
.iv-msg-m .i{width:13px; height:13px; color:#3797F0}

/* the sections under the panel: no boxes, a hairline between */
.iv-sec{padding-top:28px; border-top:1px solid var(--hair)}
.iv-ms-next{margin-left:auto; font-size:.88rem; color:var(--ink-2)}
.iv-ms-next b{color:var(--blue); font-weight:600}
.ms{--p:0%; position:relative; padding:8px 0 0}
.ms-line{position:absolute; left:10%; right:10%; top:30px; height:3px; border-radius:3px; background:var(--sky-16)}
.ms-line i{display:block; height:100%; width:var(--p); border-radius:inherit; background:var(--blue); transform-origin:left;
  animation:jr-fill 1.2s .3s cubic-bezier(.16,1,.3,1) both}
.ms ol{position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr))}
.ms li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px}
.ms-dot{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin-bottom:8px; font-weight:650; font-size:.95rem;
  background:#fff; border:2px solid var(--sky-24); color:var(--ink-3)}
.ms-dot .i{width:20px; height:20px; stroke-width:2.4}
.ms .got .ms-dot{background:var(--blue); border-color:var(--blue); color:#fff}
.ms .nxt .ms-dot{border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 6px var(--blue-24)}
.ms b{font-size:.9rem; font-weight:600; color:var(--navy)}
.ms small{font-size:.8rem; color:var(--ink-3)}
.ms li:not(.got):not(.nxt) b{color:var(--ink-3); font-weight:500}

.iv-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:56px; align-items:start}
.iv-bh{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px}
.iv-bh .v2-h{margin-right:auto}
.iv-seg{display:inline-flex; padding:3px; border-radius:999px; background:var(--sky-10)}
.iv-seg button{padding:6px 13px; border-radius:999px; font-size:.82rem; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:background-color .2s, color .2s}
.iv-seg button:hover{color:var(--navy)}
.iv-seg button[aria-pressed="true"]{background:#fff; color:var(--navy); font-weight:600; box-shadow:0 1px 3px rgba(16,34,64,.14)}
.iv-rows{display:flex; flex-direction:column}
.iv-rows li{display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:12px}
.iv-rows li + li{box-shadow:inset 0 1px 0 var(--hair)}
.iv-rows li.me{background:var(--blue-24); box-shadow:none}
.iv-rows li.me + li{box-shadow:none}
.iv-rows li.me .iv-nm b{color:var(--blue)}
.iv-rows .av{width:34px; height:34px; font-size:.74rem; background:var(--sky-16); color:var(--navy)}
.iv-nm{flex:1; min-width:0; display:flex; flex-direction:column}
.iv-nm b{font-size:.94rem; font-weight:600; color:var(--navy)}
.iv-nm small{font-size:.8rem; color:var(--ink-3)}
.iv-ct{font-size:1rem; font-weight:650; color:var(--navy); min-width:30px; text-align:right}
.iv-pin{margin-top:8px; padding-top:8px; border-top:1px dashed var(--hair-3)}
.iv-sw{position:relative; display:flex; align-items:center; gap:10px; margin-top:14px; font-size:.88rem; color:var(--ink-2); cursor:pointer}
.iv-sw input{position:absolute; opacity:0; pointer-events:none}
.iv-sw .sw{width:36px; height:20px; border-radius:99px; background:var(--hair-3); position:relative; transition:background-color .2s}
.iv-sw .sw::after{content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .25s var(--ease)}
.iv-sw input:checked + .sw{background:var(--blue)}
.iv-sw input:checked + .sw::after{transform:translateX(16px)}
.iv-sw input:focus-visible + .sw{outline:2px solid var(--blue); outline-offset:2px}
.iv-frs{display:flex; flex-direction:column}
.iv-frs li{display:flex; align-items:center; gap:12px; padding:12px 0}
.iv-frs li + li{border-top:1px solid var(--hair)}
.iv-frs .av{background:var(--sky-16); color:var(--navy)}
.iv-st{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap}
.iv-st .i{width:13px; height:13px; stroke-width:2.4}
.iv-st.done{background:var(--blue); color:#fff}
.iv-st.joined{background:var(--sky-16); color:var(--navy)}

@media (prefers-reduced-motion:reduce){ .jr::after, .ms-line i{animation:none} }

/* ---------- narrower ---------- */
@media (max-width:1340px){
  .v2-dash{grid-template-columns:minmax(0,1fr) 280px; gap:32px}
  .v2-scroll{grid-auto-columns:minmax(210px, calc((100% - 28px) / 3))}
  .v2-list li{grid-template-columns:minmax(0,1fr) 180px}
}
@media (max-width:1100px){
  .v2-dash{grid-template-columns:minmax(0,1fr); gap:32px}
  .v2-dash .dash-main{display:contents}
  .v2-dash .v2-me{order:1} .v2-dash .v2-un{order:2} .v2-dash .v2-rail{order:3} .v2-dash .v2-sec{order:4}
  .v2-rail{position:static}
  .iv-hero{grid-template-columns:minmax(0,1fr)}
  .iv-msg{margin-left:0}
  .iv-grid{grid-template-columns:minmax(0,1fr); gap:36px}
}
@media screen and (max-width:860px){
  .top .v2-me-av .av{background:#fff; color:var(--blue); width:34px; height:34px}
  .v2-me{padding:26px 20px 18px; border-radius:20px}
  .v2-me-t{font-size:1.9rem}
  .v2-me-code{display:none}
  .v2-me-a > a{flex:1 1 100%; justify-content:center}
  .jr{margin-top:22px; padding-top:18px}
  .jr::before, .jr::after{top:33px}
  .jr-dot{width:30px; height:30px; margin-bottom:6px; font-size:.76rem}
  .jr-k{font-size:.75rem}
  .jr-v{display:none}
  .v2-un{grid-template-columns:minmax(0,1fr); padding:20px; gap:16px}
  .v2-un .btn{justify-self:stretch; padding:12px 20px; font-size:.92rem}
  .v2-un-t{font-size:1.2rem}
  .v2-list li{grid-template-columns:minmax(0,1fr); gap:10px}
  .v2-li-p, .v2-li-go{margin-left:88px}
  .v2-li-go{justify-self:start}
  .v2-scroll{grid-auto-columns:76%}
  .iv-hero{padding:26px 20px}
  .ms-dot{width:38px; height:38px; font-size:.82rem}
  .ms-line{top:27px}
  .ms b{font-size:.75rem}
  .ms small{display:none}
  .iv-ms .v2-ph{flex-wrap:wrap}
  .iv-ms-next{margin-left:0; width:100%}
  .iv-bh .v2-h{width:100%}
}

/* =====================================================================
   Round 4 (2026-10-12, "Not good, make clean"): one white column, five
   things, lots of air. Shared by the Dashboard and Invite friends.
   ===================================================================== */
.c-dash{max-width:760px; margin:8px auto 64px; display:flex; flex-direction:column; gap:48px}
.c-head{display:flex; flex-direction:column; gap:10px}
.c-hi{font-size:clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight:600; letter-spacing:-.04em; line-height:1.05; color:var(--navy)}
.c-type{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; font-size:1.1rem; color:var(--ink-2)}
.c-type a{font-size:.94rem; font-weight:600; color:var(--blue)}
.c-type a:hover{text-decoration:underline; text-underline-offset:4px}

/* the path on white */
.c-dash .jr{margin:0; padding:0; border:0}
.c-dash .jr::before, .c-dash .jr::after{top:17px}
.c-dash .jr::before{background:var(--sky-24)}
.c-dash .jr::after{background:var(--blue)}
.c-dash .jr-dot{background:#fff; border-color:var(--sky-24); color:var(--ink-3)}
.c-dash .jr .done .jr-dot{background:var(--blue); border-color:var(--blue); color:#fff}
.c-dash .jr .cur .jr-dot{background:#fff; border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 6px var(--blue-24)}
.c-dash .jr-k{color:var(--navy)}
.c-dash .jr li:not(.done):not(.cur) .jr-k{color:var(--ink-3); font-weight:500}
.c-dash .jr-v{color:var(--ink-3)}
.c-dash .jr .cur .jr-v{color:var(--blue)}
.c-dash .jr a:hover .jr-k{text-decoration-color:var(--hair-3)}

/* section heads */
.c-sec{display:flex; flex-direction:column}
.c-sh{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.c-sh h2{font-size:1.25rem; font-weight:600; letter-spacing:-.025em; color:var(--navy)}
.c-sh > a, .c-sh-r{margin-left:auto}
.c-sh > a{font-size:.9rem; font-weight:500; color:var(--ink-3)}
.c-sh > a:hover{color:var(--blue)}
.c-sh-r{font-size:.9rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.c-sh-wrap{flex-wrap:wrap}
.c-n{font-size:.78rem; font-weight:600; min-width:24px; height:24px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--sky-16); color:var(--navy); font-variant-numeric:tabular-nums}

/* Up next */
.c-next{display:flex; align-items:center; gap:24px; padding:22px 24px; border-radius:16px; background:var(--sky-06); border:1px solid var(--sky-24)}
.c-next > div{flex:1; min-width:0}
.c-next-t{font-size:1.3rem; font-weight:600; letter-spacing:-.02em; line-height:1.3; color:var(--navy)}
.c-next-m{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:.92rem; color:var(--ink-3)}
.c-next-m span{color:var(--blue); font-weight:600}
.c-next .btn{flex:none; padding:12px 26px}

/* Today */
.c-tasks{border-top:1px solid var(--hair)}
.c-tasks li label{position:relative; display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 2px;
  border-bottom:1px solid var(--hair); cursor:pointer}
.c-tasks input{position:absolute; opacity:0; width:20px; height:20px; margin:0; left:2px}
.c-tasks label:hover .tick{border-color:var(--blue)}
.c-tasks input:checked + .tick{background:var(--blue); border-color:var(--blue)}
.c-tasks input:checked + .tick .i{opacity:1; transform:none}
.c-tasks input:focus-visible + .tick{outline:2px solid var(--blue); outline-offset:3px}
.c-task{font-size:1rem; color:var(--ink)}
.c-tasks .is-done .c-task{color:var(--ink-4); text-decoration:line-through; text-decoration-color:var(--hair-3)}
.c-late{font-size:.84rem; font-weight:600; color:var(--blue); white-space:nowrap}
.c-time{font-size:.84rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.c-clear{padding:14px 0; color:var(--ink-3)}
.c-add{display:grid; grid-template-columns:20px minmax(0,1fr); gap:14px; align-items:center; padding:12px 2px; color:var(--ink-3)}
.c-add .i{width:18px; height:18px; margin-left:1px}
.c-add input{border:0; background:none; outline:none; font-size:1rem; padding:2px 0; color:var(--ink)}
.c-add input::placeholder{color:var(--ink-3)}
.c-add:focus-within{color:var(--blue)}

/* My careers */
.c-cars{border-top:1px solid var(--hair)}
.c-cars li{display:flex; align-items:center; gap:20px; padding:12px 0; border-bottom:1px solid var(--hair)}
.c-cars button{flex:1; min-width:0; display:flex; align-items:center; gap:16px; text-align:left}
.c-cars b{font-size:1.02rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-cars button:hover b{color:var(--blue)}
.c-art{flex:none; width:56px; height:42px; border-radius:10px; overflow:hidden; background:#EAF3FA; display:grid; place-items:center}
.c-art svg{width:140%; height:auto; max-width:none}
.c-prog{flex:none; width:170px; display:flex; align-items:center; gap:12px; font-size:.86rem; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums}
.c-prog > span:last-child{flex:none; min-width:52px; text-align:right}
.c-try{flex:none; font-size:.88rem; font-weight:600; color:var(--blue); padding:6px 14px; border-radius:999px; border:1px solid var(--blue-40)}
.c-try:hover{background:var(--blue-24)}

/* Invite friends, one line */
.c-friends{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:16px; border:1px solid var(--hair-2); transition:border-color .2s}
.c-friends:hover{border-color:var(--blue-40)}
.c-fr-i{flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--sky-16); color:var(--blue)}
.c-friends > span:nth-child(2){flex:1; display:flex; flex-direction:column}
.c-friends b{font-weight:600; color:var(--navy)}
.c-friends small{font-size:.88rem; color:var(--ink-3)}
.c-friends > .i{color:var(--ink-3)}

/* Invite page */
.c-share{display:flex; flex-direction:column; gap:18px}
.c-code{display:flex; align-items:baseline; gap:16px}
.c-code span{font-size:.95rem; color:var(--ink-3)}
.c-code b{font-size:2rem; font-weight:650; letter-spacing:.08em; color:var(--navy); font-variant-numeric:tabular-nums}
.c-share-a{display:flex; flex-wrap:wrap; gap:10px}
.c-share-a .v2-wa{height:44px; padding:0 20px}
.c-inv .ms{padding-top:6px}
.c-inv .ms-line{top:28px}
.c-inv .iv-st{background:var(--sky-16); color:var(--navy)}
.c-inv .iv-st.done{background:none; color:var(--blue); padding-right:0}

@media screen and (max-width:860px){
  .c-dash{gap:36px; margin-top:0}
  .c-dash .jr::before, .c-dash .jr::after{top:14px}
  .c-next{flex-direction:column; align-items:stretch; gap:16px; padding:18px}
  .c-next-t{font-size:1.15rem}
  .c-prog{width:auto} .c-prog .v2-bar{display:none}
  .c-code b{font-size:1.6rem}
  .c-sh-wrap .c-sh-r{margin-left:0; width:100%; justify-content:flex-start}
  .c-inv .ms-line{top:24px}
}

/* =====================================================================
   My Space (2026-10-12): the prototype's eight tabs in our clean style.
   Calendar types use the five brand colours plus hairline grey only.
   ===================================================================== */
.mys{max-width:1080px; margin:8px auto 64px}
.ms-top{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.ms-streakchip{margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:var(--navy); color:#fff;
  font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums}
.ms-streakchip .i{width:16px; height:16px; color:var(--sky)}
.ms-tabs{display:flex; gap:4px; border-bottom:1px solid var(--hair-2); margin-bottom:32px; overflow-x:auto; scrollbar-width:none}
.ms-tabs::-webkit-scrollbar{display:none}
.ms-tabs a{flex:none; padding:10px 14px 12px; font-size:.95rem; font-weight:500; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s}
.ms-tabs a:hover{color:var(--navy)}
.ms-tabs a[aria-current="page"]{color:var(--navy); font-weight:600; border-bottom-color:var(--blue)}
.ms-body{display:flex; flex-direction:column; gap:44px}
.ms-cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start}
.ms-cols-cal{grid-template-columns:minmax(0,1fr) 300px}
.ms-main, .ms-side{display:flex; flex-direction:column; gap:40px; min-width:0}
.ms-quiet{color:var(--ink-3); padding:8px 0}
.ms-link{display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:600; color:var(--blue)}
.ms-link .i{width:15px; height:15px}
.ms-link:hover{text-decoration:underline; text-underline-offset:4px}
.ms-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:.8rem; font-weight:500; background:var(--sky-10); color:var(--navy); white-space:nowrap}
.ms-chip .i{width:14px; height:14px}
.ms-chip.on{background:var(--blue); color:#fff}
.ms-tag{font-size:.8rem; color:var(--ink-3)}
.ms-src{margin-top:12px; font-size:.84rem; color:var(--ink-3)}
.ms-ib{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--hair-2); color:var(--navy)}
.ms-ib:hover{border-color:var(--blue); color:var(--blue)}
.ms-ib .i{width:16px; height:16px}

/* segmented choice and switch */
.ms-seg{display:inline-flex; flex-wrap:wrap; gap:4px; padding:3px; border-radius:999px; background:var(--sky-10)}
.ms-seg button{padding:6px 13px; border-radius:999px; font-size:.84rem; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:background-color .15s, color .15s}
.ms-seg button:hover{color:var(--navy)}
.ms-seg button[aria-pressed="true"]{background:#fff; color:var(--navy); font-weight:600; box-shadow:0 1px 3px rgba(16,34,64,.14)}
.ms-ci .ms-seg button[data-v="done"][aria-pressed="true"]{background:var(--blue); color:#fff}
.ms-sw{flex:none; width:40px; height:24px; border-radius:99px; background:var(--hair-3); position:relative; transition:background-color .2s}
.ms-sw span{position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s var(--ease); box-shadow:0 1px 2px rgba(16,34,64,.2)}
.ms-sw[aria-checked="true"]{background:var(--blue)}
.ms-sw[aria-checked="true"] span{transform:translateX(16px)}

/* forms */
.ms-form{display:flex; flex-direction:column; gap:14px}
.ms-form-row{flex-direction:row; flex-wrap:wrap; align-items:flex-end; margin-top:20px}
.ms-form-row .ms-f{flex:1 1 150px}
.ms-two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ms-f{display:flex; flex-direction:column; gap:6px; font-size:.86rem; font-weight:500; color:var(--ink-2)}
.ms-f input, .ms-f select, .ms-form textarea, .ms-inline input{width:100%; font-size:.95rem; color:var(--ink); padding:10px 12px; border-radius:10px; border:1px solid var(--hair-2);
  background:#fff; outline:none; transition:border-color .2s}
.ms-form textarea{resize:vertical; line-height:1.5}
.ms-f input:focus, .ms-f select:focus, .ms-form textarea:focus, .ms-inline input:focus{border-color:var(--blue)}
.ms-f input::placeholder, .ms-form textarea::placeholder, .ms-inline input::placeholder{color:var(--ink-3)}
.ms-form .btn{align-self:flex-start}
.ms-acts{display:flex; flex-wrap:wrap; gap:10px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* Today */
.ms-ci{border-top:1px solid var(--hair)}
.ms-ci li{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--hair)}
.ms-ci-b{display:flex; flex-direction:column; gap:2px; min-width:0}
.ms-ci-b b{font-size:1rem; font-weight:600; color:var(--navy)}
.ms-ci-b small{font-size:.84rem; color:var(--ink-3)}
.ms-inline{display:grid; grid-template-columns:minmax(0,1fr) 84px auto; gap:8px; margin:16px 0 26px}
.ms-mood{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:20px; font-size:.92rem; color:var(--ink-2)}
.ms-jline{margin-bottom:22px}
.ms-closed{display:flex; align-items:center; gap:16px; padding:22px; border-radius:16px; background:var(--sky-06); border:1px solid var(--sky-24)}
.ms-closed-i{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff}
.ms-closed-i .i{width:22px; height:22px; stroke-width:2.4}
.ms-closed > div{flex:1; display:flex; flex-direction:column; gap:2px}
.ms-closed b{font-size:1.15rem; color:var(--navy)}
.ms-closed > div span{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--blue)}
.ms-closed > div span .i{width:16px; height:16px}
.ms-due{display:flex; flex-direction:column}
.ms-due li{display:flex; align-items:center; gap:14px; padding:10px 0}
.ms-due li + li{border-top:1px solid var(--hair)}
.ms-due li > span:nth-child(2){flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.ms-due b{font-size:.94rem; font-weight:600; color:var(--navy)}
.ms-due small{font-size:.8rem; color:var(--ink-3)}
.ms-cal{flex:none; width:42px; height:46px; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; border:1px solid var(--hair-2)}
.ms-cal b{font-size:1.05rem; font-weight:650; color:var(--navy)}
.ms-cal small{font-size:.7rem; color:var(--blue); margin-top:3px; font-weight:600}
.dot{flex:none; width:10px; height:10px; border-radius:50%}
.ms-big{font-size:.92rem; color:var(--ink-3); margin-bottom:4px}
.ms-big b{font-size:1.5rem; font-weight:650; letter-spacing:-.02em; color:var(--navy); margin-right:4px; font-variant-numeric:tabular-nums}
.ms-bars{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.ms-bars li{display:grid; grid-template-columns:110px minmax(0,1fr) 44px; align-items:center; gap:12px; font-size:.88rem; color:var(--ink-2)}
.ms-bars i{height:6px; border-radius:99px; background:linear-gradient(90deg, var(--blue) var(--p), var(--sky-16) var(--p))}
.ms-bars b{text-align:right; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}

/* calendar colours: five brand colours and grey */
.t-exam{background:var(--navy)} .t-test{background:var(--blue)} .t-assignment{background:var(--sky)}
.t-homework{background:repeating-linear-gradient(45deg, var(--sky) 0 3px, #fff 3px 5px); box-shadow:inset 0 0 0 1px var(--sky)}
.t-event{background:var(--hair-3)} .t-holiday{background:repeating-linear-gradient(45deg, var(--hair-3) 0 3px, #fff 3px 5px); box-shadow:inset 0 0 0 1px var(--hair-3)}
.t-personal{background:#fff; box-shadow:inset 0 0 0 1.5px var(--blue)}

/* Plan */
.ms-goals{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.ms-goals a{height:100%; display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:16px; border:1px solid var(--hair-2); transition:border-color .2s}
.ms-goals a:hover{border-color:var(--blue-40)}
.ms-goal-k{font-size:.82rem; font-weight:600; color:var(--blue)}
.ms-goals b{font-size:1.05rem; font-weight:600; color:var(--navy); line-height:1.3}
.ms-goal-p{display:flex; align-items:center; gap:10px; margin-top:auto}
.ms-goal-p small{font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ms-goal-n{font-size:.86rem; color:var(--ink-2); line-height:1.35; padding-top:10px; border-top:1px solid var(--hair)}
.ms-total{font-size:.9rem; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}
.ms-week{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px}
.ms-day{display:flex; flex-direction:column; gap:6px; min-height:180px; padding:10px; border-radius:14px; background:var(--sky-06)}
.ms-day.is-today{background:#fff; box-shadow:inset 0 0 0 1.5px var(--blue)}
.ms-day header{display:flex; justify-content:space-between; align-items:baseline; padding:0 2px 4px}
.ms-day header b{font-size:.9rem; color:var(--navy)}
.ms-day header small{font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ms-blk{position:relative; display:flex; flex-direction:column; gap:1px; padding:8px 26px 8px 10px; border-radius:10px; background:#fff; border:1px solid var(--hair)}
.ms-blk b{font-size:.84rem; font-weight:600; color:var(--navy); line-height:1.25}
.ms-blk small{font-size:.74rem; color:var(--ink-3); line-height:1.35}
.ms-blk.is-explore{background:var(--navy); border-color:var(--navy)}
.ms-blk.is-explore b{color:#fff} .ms-blk.is-explore small{color:var(--sky)}
.ms-blk button{position:absolute; top:6px; right:4px; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; color:var(--ink-4); opacity:.6}
.ms-blk button .i{width:12px; height:12px}
.ms-blk button:hover{opacity:1; background:var(--sky-10)}
.ms-blk.is-explore button{color:#fff}

/* Calendar */
.ms-grid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px}
.ms-dow{font-size:.78rem; font-weight:500; color:var(--ink-3); text-align:center; padding-bottom:4px}
.ms-cell{aspect-ratio:1.15; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:8px; border-radius:12px; border:1px solid var(--hair); text-align:left; transition:border-color .15s}
.ms-cell:hover{border-color:var(--blue-40)}
.ms-cell b{font-size:.88rem; font-weight:600; color:var(--navy)}
.ms-cell i{width:100%; height:5px; border-radius:3px}
.ms-cell.is-today{background:var(--sky-06)}
.ms-cell.is-today b{color:var(--blue)}
.ms-cell.is-sel{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
.ms-legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:.82rem; color:var(--ink-2)}
.ms-legend li{display:flex; align-items:center; gap:7px}
.ms-legend i{width:14px; height:8px; border-radius:3px}

/* Marks */
.ms-subj{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.ms-subj li{display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto; gap:2px 8px; padding:18px 20px}
.ms-subj li + li{border-left:1px solid var(--hair)}
.ms-subj-n{grid-column:1 / -1; font-size:.9rem; color:var(--ink-2)}
.ms-subj b{font-size:1.9rem; font-weight:650; letter-spacing:-.03em; color:var(--navy); font-variant-numeric:tabular-nums}
.ms-spark{grid-row:2; grid-column:2; width:96px; height:36px; align-self:center}
.ms-spark polyline{fill:none; stroke:var(--blue); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.ms-spark circle{fill:var(--blue)}
.ms-trend{display:inline-flex; align-items:center; gap:4px; font-size:.84rem; font-weight:600; color:var(--ink-2); white-space:nowrap}
.ms-trend .i{width:14px; height:14px; stroke-width:2.2}
.ms-trend.up{color:var(--blue)} .ms-trend.down{color:var(--navy)}
.ms-subj .ms-trend{grid-column:1 / -1}
.ms-table{width:100%; border-collapse:collapse; font-size:.92rem}
.ms-table th{text-align:left; font-size:.82rem; font-weight:500; color:var(--ink-3); padding:0 10px 10px 0; border-bottom:1px solid var(--hair-2)}
.ms-table td{padding:11px 10px 11px 0; border-bottom:1px solid var(--hair); color:var(--ink); font-variant-numeric:tabular-nums}
.ms-table .r{text-align:right}
.ms-table td b{font-weight:650; color:var(--navy)}

/* Journal */
.ms-private{display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:600; color:var(--navy)}
.ms-private .i{width:15px; height:15px}
.ms-jl{display:flex; flex-direction:column}
.ms-jl li{padding:14px 0}
.ms-jl li + li{border-top:1px solid var(--hair)}
.ms-jl-d{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--ink-3); margin-bottom:6px}
.ms-moodtag{font-size:.76rem; font-weight:600; color:var(--blue)}
.ms-jl p{font-size:.94rem; line-height:1.5; color:var(--ink)}

/* Insights */
.ms-eff{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; align-items:end; height:200px}
.ms-eff li{height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:8px}
.ms-eff-b{display:block; position:relative; height:var(--h); min-height:24px; border-radius:10px 10px 4px 4px; background:var(--blue); transform-origin:bottom; animation:ms-grow .9s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes ms-grow{from{transform:scaleY(0)}}
.ms-eff li:last-child .ms-eff-b{background:var(--navy)}
.ms-eff-b b{position:absolute; top:10px; left:12px; font-size:1rem; color:#fff; font-variant-numeric:tabular-nums}
.ms-eff small{font-size:.82rem; color:var(--ink-3)}
.ms-ins{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.ms-ins li{padding:20px; border-radius:16px; border:1px solid var(--hair-2)}
.ms-ins header{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:14px}
.ms-ins header > b{font-size:1.05rem; color:var(--navy); margin-right:auto}
.ms-ins h3{font-size:1rem; font-weight:600; color:var(--navy); margin-bottom:4px; letter-spacing:-.01em}
.ms-ins p{font-size:.92rem; line-height:1.5; color:var(--ink-2)}
.ms-worlds{border-top:1px solid var(--hair)}
.ms-worlds li{display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--hair)}
.ms-worlds li > b{flex:1; font-size:1rem; font-weight:600; color:var(--navy)}
.ms-wh{font-weight:650; color:var(--navy); font-variant-numeric:tabular-nums; min-width:48px; text-align:right}

/* Rewards */
.ms-streak{display:flex; align-items:center; gap:40px; flex-wrap:wrap; margin-bottom:20px}
.ms-streak-n{display:flex; align-items:baseline; gap:8px; color:var(--navy)}
.ms-streak-n .i{width:34px; height:34px; color:var(--blue); align-self:center}
.ms-streak-n b{font-size:3.4rem; font-weight:650; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.ms-streak-n span{font-size:1.1rem; color:var(--ink-2)}
.ms-streak dl{display:flex; gap:32px; margin:0}
.ms-streak dt{font-size:.84rem; color:var(--ink-3)}
.ms-streak dd{margin:2px 0 0; font-size:1.3rem; font-weight:650; color:var(--navy)}
.ms-days{display:grid; grid-template-columns:repeat(21, minmax(0,1fr)); gap:5px; max-width:640px}
.ms-days li{aspect-ratio:1; border-radius:6px}
.d-c{background:var(--blue)} .d-r{background:var(--sky)} .d-m{background:#fff; box-shadow:inset 0 0 0 1.5px var(--hair-3)}
.d-o{background:#fff; box-shadow:inset 0 0 0 2px var(--blue)}
.ms-badges{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:20px 14px; margin-bottom:18px}
.ms-badges li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px}
.ms-bd{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px; font-size:.82rem; font-weight:650; color:var(--ink-3);
  border:2px dashed var(--sky-24); font-variant-numeric:tabular-nums}
.ms-bd .i{width:26px; height:26px; stroke-width:2.4}
.ms-badges .got .ms-bd{background:var(--blue); border:0; color:#fff}
.ms-badges b{font-size:.9rem; font-weight:600; color:var(--navy); line-height:1.3}
.ms-badges li:not(.got) b{color:var(--ink-3); font-weight:500}
.ms-badges small{font-size:.76rem; color:var(--blue); font-weight:600}

/* Reminders */
.ms-rows{border-top:1px solid var(--hair)}
.ms-rows li{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--hair)}
.ms-rows li > span:not(.ms-ch):not(.ms-chip){flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ms-rows b{font-size:.98rem; font-weight:600; color:var(--navy)}
.ms-rows small{font-size:.84rem; color:var(--ink-3)}
.ms-ch{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--sky-10); color:var(--blue)}
.ms-digest{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; padding:20px; border-radius:16px; border:1px dashed var(--hair-3); opacity:.6; transition:opacity .2s}
.ms-digest.on{opacity:1; border-style:solid; border-color:var(--blue-40)}
.ms-prev{display:flex; flex-direction:column; gap:8px; font-size:.94rem; line-height:1.5; color:var(--ink)}
.ms-never b{font-size:.9rem; color:var(--navy)}
.ms-never ul{margin-top:8px; display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--ink-2)}
.ms-never li{display:flex; align-items:center; gap:8px}
.ms-never li::before{content:""; width:12px; height:2px; background:var(--hair-3)}

@media (prefers-reduced-motion:reduce){ .ms-eff-b{animation:none} }

@media (max-width:1100px){
  .ms-cols, .ms-cols-cal{grid-template-columns:minmax(0,1fr); gap:40px}
  .ms-goals{grid-template-columns:minmax(0,1fr)}
  .ms-week{grid-template-columns:repeat(4, minmax(0,1fr))}
  .ms-subj{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ms-subj li:nth-child(3){border-left:0}
  .ms-subj li:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media screen and (max-width:860px){
  .mys{margin-top:0}
  .ms-tabs{margin-bottom:24px; margin-inline:-16px; padding-inline:12px}
  .ms-ci li{flex-direction:column; align-items:flex-start; gap:10px}
  .ms-week{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ms-day{min-height:0}
  .ms-cell{aspect-ratio:auto; min-height:52px; padding:6px}
  .ms-cell b{font-size:.8rem}
  .ms-ins{grid-template-columns:minmax(0,1fr)}
  .ms-digest{grid-template-columns:minmax(0,1fr)}
  .ms-days{gap:3px}
  .ms-table th:nth-child(3), .ms-table td:nth-child(3){display:none}
  .ms-eff{height:160px}
}

/* My Space fixes */
.ms-streakchip .i{width:17px; height:17px; color:var(--sky)}
.ms-streak-n .i{stroke-width:2}
@media screen and (max-width:860px){
  .ms-mood{flex-direction:column; align-items:stretch}
  .ms-mood .ms-seg{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-radius:14px}
  .ms-mood .ms-seg button{padding:8px 2px; font-size:.76rem; white-space:normal; border-radius:10px}
  .ms-ci .ms-seg{width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media screen and (max-width:860px){
  .mys .c-sh:has(.ms-seg){flex-wrap:wrap}
  .mys .c-sh-r:has(.ms-seg){margin-left:0; width:100%; justify-content:space-between; align-items:center}
}

/* =====================================================================
   Round 5 (2026-10-12, "things are hanging somewhere somewhere"):
   structure. A soft page background, every section a white card, cards
   on one 12-column grid at full width, one page-header pattern.
   ===================================================================== */
/* one page background for the whole signed-in app */
.col{background:#F4F7FB}
@media (min-width:861px){ .col .top{background:#fff} }

.pg{display:flex; flex-direction:column}
.pg-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; margin-bottom:24px}
.pg-t{font-size:clamp(1.6rem, 1.3rem + .8vw, 2rem); font-weight:600; letter-spacing:-.03em; line-height:1.15; color:var(--navy)}
.pg-l{margin-top:4px; font-size:1rem; color:var(--ink-2)}
.pg-a{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.pg-a .btn{background:#fff}
.pg-streak{display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 16px; border-radius:999px; background:#fff; border:1px solid var(--hair-2);
  font-size:.9rem; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; transition:border-color .2s}
.pg-streak:hover{border-color:var(--blue-40)}
.pg-streak .i{width:17px; height:17px; color:var(--blue)}

.pg-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px; align-items:stretch}
.span-4{grid-column:span 4} .span-5{grid-column:span 5} .span-7{grid-column:span 7} .span-8{grid-column:span 8} .span-12{grid-column:1 / -1}
.card, .mys .c-sec{display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid rgba(16,34,64,.07); border-radius:18px;
  padding:22px 24px; box-shadow:0 1px 2px rgba(16,34,64,.04)}
.card-h{display:flex; align-items:center; gap:10px; min-height:28px; margin-bottom:16px}
.card-h h2{display:flex; align-items:center; gap:8px; font-size:1.06rem; font-weight:600; letter-spacing:-.015em; color:var(--navy)}
.card-l{margin-left:auto; font-size:.86rem; font-weight:500; color:var(--ink-3); white-space:nowrap}
.card-l:hover{color:var(--blue)}
.card-r{margin-left:auto; font-size:.86rem; color:var(--ink-2)}
.card-f{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:18px}
.c-n{font-size:.74rem; min-width:22px; height:22px}

/* Dashboard */
.card-path{margin-bottom:20px; padding:26px 28px 22px}
.card-path .jr{margin:0; padding:0; border:0}
.card-path .jr::before, .card-path .jr::after{top:17px}
.card-path .jr::before{background:var(--sky-24)}
.card-path .jr::after{background:var(--blue)}
.card-path .jr-dot{background:#fff; border-color:var(--sky-24); color:var(--ink-3)}
.card-path .jr .done .jr-dot{background:var(--blue); border-color:var(--blue); color:#fff}
.card-path .jr .cur .jr-dot{background:#fff; border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 6px var(--blue-24)}
.card-path .jr-k{color:var(--navy)}
.card-path .jr li:not(.done):not(.cur) .jr-k{color:var(--ink-3); font-weight:500}
.card-path .jr-v{color:var(--ink-3)}
.card-path .jr .cur .jr-v{color:var(--blue)}
.card-next{background:linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--blue-40), rgba(16,34,64,.07)) border-box; border-color:transparent}
.cn-t{font-size:1.45rem; font-weight:600; letter-spacing:-.025em; line-height:1.25; color:var(--navy); max-width:28ch}
.cn-m{margin-top:12px}
.cn-due{display:inline-flex; padding:4px 11px; border-radius:999px; font-size:.8rem; font-weight:600; background:var(--sky-16); color:var(--navy)}
.cn-due.now{background:var(--blue); color:#fff}
.cn-a{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:24px}
.card .c-tasks, .card .c-cars{border-top:0}
.card .c-tasks li:first-child label{padding-top:4px}
.card .c-cars li:last-child{border-bottom:0; padding-bottom:0}
.card .c-cars li:first-child{padding-top:0}
.c-car-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.card .c-prog{width:100%; max-width:240px; gap:10px; font-size:.8rem}
.card .c-prog small{flex:none; color:var(--blue); font-weight:600; min-width:44px}
.card .c-prog.fin small{color:var(--navy)}
.card .c-prog.fin .v2-bar i{background:var(--navy)}
.card .c-add{margin-top:auto; padding-top:14px}

/* Invite */
.c-code{display:flex; align-items:center; gap:8px}
.card-code .c-code b{font-size:2.1rem; font-weight:650; letter-spacing:.08em; color:var(--navy); font-variant-numeric:tabular-nums}
.iv-segs{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.card .ms{padding-top:2px}
.card .ms-line{top:24px}
.card .iv-st{background:var(--sky-16); color:var(--navy)}
.card .iv-st.done{background:none; color:var(--blue); padding-right:0}
.card .iv-frs li:first-child{padding-top:0}

/* My Space: tabs on the page background, every section a card */
.mys{max-width:none; margin:0}
.mys .ms-tabs{margin-bottom:20px}
.mys .ms-body{gap:20px}
.mys .ms-cols{gap:20px}
.mys .ms-main, .mys .ms-side{gap:20px}
.mys .c-sh{margin-bottom:16px}
.mys .c-sh h2{font-size:1.06rem; letter-spacing:-.015em}
.mys .ms-ci, .mys .ms-rows, .mys .ms-worlds{border-top:0}
.mys .ms-ci li:last-child, .mys .ms-rows li:last-child, .mys .ms-worlds li:last-child{border-bottom:0}
.mys .ms-ci li:first-child, .mys .ms-rows li:first-child, .mys .ms-worlds li:first-child{padding-top:0}
.mys .ms-subj{border:0; margin:-6px -8px}
.mys .ms-goals a, .mys .ms-ins li{border:0; background:var(--sky-06)}
.mys .ms-goals a:hover{background:var(--sky-10)}
.mys .ms-goal-n{border-top-color:var(--sky-24)}
.mys .ms-closed{border:0}
.mys .ms-digest{border-radius:14px}
.mys .ms-table th{padding-top:0}

@media (max-width:1100px){
  .span-4, .span-5, .span-7, .span-8{grid-column:1 / -1}
}
@media screen and (max-width:860px){
  .pg-head{align-items:flex-start; margin-bottom:18px}
  .pg-grid{gap:14px}
  .card, .mys .c-sec{padding:18px 16px; border-radius:16px}
  .card-path{padding:18px 12px 14px; margin-bottom:14px}
  .card-path .jr::before, .card-path .jr::after{top:14px}
  .cn-t{font-size:1.2rem}
  .cn-a .btn{flex:1 1 auto; justify-content:center}
  .mys .ms-body, .mys .ms-cols, .mys .ms-main, .mys .ms-side{gap:14px}
  .iv-segs{justify-content:flex-start; width:100%}
  .card-h:has(.iv-segs){flex-wrap:wrap}
}
.cn-then{display:flex; flex-direction:column; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--hair)}
.cn-then li{display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:baseline; gap:10px; font-size:.94rem; color:var(--ink-2)}
.cn-then li > span{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.74rem; font-weight:600; color:var(--ink-3);
  border:1.5px solid var(--hair-2); align-self:center}
.cn-then small{font-size:.82rem; color:var(--ink-3); white-space:nowrap}
.iv-more{align-items:center; justify-content:space-between; border-top:1px solid var(--hair); margin-top:auto; padding-top:16px}
.iv-more b{font-size:.92rem; font-weight:600; color:var(--navy)}
.card .iv-frs{margin-bottom:16px}
.mys .c-sh-r{align-items:center} .ms-total{line-height:1}

/* =====================================================================
   Round 6 (2026-10-12): Invite moves to the top bar (a dialog, the way
   Duolingo, Discord, Notion, CRED and Swiggy do it); My Space gets a
   calmer type scale, short words, icons on the tabs, faces for mood.
   ===================================================================== */

/* calmer type: one step down everywhere on these pages */
.pg-t{font-size:clamp(1.45rem, 1.25rem + .5vw, 1.75rem)}
.pg-l{font-size:.92rem; color:var(--ink-3)}
.card-h h2, .mys .c-sh h2{font-size:.98rem}
.cn-t{font-size:1.2rem; max-width:32ch}
.cn-then li{font-size:.88rem}
.c-task{font-size:.92rem}
.c-cars b{font-size:.94rem}
.mys .ms-ci-b b, .mys .ms-rows b, .mys .ms-worlds li > b, .ms-goals b{font-size:.94rem}
.mys .ms-ci-b small, .mys .ms-rows small, .ms-due small{font-size:.78rem}
.ms-due b{font-size:.88rem}
.ms-big b{font-size:1.25rem}
.ms-big{font-size:.86rem}
.ms-subj b{font-size:1.55rem}
.ms-streak-n b{font-size:2.6rem}
.ms-ins h3{font-size:.94rem}
.ms-ins p{font-size:.86rem}
.ms-table{font-size:.88rem}
.ms-jl p{font-size:.9rem}
.ms-prev{font-size:.9rem}

/* one line only, never a paragraph */
.ms-due b, .ms-goal-n, .cn-then li, .c-task, .ms-jl p{overflow:hidden; text-overflow:ellipsis}
.ms-due b, .ms-goal-n{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; white-space:normal}
.ms-jl p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.cn-then li{white-space:nowrap}

/* the Invite button in the top bar */
.tb-invite{flex:none; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px 0 13px; border-radius:999px;
  background:var(--blue-24); color:var(--blue); font-size:.88rem; font-weight:600; transition:background-color .2s}
.tb-invite:hover{background:var(--blue-40)}
.tb-invite .i{width:17px; height:17px}
.top .search + .tb-invite, .top .tb-invite{margin-left:0}
.top:not(:has(.search)) .tb-invite{margin-left:auto}
.top:not(:has(.search)) .tb-invite + .v2-me-av{margin-left:0}
.more-in button[data-v2act]{display:flex; align-items:center; gap:12px; width:100%; text-align:left}

/* the invite dialog */
.dlg.dlg-invite{width:min(440px, calc(100vw - 32px))}
.ivd{display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 4px 4px}
.ivd-i{width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:var(--blue-24); color:var(--blue); margin-bottom:14px}
.ivd-i .i{width:28px; height:28px}
.ivd-t{font-size:1.35rem; font-weight:600; letter-spacing:-.025em; color:var(--navy)}
.ivd-l{margin-top:4px; font-size:.92rem; color:var(--ink-3)}
.ivd-code{width:100%; display:flex; align-items:center; gap:10px; margin-top:22px; padding:6px 6px 6px 14px; border-radius:14px; background:var(--sky-06); border:1px solid var(--sky-24)}
.ivd-code span{flex:1; min-width:0; text-align:left; font-size:.86rem; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivd-share{width:100%; display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:12px}
.ivd-share .v2-wa{justify-content:center}
.ivd-goal{width:100%; display:flex; flex-direction:column; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--hair); text-align:left}
.ivd-goal > span{display:flex; justify-content:space-between; font-size:.86rem}
.ivd-goal b{color:var(--navy)} .ivd-goal small{color:var(--ink-3); font-size:.82rem}
.ivd-goal .v2-bar{flex:none}
.ivd-fr{width:100%; display:flex; align-items:center; gap:10px; margin-top:16px; font-size:.86rem; color:var(--ink-2)}
.ivd-avs{display:flex}
.ivd-avs .av{width:28px; height:28px; font-size:.64rem; background:var(--sky-16); color:var(--navy); box-shadow:0 0 0 2px #fff}
.ivd-avs .av + .av{margin-left:-8px}
.ivd-lb{margin-left:auto; font-weight:600; color:var(--blue)}
.ivd-lb:hover{text-decoration:underline; text-underline-offset:3px}
.ivd-code-s{margin-top:14px; font-size:.8rem; color:var(--ink-3)}
.ivd-code-s b{color:var(--navy); letter-spacing:.08em}

/* My Space header and tabs */
.pg-ib{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--hair-2); color:var(--navy); transition:border-color .2s, color .2s}
.pg-ib:hover, .pg-ib[aria-current]{border-color:var(--blue); color:var(--blue)}
.pg-ib .i{width:19px; height:19px}
.mys .ms-tabs{gap:2px}
.mys .ms-tabs a{display:inline-flex; align-items:center; gap:8px; padding:10px 14px 12px; font-size:.9rem}
.mys .ms-tabs a .i{width:17px; height:17px; opacity:.75}
.mys .ms-tabs a[aria-current="page"] .i{opacity:1; color:var(--blue)}

/* mood as faces */
.ms-faces{display:flex; gap:6px}
.ms-faces button{display:flex; flex-direction:column; align-items:center; gap:4px; width:58px; padding:8px 0 6px; border-radius:12px; color:var(--ink-3); transition:background-color .15s, color .15s}
.ms-faces button .i{width:26px; height:26px; stroke-width:1.6}
.ms-faces button span{font-size:.7rem; font-weight:500}
.ms-faces button:hover{background:var(--sky-06); color:var(--navy)}
.ms-faces button[aria-pressed="true"]{background:var(--blue-24); color:var(--blue)}
.ms-faces button[aria-pressed="true"] span{font-weight:600}

/* Rewards */
.ms-sw-row{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--hair); font-size:.88rem; color:var(--ink-2)}
.mys .ms-badges{grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 8px; margin-bottom:0}
.mys .ms-bd{width:52px; height:52px}
.mys .ms-bd .i{width:22px; height:22px}
.mys .ms-badges b{font-size:.8rem}
.mys .iv-frs{margin-bottom:16px}
.mys .iv-frs li:first-child{padding-top:0}
.mys .iv-st{background:var(--sky-16); color:var(--navy)}
.mys .iv-st.done{background:var(--blue); color:#fff}
.ms-inv{align-self:stretch; justify-content:center}
.mys .c-sh-r .ms-seg + .ms-seg{margin-left:4px}

@media screen and (max-width:860px){
  .tb-invite{width:38px; padding:0; justify-content:center; background:rgba(255,255,255,.18); color:#fff}
  .tb-invite span{display:none}
  .ms-faces{justify-content:space-between}
  .ms-faces button{flex:1; width:auto}
  .mys .ms-tabs a{padding:10px 10px 12px}
  .mys .ms-tabs a span{font-size:.86rem}
}
.ivd-avs .av{width:30px; height:30px; font-size:.66rem} .ivd-avs .av + .av{margin-left:-6px}

/* =====================================================================
   Round 7 (2026-10-12): one way to add things. Every card that takes
   new items has "+ Add" in its top-right corner; it opens a small dialog.
   Today's rows share one right-hand column; mood and journal sit in a
   two-column block; the day's actions sit bottom right.
   ===================================================================== */
.ms-add{flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px 0 11px; border-radius:999px;
  background:var(--blue); color:#fff; font-size:.84rem; font-weight:600; white-space:nowrap; transition:background-color .2s}
.ms-add:hover{background:var(--navy)}
.ms-add .i{width:16px; height:16px; stroke-width:2.2}
.mys .c-sh-r{gap:8px}

/* Today: every row ends in the same right-hand column */
.mys .ms-ci li{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; align-items:center}
.ms-ci-r{display:flex; justify-content:flex-end; align-items:center; gap:8px}
.ms-ci-r .ms-seg{width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
.ms-ci-r .ms-seg button{padding:7px 0}
.ms-ci-r .ms-tag{font-size:.8rem; font-weight:600; color:var(--blue); padding:4px 10px; border-radius:999px; background:var(--blue-24)}
.ms-x{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--ink-3)}
.ms-x:hover{background:var(--sky-10); color:var(--navy)}
.ms-x .i{width:15px; height:15px}
.ms-refl{display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:16px 20px; margin-top:4px; padding-top:20px; border-top:1px solid var(--hair)}
.ms-refl-k{font-size:.88rem; font-weight:500; color:var(--ink-2)}
.ms-refl .ms-faces{justify-content:flex-start}
.ms-in{width:100%; font-size:.92rem; color:var(--ink); padding:10px 12px; border-radius:10px; border:1px solid var(--hair-2); background:#fff; outline:none; transition:border-color .2s}
.ms-in:focus{border-color:var(--blue)}
.ms-in::placeholder{color:var(--ink-3)}
.ms-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--hair)}

/* Marks: the table takes the full card */
.mys .ms-table td, .mys .ms-table th{padding-right:16px}

/* the add dialog */
.ms-dlg{width:min(460px, calc(100vw - 32px)); padding:0; border:0; border-radius:20px; background:#fff; color:var(--ink);
  box-shadow:0 30px 60px -24px rgba(16,34,64,.45)}
.ms-dlg::backdrop{background:rgba(16,34,64,.36); backdrop-filter:blur(3px)}
.ms-dlg[open]{animation:ms-pop .22s cubic-bezier(.16,1,.3,1)}
@keyframes ms-pop{from{opacity:0; transform:translateY(8px) scale(.98)}}
.ms-dlg-in header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 4px 24px}
.ms-dlg-in h2{font-size:1.1rem; font-weight:600; letter-spacing:-.02em; color:var(--navy)}
.ms-dlg-b{display:flex; flex-direction:column; gap:14px; padding:14px 24px 4px}
.ms-dlg-in footer{display:flex; justify-content:flex-end; padding:18px 24px 22px}
.ms-dlg .ms-f{gap:6px}
.ms-dlg .ms-f input, .ms-dlg .ms-f select{font-size:.92rem}
@media (prefers-reduced-motion:reduce){ .ms-dlg[open]{animation:none} }

@media screen and (max-width:860px){
  .mys .ms-ci li{grid-template-columns:minmax(0,1fr); gap:10px}
  .ms-ci-r{justify-content:flex-start}
  .ms-refl{grid-template-columns:minmax(0,1fr); gap:8px}
  .ms-refl .ms-faces{margin-bottom:8px}
  .ms-foot{flex-direction:column-reverse}
  .ms-foot .btn{justify-content:center}
  .ms-add span{display:none}
  .ms-add{width:34px; padding:0; justify-content:center}
  .ms-dlg{margin:auto auto 0; width:100vw; max-width:100vw; border-radius:20px 20px 0 0}
}

/* =====================================================================
   Round 8 (2026-10-12): the same rules on every page. One background,
   one page header, one section-title size, no helper lines, "+ Add" in
   the corner, white cards for grouped content.
   ===================================================================== */
/* section titles: one size everywhere */
.cs-t, .wsec-t{font-size:1.2rem; font-weight:600; letter-spacing:-.02em}
.wh-t{font-size:clamp(1.6rem, 1.3rem + .8vw, 2rem)}
.cs-l:empty{display:none}
.cs-head .lede:empty{display:none}
.cs-head .h1{font-size:clamp(1.45rem, 1.25rem + .5vw, 1.75rem); font-weight:600; letter-spacing:-.03em}
.v2-picks .v2-sh .v2-h{font-size:1.2rem}
.v2-worlds-h{font-size:1.2rem}
.back + .pg-head{margin-top:10px}

/* Report */
.main-report .pg-head{margin-bottom:20px}
.main-report .pg-a .btn{padding:10px 18px}

/* Saved careers and colleges */
.main-myspace .ms-panel{padding-top:0}
.main-myspace .cx-cards .cc{background:#fff}

/* the goal page: header, then white cards on the page background */
.pp .ol-goal .ol-head, .pp .ol-done .ol-head{margin-bottom:22px}
.pp .ol-goal .ol-title, .pp .ol-done .ol-title{font-size:clamp(1.45rem, 1.25rem + .5vw, 1.75rem)}
.pp .ol-sub{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:.92rem; color:var(--ink-3)}
.ol-chip{display:inline-flex; padding:3px 10px; border-radius:999px; background:var(--blue-24); color:var(--blue); font-size:.78rem; font-weight:600}
.pp .ol-goal .prog{margin-bottom:18px}
.pp .ol-goal .nxc{background:#fff; border:1px solid rgba(16,34,64,.07); box-shadow:0 1px 2px rgba(16,34,64,.04); border-radius:18px}
.pp .nxc-k{font-size:.98rem; font-weight:600; color:var(--blue); letter-spacing:-.01em; text-transform:none}
.pp .nxc-t{font-size:1.25rem}
.pp .ol-goal .grp{margin-top:20px; padding:22px 24px; border-radius:18px; background:#fff; border:1px solid rgba(16,34,64,.07); box-shadow:0 1px 2px rgba(16,34,64,.04)}
.pp .ol-goal .grp-h{align-items:center; margin-bottom:12px}
.pp .ol-goal .grp-h .ms-add{margin-left:auto}
.pp .ol-goal .its > li:first-child{border-top:0}
.pp .ol-goal .g-foot{border-top:0}

/* Journal: the writing box uses the page font */
.ms-form textarea{font-family:var(--f); font-variation-settings:var(--axes)}
.mys .ms-form .ms-refl{border-top:0; padding-top:4px}
.mys .ms-form .ms-foot{margin-top:6px}
.pg-a .btn{background:revert-layer}
.pg-a .btn-ghost{background:#fff}
.pg-a .btn-primary{background:var(--blue); color:#fff}
.pg-a .btn-primary:hover{background:var(--navy)}
.cc-cmp{border-style:solid}

/* =====================================================================
   Round 9 (2026-10-12): usability. Open any item to edit it, Undo after
   every delete, drag blocks between days, titles in calendar days, a
   filter on Marks, an action on every insight, numbers on tabs.
   ===================================================================== */
/* a number on a tab: something to do there */
.ms-tn{font-style:normal; min-width:18px; height:18px; padding:0 5px; border-radius:99px; display:inline-grid; place-items:center;
  background:var(--blue); color:#fff; font-size:.68rem; font-weight:650; font-variant-numeric:tabular-nums}
/* a quiet text button that sits next to "+ Add" */
.ms-tb{flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:999px; background:#fff;
  border:1px solid var(--blue-40); color:var(--blue); font-size:.84rem; font-weight:600; white-space:nowrap; transition:background-color .15s, border-color .15s}
.ms-tb:hover{background:var(--sky-06); border-color:var(--blue)}
.ms-tb .i{width:15px; height:15px; stroke-width:2.2}
.ms-ib.sm{width:32px; height:32px; border-radius:9px}

/* Undo bar */
.ms-snack{position:fixed; left:50%; bottom:24px; z-index:160; display:flex; align-items:center; gap:14px; min-height:46px; padding:6px 6px 6px 18px; border-radius:14px;
  background:var(--navy); color:#fff; font-size:.88rem; font-weight:500; box-shadow:0 18px 40px -16px rgba(16,34,64,.6);
  opacity:0; transform:translate(-50%, 14px); pointer-events:none; transition:opacity .18s, transform .25s cubic-bezier(.16,1,.3,1)}
.ms-snack.on{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
.ms-snack:not(:has(button)){padding-right:18px}
.ms-snack button{height:34px; padding:0 14px; border-radius:9px; font-weight:650; color:var(--sky)}
.ms-snack button:hover{background:rgba(255,255,255,.1)}

/* Today */
.mys .ms-ci li.is-need .ms-seg{box-shadow:0 0 0 2px var(--blue); animation:ms-nudge .38s}
@keyframes ms-nudge{25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}
.ms-tmr{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px}
.ms-tmr b{font-size:.86rem; font-weight:600; color:var(--navy); margin-right:4px}
.ms-due li:has(.ms-due-b){padding:2px 0}
.ms-due-b{width:calc(100% + 16px); margin:0 -8px; display:flex; align-items:center; gap:14px; padding:8px; border-radius:12px; text-align:left; transition:background-color .15s}
.ms-due-b:hover{background:var(--sky-06)}
.ms-due-b > span:nth-child(2){flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.ms-due-b > .i{flex:none; width:15px; height:15px; color:var(--ink-3); opacity:0; transition:opacity .15s}
.ms-due-b:hover > .i, .ms-due-b:focus-visible > .i{opacity:1}
.ms-due small em{font-style:normal}
.ms-due small em.soon{color:var(--blue); font-weight:650}

/* Plan: blocks open on click and drag between days; "+" at the end of each day */
.ms-blk{width:100%; text-align:left; padding:8px 10px; cursor:pointer; transition:border-color .15s, box-shadow .15s, opacity .15s}
.ms-blk:hover{border-color:var(--blue-40); box-shadow:0 3px 10px -6px rgba(16,34,64,.35)}
.ms-blk[draggable="true"]{cursor:grab}
.ms-blk.is-drag{opacity:.35}
.ms-blk small + small{margin-top:0}
.ms-day.is-over{background:var(--blue-24); outline:2px dashed var(--blue); outline-offset:-2px}
.ms-day-add{margin-top:auto; height:32px; border-radius:10px; display:grid; place-items:center; color:var(--ink-3); border:1.5px dashed var(--sky-24);
  opacity:.55; transition:opacity .15s, color .15s, border-color .15s}
.ms-day:hover .ms-day-add, .ms-day-add:focus-visible{opacity:1}
.ms-day-add:hover{color:var(--blue); border-color:var(--blue)}
.ms-day-add .i{width:16px; height:16px}
.ms-wkpick{display:none}

/* Calendar: titles in the days */
.ms-cell{aspect-ratio:auto; min-height:96px; gap:3px; overflow:hidden}
.ms-cell.is-past b{color:var(--ink-3)}
.ms-ev{width:100%; min-width:0; display:flex; align-items:flex-start; gap:5px; font-size:.7rem; font-weight:500; line-height:1.25; color:var(--ink-2)}
.ms-ev i{flex:none; width:3px; align-self:stretch; min-height:12px; border-radius:2px}
.ms-ev span{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere}
.ms-ev + .ms-ev span{-webkit-line-clamp:1}
.ms-more{font-size:.68rem; font-weight:650; color:var(--blue)}

/* Marks: subjects filter the table, rows open to edit */
.mys .ms-subj{gap:6px; margin:-8px}
.ms-subj li{display:block; padding:0}
.ms-subj li + li{border-left:0}
.ms-subj-btn{width:100%; height:100%; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto; gap:2px 8px; padding:16px 18px; border-radius:14px;
  text-align:left; transition:background-color .15s, box-shadow .15s}
.ms-subj-btn:hover{background:var(--sky-06)}
.ms-subj-btn[aria-pressed="true"]{background:var(--blue-24); box-shadow:inset 0 0 0 1.5px var(--blue)}
.ms-clear{display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 6px 0 10px; border-radius:99px; background:var(--blue-24); color:var(--blue); font-size:.78rem; font-weight:600}
.ms-clear .i{width:13px; height:13px; stroke-width:2.2}
.ms-table tbody tr{cursor:pointer; transition:background-color .12s}
.ms-table tbody tr:hover{background:var(--sky-06)}
.mys .ms-table th:first-child, .mys .ms-table td:first-child{padding-left:10px}
.mys .ms-table .ed{width:44px; padding-block:0; padding-right:4px; text-align:right; vertical-align:middle}
.ms-ed{width:28px; height:28px; vertical-align:middle; border-radius:8px; display:inline-grid; place-items:center; color:var(--ink-3); opacity:0; transition:opacity .12s}
.ms-table tr:hover .ms-ed, .ms-ed:focus-visible{opacity:1}
.ms-ed:hover{background:var(--sky-10); color:var(--navy)}
.ms-ed .i{width:15px; height:15px}

/* the dialog: Delete on the left, the live percentage, one button */
.ms-dlg-in footer{align-items:center; gap:10px}
.ms-del{margin-right:auto}
.ms-pct{margin-right:auto; font-size:1.25rem; font-weight:650; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums}
.ms-del + .ms-pct{margin-right:0}

/* Journal */
.ms-jl li{padding:2px 0}
.ms-jl-b{width:calc(100% + 16px); margin:0 -8px; display:block; padding:10px 8px; border-radius:12px; text-align:left; transition:background-color .15s}
.ms-jl-b:hover{background:var(--sky-06)}
.ms-jl-b[aria-expanded="true"] p{display:block; -webkit-line-clamp:unset}
.ms-jl-face{display:inline-flex; color:var(--blue)}
.ms-jl-face .i{width:18px; height:18px}
.ms-jl-q{display:block; margin-bottom:2px; font-size:.78rem; font-weight:600; color:var(--navy)}

/* Insights */
.ms-eff{height:150px}
.ms-eff-b b{top:8px; font-size:.9rem}
.mys .ms-ins li{display:flex; flex-direction:column}
.ms-ins-a{align-self:flex-start; margin-top:14px}

/* Reminders: pick the time */
.ms-time{flex:none; height:34px; padding:0 10px; border-radius:9px; border:1px solid var(--hair-2); background:#fff; color:var(--navy); font:inherit; font-size:.86rem; font-weight:600}
.ms-time:disabled{opacity:.4}

@media (hover:none){ .ms-day-add, .ms-ed, .ms-due-b > .i{opacity:1} }
@media (prefers-reduced-motion:reduce){ .mys .ms-ci li.is-need .ms-seg{animation:none} .ms-snack{transition:none} }

@media screen and (max-width:860px){
  .mys .ms-tabs{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent)}
  .ms-snack{bottom:calc(84px + env(safe-area-inset-bottom)); width:calc(100vw - 32px); justify-content:space-between}
  .ms-tb span{display:none}
  .ms-tb{width:34px; padding:0; justify-content:center}
  .ms-tb:not(:has(.i)){width:auto; padding:0 12px}
  .ms-tb:not(:has(.i)) span, .ms-ins-a span{display:inline}
  .ms-ins-a{width:auto; padding:0 13px}
  /* Plan on a phone: pick a day, see that day */
  .ms-wkpick{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin-bottom:12px}
  .ms-wkpick button{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; border-radius:12px; background:var(--sky-06)}
  .ms-wkpick b{font-size:.8rem; font-weight:600; color:var(--navy)}
  .ms-wkpick small{font-size:.64rem; color:var(--ink-3); min-height:1.2em; font-variant-numeric:tabular-nums}
  .ms-wkpick .is-today b{color:var(--blue)}
  .ms-wkpick button[aria-pressed="true"]{background:var(--blue)}
  .ms-wkpick button[aria-pressed="true"] b, .ms-wkpick button[aria-pressed="true"] small{color:#fff}
  .ms-week{grid-template-columns:minmax(0,1fr)}
  .ms-day:not(.is-pick){display:none}
  .ms-day, .ms-day.is-today{padding:0; background:none; box-shadow:none}
  .ms-day header{display:none}
  .ms-blk{padding:12px 14px}
  .ms-blk b{font-size:.94rem} .ms-blk small{font-size:.8rem}
  .ms-day-add{height:44px; opacity:1}
  /* Calendar on a phone: bars, not titles */
  .ms-cell{min-height:54px}
  .ms-ev span, .ms-more{display:none}
  .ms-ev i{width:100%; height:5px; min-height:0; align-self:auto}
  .mys .ms-subj{margin:-4px}
}

/* Live (2026-10-12): a student's own account starts empty */
.ms-none{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.ms-cols.is-one{grid-template-columns:minmax(0,1fr)}
.d-n{background:var(--sky-06)}