/* An agency's public pages (public/js/tutoring-public.js).

   They stand in for the agency's own website, so they are light, warm and
   quiet, and carry the agency's name more than ours. Dark only when a link
   asks for it (?theme=dark), never from the visitor's system setting.

   One layout rule throughout: a single centred container (.tp-wrap), and
   inside it text is always left-aligned. Forms sit in a white panel in a
   narrower centred column (.tp-column); nothing is centred on its own. */

:root {
    --tp-bg: #faf7f2;
    --tp-card: #ffffff;
    /* Derived from the accent, so a host's brand colour carries through. */
    --tp-tint: color-mix(in srgb, var(--tp-accent) 9%, #ffffff);
    --tp-tag: #f3efe8;
    --tp-ink: #1f1d2b;
    --tp-muted: #625e70;
    --tp-line: #e8e2d8;
    --tp-accent: #3660ff;
    --tp-accent-hover: color-mix(in srgb, var(--tp-accent) 82%, #000000);
    --tp-accent-ink: #ffffff;
    --tp-error: #b14637;
    --tp-ok-bg: #e7f7f0;
    --tp-radius: 14px;
    --tp-shadow: 0 1px 2px rgba(31, 29, 43, 0.04), 0 8px 24px rgba(31, 29, 43, 0.06);
    color-scheme: light;
}
:root[data-theme="dark"] {
    --tp-bg: #16151c;
    --tp-card: #201f28;
    --tp-tint: #232a45;
    --tp-tag: #2a2934;
    --tp-ink: #f1f0f5;
    --tp-muted: #aaa7b8;
    --tp-line: #34323f;
    --tp-accent: #7b96ff;
    --tp-accent-hover: #93a9ff;
    --tp-accent-ink: #0d0d12;
    --tp-error: #ff8f80;
    --tp-ok-bg: #1d3a30;
    --tp-shadow: none;
    color-scheme: dark;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--tp-bg);
    color: var(--tp-ink);
    font-family: var(--tp-font, 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 16px;
    line-height: 1.55;
}
/* ── Embedded in an agency's website ──
   The host page owns the background, the heading and the margins, so the
   frame is flat: no outer padding, no card round the form, no shadow. Its
   left edge is the host's text column. Fields go white with a neutral border
   so they read as part of whatever the page is. */
.tp-embed body { background: transparent; }
.tp-embed .tp-main, .tp-embed .tp-wrap { max-width: none; padding: 0; }
.tp-embed .tp-column { max-width: none; }
.tp-embed .tp-form-panel { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.tp-embed .tp-panel { box-shadow: none; }
.tp-embed .tp-card a { box-shadow: none; }
.tp-embed .tp-form input:not([type=checkbox]):not([type=radio]),
.tp-embed .tp-form select,
.tp-embed .tp-form textarea { background: #ffffff; border-color: #d4d4db; }
.tp-embed[data-theme="dark"] .tp-form input:not([type=checkbox]):not([type=radio]),
.tp-embed[data-theme="dark"] .tp-form select,
.tp-embed[data-theme="dark"] .tp-form textarea { background: var(--tp-card); border-color: var(--tp-line); }
.tp-embed .tp-tag { background: color-mix(in srgb, var(--tp-ink) 7%, #ffffff); }
.tp-embed .tp-subtitle { font-size: 1.1rem; }
.tp-embed-more { margin: 18px 0 2px; color: var(--tp-muted); }
.tp-embed-more a { font-weight: 700; }
/* Flush with the host's text column: no side padding. Focus rings are drawn
   inside the field instead of round it, so the frame's edge cannot clip
   them, and cards lift by shadow rather than by moving. Top and bottom keep
   a little room for the same reason. */
.tp-embed #tp-app { padding: 4px 0 6px; }
.tp-embed { --tp-line: #e2e2e8; }
.tp-embed[data-theme="dark"] { --tp-line: #34323f; }
.tp-embed .tp-form input:focus, .tp-embed .tp-form select:focus, .tp-embed .tp-form textarea:focus {
    outline: 2px solid var(--tp-accent);
    outline-offset: -2px;
}
.tp-embed .tp-card a:hover { transform: none; box-shadow: 0 0 0 1px var(--tp-accent) inset; }
.tp-embed .tp-card a:focus-visible, .tp-embed .tp-btn:focus-visible { outline-offset: -3px; }
a { color: var(--tp-accent); }

.tp-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.tp-loading { color: var(--tp-muted); padding: 40px 20px; }

/* ── Header and footer ── */
.tp-header-bar { background: var(--tp-card); border-bottom: 1px solid var(--tp-line); }
.tp-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.tp-brand { display: flex; align-items: center; gap: 10px; color: var(--tp-ink); text-decoration: none; font-weight: 800; font-size: 1.15rem; }
.tp-logo { height: 38px; width: auto; max-width: 150px; object-fit: contain; }
.tp-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.tp-nav a { padding: 8px 14px; border-radius: 999px; color: var(--tp-muted); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.tp-nav a:hover { color: var(--tp-ink); background: var(--tp-tag); }
.tp-nav a[aria-current="page"] { color: var(--tp-accent); background: var(--tp-tint); }

.tp-main { padding-top: 36px; padding-bottom: 56px; }
.tp-footer { margin: 0 0 32px; padding-top: 20px; border-top: 1px solid var(--tp-line); color: var(--tp-muted); font-size: 0.82rem; }

/* ── Type ── */
.tp-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.15; margin: 0 0 10px; font-weight: 800; letter-spacing: -0.015em; }
.tp-subtitle { font-size: 1.2rem; margin: 0 0 16px; font-weight: 800; }
.tp-lede { color: var(--tp-muted); font-size: 1.07rem; margin: 0 0 24px; max-width: 60ch; }
.tp-back { display: inline-block; margin-bottom: 20px; text-decoration: none; font-weight: 700; }

/* ── Building blocks ── */
.tp-column { max-width: 720px; margin: 0 auto; }
.tp-panel {
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    padding: 28px;
}
.tp-panel > .tp-lede:last-child, .tp-panel > .tp-title + .tp-lede:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .tp-panel { padding: 20px; } }

.tp-btn {
    display: inline-block;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--tp-accent);
    color: var(--tp-accent-ink);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.tp-btn:hover { background: var(--tp-accent-hover); }
.tp-btn:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: 3px; }
.tp-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Directory ── */
.tp-hero {
    padding: 28px 32px;
    margin-bottom: 28px;
    border-radius: 20px;
    background: var(--tp-tint);
}
.tp-hero .tp-lede { margin-bottom: 20px; }
@media (max-width: 560px) { .tp-hero { padding: 22px; } }

.tp-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tp-filter .tp-label { margin: 0; }
.tp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tp-card[hidden] { display: none; }
.tp-card a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 22px;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    background: var(--tp-card);
    box-shadow: var(--tp-shadow);
    color: var(--tp-ink);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.tp-card a:hover { border-color: var(--tp-accent); transform: translateY(-2px); }
.tp-card a:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tp-card a, .tp-card a:hover { transition: none; transform: none; } }
.tp-card-top { display: flex; align-items: center; gap: 14px; }
.tp-card-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-card-name { font-weight: 800; font-size: 1.12rem; line-height: 1.25; }
.tp-card-headline { color: var(--tp-ink); font-size: 0.95rem; }
.tp-card-meta { color: var(--tp-muted); font-size: 0.86rem; margin: 0; }
.tp-card .tp-tags { margin: 0; }
/* Pinned to the bottom, so a row of cards lines up however much each says. */
.tp-card-more { margin-top: auto; padding-top: 4px; color: var(--tp-accent); font-weight: 800; font-size: 0.92rem; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tp-tag { padding: 3px 11px; border-radius: 999px; background: var(--tp-tag); font-size: 0.8rem; font-weight: 700; }
.tp-tag-more { color: var(--tp-muted); }

.tp-avatar { flex: none; border-radius: 50%; object-fit: cover; background: var(--tp-tint); }
.tp-avatar-md { width: 64px; height: 64px; }
.tp-avatar-lg { width: 112px; height: 112px; }
.tp-avatar-none { display: grid; place-items: center; font-weight: 800; color: var(--tp-accent); }
.tp-avatar-md.tp-avatar-none { font-size: 1.2rem; }
.tp-avatar-lg.tp-avatar-none { font-size: 2.1rem; }

/* ── One tutor: profile, then the enquiry, in one column ── */
.tp-profile { margin-bottom: 20px; }
.tp-profile-head { display: flex; gap: 22px; align-items: center; }
.tp-profile-head .tp-title { margin-bottom: 4px; }
.tp-profile-head .tp-lede { margin-bottom: 4px; }
.tp-profile .tp-tags { margin: 18px 0 0; }
@media (max-width: 560px) { .tp-profile-head { flex-direction: column; align-items: flex-start; gap: 14px; } }
.tp-bio { font-size: 1.03rem; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--tp-line); }
.tp-bio p { margin: 0 0 12px; }
.tp-bio p:last-child { margin-bottom: 0; }


/* ── Forms ── */
.tp-form { display: flex; flex-direction: column; }
.tp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.tp-field-inline { flex-direction: row; align-items: center; gap: 10px; margin: 0; }
.tp-label { font-weight: 700; font-size: 0.95rem; }
.tp-label em { font-style: normal; font-weight: 600; color: var(--tp-muted); font-size: 0.85rem; }
.tp-hint { color: var(--tp-muted); font-size: 0.85rem; margin: 0; }
.tp-small { color: var(--tp-muted); font-size: 0.85rem; margin: 4px 0 16px; }
.tp-form input:not([type=checkbox]):not([type=radio]),
.tp-form select,
.tp-form textarea,
.tp-filter select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    background: var(--tp-bg);
    color: var(--tp-ink);
    font: inherit;
    transition: border-color 0.15s, background-color 0.15s;
}
.tp-filter select { width: auto; min-width: 200px; background: var(--tp-card); }
.tp-form input:focus, .tp-form select:focus, .tp-form textarea:focus, .tp-filter select:focus {
    outline: 3px solid color-mix(in srgb, var(--tp-accent) 25%, transparent);
    outline-offset: 0;
    border-color: var(--tp-accent);
    background: var(--tp-card);
}
.tp-form textarea { resize: vertical; }
.tp-form .tp-btn { align-self: flex-start; }
.tp-grid2, .tp-grid3 { display: grid; gap: 0 16px; }
.tp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .tp-grid2, .tp-grid3 { grid-template-columns: 1fr; } }

fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
legend { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; padding: 0; }
.tp-radios label, .tp-check { display: flex; align-items: center; gap: 10px; margin: 6px 0; cursor: pointer; }
.tp-radios input, .tp-check input, .tp-avail input { width: 18px; height: 18px; margin: 0; accent-color: var(--tp-accent); }
.tp-check { margin: 8px 0; }

/* Full width like every other field: a fixed label column, then seven equal
   day columns. Each whole cell is the tick target, not just the box. */
.tp-avail .tp-hint { margin-bottom: 10px; }
.tp-avail-scroll { overflow-x: auto; }
.tp-avail table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tp-avail col.tp-avail-label { width: 118px; }
.tp-avail th, .tp-avail td { padding: 0; text-align: center; }
.tp-avail thead th { font-size: 0.82rem; color: var(--tp-muted); font-weight: 700; padding-bottom: 6px; }
.tp-avail tbody th { text-align: left; font-size: 0.9rem; font-weight: 700; white-space: nowrap; padding: 10px 8px 10px 0; }
.tp-avail tbody th span { display: block; font-weight: 600; color: var(--tp-muted); font-size: 0.76rem; }
.tp-avail tbody tr + tr { border-top: 1px solid var(--tp-line); }
.tp-slot { display: flex; align-items: center; justify-content: center; height: 52px; margin: 3px; border-radius: 8px; cursor: pointer; transition: background-color 0.12s; }
.tp-slot:hover { background: var(--tp-tint); }
.tp-slot:has(input:checked) { background: var(--tp-tint); }
.tp-slot:has(input:focus-visible) { outline: 2px solid var(--tp-accent); outline-offset: -2px; }

.tp-error { color: var(--tp-error); font-weight: 700; margin: 4px 0 10px; }
.tp-done { padding: 24px; border-radius: var(--tp-radius); background: var(--tp-ok-bg); }
.tp-done h2 { margin: 0 0 6px; font-size: 1.25rem; }
.tp-done p { margin: 0; }

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.tp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* On a phone the whole week has to fit without sideways scrolling. */
@media (max-width: 480px) {
    .tp-avail col.tp-avail-label { width: 78px; }
    .tp-avail tbody th { font-size: 0.8rem; padding-right: 4px; }
    .tp-slot { height: 44px; margin: 2px; }
    .tp-avail tbody th span { display: none; }
    .tp-avail thead th { font-size: 0.75rem; }
}

/* Embedded, the cards share out the width they have, so two tutors on a wide
   page are two wide cards rather than two narrow ones and a gap. */
.tp-embed .tp-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── Pickers ── */
.tp-pick { display: flex; flex-direction: column; gap: 8px; }
.tp-pick-many { display: flex; flex-direction: column; gap: 10px; }
.tp-chosen { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chosen:empty { display: none; }
.tp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background: var(--tp-tint);
    color: var(--tp-ink);
    font-size: 0.9rem;
    font-weight: 700;
}
.tp-chip button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tp-muted);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.tp-chip button:hover, .tp-chip button:focus-visible { background: color-mix(in srgb, var(--tp-accent) 18%, transparent); color: var(--tp-ink); }
.tp-pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-pick-row select { flex: 1 1 220px; }
.tp-pick-row .tp-other { flex: 1 1 200px; }
.tp-btn-quiet {
    padding: 0 18px;
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    background: var(--tp-card);
    color: var(--tp-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.tp-btn-quiet:hover { border-color: var(--tp-accent); }
.tp-level-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 16px; }
.tp-level-checks label { display: flex; align-items: center; gap: 10px; margin: 5px 0; cursor: pointer; }
.tp-level-checks input { width: 18px; height: 18px; margin: 0; accent-color: var(--tp-accent); }
fieldset.tp-field { border: 0; padding: 0; }
fieldset.tp-field legend { margin-bottom: 6px; }

/* ── Star rating ── */
.tp-stars-field legend { margin-bottom: 4px; }
/* Radios in reverse order with a row-reverse flex, so the CSS sibling
   selector can light every star up to the one hovered or chosen. */
.tp-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.tp-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp-stars label { font-size: 2.2rem; line-height: 1; color: var(--tp-line); cursor: pointer; transition: color 0.1s; }
.tp-stars label:hover, .tp-stars label:hover ~ label,
.tp-stars input:checked ~ label { color: #f4b447; }
.tp-stars input:focus-visible + label { outline: 2px solid var(--tp-accent); outline-offset: 2px; border-radius: 4px; }
.tp-rating { color: var(--tp-muted); font-size: 0.86rem; }
.tp-rating b { color: #b7791f; }
.tp-reviews { list-style: none; margin: 0; padding: 0; }
.tp-reviews li { padding: 14px 0; border-top: 1px solid var(--tp-line); }
.tp-reviews li:first-child { border-top: 0; padding-top: 0; }
.tp-reviews p { margin: 6px 0 0; }
.tp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Parent portal ── */
.tp-narrow-col { max-width: 520px; }
.tp-account { max-width: 860px; margin: 0 auto; }
.tp-acct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.tp-acct-head .tp-lede { margin: 0; }
.tp-acct-section { margin-bottom: 18px; }
.tp-muted { color: var(--tp-muted); }
.tp-btn-small { padding: 8px 16px; font-size: 0.9rem; }
.tp-child-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tp-child-tabs button {
    padding: 8px 16px;
    border: 1px solid var(--tp-line);
    border-radius: 999px;
    background: var(--tp-card);
    color: var(--tp-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.tp-child-tabs button[aria-selected="true"] { color: var(--tp-accent); border-color: var(--tp-accent); background: var(--tp-tint); }

.tp-lessons, .tp-covers, .tp-marks, .tp-reports { list-style: none; margin: 0; padding: 0; }
.tp-lesson { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--tp-line); }
.tp-lesson:first-child { border-top: 0; padding-top: 0; }
.tp-lesson-date { flex: none; width: 118px; display: flex; flex-direction: column; font-size: 0.9rem; color: var(--tp-muted); }
.tp-lesson-date b { color: var(--tp-ink); font-size: 0.98rem; }
.tp-lesson-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--tp-tag); font-size: 0.78rem; font-weight: 700; }
.tp-pill-improving { background: var(--tp-ok-bg); color: #067f5c; }
.tp-pill-slipping { background: rgba(244, 180, 71, 0.2); color: #8f620d; }

.tp-cover { padding: 10px 0; }
.tp-cover-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 0.95rem; }
.tp-cover-track { display: block; height: 10px; border-radius: 999px; background: var(--tp-tag); overflow: hidden; }
.tp-cover-track span { display: block; height: 100%; border-radius: 999px; background: var(--tp-accent); }
.tp-progress-line { margin: 14px 0 8px; }
.tp-marks li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--tp-line); font-size: 0.95rem; }
.tp-marks li:first-child { border-top: 0; }

.tp-reports li { border-top: 1px solid var(--tp-line); }
.tp-reports li:first-child { border-top: 0; }
.tp-reports summary { cursor: pointer; padding: 12px 0; list-style-position: inside; }
.tp-report-body { padding: 0 0 14px; line-height: 1.65; }
.tp-report-body p { margin: 0 0 10px; }
.tp-homework { padding: 10px 14px; border-radius: 10px; background: var(--tp-tag); }
#tp-signout { flex: none; padding: 9px 16px; white-space: nowrap; }
@media (max-width: 560px) {
    .tp-lesson { flex-wrap: wrap; gap: 4px 12px; }
    .tp-lesson-date { flex-basis: 100%; width: auto; flex-direction: row; gap: 8px; }
    .tp-acct-head .tp-title { font-size: 1.6rem; }
}

/* The portal's "get in touch" bar, near the top so it is never hunted for. */
.tp-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: var(--tp-radius);
    background: var(--tp-tint);
}
.tp-contact-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-contact .tp-btn-quiet { display: inline-flex; align-items: center; text-decoration: none; }
.tp-footer a { color: inherit; }

/* Coverage by area of the course. */
.tp-areas { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; }
.tp-areas li { display: grid; grid-template-columns: minmax(110px, 34%) 1fr 42px; gap: 10px; align-items: center; font-size: 0.9rem; }
.tp-areas .tp-cover-track { height: 6px; }
.tp-area-pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.tp-covered-list { margin-top: 10px; font-size: 0.93rem; }
.tp-covered-list summary { cursor: pointer; font-weight: 700; color: var(--tp-accent); padding: 4px 0; }
.tp-covered-list p { margin: 8px 0 0; line-height: 1.55; }

/* An invoice */
.tp-invoice .tp-panel { margin-bottom: 16px; }
.tp-inv-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 0.95rem; }
.tp-inv-table th, .tp-inv-table td { text-align: left; padding: 10px 0; border-top: 1px solid var(--tp-line); vertical-align: top; }
.tp-inv-table thead th { border-top: 0; padding-top: 0; color: var(--tp-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.tp-inv-table tfoot th, .tp-inv-table tfoot td { border-top: 2px solid var(--tp-line); font-weight: 800; font-size: 1.05rem; }
.tp-inv-table .tp-num { text-align: right; padding-left: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-inv-note { margin: 0 0 16px; white-space: pre-line; }
.tp-inv-footer { white-space: pre-line; font-size: 0.9rem; }
.tp-inv-state { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: var(--tp-tag); font-weight: 700; }
.tp-inv-paid { background: var(--tp-ok-bg); color: #067f5c; }
.tp-inv-overdue { color: #b42318; font-weight: 700; }

/* Tutor profile: experience and qualifications */
.tp-profile-sub { margin-top: 22px; }
.tp-quals { list-style: none; margin: 0; padding: 0; }
.tp-quals li { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--tp-line); }
.tp-quals li:first-child { border-top: 0; padding-top: 0; }
.tp-qual-main { font-weight: 700; }
.tp-qual-grade { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--tp-tag); font-size: 0.8rem; }
.tp-profile-sub + .tp-bio { border-top: 0; padding-top: 0; margin-top: 0; }