:root {
    --ink: #1b1b1b;
    --muted: #5d5d5d;
    --line: #d8d8d8;
    --accent: #0b5d3b;
    --bad: #a61b1b;
    --surface: #fff;
    --page: #f6f6f4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--page);
    line-height: 1.5;
}

header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .75rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: baseline;
}

header .association { font-size: 1.1rem; }
header .who { color: var(--muted); margin-left: .75rem; font-size: .9rem; }
header nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
header nav.session { margin-left: auto; }

/* ----------------------------------------------------------------------------
   Grouped navigation

   <details> and <summary>, not a menu widget: native, keyboard operable, and
   it works with JavaScript off. The panel is positioned absolutely so opening
   one does not push the page around — a menu that reflows the content under
   it makes people lose their place.
---------------------------------------------------------------------------- */

details.menu { position: relative; }

details.menu > summary {
    cursor: pointer;
    list-style: none;
    color: var(--accent);
    white-space: nowrap;
}

/*  The disclosure triangle, drawn with borders rather than a character.
    A glyph here has to survive being written to a file, served with the
    right charset and existing in the user's font — and it did not: an
    earlier version shipped a stray control byte and rendered as a tofu
    square followed by "BE". A triangle made of borders has none of those
    failure modes.                                                         */
details.menu > summary::-webkit-details-marker { display: none; }

details.menu > summary::after {
    content: "";
    display: inline-block;
    margin-left: .35rem;
    vertical-align: middle;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    border-top: .35em solid currentColor;
}

details.menu[open] > summary::after {
    border-top: 0;
    border-bottom: .35em solid currentColor;
}

details.menu > summary:hover { text-decoration: underline; }

details.menu > div {
    position: absolute;
    top: 1.8rem;
    left: 0;
    z-index: 10;
    min-width: 13rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    padding: .35rem 0;
}

details.menu.right > div { left: auto; right: 0; }
details.menu > div a { padding: .4rem .9rem; }
details.menu > div a:hover { background: var(--page); text-decoration: none; }

/* Where you are, so a bookmarked page does not look like no page at all. */
header nav a.current { font-weight: 600; text-decoration: underline; }

@media (max-width: 40rem) {
    /*  No room to float a panel over a narrow screen, so the menu opens
        inline and pushes the page down — which on a phone is what people
        expect anyway.                                                      */
    details.menu > div { position: static; box-shadow: none; min-width: 0; }
}

/*  The platform console is not part of an association's navigation and must
    not read as though it were — it appears only for a role the deployment
    granted, and it acts on every association on the shard.                  */
header nav.platform { padding-left: 1rem; border-left: 2px solid var(--accent); }
header a { color: var(--accent); text-decoration: none; }
header a:hover { text-decoration: underline; }

main { max-width: 68rem; margin: 1.5rem auto; padding: 0 1.5rem; }

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; margin-top: 2rem; }

table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; background: #efefec; }

/* Money reads as columns of figures, so it is right-aligned and tabular. */
td.amount, th.amount { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/*  Owner messages. Sortable headings read as headings, not as links; an open
    message carries a rule down its left edge so the working ones stand out. */
table.messages th a { color: inherit; text-decoration: none; }
table.messages th a:hover { text-decoration: underline; }
table.messages tr.open td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.state { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .45rem;
         border: 1px solid var(--line); border-radius: 999px; }
.state.open { border-color: var(--accent); color: var(--accent); }
.state.done { color: var(--muted); }
.said { white-space: pre-wrap; }
.reply { border-left: 3px solid var(--line); padding-left: .75rem; }
.small { font-size: .85rem; }
form.filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; }
form.filters label { display: flex; flex-direction: column; font-size: .85rem; }
.wide { overflow-x: auto; }

/* Counts line up like money without pretending to be it. */
td.count, th.count { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 600; border-top: 2px solid var(--ink); }
tr.fund-heading td { background: #eef3f0; font-weight: 600; }

form.stacked, div.stacked { background: var(--surface); padding: 1rem; border: 1px solid var(--line); max-width: 38rem; }

/*  A long form whose Save must not scroll out of reach: the rate card. */
.save-bar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: .5rem 0; margin-top: 1.5rem; }
.save-bar button { margin-top: 0; }
label { display: block; margin-top: .75rem; font-weight: 600; font-size: .9rem; }
input, select, textarea { width: 100%; padding: .4rem; font: inherit; border: 1px solid var(--line); }
input[type=checkbox] { width: auto; }
button { margin-top: 1rem; padding: .45rem 1rem; font: inherit; background: var(--accent); color: #fff; border: 0; cursor: pointer; }
button.secondary { background: #666; }
button.link { background: none; color: var(--accent); text-decoration: underline; padding: 0; margin: 0; }
button.danger { background: var(--bad); }

/*  A value sitting in a column the row does not use. It stays on screen and
    says so, because hiding it would hide the thing being asked for.        */
.conflict input, .conflict select { outline: 2px solid var(--bad); }

.error { color: var(--bad); font-weight: 600; }
.notice { color: var(--accent); font-weight: 600; }
.muted { color: var(--muted); }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.5rem; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }
.actions { display: flex; gap: .75rem; align-items: center; }
.associations { list-style: none; padding: 0; }
.associations li { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.associations form { display: flex; gap: 1rem; align-items: center; }

@media (max-width: 40rem) {
    header nav.session { margin-left: 0; }
    main { padding: 0 .75rem; }
}

/*  Facts belong on one line with their label, not stacked: a person's details
    are read at a glance, and a two-column list of ten rows is a scroll.      */
dl.inline { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1.5rem; }
dl.inline dt { color: #555; }
dl.inline dd { margin: 0; }

/*  A password shown once is read off the screen and retyped. Large, spaced
    and monospaced, so an l and a 1 are not the same character — the generator
    avoids both, and this is the second line of defence.                     */
code.password {
    display: inline-block;
    font-size: 1.4rem;
    letter-spacing: .08em;
    padding: .5rem .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    user-select: all;
}

ol.recipients { margin: 0 0 .5rem; padding-left: 1.25rem; }
ol.recipients li { margin-bottom: .25rem; }
ol.recipients .value { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* Forms hide blocks with [hidden]; make that beat the display rule above. */
[hidden] { display: none !important; }

/*  A filter row reads as one line: the search box takes what it needs and
    leaves room for the checkbox beside it.                                 */
input.narrow { width: 10rem; }

/*  Icon links. The label is there for a screen reader and appears on hover,
    so the icon is never the only thing carrying the meaning.               */
a.icon { display: inline-flex; align-items: center; text-decoration: none; }
a.icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
a.icon .icon-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a.icon:hover .icon-text, a.icon:focus .icon-text { position: static; width: auto; height: auto; clip-path: none; margin-left: .35rem; }


/* ============================================================================
   Statements

   These are documents before they are screens. A committee prints the
   balance sheet for an AGM and an auditor wants it in their working papers,
   so the printed page is the one that has to be right — which is why the
   navigation, the year picker and every link disappear from it.
============================================================================ */

header.statement { display: block; background: none; border: 0; padding: 0; margin: 0 0 1.5rem; text-align: center; }
header.statement h1 { font-size: 1.3rem; margin: 0; }
header.statement h2 { font-size: 1.05rem; margin: .25rem 0 0; font-weight: 600; }
header.statement .period { color: var(--muted); margin: .25rem 0 0; }

/*  The side-by-side layout auditors of housing societies expect. It stacks
    on a narrow screen, because a treasurer checking a figure on a phone is
    better served by two readable halves than by one unreadable pair.       */
.tee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.tee table { margin-bottom: 0; }

@media (max-width: 60rem) {
    .tee { grid-template-columns: 1fr; }
}

/*  A statement that cannot be relied on says so first and loudly. The point
    is that it is impossible to print the totals without printing this.     */
.refusal { border: 2px solid var(--bad); padding: 1rem; margin-bottom: 1.5rem; }
.refusal p:first-child { margin-top: 0; }

ul.statements { list-style: none; padding: 0; }
ul.statements li { border-bottom: 1px solid var(--line); padding: .6rem 0; }
ul.statements span { display: block; font-size: .9rem; }

label.inline { display: inline; margin: 0 .5rem 0 0; }

@media print {
    header, nav, .no-print, form { display: none !important; }
    main { max-width: none; margin: 0; padding: 0; }
    header.statement { display: block !important; }
    table { font-size: .85rem; }
    .tee { grid-template-columns: 1fr 1fr; gap: 1rem; }
    a { color: inherit; text-decoration: none; }
    tr.total td { border-top: 2px solid #000; }
}

/*  One statement per sheet of paper. On screen they simply stack with a rule
    between them; printed, each starts a new page, because a balance sheet
    that begins half way down the page under the end of another statement is
    not a document anybody tables at an AGM.                                */
section.sheet { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

/*  Signed by hand on the printed copy, so what matters is the rule and the
    room above the name — not the name itself.                              */
.signatures { display: flex; gap: 3rem; margin-top: 4rem; }
.signatures > div { flex: 1; text-align: center; }
.signatures .rule { border-top: 1px solid var(--ink); margin-bottom: .35rem; }

@media print {
    section.sheet { break-after: page; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
    section.sheet:last-of-type { break-after: auto; }
    .signatures { margin-top: 5rem; }
}

/* A form that lives in a table cell should not look like a form. */
form.inline-form { display: inline; }
form.inline-form button { margin: 0; }

/*  A column of figures being typed is still a column of figures: narrow,
    right-aligned and tabular, so a mistyped extra zero is visible.        */
input.figure { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Bills

   The document an owner actually receives. Everything upstream is invisible
   if this prints badly, and "prints badly" here means specific things: a
   bill split across two sheets, a charges table whose heading is on the
   previous page, a total stranded on its own.
--------------------------------------------------------------------------- */

article.bill { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
article.bill .letterhead { text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
article.bill .letterhead h1 { margin: 0 0 .2rem; font-size: 1.3rem; }
article.bill .letterhead p { margin: 0; font-size: .85rem; }
article.bill h2 { text-align: center; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin: .8rem 0; }

article.bill table.meta { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
article.bill table.meta th { text-align: left; font-weight: 600; width: 9rem; padding: .15rem .5rem .15rem 0; vertical-align: top; }
article.bill table.meta td { padding: .15rem 1rem .15rem 0; }

/*  The receipt's and the statement's label/value list, laid out like the
    bill's table.meta: label and value on one line. It had no rule at all, so
    the browser stacked every label above its value — the PDF, drawn
    separately, was always right.                                           */
.doc-meta { display: grid; grid-template-columns: 9rem 1fr; gap: .15rem .5rem; margin: 0 0 1rem; }
.doc-meta dt { font-weight: 600; }
.doc-meta dd { margin: 0; }

article.bill table.charges { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
article.bill table.charges th, article.bill table.charges td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
article.bill table.charges thead th { border-bottom: 1px solid var(--ink); text-align: left; }
article.bill table.charges tr.carried td { font-style: italic; }
article.bill table.charges tr.total th { border-top: 2px solid var(--ink); border-bottom: 0; font-size: 1.05rem; }

article.bill .pay { border: 1px solid var(--line); padding: .6rem .8rem; margin-bottom: 1rem; }
article.bill .pay h3 { margin: 0 0 .3rem; font-size: .9rem; }
article.bill .pay p { margin: 0; white-space: pre-wrap; }
article.bill .bill-foot { font-size: .8rem; }

/*  The notice board copy: one sheet, as many flats as fit, nothing else on
    it. Half these associations still communicate this way.                */
table.notice { width: 100%; border-collapse: collapse; }
table.notice th, table.notice td { padding: .25rem .5rem; border-bottom: 1px solid var(--line); }
table.notice tr.settled td { color: var(--muted); }

@media print {
    /*  One bill per sheet. A bill that begins half way down the page under
        the end of somebody else's is not a document you hand to a member. */
    article.bill { break-after: page; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
    article.bill:last-of-type { break-after: auto; }

    /*  A table that runs over a page break repeats its heading and keeps
        its rows whole — an orphaned row of figures under no heading is a
        row nobody can read.                                               */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr { break-inside: avoid; }

    /*  And the total stays with the charges it totals, rather than landing
        alone at the top of the next sheet.                                */
    article.bill table.charges { break-inside: avoid; }
    article.bill .pay, article.bill .bill-foot { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Getting started

   Eleven steps somebody works through over days. What they want on opening
   it is one thing: where did I get to, and what is next.
--------------------------------------------------------------------------- */

.next-step { border: 2px solid var(--ink); padding: .8rem 1rem; margin: 1rem 0 1.5rem; }
.next-step p.muted { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.next-step h2 { margin: .2rem 0 .4rem; }
.next-step p:last-child { margin-bottom: 0; }

/*  Dashboard panels: one question each, the figure large, the detail under
    it. Auto-fit so a phone gets one column and a desk gets three. */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: .8rem 1rem; }
.panel h2 { font-size: 1rem; margin: 0 0 .4rem; }
.panel h2 a { color: inherit; }
.panel .figure { font-size: 1.6rem; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.panel .figure a { color: inherit; text-decoration: none; }
.panel .figure + .muted { margin: 0 0 .6rem; }
.panel dl.figures { display: grid; grid-template-columns: 1fr max-content; gap: .15rem 1rem; margin: 0 0 .6rem; font-size: .9rem; }
.panel dl.figures dt { color: var(--muted); }
.panel dl.figures dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.panel table.compact td { padding: .2rem .3rem; font-size: .88rem; border-top: 1px solid var(--line); }
.panel ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.panel .actions { margin: .6rem 0 0; }

ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li { counter-increment: step; border-left: 3px solid var(--line); padding: .1rem 0 .1rem 1rem; margin-bottom: 1.2rem; }
ol.steps > li h3 { margin: 0 0 .2rem; font-size: 1rem; }
ol.steps > li h3::before { content: counter(step) ". "; color: var(--muted); }
ol.steps > li p { margin: .2rem 0; }
ol.steps > li p.found { font-weight: 600; }

/*  Usage. The three figures that matter, then one row per day with a bar
    drawn from its share of the busiest day — no chart library for one number
    per row, and it degrades to the numbers beside it.                      */
.usage-headline { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 2rem; }
.usage-headline .figure {
    flex: 1 1 12rem; border: 1px solid var(--line); border-left-width: 3px;
    background: var(--surface); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem;
}
.usage-headline .figure.bad { border-left-color: var(--bad); }
.usage-headline .number { font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.usage-headline .number .muted { font-size: 1rem; font-weight: 400; }
.usage-headline .label { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--muted); }
.usage-headline .figure > .muted { font-size: .8rem; }

.usage-days .bar-cell { width: 8rem; }
.usage-days .bar { display: block; height: .7rem; min-width: 1px; background: var(--accent); }

/*  What a message actually said. Pre-wrapped because the body has its own
    line breaks and they are part of the evidence.                          */
pre.message-body {
    white-space: pre-wrap; margin: .3rem 0 0; padding: .4rem .6rem;
    background: var(--page); border-left: 3px solid var(--line);
    font: inherit; max-width: 32rem;
}

/*  Task-level help. One block per thing that happened, so the page can be
    scrolled past until the right heading appears.                          */
.help-index ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.help-index li { margin: .2rem 0; }
.help-task { border-left: 3px solid var(--line); padding: .1rem 0 .1rem 1rem; margin-bottom: 2rem; }
.help-task h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.help-task p.found { font-weight: 600; margin: .2rem 0 .6rem; }
.help-task ol { margin: 0 0 .6rem; padding-left: 1.2rem; }
.help-task li { margin: .2rem 0; }

/*  A done step stays legible rather than greying out: somebody rereading the
    list wants to check what they did, not be told it no longer matters.   */
ol.steps > li.done { border-left-color: var(--ink); }
ol.steps > li.done p.found { font-weight: 400; color: var(--muted); }
.tick { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--ink); padding: 0 .3rem; margin-left: .4rem; }

/*  Which build this is. Quiet enough to ignore all day and findable the one
    time somebody needs to know whether the screen in front of them has the
    change in it.                                                           */
footer.build {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: baseline;
    margin: 2rem 0 0;
    padding: 0.5rem 0;
    border-top: 1px solid #e3e3e3;
    color: #777;
    font-size: 0.8rem;
}

footer.build .stamp {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    cursor: help;
}

/*  A build stamp on a bill or a receipt is noise on somebody's paperwork. */
@media print {
    footer.build { display: none; }
}

/*  The date a native input is actually holding, written the way this product
    writes every other date. The control draws itself in the browser's locale
    — 05/12 means different days in Hyderabad and Chicago — and nothing in
    HTML or CSS changes that, so the page says it unambiguously alongside.   */
.date-echo {
    margin-left: .4rem;
    color: var(--muted);
    font-size: .85rem;
    white-space: nowrap;
}

.date-echo:empty { display: none; }

/*  Where you are, at the group level. This replaced opening the matching
    menu on every page load: the panel floats, so that left a menu lying
    across the content of the page it had just navigated to.                */
details.menu.current > summary { font-weight: 600; text-decoration: underline; }

/*  The brought-forward line on a statement. Set apart because it is the one
    row that is not an event — it is everything that happened before the page
    starts, and a member checking the arithmetic has to see where it came in. */
.doc-lines tr.brought-forward td { border-top: 1px solid var(--line); font-style: italic; }

/*  What an import can read, shown before the file is chosen. Open by default
    and collapsible: it answers the question a treasurer has on their first
    visit and is in the way on their fourth.                                 */
details.import-fields {
    border: 1px solid var(--line);
    background: var(--surface);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

details.import-fields > summary {
    cursor: pointer;
    font-weight: 600;
}

details.import-fields table { margin-top: .75rem; }
details.import-fields td { vertical-align: top; }

/*  Which column the import cannot proceed without. One per file, and saying
    which is most of what this table is for.                                 */
.needed {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .4rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}

/*  A menu entry that belongs to the one above it — "Import members" under
    "People". Grouping, not nesting: it is one click like every other entry,
    and the indent is the only thing saying they go together.

    The dash is drawn rather than typed, so a screen reader announces the link
    as "Import members" and not as a dash followed by a word.                */
details.menu > div a.sub {
    position: relative;
    padding-left: 1.9rem;
}

details.menu > div a.sub::before {
    content: "\2013";
    position: absolute;
    left: 1rem;
    color: var(--muted);
}

/*  A menu too long for one column, grouped under headings (Money). The
    columns sit side by side on a wide screen and stack on a narrow one; the
    help link spans the foot of the panel.                                   */
details.menu > div.groups {
    flex-direction: row;
    flex-wrap: wrap;
    width: max-content;
    max-width: calc(100vw - 2.5rem); /* 100vw counts the scrollbar */
}

details.menu > div.groups section {
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    padding-bottom: .35rem;
}

details.menu > div.groups h3 {
    margin: .35rem .9rem .2rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

details.menu > div.groups a.help {
    flex-basis: 100%;
    border-top: 1px solid var(--line);
    margin-top: .2rem;
    padding-top: .5rem;
}

@media (max-width: 40rem) {
    details.menu > div.groups { flex-direction: column; width: auto; max-width: none; }
}

/*  ---------------------------------------------------------------------------
    The support banner (WP45).

    Loud on purpose. This is the one piece of chrome in the product whose job
    is to be impossible to stop noticing: a support agent who forgets they are
    impersonating does something as the treasurer and then has to explain it.
    Amber rather than red — red is for errors, and being in a support session
    is not an error.
    --------------------------------------------------------------------------- */
.impersonating {
    background: #7a4a00;
    color: #fff;
    padding: .6rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: .9rem;
    /*  Above the header's own border, so the two do not read as one bar. */
    border-bottom: 2px solid #5a3600;
}

.impersonating strong { color: #fff; }

/*  The deadline, which is the useful half of "write access is on". */
.impersonating .writing {
    background: #fff;
    color: #7a4a00;
    font-weight: 600;
    padding: .1rem .4rem;
}

.impersonating form { margin: 0; }
.impersonating .acts { display: flex; gap: .5rem; flex-wrap: wrap; }

.impersonating button {
    background: #fff;
    color: #7a4a00;
    border: 0;
    font: inherit;
    font-weight: 600;
    padding: .35rem .9rem;
    cursor: pointer;
}

/*  A support visit, on the association's own page. Ended visits are quiet;
    an open one is not, because it is happening now. */
.visit { border: 1px solid var(--line); background: var(--surface); padding: .8rem 1rem; margin-bottom: .6rem; }
.visit.open { border-left: 4px solid #7a4a00; }
.visit .reason { font-style: italic; }
.visit .wrote { color: #7a4a00; font-weight: 600; }

/* Account groups on Income and Expenditure (WP59): the heading, its accounts
   set in under it, and the group's total ruled off above. */
tr.group-head td { font-weight: 600; }
tr.group-line td:first-child { padding-left: 1.5rem; }
tr.group-total td.amount { border-top: 1px solid var(--line); font-weight: 600; }

/* The chart of accounts as a tree. */
table.chart tr.chart-group td { background: var(--surface); }
table.chart tr.retired td { color: var(--muted); }