/*
 * 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 ----------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    height: 52px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.brand { font-weight: 650; color: var(--ink); text-decoration: none; }

.topnav { display: flex; gap: 18px; margin-right: auto; }
.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); }