/* ==========================================================================
   Nirakkoot admin :: Ledger
   --------------------------------------------------------------------------
   A quiet, dense, precise surface for club records and club money.

   Loaded after bootstrap.css and style.css, so it overrides both. style.css
   is shared with the public site and holds the birthday and anniversary
   banner styling used on the dashboard - nothing here touches it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Paper */
	--paper:            #FCFCFD;
	--paper-raised:     #FFFFFF;
	--paper-sunken:     #F7F8F8;
	--rule:             #E6E8EB;
	--rule-strong:      #CFD4D9;

	/* Ink */
	--ink:              #0B0D0E;
	--ink-2:            #5B6470;
	--ink-3:            #8A939E;

	/* Accent - one colour, used sparingly */
	--accent:           #0F5C57;
	--accent-deep:      #0A4340;
	--accent-wash:      #EDF4F3;

	/* Money. Muted on purpose: a ledger is not a dashboard. */
	--in:               #0F6E4F;
	--out:              #A33A2A;
	--owing:            #8A6100;
	--owing-wash:       #FBF5E9;

	/* Type */
	--ui:     "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--figure: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--serif:  "Newsreader", Georgia, "Times New Roman", serif;

	--t-xs:   0.6875rem;	/* 11px - eyebrows, table headers */
	--t-sm:   0.8125rem;	/* 13px - secondary text */
	--t-base: 0.875rem;	/* 14px - the working size */
	--t-md:   1rem;
	--t-lg:   1.25rem;	/* page titles */
	--t-xl:   1.75rem;	/* headline figures */

	/* Space */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;

	--radius:    4px;
	--radius-lg: 6px;
	--nav-w:     240px;
	--topbar-h:  56px;

	/* Bootstrap, brought into the system */
	--bs-body-font-family: var(--ui);
	--bs-body-font-size:   var(--t-base);
	--bs-body-color:       var(--ink);
	--bs-body-bg:          var(--paper);
	--bs-primary:          #0F5C57;
	--bs-primary-rgb:      15, 92, 87;
	--bs-link-color:       #0F5C57;
	--bs-link-hover-color: #0A4340;
	--bs-border-color:     #E6E8EB;
	--bs-border-radius:    4px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
	font-family: var(--ui);
	font-size: var(--t-base);
	line-height: 1.5;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

body.admin { padding-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ui);
	color: var(--ink);
	letter-spacing: -0.011em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }

/* One focus treatment everywhere, and it is always visible. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection { background: var(--accent-wash); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
.shell { min-height: 100vh; }

.shell__nav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--nav-w);
	display: flex;
	flex-direction: column;
	background: var(--paper-sunken);
	border-right: 1px solid var(--rule);
	z-index: 1040;
}

.shell__main {
	margin-left: var(--nav-w);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.shell__body { flex: 1 0 auto; padding: var(--s6) var(--s6) var(--s7); }

.shell__foot {
	flex-shrink: 0;
	padding: var(--s4) var(--s6);
	border-top: 1px solid var(--rule);
	color: var(--ink-3);
	font-size: var(--t-xs);
	display: flex;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
}
.shell__foot a { color: var(--ink-3); }
.shell__foot a:hover { color: var(--ink-2); }

/* Brand */
.brand {
	display: flex;
	align-items: center;
	height: var(--topbar-h);
	padding: 0 var(--s4);
	border-bottom: 1px solid var(--rule);
	flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand img { height: 30px; width: auto; }

/* Navigation */
.shell__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--s4) var(--s2); }

.navgroup {
	margin: var(--s5) var(--s3) var(--s2);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.navgroup:first-child { margin-top: var(--s1); }

.navlink {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: 0.4375rem var(--s3);
	margin-bottom: 1px;
	border-radius: var(--radius);
	color: var(--ink-2);
	font-size: var(--t-base);
	font-weight: 500;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.navlink:hover { background: rgba(11, 13, 14, 0.045); color: var(--ink); text-decoration: none; }
.navlink i { font-size: 1rem; width: 1.125rem; text-align: center; color: var(--ink-3); }
.navlink:hover i { color: var(--ink-2); }

.navlink.is-active {
	background: var(--accent-wash);
	color: var(--accent-deep);
	font-weight: 600;
}
.navlink.is-active i { color: var(--accent); }

/* Signed-in user */
.shell__user {
	flex-shrink: 0;
	border-top: 1px solid var(--rule);
	padding: var(--s3) var(--s4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
}
.shell__user .who {
	display: flex;
	align-items: center;
	gap: var(--s2);
	min-width: 0;
	color: var(--ink-2);
	font-size: var(--t-sm);
	font-weight: 500;
}
.shell__user .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell__user .signout {
	color: var(--ink-3);
	font-size: var(--t-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	flex-shrink: 0;
}
.shell__user .signout:hover { color: var(--out); text-decoration: none; }

/* Mobile top bar - only ever seen below lg */
.topbar {
	display: none;
	position: sticky;
	top: 0;
	height: var(--topbar-h);
	align-items: center;
	gap: var(--s3);
	padding: 0 var(--s4);
	background: var(--paper-raised);
	border-bottom: 1px solid var(--rule);
	z-index: 1030;
}
.topbar img { height: 26px; width: auto; }

.navtoggle {
	border: 1px solid var(--rule);
	background: var(--paper-raised);
	border-radius: var(--radius);
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	font-size: 1.125rem;
	padding: 0;
}

.navscrim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(11, 13, 14, 0.4);
	z-index: 1035;
}

/* --------------------------------------------------------------------------
   3b. Term switch
   --------------------------------------------------------------------------
   Sits above the page head on every Accounts page and says which year is on
   screen. Sunken rather than raised: it frames the page, it is not part of it.
   -------------------------------------------------------------------------- */
.termbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	flex-wrap: wrap;
	margin-bottom: var(--s5);
	padding: var(--s3) var(--s4);
	background: var(--paper-sunken);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

.termbar__pick { display: flex; align-items: center; gap: var(--s2); margin: 0; }

.termbar__pick label {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-3);
	margin: 0;
}

/* Wide enough for '2026-27' without the arrow crowding the text. */
.termbar__pick .form-select { width: auto; min-width: 9rem; }

.termbar__span {
	margin: 0;
	font-size: var(--t-sm);
	color: var(--ink-2);
	display: flex;
	align-items: center;
	gap: var(--s2);
}

@media (max-width: 575.98px) {
	.termbar { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   4. Page head
   -------------------------------------------------------------------------- */
.pagehead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
	padding-bottom: var(--s4);
	margin-bottom: var(--s5);
	border-bottom: 1px solid var(--rule);
}

.pagehead__eyebrow {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s1);
}

.pagehead h1 {
	font-size: var(--t-lg);
	font-weight: 600;
	margin: 0;
	letter-spacing: -0.015em;
}

.pagehead__note {
	color: var(--ink-2);
	font-size: var(--t-sm);
	margin: var(--s1) 0 0;
}

.pagehead__actions { display: flex; align-items: center; gap: var(--s2); }

/* --------------------------------------------------------------------------
   5. Panels and stat tiles
   -------------------------------------------------------------------------- */
.panel {
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
}
.panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--rule);
}
.panel__title { font-size: var(--t-base); font-weight: 600; margin: 0; }
.panel__body { padding: var(--s4); }

.stat {
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: var(--s4);
}
.stat__label {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s2);
}
.stat__figure {
	font-family: var(--figure);
	font-size: var(--t-xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.stat__note { font-size: var(--t-sm); color: var(--ink-2); margin: var(--s2) 0 0; }

/* --------------------------------------------------------------------------
   6. Ledger tables
   -------------------------------------------------------------------------- */
.ledgerwrap { overflow-x: auto; }

.ledger {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-base);
}

.ledger th {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: left;
	padding: var(--s2) var(--s3);
	border-bottom: 1px solid var(--rule-strong);
	white-space: nowrap;
}

.ledger td {
	padding: 0.5625rem var(--s3);
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.ledger tbody tr:hover td { background: var(--paper-sunken); }
.ledger tbody tr:last-child td { border-bottom: 0; }

.ledger tfoot td {
	padding: var(--s3);
	border-top: 1px solid var(--rule-strong);
	border-bottom: 0;
	font-weight: 600;
}

.ledger .num { text-align: right; white-space: nowrap; }
.ledger .date { white-space: nowrap; color: var(--ink-2); }

/* Figures, dates and references are set in the mono face so columns line up. */
.ledger .date,
.ledger .num,
.ledger .ref { font-family: var(--figure); font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.ledger .ref { color: var(--ink-3); }

/* Scoped to a row on purpose: a register marks a cancelled voucher on its
   <tbody>, and striking every cell in the group made the names and dates hard
   to read for no gain. */
.ledger tr.is-void td { color: var(--ink-3); text-decoration: line-through; }
.ledger tr.is-void td .badge-void { text-decoration: none; }

/* Row-level actions stay out of the way until the row is reached for, so the
   ledger reads as a ledger rather than a control panel. */
.rowaction {
	border: 1px solid var(--rule-strong);
	background: var(--paper-raised);
	border-radius: 3px;
	color: var(--ink-2);
	font-family: var(--ui);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0 0.375rem;
	margin-left: var(--s2);
	opacity: 0;
	transition: opacity 0.12s ease;
}
.ledger tr:hover .rowaction,
.rowaction:focus-visible { opacity: 1; }
/* Red is for the one that undoes an entry. Editing is ordinary work and reads
   in the accent, or the two sit side by side looking equally alarming. */
.rowaction:hover { border-color: var(--out); color: var(--out); }
.rowaction.editVoucher:hover { border-color: var(--accent); color: var(--accent); }

@media (hover: none) {
	.rowaction { opacity: 1; }
}

/* Registers group a voucher with its lines. Each voucher is its own tbody, so
   the rule falls between entries rather than between every row - the entry
   reads as one thing, which is how it was written. */
.register tbody { border-bottom: 1px solid var(--rule); }
.register tbody:last-of-type { border-bottom: 0; }
.register tbody td { border-bottom: 0; }

.register .vhead td { padding-top: var(--s3); }
.register .vhead .vno { font-family: var(--figure); font-weight: 600; color: var(--ink); }
/* Two actions and a voucher number will not sit on one line in this column, so
   they drop beneath the number rather than squeezing it. */
.register .vhead .vactions { display: block; margin-top: var(--s1); }
.register .vhead .vactions .rowaction { margin-left: 0; margin-right: var(--s1); }
.register .vhead .amt { font-weight: 600; }

.register .vrow td { padding-top: 0; padding-bottom: 0.1875rem; font-size: var(--t-sm); color: var(--ink-2); }
.register .vrow:last-child td { padding-bottom: var(--s3); }
.register .vrow .indent { padding-left: var(--s5); }

/* A qualifier after a name - the head a line sits under, a demand's details,
   an account code. Kept unscoped: these read the same wherever they appear,
   and the separator is what stops them running into the name. */
.vrow__head,
.vrow__note { color: var(--ink-3); font-size: var(--t-sm); }
.vrow__head::before { content: "\00b7"; margin: 0 0.375rem; }
.vrow__note::before { content: "\2014"; margin: 0 0.375rem; }

/* Who put an entry in, and when. Its own line, and quiet - it answers a
   question that is only asked occasionally, and must not crowd the entry. */
.stamp {
	display: block;
	font-family: var(--figure);
	font-size: var(--t-xs);
	color: var(--ink-3);
	margin-top: 2px;
	text-decoration: none;
}
.is-void .stamp { text-decoration: none; }

.register tbody:hover td { background: var(--paper-sunken); }

/* A cancelled entry stays visible - a register that hides entries cannot be
   checked - but nothing about it should read as live money. */
.register tbody.is-void td { color: var(--ink-3); }
.register tbody.is-void .vno,
.register tbody.is-void .amt { text-decoration: line-through; }
.register tbody.is-void .tag--void { text-decoration: none; }

/* --------------------------------------------------------------------------
   7. Money
   -------------------------------------------------------------------------- */
.money {
	font-family: var(--figure);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.money--in    { color: var(--in); }
.money--out   { color: var(--out); }
.money--owing { color: var(--owing); }
.money--nil   { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   8. Roster cards - members and users
   -------------------------------------------------------------------------- */
.roster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--s3);
}

/* Two colours need saying once. The swatches are the flag itself, at the size
   it appears on a card, so the key reads as the thing it explains. */
.rosterkey {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
	margin: 0 0 var(--s3);
	font-size: var(--t-xs);
	color: var(--ink-2);
}
.rosterkey__item { display: inline-flex; align-items: center; gap: var(--s2); }
.rosterkey__bar { width: 2px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.rosterkey__bar--month     { background: var(--accent); }
.rosterkey__bar--milestone { background: var(--owing); }

.rcard {
	position: relative;
	display: flex;
	gap: var(--s3);
	align-items: flex-start;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: var(--s4);
	transition: border-color 0.12s ease;
}
.rcard:hover { border-color: var(--rule-strong); }

.rcard__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--paper-sunken);
	flex-shrink: 0;
}

.rcard__initials {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--accent-wash);
	color: var(--accent-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: var(--t-base);
	flex-shrink: 0;
}

.rcard__body { min-width: 0; flex: 1; }
.rcard__name {
	font-size: var(--t-md);
	font-weight: 600;
	margin: 0 0 var(--s2);
	letter-spacing: -0.011em;
	padding-right: var(--s5);
}

.rcard__meta { list-style: none; margin: 0; padding: 0; }
.rcard__meta li {
	display: flex;
	align-items: center;
	gap: var(--s2);
	color: var(--ink-2);
	font-size: var(--t-sm);
	padding: 1px 0;
}
.rcard__meta i { color: var(--ink-3); width: 1rem; text-align: center; flex-shrink: 0; }
.rcard__meta .val { font-family: var(--figure); font-variant-numeric: tabular-nums; }
.rcard__meta a { color: var(--ink-2); }
.rcard__meta a:hover { color: var(--accent); }

/* Edit and remove sit out of the way until the card is reached for. */
.rcard__tools {
	position: absolute;
	top: var(--s3);
	right: var(--s3);
	display: flex;
	gap: var(--s1);
	opacity: 0;
	transition: opacity 0.12s ease;
}
.rcard:hover .rcard__tools,
.rcard:focus-within .rcard__tools { opacity: 1; }

.rcard__tool {
	width: 28px;
	height: 28px;
	border-radius: var(--radius);
	border: 1px solid var(--rule);
	background: var(--paper-raised);
	color: var(--ink-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8125rem;
}
.rcard__tool:hover { background: var(--paper-sunken); color: var(--ink); text-decoration: none; }
.rcard__tool--danger:hover { border-color: var(--out); color: var(--out); }

/* Two things on a card are worth noticing, and they are different questions:
   which year this is, and how soon it falls. Gold answers the first - a year
   landing on a multiple of five, marked on the year itself. Green answers the
   second - a date falling in the month we are in, marked on the date itself.
   Marking each on the part it speaks about keeps a card carrying both
   readable. The flag down the edge only says there is something here, so it
   takes the gold when a milestone is among it. Outlining the whole card marks
   half the roll in a club this size, which marks nothing. */
.rcard.is-thismonth .rcard__flag,
.rcard.is-milestone .rcard__flag {
	position: absolute;
	left: -1px;
	top: var(--s4);
	bottom: var(--s4);
	width: 2px;
	border-radius: 2px;
}
.rcard.is-thismonth .rcard__flag { background: var(--accent); }
.rcard.is-milestone .rcard__flag { background: var(--owing); }

.rcard__meta .val.is-thismonth {
	background: var(--accent-wash);
	color: var(--accent-deep);
	font-weight: 600;
	border-radius: var(--radius);
	padding: 0 var(--s1);
	margin: 0 calc(var(--s1) * -1);
}

/* Touch pointers cannot hover, so the tools stay put. */
@media (hover: none) {
	.rcard__tools { opacity: 1; }
}

/* --------------------------------------------------------------------------
   9. Tags
   -------------------------------------------------------------------------- */
.tag {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	padding: 0.0625rem 0.4375rem;
	border-radius: 3px;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--paper-sunken);
	color: var(--ink-2);
	border: 1px solid var(--rule);
}
.tag--accent { background: var(--accent-wash); color: var(--accent-deep); border-color: transparent; }
.tag--owing  { background: var(--owing-wash); color: var(--owing); border-color: transparent; }
.tag--void   { background: #FBEDEB; color: var(--out); border-color: transparent; }
/* Gilds the milestone year on a roster card. It has to sit with the other
   modifiers rather than up beside the card rules: same specificity as .tag, so
   anything declared before .tag simply loses to it. */
.tag--milestone { background: var(--owing-wash); color: var(--owing); border-color: #EBDCBF; }

/* --------------------------------------------------------------------------
   10. Forms and buttons
   -------------------------------------------------------------------------- */
.form-label {
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--ink-2);
	margin-bottom: var(--s1);
}

.form-control,
.form-select {
	font-size: var(--t-base);
	border-color: var(--rule-strong);
	border-radius: var(--radius);
	padding: 0.4375rem var(--s3);
	color: var(--ink);
	background-color: var(--paper-raised);
}
.form-control:focus,
.form-select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-wash);
}
.form-control::placeholder { color: var(--ink-3); }

/* Anything that holds a number is set in the mono face. */
input[type="number"],
input[type="date"],
input[type="tel"],
.form-control--figure {
	font-family: var(--figure);
	font-variant-numeric: tabular-nums;
}

.form-hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s1); }

.btn {
	font-size: var(--t-base);
	font-weight: 500;
	border-radius: var(--radius);
	padding: 0.4375rem 0.875rem;
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
}

.btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.btn-outline-secondary {
	border-color: var(--rule-strong);
	color: var(--ink-2);
	background: var(--paper-raised);
}
.btn-outline-secondary:hover { background: var(--paper-sunken); border-color: var(--rule-strong); color: var(--ink); }

.btn-danger-quiet {
	border: 1px solid var(--rule-strong);
	background: var(--paper-raised);
	color: var(--out);
}
.btn-danger-quiet:hover { background: #FBEDEB; border-color: var(--out); color: var(--out); }

.btn-sm { font-size: var(--t-sm); padding: 0.25rem 0.625rem; }

/* --------------------------------------------------------------------------
   11. Modals and toasts
   -------------------------------------------------------------------------- */
.modal-content {
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 48px rgba(11, 13, 14, 0.16);
}
.modal-header {
	padding: var(--s4);
	border-bottom: 1px solid var(--rule);
}
.modal-title { font-size: var(--t-md); font-weight: 600; }
.modal-body { padding: var(--s4); }

.toast { border: 1px solid var(--rule); border-radius: var(--radius); font-size: var(--t-base); }

.alert { border-radius: var(--radius); font-size: var(--t-sm); padding: var(--s3); border-width: 1px; }
.alert-danger { background: #FBEDEB; border-color: #F0D0CB; color: #7E2C1F; }
.alert-success { background: #EDF4F1; border-color: #C9E0D6; color: #0B5138; }

/* --------------------------------------------------------------------------
   12. Empty states - an invitation, not a blank page
   -------------------------------------------------------------------------- */
.empty {
	border: 1px dashed var(--rule-strong);
	border-radius: var(--radius-lg);
	padding: var(--s7) var(--s5);
	text-align: center;
	background: var(--paper-raised);
}
.empty i { font-size: 1.5rem; color: var(--ink-3); display: block; margin-bottom: var(--s3); }
.empty h2 { font-size: var(--t-md); font-weight: 600; margin: 0 0 var(--s2); }
.empty p { color: var(--ink-2); margin: 0 auto var(--s4); max-width: 34rem; font-size: var(--t-sm); }
.empty p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   13. Dashboard
   -------------------------------------------------------------------------- */
/* Greetings.
   What is shown here is the file itself, at 1080x1720, so the convener is
   never guessing how it will look once it reaches the club group. */
.greetings {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--s5);
	align-items: start;
}

.greeting {
	margin: 0;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: var(--s3);
}

.greeting__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	margin-bottom: var(--s3);
}
.greeting__when {
	font-family: var(--figure);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

.greeting__art {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	background: var(--paper-sunken);
}

.greeting__tools { display: flex; gap: var(--s2); margin-top: var(--s3); }
.greeting__tools .btn { flex: 1 1 auto; justify-content: center; }

/* --------------------------------------------------------------------------
   13b. Term ribbon
   --------------------------------------------------------------------------
   The club's year runs July to June, so the books do too. Twelve cells, one
   per month, each showing that month's net movement against a shared scale -
   up for a month that gained, down for one that spent. It sits above every
   accounts page as a reminder of where in the year you are.
   -------------------------------------------------------------------------- */
.ribbon {
	display: flex;
	align-items: stretch;
	gap: 1px;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: var(--s3);
	margin-bottom: var(--s5);
	overflow-x: auto;
}

.ribbon__cell {
	flex: 1 1 0;
	min-width: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 2px;
	border-radius: var(--radius);
}
.ribbon__cell.is-current { background: var(--accent-wash); }

/* Two equal halves either side of a hairline: gains rise, spending falls. */
.ribbon__plot {
	width: 100%;
	height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.ribbon__plot::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 50%;
	height: 1px;
	background: var(--rule);
}
.ribbon__half { height: 50%; display: flex; }
.ribbon__half--up   { align-items: flex-end; }
.ribbon__half--down { align-items: flex-start; }

.ribbon__bar {
	width: 100%;
	max-width: 14px;
	margin: 0 auto;
	height: var(--h, 0%);
	min-height: 0;
	border-radius: 1px;
	position: relative;
	z-index: 1;
}
.ribbon__bar--in  { background: var(--in); }
.ribbon__bar--out { background: var(--out); }

.ribbon__label {
	margin-top: var(--s2);
	font-family: var(--figure);
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--ink-3);
	white-space: nowrap;
}
.ribbon__cell.is-current .ribbon__label { color: var(--accent-deep); font-weight: 600; }
.ribbon__cell.is-future .ribbon__label { color: #C2C8CF; }

.ribbon__close {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: var(--s4);
	margin-left: var(--s3);
	border-left: 1px solid var(--rule);
	min-width: 9rem;
}
.ribbon__close .k {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.ribbon__close .v {
	font-family: var(--figure);
	font-size: 1.25rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   13c. Filter bar
   -------------------------------------------------------------------------- */
.filters {
	display: flex;
	align-items: flex-end;
	gap: var(--s3);
	flex-wrap: wrap;
	padding: var(--s3) var(--s4);
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	border-bottom: 0;
}
.filters .f { display: flex; flex-direction: column; gap: 2px; }
.filters .f > label {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.filters .form-control,
.filters .form-select { font-size: var(--t-sm); padding: 0.3125rem var(--s2); }
.filters .f--grow { flex: 1 1 12rem; min-width: 10rem; }
.filters .f--grow .form-control { width: 100%; }
.filters__go { margin-left: auto; display: flex; gap: var(--s2); }

.panel--flush { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* --------------------------------------------------------------------------
   13d. Voucher entry
   -------------------------------------------------------------------------- */
.vlines { width: 100%; border-collapse: collapse; }
.vlines th {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: left;
	padding: 0 var(--s2) var(--s1);
	white-space: nowrap;
}
.vlines th.num { text-align: right; }
.vlines td { padding: 0 var(--s2) var(--s2); vertical-align: top; }
.vlines .form-control,
.vlines .form-select { font-size: var(--t-sm); padding: 0.3125rem var(--s2); }
.vlines .amount { text-align: right; }

.vline__drop {
	border: 0;
	background: none;
	color: var(--ink-3);
	padding: 0.3125rem var(--s1);
	line-height: 1;
}
.vline__drop:hover { color: var(--out); }
.vline__drop[disabled] { opacity: 0.25; cursor: default; }
.vline__drop[disabled]:hover { color: var(--ink-3); }

.vtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s3) var(--s2) 0;
	margin-top: var(--s2);
	border-top: 1px solid var(--rule-strong);
}
.vtotal .k { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.vtotal .v {
	font-family: var(--figure);
	font-size: var(--t-lg);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.vnote { display: none; }
.vnote.is-shown { display: block; }

/* Which entry is being corrected. Shown only while editing - the number is
   what the club calls this voucher, so it names what is about to change. */
.voucherRef { display: none; }
.voucherRef.is-shown {
	display: inline-block;
	margin: 0 0 var(--s4);
	padding: 0.0625rem 0.4375rem;
	border-radius: 3px;
	background: var(--accent-wash);
	color: var(--accent-deep);
	font-family: var(--figure);
	font-size: var(--t-sm);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   13e. Subscriptions
   -------------------------------------------------------------------------- */
.viewtabs {
	display: flex;
	gap: var(--s1);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--s5);
}
.viewtab {
	padding: var(--s2) var(--s3);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--ink-2);
	font-size: var(--t-base);
	font-weight: 500;
}
.viewtab:hover { color: var(--ink); text-decoration: none; }
.viewtab.is-active { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 600; }

/* Dr and Cr sit alongside the figure without competing with it. */
.drcr {
	font-family: var(--figure);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--ink-3);
	margin-left: 0.125rem;
}

.memberopen { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: var(--s2); }
.memberopen:hover { color: var(--accent-deep); text-decoration: none; }
.memberopen i { color: var(--ink-3); font-size: 0.75rem; }
.ledger tr.is-open td { background: var(--accent-wash); }
.ledger tr.is-open .memberopen,
.ledger tr.is-open .memberopen i { color: var(--accent-deep); }

.splitrow td { padding: 0 !important; background: var(--paper-sunken); }
.split { padding: var(--s4); }
.split__title {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s3);
}
.split .ledger { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); }
.split .ledger th, .split .ledger td { padding-left: var(--s3); padding-right: var(--s3); }
.split .ledger tbody tr:hover td { background: transparent; }

/* Choosing what a demand is for. */
.choice { display: flex; gap: var(--s3); flex-wrap: wrap; }
.choice__opt {
	flex: 1 1 14rem;
	display: flex;
	align-items: flex-start;
	gap: var(--s3);
	padding: var(--s3);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	cursor: pointer;
}
.choice__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice__opt span { display: flex; flex-direction: column; font-size: var(--t-sm); color: var(--ink-2); }
.choice__opt strong { color: var(--ink); font-size: var(--t-base); }

/* The roll, one line per member. */
.roll { border: 1px solid var(--rule); border-radius: var(--radius); }
.roll__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s2) var(--s3);
	border-bottom: 1px solid var(--rule);
	background: var(--paper-sunken);
	border-radius: var(--radius) var(--radius) 0 0;
}
.roll__all { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.roll__count { font-family: var(--figure); font-size: var(--t-xs); color: var(--ink-2); }

.roll__list { max-height: 20rem; overflow-y: auto; }

.rollrow {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: 0.3125rem var(--s3);
	border-bottom: 1px solid var(--rule);
	cursor: pointer;
}
.rollrow:last-child { border-bottom: 0; }
.rollrow__name { flex: 1 1 auto; font-size: var(--t-sm); }
.rollrow .rollAmount { width: 7rem; flex: 0 0 auto; text-align: right; font-size: var(--t-sm); padding: 0.1875rem var(--s2); }
.rollrow.is-off { color: var(--ink-3); }
.rollrow.is-off .rollAmount { opacity: 0.4; }

.roll__foot { margin: var(--s2) 0 0; }

/* --------------------------------------------------------------------------
   13f. Help - the same page in two languages
   -------------------------------------------------------------------------- */

/*
* Both languages are printed into the page and one is hidden, so switching
* costs nothing and works offline. The language buttons carry lang attributes
* of their own and have to survive whichever way the switch is set - a reader
* looking for Malayalam should not need English to find it.
*/
[data-help-lang="en"] [lang="ml"]:not(.langpick__opt) { display: none; }
[data-help-lang="ml"] [lang="en"]:not(.langpick__opt) { display: none; }

/* Public Sans has no Malayalam. Noto carries it, and the script sits taller
   than Latin, so it is given the room to breathe. */
[lang="ml"] {
	font-family: "Noto Sans Malayalam", "Public Sans", sans-serif;
	line-height: 1.75;
}

.langpick {
	display: inline-flex;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	overflow: hidden;
}
.langpick__opt {
	border: 0;
	background: var(--paper-raised);
	color: var(--ink-2);
	font-family: var(--ui);
	font-size: var(--t-sm);
	font-weight: 600;
	padding: 0.25rem 0.6875rem;
}
.langpick__opt + .langpick__opt { border-left: 1px solid var(--rule); }
.langpick__opt:hover { background: var(--paper-sunken); color: var(--ink); }
.langpick__opt.is-active { background: var(--accent); color: #fff; }
.langpick__opt[lang="ml"] { font-family: "Noto Sans Malayalam", var(--ui); }

/* Contents beside the text on a wide screen, above it on a narrow one. */
.helpwrap { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: start; }

.helpnav {
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: var(--s4);
}
.helpnav__title {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 var(--s3);
}
.helpnav ol { margin: 0; padding: 0 0 0 1.25rem; }
.helpnav li { font-size: var(--t-sm); padding: 0.1875rem 0; color: var(--ink-3); }
.helpnav a { color: var(--ink-2); }
.helpnav a:hover { color: var(--accent); }

.helpsec {
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: var(--s5);
	margin-bottom: var(--s4);
	scroll-margin-top: var(--s4);
}
.helpsec__head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); }
.helpsec__num {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--accent-wash);
	color: var(--accent-deep);
	font-family: var(--figure);
	font-size: var(--t-sm);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}
.helpsec h2 { font-size: var(--t-md); font-weight: 600; margin: 0; letter-spacing: -0.011em; }
.helpsec__lede { color: var(--ink-2); font-size: var(--t-sm); margin: var(--s1) 0 0; }

.helpsec__body p { margin: 0 0 var(--s3); max-width: 46rem; }
.helpsec__body p:last-child { margin-bottom: 0; }
.helpsec__body strong { font-weight: 600; color: var(--ink); }

.helpsteps, .helppoints { margin: 0 0 var(--s3); padding-left: 1.375rem; max-width: 46rem; }
.helpsteps li, .helppoints li { padding: 0.1875rem 0; }
.helpsteps { counter-reset: none; }

.helpdefs { margin: 0 0 var(--s3); max-width: 46rem; }
.helpdefs dt {
	font-weight: 600;
	color: var(--ink);
	margin-top: var(--s3);
}
.helpdefs dt:first-child { margin-top: 0; }
.helpdefs dd { margin: 0.125rem 0 0; color: var(--ink-2); }

.helpfoot {
	color: var(--ink-3);
	font-size: var(--t-sm);
	margin: 0;
	padding: 0 var(--s5);
	max-width: 46rem;
}

@media (min-width: 62em) {
	.helpwrap { grid-template-columns: 15rem 1fr; }
	.helpnav { position: sticky; top: var(--s4); }
}

/* --------------------------------------------------------------------------
   14. Sign in
   -------------------------------------------------------------------------- */
.signin { min-height: 100vh; display: grid; grid-template-columns: 1fr; }

.signin__brand {
	display: none;
	background: var(--ink);
	color: #fff;
	padding: var(--s7);
	flex-direction: column;
	justify-content: space-between;
}
.signin__mark {
	margin: 0;
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #fff;
}
.signin__brand h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 var(--s3);
	max-width: 18ch;
}
.signin__brand p { color: rgba(255, 255, 255, 0.62); margin: 0; max-width: 34ch; }
.signin__brand .foot { color: rgba(255, 255, 255, 0.4); font-size: var(--t-xs); }

.signin__form {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s5);
	background: var(--paper);
}
.signin__card { width: 100%; max-width: 22rem; }
.signin__card .logo { height: 34px; width: auto; margin-bottom: var(--s5); }
.signin__card h2 { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s1); }
.signin__card .lede { color: var(--ink-2); font-size: var(--t-sm); margin: 0 0 var(--s5); }
.signin__card .btn { width: 100%; justify-content: center; margin-top: var(--s2); }

@media (min-width: 992px) {
	.signin { grid-template-columns: 4fr 5fr; }
	.signin__brand { display: flex; }
}

/* --------------------------------------------------------------------------
   15. Below lg - the sidebar becomes a drawer
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.shell__nav {
		transform: translateX(-100%);
		transition: transform 0.18s ease;
		box-shadow: 0 0 40px rgba(11, 13, 14, 0.18);
	}
	.shell__nav.is-open { transform: translateX(0); }
	.shell__main { margin-left: 0; }
	.shell__body { padding: var(--s4) var(--s4) var(--s6); }
	.shell__foot { padding: var(--s4); }
	.topbar { display: flex; }
	.navscrim.is-open { display: block; }
	.pagehead { align-items: flex-start; flex-direction: column; gap: var(--s3); }
	.roster { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   15b. Phone
   --------------------------------------------------------------------------
   On a narrow screen the term ribbon put cash in hand off the right-hand edge,
   behind a sideways scroll - the one figure most likely to be checked on a
   phone. It goes on top, and the months wrap underneath.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.ribbon {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: var(--s2);
	}
	.ribbon__cell { min-width: 0; flex-basis: 12.5%; }
	.ribbon__plot { height: 32px; }

	.ribbon__close {
		order: -1;
		width: 100%;
		min-width: 0;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--s3);
		padding: 0 0 var(--s3);
		margin: 0 0 var(--s2);
		border-left: 0;
		border-bottom: 1px solid var(--rule);
	}

	/* Buttons in a page header should sit on one line, not stack into a tower. */
	.pagehead__actions { flex-wrap: wrap; width: 100%; }
	.pagehead__actions .btn { flex: 1 1 auto; justify-content: center; }

	/* Filters read better stacked than squeezed side by side. */
	.filters { flex-direction: column; align-items: stretch; }
	.filters .f, .filters .f--grow { width: 100%; }
	.filters__go { margin-left: 0; }
	.filters__go .btn { flex: 1 1 auto; justify-content: center; }

	/* A demand line still needs its name readable next to the amount. */
	.rollrow .rollAmount { width: 5.5rem; }

	.viewtabs { overflow-x: auto; }
	.viewtab { white-space: nowrap; }

	/* ----------------------------------------------------------------------
	   Cash book as cards
	   ----------------------------------------------------------------------
	   Seven columns cannot hold their alignment on a phone, and sliding a
	   ledger sideways to read one entry is miserable. Each entry becomes a
	   card instead: when it happened and against whom, then the amount and
	   the balance it left behind. Same rows, same order, same running
	   balance - only the shape changes.
	   ---------------------------------------------------------------------- */
	.cashbook,
	.cashbook tbody,
	.cashbook tfoot,
	.cashbook tr,
	.cashbook td { display: block; width: auto; }

	.cashbook thead { display: none; }
	.cashbook .ledgerwrap { overflow-x: visible; }

	.cashbook tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"date  ref"
			"part  part"
			"note  note"
			"amt   bal";
		gap: 2px var(--s3);
		padding: var(--s3) 0;
		border-bottom: 1px solid var(--rule);
	}
	.cashbook tbody tr:last-child { border-bottom: 0; }
	.cashbook tbody tr:hover td { background: none; }

	.cashbook td { border-bottom: 0; padding: 0; }

	.cashbook .c-date { grid-area: date; }
	.cashbook .c-ref  { grid-area: ref; text-align: right; }
	.cashbook .c-part { grid-area: part; font-weight: 600; color: var(--ink); }
	.cashbook .c-note { grid-area: note; color: var(--ink-2); font-size: var(--t-sm); }
	.cashbook .c-bal  { grid-area: bal; text-align: right; }

	/* Both money columns share one slot; a line is a receipt or a payment,
	   never both, so the empty one steps aside. */
	.cashbook .c-amt { grid-area: amt; text-align: left; }
	.cashbook .c-amt.money--nil { display: none; }

	.cashbook .c-note:empty { display: none; }

	/* The figures need saying out loud now the column headers are gone. */
	.cashbook .c-amt::before,
	.cashbook .c-bal::before {
		content: attr(data-label) " ";
		font-family: var(--ui);
		font-size: var(--t-xs);
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--ink-3);
		margin-right: var(--s1);
	}

	.cashbook tfoot tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px var(--s3);
		padding-top: var(--s3);
		border-top: 1px solid var(--rule-strong);
	}
	.cashbook tfoot td { text-align: right; }
	.cashbook tfoot td:first-child { text-align: left; grid-column: 1 / -1; }
}

/* Receipts and payments, side by side the way the account is written. */
.rp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.rp__side .ledger { width: 100%; }
@media (max-width: 767.98px) {
	.rp { grid-template-columns: 1fr; }
}

/* A month not yet reached, or a head nothing has moved through: present so the
   reader can see it was not left out, quiet so it does not read as data. */
.is-ahead td { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   16. Print - every register and report leaves as a clean statement
   -------------------------------------------------------------------------- */
.printhead { display: none; }

@media print {
	@page { margin: 14mm; }

	.shell__nav,
	.topbar,
	.navscrim,
	.shell__foot,
	.pagehead,
	.pagehead__actions,
	.viewtabs,
	.panel__head,
	.no-print { display: none !important; }

	.shell,
	.shell__main { margin-left: 0; display: block; }
	.shell__body { padding: 0; }

	body { background: #fff; color: #000; font-size: 10pt; }

	/* On paper the sheet has to say what it is and where it came from. */
	.printhead {
		display: block;
		margin-bottom: 8mm;
		padding-bottom: 3mm;
		border-bottom: 1px solid #000;
	}
	.printhead__club {
		font-family: var(--figure);
		font-size: 8pt;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}
	.printhead__title {
		font-family: var(--serif);
		font-size: 17pt;
		font-weight: 400;
		margin: 1mm 0 0;
	}
	.printhead__period { margin: 1mm 0 0; font-size: 9pt; }
	.printhead__stamp { margin: 0; font-size: 8pt; color: #555; }

	.panel, .stat, .ribbon { border: 0; background: none; }
	.panel__body { padding: 0; }

	.ledger { font-size: 9pt; width: 100%; }
	.ledger th { border-bottom: 1px solid #000; color: #000; }
	.ledger td { border-bottom: 1px solid #ddd; }
	.ledger tfoot td { border-top: 1px solid #000; }
	.ledger tbody tr { page-break-inside: avoid; }
	.ledger thead { display: table-header-group; }
	.ledger tbody tr:hover td { background: none; }

	/* Colour does not survive a mono printer; the column already says which
	   way the money went. */
	.money--in, .money--out, .money--owing, .money--nil, .drcr { color: #000; }
	.is-ahead td { color: #888; }

	/* Help prints as a handbook: no cards, and a section is not split across
	   two sheets if it will fit on one. Only the chosen language prints - the
	   rule that hides the other is not screen-only. */
	.helpwrap { display: block; }
	.helpsec {
		border: 0;
		border-radius: 0;
		padding: 0;
		margin-bottom: 6mm;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.helpsec__num { border: 1px solid #000; background: none; color: #000; }
	.helpsec__lede { color: #333; }
	.helpdefs dd, .helpsec__body p { color: #000; }
	.helpfoot { padding: 0; color: #555; }

	.tag { border: 0; background: none; padding: 0; color: #555; }
	a { color: #000; text-decoration: none; }
	.rp { gap: 8mm; }
}