:root { --ink: #1c2430; --muted: #66717f; --line: #e2e6ec; --bg: #f5f7fa; --brand: #1a66e0; --accent: #1a66e0; /* links/highlights; overridden per-org by the theme config */ --arrears: #c0392b; --credit: #1e874b; --amber: #8f6700; --amber-bg: #fff6e0; --red-bg: #fdecea; --green-bg: #e9f7ef; --surface: #fff; --surface-2: #fafbfc; /* Tint fills for rows/pills/badges — flip in dark mode so text stays legible. */ --tint-blue: #eef4ff; --tint-grey: #eef1f5; --tint-indigo: #e0e7ff; --tint-indigo-ink: #4338ca; /* Text ON the brand colour: white passes on the light brand blue (5.2:1) but is 2.7:1 on the dark-mode blue, where the page ground is used. */ --on-brand: #fff; --brand-text: var(--brand); --accent-text: var(--accent); /* layout.html overrides with contrast-derived values */ } /* Dark theme — toggled via (see layout head script). */ [data-theme="dark"] { --ink: #e6ebf1; --muted: #9aa6b2; --line: #2b333d; --bg: #12171d; --brand: #5b9dff; --accent: #5b9dff; --on-brand: #12171d; --brand-text: var(--brand); --accent-text: var(--accent); --arrears: #f07a6b; --credit: #4ba57c; --amber: #d9a542; --amber-bg: #3a3117; --red-bg: #3a1f1d; --green-bg: #16321f; --surface: #1b222a; --surface-2: #222b34; --tint-blue: #1e2c40; --tint-grey: #262e38; --tint-indigo: #273050; --tint-indigo-ink: #aab4f7; } /* Font scaling for the A− / A+ controls (persisted in localStorage). */ html { font-size: calc(100% * var(--font-scale, 1)); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } /* Top bar */ .topbar { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--line); padding: .3rem 1.5rem; min-height: 56px; border-top: 3px solid var(--brand); /* brand accent stripe — always visible */ } .brand { font-weight: 700; display: flex; align-items: center; color: var(--brand-text); } .brand-logo { height: 32px; width: auto; max-width: 200px; display: block; } .brand-logo-lg { height: 56px; max-width: 240px; } .login-brand { display: flex; align-items: center; gap: .5rem; } .mainnav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; } .mainnav a { color: var(--ink); padding: .35rem .1rem; border-bottom: 2px solid transparent; } .mainnav a.active { border-color: var(--accent); color: var(--accent-text); } .account { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .9rem; } .linkbtn { background: none; border: none; color: var(--accent-text); cursor: pointer; font-size: .9rem; } .content { max-width: 1000px; margin: 1.5rem auto; padding: 0 1.5rem; } h1 { font-size: 1.5rem; margin: 0 0 1rem; } h2 { font-size: 1.15rem; } .sub, .muted { color: var(--muted); } .fineprint { color: var(--muted); font-size: .85rem; margin-top: .5rem; } /* Cards */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; } .card-label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } .card-figure { font-size: 2rem; font-weight: 700; margin: .25rem 0; } .card-figure.small { font-size: 1.4rem; } .card-status { font-size: .9rem; } .card-foot { font-size: .8rem; color: var(--muted); margin-top: .5rem; } .balance-card.bal-arrears .card-figure { color: var(--arrears); } .balance-card.bal-credit .card-figure { color: var(--credit); } /* Panels */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; margin: 1rem 0; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .view-switch { display: flex; gap: .25rem; } .view-switch .btn.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } a.appt { text-decoration: none; display: block; } a.appt:hover { text-decoration: none; opacity: .82; } .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; overflow-x: auto; } .week-col { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px; min-height: 150px; min-width: 90px; } .week-col.today { background: var(--tint-blue); } .week-col-head { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; } .week-empty { text-align: center; } .agenda-row { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; margin: .4rem 0; text-decoration: none; color: var(--ink); background: var(--surface); } .agenda-row:hover { border-color: var(--accent); text-decoration: none; } .agenda-time { font-weight: 700; min-width: 3.4rem; } .agenda-body { flex: 1; } .access-note { background: var(--amber-bg); color: var(--amber); border-radius: 6px; padding: .4rem .6rem; margin: .4rem 0; font-size: .9rem; } .secret-box { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .12em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; word-break: break-all; } code.wrap { word-break: break-all; } .page-actions { display: flex; gap: .5rem; } .actions { display: flex; gap: .5rem; margin-top: 1rem; } /* Buttons */ .btn { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .8rem; cursor: pointer; color: var(--ink); font-size: .9rem; } .btn:hover { border-color: var(--accent); text-decoration: none; } .btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .btn-sm { padding: .25rem .55rem; font-size: .82rem; } /* Tables */ table.ledger { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: .5rem 0; } .ledger th, .ledger td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); font-size: .92rem; } .ledger th { background: var(--surface-2); color: var(--muted); font-weight: 600; } .ledger td.num, .ledger th.num { text-align: right; font-variant-numeric: tabular-nums; } .ledger tfoot td { background: var(--surface-2); } .empty { text-align: center; color: var(--muted); padding: 1.5rem; } /* Row colour coding */ .row-payment { background: var(--green-bg); } .row-free { background: var(--tint-blue); } .row-adjust { background: var(--amber-bg); } .row-opening { background: var(--surface-2); font-style: italic; } .row-superseded { color: var(--muted); } .bal-arrears { color: var(--arrears); font-weight: 600; } .bal-credit { color: var(--credit); font-weight: 600; } .status-line { font-weight: 600; } .status-line.bal-arrears { color: var(--arrears); } .status-line.bal-credit { color: var(--credit); } /* Pills & badges */ .pill { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; background: var(--tint-grey); color: var(--muted); } .pill-free { background: var(--tint-blue); color: var(--brand-text); } .pill-current { background: var(--green-bg); color: var(--credit); } .pill-routine { background: var(--tint-grey); } .pill-urgent { background: var(--amber-bg); color: var(--amber); } .pill-emergency { background: var(--red-bg); color: var(--arrears); } .badge { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .72rem; font-weight: 600; background: var(--tint-grey); color: var(--ink); } .badge-reported { background: var(--tint-grey); } .badge-acknowledged { background: var(--tint-blue); color: var(--brand-text); } .badge-scheduled { background: var(--tint-indigo); color: var(--tint-indigo-ink); } .badge-in-progress { background: var(--amber-bg); color: var(--amber); } .badge-completed { background: var(--green-bg); color: var(--credit); } .badge-closed { background: var(--tint-grey); color: var(--muted); } .badge-overdue { background: var(--amber-bg); color: var(--amber); } .badge-escalated { background: var(--red-bg); color: var(--arrears); } /* Complaint stage badges */ .badge-stage-received { background: var(--tint-grey); color: var(--muted); } .badge-stage-acknowledged { background: var(--tint-blue); color: var(--brand-text); } .badge-stage-stage1 { background: var(--tint-indigo); color: var(--tint-indigo-ink); } .badge-stage-stage2 { background: var(--amber-bg); color: var(--amber); } .badge-stage-ombudsman { background: var(--red-bg); color: var(--arrears); } .badge-stage-closed { background: var(--tint-grey); color: var(--muted); } .badge-exempt { background: var(--red-bg); color: var(--arrears); margin-left: .4rem; } .badge-hold { background: var(--tint-blue); border: 1px solid var(--line); margin-left: .4rem; } /* Awaab's Law hazard badges */ .badge-emergency { background: var(--arrears); color: #fff; } .badge-hazard-received { background: var(--amber-bg); color: var(--amber); } .badge-hazard-investigated { background: var(--tint-blue); color: var(--brand-text); } .badge-hazard-summary_sent { background: var(--tint-indigo); color: var(--tint-indigo-ink); } .badge-hazard-works_started { background: var(--amber-bg); color: var(--amber); } .badge-hazard-completed { background: var(--green-bg); color: var(--credit); } .badge-hazard-closed { background: var(--tint-grey); color: var(--muted); } /* Complaint stage timer */ .timer { margin: 0 0 1rem; } .timer-bar { height: 8px; border-radius: 999px; background: var(--tint-grey); overflow: hidden; } .timer-bar span { display: block; height: 100%; background: var(--brand); } .timer-label { font-size: .82rem; color: var(--muted); margin-top: .3rem; } .timer-overdue { color: var(--arrears); font-weight: 600; } .timer-overdue .timer-bar span, .timer.timer-overdue .timer-bar span { background: var(--arrears); } .note-internal { background: var(--red-bg); border-color: var(--arrears); } .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .checkbox.inline { display: inline-flex; align-items: center; gap: .3rem; } a.widget { text-decoration: none; color: inherit; display: block; } a.widget:hover { border-color: var(--accent); } .widget-alert .card-figure { color: var(--arrears); } .year-head { margin: 1rem 0 .35rem; padding-bottom: .2rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .95rem; } .colour-field { display: inline-flex; gap: .4rem; align-items: center; } .colour-field input[type=color] { width: 42px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; } .colour-field input[type=text] { width: 90px; } .inline-edit { display: inline-block; } .inline-edit > summary { cursor: pointer; display: inline; } .inline-edit[open] > summary { margin-bottom: .4rem; } .inline-edit form { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: .6rem; margin: .3rem 0; max-width: 460px; } .nowrap { white-space: nowrap; } .rag-ok { background: var(--green-bg); color: var(--credit); } .rag-due-soon { background: var(--amber-bg); color: var(--amber); } .rag-overdue { background: var(--red-bg); color: var(--arrears); } /* TSM report metrics */ .metric { padding: .55rem 0; border-top: 1px solid var(--line); } .metric-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } .metric-value { font-weight: 700; white-space: nowrap; } .metric-note { color: var(--muted); font-size: .82rem; margin-top: .2rem; } .rag-text-ok { color: var(--credit); } .rag-text-due-soon { color: var(--amber); } .rag-text-overdue { color: var(--arrears); } .rag-fill-ok { background: var(--credit); display: block; height: 100%; } .rag-fill-due-soon { background: var(--amber); display: block; height: 100%; } .rag-fill-overdue { background: var(--arrears); display: block; height: 100%; } /* Staff role badges */ .badge-role-admin { background: var(--tint-indigo); color: var(--tint-indigo-ink); } .badge-role-manager { background: var(--tint-blue); color: var(--brand-text); } .badge-role-office { background: var(--tint-blue); color: var(--brand-text); } .badge-role-engineer { background: var(--tint-grey); color: var(--muted); } .badge-role-contractor { background: var(--amber-bg); color: var(--amber); } .inline-lbl { color: var(--muted); font-size: .85rem; } /* Nav unread badge */ .nav-badge { display: inline-block; min-width: 1.1rem; text-align: center; padding: 0 .3rem; border-radius: 999px; background: var(--arrears); color: #fff; font-size: .7rem; font-weight: 700; } .message-body { white-space: pre-wrap; margin-top: .5rem; } .row-unread td { font-weight: 600; } /* Changelog: tidy bullet list per version */ .changelog-list { margin: .25rem 0; padding-left: 1.2rem; } .changelog-list li { margin: .4rem 0; line-height: 1.5; } /* Message inbox tabs */ .tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; } .tab { padding: .4rem .9rem; color: var(--muted); border-bottom: 2px solid transparent; } .tab.active { color: var(--accent-text); border-color: var(--accent); } /* Collapsible panels (admin tenant page) */ .collapsible .panel > h2.collapse-toggle { cursor: pointer; user-select: none; } .collapsible .panel > h2.collapse-toggle::before { content: "\25be\00a0"; color: var(--muted); font-size: .8em; } .collapsible .panel.collapsed > h2.collapse-toggle::before { content: "\25b8\00a0"; } .collapsible .panel.collapsed > *:not(h2) { display: none; } .collapsible .panel.collapsed { padding-bottom: .6rem; } /* Certificate alerts */ .cert-alert { padding: .6rem .8rem; border-radius: 8px; margin: .4rem 0; } .cert-alert em { display: block; color: var(--muted); font-size: .82rem; } .cert-soon { background: var(--amber-bg); } .cert-expired { background: var(--red-bg); color: var(--arrears); } /* Forms */ .form label, .filters label { display: block; margin: .5rem 0; font-size: .9rem; } .form input, .form select, .form textarea, .filters input { display: block; width: 100%; max-width: 480px; padding: .45rem .55rem; margin-top: .2rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; } .form .row { display: flex; gap: 1rem; flex-wrap: wrap; } .form-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; } .form-inline input, .form-inline select, .form-inline textarea { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; } .filters { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin: .5rem 0 1rem; } .checkbox { display: flex; align-items: center; gap: .4rem; } .checkbox input { width: auto; } /* Login */ .login-wrap { min-height: 90vh; display: flex; align-items: center; justify-content: center; } .login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2rem; width: 360px; } .login-card h1 { text-align: center; } .login-card label { display: block; margin: .75rem 0; } .login-card input[type=email], .login-card input[type=password] { width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; margin-top: .25rem; } .login-card .btn-primary { width: 100%; margin-top: 1rem; } .notice { background: var(--tint-blue); border: 1px solid var(--line); padding: .6rem .8rem; border-radius: 8px; margin: .5rem 0; } .error { background: var(--red-bg); border: 1px solid #f3c2bd; color: var(--arrears); padding: .6rem .8rem; border-radius: 8px; margin: .5rem 0; } /* Perception survey */ .survey-q { border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem 1rem; margin: 0 0 1rem; } .survey-q legend { font-weight: 600; padding: 0 .4rem; line-height: 1.35; } .survey-code { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-right: .35rem; } .survey-scale { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin-top: .4rem; } .survey-opt { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; font-size: .9rem; } .survey-opt input { width: auto; margin: 0; } .survey-opt:has(input:checked) { background: var(--tint-blue); border-color: var(--accent, #4a7); } .survey-opt.survey-na { color: var(--muted); } .form-actions { display: flex; gap: .5rem; margin-top: .5rem; } /* Perception results on the report */ .tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; } .tp-card { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; } .tp-card .tp-pct { font-size: 1.5rem; font-weight: 700; } .tp-card .tp-label { font-size: .85rem; color: var(--muted); } .tp-card .tp-code { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); } /* Timeline */ .timeline { list-style: none; padding: 0; } .timeline li { display: flex; justify-content: space-between; padding: .5rem .75rem; border-left: 3px solid var(--line); margin-left: .5rem; } .timeline li.done { border-color: var(--credit); } .tl-date { color: var(--muted); font-size: .85rem; } .note { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; } .note-head { font-size: .8rem; color: var(--muted); margin-bottom: .2rem; } .note-tenant { background: var(--surface-2); } .note-system { background: var(--surface-2); } .repair-admin { border-top: 1px solid var(--line); padding: .6rem 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; } .kv dt { color: var(--muted); } .statement-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .statement-meta div span { display: inline-block; width: 80px; color: var(--muted); } /* Modal */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; } .modal.hidden { display: none; } .modal-box { background: var(--surface); border-radius: 12px; padding: 1.5rem; width: 340px; text-align: center; } /* Calendar */ .cal-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; } @media (max-width: 800px) { .cal-layout { grid-template-columns: 1fr; } } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .cal-dow { background: var(--surface-2); padding: .35rem; text-align: center; font-size: .78rem; color: var(--muted); font-weight: 600; } .cal-cell { background: var(--surface); min-height: 84px; padding: .25rem; font-size: .8rem; } .cal-cell.out { background: var(--surface-2); color: var(--muted); } .cal-cell.today { background: var(--tint-blue); } .cal-day { font-weight: 600; font-size: .78rem; color: var(--muted); } .appt { margin-top: 2px; padding: 1px 4px; border-radius: 4px; background: var(--tint-indigo); color: #3730a3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .appt-time { font-weight: 600; } .appt-confirmed { background: var(--green-bg); color: var(--credit); } .appt-requested { background: var(--amber-bg); color: var(--amber); } .appt-cancelled { background: #eee; color: #999; text-decoration: line-through; } .appt-completed { background: var(--tint-grey); color: var(--muted); } .appt-row { border-top: 1px solid var(--line); padding: .5rem 0; font-size: .9rem; } /* Trade colour coding — a left stripe on the chip, status stays the fill. */ .appt.trade-gas { border-left: 3px solid #e67e22; } .appt.trade-electrical { border-left: 3px solid #f1c40f; } .appt.trade-carpentry { border-left: 3px solid #8d6e63; } .appt.trade-plumbing { border-left: 3px solid #3498db; } .appt.trade-roofing { border-left: 3px solid #7f8c8d; } .appt.trade-grounds { border-left: 3px solid #27ae60; } .appt.trade-repairs { border-left: 3px solid #9b59b6; } .trade-pill { color: #fff; } .trade-pill.trade-gas { background: #e67e22; } .trade-pill.trade-electrical { background: #d4ac0d; } .trade-pill.trade-carpentry { background: #8d6e63; } .trade-pill.trade-plumbing { background: #3498db; } .trade-pill.trade-roofing { background: #7f8c8d; } .trade-pill.trade-grounds { background: #27ae60; } .trade-pill.trade-repairs { background: #9b59b6; } .appt-row:first-child { border-top: none; } /* Photo grids */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin-top: .5rem; } .photo-thumb { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-align: center; } .photo-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; } .photo-thumb span { display: block; font-size: .72rem; color: var(--muted); padding: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Repair history timeline */ .history { list-style: none; padding: 0; margin: 0; } .history-item { display: grid; grid-template-columns: 120px 1fr; gap: .75rem; padding: .6rem 0; border-left: 2px solid var(--line); padding-left: 1rem; margin-left: .3rem; } .history-item + .history-item { border-top: 1px solid var(--line); } .history-date { color: var(--muted); font-size: .85rem; font-weight: 600; } .history-done { color: var(--credit); font-size: .82rem; margin-top: .2rem; } /* Staff notes */ .staffnote { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; } .staffnote-exempt { background: var(--red-bg); border-color: #f3c2bd; } .radio { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; } .radio input { width: auto; } /* Voice notes */ .voicenote { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; } .voicenote audio { width: 100%; max-width: 420px; } .transcript { margin-top: .4rem; padding: .5rem; background: var(--surface-2); border-radius: 6px; font-size: .9rem; } .unit { font-size: 1rem; color: var(--muted); font-weight: 400; } .needs { margin: .3rem 0; padding-left: 1.2rem; } .needs li { margin: .1rem 0; } /* Print */ @media print { .no-print, .topbar, .filters, .actions { display: none !important; } body { background: var(--surface); } .content { margin: 0; max-width: none; } .panel, table.ledger { border-color: #999; } } /* Site footer */ .sitefoot { max-width: 1000px; margin: 2rem auto 1.5rem; padding: .75rem 1.5rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; } .changelog { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.55; margin: 0; color: var(--ink); } /* ── Accessibility panel ────────────────────────────────────────────────────── Copied from Beacon (parish council platform) 2026-09-15 and mapped onto this stylesheet's variables. Every adjustment is a class on , set by app.js and saved in localStorage, so the CSS does the work and a page without JavaScript is unaffected. The mask overlays are DIVs; the selectors are element-qualified so a state class on can never match the root. */ .a11y-fab { position: fixed; left: 14px; bottom: 14px; z-index: 30; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: var(--brand); color: var(--on-brand); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.3); } .a11y-fab:hover, .a11y-fab:focus-visible { filter: brightness(.9); outline: 3px solid var(--amber); outline-offset: 2px; } .a11y-fab-theme { left: 74px; background: var(--surface); color: var(--ink); border-color: var(--ink); } [data-theme="dark"] .a11y-fab-theme { background: var(--amber); color: #1a1408; border-color: #fff; } .a11y-panel { position: fixed; left: 14px; bottom: 74px; z-index: 31; width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 100px); overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 14px 16px; font-size: .9375rem; } .a11y-title { margin: 0 0 .6rem; font-size: 1.05rem; } .a11y-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 .6rem; } .a11y-label { flex: 1 0 100%; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 .6rem; } .a11y-tool { border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); padding: 9px 10px; font: inherit; font-size: .875rem; text-align: left; cursor: pointer; } .a11y-tool:hover { border-color: var(--brand); } .a11y-tool:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; } .a11y-tool[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .a11y-tool[aria-pressed="true"]::before { content: "✓ "; } .a11y-half { flex: 1 1 45%; } .a11y-wide { width: 100%; display: block; margin: 0 0 .6rem; } .a11y-foot { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .2rem; } .a11y-note { margin: .4rem 0 0; font-size: .8rem; color: var(--muted); } .a11y-outline { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .875rem; } .a11y-outline li { padding: 3px 0; } .a11y-outline .a11y-h2 { padding-left: 1rem; } .a11y-outline .a11y-h3 { padding-left: 2rem; } @media print { .a11y-fab, .a11y-panel, .a11y-mask { display: none !important; } } html.a11y-lineheight body { line-height: 1.9; } html.a11y-lineheight p, html.a11y-lineheight li, html.a11y-lineheight td { line-height: 1.9; } html.a11y-font body, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3, html.a11y-font h4, html.a11y-font button, html.a11y-font input, html.a11y-font select, html.a11y-font textarea { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; letter-spacing: .02em; word-spacing: .06em; } html.a11y-links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; background: #fff3b0; color: #0b3d91; outline: 1px solid #0b3d91; outline-offset: 1px; } html.a11y-links a:hover, html.a11y-links a:focus { background: #ffe066; } html.a11y-contrast { --ink: #000; --muted: #000; --line: #000; --bg: #fff; --surface: #fff; --surface-2: #fff; --brand: #0000d0; --accent: #0000d0; --amber: #5b3a00; --amber-bg: #fff; --red-bg: #fff; --green-bg: #fff; --arrears: #a10000; --credit: #004d1a; --tint-blue: #fff; --tint-grey: #fff; --tint-indigo: #fff; --tint-indigo-ink: #000; --on-brand: #fff; --brand-text: #0000d0; --accent-text: #0000d0;} html.a11y-contrast body { background: #fff; color: #000; } html.a11y-contrast a { color: #0000d0; text-decoration: underline; } html.a11y-contrast .topbar, html.a11y-contrast .sitefoot { background: #000; color: #fff; } html.a11y-contrast .topbar a, html.a11y-contrast .sitefoot a, html.a11y-contrast .topbar .linkbtn { color: #fff; } html.a11y-contrast * { text-shadow: none !important; box-shadow: none !important; } html.a11y-grey { filter: grayscale(1); } html.a11y-noimg img, html.a11y-noimg svg:not(.a11y-fab svg) { visibility: hidden; } html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-focus :focus { outline: 4px solid #ff8c00 !important; outline-offset: 3px !important; } html.a11y-left body * { text-align: left !important; } div.a11y-mask { position: fixed; left: 0; right: 0; background: rgba(0,0,0,.55); pointer-events: none; z-index: 29; } div.a11y-mask-top { top: 0; height: 0; } div.a11y-mask-bottom { bottom: 0; top: 100vh; } html.a11y-mask .a11y-fab, html.a11y-mask .a11y-panel { z-index: 32; }