/* AI Accounting Platform — interface styles.

   Plain CSS on purpose: no build step, no external dependency, readable by anyone.

   The look is meant to be quiet. An accounting screen is read for hours by someone checking
   figures, so the page gets out of the way: one accent colour, generous white space, numbers in a
   monospaced face so columns line up, and colour used only where it means something — a state, a
   warning, a total.

   The accent is the brand. It sits in one block below and nothing else in this file names a brand
   colour, so another company's palette is that block and nothing more. The one shipped is
   Quantihouse's, taken from quantihousetech.com: near-black and a lime green.

   Order: brand · tokens · dark · reset · layout · furniture · cards · tables · controls · states.
*/

/* ---------- brand ----------

   Change these six and the whole interface follows.

   A note on the lime. It carries enormous weight as a *fill* — a button, an active tab, a chart
   line — and none at all as text on white, where it reads at about 1.3:1 against a background and
   is unreadable. So the accent is never used for words on a light page: links and small print use
   --accent-deep, the same hue taken down until it is comfortably readable, and the bright lime is
   kept for things with a dark backing underneath them. */

:root {
    --accent: #b3ff3a;          /* the brand lime */
    --accent-ink: #05070d;      /* what sits on top of the lime: the brand's near-black */
    --accent-deep: #44660f;     /* the same hue, readable as text on white */
    --accent-deeper: #334d0b;
    --accent-soft: #f2fde0;     /* a lime wash for a light page */
    --accent-line: #c4e88a;
}

:root {
    /* ink and paper */
    --ink: #142433;
    --ink-soft: #5a6b7d;
    --muted: #7a889a;
    --line: #e2e8f0;
    --line-strong: #c8d3e0;
    --paper: #ffffff;
    --canvas: #f5f7fa;

    /* anything interactive. On a light page the words are the deep hue, the fills are the lime. */
    --brand: var(--accent-deep);
    --brand-dark: var(--accent-deeper);
    --brand-soft: var(--accent-soft);
    --brand-line: var(--accent-line);

    /* meaning, not decoration. Green already belongs to the brand, so "good" is a deeper green
       that cannot be mistaken for the accent. */
    --good: #2f6b2a;
    --good-soft: #eef7ec;
    --good-line: #aed3a8;
    --warn: #8a5a08;
    --warn-soft: #fdf6e9;
    --warn-line: #e0c58f;
    --bad: #b3261e;
    --bad-soft: #fdefee;
    --bad-line: #e5b2ae;

    /* shape, following the brand: generous on a card, a pill on a button */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(20, 36, 51, .05), 0 1px 3px rgba(20, 36, 51, .04);
    --shadow-lift: 0 2px 4px rgba(20, 36, 51, .06), 0 4px 12px rgba(20, 36, 51, .05);

    /* surfaces that sit on top of paper: a table head, a total row, a hovered row */
    --surface-head: #f7f9fb;
    --surface-sunken: #f3f6f9;
    --surface-group: #eaeff4;
    --row-hover: #fafcfd;
    --on-brand: var(--accent-ink);

    /* the sidebar is the brand's near-black in both schemes, with the lime marking where you are */
    --nav-top: #0c111b;
    --nav-bottom: #05070d;
    --nav-text: #a3adbf;
    --nav-text-strong: #eef2f6;
    --nav-label: #6a788e;
    --nav-sub: #7d8ba1;
    --nav-active: var(--accent);
    --nav-hover: rgba(255, 255, 255, .05);
    --nav-selected: rgba(179, 255, 58, .10);
    --nav-rule: rgba(255, 255, 255, .08);

    /* charts: the accent draws the money line, and out is kept warm so in and out never blur */
    --chart-in: #6a9c1b;
    --chart-area: rgba(106, 156, 27, .14);
    --chart-out: #c0504d;

    /* a state with no token of its own */
    --violet: #6b3f8c;
    --violet-line: #c9b3d8;
    --violet-soft: #f7f1fb;

    /* measure */
    --sidebar: 236px;
    --page: 1240px;
    --mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;
}

/* ---------- dark ----------

   Two ways in, one palette. Without a choice the page follows the computer; a person who has
   chosen Light or Dark gets that everywhere they sign in, because the choice is kept on them and
   written onto <html data-theme>.

   Everything below is a token. No rule further down this file knows which scheme it is in. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    /* ink and paper, turned over — the surfaces of quantihousetech.com */
    --ink: #eef2f6;
    --ink-soft: #a3adbf;
    --muted: #8795a9;
    --line: #1a2232;
    --line-strong: #2b3547;
    --paper: #0c111b;
    --canvas: #05070d;

    /* on a dark page the lime is readable as words as well as fills */
    --brand: var(--accent);
    --brand-dark: #c6ff6b;
    --brand-soft: #16200c;
    --brand-line: #3f5a12;
    --on-brand: var(--accent-ink);

    --good: #8fd65a;
    --good-soft: #16200c;
    --good-line: #3f5a12;
    --warn: #ffb547;
    --warn-soft: #2a2213;
    --warn-line: #6b5527;
    --bad: #ff6b6b;
    --bad-soft: #2a1012;
    --bad-line: #7a3537;

    --surface-head: #111827;
    --surface-sunken: #080b13;
    --surface-group: #141d2e;
    --row-hover: #111827;

    --nav-top: #0c111b;
    --nav-bottom: #05070d;
    --nav-text: #a3adbf;
    --nav-label: #6a788e;
    --nav-sub: #7d8ba1;

    --chart-in: var(--accent);
    --chart-area: rgba(179, 255, 58, .10);
    --chart-out: #ff6b6b;

    --violet: #a78bfa;
    --violet-line: #342a5c;
    --violet-soft: #1b1631;

    /* a shadow on a dark surface reads as dirt; the border carries the shape instead */
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    /* ink and paper, turned over — the surfaces of quantihousetech.com */
    --ink: #eef2f6;
    --ink-soft: #a3adbf;
    --muted: #8795a9;
    --line: #1a2232;
    --line-strong: #2b3547;
    --paper: #0c111b;
    --canvas: #05070d;

    /* on a dark page the lime is readable as words as well as fills */
    --brand: var(--accent);
    --brand-dark: #c6ff6b;
    --brand-soft: #16200c;
    --brand-line: #3f5a12;
    --on-brand: var(--accent-ink);

    --good: #8fd65a;
    --good-soft: #16200c;
    --good-line: #3f5a12;
    --warn: #ffb547;
    --warn-soft: #2a2213;
    --warn-line: #6b5527;
    --bad: #ff6b6b;
    --bad-soft: #2a1012;
    --bad-line: #7a3537;

    --surface-head: #111827;
    --surface-sunken: #080b13;
    --surface-group: #141d2e;
    --row-hover: #111827;

    --nav-top: #0c111b;
    --nav-bottom: #05070d;
    --nav-text: #a3adbf;
    --nav-label: #6a788e;
    --nav-sub: #7d8ba1;

    --chart-in: var(--accent);
    --chart-area: rgba(179, 255, 58, .10);
    --chart-out: #ff6b6b;

    --violet: #a78bfa;
    --violet-line: #342a5c;
    --violet-soft: #1b1631;

    /* a shadow on a dark surface reads as dirt; the border carries the shape instead */
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55);
}

/* ---------- reset ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration-color: var(--brand-line); text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; margin: 0 0 .3rem; }
h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; margin: 1.9rem 0 .65rem; }
h3 { font-size: .95rem; font-weight: 650; margin: 1.2rem 0 .4rem; }
p { margin: 0 0 .9rem; }
p.lead { color: var(--ink-soft); margin: 0 0 1.4rem; max-width: 76ch; }

/* ---------- layout ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: linear-gradient(180deg, var(--nav-top) 0%, var(--nav-bottom) 100%);
    color: var(--nav-text);
    padding: 1.1rem 0 2rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand {
    display: block;
    padding: .15rem 1.25rem 1.1rem;
    margin-bottom: .4rem;
    color: var(--nav-text-strong);
    font-weight: 650;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    text-decoration: none;
    border-bottom: 1px solid var(--nav-rule);
}
.sidebar .brand small {
    display: block;
    font-weight: 400;
    font-size: .76rem;
    color: var(--nav-sub);
    margin-top: .1rem;
    letter-spacing: 0;
}

.sidebar nav a {
    display: block;
    padding: .42rem 1.25rem;
    color: var(--nav-text);
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background .12s ease, color .12s ease;
}
.sidebar nav a:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
.sidebar nav a.active {
    background: var(--nav-selected);
    color: var(--nav-text-strong);
    border-left-color: var(--nav-active);
    font-weight: 600;
}

.sidebar .group {
    padding: 1.15rem 1.25rem .25rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 650;
    color: var(--nav-label);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1.75rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar .spacer { flex: 1; }
.topbar form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.topbar .who { color: var(--ink-soft); font-size: .88rem; }
.topbar label { margin: 0; }

.content { padding: 1.75rem; max-width: var(--page); width: 100%; }

/* A heading with its actions on the same line. */
.pagehead { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pagehead .spacer { flex: 1; }

/* ---------- cards ---------- */

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.15rem 1.3rem;
    margin-bottom: 1.25rem;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.card > table.plain { border: 0; box-shadow: none; margin: 0 -.35rem; width: calc(100% + .7rem); }
.card > table.plain th { background: transparent; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); gap: 1.1rem; }

.stat {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .95rem 1.1rem 1.05rem;
    position: relative;
    overflow: hidden;
}
.stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
}
.stat .label {
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 650;
}
.stat .value {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-top: .3rem;
}

.cardhead { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .45rem; }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; background: var(--paper); }

table.plain {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

th, td {
    padding: .58rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    background: var(--surface-head);
    font-weight: 650;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }

td.num, th.num {
    text-align: right;
    font-family: var(--mono);
    font-size: .88em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
td.code { font-family: var(--mono); font-size: .86em; color: var(--ink-soft); white-space: nowrap; }

tr.total td {
    font-weight: 650;
    background: var(--surface-sunken);
    border-top: 2px solid var(--line-strong);
    border-bottom: 0;
}
tr.group td {
    background: var(--surface-group);
    font-weight: 650;
    font-size: .92em;
    letter-spacing: .01em;
}
tfoot td { border-bottom: 0; }

table.compact td { padding: .3rem .6rem; font-size: .9rem; }
table.compact th { padding: .4rem .6rem; }
table.narrow { width: auto; min-width: 28rem; }
table.narrow th { background: transparent; text-transform: none; letter-spacing: 0; font-size: .82rem;
                  color: var(--ink-soft); width: 12rem; }

.empty { padding: 2.25rem; text-align: center; color: var(--muted); }

/* ---------- controls ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem 1.05rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--on-brand);
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover { background: #c6ff6b; border-color: #c6ff6b; color: var(--accent-ink); }
.btn:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.btn.secondary { background: var(--paper); color: var(--brand); border-color: var(--line-strong); }
.btn.secondary, .btn.danger { border-radius: var(--radius-pill); }
.btn.secondary:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.btn.danger { background: var(--paper); border-color: var(--bad-line); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=month],
input[type=number], input[type=file], select, textarea {
    padding: .4rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9rem;
    background: var(--paper);
    color: var(--ink);
    max-width: 100%;
}
input[type=date], input[type=month], input[type=number] { font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
input[type=checkbox] { accent-color: var(--brand); }

label { font-size: .82rem; color: var(--ink-soft); display: block; margin-bottom: .22rem; font-weight: 500; }
.field { margin-bottom: .95rem; }
.field .help, .helptext { font-size: .8rem; color: var(--muted); }

form.inline-filters {
    display: flex;
    gap: .9rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
    padding: .9rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
form.inline-filters p { margin: 0; }
form.inline-filters .btn { margin-bottom: 1px; }

form.inline { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
input.short { width: 4.5rem; }
textarea.wide { width: 100%; min-height: 5rem; }

.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; }
.pillrow a { margin-right: .75rem; }
.pager { color: var(--muted); }

/* ---------- states ---------- */

.tag {
    display: inline-block;
    padding: .08rem .55rem;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    background: var(--paper);
    white-space: nowrap;
    vertical-align: baseline;
}
.tag.draft, .tag.unmatched { border-color: var(--warn-line); color: var(--warn); background: var(--warn-soft); }
.tag.posted, .tag.matched, .tag.issued, .tag.paid { border-color: var(--good-line); color: var(--good); background: var(--good-soft); }
.tag.proposed { border-color: var(--brand-line); color: var(--brand-dark); background: var(--brand-soft); }
.tag.reversed { border-color: var(--violet-line); color: var(--violet); background: var(--violet-soft); }
.tag.locked, .tag.excluded, .tag.void, .tag.unpaid { border-color: var(--line-strong); color: var(--ink-soft); background: var(--surface-group); }
.tag.bad { border-color: var(--bad-line); color: var(--bad); background: var(--bad-soft); }
/* Something still to do, not something wrong: on a list of 150 costs a red pill on every
   row stops meaning anything, so an open task is quiet and dashed instead. */
.tag.todo { border-style: dashed; border-color: var(--line-strong); color: var(--ink-soft);
            background: transparent; font-weight: 500; }
.tag.todo:hover { border-color: var(--brand-line); color: var(--brand-dark); background: var(--brand-soft); }
.tag.provenance { font-family: var(--mono); font-size: .71rem; font-weight: 500; }

.msg {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: .9rem;
    border: 1px solid;
    font-size: .92rem;
}
.msg.success { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }
.msg.error { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.msg.warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.msg.info { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.right { text-align: right; }
.nowrap, td.nowrap, th.nowrap { white-space: nowrap; }

/* ---------- overview charts ----------
   Drawn as SVG by the server: no chart library, no scripts, and they print. */

.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.25rem; }
.card.chart .sub { color: var(--muted); font-size: .84rem; margin: -.4rem 0 .75rem; }
.plot { width: 100%; height: auto; display: block; }
.plot .axis { stroke: var(--line-strong); stroke-width: 1; }
.plot .line { fill: none; stroke: var(--chart-in); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .area { fill: var(--chart-area); stroke: none; }
.plot .dot { fill: var(--chart-in); }
.plot .bar-in { fill: var(--chart-in); }
.plot .bar-out { fill: var(--chart-out); }
.axis-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); padding: .3rem .25rem 0; }
.legend { font-size: .8rem; color: var(--muted); margin-top: .6rem; }
.legend .key { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; margin: 0 .35rem 0 .9rem; vertical-align: middle; }
.legend .key:first-child { margin-left: 0; }
.legend .key.in { background: var(--chart-in); }
.legend .key.out { background: var(--chart-out); }
.plain.bars .barcell { width: 320px; }
.plain.bars .bar { display: inline-block; height: .65rem; background: var(--chart-in); border-radius: 2px; }

/* ---------- documents ---------- */

.preview { margin: .35rem 0 .65rem; }
.preview > summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--brand);
    font-weight: 500;
    width: max-content;
}
.preview > summary:hover { color: var(--brand-dark); }
.preview img, .preview object {
    display: block;
    margin-top: .6rem;
    width: 100%;
    max-width: 640px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    background: var(--paper);
}
.preview object { height: 70vh; }

.narrow-card { max-width: 580px; margin-top: 1.3rem; }
table.expenses td { vertical-align: top; }

/* ---------- a payslip, on screen and on paper ---------- */

.sheet {
    max-width: 760px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: 2.25rem 2.5rem 2rem;
}
.sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 2px solid var(--ink);
    padding-bottom: .9rem;
    margin-bottom: 1.4rem;
}
.sheet-head h1 { margin: 0; font-size: 1.2rem; letter-spacing: -.01em; }
.sheet-head p { margin: .15rem 0 0; }
.sheet-title { text-align: right; }
.sheet-title strong { font-size: 1rem; letter-spacing: .14em; }
.sheet h2 {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 650;
    margin: 1.6rem 0 .45rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--line);
}
.sheet table.plain { border: 0; box-shadow: none; margin-bottom: 0; }
.sheet table.plain th { background: transparent; }
.seal { margin-top: 1.8rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.seal .code { word-break: break-all; font-size: .68rem; font-family: var(--mono); color: var(--ink-soft); }

/* ---------- narrow screens ---------- */

@media (max-width: 1000px) {
    .chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .shell { display: block; }
    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        padding-bottom: .75rem;
    }
    .sidebar nav { display: flex; flex-wrap: wrap; gap: .1rem; padding: 0 .75rem; }
    .sidebar nav a { border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--radius-sm); }
    .sidebar nav a.active { border-left: 0; border-bottom-color: var(--nav-active); }
    .sidebar .group { width: 100%; padding: .7rem 1.25rem .15rem; }
    .content { padding: 1.1rem; }
    .topbar { padding: .55rem 1.1rem; flex-wrap: wrap; }
    table.narrow { min-width: 0; width: 100%; }
}

/* ---------- print ---------- */

@media print {
    .sidebar, .topbar, .no-print, .msg, form.inline-filters { display: none !important; }
    .shell, .main, .content { display: block; margin: 0; padding: 0; max-width: none; }
    body { background: #fff; font-size: 11pt; }
    .card, .stat, table.plain { box-shadow: none; break-inside: avoid; }
    .sheet { border: 0; box-shadow: none; padding: 0; max-width: none; }
    th { position: static; }
    a { text-decoration: none; color: inherit; }
}

/* The year table with every figure shown: the name heads a block, the figures sit under it,
   and a rule above Net pay separates what the person is paid from what it costs the company. */
table.year tbody + tbody tr.group td { border-top: 2px solid var(--line-strong); }
table.year td.figure { padding-left: 1.6rem; color: var(--ink-soft); font-size: .88em; }
table.year tr.keyline td { border-top: 1px solid var(--line-strong); font-weight: 600; color: var(--ink); }
table.year tfoot tr.group td { border-top: 2px solid var(--line-strong); }

/* ---------- sign-in, two-factor and account pages (allauth) ---------- */

.content.auth { max-width: 34rem; width: auto; }
.content.auth-entrance { width: calc(100% - 2rem); }
.content.auth-entrance {
    margin: 3.5rem auto 2rem;
    padding: 2rem 2.1rem 1.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 26rem;
}
.content.auth-manage {
    padding: 1.6rem 1.8rem;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.auth-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem;
              font-weight: 600; color: var(--ink-soft); }
.auth-mark {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .2rem .55rem; border-radius: var(--radius-sm);
    background: var(--accent); color: var(--accent-ink);
    font-weight: 800; letter-spacing: .04em; font-size: .9rem;
}
.auth h1 { margin-bottom: .6rem; }
.auth p { color: var(--ink-soft); line-height: 1.5; }
.auth-form { margin-top: 1.1rem; }
.auth-form p { margin: 0 0 .95rem; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password] {
    display: block; width: 100%; padding: .55rem .7rem; font-size: .95rem;
}
.auth-form input[type=checkbox] + label, .auth-form label:has(+ input[type=checkbox]) { display: inline; }
.auth-form input[name=code] { font-family: var(--mono); font-size: 1.2rem; letter-spacing: .3em; }
.auth-form input[disabled] { font-family: var(--mono); font-size: .85rem; color: var(--ink-soft);
                             background: var(--canvas, var(--paper)); }
.auth-form .help { display: block; margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.auth-form .actions { margin: 1.2rem 0 0; }
.auth-form .actions .btn { padding: .5rem 1.3rem; }
.auth-entrance .auth-form .actions .btn:not(.secondary) { flex: 1; justify-content: center; }
.auth .msg { margin-bottom: 1rem; }
/* A QR code must be dark on light whatever the theme, or phone cameras will not read it. */
img.qr { display: block; background: #fff; padding: 12px; border-radius: var(--radius-sm);
         border: 1px solid var(--line); margin: .4rem 0 1.2rem; }
.auth textarea { font-family: var(--mono); width: 100%; max-width: 16rem; min-height: 14rem; }
.auth hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }
@media (max-width: 860px) {
    .content.auth-entrance { margin: 1.5rem 1rem; padding: 1.5rem 1.25rem; }
    .content.auth-manage { margin: 1rem; }
}