styles.css

/* Type: IBM Plex Sans for text, IBM Plex Mono for money and counts. Self-hosted (fonts/, SIL OFL 1.1), latin subset. */
@font-face { font-family: "Plex Sans"; src: url(fonts/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(fonts/plex-sans-600.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(fonts/plex-sans-700.woff2) format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/plex-mono-500.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --ink: #16181a; --muted: #4b5158; --line: #d6d4ce; --bg: #f7f5f0; --card: #fffefa;
  --brand: #1d4f7a; --brand-d: #143a5b; --brand-soft: #c3d2e0; --brand-tint: #edf2f7;
  --good: #047857; --warn: #a14a06; --bad: #b91c1c;
  --radius: 4px; --focus: 0 0 0 2px #fff, 0 0 0 4px #1d4f7a;
  --sans: "Plex Sans", "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
::selection { background: var(--brand-soft); color: var(--ink); }
html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: #b8bcc2 var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #b8bcc2; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #8a9096; }
body { margin: 0; font: 15px/1.55 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--brand); text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
h1:focus, main:focus { outline: none; box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 2px; }
.skip:focus { top: 8px; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px 24px; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; letter-spacing: -.015em; color: var(--ink); text-decoration: none; flex: none; }
.logo { width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--brand); position: relative; }
.logo::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
nav::-webkit-scrollbar { display: none; }
nav a { padding: 7px 10px; border-radius: 0; color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
nav a:hover { color: var(--ink); }
nav a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
nav a.active:focus-visible { box-shadow: var(--focus), inset 0 -2px 0 var(--brand); }

.banner { max-width: 1080px; margin: 12px auto 0; padding: 10px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; border-radius: var(--radius); }
.banner[hidden] { display: none; }
.samplebar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 0 0 14px; padding: 10px 14px; background: #f3efe2; border: 1px solid #d8cfb3; border-radius: var(--radius); color: #3b3626; font-size: 14px; }
.samplebar p { margin: 0; flex: 1 1 260px; }

main { max-width: 1080px; margin: 0 auto; padding: 24px; }
/* Until app.js renders the first page, #app holds only the <noscript> note: reserve the screen so the footer
   doesn't paint at the top and then jump down (CLS was 0.10 at 390px). Print and no-JS are unaffected. */
@media screen { #app:has(> noscript:only-child) { min-height: 100vh; } }
@media (scripting: none) { #app:has(> noscript:only-child) { min-height: 0; } }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.sub { color: var(--muted); margin: 0 0 20px; }
.sub.tight { margin-bottom: 10px; }
.muted { color: var(--muted); }
.opt { font-weight: 400; color: var(--muted); }
.help { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.bare:disabled input, fieldset.bare:disabled .btn { opacity: .6; cursor: not-allowed; }
.notice { background: var(--brand-tint); border: 1px solid var(--brand-soft); padding: 8px 12px; border-radius: var(--radius); }
.mt { margin-top: 16px; } .mt-s { margin-top: 8px; } .mt-l { margin-top: 28px; }
.flush { margin: 0; } .right { text-align: right; }

.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; box-shadow: 0 1px 2px rgba(22, 24, 26, .04); }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font: 500 26px/1.3 var(--mono); margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .hint { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); } .brand { color: var(--brand); }

/* tables */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--mono); font-size: 14px; }
td.num .btn, td.num button, td.num .pill { font-family: var(--sans); font-size: 13px; }
tfoot td { border-bottom: 0; }
.row-actions { white-space: nowrap; }
.row-actions .btn + .btn { margin-left: 4px; }
td.who b { white-space: nowrap; }
@media (min-width: 641px) and (max-width: 1100px) { td.row-actions { white-space: normal; } td.row-actions .btn { margin: 2px 0 2px 4px; } }

/* forms */
form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
form .row.one { grid-template-columns: 1fr; }
form .row.checks { display: flex; flex-wrap: wrap; gap: 8px 24px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
h2 label { font-size: inherit; font-weight: inherit; margin: 0; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid #8a9096; border-radius: 3px; font: inherit; color: var(--ink); background: #fff; min-height: 40px; caret-color: var(--brand); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
input:disabled { background: #f3f4f6; }
input, select { height: 42px; }
input[type=checkbox] { height: 18px; }
textarea { min-height: 84px; resize: vertical; }
.small { font-size: 13px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 14px; margin: 0; }
.check input { width: 18px; height: 18px; min-height: 0; flex: none; margin: 1px 0 0; accent-color: var(--brand); }
.form-errors ul { color: var(--bad); margin: 0 0 12px; padding: 10px 12px 10px 28px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); }
.form-errors:focus { outline: none; }
.preview { color: var(--ink); font-weight: 600; margin: 4px 0 0; min-height: 1.5em; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.chip { border: 1px solid #8a9096; background: #fff; color: var(--ink); border-radius: 3px; padding: 3px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 30px; font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--brand-tint); border-color: var(--brand); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; min-height: 40px; border-radius: 3px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--brand-d); }
.btn.ghost { background: #fff; color: var(--brand); }
.btn.ghost:hover { background: var(--brand-tint); }
.btn.small { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.btn.danger { border-color: var(--bad); background: #fff; color: var(--bad); }
.btn.danger:hover { background: #fef2f2; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions, .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.toolbar { margin: 0 0 16px; }
.toolbar select { max-width: 280px; width: auto; }
.actions.center { justify-content: center; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; background: #f3f4f6; color: #374151; border: 0; font-family: inherit; }
button.pill { cursor: pointer; min-height: 24px; min-width: 44px; } /* WCAG 2.2 target size: the paid/unpaid toggle is a real button */
.pill.paid { background: #d1fae5; color: #065f46; } .pill.unpaid { background: #fef3c7; color: #92400e; } .pill.vol { background: var(--brand-tint); color: var(--brand-d); }
button.pill.unpaid:hover { background: #fde68a; } button.pill.paid:hover { background: #a7f3d0; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 2px; padding: 0 5px; margin-left: 4px; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.hero { margin-bottom: 16px; }
.hero p { max-width: 62ch; }
.steps ol { margin: 0; padding-left: 22px; }
.steps li { margin: 8px 0; }
.steps li.done a { text-decoration: line-through; color: var(--muted); }
.sub-inline { color: var(--muted); margin-left: 8px; font-size: 14px; }
details summary { cursor: pointer; color: var(--brand); font-weight: 600; }
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; }
ul.plain li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }

.report { font: 14px/1.6 var(--mono); background: #f9fafb; min-height: 320px; white-space: pre-wrap; }
canvas { display: block; width: 100%; height: 220px; }

/* service-hour goal bar */
.bar { height: 8px; background: #e2e4e6; border-radius: 0; overflow: hidden; margin: 8px 0 4px; }
.bar span { display: block; height: 100%; background: var(--brand); }
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}
.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); display: flex; gap: 14px; align-items: center; width: max-content; max-width: calc(100vw - 32px);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 30; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast[hidden] { display: none; }
.toast-close { background: transparent; border: 0; color: #cbd5e1; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px; border-radius: 6px; }
.toast-close:hover, .toast-close:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
.toast-undo { background: transparent; border: 0; color: #a9c8e6; font: inherit; font-weight: 700; cursor: pointer; padding: 4px; }

.problems { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.plan .price { font: 500 28px/1.3 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan .per { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan ul { padding-left: 18px; margin: 10px 0 14px; }
.plan.current { outline: 2px solid var(--brand); }
.invoice-doc, .summary-doc { max-width: 760px; }
.invoice-doc .head, .summary-doc .head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.print-only { display: none; }
.foot { max-width: 1080px; margin: 0 auto; text-align: left; color: var(--muted); font-size: 13px; padding: 24px; }

/* phones: stack wide tables into labelled rows, tighten spacing */
@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: stretch; padding: 10px 12px 6px; gap: 6px; }
  nav { margin: 0 -12px; padding: 0 32px 4px 12px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } /* fade hints that the menu scrolls */
  main { padding: 16px 12px; }
  h1 { font-size: 23px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi .value { font-size: 22px; }
  .card { padding: 14px; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.stack td { border: 0; padding: 3px 0; text-align: left; display: flex; gap: 12px; justify-content: space-between; }
  table.stack td[data-label]::before { content: attr(data-label); color: var(--muted); font: 400 13px/1.5 var(--sans); flex: none; }
  table.stack td.num { text-align: right; }
  table.stack td.row-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
  table.stack td.who > div { text-align: right; }
  /* session lists: compact 3-line cards instead of 7 labelled lines */
  table.sessions tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 2px; padding: 10px 0;
    grid-template-areas: "student student amount" "date min status" "topics topics actions"; align-items: center; }
  table.sessions.hours tr { grid-template-areas: "student student amount" "date min actions" "topics topics actions"; }
  table.sessions td { display: block; padding: 0; }
  table.sessions td::before { content: none !important; }
  table.sessions td[data-label=Student] { grid-area: student; font-weight: 700; }
  table.sessions td[data-label=Amount], table.sessions td[data-label=Hours] { grid-area: amount; text-align: right; font-weight: 600; }
  table.sessions td[data-label=Hours]::after { content: " hrs"; font-weight: 400; color: var(--muted); }
  table.sessions td[data-label=Date] { grid-area: date; color: var(--muted); }
  table.sessions td[data-label=Minutes] { grid-area: min; text-align: left; color: var(--muted); }
  table.sessions td[data-label=Minutes]::before { content: "· " !important; }
  table.sessions td[data-label=Minutes]::after { content: " min"; }
  table.sessions td[data-label=Amount] .muted { display: none; }
  table.sessions td[data-label=Status] { grid-area: status; text-align: right; }
  table.sessions td[data-label=Topics] { grid-area: topics; color: var(--muted); font-size: 14px; }
  table.sessions td.row-actions { grid-area: actions; padding: 0; justify-content: flex-end; display: flex; }
  .row-actions .btn + .btn { margin-left: 0; }
  .toolbar select { max-width: none; width: 100%; }
  form .row .wide-m { grid-column: 1 / -1; }
  .invoice-doc .head, .summary-doc .head { flex-direction: column; }
  .invoice-doc .right, .summary-doc .right { text-align: left; }
  .sub-inline { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .toast { transition: none; }
}
@media print {
  .no-print, .topbar, .foot, .toast, .banner, .skip { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; font-size: 12pt; }
  main { padding: 0; max-width: none; }
  .card { border: none; padding: 0; }
  .sign { margin-top: 40px; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 16mm; }
}
#profileForm .check { margin-top: 14px; }
#profileForm #referralHelp { margin-top: 4px; }
.invoice-doc .referral { font-size: 12px; margin-top: 8px; }

/* quick start + first-run callout */
.quickstart { margin-bottom: 16px; }
.quickstart h2 .opt { font-size: 14px; }
.quickstart .check { margin-top: 10px; }
.firstrun { background: #f1f7f3; border-color: #a9cfb8; margin-bottom: 16px; }
.firstrun h2:focus { outline: none; }
.h-s { font-size: 15px; margin: 4px 0 8px; }
.excerpt { white-space: pre-wrap; font: inherit; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px; max-height: 210px; overflow: auto; }
.plain-list { padding-left: 18px; margin: 0; }
.plain-list li { margin: 6px 0; }
/* monthly summary + plan usage */
.summary-doc .kpis { margin: 4px 0 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.summary-doc .kpi { background: var(--brand-tint); border: 0; }
.summary-doc table tfoot td { border-top: 2px solid var(--line); }
.summary-doc .referral { font-size: 12px; margin-top: 8px; }
.usage { margin-bottom: 16px; max-width: 760px; }
.usage h3 { margin-top: 0; }
@media print {
  /* long invoices / statements: dates and amounts on one line, rows never split, the header repeats on every page,
     but the total prints once after the last row (a tfoot repeats per page in Chromium and reads like a page subtotal) */
  .invoice-doc th, .invoice-doc td, .summary-doc th, .summary-doc td { padding: 5px 8px; line-height: 1.3; }
  .invoice-doc td, .summary-doc td { font-size: 10.5pt; }
  .invoice-doc td:first-child, .invoice-doc td.num, .invoice-doc th, .summary-doc td.num { white-space: nowrap; }
  .invoice-doc thead, .summary-doc thead { display: table-header-group; }
  .invoice-doc tfoot, .summary-doc tfoot { display: table-row-group; }
  .invoice-doc tr, .summary-doc tr { break-inside: avoid; }
  .invoice-doc tfoot tr, .summary-doc tfoot tr { break-before: avoid; }
  @page { @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9pt "Plex Sans", sans-serif; color: #6b7280; } }
  .summary-doc { max-width: none; }
  .summary-doc .kpi { background: none; border: 1px solid #ddd; padding: 8px; }
  .summary-doc .kpis { grid-template-columns: repeat(4, 1fr); }
}

/* record a payment (invoices page) */
.pay-form { margin: 0 0 16px; }
.pay-form .pay-row { grid-template-columns: minmax(160px, 260px) auto; align-items: end; margin-bottom: 6px; }
.pay-form .pay-row .btn { min-height: 44px; }
.pay-history { margin: 0 0 16px; }
.pay-history summary { cursor: pointer; padding: 6px 0; }
.pay-history ul { margin: 4px 0 0; padding-left: 20px; }
@media (max-width: 640px) { .pay-form .pay-row { grid-template-columns: 1fr; } .pay-form .pay-row .btn { width: 100%; } }

/* Long unbroken text (an 80-character name, a pasted URL as a topic, a long parent email) must wrap instead of
   pushing the page wider than a phone (it made the dashboard 818 px wide at 390 px). Short words never break. */
#app, .toast { overflow-wrap: anywhere; }
#app td.num, #app th { overflow-wrap: normal; }
#app .btn { max-width: 100%; }
td.who b { white-space: normal; }  /* was nowrap: an 80-character name pushed the page sideways */
table.stack td > * { min-width: 0; }