/*
 * One stylesheet, hand-written, no build step.
 *
 * The screens this has to serve well are triage screens - long lists, many
 * rows, a person going quickly. So: dense by default, generous hit areas on
 * anything clicked repeatedly, and no animation on a list that re-renders.
 */

:root {
    --ink: #16181d;
    --muted: #6b7280;
    --line: #e3e6ea;
    --ground: #f7f8fa;
    --panel: #ffffff;
    --accent: #1d4ed8;
    --accent-soft: #eef2ff;
    --good: #15803d;
    --warn: #b45309;
    --over: #b91c1c;

    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--ground);
}

a { color: var(--accent); }

/* --- top bar ----------------------------------------------------------- */

/*
 * min-height, NOT height.
 *
 * It was a fixed 52px. The nav grew a second group, wrapped onto a second
 * line inside a box that could not grow, and the first row was clipped off
 * the top of the page - the links were there and invisible. A bar that holds
 * a wrapping nav has to be allowed to become taller.
 */
.topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 20px;
    min-height: 52px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

/* The name of the site does not wrap mid-phrase. */
.brand {
    font-weight: 650;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    font-size: 15px;
}

.topnav { display: flex; gap: 18px; margin-right: auto; align-items: center; }
.topnav a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.topnav a:hover { color: var(--ink); }

.who { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.who form { margin: 0; }

.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 80px; }

h1 { font-size: 24px; margin: 0 0 6px; }
.muted { color: var(--muted); max-width: 60ch; }

/* --- flashes ----------------------------------------------------------- */

.flash { margin: 0; padding: 10px 20px; font-size: 14px; }
.flash-success { background: #ecfdf3; color: var(--good); }
.flash-error { background: #fef2f2; color: var(--over); }

.error {
    margin: 0;
    padding: 9px 11px;
    background: #fef2f2;
    color: var(--over);
    border-radius: var(--radius);
    font-size: 14px;
}

/* --- the signed-out card ---------------------------------------------- */

body.centered {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
}

.card {
    width: 100%;
    max-width: 380px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px;
}

.card-brand { font-size: 17px; margin: 0 0 18px; }
.card-title { font-size: 19px; margin: 0 0 8px; }
.afterword { margin: 18px 0 0; text-align: center; font-size: 14px; }

.stack { display: grid; gap: 14px; margin: 18px 0 0; }
.stack label { display: grid; gap: 5px; font-size: 14px; color: var(--muted); }

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
select {
    font: inherit;
    color: var(--ink);
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    width: 100%;
}

input:focus-visible, select:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

button[type="submit"]:not(.linkish) {
    font: inherit;
    font-weight: 550;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

/* --- the queue cards --------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 22px 0 0;
}

.statcard {
    display: grid;
    gap: 2px;
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
}

.statcard:hover { border-color: var(--accent); }
.statcard.is-live { border-left: 3px solid var(--accent); }

.stat { font-size: 30px; font-weight: 650; line-height: 1.1; }
.statlabel { color: var(--muted); font-size: 14px; }
.statmore { color: var(--accent); font-size: 13px; margin-top: 8px; }

.empty {
    margin: 26px 0 0;
    padding: 22px;
    background: var(--panel);
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
}

/* --- the triage queue -------------------------------------------------- */

.triage-head { margin-bottom: 18px; }
.hint { margin: 0 0 16px; font-size: 14px; }

.progress-line { margin: 4px 0 8px; color: var(--muted); font-size: 14px; }
.progress {
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    max-width: 480px;
}
.progress span { display: block; height: 100%; background: var(--good); }

.groups { list-style: none; margin: 0; padding: 0 0 120px; }

.group {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 8px;
}

.group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
}

/* A generous target: this is clicked hundreds of times in a sitting. */
.group-pick, .c-pick label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.group-pick input, .c-pick input { width: 17px; height: 17px; cursor: pointer; }

.group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding: 10px 0;
    font: inherit;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}

.caret { color: var(--muted); transition: transform .12s; display: inline-block; }
.group-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }

.group-name {
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--muted);
    flex-shrink: 0;
}

.group-n { min-width: 56px; text-align: right; }
.group-total { min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.group-dates { min-width: 86px; text-align: right; font-variant-numeric: tabular-nums; }

.is-out { color: var(--ink); }
.is-in { color: var(--good); }

.group-rows { border-top: 1px solid var(--line); }
.loading { margin: 0; padding: 14px 18px; color: var(--muted); font-size: 14px; }

table.rows { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rows td { padding: 2px 8px; border-bottom: 1px solid var(--ground); }
table.rows tr:last-child td { border-bottom: 0; }
table.rows tr:hover { background: var(--ground); }

.c-pick { width: 44px; padding: 0 !important; }
.c-date { width: 54px; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-desc { min-width: 160px; }
.c-acct { color: var(--muted); white-space: nowrap; }
.c-amt { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.c-act { width: 54px; text-align: right; }
.c-act a { font-size: 13px; }

.tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 550;
}

/* --- the bulk bar ------------------------------------------------------ */

.bulkbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 12px 20px;
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

.bulk-count { font-size: 14px; color: var(--muted); padding-bottom: 8px; }
.bulk-count strong { color: var(--ink); font-size: 16px; }
.bulk-sum { margin: 0 8px; font-variant-numeric: tabular-nums; }

.bulk-field { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.bulk-field select { min-width: 150px; padding: 7px 9px; }

.bulk-rule {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    padding-bottom: 8px;
    max-width: 280px;
}

/* The reason is stated rather than the control silently vanishing: a rule
   built from a subset could not tell the selected rows from the rest. */
.bulk-rule.is-off { color: var(--muted); font-style: italic; }

.bulk-go {
    font: inherit;
    font-weight: 550;
    margin-left: auto;
    padding: 9px 18px;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

/* --- the split editor -------------------------------------------------- */

.crumb { margin: 0 0 14px; font-size: 14px; }
.splitsum { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

table.splits { width: 100%; border-collapse: collapse; font-size: 14px; }
table.splits th {
    text-align: left;
    font-size: 12px;
    font-weight: 550;
    color: var(--muted);
    padding: 0 8px 6px;
}
table.splits td { padding: 3px 8px 3px 0; }
table.splits .amt { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
table.splits select { min-width: 130px; }

.splitactions { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; }

.secondary {
    font: inherit;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
}

.remainder { font-size: 14px; font-variant-numeric: tabular-nums; }
.remainder.is-ok { color: var(--good); font-weight: 550; }
.remainder.is-off { color: var(--warn); font-weight: 550; }

@media (max-width: 760px) {
    .group-dates, .c-acct { display: none; }
    .bulkbar { gap: 10px; }
    .bulk-go { width: 100%; margin-left: 0; }
}

/* --- panels, tables, import ------------------------------------------- */

.section { font-size: 17px; margin: 32px 0 10px; }
.small { font-size: 13px; }
.inline { display: inline; margin: 0; }
.inline-flash { border-radius: var(--radius); margin: 0 0 16px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 18px 0;
}

.row, .maprow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.maprow { margin-bottom: 14px; }

.row label, .maprow label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
}

.row input[type="text"], .row select, .maprow input, .maprow select { min-width: 150px; }
.row input[type="file"] { padding: 7px; }
.panel button[type="submit"] { align-self: flex-end; }
.panel .muted { margin: 12px 0 0; }

table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
table.plain th {
    text-align: left;
    font-size: 12px;
    font-weight: 550;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding: 0 10px 6px;
}
table.plain td { padding: 7px 10px; border-bottom: 1px solid var(--ground); }
table.plain.tight td { padding: 4px 10px; }
table.plain .num { text-align: right; font-variant-numeric: tabular-nums; }
table.plain .muted-cell { color: var(--muted); }

.scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tight-cards { margin-top: 16px; }
.tight-cards .stat { font-size: 24px; }

/* --- category admin ---------------------------------------------------- */

.tabs { display: flex; gap: 4px; margin: 14px 0 8px; }
.tabs a {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}
.tabs a.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.cats { list-style: none; margin: 18px 0 0; padding: 0; }

.cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 10px 3px 2px;
    border-bottom: 1px solid var(--ground);
}

.cat.is-parent {
    margin-top: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
}
.cat.is-child { background: var(--panel); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cat.is-child:last-child { border-radius: 0 0 8px 8px; }
.cat.is-parent .cat-edit input[name="name"] { font-weight: 650; }
.cat.is-child .cat-edit input[name="name"] { margin-left: 22px; }

/* Retired, not gone. Dimmed rather than hidden, because the whole point is
   that its history is still there to be looked at. */
.cat.is-retired { opacity: .55; }
.cat.is-add { opacity: .75; }
.cat.is-add:focus-within { opacity: 1; }

/* The arrows are submit buttons inside the row's form, so they have to beat
   the global submit styling - which is why the attribute selector is repeated
   here rather than just `.cat-move button`. */
.cat-move { display: flex; flex-direction: column; flex-shrink: 0; }

.cat-move button[type="submit"],
.cat-move button[type="submit"]:not(.linkish) {
    background: none;
    border: 0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--muted);
    cursor: pointer;
}

.cat-move button[type="submit"]:hover { color: var(--accent); background: var(--accent-soft); }

.cat-edit { display: flex; align-items: center; gap: 6px; margin: 0; flex: 1; min-width: 0; }
.cat-edit input[name="name"] { width: 100%; max-width: 280px; padding: 5px 8px; }
.cat-edit select { padding: 5px 8px; font-size: 13px; }
.cat-edit input[name="schedule_c_line"] { padding: 5px 6px; width: 64px; }

.small-btn { padding: 5px 10px !important; font-size: 13px; }

.cat-meta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.cat-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.cat-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.cat-actions form { margin: 0; }
.danger-link { font-size: 13px; color: var(--over); }

.choice { border-left: 3px solid var(--line); }
.choice-title { font-size: 16px; margin: 0 0 6px; }
.choice:first-of-type { border-left-color: var(--good); }

@media (max-width: 760px) {
    .cat { flex-wrap: wrap; }
    .cat-edit { flex-wrap: wrap; }
    .cat.is-child .cat-edit input[name="name"] { margin-left: 0; }
}

/* --- people, ledger, reimbursement ------------------------------------- */

.rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.btnish {
    padding: 8px 14px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 550;
}

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filters label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.filters select, .filters input[type="text"] { min-width: 120px; padding: 6px 8px; }

.checkline {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding-bottom: 7px;
}

.grow { flex: 1; }
.grow input { width: 100%; }
.tight-row { gap: 6px; margin-top: 8px; }
.is-dim { opacity: .55; }

.tag-good { background: #ecfdf3; color: var(--good); }

.inline-details { display: inline-block; }
.inline-details summary { cursor: pointer; color: var(--accent); font-size: 13px; }

/* The one-time password, big enough to read out loud from across a room. */
.password-panel { border-left: 3px solid var(--good); }
.spoken {
    margin: 8px 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 24px;
    letter-spacing: .02em;
    color: var(--ink);
    user-select: all;
}

/* --- the report table -------------------------------------------------- */

table.report { min-width: 620px; }
table.report th { white-space: nowrap; }
table.report td, table.report th { padding: 4px 12px; }

.sect + .sect { border-top: 2px solid var(--line); }

.secthead th {
    padding-top: 16px !important;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    text-transform: none;
    border-bottom: 1px solid var(--line);
}

.grouprow th { font-weight: 600; }
.grouprow td { font-weight: 500; }
.childname { font-weight: 400; color: var(--muted); padding-left: 28px !important; }

.totalrow th, .totalrow td {
    border-top: 1px solid var(--line);
    font-weight: 600;
    background: var(--ground);
}

.totalrow.is-unfiled th, .totalrow.is-unfiled td { color: var(--warn); }

.strong { font-weight: 650; }
.is-nil { color: var(--line); }
.is-owed { color: var(--warn); }

table.report tbody tr:hover td, table.report tbody tr:hover th { background: var(--accent-soft); }
.totalrow:hover td, .totalrow:hover th { background: var(--ground) !important; }

/* --- settle up --------------------------------------------------------- */

.alloc { text-align: right; font-variant-numeric: tabular-nums; padding: 4px 6px !important; }
tfoot .totalrow td { font-variant-numeric: tabular-nums; }

/* --- the family-view switch -------------------------------------------- */

.viewswitch { margin: 0; }

/* The badge states the mode you are in. Both are solid and unmistakable, so
   neither can be mistaken for the other at a glance - and the family one says
   only "Family View", never what is being left out. */
/* The attribute selector is repeated on purpose. `button[type="submit"]:not(
   .linkish)` up the file is (0,2,1) and sets a blue background; a bare
   `.viewadmin` is (0,1,0) and loses to it, which is exactly why the admin
   badge rendered blue and the family badge was never actually green. Matching
   the specificity and coming later is what makes these stick. */
button[type="submit"].viewon,
button[type="submit"].viewadmin {
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

button[type="submit"].viewon { background: var(--accent); }
button[type="submit"].viewadmin { background: var(--over); }

button[type="submit"].viewon:hover,
button[type="submit"].viewadmin:hover { filter: brightness(1.1); }

/* --- report drill-through ---------------------------------------------- */

/* Discoverable, which the first version was not: `color: inherit` plus
   `text-decoration: none` made these identical to plain text, so there was
   nothing to suggest a figure could be clicked at all. */
table.report td.num a {
    color: inherit;
    display: block;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
    cursor: pointer;
}

table.report td.num a:hover {
    color: var(--accent);
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

/* Rows that are out of the family's view. Owner-only - the template gates it,
   so this never renders in family view. */
.tag-hide { background: #fef3c7; color: var(--warn); }

/* The queue, as a line rather than a wall of cards. It is a footnote to the
   month's figures, and it is absent entirely when there is nothing in it. */
.queueline {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 0 16px;
    font-size: 14px;
}

.queueline a { color: var(--muted); text-decoration: none; }
.queueline a:hover { color: var(--accent); }
.queueline strong { color: var(--ink); }
.queueline a:hover strong { color: var(--accent); }

/* The amount, big enough to be the first thing read on a single transaction. */
.bigamount { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
a.btnish.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
a.btnish.secondary:hover { border-color: var(--accent); color: var(--accent); }

/* The settled people, demoted out of the table but still reachable. */
.squareline { margin-top: 14px; }
.squareline a { margin-right: 2px; }


/* ---- nav groups -------------------------------------------------------
   Relationships and Money are two halves of the same household, not eleven
   peers. The separator says so; without it the first links read as two more
   money screens.

   Each group wraps as a unit, so a narrow window breaks BETWEEN the halves
   rather than through the middle of one. */
.topnav { flex-wrap: wrap; row-gap: 4px; }
.navgroup { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.navsep {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1.1em;
    background: var(--line);
    margin: 0 2px;
}

@media (max-width: 760px) {
    .navsep { display: none; }
    .topnav { gap: 12px; }
    .navgroup { gap: 12px; }
}


/* ---- tidying up -------------------------------------------------------
   Grouped questions, not a list of rows. Each block is one decision. */
.tidy-group, .tidy-pair { padding: 1rem 1.1rem; }
.tidy-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tidy-people { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 .8rem; }
.tidy-person { display: flex; gap: .55rem; align-items: baseline; cursor: pointer; }
.tidy-person:hover { background: rgba(0, 0, 0, .03); }
.tidy-person span { display: block; }

.tidy-why { font-size: .9rem; margin-bottom: .6rem; }
.tidy-sides { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.tidy-side { flex: 1 1 15rem; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: .7rem .8rem; }

/* A weak reason has to LOOK weak, or every suggestion reads as equally
   confident and the screen stops being worth reading. */
.conf { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; }
.conf-sure { background: #e8f3ec; color: #2f7a4f; }
.conf-weak { background: #fdf3e0; color: #8a6a1c; }
.conf-none { background: #f1f1f1; color: #777; }

.row-sure td { background: rgba(47, 122, 79, .05); }
.row-weak td { background: rgba(201, 158, 64, .07); }


.tidy-result { font-size: .9rem; margin: 0 0 .7rem; }
.tidy-side form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.danger { color: #b4352e; }
.junk-list { margin: .5rem 0 1rem; padding-left: 1.1rem; }
.junk-list li { margin-bottom: .2rem; }


/* --- relationships ------------------------------------------------------
   The pages added in October 2026. Everything here leans on what the money
   screens already use - .panel, table.plain, .muted - and only adds what has
   no equivalent. */

.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

h2 { font-size: 17px; margin: 0 0 10px; }
.panel > h2:first-child { margin-top: 0; }

address { font-style: normal; line-height: 1.6; margin: 0 0 10px; }

/* The counters across the top of Relationships. */
.cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.card {
    flex: 0 1 auto;
    min-width: 120px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
a.card:hover { border-color: var(--accent); }
.card-n { display: block; font-size: 22px; font-weight: 650; color: var(--ink); }
.card-l { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.toolbar input[type="search"] { min-width: 15rem; }

.btn, .btn-quiet {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
}
.btn:hover, .btn-quiet:hover { border-color: var(--accent); }
.btn-quiet.is-on { background: var(--ink); color: var(--panel); border-color: var(--ink); }

.tagrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.tag {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: 13px;
    text-decoration: none;
    color: var(--ink);
}
.tag:hover { border-color: var(--accent); }
.tag-on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.tag-n { font-size: 11px; opacity: .7; }

.pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; }
.pill-private { background: #f3e8f8; color: #6b3a86; }

.note { padding: 9px 0; border-top: 1px solid var(--ground); }
.note:first-of-type { border-top: 0; }
.note p { margin: 3px 0 0; }

/* The year columns on the card grid read as a strip of symbols, so they are
   narrow, centred and tabular. */
th.yr, td.yr { text-align: center; width: 54px; }


/* The refusal sits under a pair, quieter than the action it declines. */
.tidy-refuse {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ground);
}
.tidy-refuse input[type="text"] { flex: 1 1 18rem; font-size: 13px; }
.tidy-refuse button { color: var(--muted); font-size: 13px; }
.tidy-refuse button:hover { color: var(--ink); }


.tidy-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tidy-actions .linkish { color: var(--muted); font-size: 13px; }
.tidy-actions .linkish:hover { color: var(--ink); }


/* ---- two-factor --------------------------------------------------------
   A code is read off a phone and typed in a hurry, and a run of six digits
   is easy to lose your place in. */
.code-input {
    font-size: 24px;
    letter-spacing: .32em;
    text-align: center;
    padding: 12px;
    font-variant-numeric: tabular-nums;
}

.qr { width: 200px; height: 200px; margin: 6px 0 16px; }

.secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    letter-spacing: .12em;
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 11px 14px;
    display: inline-block;
    word-break: break-all;
}

/* Recovery codes are written down or printed, so they are set wide and
   monospaced rather than packed in. */
.codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
}

.codes span {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 12px;
    letter-spacing: .06em;
}

.small { font-size: 13px; }