/* IndTax – base styles. Kept deliberately plain; the page design round comes later. */
:root {
  --ink: #121826;
  --muted: #5a6378;
  --line: #e2e6ef;
  --bg: #f3f5fa;
  --card: #ffffff;
  /* One palette for the whole app: the sidebar's navy for actions and links,
     its amber for "you are here" and selected things */
  --brand: #26345a;
  --brand-dark: #121826;
  --brand-soft: #fdf2d8;
  --amber-line: #e9a823;
  --side: #121826; --side-2: #1c2436; --side-3: #313c5c;
  --side-ink: #eef1f8; --side-muted: #b4bccf; --amber: #f5b83d;
  --ok-bg: #e7f4ea; --ok-ink: #1d5c2e;
  --warn-bg: #fff4e0; --warn-ink: #7a4b00;
  --err-bg: #fdecec; --err-ink: #8a1f1f;
  --radius: 8px;
  font-size: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--brand); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: #fff; padding: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.site-header { background: var(--side); color: var(--side-strong, #fff); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 60px; flex-wrap: wrap; }
.brand { color: var(--side-strong, #fff); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.main-nav { display: flex; gap: 18px; align-items: center; flex: 1; justify-content: flex-end; }
.main-nav a { color: var(--side-strong, #fff); text-decoration: none; }
.main-nav a:hover { text-decoration: underline; }
.header-account { display: flex; gap: 12px; align-items: center; font-size: .9rem; }
.header-account form { margin: 0; }
.switcher select { padding: 4px 6px; border-radius: 4px; border: 0; }
.link-button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

main.wrap { padding-top: 28px; padding-bottom: 48px; }
h1 { font-size: 1.75rem; margin: 0 0 16px; }
h2 { font-size: 1.25rem; margin: 28px 0 12px; }
.lead { font-size: 1.1rem; color: var(--muted); }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; }

.messages { margin-bottom: 16px; }
.message { padding: 10px 14px; border-radius: var(--radius); margin: 0 0 8px; background: #eef3f8; }
.message-success { background: var(--ok-bg); color: var(--ok-ink); }
.message-warning { background: var(--warn-bg); color: var(--warn-ink); }
.message-error { background: var(--err-bg); color: var(--err-ink); }

/* Forms (also used by django-allauth's default form rendering) */
form p, .field { margin: 0 0 16px; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel],
input[type=number], select, textarea {
  width: 100%; max-width: 100%; padding: 9px 10px; border: 1px solid #b8c0cc; border-radius: 6px;
  font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 3px solid #ffbf47; outline-offset: 1px; }
.helptext, .help { display: block; color: var(--muted); font-size: .9rem; font-weight: normal; margin-top: 4px; }
.errorlist { color: var(--err-ink); list-style: none; padding: 0; margin: 4px 0; }
ul.radio, form ul:not(.errorlist) { list-style: none; padding: 0; margin: 0; }
input[type=radio], input[type=checkbox] { margin-right: 8px; }
form ul:not(.errorlist) label { font-weight: normal; display: flex; align-items: center; margin: 6px 0; }

button, .button {
  display: inline-block; background: var(--brand); color: #fff; border: 0; border-radius: 6px;
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { background: var(--brand-dark); }
.button-secondary { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.button-secondary:hover { background: #eef3f8; }
.button-danger { background: #a12a2a; }
.button-small { padding: 6px 12px; font-size: .9rem; }
.inline-form { display: inline; margin: 0; }

table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
dl.details { display: grid; grid-template-columns: 220px 1fr; gap: 8px 16px; margin: 0; }
dl.details dt { color: var(--muted); }
dl.details dd { margin: 0; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; background: #eef3f8; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reference { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.2rem; letter-spacing: .1em; }
.site-footer { color: var(--muted); font-size: .85rem; padding: 24px 0; border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  dl.details { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .header-inner { padding: 8px 16px; gap: 6px 16px; }
  .main-nav { gap: 14px; }
  .header-account { width: 100%; justify-content: space-between; }
}

/* Conditional fields (static/js/forms.js) */
[hidden] { display: none !important; }

/* Live password checklist */
.pw-rules { list-style: none; padding: 0; margin: 8px 0 0; font-size: .9rem; }
.pw-rule { display: flex; align-items: baseline; gap: 8px; margin: 3px 0; color: var(--ink); }
.pw-icon { display: inline-block; width: 1.1em; text-align: center; font-weight: 700; }
.pw-rule.is-pending .pw-icon { color: #8a94a3; }
.pw-rule.is-ok .pw-icon { color: #1d7a3a; }
.pw-rule.is-bad .pw-icon { color: #b42318; }
.pw-rule.is-pending .pw-label { color: var(--muted); }

/* Sectioned forms (e.g. client details) */
.form-section h2, .section-title { margin: 0 0 16px; font-size: 1.15rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid .field-wide { grid-column: 1 / -1; }
.phone-row { display: flex; gap: 8px; }
.phone-row select { flex: 0 0 210px; width: 210px; }
.phone-row input { flex: 1; min-width: 0; }
.lookup-row { display: flex; gap: 8px; }
.lookup-row input { flex: 1; min-width: 0; max-width: 220px; }
.lookup-results { margin-top: 8px; }
.address-lookup { padding: 14px 16px; background: #f1f5f9; border-radius: var(--radius); margin-bottom: 16px; }
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .phone-row { flex-direction: column; }
  .phone-row select { width: 100%; flex-basis: auto; }
}

/* --- Tax return pages --- */
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); }
.lead-tight { margin: -8px 0 16px; }
.group-title { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 28px 0 10px; }
.section-list, .page-list { list-style: none; padding: 0; margin: 0; }
.section-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px; }
.section-row.is-planned { background: transparent; }
.section-row.is-planned .section-name { color: var(--muted); }
.section-name { font-weight: 600; font-size: 1.05rem; }
.form-code { font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 2px; }
.section-intro { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.section-figures { text-align: right; min-width: 170px; display: flex; flex-direction: column; align-items: flex-end; }
.figure { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.figure-label { color: var(--muted); font-size: .85rem; }
.tag-planned { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.tag-in_progress { background: var(--warn-bg); color: var(--warn-ink); }
.tag-approved, .tag-filed { background: var(--ok-bg); color: var(--ok-ink); }
.start-card { border-left: 4px solid var(--brand); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; display: flex; flex-direction: column; }
.tile-main { border-top: 4px solid var(--brand); }
.tile-label { color: var(--muted); font-size: .9rem; }
.tile-figure { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.problems ul { margin: 0; padding-left: 20px; }
.problem-error { color: var(--err-ink); }
.problem-warning { color: var(--warn-ink); }
.page-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.page-card-title { font-size: 1.15rem; margin: 0; }
.entries { margin: 12px 0 0; border-top: 1px solid var(--line); }
.entry { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry dt { color: var(--ink); }
.entry dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.entry-tax_paid dt, .entry-expense dt { color: var(--muted); }

.entry-form { padding: 0; }
.q { padding: 18px 0; border-bottom: 1px solid var(--line); }
/* A heading from the HMRC form over the boxes that follow it */
.q-heading { margin: 28px 0 0; padding: 12px 16px; background: var(--brand-soft);
  border-left: 4px solid var(--brand); border-radius: 0 6px 6px 0; }
.q-heading h2 { margin: 0; font-size: 1.05rem; color: var(--brand-dark); }
.q-heading h2 .muted { font-size: .85rem; font-weight: normal; }
.q-heading .helptext { margin: 4px 0 0; max-width: 70ch; }
.q:last-of-type { border-bottom: 0; }
.q-label, .q legend { display: block; font-weight: 600; margin-bottom: 4px; }
.q fieldset { border: 0; padding: 0; margin: 0; }
.q .helptext { margin: 0 0 8px; max-width: 62ch; }
.q.has-error { border-left: 4px solid var(--err-ink); padding-left: 14px; margin-left: -18px; }
.field-error { color: var(--err-ink); font-weight: 600; margin: 4px 0 8px; }
.money-input { display: inline-flex; align-items: center; border: 1px solid #8a94a3; border-radius: 6px; background: #fff; overflow: hidden; }
.money-input span { padding: 0 10px; color: var(--muted); background: var(--bg); align-self: stretch; display: flex; align-items: center; border-right: 1px solid var(--line); }
.money-input input { border: 0; width: 13ch; text-align: right; font-variant-numeric: tabular-nums; padding: 9px 10px; font: inherit; }
.money-input:focus-within { outline: 3px solid #ffbf47; }
.q input[type=text]:not(.money), .q input[type=date], .q textarea, .q select { max-width: 100%; }
.q-tick .tick { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.q-tick .tick input { margin-top: 4px; width: 20px; height: 20px; }
.box-ref { display: block; margin-top: 6px; font-size: .75rem; color: var(--muted); }
.form-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 16px; }
@media (max-width: 700px) {
  .section-row, .page-card-head { flex-direction: column; align-items: stretch; }
  .section-figures { align-items: flex-start; text-align: left; }
  .entry { flex-direction: column; gap: 0; }
  .entry dd { text-align: left; }
}
.return-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }

/* Breakdown side panel */
.money-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.money-input.is-total { background: var(--bg); }
.money-input.is-total input { background: var(--bg); color: var(--ink); font-weight: 600; }
@media (max-width: 520px) {
}
.q-gate fieldset { border: 0; padding: 0; margin: 0; }
.gate-options { display: grid; gap: 8px; margin-top: 6px; }
.gate-options .tick { display: flex; gap: 10px; align-items: center; font-weight: 400; border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px; cursor: pointer; }
.gate-options .tick:has(input:checked) { border-color: var(--amber-line); background: var(--brand-soft); }
.gate-options input { width: 20px; height: 20px; margin: 0; }
/* A choice with boxes of its own: the tick and its boxes share one frame */
.gate-option { border: 1px solid var(--line); border-radius: 6px; }
.gate-option:has(> .tick input:checked) { border-color: var(--amber-line); background: var(--brand-soft); }
.gate-option > .tick, .gate-option > .tick:has(input:checked) { border: 0; background: transparent; }
.gate-box { display: flex; gap: 8px 16px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; padding: 0 12px 12px 42px; }
.gate-box[hidden] { display: none; }
.gate-box-text { flex: 1 1 260px; min-width: 0; }
.gate-box-text .helptext { margin: 2px 0 0; }
.gate-box-text .q-label { display: inline; margin-right: 6px; }
.gate-box .money-input { flex: 0 0 auto; background: #fff; }
.gate-box input.money { width: 10rem; }
@media (max-width: 520px) {
  .gate-box { padding-left: 12px; }
  .gate-box .money-input, .gate-box input.money { width: 100%; }
}
.amend-tick { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-weight: 400 !important; }
.amend-tick input { width: 18px; height: 18px; margin: 0; }
.calc-note { margin-top: 6px; }
.calc-panel { border-top: 4px solid var(--brand); }
.calc-lines { margin: 12px 0; }
.calc-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.calc-lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.calc-lines .calc-total { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; }
.calc-lines .calc-total dt { font-weight: 700; }
.calc-result { background: var(--bg); border-radius: var(--radius); padding: 4px 14px; }
.calc-verdict { font-weight: 600; font-size: 1.05rem; }
.explain-box { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--warn-ink); background: var(--warn-bg); border-radius: 4px; }
.explain-box textarea { width: 100%; min-height: 4.5em; }

/* Income sources (e.g. employers) */
.sources-table table { background: var(--card); }
.sources-table th[scope=row] { font-weight: 600; }
.sources-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sources-table .tickcol { text-align: center; width: 6.5rem; }
.tick-yes { color: var(--ok-ink); font-weight: 700; font-size: 1.1rem; }
.tick-no { color: var(--muted); }
.sources-table .actions { white-space: nowrap; text-align: right; }
.sources-table .actions a { margin-right: 12px; }
/* Keep Remove on the same line as Change and Import (the general .inline-form is a block) */
.sources-table .actions .inline-form { display: inline; margin: 0; }
.sources-table .actions button.link-like { font: inherit; vertical-align: baseline; }
.danger-link { color: var(--err-ink); }
.add-source { margin: 16px 0; }
.eyebrow { margin: 0; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.source-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 16px; font-size: .92rem; }
.source-steps [aria-current] { font-weight: 700; border-bottom: 3px solid var(--amber); }
.sources-table th[scope=row] { text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); }
@media (max-width: 700px) {
  .sources-table, .sources-table table, .sources-table tbody, .sources-table tr { display: block; width: 100%; }
  .sources-table table { background: transparent; border: 0; }
  .sources-table thead { display: none; }
  .sources-table tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 8px 14px; }
  .sources-table th[scope=row] { display: block; padding: 6px 0; border: 0; }
  .sources-table td { display: flex; justify-content: space-between; padding: 5px 0; border: 0; border-top: 1px solid var(--line); width: auto; text-align: right; }
  .sources-table td::before { content: attr(data-label); color: var(--muted); font-weight: 400; text-align: left; }
  .sources-table td.actions { justify-content: flex-start; gap: 16px; align-items: baseline; }
  .sources-table td.actions a { margin-right: 0; }
  .sources-table td.actions::before { content: none; }
}




/* ===== App frame: dark sidebar with the product name, top bar, content ===== */
.app { display: flex; min-height: 100vh; background: linear-gradient(to right, var(--side) 300px, var(--bg) 300px); }
.app-sidebar { flex: 0 0 300px; background: var(--side); color: var(--side-ink); position: sticky; top: 0;
  height: 100vh; overflow-y: auto; padding: 20px 14px 28px; box-sizing: border-box; }
.app-brand, .brand { display: flex; align-items: center; gap: 10px; color: var(--side-strong, #fff); font-weight: 800; font-size: 1.1rem;
  text-decoration: none; padding: 0 10px 20px; }
.app-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--amber); color: var(--on-amber, var(--side));
  display: grid; place-items: center; font-weight: 800; font-size: .95rem; flex: none; }
/* The Apona logo: the mark (arms in the text colour, the four module quarters) and the lower-case name */
.app-brand-product { gap: 12px; }
.app-mark { width: 40px; height: 40px; flex: none; color: var(--side-strong, #fff); }
.app-wordmark { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.app-wordmark-name { font-weight: 600; font-size: 1.6rem; letter-spacing: -0.01em; }
.app-wordmark-tag { font-weight: 600; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--side-muted, #b4bccf); padding-left: .1em; }
.app-menu summary { display: none; }
.app-nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--side-ink); text-decoration: none; font-weight: 600; }
.app-nav a:hover { background: var(--side-2); }
.app-nav a.is-current { background: var(--side-3); color: var(--side-strong, #fff); }
.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid var(--line); padding: 12px max(32px, calc((100% - 1160px) / 2 + 32px)); min-height: 56px; box-sizing: border-box; }
.app-topbar .crumbs { margin: 0; }
.app-topbar .header-account { color: var(--muted); }
.app-topbar .link-button { color: var(--brand); }
.app-topbar .switcher select { border: 1px solid var(--line); padding: 6px 8px; }
.app-main { flex: 1; padding: 28px 32px 48px; max-width: 1160px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.app-body .site-footer { padding: 16px max(32px, calc((100% - 1160px) / 2 + 32px)); border-top: 1px solid var(--line); }
.site-header .brand { padding: 0; }
.crumbs a { color: var(--muted); }

/* The return menu, inside the sidebar */
.return-nav { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--side-3); font-size: .9rem; }
.nav-working-on { margin: 0 4px 14px; padding: 10px 12px; border-radius: 10px; background: var(--side-2); display: grid; }
.nav-working-on span { font-size: .75rem; color: var(--side-muted); }
.nav-working-on strong { color: var(--side-strong, #fff); }
.return-nav ul { list-style: none; margin: 0; padding: 0; }
.return-nav a, .return-nav .nav-off { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px;
  border-radius: 8px; color: var(--side-ink); text-decoration: none; }
.return-nav a:hover { background: var(--side-2); }
.return-nav .nav-home { font-weight: 700; }
.return-nav li.is-open > a { color: var(--side-strong, #fff); font-weight: 700; }
.return-nav a.is-current, .return-nav li.is-open > a.is-current, .return-nav a.is-current:hover { background: var(--amber); color: var(--on-amber, var(--side)); font-weight: 700; }
.nav-group { margin: 16px 12px 4px; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--side-muted); font-weight: 700; }
.return-nav .nav-off { color: var(--side-muted); }
.nav-soon { font-size: .68rem; color: #d3d9e6; background: var(--side-2); border: 1px solid #4a5574; border-radius: 999px; padding: 0 6px; align-self: center; }
.nav-meta { display: flex; align-items: center; gap: 6px; flex: none; align-self: center; }
.nav-mark { width: 40px; display: flex; justify-content: flex-end; }
.nav-form { font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: var(--side-muted); }
.return-nav a.is-current .nav-form { color: var(--on-amber, var(--side)); }
.nav-done { color: var(--amber); font-size: .7rem; align-self: center; }
.nav-pages { margin: 2px 0 6px 14px !important; border-left: 1px solid var(--side-3); padding-left: 6px !important; }
.nav-pages a { font-size: .85rem; padding: 5px 10px; color: #d3d9e6; }
.nav-pages a.nav-source { color: var(--side-ink); }
.nav-pages a.nav-source.is-open { color: var(--side-strong, #fff); font-weight: 700; }
.nav-empty { padding: 4px 10px; color: var(--side-muted); font-size: .82rem; }

@media (max-width: 900px) {
  .app { flex-direction: column; background: var(--bg); }
  .app-sidebar { position: static; height: auto; flex: none; padding: 10px 14px; display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between; }
  .app-brand { padding: 4px 0; }
  .app-menu { width: auto; }
  .app-menu[open] { width: 100%; }
  .app-menu summary { display: inline-block; list-style: none; cursor: pointer; color: var(--side-strong, #fff); font-weight: 700;
    border: 1px solid var(--side-3); border-radius: 8px; padding: 6px 12px; }
  .app-menu summary::-webkit-details-marker { display: none; }
  .app-menu summary::after { content: " ▾"; color: var(--side-muted); }
  .app-sidebar:has(.app-menu[open]) .app-brand { flex: 1; }
  .app-menu[open] summary { margin-bottom: 10px; float: right; margin-top: -40px; }
  .app-topbar { padding: 10px 16px; }
  .app-main { padding: 20px 16px 40px; }
}

/* ===== Return pages: headings, totals, section list, entry rows ===== */
.eyebrow { margin: 0 0 2px; color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
.title-xl { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.title-lg { font-size: 1.85rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 4px; }
.page-intro { color: var(--muted); margin: 0 0 18px; max-width: 70ch; }
.pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill-entered, .pill-approved, .pill-filed { color: #1d6a3a; background: #e3f4e9; }
.pill-check, .pill-in_progress { color: #7a4d00; background: #fff1d6; }
.pill-none { color: #4a5266; background: #eceff5; }
.pill-soon { color: var(--muted); background: transparent; border: 1px dashed #c9cfdc; }

/* A: totals in one joined strip */
.totals-strip, .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 22px 0 10px; }
.totals-strip > div, .tiles .tile { background: #fff; padding: 18px 22px; display: flex; flex-direction: column; border: 0; border-radius: 0; }
.tiles .tile-main { border-top: 0; }
.tile-label { color: var(--muted); font-size: .85rem; font-weight: 600; }
.tile-figure { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.tile-pending { color: #9aa3b8; }
.tile-note { color: var(--muted); font-size: .78rem; }
.progress-line { color: var(--muted); font-size: .9rem; margin: 0 0 22px; }

/* C: the list of sections */
.section-table { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.section-table-head, .section-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px 120px; gap: 14px; align-items: center; padding: 13px 20px; }
.section-table-head { background: #f8f9fc; border-bottom: 1px solid var(--line); font-size: .72rem; font-weight: 700; color: var(--muted);
  letter-spacing: .07em; text-transform: uppercase; }
.section-table-head span:first-child { color: var(--ink); }
.section-table-row { border-bottom: 1px solid #eef1f6; color: var(--ink); text-decoration: none; }
.section-table-row:last-child { border-bottom: 0; }
a.section-table-row:hover { background: #f8f9fc; }
a.section-table-row:hover strong { color: var(--brand); }
.section-table-row.is-planned { color: var(--muted); }
.st-name strong { display: block; font-weight: 700; }
.st-sub { display: block; font-size: .85rem; color: var(--muted); }
.section-table .num { text-align: right; }
.st-amount { font-weight: 800; }
.st-changed { font-size: .85rem; color: var(--muted); }

/* A: entry rows – question on the left, box on the right */
.entry-form { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.entry-form .form-alert { margin: 16px 24px 0; }
.entry-form .q { padding: 18px 24px; border-bottom: 1px solid #eef1f6; margin: 0; }
.q-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 6px 28px; align-items: start; }
.q-extra { grid-column: 1 / -1; }
.q-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.q-label { font-weight: 700; margin: 0; }
.q .helptext { margin: 4px 0 0; font-size: .88rem; }
.box-chip { flex: none; font-size: .72rem; font-weight: 700; color: var(--muted); background: #eceff5; padding: 2px 8px;
  border-radius: 6px; white-space: nowrap; cursor: help; }
.q-input { padding-top: 2px; }
.q-input input[type=text], .q-input input[type=date], .q-input select, .q-input textarea { width: 100%; }
.q-input .money-input { display: flex; width: 100%; }
.q-input .money-input input { width: 100%; }
.q.has-error { border-left: 4px solid var(--err-ink); padding-left: 20px; margin-left: 0; background: #fffafa; }
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-pill { display: flex !important; align-items: center; gap: 8px; border: 1px solid #c9cfdc; border-radius: 8px; padding: 8px 14px;
  font-weight: 600 !important; cursor: pointer; margin: 0 !important; }
.radio-pill:has(input:checked) { border-color: var(--amber-line); background: var(--brand-soft); }
.radio-pill input { margin: 0; }
.q-wide .tick { margin: 0; }
.entry-form .form-actions { background: #f8f9fc; border-top: 1px solid var(--line); padding: 16px 24px; margin: 0; }
.money-input { border-color: #c9cfdc; border-radius: 8px; }
.money-input input { font-weight: 700; }
.step-chips { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0 0 20px; font-size: .85rem; }
.step-chips a, .step-chips span { display: block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--muted); text-decoration: none; font-weight: 600; }
.step-chips a:hover { border-color: var(--brand); color: var(--brand); }
.step-chips .is-current { background: var(--amber); border-color: var(--amber); color: var(--on-amber, var(--side)); }
.card { border-radius: 12px; }
button, .button { border-radius: 8px; font-weight: 700; }

@media (max-width: 900px) {
  .totals-strip, .tiles { grid-template-columns: 1fr; }
  .section-table-head { display: none; }
  .section-table-row { grid-template-columns: 1fr; gap: 4px; }
  .section-table .num { text-align: left; }
  .st-amount::before, .st-changed::before { content: attr(data-label) ": "; font-weight: 400; color: var(--muted); }
  .q-row { grid-template-columns: 1fr; }
  .entry-form .q { padding: 16px; }
}

/* Entries listed under a box (see static/js/breakdown.js) */
button.link-like, button.link-like:hover { background: none; border: 0; padding: 0; color: var(--brand);
  font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; border-radius: 0; }
button.link-like:hover { color: var(--brand-dark); }
button.bd-remove, button.bd-remove:hover { color: var(--err-ink); font-size: .85rem; }
.bd-inline { margin-top: 2px; }
.bd-summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .9rem; width: max-content; max-width: 100%; }
.bd-summary:hover { color: var(--brand-dark); text-decoration: underline; }
.bd-inline[open] > .bd-summary { margin-bottom: 6px; }
.bd-inline .helptext { margin: 0 0 10px; font-size: .85rem; }
.bd-list { border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; overflow: hidden; }
.bd-rows { list-style: none; margin: 0; padding: 0; }
.bd-line { display: grid; grid-template-columns: minmax(0, 1.3fr) 11rem minmax(0, 1fr) 4.5rem; gap: 8px 12px;
  align-items: center; padding: 8px 12px; border-bottom: 1px solid #eef1f6; }
.bd-line input { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: .92rem; }
.bd-line .money-input input { padding: 7px 10px; text-align: right; }
.bd-line .field-error { grid-column: 1 / -1; margin: 0; }
.bd-line.has-error { background: #fff6f6; }
.bd-head { background: #f3f5fa; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding-top: 7px; padding-bottom: 7px; }
.bd-head span:nth-child(2) { text-align: right; padding-right: 10px; }
.bd-remove { font-size: .85rem; color: var(--err-ink); justify-self: end; }
.bd-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; }
.bd-more { font-size: .88rem; }
.bd-total { margin: 0 0 0 auto; font-size: .9rem; color: var(--muted); }
.bd-total strong { margin-left: 8px; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.money-input.is-total, .money-input.is-total input { background: var(--bg); }
.money-input.is-total input { font-weight: 700; }
.bd-tax-word { display: none; }
@media (max-width: 700px) {
  .bd-head { display: none; }
  .bd-line { grid-template-columns: minmax(0, 1fr) 8.5rem; }
  .bd-line input[name$="-notes"] { grid-column: 1 / 2; }
  /* No column headings on a phone: say which £ box is the tax, and put it under the amount */
  .bd-with-tax { grid-auto-flow: row dense; }
  .bd-with-tax .bd-tax { grid-column: 2; }
  .bd-tax-word { display: inline; font-weight: 600; font-size: .78rem; }
}

/* A list of entries that fills several boxes, e.g. each pension (see static/js/entries.js) */
.en-list { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.en-head h2 { margin: 0 0 4px; font-size: 1.05rem; }
.en-head .helptext { margin: 0 0 14px; }
.en-rows { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.en-row { position: relative; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; padding: 12px 44px 12px 14px; }
.en-row.has-error { border-color: var(--err-ink); background: #fff6f6; }
.en-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; }
.en-field { grid-column: span 2; display: grid; gap: 3px; font-size: .82rem; font-weight: 600; }
.en-field small { font-weight: 400; color: var(--muted); }
.en-field.en-money { grid-column: span 3; }
.en-field input { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: .95rem; font-weight: 400; }
.en-field .money-input input { text-align: right; }
.en-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.en-tick { font-size: .88rem; }
.en-row .field-error { margin: 8px 0 0; }
.en-info { margin-top: 16px; background: var(--brand-soft); border-radius: 10px; padding: 12px 14px; }
.en-info-label { margin: 0 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7a4d00; }
.en-info-text { margin: 0; font-size: .9rem; }
@media (max-width: 700px) {
  .en-list { padding: 16px; }
  .en-fields { grid-template-columns: 1fr; }
  .en-field, .en-field.en-money { grid-column: auto; }
}

/* Traffic lights: grey not started, amber in progress, green complete (apps/returns/progress.py) */
.light { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; }
.light-none { background: transparent; box-shadow: inset 0 0 0 1.5px #7d88a3; }
.light-partial { background: var(--amber); }
.light-complete { background: #3ccf7a; }

/* Sidebar: Settings pinned to the bottom */
@media (min-width: 901px) {
  .app-sidebar { display: flex; flex-direction: column; }
  .app-menu { flex: none; }
}
.app-nav-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--side-3); }
@media (max-width: 900px) {
  .app-nav-bottom { width: 100%; margin-top: 8px; padding-top: 8px; }
  .app-menu:not([open]) ~ .app-nav-bottom { display: none; }
}
.nav-icon { display: inline-block; width: 1.1em; opacity: .85; }

/* Settings page */
.back-link { display: inline-block; margin-bottom: 10px; font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.settings-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 0 0 18px; }
.settings-card h2 { margin: 0 0 12px; font-size: 1.1rem; }
.activity > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.activity > summary::-webkit-details-marker { display: none; }
.activity > summary::before { content: "▸"; color: var(--muted); width: 1em; }
.activity[open] > summary::before { content: "▾"; }
.activity > summary h2 { margin: 0; }
.activity > summary .muted { font-size: .9rem; }
.activity-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 6px; }
.activity-search input[type=search] { flex: 1 1 260px; max-width: 420px; padding: 9px 12px; }
.activity .helptext { margin: 0 0 12px; }

/* Tax calculation (SA302) */
.sa302 { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 28px 24px; margin-bottom: 16px; }
.sa302-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; border-bottom: 2px solid var(--ink); }
.sa302-title { text-align: right; font-weight: 800; font-size: 1.1rem; }
.sa302-title span { font-weight: 500; font-size: .9rem; color: var(--muted); }
/* The calculation in HMRC's SA302 columns: C (sign or label), D and E (indented labels),
   F to J (figures; I also holds "x rate ="). Labels run across empty columns to the right. */
.sa302-note-row td { font-size: .9rem; padding: 2px 0 8px; color: var(--ink); }
.sa302-scroll { overflow-x: auto; }
.sa302-table { width: 100%; border-collapse: collapse; table-layout: fixed;
  font-variant-numeric: tabular-nums; }
.sa302-table col.c-sign { width: 3.4rem; }
.sa302-table col.c-ind1 { width: 1.6rem; }
.sa302-table col.c-ind2 { width: auto; }
.sa302-table col.c-money { width: 7rem; }
.sa302-table td, .sa302-table th { padding: 5px 0; text-align: left; font-weight: 400;
  vertical-align: top; border-bottom: 1px solid #f0f2f6; background: transparent; }
.sa302-table td.label { padding-right: 12px; }
.sa302-table td.sign { color: var(--muted); font-size: .85rem; padding-top: 7px; }
.sa302-table td.num { text-align: right; white-space: nowrap; padding-left: 8px; }
.sa302-table td.rate { text-align: right; color: var(--muted); white-space: nowrap;
  padding-left: 8px; }
.sa302-table tbody.sa302-section tr:first-child td,
.sa302-table tbody.sa302-section tr:first-child th { padding-top: 18px; }
.sa302-title-row th { font-weight: 800; font-size: 1rem; text-transform: none;
  letter-spacing: 0; color: var(--ink); }
.sa302-sub td.label { font-weight: 700; padding-top: 10px; }
.sa302-band td.label { color: var(--muted); }
.sa302-total td.label { font-weight: 700; }
.sa302-total td.num { font-weight: 700; border-top: 1px solid var(--ink); }
.sa302-grand td.label, .sa302-grand td.num { font-size: 1.1rem; font-weight: 800; }
.sa302-grand td.num { border-bottom: 3px double var(--ink); }
/* Phones: no room for five money columns, so each line is its label with its figures to the
   right (the empty columns are hidden); tax band lines show amount, rate and tax beneath */
@media (max-width: 700px) {
  .sa302 { padding: 4px 14px 16px; }
  .sa302-title { text-align: left; }
  .sa302-table, .sa302-table tbody { display: block; width: 100%; }
  .sa302-table colgroup { display: none; }
  .sa302-table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px;
    border-bottom: 1px solid #f0f2f6; }
  .sa302-table td, .sa302-table th { display: block; border-bottom: 0; }
  .sa302-table td:empty { display: none; }
  .sa302-table th, .sa302-table td.label { flex: 1 1 0; min-width: 0; padding-right: 0; }
  .sa302-table td.sign { flex: 0 0 auto; padding-top: 5px; }
  .sa302-table td.num, .sa302-table td.rate { flex: 0 0 auto; padding-left: 0; }
  .sa302-band td.label { flex-basis: 100%; padding: 6px 0 0 10px; }
  .sa302-band td.num:nth-last-child(3) { margin-left: 10px; margin-right: auto; }
  .sa302-band td.rate, .sa302-band td.num { padding-top: 0; }
}

/* Box entries on a page of their own (self-employment, property) */
.bd-link { margin-top: 6px; }
.bd-link a { font-size: .85rem; font-weight: 600; }
.bd-page { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; }
.bd-standalone > .bd-list { margin-top: 8px; }
.bd-page .form-actions { margin: 18px -24px -20px; padding: 16px 24px; background: #f8f9fc; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
@media (max-width: 700px) { .bd-page { padding: 16px; } .bd-page .form-actions { margin: 16px -16px -16px; padding: 14px 16px; } }
.bd-line-private { grid-template-columns: minmax(0, 1.3fr) 10rem 5.5rem minmax(0, 1fr) 4.5rem; }
.pct-input { display: flex; align-items: center; border: 1px solid #c9cfdc; border-radius: 6px; background: #fff; }
.pct-input input { border: 0; text-align: right; min-width: 0; }
.pct-input span { padding: 0 8px 0 2px; color: var(--muted); }
.bd-private-total { color: var(--muted); }
@media (max-width: 700px) { .bd-line-private { grid-template-columns: minmax(0, 1fr) 8.5rem; } }

/* Unsaved changes message */
.unsaved-dialog { border: 0; border-radius: 14px; padding: 24px 26px; max-width: 440px; width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(18, 24, 38, .3); }
.unsaved-dialog::backdrop { background: rgba(18, 24, 38, .45); }
.unsaved-dialog h2 { margin: 0 0 6px; font-size: 1.2rem; }
.unsaved-dialog p { margin: 0 0 18px; color: var(--muted); }
.unsaved-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.clash-dialog { max-width: 520px; }
.clash-advice { color: var(--ink) !important; background: var(--brand-soft); border-radius: 8px; padding: 10px 12px; }

/* Draft recovery bar */
.draft-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid var(--amber-line); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.draft-actions { display: flex; gap: 14px; align-items: center; }

/* Which version of the pages (e.g. SA103S or SA103F) */
.variant-choice { border: 0; padding: 0; margin: 0; }
.variant-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; }
.variant-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #c9cfdc; border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.variant-option:has(input:checked) { border-color: var(--amber-line); background: var(--brand-soft); }
.variant-option input { margin-top: 3px; }
.variant-option small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }

/* Review your return: red = must fix, amber = could save tax, blue = for information.
   Kept distinct from the progress lights (grey/amber/green dots) by using shaped badges. */
:root { --tip-error: #c62f2f; --tip-suggestion: #d98b06; --tip-info: #2f6fd1;
        --tip-error-bg: #fdecec; --tip-suggestion-bg: #fff4e0; --tip-info-bg: #e9f1fd; }
.tip-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  font-size: .8rem; font-weight: 800; color: #fff; flex: none; vertical-align: -4px; }
.tip-error { background: var(--tip-error); }
.tip-suggestion { background: var(--tip-suggestion); }
.tip-info { background: var(--tip-info); }
.review-counts { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 20px; }
.review-count { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.review-count:hover { border-color: var(--brand); }
.review-ok { margin-bottom: 20px; }
.review-group { margin-bottom: 28px; }
.review-group .section-title { display: flex; align-items: center; gap: 8px; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tip { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--line); border-left-width: 5px; border-radius: 10px; }
.tip-card-error { border-left-color: var(--tip-error); }
.tip-card-suggestion { border-left-color: var(--tip-suggestion); }
.tip-card-info { border-left-color: var(--tip-info); }
.tip-where { margin: 0; font-size: .78rem; color: var(--muted); font-weight: 600; }
.tip-title { margin: 2px 0 4px; font-size: 1rem; }
.tip-message { margin: 0; color: var(--ink); font-size: .92rem; }
.tip-action { flex: none; font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: 8px;
  border: 1.5px solid var(--brand); white-space: nowrap; }
.tip-action:hover { background: var(--brand); color: #fff; }
@media (max-width: 640px) {
  .tip { flex-direction: column; align-items: stretch; }
  .tip-action { text-align: center; white-space: normal; }
}
.nav-review { font-weight: 700; }
.nav-tips, .review-banner-tips { display: flex; gap: 4px; align-items: center; }
.nav-tip { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: .72rem; font-weight: 800;
  color: #fff; display: inline-grid; place-items: center; }
.review-back { margin-bottom: 14px; }
.review-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 22px;
  padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); text-decoration: none; }
.review-banner:hover { border-color: var(--brand); }
.review-banner-text { display: grid; }
.review-banner-text span { color: var(--muted); font-size: .9rem; }
.review-banner-tips { font-weight: 700; color: var(--brand); }
.info-notes { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.info-notes ul { margin: 8px 0 0; padding-left: 18px; }
.info-notes li { margin-bottom: 6px; }
#q-FIN19 textarea { min-height: 9rem; }
.review-ready { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: 12px; margin-bottom: 22px; border: 1px solid var(--line); background: var(--card); }
.review-ready.is-ready { border-color: #3ccf7a; background: var(--ok-bg); }
.review-ready p { margin: 2px 0 0; color: var(--muted); }
.account-actions { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.account-actions h3 { margin: 0 0 4px; font-size: 1rem; }
.account-actions p { margin: 0 0 10px; font-size: .9rem; }
.narrow-card { max-width: 680px; }
.plain-list { padding-left: 20px; }
.plain-list li { margin-bottom: 4px; }
.confirm-form { display: grid; gap: 8px; margin-top: 16px; max-width: 420px; }
.confirm-form input[type=text], .confirm-form input[type=password] { width: 100%; }
.inline-form { margin-top: 8px; }
.import-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px;
  padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--brand); background: var(--card);
  color: var(--ink); text-decoration: none; font-size: .95rem; }
.import-banner:hover { background: #eef3f8; }
.import-steps .button { margin-top: 4px; }
.import-cats { margin-top: 14px; }
.compact-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.compact-table th, .compact-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compact-table .num { text-align: right; white-space: nowrap; }
.upload-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.import-sub { font-size: 1rem; margin: 18px 0 6px; }
.import-problems { margin: 0; padding-left: 18px; font-size: .9rem; }
.import-problems li { margin-bottom: 4px; }
.import-confirm { margin-top: 18px; display: grid; gap: 8px; }
.import-confirm fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.import-banner > div:first-child { display: grid; gap: 2px; }
.import-banner > div:first-child span { color: var(--muted); font-size: .9rem; }
.import-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.import-hint { flex-basis: 100%; margin: 0; }
.import-fix { margin-top: 18px; padding-top: 4px; }
.fix-table input[type=text], .fix-table select { width: 100%; min-width: 0; font-size: .9rem; padding: 6px 8px; }
.fix-table td { border-bottom: 0; padding-bottom: 2px; }
.fix-table .fix-why td { border-bottom: 1px solid var(--line); padding-top: 0; padding-bottom: 8px; font-size: .85rem; }
.fix-table select.has-error { border-color: #c62f2f; }
.fix-table td:nth-child(2) { min-width: 140px; } .fix-table td:nth-child(3) { min-width: 190px; }
@media (max-width: 760px) {
  .fix-table thead { display: none; }
  .fix-table, .fix-table tbody, .fix-table tr, .fix-table td { display: block; width: 100%; }
  .fix-table .fix-row { border-top: 1px solid var(--line); padding-top: 8px; }
  .fix-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted); font-weight: 600; }
}
.compact-table th.num { white-space: normal; }
@media (max-width: 760px) { .compact-table th, .compact-table td { padding: 6px 4px; font-size: .82rem; } }
.review-ready-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.box-note { display: flex; gap: 8px; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--tip-info-bg); color: var(--ink); font-size: .88rem; line-height: 1.45; }
.box-note-icon { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 5px; background: var(--tip-info); color: #fff; font-weight: 800; font-size: .72rem; margin-top: 1px; }

/* Staff test accounts */
.test-banner { background: #fff4d6; border: 1px solid #e8c766; color: #5b4300; border-radius: 8px; padding: 8px 14px; margin: 0 0 16px; font-size: 0.9rem; }
.test-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.inline-form label { font-weight: 600; }
.inline-form input.input-short { width: 8em; flex: none; }
.test-table td { vertical-align: top; background: var(--card); }
.test-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }

/* More actions next to a tax return */
.return-menu { position: relative; flex: none; width: auto; margin: 0; }
.return-menu summary { display: inline-block; list-style: none; cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.9rem; background: var(--card); }
.return-menu summary::-webkit-details-marker { display: none; }
.return-menu-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 280px; white-space: nowrap; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: 6px; }
.return-menu-list a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: inherit; font-weight: 600; }
.return-menu-list a span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted, #5b6474); }
.return-menu-list a:hover { background: #f3f5f9; }
.return-menu-list a.danger { color: #a12a2a; }
.box-note-amber { background: var(--warn-bg); }
.box-note-amber .box-note-icon { background: var(--tip-suggestion); }
.box-note[hidden] { display: none; }
/* Long text (e.g. 'Any other information'): the box goes under the question, full width */
.q-stack { display: grid; grid-template-columns: 1fr; gap: 10px; }
.q-stack .q-input textarea { width: 100%; min-height: 220px; resize: vertical; font: inherit; line-height: 1.5; }
/* What each tax code means */
.taxcode-notes { display: grid; gap: 10px; margin: 14px 0 0; }
.taxcode { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 44px 12px 16px; }
.taxcode p { margin: 4px 0; }
.taxcode-head { display: flex; gap: 8px; align-items: center; }
.taxcode-chip { font-weight: 800; letter-spacing: .04em; background: #eef1f7; border-radius: 6px; padding: 2px 8px; }
.en-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Remove a row: an X in the top right corner */
.en-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.en-close:hover, .en-close:focus-visible { background: #fdecec; color: var(--err-ink); border-color: #f3c7c7; }
.en-foot:empty { display: none; }

/* Tax codes: one line to add a code */
.tc-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px) auto; gap: 10px 12px; align-items: end;
  border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; padding: 12px 14px; }
.tc-entry.has-error { border-color: var(--err-ink); background: #fff6f6; }
.tc-entry .field-error { grid-column: 1 / -1; margin: 0; }
.tc-code { text-transform: uppercase; }
@media (max-width: 700px) { .tc-entry { grid-template-columns: 1fr; } }
.tc-entry > .en-field { grid-column: auto; width: auto; margin: 0; }
.tc-entry > button { white-space: nowrap; }
.tc-code::placeholder { text-transform: none; }
.en-result { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.en-result strong { color: var(--ink); }
.en-result.is-loss strong { color: var(--err-ink); }

/* Capital gains: one form adds a disposal, the table lists them */
.dt-entry { border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; padding: 14px 16px; }
.dt-entry.has-error { border-color: var(--err-ink); background: #fff6f6; }
.dt-entry-title { font-weight: 700; margin: 0 0 10px; }
.dt-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.dt-fields .en-field { grid-column: span 1; }
.dt-fields .dt-type, .dt-fields .dt-asset { grid-column: span 2; }
.dt-fields .dt-claim, .dt-fields .dt-kind { grid-column: span 2; }
.dt-fields .dt-wide { grid-column: span 2; }
.dt-fields .dt-new-line { grid-column-start: 1; }
.dt-fields .dt-tick { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .88rem; }
.dt-fields [hidden] { display: none !important; }
/* Boxes side by side line up: each field takes three rows of the grid (question, box,
   hint), shared across the line, with the question set to the bottom of its row */
@supports (grid-template-rows: subgrid) {
  .dt-fields, .en-fields { row-gap: 0; }
  .dt-fields > *, .en-fields > * { grid-row: span 3; margin-bottom: 12px; }
  .dt-fields > .en-field, .en-fields > .en-field { grid-template-rows: subgrid; row-gap: 3px; }
  .dt-fields > .en-field > span:first-child,
  .en-fields > .en-field > span:first-child { align-self: end; }
  .dt-fields > .dt-tick { align-self: start; }
}
.dt-fields .helptext { font-weight: 400; }
.dt-actions { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.dt-table-wrap { margin-top: 16px; }
.dt-table { width: 100%; font-size: .9rem; }
.dt-table th, .dt-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.dt-table .num { text-align: right; white-space: nowrap; }
.dt-table .dt-loss { color: var(--err-ink); }
.dt-table tfoot td { font-weight: 600; background: #f8f9fc; }
.dt-row-actions { white-space: nowrap; text-align: right; }
.dt-group-head th { background: #f3f5f9; font-weight: 700; font-size: .88rem; text-transform: none; letter-spacing: 0; padding-top: 10px; }
.dt-group-head .muted { font-weight: 500; }
.dt-row-actions .dt-close { position: static; display: inline-block; vertical-align: middle; margin-left: 6px; }
@media (max-width: 800px) {
  .dt-fields { grid-template-columns: 1fr 1fr; }
  .dt-fields .dt-type, .dt-fields .dt-asset, .dt-fields .dt-claim, .dt-fields .dt-kind,
  .dt-fields .dt-wide { grid-column: 1 / -1; }
}
.dt-split { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; background: var(--card); }
.dt-split summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.dt-split-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin-top: 10px; }
@media (max-width: 800px) { .dt-split-fields { grid-template-columns: 1fr 1fr; } }
.dt-computations { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; }
.dt-section { border: 0; padding: 0; margin: 0 0 14px; }
.dt-section legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.dt-section + .dt-section { border-top: 1px solid var(--line); padding-top: 12px; }
.dt-items { grid-column: 1 / -1; }
.dt-items-table { width: 100%; margin: 6px 0 8px; }
.dt-items-table th { text-align: left; font-size: .8rem; font-weight: 600; padding: 0 8px 4px 0; }
.dt-items-table td { padding: 0 8px 6px 0; vertical-align: middle; }
.dt-items-table td:last-child { width: 36px; }
.dt-items-table .dt-item-remove { position: static; }
.dt-claims { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dt-claims-summary { font-size: .9rem; color: var(--muted); }
.dt-dialog { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; max-width: 640px; width: calc(100% - 32px); box-shadow: 0 20px 50px rgba(16,24,40,.25); }
.dt-dialog::backdrop { background: rgba(16, 24, 40, .45); }
.dt-dialog h3 { margin: 0 0 6px; }
.dt-claims-table { width: 100%; margin: 10px 0; }
.dt-claims-table th { text-align: left; font-weight: 600; font-size: .88rem; padding: 6px 12px 6px 0; vertical-align: top; }
.dt-claims-table td { width: 180px; padding: 6px 0; vertical-align: top; }
.dt-claims-table tfoot th, .dt-claims-table tfoot td { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 700; }
.dt-claims-table tr[hidden] { display: none; }
.dt-pending { margin-top: 16px; border: 1px solid #f0c9a0; background: #fff8ef; border-radius: 10px; padding: 12px 16px; }
.dt-pending h3 { margin: 0 0 4px; font-size: .95rem; }
.dt-pending ul { list-style: none; margin: 8px 0 0; padding: 0; }
.dt-pending li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f0dcc4; }
.dt-pending .field-error { margin: 4px 0 0; }
.file-pick input { font-size: .85rem; max-width: 220px; }
.dt-claims-table th, .dt-claims-table th small { text-transform: none; letter-spacing: normal; }
.dt-claims-table th small { font-weight: 400; }
/* Private use locked at 0 while the box it feeds has the person's own figure */
.pct-input.is-locked { opacity: .55; cursor: not-allowed; }
.pct-input.is-locked input { background: var(--bg); cursor: not-allowed; color: var(--muted); }
.private-locked-note { margin: 10px 0; }
.private-locked-note.is-flash { animation: note-flash .9s ease-out; }
@keyframes note-flash { 0% { box-shadow: 0 0 0 3px var(--tip-suggestion); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .private-locked-note.is-flash { animation: none; outline: 3px solid var(--tip-suggestion); } }

/* Guided walkthroughs (SA109): one question per screen */
.wt-progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; max-width: 520px; margin: 6px 0 4px; }
.wt-progress span { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.wt-step { margin: 0 0 18px; }
.wt-form { max-width: 720px; }
.wt-question { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.wt-question legend { padding: 0; }
.wt-title { font-size: 1.5rem; line-height: 1.3; margin-bottom: 8px; }
.wt-help { color: var(--muted); max-width: 66ch; }
.wt-help p { margin: 0 0 8px; }
.wt-question.has-error { border-left: 4px solid var(--tip-error); padding-left: 14px; }
.wt-options { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; max-width: 560px; }
.wt-option { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #c9cfdc; border-radius: 8px; padding: 12px 14px; background: var(--card); cursor: pointer; }
.wt-option input { margin-top: 3px; }
.wt-option:has(input:checked) { border-color: var(--amber-line); background: var(--brand-soft); }
.wt-input { display: block; margin: 14px 0 6px; max-width: 260px; }
.wt-number { max-width: 120px; }
.wt-text { width: 100%; max-width: 620px; margin: 14px 0 6px; }
.wt-countries { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; max-width: 420px; }
.wt-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 14px 0; max-width: 66ch; }
.wt-panel p { margin: 0 0 8px; }
.wt-panel p:last-child { margin-bottom: 0; }
.wt-panel details { margin-bottom: 8px; }
.wt-panel summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.wt-compare-table { max-width: 420px; margin: 6px 0 10px; }
.wt-compare-table th { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); font-weight: 500; text-align: left; }
.wt-compare-table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-start { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; max-width: 720px; }
.wt-steps { padding-left: 20px; }
.wt-steps li { margin-bottom: 6px; }
.wt-continue { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wt-group { margin: 0 0 18px; }
.wt-answers { margin: 0; border-top: 1px solid var(--line); }
.wt-answer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 6px 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wt-answer dt { font-weight: 500; }
.wt-answer dd { margin: 0; }
.wt-change { white-space: nowrap; }
.wt-boxes td { vertical-align: top; }
.wt-result { background: var(--warn-bg); border-left: 4px solid var(--warn-ink); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 0 0 22px; max-width: 720px; }
.wt-result.is-resident { background: var(--ok-bg); border-left-color: var(--ok-ink); }
.wt-result ul { padding-left: 20px; }
@media (max-width: 640px) {
  .wt-answer { grid-template-columns: 1fr; }
  .wt-title { font-size: 1.3rem; }
}
.title-md { font-size: 1.25rem; font-weight: 700; margin: 26px 0 10px; }

/* Entries with a tax column (SA102M boxes 8 and 10, with 9 and 11 as their tax totals) */
.bd-line.bd-with-tax { grid-template-columns: minmax(0, 1.2fr) 9rem 9rem minmax(0, 1fr) 4.5rem; }
.bd-head.bd-with-tax span:nth-child(2), .bd-head.bd-with-tax span:nth-child(3) { text-align: right; padding-right: 10px; }
@media (max-width: 700px) { .bd-line.bd-with-tax { grid-template-columns: minmax(0, 1fr) 8.5rem; } }
/* The tax box sits straight under its amount box as one area */
.q:has(+ .q-pair-tax) { border-bottom: 0; padding-bottom: 6px; }
.q.q-pair-tax { padding-top: 6px; }

/* "Only for part of the year?" and the number of days (e.g. SA102M box 32) */
.part-year .tick { font-weight: 600; }
.part-year-days { margin-top: 12px; padding: 14px 16px; border-left: 3px solid var(--line); background: #fbfcfe; }
.part-year-days .q-label { display: block; margin-bottom: 4px; }
.part-year-input { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.part-year-input input { width: 7ch; padding: 8px 10px; text-align: right; font: inherit; }

/* Attachments sent with the return (Finalising your tax return) */
.att-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; }
.att-steps { margin: 0 0 16px; padding-left: 1.3rem; display: grid; gap: 6px; }
.att-usage { margin-bottom: 16px; }
.att-bar { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.att-bar span { display: block; height: 100%; background: var(--brand); }
.att-usage .helptext { margin: 6px 0 0; }
.att-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 16px; }
.att-field { display: grid; gap: 6px; flex: 1 1 240px; min-width: 0; }
.att-field input[type=text] { width: 100%; }
.att-list { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.att-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.att-row:last-child { border-bottom: 0; }
.att-name { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.att-name a { font-weight: 600; }
.att-meta { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.att-row .link-button { color: var(--danger, #b42318); }
.att-actions { margin-top: 20px; }

.dt-tick-hint { display: block; font-weight: 400; margin-top: 2px; }
/* Disposal form: the gain worked out as the boxes are filled in */
.dt-result { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 8px; background: var(--card); }
.dt-result-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: .95rem; }
.dt-result-line + .dt-result-line { margin-top: 4px; }
.dt-result-line strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.dt-result-line[hidden] { display: none; }
.dt-result.is-loss { border-left-color: var(--err-ink); }
.dt-result.is-loss [data-dt-result-amount] { color: var(--err-ink); }
.dt-result .helptext { margin: 6px 0 0; }
.dt-fig-max { display: block; margin-bottom: 2px; font-weight: 600; color: var(--brand); }
/* Settings: what PDF copies show */
.pdf-header-form fieldset { border: 0; padding: 0; margin: 10px 0 12px; display: grid; gap: 8px; }
.pdf-header-form .radio { display: flex; gap: 8px; align-items: center; font-weight: 500; }
/* Reports page */
.report-list { display: grid; gap: 12px; margin-top: 12px; }
.report-card { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.report-card.is-unavailable { opacity: .7; }
.report-title { font-size: 1rem; margin: 0 0 4px; }
.report-card p { margin: 0; }
.report-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-reports { font-weight: 600; }
@media (max-width: 640px) { .report-card { flex-direction: column; align-items: stretch; } .report-actions { justify-content: flex-start; } }
/* Approval and the lock */
.approval-card { margin: 16px 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 10px; background: var(--card); }
.approval-card.is-approved { border-left-color: var(--ok-ink); background: #f6fbf7; }
.approval-card.is-pending { border-left-color: var(--amber-line); }
.approval-card .section-title { margin-top: 0; }
.approval-card p { margin: 6px 0; }
.approval-card code { font-size: .85rem; background: #f3f5f9; padding: 1px 5px; border-radius: 4px; }
.approval-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.approval-record { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.approval-record summary { cursor: pointer; font-weight: 600; }
.approval-form { display: grid; gap: 10px; margin-top: 10px; max-width: 640px; }
.approval-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.approval-methods { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.approval-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.approval-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; }
@media (max-width: 640px) { .approval-fields { grid-template-columns: 1fr; } }
.lock-banner { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; padding: 8px 12px; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; font-size: .92rem; }
.lock-dialog { border: 0; border-radius: 12px; padding: 22px 24px; max-width: 460px; box-shadow: 0 20px 50px rgba(16,24,40,.25); }
.lock-dialog::backdrop { background: rgba(18,24,38,.45); }
.lock-dialog h2 { margin: 0 0 8px; font-size: 1.15rem; }
.lock-dialog p { margin: 6px 0; }
.lock-dialog .en-field { margin-top: 12px; }
/* Practice dashboard */
.pd-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 14px; }
.pd-field { display: grid; gap: 3px; font-size: .82rem; font-weight: 600; }
.pd-field select, .pd-field input { min-width: 150px; padding: 8px 10px; font: inherit; font-size: .92rem; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.pd-search input { min-width: 220px; }
.pd-stages { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pd-stage { display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); text-decoration: none; color: var(--ink); font-size: .88rem; }
.pd-stage strong { font-size: 1rem; }
.pd-stage.is-current { border-color: var(--brand); background: var(--brand); color: #fff; }
.pd-deadline { margin: 4px 0 12px; }
.pd-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: #eef1f6; color: var(--muted); white-space: nowrap; }
.pd-tag-in_progress { background: #e8eefc; color: #26345a; }
.pd-tag-waiting { background: var(--warn-bg); color: var(--warn-ink); }
.pd-tag-sent_back { background: var(--err-bg); color: var(--err-ink); }
.pd-tag-approved { background: var(--ok-bg); color: var(--ok-ink); }
.pd-tag-filed { background: #1d5c2e; color: #fff; }
.pd-errors { color: var(--err-ink); font-weight: 700; }
.pd-assign select { font-size: .85rem; padding: 4px 6px; max-width: 180px; }
/* A client's own login (taxpayer page) */
.client-invite { display: grid; gap: 10px; max-width: 520px; margin-top: 8px; }
.client-levels { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.client-login .inline-form { margin-right: 8px; }
/* Staff: HMRC XML of a test return */
.xml-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; align-items: end;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 12px 0 18px; }
.xml-summary > div { display: grid; gap: 2px; font-size: .9rem; }
.xml-summary code { word-break: break-all; }
.xml-actions { display: flex !important; gap: 8px; flex-wrap: wrap; }
.xml-view { background: #0f1422; color: #d9e1f2; border-radius: 10px; padding: 14px 16px; overflow: auto; max-height: 70vh;
  font-size: .78rem; line-height: 1.45; white-space: pre; }
.xml-loc { font-size: .72rem; word-break: break-all; }
/* A practice's own look (white label) */
.brand-plate { display: inline-flex; align-items: center; background: #fff; border-radius: 10px; padding: 8px 12px; max-width: 100%; }
.brand-plate img { display: block; max-height: 48px; max-width: 220px; width: auto; height: auto; }
.powered-by { margin: 10px 12px 0; font-size: .7rem; color: var(--side-muted); }
.brand-form { display: grid; gap: 14px; max-width: 640px; }
.brand-colours { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.brand-colour { display: grid; gap: 4px; font-weight: 600; font-size: .88rem; }
.brand-colour-row { display: flex; gap: 8px; align-items: center; }
.brand-colour-row input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.brand-colour-row input[type=text] { width: 110px; font-family: ui-monospace, monospace; }
.brand-preview { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-height: 120px; }
.brand-preview-side { width: 150px; padding: 12px; display: grid; gap: 6px; align-content: start; font-size: .8rem; font-weight: 600; }
.brand-preview-side span { padding: 5px 8px; border-radius: 6px; }
.brand-preview-main { flex: 1; padding: 14px; background: var(--bg); display: grid; gap: 8px; align-content: start; font-size: .85rem; }
.brand-preview-main .pv-button { justify-self: start; padding: 6px 12px; border-radius: 8px; color: #fff; font-weight: 700; }
.brand-logo-now { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.brand-logo-now .brand-plate { border: 1px solid var(--line); }
@media (max-width: 640px) { .brand-colours { grid-template-columns: 1fr; } }
/* A paid feature that isn't available */
.locked-card { max-width: 640px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px 26px; }
.locked-icon { font-size: 1.6rem; }
.locked-card .title-lg { margin: 6px 0 10px; font-size: 1.5rem; }
.locked-list { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 3px; }
.nav-lock { font-size: .7rem; opacity: .8; }
.free-overlay { position: relative; }
.free-overlay::after { content: "FREE"; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 7rem; font-weight: 800; letter-spacing: .2em; color: rgba(38, 52, 90, .08); transform: rotate(-18deg); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.plan-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--card); display: grid; gap: 6px; align-content: start; }
.plan-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.plan-price { font-size: 1.25rem; font-weight: 800; }
.usage-bar { height: 8px; border-radius: 999px; background: #e8ecf3; overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: var(--brand); }
.billing-banner { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); }
.billing-banner.is-serious { background: var(--err-bg); color: var(--err-ink); }
.referral-link { display: flex; gap: 8px; margin: 10px 0; max-width: 560px; }
.referral-link input { flex: 1; font-family: ui-monospace, monospace; font-size: .85rem; }
/* Settings → Features (switchboard) */
.fs-summary { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin: 8px 0 14px; }
.fs-list { display: grid; gap: 10px; }
.fs-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.fs-row.fs-available, .fs-row.fs-not_on_plan { background: #fbfcfe; }
.fs-name { font-size: 1rem; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fs-main p { margin: 0; }
.fs-price { font-weight: 700; margin-top: 4px !important; }
.fs-action { display: flex; gap: 8px; align-items: center; flex: none; }
.fs-action form { margin: 0; }
.fs-switch { width: 46px; height: 26px; border-radius: 999px; padding: 3px; border: 0; background: #c9cfdb; position: relative; cursor: pointer; }
.fs-switch .fs-knob { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.fs-switch.is-on { background: var(--brand); }
.fs-switch.is-on .fs-knob { transform: translateX(20px); }
.fs-switch:hover { background: #b8bfcd; } .fs-switch.is-on:hover { background: var(--brand-dark); }
.fs-state { font-size: .85rem; font-weight: 600; color: var(--muted); min-width: 64px; }
@media (max-width: 640px) { .fs-row { flex-direction: column; align-items: stretch; } }
.account-actions-inline { display: flex; gap: 10px; flex-wrap: wrap; }
/* Engagement letters */
.letter { max-width: 760px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 24px 28px; line-height: 1.6; }
.letter h2 { font-size: 1.02rem; margin: 18px 0 6px; }
.letter p { margin: 0 0 10px; }
.letter-bullet { padding-left: 14px; margin-bottom: 4px !important; }
.letter-sign { max-width: 760px; margin-top: 18px; display: grid; gap: 12px; }
.engagement-banner { margin-bottom: 14px; }
.aml-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; margin-top: 10px; }
.aml-form textarea { grid-column: 1 / -1; }

/* Didit result */
.aml-result { display: grid; gap: .25rem; margin: .5rem 0; }
.aml-result div { display: grid; grid-template-columns: 14rem 1fr; gap: .5rem; }
.aml-result dt { color: var(--muted, #555); }
.aml-result dd { margin: 0; }
.aml-evidence { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aml-evidence img { height: 90px; width: auto; border: 1px solid #ccc; border-radius: 4px; }
@media (max-width: 600px) { .aml-result div { grid-template-columns: 1fr; } }
.id-docs fieldset { border: 0; padding: 0; margin: .75rem 0; }
.id-address { font-style: normal; padding: .5rem .75rem; border-left: 3px solid var(--accent, #2b6cb0); margin: .5rem 0; }
.aml-docs { list-style: none; padding: 0; display: grid; gap: .5rem; }
.aml-docs a { display: inline-flex; gap: .5rem; align-items: center; }
.aml-docs img { height: 70px; width: auto; border: 1px solid #ccc; border-radius: 4px; }

/* Signed out after inactivity: the countdown */
.idle-dialog { max-width: 28rem; width: calc(100% - 32px); border: 1px solid var(--line, #dde2ec); border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 12px 40px rgba(20, 27, 45, .25); }
.idle-dialog::backdrop { background: rgba(20, 27, 45, .55); }
.idle-dialog #idle-countdown { font-variant-numeric: tabular-nums; font-size: 1.15em; }
.idle-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.idle-actions form { margin: 0; }
/* Client information requests */
.ir-items { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem; }
.ir-item { background: var(--surface, #fff); border: 1px solid var(--line, #dde2ec); border-radius: 10px; padding: 1rem 1.1rem; display: grid; gap: .5rem; min-width: 0; }
.ir-item.has-error { border-color: var(--error, #b4322a); }
.ir-review-queried { border-left: 4px solid var(--amber, #c98a00); }
.ir-item-head { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.ir-item-head .tag { margin-left: .4rem; }
.ir-figures { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ir-figures th, .ir-figures td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line, #dde2ec); }
.ir-figures .num { text-align: right; }
.ir-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1rem; }
.ir-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1rem; }
.ir-answer-choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.ir-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ir-actions form { margin: 0; }
.ir-query { width: 100%; }
.ir-files { margin: 0; padding-left: 1.1rem; }
.ir-progress { margin: .25rem 0; }
.ir-bar { width: 100%; max-width: 28rem; height: .6rem; accent-color: var(--accent, #f5b83d); }
.ir-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ir-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem 1rem; margin: .5rem 0 1rem; }
.ir-add fieldset { border: 0; padding: 0; margin: 0; }
.ir-send, .ir-submit { display: grid; gap: 1rem; margin-top: 1rem; justify-items: start; }
.ir-new-row { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: end; margin-bottom: .5rem; }
.ir-new-name { min-width: 14rem; }
.ir-message { white-space: normal; }
.ir-banner .ir-check form { display: inline; }
.ir-status-none, .ir-status-draft { opacity: .8; }
.ir-status-overdue { background: var(--error-bg, #fde8e6); color: var(--error, #b4322a); }
.ir-status-returned { background: var(--ok-bg, #e5f4ec); color: var(--ok, #2f7a4f); }
a.pd-tag { text-decoration: none; }
.client-id { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .05em; }

/* Help guides ------------------------------------------------------------- */
.help-link { font-weight: 600; margin-right: 16px; cursor: pointer; }
.help-menu { position: relative; display: inline-block; }
.help-menu > summary { list-style: none; color: var(--brand); text-decoration: underline; }
.help-menu > summary::-webkit-details-marker { display: none; }
.help-menu-list { position: absolute; right: 16px; top: 100%; z-index: 20; margin: 6px 0 0; padding: 8px 0;
  list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(18, 24, 38, .12); min-width: 260px; }
.help-menu-list a { display: block; padding: 6px 14px; }
.help-box-link { margin: 6px 0 0; font-size: .9rem; }
.help-search { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.help-search input { flex: 1 1 240px; min-width: 0; }
.help-years { color: var(--muted); font-size: .95rem; }
.help-group { margin-bottom: 16px; }
.help-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.help-guide { max-width: 760px; }
.help-back { margin: 0 0 8px; }
.help-body h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.help-body p, .help-body li { max-width: 68ch; }
.help-body ul { padding-left: 22px; }
.help-body li + li { margin-top: 5px; }
.help-body code { font: 600 .9em ui-monospace, Menlo, monospace; background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.help-shot { margin: 12px 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.help-shot img { display: block; width: 100%; height: auto; }
/* Numbered steps: the numbers match the orange markers on the screenshots */
.help-steps { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px;
  counter-reset: step calc(var(--start, 1) - 1); }
.help-steps > li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; max-width: none; }
.help-steps > li + li { margin-top: 0; }
.help-steps > li::before { content: counter(step); width: 28px; height: 28px; border-radius: 50%;
  background: #d9480f; color: #fff; font-weight: 700; font-size: .875rem; display: grid; place-items: center; }
.help-steps > li > div > :first-child { margin-top: 0; }
.help-body em { color: var(--muted); }