/*
  Imperial Calculator: Imperial OS look.
  Tokens copied from imperial-ai-control-centre app/theme.css (Stage 0, 15 Oct 2026).
  Visual only. Loaded after each page's own <style>; every rule is scoped under html.os
  so it wins over the older single-class rules without touching any script or markup.
*/

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html.os {
  color-scheme: light;
  --os-bg: #f7f6f3;
  --os-panel: #ffffff;
  --os-side: #f1efea;
  --os-ink: #14130f;
  --os-ink2: #4a4740;
  --os-mut: #5c5852;
  --os-line: #e7e4dc;
  --os-line2: #efece6;
  --os-strong: #d4cfc4;
  --os-acc: #a8833f;
  --os-acc-ink: #6e5324;
  --os-accs: #f5eedf;
  --os-em: #1f5a3e;
  --os-ems: #e6f0ea;
  --os-am: #8a5a10;
  --os-ams: #fbf1de;
  --os-rd: #8c3429;
  --os-rds: #f8e6e1;
  --os-bl: #2d4a73;
  --os-bls: #e7edf6;
  --os-hov: #e8e5de;
  --os-sh: 0 1px 2px rgba(20, 19, 15, 0.04), 0 1px 1px rgba(20, 19, 15, 0.02);
  --os-on-acc: #ffffff;
  --os-btn: #14130f;
  --os-on-btn: #ffffff;

  /* Old page variables, remapped */
  --bg: var(--os-bg);
  --card: var(--os-panel);
  --text: var(--os-ink);
  --muted: var(--os-mut);
  --edge: var(--os-line);
  --border: var(--os-line);
  --accent: var(--os-btn);
  --success-bg: var(--os-ems);
  --success-fg: var(--os-em);
  --warn-bg: var(--os-ams);
  --warn-fg: var(--os-am);
  --danger-bg: var(--os-rds);
  --danger-fg: var(--os-rd);
  --radius: 12px;
  --shadow: var(--os-sh);
}

html.os.dark {
  color-scheme: dark;
  --os-bg: #0c0c0b;
  --os-panel: #141412;
  --os-side: #0f0f0e;
  --os-ink: #f2efe8;
  --os-ink2: #bdb8ad;
  --os-mut: #9a958b;
  --os-line: #24231f;
  --os-line2: #1c1b18;
  --os-strong: #3a3832;
  --os-acc: #c9a35e;
  --os-acc-ink: #e3c88e;
  --os-accs: #2a2418;
  --os-em: #8dceb0;
  --os-ems: #15271e;
  --os-am: #e0a848;
  --os-ams: #2b2213;
  --os-rd: #f0a090;
  --os-rds: #2d1813;
  --os-bl: #a9c4ea;
  --os-bls: #16202e;
  --os-hov: #1d1c19;
  --os-sh: 0 1px 0 rgba(255, 255, 255, 0.04);
  --os-on-acc: #14130f;
  --os-btn: #f2efe8;
  --os-on-btn: #14130f;
}

/* ---------- Base ---------- */
html.os body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--os-bg);
  color: var(--os-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
html.os h1, html.os h2, html.os h3, html.os h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--os-ink);
}
html.os a { color: var(--os-acc-ink); }
html.os ::selection { background: var(--os-accs); color: var(--os-ink); }
html.os :focus-visible { outline: 2px solid var(--os-acc); outline-offset: 2px; }
html.os input[type="checkbox"], html.os input[type="radio"] { accent-color: var(--os-acc); }

/* ---------- Surfaces ---------- */
html.os .card,
html.os .break-card,
html.os .case-one,
html.os .age16-modal__dialog {
  background: var(--os-panel);
  border: 1px solid var(--os-line);
  border-radius: 12px;
  box-shadow: var(--os-sh);
}
html.os header.card { padding: 22px 24px; }
html.os header.card h1 { font-size: clamp(20px, 2.1vw, 26px); letter-spacing: -0.025em; }
html.os header.card p, html.os header p { color: var(--os-ink2); }
html.os header.card .logo { border-radius: 0; background: none; object-fit: contain; }

/* Imperial Citizenship logo: deep gold on light, champagne on dark */
html.os .os-logo--dark { display: none !important; }
html.os.dark .os-logo--light { display: none !important; }
html.os.dark .os-logo--dark { display: block !important; }

html.os .label, html.os .hint, html.os .note, html.os .sub, html.os .muted,
html.os .family-preview, html.os .bro-lang-title, html.os .bro-lang h4, html.os .bro-no,
html.os .brochure-lang-title, html.os .brochure-empty, html.os .help { color: var(--os-mut); }
html.os .label strong { color: var(--os-ink); font-weight: 600; }
html.os .timeline, html.os .mini-note, html.os .case-note, html.os .case-sec .hd .sub,
html.os .kicker, html.os .disclosure, html.os .preview { color: var(--os-ink2); }
html.os .brochure-program { color: var(--os-ink); }

/* ---------- Inputs ---------- */
html.os .input, html.os .select, html.os .textarea, html.os .chip-input, html.os .selector,
html.os select, html.os textarea,
html.os input[type="text"], html.os input[type="number"], html.os input[type="email"],
html.os input[type="password"], html.os input:not([type]) {
  background: var(--os-panel);
  color: var(--os-ink);
  border: 1px solid var(--os-strong);
  border-radius: 8px;
  font-family: inherit;
}
html.os .input:focus, html.os .select:focus, html.os select:focus, html.os textarea:focus, html.os input:focus {
  border-color: var(--os-acc);
  outline: none;
  box-shadow: 0 0 0 3px var(--os-accs);
}
html.os ::placeholder { color: var(--os-mut); opacity: 0.8; }

/* ---------- Buttons ---------- */
html.os .btn,
html.os #applyProfile.btn {
  background: var(--os-btn);
  color: var(--os-on-btn);
  border: 1px solid var(--os-btn);
  border-radius: 8px;
  font-family: inherit;
  font-weight: 500;
  box-shadow: none;
}
html.os .btn:not(:disabled):hover,
html.os #applyProfile.btn:not(:disabled):hover { filter: none; box-shadow: none; opacity: 0.88; }
html.os .btn.secondary {
  background: var(--os-panel);
  color: var(--os-ink);
  border-color: var(--os-strong);
}
html.os .btn.secondary:not(:disabled):hover { background: var(--os-hov); opacity: 1; }
html.os .btn.primary { background: var(--os-btn); color: var(--os-on-btn); border-color: var(--os-btn); }
html.os .totals-table td:nth-child(6) .btn,
html.os .totals-table td:nth-child(7) .btn { border-radius: 8px; }
html.os .totals-table button[data-combo],
html.os .totals-table button[data-merge] {
  background: var(--os-panel);
  color: var(--os-ink);
  border-color: var(--os-strong);
}
html.os .btn:disabled, html.os .btn.is-disabled,
html.os .btn[disabled], html.os .btn[aria-disabled="true"],
html.os .totals-table button[data-pdf]:disabled,
html.os .totals-table button[data-combo]:disabled,
html.os .totals-table button[data-merge]:disabled {
  background: var(--os-line2);
  color: var(--os-mut);
  border-color: var(--os-line);
  opacity: 1;
  box-shadow: none;
}
html.os #applyProfile.btn.is-applied,
html.os #applyProfile.is-applied {
  background: var(--os-em);
  border-color: var(--os-em);
  color: var(--os-panel);
  box-shadow: none;
}
html.os .apply-toast { background: var(--os-ink); color: var(--os-bg); box-shadow: var(--os-sh); }

/* Brochure buttons */
html.os .bro-btn, html.os .brochure-btn, html.os .brochure-link {
  background: var(--os-panel);
  color: var(--os-ink);
  border: 1px solid var(--os-strong);
  border-radius: 8px;
  box-shadow: none;
}
html.os .bro-btn:hover, html.os .brochure-btn:hover, html.os .brochure-link:hover {
  border-color: var(--os-acc);
  background: var(--os-accs);
}
html.os .bro-hr, html.os .section-sep, html.os hr { border-top-color: var(--os-line); }
/* The Caribbean buttons also carry .btn.primary; match the Europe look */
html.os .btn.primary.brochure-btn { background: var(--os-panel); color: var(--os-ink); border: 1px solid var(--os-strong); }
html.os .btn.primary.brochure-btn:hover { border-color: var(--os-acc); background: var(--os-accs); }
/* One centred card per language, laid out the same on both pages */
html.os .bro-lang-grid, html.os .brochure-lang-grid {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 10px !important;
}
html.os .bro-lang-grid > .bro-lang { grid-column: auto !important; grid-row: auto !important; }
html.os .bro-lang, html.os .brochure-lang {
  margin: 0; padding: 12px; min-width: 0;
  border: 1px solid var(--os-line); border-radius: 10px; background: var(--os-panel);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
html.os .bro-lang-title, html.os .brochure-lang-title, html.os .brochure-lang-title.is-ar { margin: 0 !important; text-align: center !important; }
html.os .brochure-list, html.os .brochure-actions, html.os .brochure-actions.is-ar { justify-content: center !important; direction: ltr; }
html.os .brochure-btn, html.os .brochure-link { font-weight: 500; font-size: 13px; }
html.os .brochure-btn .size, html.os .brochure-link .brochure-size { color: var(--os-mut); font-weight: 400; opacity: 1; }

/* ---------- Pills and badges ---------- */
html.os .pill, html.os .badge {
  border-radius: 999px;
  border: 1px solid var(--os-line);
  background: var(--os-panel);
  color: var(--os-ink2);
}
html.os .pill.ok, html.os .badge.success { background: var(--os-ems); color: var(--os-em); border-color: transparent; }
html.os .pill.warn, html.os .badge.warn { background: var(--os-ams); color: var(--os-am); border-color: transparent; }
html.os .pill.err, html.os .badge.danger { background: var(--os-rds); color: var(--os-rd); border-color: transparent; }
html.os .pill.info, html.os .mini-pill, html.os .badge:not(.warn):not(.danger):not(.success) {
  background: var(--os-bls); color: var(--os-bl); border-color: transparent;
}
html.os .host-driven .titlebar::after { background: var(--os-bls); color: var(--os-bl); border-color: transparent; }
html.os .age16-modal__eyebrow { background: var(--os-ams); color: var(--os-am); border-color: transparent; }
html.os .hard-note { background: var(--os-ams); color: var(--os-ink); border-color: transparent; }

/* ---------- Totals table ---------- */
html.os table.totals-table { border-color: var(--os-line); }
html.os table.totals-table th {
  color: var(--os-mut);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
html.os table.totals-table td { border-color: var(--os-line); }
html.os table.totals-table tbody tr:not(.details-row):hover { background: var(--os-line2); }
html.os table.totals-table tr.active,
html.os table.totals-table tbody tr.active:not(.details-row) {
  background: var(--os-accs);
  box-shadow: inset 3px 0 0 var(--os-acc);
}
html.os table.totals-table tbody tr.active:not(.details-row) > td:first-child { background: transparent; }
html.os table.totals-table tbody tr:not(.details-row) {
  background: var(--os-panel);
  border-color: var(--os-line);
}
html.os table.totals-table tbody tr:not(.details-row) > td:first-child { background: transparent; }
html.os table.totals-table td,
html.os .break-card,
html.os .case-one { font-variant-numeric: tabular-nums; }
html.os tr.details-row > td,
html.os tr.details-row,
html.os .mini-head,
html.os .case-sec .hd, html.os .case-one .hd,
html.os .case-subtotal, html.os .case-total, html.os .case-one .timeline,
html.os .age16-modal__callout {
  background: var(--os-line2);
  border-color: var(--os-line);
  color: var(--os-ink2);
}
html.os .case-sec, html.os .case-one { border-color: var(--os-line); }

/* Region option groups on the Europe host */
html.os #maltaOnlyRow, html.os #maltaPrpOnlyRow, html.os #turkeyOnlyRow, html.os #greeceOnlyRow,
html.os #porgrpOnlyRow, html.os #cyprusOnlyRow, html.os #latviaOnlyRow {
  background: var(--os-panel);
  border-color: var(--os-line);
  border-radius: 8px;
}
html.os #maltaOnlyRow::before, html.os #maltaPrpOnlyRow::before, html.os #turkeyOnlyRow::before,
html.os #greeceOnlyRow::before, html.os #porgrpOnlyRow::before, html.os #cyprusOnlyRow::before,
html.os #latviaOnlyRow::before { background: var(--os-bg); color: var(--os-mut); }

html.os .age16-modal { background: rgba(20, 19, 15, 0.5); }
html.os iframe.calc { background: var(--os-panel); }

/* Calculator pages opened on their own */
html.os .form-group { border-color: var(--os-line); }
html.os .alt { background: var(--os-line2); border-color: var(--os-line); }

/* ---------- Footer ---------- */
html.os .icc-footer {
  background: transparent;
  color: var(--os-mut);
  border-top: 1px solid var(--os-line);
  margin-top: 32px;
}
html.os .icc-footer__logo { width: 56px; height: 56px; filter: none; }
html.os .icc-footer * { color: var(--os-mut); }

/* Body clips sideways overflow without becoming its own scroller, so the top bar can stay pinned */
html.os body { overflow-x: clip; }
/* Phones and small tablets: the top bar already carries the crest, so the header drops its small copy */
@media (max-width: 760px) {
  html.os header.card .brand .logo { display: none !important; }
}

/* ---------- Top bar (partials/os-bar.php) ---------- */
html.os .auth-bar { display: none; }
html.os body:has(.os-bar) { padding-top: 0; }
/* The bar sits inside .container so it lines up with the cards; the background bleeds to the edges. */
.os-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 0 20px;
  border-image: linear-gradient(var(--os-bg), var(--os-bg)) fill 0 / 0 / 0 100vmax;
  box-shadow: 0 1px 0 var(--os-line);
  clip-path: inset(0 -100vmax -1px);
}
.os-bar__in {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.os-bar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
html.os .os-bar__brand { color: var(--os-ink); }
.os-bar__mark { display: inline-flex; align-items: center; flex: 0 0 auto; }
.os-bar__mark img { display: block; width: auto; height: 30px; }
.os-bar__name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.os-bar__name small { font-weight: 400; font-size: 12px; color: var(--os-mut); }
.os-bar__tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--os-line2); border: 1px solid var(--os-line); border-radius: 10px;
  margin-left: 8px; min-width: 0; overflow-x: auto;
}
.os-bar__tab {
  white-space: nowrap; text-decoration: none;
  padding: 6px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--os-ink2);
}
html.os .os-bar__tab { color: var(--os-ink2); }
.os-bar__tab:hover { color: var(--os-ink); }
html.os .os-bar__tab.is-on { background: var(--os-panel); color: var(--os-ink); box-shadow: var(--os-sh); }
.os-bar__right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.os-bar__user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--os-ink2); font-size: 13px; }
.os-bar__avatar {
  width: 26px; height: 26px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--os-accs); color: var(--os-acc-ink);
  font-size: 12px; font-weight: 600;
}
.os-bar__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.os-bar__icon, .os-bar__btn {
  height: 32px; border-radius: 8px;
  border: 1px solid var(--os-strong); background: var(--os-panel); color: var(--os-ink);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
}
html.os .os-bar__btn { color: var(--os-ink); }
.os-bar__icon { width: 32px; padding: 0; }
.os-bar__btn { padding: 0 12px; }
.os-bar__icon:hover, .os-bar__btn:hover { background: var(--os-hov); }
.os-bar .i-sun { display: none; }
html.os.dark .os-bar .i-sun { display: block; }
html.os.dark .os-bar .i-moon { display: none; }

@media (max-width: 900px) {
  .os-bar__in { flex-wrap: wrap; }
  .os-bar__tabs { order: 3; width: 100%; margin-left: 0; }
  .os-bar__email { display: none; }
}
@media (max-width: 520px) {
  .os-bar { margin: 0 0 16px; }
  .os-bar__in { padding: 10px 0; gap: 10px 8px; }
  .os-bar__name small { display: none; }
  .os-bar__user { display: none; }
  /* Both regions stay fully readable: two equal halves, text may wrap */
  .os-bar__tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .os-bar__tab { white-space: normal; text-align: center; line-height: 1.25; padding: 7px 8px; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 380px) {
  .os-bar__mark img { height: 24px; }
  .os-bar__name { font-size: 13px; }
  .os-bar__btn { padding: 0 10px; }
  .os-bar__tab { font-size: 12px; }
}
/* Phones held sideways: keep the sticky bar short so the page has room */
@media (max-height: 500px) and (orientation: landscape) {
  .os-bar { position: static; }
}

/* ---------- Totals table on smaller screens ---------- */
/* 1024 to 1279 wide: the form and totals side by side leave the table too narrow, so stack them */
@media (min-width: 1024px) and (max-width: 1279px) {
  html.os .grid.main { grid-template-columns: 1fr; }
}
/* Status words wrap between words, never mid-word */
html.os table.totals-table td:nth-child(5),
html.os table.totals-table td:nth-child(5) .pill { overflow-wrap: normal; word-break: normal; }
/* The programme cell was inline-flex, which pulls it out of the table grid; keep it a real cell */
html.os #totalsTable td.prog-toggle { display: table-cell; vertical-align: middle; }
html.os #totalsTable td.prog-toggle > * { vertical-align: middle; }
/* Caribbean, 761 to 1023 wide: the table scrolls sideways, so keep the programme name in view */
@media (min-width: 761px) and (max-width: 1023px) {
  html.os[data-icc-region="caribbean"] table.totals-table { overflow: clip; min-width: 700px; }
  html.os[data-icc-region="caribbean"] #totalsTable thead th:first-child,
  html.os[data-icc-region="caribbean"] #totalsTable tbody tr:not(.details-row) > td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--os-panel);
    box-shadow: 1px 0 0 var(--os-line);
  }
  /* cover the card padding on the left so scrolled cells never peek out beside the name */
  html.os[data-icc-region="caribbean"] #totalsTable thead th:first-child::before,
  html.os[data-icc-region="caribbean"] #totalsTable tbody tr:not(.details-row) > td:first-child::before {
    content: ""; position: absolute; top: -1px; bottom: -1px; left: -24px; width: 24px; background: var(--os-panel);
  }
  html.os[data-icc-region="caribbean"] #totalsTable tbody tr.active:not(.details-row) > td:first-child { background: var(--os-accs); }
  html.os[data-icc-region="caribbean"] #totalsTable tbody tr:not(.details-row):hover > td:first-child { background: var(--os-line2); }
}

/* Caribbean, 760 wide and below: one card per programme, the same pattern the Europe page uses */
@media (max-width: 760px) {
  html.os[data-icc-region="caribbean"] .totals { overflow-x: visible; }
  html.os[data-icc-region="caribbean"] table.totals-table,
  html.os[data-icc-region="caribbean"] table.totals-table tbody {
    display: block; width: 100%; min-width: 0 !important; border: 0; border-radius: 0; overflow: visible;
  }
  html.os[data-icc-region="caribbean"] table.totals-table thead { display: none; }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr:not(.details-row) {
    display: block; margin: 0 0 10px;
    border: 1px solid var(--os-line); border-radius: 12px; overflow: hidden;
    background: var(--os-panel); box-shadow: none;
  }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr.active:not(.details-row) { border-color: var(--os-acc); }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr:not(.details-row) > td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center; gap: 10px;
    width: auto !important; min-width: 0; max-width: none;
    padding: 10px 12px; border: 0; border-bottom: 1px solid var(--os-line);
    text-align: left; white-space: normal !important;
  }
  html.os[data-icc-region="caribbean"] #totalsBody tr:not(.details-row) > td { text-align: left !important; }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr:not(.details-row) > td:last-child { border-bottom: 0; }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr:not(.details-row) > td::before {
    color: var(--os-mut); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  }
  html.os[data-icc-region="caribbean"] #totalsBody tr:not(.details-row) > td:nth-child(2)::before { content: "Applicants"; }
  html.os[data-icc-region="caribbean"] #totalsBody tr:not(.details-row) > td:nth-child(3)::before { content: "Contribution"; }
  html.os[data-icc-region="caribbean"] #totalsBody tr:not(.details-row) > td:nth-child(4)::before { content: "Real Estate"; }
  html.os[data-icc-region="caribbean"] #totalsBody tr:not(.details-row) > td:nth-child(5)::before { content: "Status"; }
  html.os[data-icc-region="caribbean"] #totalsBody tr:not(.details-row) > td:nth-child(6)::before { content: "Quote DL"; }
  html.os[data-icc-region="caribbean"] #totalsBody tr:not(.details-row) > td:nth-child(7)::before { content: "Quote + Brochure"; }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr:not(.details-row) > td:first-child {
    display: flex !important; align-items: center; gap: 6px;
    font-weight: 600; background: var(--os-line2);
  }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr.active:not(.details-row) > td:first-child { background: var(--os-accs); }
  html.os[data-icc-region="caribbean"] table.totals-table tbody tr:not(.details-row) > td:nth-child(5) { justify-items: start; }
  html.os[data-icc-region="caribbean"] table.totals-table td:nth-child(6) .btn,
  html.os[data-icc-region="caribbean"] table.totals-table td:nth-child(7) .btn { width: 100%; min-height: 38px; }
  html.os[data-icc-region="caribbean"] tr.details-row {
    display: block; margin: -6px 0 12px;
    border: 1px solid var(--os-line); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden;
  }
  html.os[data-icc-region="caribbean"] tr.details-row > td { display: block; width: auto; border: 0; }
}

/* Breakdowns on small screens: wrap long labels, keep every amount on its own line end, no sideways scrolling */
@media (max-width: 760px) {
  html.os tr.details-row > td,
  html.os tr.details-row > td * { white-space: normal; }
  html.os tr.details-row .details-inner { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  html.os tr.details-row .break-card, html.os tr.details-row .case-one { min-width: 0; }
  html.os tr.details-row .break-line,
  html.os tr.details-row .case-line,
  html.os tr.details-row .case-row,
  html.os tr.details-row .case-total {
    display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; align-items: start;
  }
  html.os tr.details-row .break-line > span,
  html.os tr.details-row .case-line > span,
  html.os tr.details-row .case-row > span,
  html.os tr.details-row .case-total > span:first-child { min-width: 0; overflow-wrap: break-word; }
  html.os tr.details-row .break-line > strong,
  html.os tr.details-row .case-line > strong,
  html.os tr.details-row .case-row > strong,
  html.os tr.details-row .case-total > span:last-child { white-space: nowrap; text-align: right; }
  html.os tr.details-row .mini-head { flex-wrap: wrap; align-items: flex-start; }
  html.os tr.details-row .mini-title-wrap { flex: 1 1 calc(100% - 48px); min-width: 0; }
  html.os tr.details-row .mini-pill { margin-left: 32px; }
}

/* ---------- Sign-in pages ---------- */
html.os body.os-auth { background: var(--os-bg); }
html.os body.os-auth .card,
html.os body.os-auth form.card { border-radius: 12px; box-shadow: var(--os-sh); }
html.os body.os-auth .logo-wrap { border-radius: 0; width: 88px; height: 62px; }
html.os body.os-auth .logo { object-fit: contain; }
html.os body.os-auth p, html.os body.os-auth label { color: var(--os-mut); }
html.os body.os-auth .err { color: var(--os-rd); }
html.os body.os-auth .ok { color: var(--os-em); }
html.os body.os-auth .btn { min-height: 40px; }
html.os body.os-auth button[name="resend"] { background: var(--os-panel) !important; color: var(--os-ink) !important; border-color: var(--os-strong); }
html.os body.os-auth .os-auth__eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 12px; color: var(--os-mut);
}

/* ---------- Toolbar shown when a calculator is opened on its own ---------- */
html.os .icc-pill {
  font-family: inherit;
  border-radius: 8px;
  border-color: var(--os-strong);
  background: var(--os-panel);
  color: var(--os-ink);
  box-shadow: var(--os-sh);
}

@media print {
  .os-bar { display: none !important; }
}