html {
  font-size: 100%;   /* U13: 16px everywhere, phones too; browser zoom and the text-size setting scale it */
}
html[data-text="large"] { font-size: 112.5%; }
html[data-text="larger"] { font-size: 125%; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 80px;
  background: #f5f7f6;
  color: #17231e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root { --brand: #146c43; --brand-dark: #0c4d30; --brand-soft: #e8f4ee; --ink-muted: #607069; --line: #dfe7e3; }
.app-navbar { background: #fff; border-bottom: 1px solid var(--line); min-height: 76px; }
.app-navbar .nav-link { color: var(--ink-muted); font-weight: 600; margin: 0 .2rem; }
.app-navbar .nav-link:hover { color: var(--brand); }
.brand-lockup { display: flex; align-items: center; gap: .7rem; color: #17231e !important; font-weight: 800; line-height: 1.05; }
.brand-lockup small { display: block; margin-top: .2rem; color: var(--ink-muted); font-size: .875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.brand-mark { align-items: center; background: linear-gradient(135deg, #188054, #0c4d30); border-radius: 12px; color: white; display: inline-flex; height: 42px; justify-content: center; width: 42px; }
.brand-lockup { white-space: normal; max-width: calc(100% - 65px); }
.brand-lockup .brand-mark { flex-shrink: 0; }
.brand-name { overflow-wrap: anywhere; }
.brand-name small { text-transform: none; letter-spacing: normal; }
.administration-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 1rem; }
.administration-group { padding: 1.3rem; background: #f7faf8; border: 1px solid var(--line); border-radius: 16px; }
.administration-group h3 { font-size: 1.1rem; font-weight: 750; }
.administration-group p { color: var(--ink-muted); font-size: .9rem; }
.administration-group ul { list-style: none; padding: 0; margin: 0; }
.administration-group li+li { border-top: 1px solid var(--line); }
.administration-group a { display: block; padding: .7rem 0; color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.administration-group a:hover { text-decoration: underline; }
.administration-group summary { cursor: pointer; padding: .3rem 0 .8rem; }
.administration-group summary:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 4px; }
.tool-subheading { font-size: .95rem; font-weight: 700; margin: 1.2rem 0 .3rem; }
[data-tool-panel] [hidden] { display: none !important; }
.administration-grid { align-items: start; }
.licensed-module-card summary { display: flex; align-items: center; gap: .75rem; }
.licensed-module-card summary::after { content: '+'; margin-left: auto; font-size: 1.25rem; color: var(--brand-dark); }
.licensed-module-card[open] summary::after { content: '−'; }
.licensed-module-card summary h3 { margin: 0; overflow-wrap: anywhere; }
.licensed-module-card .module-icon { flex-shrink: 0; width: 42px; }
.licensed-module-card p { line-height: 1.6; margin: .5rem 0 1rem; }
.licensed-module-card a.btn { display: inline-flex; padding: .5rem .85rem; }
.licensed-module-card a.btn-brand { color: white; }
.planned-user-tool { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem 0; color: var(--ink-muted); }
.planned-user-tool small { border: 1px solid var(--line); border-radius: 6px; padding: .1rem .4rem; }
.admissions-workspace { padding-bottom: 2rem; }
.admissions-workspace>nav { margin: 1rem 0; }
.admissions-stage-tabs { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem 0; }
.admissions-stage-tabs a { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; background: white; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--brand-dark); }
.admissions-stage-tabs strong { border-radius: 20px; padding: .1rem .5rem; background: var(--brand-soft); }
.admissions-stage-tabs .is-current { border: 2px solid var(--brand); font-weight: 750; }
.admissions-workspace form { margin: 1rem 0; padding: 1rem; background: white; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
.admissions-workspace form>label,.admissions-workspace fieldset label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; max-width: 100%; }
.admissions-workspace input:not([type=checkbox]):not([type=hidden]),.admissions-workspace select { border: 1px solid #899b92; padding: .6rem .8rem; border-radius: 8px; max-width: 100%; background: white; }
.admissions-workspace button { padding: .65rem 1rem; background: var(--brand); border: 1px solid var(--brand); color: white; border-radius: 8px; font-weight: 650; }
.admissions-workspace label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.admissions-workspace .table-responsive { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.admissions-workspace details { margin: 1rem 0; padding: 1.2rem; border: 1px solid var(--line); background: white; border-radius: 14px; }
.admissions-workspace summary { color: var(--brand-dark); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.admissions-workspace fieldset { width: 100%; display: flex; flex-wrap: wrap; gap: .8rem; }
.admissions-empty-state { text-align: center; padding: 2rem; color: var(--ink-muted); }
.admissions-empty-state strong { display: block; color: #17231e; font-size: 1.15rem; }
@media(max-width:600px) { .admissions-workspace .page-heading { flex-direction: column; align-items: start; gap: 1rem; } .admissions-stage-tabs a { flex: 1 1 130px; justify-content: space-between; } .admissions-workspace form>label { width: 100%; } }
.app-container { max-width: 1500px; padding-top: 2.2rem; }
.footer { background: #fff; font-size: .875rem; line-height: 1.5; padding: 1rem 0; }
.eyebrow { color: var(--brand); display: block; font-size: .875rem; font-weight: 800; letter-spacing: .13em; margin-bottom: .55rem; }
.page-heading { align-items: center; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 1.75rem; }
.page-heading h1 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.035em; margin: 0; }
.page-heading p { color: var(--ink-muted); margin: .55rem 0 0; }
.back-link { color: var(--brand); display: block; font-size: .875rem; font-weight: 700; margin-bottom: 1rem; text-decoration: none; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border-color: #a8c7b7; color: var(--brand-dark); font-weight: 700; }
.btn-outline-brand:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.metric-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.metric-card, .content-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 28px rgba(26, 62, 45, .055); }
.metric-card { padding: 1.35rem 1.45rem; }
.metric-card span, .metric-card small { color: var(--ink-muted); display: block; }
.metric-card span { font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.metric-card strong { display: block; font-size: 2.2rem; letter-spacing: -.05em; margin: .45rem 0; }
.content-card { overflow: hidden; padding: 1.5rem; }
.card-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1.2rem; }
.card-heading h2, .tenant-summary h2 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.card-heading p { color: var(--ink-muted); margin: .3rem 0 0; }
.card-heading a { color: var(--brand); font-weight: 700; text-decoration: none; }
.clean-table thead th { border-bottom-color: var(--line); color: var(--ink-strong); font-size: .875rem; font-weight: 700; letter-spacing: .06em; padding: .85rem; text-transform: uppercase; }
.clean-table td { border-bottom-color: #edf1ef; padding: 1rem .85rem; }
.clean-table td strong, .clean-table td small { display: block; }
.clean-table td small { color: var(--ink-muted); font-size: .875rem; margin-top: .2rem; }
.status-pill { border-radius: 999px; display: inline-flex; font-size: .875rem; font-weight: 800; padding: .3rem .65rem; }
.status-active { background: #dcf5e8; color: #116039; }
.status-suspended, .status-closed { background: #fbe5e5; color: #9c2d2d; }
.empty-state { padding: 3.5rem 1rem; text-align: center; }
.empty-state h2, .empty-state h3 { font-weight: 800; }
.empty-state p { color: var(--ink-muted); }
.detail-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.module-list { border-top: 1px solid var(--line); }
.module-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: 42px 1fr auto; padding: 1rem 0; }
.module-icon { align-items: center; background: var(--brand-soft); border-radius: 11px; color: var(--brand); display: flex; font-weight: 900; height: 42px; justify-content: center; }
.module-copy strong, .module-copy span, .module-copy code { display: block; }
.module-copy span { color: var(--ink-muted); font-size: .875rem; margin: .15rem 0; }
.module-copy code { font-size: .875rem; }
.licence-control { align-items: center; display: flex; gap: .45rem; }
.licence-control .form-select { min-width: 118px; }
.required-label { color: var(--ink-muted); font-size: .875rem; font-weight: 700; min-width: 50px; }
.tenant-summary dl { margin-top: 1.2rem; }
.tenant-summary dt { color: var(--ink-muted); font-size: .875rem; letter-spacing: .05em; text-transform: uppercase; }
.tenant-summary dd { font-weight: 650; margin-bottom: 1rem; overflow-wrap: anywhere; }
.brand-preview { align-items: center; background: #f8faf9; border: 1px solid var(--line); border-radius: 12px; display: flex; gap: .8rem; padding: .8rem; }
.brand-preview > span { background: var(--tenant-colour); border-radius: 9px; height: 38px; width: 38px; }
.brand-preview strong, .brand-preview code { display: block; }
.hero { align-items: center; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1.1fr .9fr; min-height: 570px; padding: 4rem 4vw; }
.hero-copy h1 { font-size: clamp(2.8rem, 5.5vw, 5.4rem); font-weight: 850; letter-spacing: -.065em; line-height: .98; max-width: 850px; }
.hero-copy p { color: var(--ink-muted); font-size: 1.2rem; line-height: 1.7; margin: 1.5rem 0 2rem; max-width: 720px; }
.hero-panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 28px 70px rgba(16, 76, 47, .15); padding: 1.3rem; transform: rotate(1deg); }
.hero-panel-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: .4rem; padding-bottom: 1rem; }
.hero-panel-head span { background: #d9e2dd; border-radius: 50%; height: 8px; width: 8px; }
.hero-panel-head strong { margin-left: auto; }
.hero-stat { background: linear-gradient(135deg, #0d5635, #168154); border-radius: 15px; color: #fff; margin: 1rem 0; padding: 1.25rem; }
.hero-stat small, .hero-stat strong { display: block; }.hero-stat strong { font-size: 2.3rem; }
.mini-bar { background: rgba(255,255,255,.22); border-radius: 10px; display: block; height: 7px; margin-top: .7rem; overflow: hidden; }.mini-bar i { background: white; display: block; height: 100%; width: 96%; }
.hero-list { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1rem .35rem; }.hero-list b { color: var(--brand); }
.feature-strip { background: #fff; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 4vw 3rem; }
.feature-strip article { padding: 1.5rem; }.feature-strip article + article { border-left: 1px solid var(--line); }.feature-strip strong, .feature-strip span { display: block; }.feature-strip span { color: var(--ink-muted); margin-top: .4rem; }

@media (max-width: 991px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.detail-grid, .hero { grid-template-columns: 1fr; }.hero { padding: 2rem 0; }.feature-strip { margin: 0 0 3rem; }.module-row { grid-template-columns: 42px 1fr; }.licence-control { grid-column: 2; } }
@media (max-width: 620px) { .page-heading { align-items: flex-start; flex-direction: column; }.metric-grid, .feature-strip { grid-template-columns: 1fr; }.feature-strip article + article { border-left: 0; border-top: 1px solid var(--line); }.hero-copy h1 { font-size: 2.7rem; }.content-card { padding: 1rem; }.licence-control { align-items: stretch; flex-direction: column; } }

.module-launch { align-items: center; background: linear-gradient(135deg, #0c4d30, #16794f); border-radius: 18px; color: #fff; display: flex; grid-column: 1 / -1; justify-content: space-between; padding: 1.4rem 1.6rem; }
.module-launch .eyebrow { color: #9fe0c0; }.module-launch h2 { font-weight: 800; margin: 0; }.module-launch p { margin: .35rem 0 0; opacity: .82; }.module-launch .btn { background: #fff; color: #0c4d30; }
.attendance-metrics { grid-template-columns: repeat(3, 1fr); }
.class-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.class-card { background: #f8faf9; border: 1px solid var(--line); border-radius: 15px; display: flex; flex-direction: column; gap: .85rem; padding: 1.2rem; }
.class-card h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }.class-card p { color: var(--ink-muted); margin: .3rem 0 0; }.class-card > strong { color: var(--brand); font-size: .875rem; }
.form-shell { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 28px rgba(26,62,45,.055); margin: 0 auto; max-width: 1050px; padding: 2rem; }.form-shell > p { color: var(--ink-muted); }
.student-picker { display: grid; gap: .7rem; grid-template-columns: repeat(3, 1fr); }.student-picker label { align-items: center; background: #f8faf9; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; display: flex; gap: .65rem; padding: .8rem; }.student-picker strong,.student-picker small { display: block; }.student-picker small { color: var(--ink-muted); }
.date-picker { align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; gap: .7rem; margin-bottom: 1rem; padding: 1rem; }.date-picker label { font-weight: 700; }.date-picker .form-control { max-width: 190px; }
.register-card { padding: 0; }.register-table td { vertical-align: middle; }.register-table .form-select { min-width: 160px; }.register-actions { border-top: 1px solid var(--line); padding: 1rem; text-align: right; }
@media (max-width: 991px) { .class-grid,.student-picker { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .attendance-metrics,.class-grid,.student-picker { grid-template-columns: 1fr; }.module-launch { align-items: flex-start; flex-direction: column; gap: 1rem; }.date-picker { align-items: stretch; flex-direction: column; }.date-picker .form-control { max-width: none; } }
.select-all-modules { background: var(--brand-soft); border: 1px solid #b8dac8; border-radius: 12px; padding: .9rem 1rem; }
.select-all-modules label strong,.select-all-modules label small { display: block; }.select-all-modules label small { color: var(--ink-muted); font-size: .875rem; margin-top: .1rem; }
.address-section { background: #f8faf9; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }.address-section legend { float: none; margin-bottom: .2rem; width: auto; }.address-section > p { margin-bottom: 1rem; }
.postcode-status { color: var(--ink-muted); display: block; font-size: .875rem; margin-top: .3rem; min-height: 1.1rem; }
.address-finder { position: relative; }
.address-results { left: calc(var(--bs-gutter-x) * .5); max-height: 16rem; overflow-y: auto; position: absolute; right: calc(var(--bs-gutter-x) * .5); z-index: 1050; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.address-results:empty { display: none; }
.business-finder { background: var(--brand-soft); border: 1px solid #b8dac8; border-radius: 14px; padding: 1rem; }
.admissions-hero { align-items:center;background:linear-gradient(125deg,#2f2065,#7359d5);border-radius:22px;color:#fff;display:flex;justify-content:space-between;padding:clamp(1.5rem,4vw,3rem) }.admissions-hero .eyebrow{color:#d9d0ff}.admissions-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:850;letter-spacing:-.045em;margin:0}.admissions-hero p{margin:.8rem 0 0;max-width:750px;opacity:.85}.admissions-hero>strong{align-items:center;background:rgba(255,255,255,.13);border-radius:28px;display:flex;font-size: 3rem;height:110px;justify-content:center;min-width:110px}.admissions-metrics{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr);margin:1rem 0}.admissions-metrics article{background:#fff;border:1px solid var(--line);border-top:3px solid #7359d5;border-radius:14px;padding:1rem}.admissions-metrics span{color:var(--ink-muted);display:block;font-size: .875rem;font-weight:800;text-transform:uppercase}.admissions-metrics strong{font-size: 1.7rem}.admissions-create{margin-bottom:1rem}.admissions-create summary{cursor:pointer}.admissions-create summary span{color:var(--ink-muted);display:block;font-size: .875rem;margin-top:.2rem}.admissions-board{display:grid;gap:.8rem;grid-template-columns:repeat(4,minmax(240px,1fr));overflow-x:auto}.admissions-column{background:#f2f1f7;border:1px solid #ded9ee;border-radius:14px;min-height:330px;padding:.75rem}.admissions-column>header{align-items:center;display:flex;justify-content:space-between;padding:.25rem .25rem .75rem}.admissions-column>header span{background:#ded9ee;border-radius:999px;font-size: .875rem;font-weight:800;padding:.2rem .5rem}.admissions-card{background:#fff;border:1px solid var(--line);border-left:3px solid #7359d5;border-radius:11px;margin-bottom:.65rem;padding:.85rem}.admissions-card h2{font-size: .95rem;font-weight:800;margin:.5rem 0 .25rem}.admissions-card p,.admissions-card small{color:var(--ink-muted);display:block;font-size: .875rem}.admissions-card form{display:grid;gap:.4rem;grid-template-columns:1fr auto;margin-top:.8rem}.admissions-priority{border-radius:999px;font-size: .875rem;font-weight:800;padding:.22rem .48rem}.priority-low{background:#edf1ef;color:#55635c}.priority-normal{background:#e6eef9;color:#315b92}.priority-high{background:#fff0d3;color:#885400}.priority-urgent{background:#fae3e3;color:#9c2727}.admissions-empty{color:var(--ink-muted);font-size: .875rem;padding:2rem .5rem;text-align:center}@media(max-width:991px){.admissions-board{grid-template-columns:repeat(4,260px)}}@media(max-width:620px){.admissions-hero>strong{display:none}.admissions-metrics{grid-template-columns:repeat(2,1fr)}}

/* Classic look: keep the shared dashboard parts (Spec E, U2) tidy without the modern stylesheet. */
.mm-icon { width: 20px; height: 20px; vertical-align: middle; }
.mm-icon-sm { width: 16px; height: 16px; }
.mm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.mm-action { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.mm-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin: 1rem 0; }
.mm-count-list { list-style: none; padding: 0; }
.mm-count-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.mm-planned { font-size: .875rem; color: var(--ink-muted); }

/* U9 (owner, 15 Oct): the look switch, top-right of the classic header on every page. */
.look-switch { display: inline-flex; margin: 0; }
.look-switch .btn { white-space: nowrap; }
@media (max-width: 600px) { .look-switch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------------------------------------------------------------------------------------------------------------
   U13 (owner, 26 Oct): text that is easy to see, everywhere (both looks, light and dark). One set of tokens here;
   WCAG AA contrast (checked by ReadabilityTests), 16px body, nothing under 14px, 40px pills and tabs, a 3px focus ring.
   --------------------------------------------------------------------------------------------------------------- */
:root {
  --ink: #17231e; --ink-muted: #4c5a53; --ink-strong: #111827;
  --pill-bg: #f2f6f4; --pill-line: #9fb2a8; --pill-ink: #14211b; --pill-hover: #e3efe9;
  --pill-active: #0f6b47; --pill-active-ink: #ffffff; --pill-current-bg: #e3f4ec; --pill-current-ink: #0a4f34;
  --badge-bg: #d9e3de; --badge-ink: #14211b; --badge-red: #b42318; --badge-amber: #8a5a00; --badge-zero: #4c5a53;
  --focus-ring: #1c64f2;
}
[data-theme="dark"] {
  --ink: #e7efeb; --ink-muted: #b4c2bb; --ink-strong: #f3f7f5;
  --pill-bg: #1d2723; --pill-line: #5d7068; --pill-ink: #eef4f1; --pill-hover: #26332e;
  --pill-active: #3ccf91; --pill-active-ink: #062016; --pill-current-bg: #173a2a; --pill-current-ink: #b7f0d4;
  --badge-bg: #2f3d37; --badge-ink: #eef4f1; --badge-red: #ff9b92; --badge-amber: #ffcf6b; --badge-zero: #b4c2bb;
  --focus-ring: #7aa7ff;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --ink: #e7efeb; --ink-muted: #b4c2bb; --ink-strong: #f3f7f5;
    --pill-bg: #1d2723; --pill-line: #5d7068; --pill-ink: #eef4f1; --pill-hover: #26332e;
    --pill-active: #3ccf91; --pill-active-ink: #062016; --pill-current-bg: #173a2a; --pill-current-ink: #b7f0d4;
    --badge-bg: #2f3d37; --badge-ink: #eef4f1; --badge-red: #ff9b92; --badge-amber: #ffcf6b; --badge-zero: #b4c2bb;
    --focus-ring: #7aa7ff;
  }
}
body { font-size: 1rem; }
small, .small, .form-text, .badge { font-size: .875rem; }
.badge { font-weight: 700; }
.text-muted { color: var(--ink-muted) !important; }
.table, table { font-size: .9375rem; }
.table thead th, .clean-table thead th { color: var(--ink-strong); font-size: .875rem; font-weight: 700; }
.page-heading h1 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }

/* Keyboard focus: a clear 3px ring on every control. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Pills, tabs and chips: dark text on a tinted background with a visible border; the active one filled. */
.mm-tabs a, .mm-submenu a, .mm-pill, .u10-pill, .u10-chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .5rem 1rem; font-size: 1rem; font-weight: 600; line-height: 1.2;
  color: var(--pill-ink); background: var(--pill-bg); border: 1px solid var(--pill-line); border-radius: 999px; text-decoration: none; white-space: nowrap; }
.mm-tabs a:hover, .mm-submenu a:hover, .mm-pill:hover { background: var(--pill-hover); color: var(--pill-ink); }
.mm-tabs a[aria-current="page"], .mm-pill[aria-current="page"], .mm-pill.is-active { background: var(--pill-active); border-color: var(--pill-active); color: var(--pill-active-ink); }
.mm-count { display: inline-block; min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px; text-align: center; font-size: .875rem; font-weight: 800;
  background: var(--badge-bg); color: var(--badge-ink); }
.mm-count.red { background: var(--badge-red); color: var(--pill-active-ink); }
.mm-count.amber { background: var(--badge-amber); color: var(--pill-active-ink); }
.mm-count.is-zero { background: transparent; color: var(--badge-zero); box-shadow: inset 0 0 0 1px var(--pill-line); }
.mm-tabs a[aria-current="page"] .mm-count { background: var(--pill-active-ink); color: var(--pill-active); box-shadow: none; }

/* Up to 5 items: one row that never wraps; on a phone it swipes, with fading edges and no visible scrollbar. */
.mm-tabs { margin: 1rem 0; }
.mm-tabs-track { display: flex; flex-wrap: nowrap; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.mm-tabs-track::-webkit-scrollbar { display: none; }
@media (max-width: 760px) { .mm-tabs-track { mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%); padding: 3px 1rem; } }

/* 6 or more items: a side menu on desktop, a "Section" dropdown on a phone. The page beside it flows in the second column. */
.mm-submenu { margin: 0 0 1rem; }
.mm-submenu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.mm-submenu a { width: 100%; justify-content: flex-start; border-radius: 10px; background: transparent; border-color: transparent; white-space: normal; }
.mm-submenu a[aria-current="page"] { background: var(--pill-current-bg); color: var(--pill-current-ink); font-weight: 750; box-shadow: inset 4px 0 0 var(--pill-active); }
.mm-submenu a .mm-count { margin-left: auto; }
.mm-submenu-group { margin-top: .75rem; border-top: 1px solid var(--pill-line); padding-top: .5rem; }
.mm-submenu-group > summary { min-height: 2.5rem; display: flex; align-items: center; padding: .25rem 1rem; font-weight: 700; color: var(--ink-strong); cursor: pointer; }
.mm-submenu-select { display: none; font-weight: 700; color: var(--ink-strong); }
.mm-submenu-select select { margin-top: .35rem; min-height: 2.75rem; font-size: 1rem; }
@media (min-width: 992px) {
  :has(> nav.mm-submenu) { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  :has(> nav.mm-submenu) > * { grid-column: 2; }
  :has(> nav.mm-submenu) > nav.mm-submenu { grid-column: 1; grid-row: 1 / span 80; position: sticky; top: 1rem; }
}
@media (max-width: 991.98px) {
  .mm-submenu-list, .mm-submenu-group { display: none; }
  .mm-submenu-select { display: block; }
}

/* The text-size choice (classic header and the new look's account menu). */
.text-size-choice { display: inline-flex; gap: .25rem; margin: 0; }
.text-size-choice button { min-height: 2.5rem; min-width: 2.5rem; border: 1px solid var(--pill-line); background: var(--pill-bg); color: var(--pill-ink); border-radius: 10px; font-weight: 700; }
.text-size-choice button[aria-pressed="true"] { background: var(--pill-active); border-color: var(--pill-active); color: var(--pill-active-ink); }
.text-size-choice .ts-1 { font-size: .875rem; } .text-size-choice .ts-2 { font-size: 1rem; } .text-size-choice .ts-3 { font-size: 1.15rem; }
/* A row of related links (not tabs): plain links that may wrap, each an easy 40px target. */
.mm-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .5rem 0 1rem; }
.mm-links a { display: inline-flex; align-items: center; min-height: 2.5rem; font-weight: 650; color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
body.mm-modern main > nav.mm-links a { padding: 0; border: 0; background: none; border-radius: 0; color: var(--mm-accent-strong); }

/* U15 addendum (owner, 26 Oct): one layout for every table Actions cell. Buttons in a row with an 8px gap (CSS gap, never
   touching), right-aligned, the same 40px height and an even width; one filled primary, the rest outlined; status
   labels are chips in the Status column. On a phone they stack full width with the same gap. */
.mm-row-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-start; align-items: center; }
/* The Actions column (the last one) is right-aligned; cells mixing a value with a button (a masked phone and "Show") stay left. */
td:last-child > .mm-row-actions, .mm-customer-actions.mm-row-actions { justify-content: flex-end; }
.mm-row-actions form, .u10-row-actions form { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; display: inline-flex; }
.mm-row-actions > .btn, .mm-row-actions > form > .btn, .mm-row-actions > form > button,
.u10-row-actions > .u10-pill, .u10-row-actions > a.btn, .u10-row-actions > form > button, .u10-row-actions > form > .u10-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; min-width: 7.5rem; margin: 0;
  white-space: nowrap; max-width: 100%; }
@media (max-width: 700px) {
  .mm-row-actions, .u10-row-actions { flex-direction: column; align-items: stretch; }
  .mm-row-actions > *, .u10-row-actions > *, .mm-row-actions form > *, .u10-row-actions form > * { width: 100%; }
  .mm-row-actions form, .u10-row-actions form { display: flex; }
}
body.mm-modern main .mm-row-actions button, body.mm-modern main .u10-row-actions button { margin: 0; }