/* Light only, by choice: always the bright Groundwork look.
   Layout: the Groundwork look (cream page, hand-lettered display, sunny illustrated panels).
   A sticky top bar switches views by hash: the public site (Home, Meet Anna Grace, Free practice, Book) and two app previews (Parent, Tutor).
   Booking, parent and tutor views are working previews with clearly marked sample data. */
:root {
  --bg: #FBF9F5; --card: #FFFFFF; --ink: #2A2520; --body: #4A443C; --muted: #6B645A;
  --line: #ECE7DE; --green: #1E7A55; --green-soft: #E7F3EC; --sun: #FFB627; --sun-soft: #FFF3D6;
  --panel: #FFEDBF; --heart: #B02E55; --heart-soft: #FDE8EE; --sky: #2E6BE6; --sky-soft: #E6EEFD; --on-green: #FFFFFF;
  --display: 'Gaegu', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --text: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 1px 2px rgba(45, 35, 20, .04), 0 6px 18px rgba(45, 35, 20, .06);
  --bar: rgba(251, 249, 245, .92);
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body { background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.6 }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bar) }
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.wrap { max-width: 880px; margin: 0 auto }
a { color: var(--green); font-weight: 700 }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 8px }
h1, h2, h3 { text-wrap: balance; margin: 0 }
h2 { font-size: 1.8rem; line-height: 1.2; font-weight: 900; letter-spacing: -.01em }
h3 { font-size: 1.08rem; font-weight: 800; line-height: 1.35 }
p { margin: 0 }
.eyebrow { font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--green) }
.muted { color: var(--muted) }
.body { color: var(--body) }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow) }
.fill { background: var(--sun-soft); color: var(--ink); border-radius: 6px; padding: 0 5px; font-weight: 700 }

/* Top bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bar); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; flex-wrap: wrap; padding-block: 6px }
.brand { display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--ink) }
.brand .word { font-family: var(--display); font-size: 2rem; line-height: 1 }
.brand .tag { font-weight: 800; font-size: .92rem; color: var(--green) }
.views { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; overflow-x: auto; max-width: 100% }
.views a { text-decoration: none; color: var(--body); font-weight: 800; font-size: .92rem; padding: 8px 12px; border-radius: 10px; white-space: nowrap }
.views a[aria-current="page"] { background: var(--green); color: var(--on-green) }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--green); color: var(--on-green); font: 800 1rem var(--text); text-decoration: none }
.btn:hover { filter: brightness(1.06) }
.btn.line { background: transparent; color: var(--ink); border: 1.5px solid var(--line) }
.btn.sun { background: var(--sun); color: #2A2520 }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .92rem; border-radius: 11px }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none }
.pill { display: inline-flex; gap: 8px; align-items: center; background: var(--sun-soft); color: var(--ink); font-weight: 800; font-size: .88rem; padding: 6px 12px; border-radius: 999px }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun) }
.preview { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; background: var(--sky-soft); border-radius: 14px; padding: 12px 14px; font-size: .93rem; color: var(--ink) }
.preview b { white-space: nowrap }

main { padding-block: 8px 56px }
section { margin-top: 64px; scroll-margin-top: 84px }
.sec-head { display: grid; gap: 6px; margin-bottom: 20px; max-width: 62ch }

/* Home: hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; margin-top: 28px }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.1rem); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; margin-top: 14px }
.hero h1 .hand { font-family: var(--display); color: var(--green); font-size: 1.15em; letter-spacing: 0 }
.lede { font-size: 1.15rem; color: var(--body); margin-top: 14px; max-width: 54ch }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px }
.trust { display: flex; gap: 14px 22px; flex-wrap: wrap; margin-top: 18px; font-weight: 700; font-size: .93rem; color: var(--body) }
.trust span::before { content: "✓"; color: var(--green); font-weight: 900; margin-right: 6px }
.stage { position: relative }
.art { background: var(--panel); border-radius: 30px; padding: 18px 12px 8px }
.art svg { display: block; width: 100%; height: auto }
.tutor-card { position: absolute; left: -14px; bottom: -26px; display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--sun-soft); border: 2px dashed var(--line); display: grid; place-items: center; font-family: var(--display); font-size: 1.5rem; color: var(--green); flex: none }
.tutor-card b { display: block; font-size: .98rem; line-height: 1.2 }
.tutor-card span { font-size: .84rem; color: var(--muted) }

/* Home: grids */
.helps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.help { padding: 16px; min-width: 0 }
.help .chip { display: inline-block; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px }
.help ul { margin: 8px 0 0; padding-left: 18px; color: var(--body); font-size: .95rem }
.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.signs div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 14px 44px; position: relative; font-weight: 700; color: var(--ink); min-width: 0 }
.signs div::before { content: "✓"; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 900; font-size: .8rem; display: grid; place-items: center }
.both { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.both .card { padding: 18px; min-width: 0 }
.both p { color: var(--body); font-size: .96rem; margin-top: 4px }
.chip-s { display: inline-block; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; color: var(--ink) }
.prices.four { grid-template-columns: repeat(4, 1fr) }
.summer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; margin-top: 12px; background: var(--sun-soft); border-color: transparent; flex-wrap: wrap }
.summer > div:first-child { flex: 1 1 320px; min-width: 0 }
.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.tips .card { padding: 16px; min-width: 0 }
.tips p { color: var(--body); font-size: .94rem; margin-top: 4px }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.rung { background: var(--green-soft); border-radius: 16px; padding: 14px; min-width: 0 }
.rung .n { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--green) }
.rung b { display: block }
.rung span { color: var(--body); font-size: .92rem }

/* Session timeline: an hour, to scale */
.hour { display: flex; height: 54px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line) }
.hour div { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; color: #2A2520; text-align: center; padding: 0 4px; min-width: 0 }
.hour-key { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px }
.hour-key div { min-width: 0 }
.hour-key b { display: block; font-size: .95rem }
.hour-key span { font-size: .88rem; color: var(--body) }
.hour-key i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 800; font-size: .82rem }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: s }
.steps li { padding: 18px; min-width: 0 }
.steps li::before { counter-increment: s; content: counter(s); display: block; width: 42px; height: 42px; border-radius: 50%; background: var(--sun-soft); font: 700 1.6rem/42px var(--display); text-align: center; margin-bottom: 10px }
.steps p { color: var(--body); font-size: .96rem; margin-top: 4px }

.about { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start }
.photo { aspect-ratio: 4 / 5; width: 100%; max-width: 100%; border-radius: 24px; background: var(--sun-soft); border: 2px dashed var(--line);
  display: grid; place-items: center; text-align: center; color: var(--muted); font-weight: 800; font-size: .9rem; padding: 12px }
.about .text { color: var(--body); min-width: 0; display: grid; gap: 12px }
.facts { display: flex; flex-wrap: wrap; gap: 8px }
.facts span { background: var(--green-soft); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: .88rem }

.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.price { padding: 20px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.price.main { border: 2px solid var(--green) }
.price .tag { justify-self: start; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: var(--green); color: var(--on-green); border-radius: 999px; padding: 3px 9px }
.amt { font-size: 2.2rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums }
.amt small { font-size: .92rem; font-weight: 700; color: var(--muted) }
.price p { color: var(--body); font-size: .95rem }
.policies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px }
.policies div { padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: .93rem; color: var(--body); min-width: 0 }
.policies b { display: block; color: var(--ink) }

.area { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.area .card { padding: 18px; min-width: 0 }
.area ul { margin: 8px 0 0; padding-left: 18px; color: var(--body) }

details { border-bottom: 1px solid var(--line); padding-block: 14px }
summary { cursor: pointer; font-weight: 800; font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; gap: 12px }
summary::-webkit-details-marker { display: none }
summary::after { content: "+"; color: var(--green); font-weight: 900 }
details[open] summary::after { content: "–" }
details p { color: var(--body); margin-top: 8px; max-width: 65ch }

.signup { padding: 24px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px }
form { display: grid; gap: 12px }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
label { display: grid; gap: 6px; font-weight: 800; font-size: .93rem; min-width: 0 }
input, select, textarea { font: 600 1rem var(--text); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px; min-height: 48px; width: 100% }
textarea { min-height: 90px; resize: vertical }
.status { border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: .95rem }
.status.ok { background: var(--green-soft) }
.status.bad { background: var(--heart-soft); color: var(--ink) }

footer { margin-top: 64px; padding-block: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap }
footer .word { font-family: var(--display); font-size: 1.4rem; color: var(--ink) }

/* Book */
.flow { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; margin-top: 22px }
.stepper { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap }
.stepper span { font-size: .82rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted) }
.stepper span.on { background: var(--green); color: var(--on-green); border-color: var(--green) }
.choices { display: grid; gap: 10px }
.choice { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--line); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100% }
.choice[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft) }
.choice b { display: block }
.choice span { color: var(--muted); font-size: .9rem }
.choice .cost { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap }
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.day { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 8px; display: grid; gap: 6px; align-content: start; min-width: 0 }
.day h4 { margin: 0 0 2px; font-size: .86rem; text-align: center }
.day h4 small { display: block; color: var(--muted); font-weight: 700 }
.slot { font: 800 .86rem var(--text); font-variant-numeric: tabular-nums; padding: 8px 4px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; min-height: 38px }
.slot[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--on-green) }
.slot[disabled] { text-decoration: line-through; color: var(--muted); cursor: not-allowed; opacity: .6 }
.weeknav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px }
.summary { padding: 18px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 80px); display: grid; gap: 10px }
.summary .line { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem }
.summary .line span:first-child { color: var(--muted) }
.summary .total { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 900; font-size: 1.1rem; font-variant-numeric: tabular-nums }

/* Parents */
.dash { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 18px }
.dash .card { padding: 18px; min-width: 0 }
.kidhead { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap }
.kidhead .avatar { width: 60px; height: 60px; border-style: solid; border-color: var(--green-soft); background: var(--green-soft) }
.stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px }
.stat div { background: var(--bg); border-radius: 14px; padding: 12px; min-width: 0 }
.stat b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1 }
.stat span { font-size: .84rem; color: var(--muted) }
.skills { display: grid; gap: 12px; margin-top: 8px }
.skill .top { display: flex; justify-content: space-between; gap: 8px; font-size: .95rem }
.skill .top b { font-weight: 800 }
.skill .top span { font-size: .84rem; font-weight: 800; color: var(--green) }
.rungs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px }
.rungs i { height: 10px; border-radius: 999px; background: var(--line) }
.rungs i.on { background: var(--green) }
.note { border-left: 4px solid var(--sun); padding: 2px 0 2px 12px; display: grid; gap: 4px }
.note + .note { margin-top: 14px }
.note .when { font-size: .82rem; font-weight: 800; color: var(--muted) }
.note p { color: var(--body); font-size: .95rem }
.home-try { display: grid; gap: 10px }
.home-try a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--green-soft); text-decoration: none; color: var(--ink) }
.home-try a span { font-weight: 600; font-size: .9rem; color: var(--body) }
.home-try a.pp { background: var(--bg); border: 1px solid var(--line) }
.home-try a.opt { background: var(--green-soft) }
.report { display: grid; gap: 10px; margin-top: 12px }
.report div { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 10px 12px; background: var(--bg); border-radius: 12px; font-variant-numeric: tabular-nums }
.report b { font-size: .92rem; min-width: 0 }
.report .from { color: var(--muted); font-weight: 800 }
.report .arrow { color: var(--muted) }
.report .to { color: var(--green); font-weight: 900; font-size: 1.1rem }

/* Tutor */
.today { display: grid; gap: 10px }
.appt { display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line) }
.appt time { font-weight: 900; font-variant-numeric: tabular-nums }
.appt span { color: var(--muted); font-size: .88rem }
.tag-s { font-size: .76rem; font-weight: 900; padding: 4px 8px; border-radius: 999px; white-space: nowrap }
table { width: 100%; border-collapse: collapse; font-size: .94rem }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap }
th { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
td.num { font-variant-numeric: tabular-nums }
.scroll { overflow-x: auto }
.earn { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 10px }
.earn div { flex: 1; display: grid; gap: 4px; justify-items: center; align-content: end; height: 100%; min-width: 0 }
.earn i { width: 100%; max-width: 40px; border-radius: 8px 8px 4px 4px; background: var(--green) }
.earn i.now { background: var(--sun) }
.earn span { font-size: .78rem; color: var(--muted); font-weight: 800 }
.earn b { font-size: .78rem; font-variant-numeric: tabular-nums }

@media (max-width: 760px) {
  .hero, .signup, .flow, .dash, .about, .area { grid-template-columns: 1fr }
  .helps { grid-template-columns: 1fr 1fr }
  .steps, .prices, .prices.four, .policies, .both, .tips, .signs { grid-template-columns: 1fr }
  .ladder { grid-template-columns: 1fr 1fr }
  .hour-key { grid-template-columns: 1fr 1fr }
  .row { grid-template-columns: 1fr }
  .tutor-card { left: 10px }
  .photo { max-width: 240px }
  .summary { position: static }
  .week { grid-template-columns: repeat(5, minmax(64px, 1fr)); overflow-x: auto }
  .hour div { font-size: .7rem }
}
@media (min-width: 761px) and (max-width: 940px) { .prices.four { grid-template-columns: 1fr 1fr } }
@media (max-width: 440px) { .helps { grid-template-columns: 1fr } .stat { grid-template-columns: 1fr 1fr 1fr } }
@media (prefers-reduced-motion: no-preference) {
  .art .leaf { transform-box: fill-box; transform-origin: bottom; animation: sway 6s ease-in-out infinite }
  .art .rays { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite }
  @keyframes sway { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-3deg) } }
  @keyframes spin { to { transform: rotate(360deg) } }
}

/* ---------- App previews (parent, tutor) ---------- */
.bar .wrap, .wrap.wide { max-width: 1120px }
.views .sep { width: 1px; background: var(--line); margin: 4px 2px; flex: none }
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; margin-top: 18px; align-items: start }
.side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); display: grid; gap: 2px; padding: 10px }
.side .who { display: flex; gap: 10px; align-items: center; padding: 6px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line) }
.side .who b { display: block; line-height: 1.2; font-size: .95rem }
.side .who span { font-size: .8rem; color: var(--muted) }
.side button { font: 800 .95rem var(--text); text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; border: 0; background: transparent; color: var(--body); cursor: pointer; min-height: 42px; white-space: nowrap }
.side button:hover { background: var(--green-soft) }
.side button[aria-current="true"] { background: var(--green); color: var(--on-green) }
.side .badge { background: var(--heart); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; font-weight: 900 }
.avatar.sm { width: 40px; height: 40px; font-size: 1.15rem; border-style: solid; border-color: var(--green-soft); background: var(--green-soft) }
.pane { display: grid; gap: 14px; min-width: 0 }
.pane > .card, .grid2 > .card, .grid3 > .card { padding: 18px; min-width: 0 }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; min-width: 0 }
.kpi b { display: block; font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15 }
.kpi span { font-size: .84rem; color: var(--muted); font-weight: 700 }
.kpi em { display: block; font-style: normal; font-size: .8rem; font-weight: 800; color: var(--green); margin-top: 2px }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.head-row h2 { font-size: 1.6rem }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px }
.chart svg { display: block; width: 100%; height: auto }
.chart text { font-family: var(--text); font-weight: 700 }
.legend { display: flex; gap: 14px; font-size: .82rem; color: var(--muted); font-weight: 700; margin-top: 6px; flex-wrap: wrap }
.legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px }
.seg { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 3px; flex-wrap: wrap }
.seg button { font: 800 .88rem var(--text); padding: 6px 12px; border-radius: 9px; border: 0; background: transparent; color: var(--body); cursor: pointer; min-height: 36px }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow) }
.list { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) }
.item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); flex-wrap: wrap }
.item > div:first-child { min-width: 0; flex: 1 1 220px }
.item b { display: block }
.item span.sub { color: var(--muted); font-size: .88rem }
.item .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.days { display: flex; gap: 4px }
.days button { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font: 800 .78rem var(--text); color: var(--muted); cursor: pointer; padding: 0 }
.days button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--on-green) }
.meter { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden }
.meter i { display: block; height: 100%; background: var(--green); border-radius: 999px }
.goal { display: grid; gap: 6px }
.goal + .goal { margin-top: 14px }
.goal .top { display: flex; justify-content: space-between; gap: 8px; font-size: .95rem; flex-wrap: wrap }
.goal .top span { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 800; font-size: .86rem }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap }
.tg { font-size: .74rem; font-weight: 900; padding: 3px 9px; border-radius: 999px; background: var(--green-soft); color: var(--ink) }
.tg.sun { background: var(--sun-soft) } .tg.sky { background: var(--sky-soft) } .tg.heart { background: var(--heart-soft) } .tg.gray { background: var(--line) }
.thread { display: grid; gap: 8px; max-height: 380px; overflow: auto; padding: 4px 2px }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45 }
.msg.them { background: var(--bg); border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 6px }
.msg.me { background: var(--green); color: var(--on-green); justify-self: end; border-bottom-right-radius: 6px }
.msg small { display: block; font-size: .74rem; opacity: .75; font-weight: 700; margin-top: 3px }
.send { display: flex; gap: 8px; margin-top: 10px }
.send input { flex: 1; min-width: 0 }
.switch { position: relative; width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--line); cursor: pointer; flex: none; padding: 0 }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s }
.switch[aria-checked="true"] { background: var(--green) }
.switch[aria-checked="true"]::after { left: 23px }
.rowline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.rowline:last-child { border-bottom: 0 }
.rowline > div { min-width: 0 }
.rowline span.sub { display: block; color: var(--muted); font-size: .86rem }
.steps4 { display: inline-flex; gap: 3px }
.steps4 button { width: 30px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--card); font: 900 .8rem var(--text); color: var(--muted); cursor: pointer; padding: 0 }
.steps4 button.on { background: var(--green); border-color: var(--green); color: var(--on-green) }
.weekcal { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 8px }
.weekcal .col { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 170px }
.weekcal h4 { margin: 0; font-size: .86rem; text-align: center }
.weekcal h4 small { display: block; color: var(--muted); font-weight: 700 }
.weekcal .ev { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 10px; padding: 6px 8px; font-size: .82rem; line-height: 1.3 }
.weekcal .ev b { display: block; font-variant-numeric: tabular-nums }
.weekcal .ev.sun { border-left-color: var(--sun) } .weekcal .ev.sky { border-left-color: var(--sky) } .weekcal .ev.heart { border-left-color: var(--heart) }
.weekcal .off { color: var(--muted); font-size: .82rem; text-align: center; padding-top: 20px; font-weight: 700 }
.avail { border-collapse: separate; border-spacing: 6px; width: auto }
.avail th, .avail td { border: 0; padding: 0; text-align: center }
.avail th { padding: 4px 6px }
.avail button { width: 64px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font: 800 .82rem var(--text); color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums }
.avail button[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); color: var(--ink) }
.lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.ws { padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.ws .thumb { height: 92px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; overflow: hidden; display: grid; gap: 6px; align-content: start }
.ws .thumb i { display: block; height: 6px; border-radius: 3px; background: var(--line) }
.ws .thumb i.h { width: 55%; height: 9px; background: var(--ink); opacity: .75 }
.ws p { color: var(--body); font-size: .9rem }
.ws .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px }
.split { display: flex; height: 44px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line) }
.split div { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .82rem; color: #2A2520; padding: 0 4px; min-width: 0; white-space: nowrap; overflow: hidden }
input[type="range"] { min-height: 0; padding: 0; border: 0; background: transparent; accent-color: var(--green) }
.calc { display: grid; gap: 16px }
.calc label { grid-template-columns: 1fr auto; align-items: center }
.calc label input[type="range"] { grid-column: 1 / -1 }
.calc label output { font-variant-numeric: tabular-nums; font-weight: 900 }
.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.check li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--body) }
.check li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; border: 2px solid var(--line); background: var(--card) }
.check li.ok::before { background: var(--green); border-color: var(--green) }
.backlink { font: 800 .92rem var(--text); color: var(--green); background: none; border: 0; cursor: pointer; padding: 6px 0; justify-self: start }
.tutorpro { display: grid; grid-template-columns: 200px 1fr; gap: 22px; padding: 22px; align-items: start }
.tutorpro .photo { max-width: 200px }
.tutorpro .text { display: grid; gap: 10px; color: var(--body); min-width: 0 }
.grade-pick { margin-bottom: 14px }

/* Dialog */
dialog { border: 0; border-radius: 24px; padding: 0; width: min(780px, calc(100vw - 24px)); max-width: none; box-shadow: 0 24px 70px rgba(42, 37, 32, .3); color: var(--ink); background: var(--card) }
dialog.wide { width: min(1040px, calc(100vw - 24px)) }
dialog::backdrop { background: rgba(42, 37, 32, .45) }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 10px }
.dlg-head h3 { font-size: 1.15rem }
.dlg-body { padding: 18px; max-height: calc(100vh - 140px); overflow: auto }

/* Printable worksheet */
.sheet { background: #FFFFFF; color: #1F1B17; border: 1px solid var(--line); border-radius: 6px; padding: 28px 30px; max-width: 680px; margin: 0 auto; box-shadow: var(--shadow) }
.sheet .sh-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 800; font-size: .9rem; border-bottom: 2px solid #1F1B17; padding-bottom: 8px }
.sheet .sh-top .word { font-family: var(--display); font-size: 1.4rem; line-height: 1 }
.sheet h3 { font-family: var(--display); font-size: 2rem; font-weight: 700; margin-top: 14px; line-height: 1.05 }
.sheet .dir { color: #4A443C; font-size: .95rem; margin: 6px 0 18px }
.sheet .sh-foot { margin-top: 22px; padding-top: 8px; border-top: 1px dashed #CFC6B8; font-size: .78rem; color: #6B645A; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.probs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 14px }
.probs.h { grid-template-columns: repeat(2, 1fr); gap: 14px 24px; font: 800 1.25rem/1.3 var(--text); font-variant-numeric: tabular-nums }
.probs.h span { white-space: nowrap }
.vp { justify-self: center; display: grid; justify-items: end; font: 800 1.5rem/1.15 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums }
.vp i { display: block; width: 100%; min-width: 3.4ch; border-top: 2.5px solid #1F1B17; height: 38px; margin-top: 3px }
.wordgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.wordgrid div { border: 1.5px solid #D8CFC1; border-radius: 10px; padding: 10px; font-size: 1.3rem; font-weight: 800; display: flex; justify-content: space-between; align-items: center }
.wordgrid div::after { content: ""; width: 18px; height: 18px; border: 2px solid #8A8070; border-radius: 4px }
.bank { border: 2px dashed #C9BFAF; border-radius: 12px; padding: 12px; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 1.25rem; font-weight: 800; justify-content: center }
.sortcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px }
.sortcols div { border: 1.5px solid #D8CFC1; border-radius: 12px; padding: 10px 12px 14px }
.sortcols b { display: block; text-align: center; font-family: var(--display); font-size: 1.8rem; line-height: 1 }
.sortcols i { display: block; border-bottom: 1.5px solid #B9AE9C; height: 34px }
.passage { font-size: 1.15rem; line-height: 1.9 }
.passage p { display: flex; justify-content: space-between; gap: 16px }
.passage p small { color: #8A8070; font-weight: 800; font-variant-numeric: tabular-nums; flex: none }
.qs { display: grid; gap: 14px; margin-top: 16px }
.qs div b { display: block; font-size: 1rem }
.qs div i { display: block; border-bottom: 1.5px solid #B9AE9C; height: 30px }
.timebox { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px }
.timebox div { border: 1.5px solid #D8CFC1; border-radius: 10px; padding: 10px 12px; font-weight: 800; font-size: .95rem }
.planner { display: grid; gap: 12px }
.planner div { border: 2px solid #D8CFC1; border-radius: 14px; padding: 10px 14px 34px; font-weight: 800 }
.planner div span { display: block; font-weight: 600; color: #6B645A; font-size: .86rem }
.planner .mid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0 }
.nline { width: 100%; height: auto; display: block; margin-bottom: 18px }

/* Session mode */
.phasebar { display: flex; gap: 4px; border-radius: 14px; overflow: hidden }
.ph { padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); min-width: 0; border-radius: 10px }
.ph b { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph span { font-size: .74rem; color: var(--muted); font-weight: 800 }
.ph.done { background: var(--green-soft); border-color: transparent }
.ph.on { background: var(--green); border-color: var(--green); color: var(--on-green) }
.ph.on span { color: var(--on-green); opacity: .85 }
.mode-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; margin-top: 14px }
.mode-grid > .card { padding: 18px; min-width: 0; box-shadow: none }
.timer { font: 900 3.6rem/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 8px 0 4px }
.timer.over { color: var(--heart) }
.cap { display: grid; gap: 14px }
.cap .lbl { font-weight: 800; font-size: .93rem; display: block; margin-bottom: 6px }
.focus4 { display: flex; gap: 6px; flex-wrap: wrap }
.focus4 button { font: 800 .86rem var(--text); padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--body); cursor: pointer; min-height: 40px }
.focus4 button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: #2A2520 }
.assign { display: grid; gap: 6px }
.assign label { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: .92rem }
.assign input { width: 20px; height: 20px; min-height: 0; accent-color: var(--green) }
.mode-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap }

#toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: #FFFFFF; padding: 12px 18px; border-radius: 14px; font-weight: 800; font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 20; max-width: calc(100vw - 32px); text-align: center }
#toast.on { opacity: 1; transform: translate(-50%, 0) }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr }
  .side { position: static; display: flex; overflow-x: auto; padding: 6px; gap: 4px }
  .side .who { display: none }
  .kpis { grid-template-columns: 1fr 1fr }
  .grid3, .lib { grid-template-columns: 1fr 1fr }
  .mode-grid { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .grid2, .grid3, .lib { grid-template-columns: 1fr }
  .tutorpro { grid-template-columns: 1fr }
  .probs { grid-template-columns: repeat(2, 1fr) }
  .probs.h { grid-template-columns: 1fr }
  .wordgrid { grid-template-columns: repeat(2, 1fr) }
  .sortcols, .planner .mid, .timebox { grid-template-columns: 1fr }
  .sheet { padding: 18px }
  .timer { font-size: 2.8rem }
  .ph span { display: none }
}

/* ---------- Live site additions ---------- */
.side .sidelink { font: 800 .95rem var(--text); text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; border: 0; background: transparent; color: var(--body); cursor: pointer; min-height: 42px; white-space: nowrap; text-decoration: none; width: 100% }
.side .sidelink:hover { background: var(--green-soft) }
.side .sidelink[aria-current="true"] { background: var(--green); color: var(--on-green) }
.side [data-signout] { color: var(--muted); margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0 }
.week { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.send textarea { flex: 1; min-width: 0; resize: vertical }
.today .appt .acts .btn { min-height: 36px }
.weekcal .ev { width: 100% }
.weekcal .ev:hover { border-color: var(--green) }
fieldset { min-width: 0 }
@media (max-width: 760px) { .week { grid-template-columns: repeat(6, minmax(64px, 1fr)); overflow-x: auto } }
@media (max-width: 900px) { .side .sidelink { width: auto } .side [data-signout] { border-top: 0; margin-top: 0 } }
@media print {
  body.printing > *:not(#dlg) { display: none !important }
  body.printing #dlg { position: static; box-shadow: none; width: auto; max-width: none; border-radius: 0 }
  body.printing #dlg .dlg-head, body.printing #dlg .cta { display: none !important }
  body.printing #dlg .dlg-body { max-height: none; overflow: visible; padding: 0 }
  body.printing .sheet { box-shadow: none; border: 0; max-width: none }
  body.printing::before { display: none }
}

.flow > div { min-width: 0 }
.card-head > * { min-width: 0 }
.card-head h3 { overflow-wrap: anywhere }
.grid2 > div, .rowline > span { min-width: 0 }
.send input[type="datetime-local"] { min-width: 0; flex: 1 1 160px }
.send { flex-wrap: wrap }
.send .btn { flex: none }