/* The fonts are files of the app, so a page loads no file from a different
   host (docs/operations.md, "Fonts"). The `src` of a rule names a file of
   `fonts/` by its name in the asset bundle: its stem, the first 16 characters
   of its SHA-256, and `.woff2`. Manrope and Fraunces are variable fonts. One
   of their files has one rule for each weight that this style sheet uses, as
   the style sheet of Google Fonts had. A rule with a range of weights changes
   the look of `font-weight: 650`, which shows the weight 700 with these rules. */
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("dm-mono-400-latin-ext-a52e19ebe0398c9c.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("dm-mono-400-latin-e1896b13b2b1bb11.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("dm-mono-500-latin-ext-8711f938c3f04f91.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("dm-mono-500-latin-9964608a849396bd.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Fraunces;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fraunces-latin-ext-a2930b27d13a228b.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Fraunces;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fraunces-latin-7234ed860a9cc830.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Fraunces;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fraunces-latin-ext-a2930b27d13a228b.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Fraunces;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fraunces-latin-7234ed860a9cc830.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("manrope-latin-ext-3911b66d9f2e005a.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("manrope-latin-a30ddcd349703aff.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("manrope-latin-ext-3911b66d9f2e005a.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("manrope-latin-a30ddcd349703aff.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("manrope-latin-ext-3911b66d9f2e005a.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("manrope-latin-a30ddcd349703aff.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("manrope-latin-ext-3911b66d9f2e005a.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("manrope-latin-a30ddcd349703aff.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("manrope-latin-ext-3911b66d9f2e005a.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("manrope-latin-a30ddcd349703aff.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color: #17263a;
	background: #f6f3ec;
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	font-synthesis: none;
	/* The muted text. Its contrast is 4.5:1 or more on each ground that it
	   has: the page, a card, and the chosen row of a list. */
	--muted: #5b6979;
	/* A link to a part of a page (`#…`) opens with this room above the part.
	   It is the only offset: a `scroll-margin-top` of a part adds to it. */
	scroll-padding-top: 1rem;
}
* {
	box-sizing: border-box;
}
body {
	min-width: 320px;
	margin: 0;
	background:
		radial-gradient(circle at 80% -10%, #dcece2 0, transparent 31rem), #f6f3ec;
}
a {
	color: #176b50;
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover {
	color: #0d4938;
}
button,
input,
select {
	font: inherit;
}
button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 0.72rem 1rem;
	background: #16735a;
	color: #fff;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition:
		transform 0.16s ease,
		background 0.16s ease,
		box-shadow 0.16s ease;
}
button:hover:not(:disabled),
.button:hover {
	background: #0e5945;
	color: #fff;
	box-shadow: 0 6px 14px #0b402a22;
	transform: translateY(-1px);
}
button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}
button.secondary {
	border-color: #c9d0cc;
	background: #fffdf9;
	color: #17263a;
}
button.secondary:hover:not(:disabled) {
	border-color: #aeb8b2;
	background: #eef0ea;
	color: #17263a;
	box-shadow: none;
}
button.secondary.danger {
	border-color: #e3c1bd;
	color: #a83232;
}
button.secondary.danger:hover:not(:disabled) {
	border-color: #b3433d;
	background: #f8e4e2;
	color: #8f302d;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 3px solid #efb451;
	outline-offset: 3px;
}
.app-shell {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
}
.app-shell > nav {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.5rem 1rem;
	background: #10263d;
	color: #d7e5e8;
}
.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.35rem 0.55rem;
	color: #fff;
	font-family: Fraunces, Georgia, serif;
	font-size: 1.35rem;
	letter-spacing: -0.04em;
	text-decoration: none;
}
.brand:hover {
	color: #fff;
}
.brand-mark {
	display: grid;
	width: 2rem;
	height: 2rem;
	place-items: center;
	border-radius: 8px;
	background: #cbe7d7;
	color: #10263d;
	font-family: Manrope, sans-serif;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0;
}
.nav-links {
	display: grid;
	gap: 0.25rem;
}
.nav-links a {
	padding: 0.7rem 0.8rem;
	border-radius: 8px;
	color: #bbcad1;
	text-decoration: none;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
	background: #1b3a53;
	color: #fff;
}
.logout {
	margin-top: auto;
	border-color: #3e596d;
	background: transparent;
	color: #d8e4e7;
}
.logout:hover:not(:disabled) {
	background: #1b3a53;
}
/* The e-mail of the user. The muted color of the page is too dark for the menu. */
.app-shell > nav > .muted {
	color: #a9bac2;
	overflow-wrap: anywhere;
}
.content {
	min-width: 0;
	padding: clamp(1.5rem, 4vw, 4rem);
}
main {
	max-width: 1260px;
	margin: 0 auto;
}
h1,
h2,
h3,
p {
	margin-top: 0;
}
h1,
h2 {
	font-family: Fraunces, Georgia, serif;
	letter-spacing: -0.045em;
}
h1 {
	max-width: 17ch;
	margin-bottom: 0.7rem;
	font-size: clamp(2.25rem, 5vw, 4.8rem);
	line-height: 1;
}
/* A long name as the heading of a page: the shop of a receipt can have 200
   characters. The heading is smaller, and the full name stays in view. */
h1.long-title {
	max-width: 46ch;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.15;
	overflow-wrap: anywhere;
}
h2 {
	margin-top: 2.75rem;
	margin-bottom: 0.65rem;
	font-size: clamp(1.55rem, 3vw, 2.2rem);
}
h3 {
	margin-bottom: 0.4rem;
	font-size: 0.95rem;
}
p {
	max-width: 68ch;
	line-height: 1.65;
}
.eyebrow,
.coverage {
	color: #176b50;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.hero {
	position: relative;
	overflow: hidden;
	padding: clamp(1.7rem, 5vw, 4.5rem);
	border: 1px solid #b8d4c5;
	border-radius: 22px;
	background: #dcece2;
}
.hero::after {
	position: absolute;
	right: -3rem;
	bottom: -6rem;
	width: 20rem;
	height: 20rem;
	border: 2.3rem solid #bedcc9;
	border-radius: 50%;
	content: "";
}
.hero > * {
	position: relative;
	z-index: 1;
}
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: center;
	margin-top: 1.3rem;
}
/* The page after a bank connection (`pages/callback.rs`): a link next to the
   button is as high as the button. */
.bank-result .actions a:not(.button) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.card {
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	padding: 1.15rem;
	background: #fffdf9;
	box-shadow: 0 2px 4px #17263a08;
}
.card h3 {
	color: #526171;
	font-weight: 700;
	/* A name with no space stays in its card. */
	overflow-wrap: anywhere;
}
.value {
	margin: 0.4rem 0;
	color: #142b42;
	font-family: Fraunces, Georgia, serif;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.045em;
}
small {
	color: var(--muted);
	line-height: 1.45;
}
.card small {
	color: var(--muted);
}
/* Two notes of one card are two lines. Without this, the second note starts
   at the last letter of the first note. */
.card > small + small {
	display: block;
}
.balance-note {
	display: block;
	margin: 0 0 0.35rem;
}
/* The heading of a group of accounts on the Overview, with the subtotal of
   the group for each currency. An amount stays on one line. It goes to the
   next line when the heading has no room for it. */
.group-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 1rem;
}
.group-subtotal {
	color: #526171;
	font-size: 0.8em;
	white-space: nowrap;
}
.group-note {
	margin: 0;
}
.filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.75rem;
	margin: 1.25rem 0;
}
.filters label,
.settings-form label,
.upload-panel label {
	display: grid;
	gap: 0.35rem;
	color: #526171;
	font-size: 0.82rem;
	font-weight: 800;
}
.filters label.check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.8rem;
	cursor: pointer;
}
.filters label.check input {
	flex: 0 0 auto;
	width: 1.15rem;
	min-height: 0;
	height: 1.15rem;
	accent-color: #16735a;
}
/* The button of an Insights filter is as high as a field and on the line of the fields. */
.filters[action^="/insights"] > button {
	align-self: end;
	min-height: 2.8rem;
}
input,
select {
	width: 100%;
	min-height: 2.8rem;
	border: 1px solid #c9d0cc;
	border-radius: 8px;
	padding: 0.62rem 0.75rem;
	background: #fffdf9;
	color: #17263a;
}
select {
	cursor: pointer;
}
.table {
	display: grid;
	/* One column that can shrink. An auto column takes the min-width of a row
	   and makes the page wider than the window. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.45rem;
	margin: 1rem 0;
	overflow-x: auto;
}
.row {
	display: grid;
	grid-template-columns: 0.75fr 1.1fr 0.85fr 1.7fr 0.8fr 0.8fr;
	gap: 0.8rem;
	align-items: center;
	min-width: 0;
	padding: 0.82rem 1rem;
	border: 1px solid #e0ddd4;
	border-radius: 10px;
	background: #fffdf9;
	font-size: 0.88rem;
}
.row > :first-child {
	color: var(--muted);
	font-family: "DM Mono", monospace;
	font-size: 0.78rem;
}
.row.warn {
	border-color: #e6bc69;
	background: #fff8e8;
}
.table-heading {
	color: #526171;
	border-style: dashed;
	background: transparent;
}
.table-heading > * {
	font-family: Manrope, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.upload-panel {
	display: grid;
	gap: 0.75rem;
	padding: 1.15rem;
	border: 1px dashed #8bb8a1;
	border-radius: 16px;
	background: #f2faf4;
}
.receipt-card {
	min-height: 150px;
	color: #17263a;
	text-align: left;
	background: #fffdf9;
}
.receipt-card:hover:not(:disabled) {
	border-color: #82ad96;
	background: #f8fcf8;
}
.line-item-table .row {
	grid-template-columns: 1.2fr 1.1fr 0.55fr 0.7fr 0.7fr 1fr 1.25fr;
}
.item-field {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
	font-size: 0.72rem;
	color: #526171;
}
.line-item-table input,
.line-item-table select {
	min-width: 0;
}
.badge {
	display: inline-flex;
	width: fit-content;
	border-radius: 999px;
	padding: 0.22rem 0.55rem;
	background: #dcece2;
	color: #176b50;
	font-size: 0.72rem;
	font-weight: 800;
}
.badge[hidden] {
	display: none;
}
a.badge {
	text-decoration: none;
}
a.badge:hover {
	color: #176b50;
}
.badge.review {
	background: #fff0cf;
	color: #7a5200;
}
.receipt-lines .row {
	/* Each column can shrink. An `fr` column with no least width takes the
	   longest word of its cell, and a name with no space moves the columns of
	   its row away from the columns of the other rows. */
	grid-template-columns:
		minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr)
		minmax(0, 1.3fr);
	min-width: 0;
}
.receipt-lines .row > * {
	min-width: 0;
	overflow-wrap: anywhere;
}
.badge.global {
	background: #e7ebee;
	color: #425466;
}
.badge.failed {
	background: #f8e4e2;
	color: #8f302d;
}
.badge.transfer {
	background: #e7ebee;
	color: #425466;
}
.badge.warn {
	background: #fbeccb;
	color: #7a5200;
}
.tx-list {
	overflow-x: visible;
	grid-template-columns: minmax(0, 1fr);
}
.tx-list > * {
	min-width: 0;
}
.tx-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.45rem;
	min-width: 0;
}
.tx-card.is-drop-target .row {
	background: #f2faf4;
	box-shadow: inset 0 0 0 2px #8bb8a1;
}
.tx-line {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
	min-width: 0;
}
.tx-line .tx-scroll {
	flex: 1 1 auto;
	min-width: 0;
}
.tx-menu {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	margin: 0.45rem 0.45rem 0 0;
}
.tx-menu summary {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 1px solid #c9d0cc;
	border-radius: 8px;
	background: #fffdf9;
	color: #17263a;
	font-weight: 800;
	line-height: 1;
	list-style: none;
	cursor: pointer;
}
.tx-menu summary::-webkit-details-marker {
	display: none;
}
.tx-menu summary:focus-visible {
	outline: 3px solid #efb451;
	outline-offset: 3px;
}
.tx-menu[open] {
	z-index: 3;
}
.tx-menu-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.35rem);
	z-index: 3;
	display: grid;
	/* The column is as wide as the panel. A long word of an entry does not make it wider. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.15rem;
	width: 14.5rem;
	padding: 0.35rem;
	border: 1px solid #dcd8cd;
	border-radius: 12px;
	background-color: #fffdf9;
	box-shadow: 0 8px 20px #17263a18;
}
/* The menu of each of the last 5 rows opens up. The page ends below the list, */
/* and a panel that opens down there makes the page longer. Only row 7 and the */
/* rows after it have room above them for the panel, so each menu of a short */
/* list opens down. */
.tx-list > :nth-child(n + 7):nth-last-child(-n + 5) .tx-menu-panel {
	top: auto;
	bottom: calc(100% + 0.35rem);
}
.tx-menu-panel form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.1rem;
	margin: 0;
}
/* The line that says where the category comes from. */
.tx-menu-panel > p {
	max-width: none;
	margin: 0;
	padding: 0.35rem 0.7rem;
	font-size: 0.85rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.tx-menu-panel button,
.tx-menu-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 2.5rem;
	border: 0;
	border-radius: 8px;
	padding: 0.45rem 0.7rem;
	background: transparent;
	color: #17263a;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	box-shadow: none;
	transform: none;
	cursor: pointer;
}
.tx-menu-panel button:hover:not(:disabled),
.tx-menu-item:hover {
	background: #e7ebee;
	color: #17263a;
	box-shadow: none;
	transform: none;
}
.tx-menu-item {
	position: relative;
}
a.tx-menu-item {
	text-decoration: none;
}
.tx-menu-item input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.tx-card[data-has-receipt="false"] [data-receipt-detach],
.tx-card[data-has-receipt="true"] [data-receipt-attach],
.tx-card[data-has-receipt="true"] [data-receipt-by-hand] {
	display: none;
}
.tx-status {
	margin: 0.25rem 0 0;
	font-size: 0.82rem;
}
.tx-items {
	margin: 0 0.45rem 0.45rem;
}
.tx-items summary {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 800;
}
.tx-item-lines {
	margin: 0.45rem 0;
}
.tx-item-lines .row {
	grid-template-columns: 2fr 0.9fr 0.8fr 1fr;
	min-width: 0;
}
.tx-items .muted {
	margin: 0.35rem 0 0;
	font-size: 0.82rem;
}
.tx-scroll {
	/* The row fits the column. A long party or bank text wraps; the page does
	   not scroll to the side, and the row has no scroll inside. */
	overflow-x: visible;
	max-width: 100%;
	min-width: 0;
	container-type: inline-size;
	container-name: tx-facts;
}
/* The facts of one Activity or Overview row: date, party, category, detail, amount. */
.tx-facts {
	/* A fixed amount column keeps the amounts of the rows in one line. */
	grid-template-columns:
		5.5rem minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.6fr) 7rem;
	grid-template-areas: "date party category detail amount";
	align-items: baseline;
}
.tx-facts > * {
	min-width: 0;
	overflow-wrap: anywhere;
}
.tx-date {
	grid-area: date;
}
.tx-party {
	grid-area: party;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}
.tx-detail {
	grid-area: detail;
}
.tx-amount {
	grid-area: amount;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	overflow-wrap: normal;
}
.amount-transfer {
	color: #526171;
	font-weight: 650;
}
/* Below this width the five columns do not fit. Line 1 is the party and the
   amount, line 2 the date and the category, line 3 the detail. */
@container tx-facts (max-width: 52rem) {
	.tx-facts {
		/* The date and the amount are as wide as their text. The payee and the
		   category have the room that is left: with two columns, a long
		   category name takes the room of the payee. */
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"party party amount"
			"date category category"
			"detail detail detail";
		gap: 0.35rem 0.8rem;
	}
	.tx-date {
		align-self: center;
		white-space: nowrap;
	}
	.tx-category {
		/* The category has the room at the right of the date. Each line of it,
		   also a short one and the badge, ends at the right edge of the row. */
		justify-content: flex-end;
		text-align: right;
	}
}
.tx-transfer {
	display: grid;
	gap: 0.35rem;
	max-width: 100%;
}
.tx-transfer label {
	display: grid;
	gap: 0.35rem;
	color: #526171;
	font-size: 0.82rem;
	font-weight: 800;
}
.tx-transfer select {
	min-height: 44px;
}
.tx-transfer p {
	margin: 0;
}
/* The "Likely transfers" block of Activity. Each pair is one box with two legs. */
/* An edge and a background are a plain border and a plain color, so a browser */
/* that darkens the page keeps them. */
.likely-transfers h2 {
	margin-top: 1.5rem;
}
.likely-transfers {
	margin-bottom: 1.5rem;
}
.likely-transfer-list {
	display: grid;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
}
.likely-transfer-rest {
	display: grid;
	gap: 0.6rem;
}
.likely-transfer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.7rem 1.25rem;
	align-items: center;
	border: 1px solid #e0ddd4;
	border-radius: 10px;
	padding: 0.82rem 1rem;
	background-color: #fffdf9;
	font-size: 0.88rem;
}
.likely-transfer-legs {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}
/* The columns have the same size in each leg, so the legs of all pairs line up. */
.likely-leg {
	display: grid;
	grid-template-columns: 5.25rem minmax(0, 1.2fr) minmax(0, 1.5fr) 7rem;
	grid-template-areas: "date account text amount";
	gap: 0.15rem 0.8rem;
	align-items: baseline;
	max-width: none;
	margin: 0;
	line-height: 1.4;
}
.likely-leg > * {
	min-width: 0;
	overflow-wrap: anywhere;
}
.likely-leg-date {
	grid-area: date;
	color: var(--muted);
	font-family: "DM Mono", monospace;
	font-size: 0.78rem;
}
.likely-leg-account {
	grid-area: account;
}
.likely-leg-text {
	grid-area: text;
}
.likely-leg-amount {
	grid-area: amount;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}
.likely-transfer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}
.likely-transfer-actions button {
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	font-size: 0.88rem;
}
/* The summary is 2.75rem high or more, as each button of the block. */
.likely-transfer-more summary {
	width: fit-content;
	padding: 0.8rem 0.25rem;
	font-size: 0.88rem;
	font-weight: 800;
	line-height: 1.4;
	cursor: pointer;
}
.likely-transfer-more summary:focus-visible {
	outline: 3px solid #efb451;
	outline-offset: 3px;
}
/* The line "and n more", below the closed part. */
.likely-transfers > .muted {
	margin: 0.3rem 0 0;
	padding: 0 0.25rem;
	font-size: 0.88rem;
}
@media (min-width: 1360px) {
	/* A wide window has the buttons at the right of the legs. */
	.likely-transfer {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}
@media (max-width: 760px) {
	/* A leg is a stack: the text, then the date, the account, and the amount. */
	.likely-transfer {
		padding: 0.75rem 0.8rem;
	}
	.likely-leg {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"text text text"
			"date account amount";
	}
	.likely-leg-text {
		font-weight: 700;
	}
	.likely-leg + .likely-leg {
		padding-top: 0.45rem;
		border-top: 1px solid #ece9e0;
	}
	.likely-transfer-legs {
		gap: 0.45rem;
	}
	.likely-transfer-actions button {
		flex: 1 1 auto;
		padding: 0.5rem 0.6rem;
		font-size: 0.85rem;
	}
}
.settings h1 {
	margin-bottom: 0;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
}
.settings h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0;
	margin-bottom: 0.35rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}
.settings h2 .badge {
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	letter-spacing: 0;
}
.settings h3 {
	margin: 0;
	font-size: 1rem;
}
.settings section + section {
	margin-top: 2.5rem;
}
.settings section > .muted {
	margin-bottom: 1rem;
}
.settings input,
.settings select {
	font-size: 0.95rem;
	font-weight: 600;
}
.settings input::placeholder {
	color: var(--muted);
	font-weight: 500;
}
.subnav {
	display: flex;
	/* Each tab stays in view: a bar that is too long has a second line. */
	flex-wrap: wrap;
	gap: 0.25rem;
	width: fit-content;
	max-width: 100%;
	margin: 1.1rem 0 1.9rem;
	padding: 0.3rem;
	overflow-x: auto;
	border: 1px solid #dcd8cd;
	border-radius: 14px;
	background: #fffdf9;
}
.subnav a {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.5rem 0.95rem;
	border: 1px solid transparent;
	border-radius: 10px;
	color: #526171;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.subnav a:hover {
	background: #eef0ea;
	color: #17263a;
}
/* The edge is a plain border in the color of the tab. A browser that darkens
   the page makes it lighter, so the current tab keeps its edge there. */
.subnav a[aria-current="page"] {
	border-color: #10263d;
	background-color: #10263d;
	color: #fff;
}
.subnav a:focus-visible,
.picker-list a:focus-visible,
.picker-list button:focus-visible {
	outline-offset: -3px;
}
.subnav .count {
	min-width: 1.45rem;
	border-radius: 999px;
	padding: 0.1rem 0.4rem;
	background: #dcece2;
	color: #176b50;
	font-size: 0.72rem;
	font-weight: 800;
	text-align: center;
}
.notice {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 1.25rem;
	border: 1px solid #b8d4c5;
	border-radius: 10px;
	padding: 0.55rem 0.85rem;
	background: #f2faf4;
	line-height: 1.4;
}
.notice.error {
	border-color: #e3c1bd;
	background: #fdf1ef;
}
/* The row action pattern: see row-action.js. */
/* The status is below the navigation, so it does not hide the buttons of a row. */
.row-status {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 5;
	width: 212px;
	margin: 0;
	border: 1px solid #b8d4c5;
	border-radius: 10px;
	padding: 0.55rem 0.85rem;
	background: #f2faf4;
	box-shadow: 0 8px 20px #17263a18;
	font-size: 0.88rem;
	line-height: 1.4;
	/* A long pattern or name stays in the box. */
	overflow-wrap: anywhere;
	pointer-events: none;
}
/* An empty status stays in the page, so a screen reader hears its next text. */
.row-status:empty {
	visibility: hidden;
}
[data-row][aria-busy="true"] {
	opacity: 0.6;
}
[data-row][aria-busy="true"] button,
[data-row-settling] [data-row] button {
	cursor: progress;
}
[data-row-region]:focus {
	outline: none;
}
.row-error {
	grid-column: 1 / -1;
	max-width: none;
	margin: 0;
	color: #a83232;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.45;
}
.mono {
	font-family: "DM Mono", monospace;
	font-size: 0.78rem;
}
.connection-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: 0.85rem;
	align-items: start;
}
.connection-card {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	padding: 1rem 1.1rem;
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	background: #fffdf9;
}
.connection-card header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 0.75rem;
}
.connection-card p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	/* An error code of a bank has no space. */
	overflow-wrap: anywhere;
}
.connection-card .actions {
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin-top: 0.6rem;
}
.connection-card .actions form {
	margin: 0;
}
.connection-card button {
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	font-size: 0.85rem;
	white-space: nowrap;
}
.institution-search {
	display: grid;
	grid-template-columns: minmax(0, 28rem) auto;
	gap: 0.65rem;
	align-items: end;
	justify-content: start;
	color: #526171;
	font-size: 0.82rem;
	font-weight: 800;
}
.institution-search label {
	display: grid;
	gap: 0.35rem;
}
.institution-search button {
	min-height: 2.8rem;
}
.institution-search + .empty {
	margin-top: 0.75rem;
}
.institution-list {
	display: grid;
	gap: 0.55rem;
	max-width: 44rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}
.institution-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	background: #fffdf9;
}
.institution-list li > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	min-width: 0;
}
.institution-list strong {
	overflow-wrap: anywhere;
}
.institution-list form {
	flex: 0 0 auto;
}
.institution-list button {
	min-height: 44px;
}
.institution-list small {
	flex-basis: 100%;
}
.rule-list {
	max-width: 62rem;
	margin: 0;
	padding: 0.3rem 1rem;
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	background: #fffdf9;
	list-style: none;
}
.rule-list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.7rem 0;
	font-size: 0.9rem;
}
.rule-list > li + li {
	border-top: 1px solid #ece9e0;
}
.rule-list > li.is-chosen {
	background: #f1f5f2;
}
.rule-text {
	display: grid;
	flex: 1 1 18rem;
	gap: 0.2rem;
	min-width: 0;
}
.rule-text code,
.rule-text small {
	overflow-wrap: anywhere;
}
.rule-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.6rem;
}
.rule-position {
	color: #526171;
	font-variant-numeric: tabular-nums;
}
.rule-amount {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.rule-list .actions {
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin: 0;
}
.rule-list .actions form {
	display: flex;
	gap: 0.4rem;
	margin: 0;
}
.rule-list .actions button,
.rule-list .actions .button {
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	font-size: 0.85rem;
}
.tx-category {
	grid-area: category;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}
.tx-menu-panel .tx-category-form {
	gap: 0.3rem;
	padding-top: 0.35rem;
	border-top: 1px solid #ece9e0;
}
.tx-menu-panel .tx-category-form input {
	/* The field has a margin at each side, and it stays in the panel. */
	width: calc(100% - 0.7rem);
	min-width: 0;
	min-height: 2.5rem;
	margin: 0 0.35rem;
	font-size: 0.9rem;
}
.sync-jobs {
	max-width: 44rem;
	margin: 0;
	padding: 0.3rem 1rem;
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	background: #fffdf9;
	list-style: none;
}
.sync-job {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.75rem;
	padding: 0.6rem 0;
	font-size: 0.9rem;
}
.sync-job + .sync-job {
	border-top: 1px solid #ece9e0;
}
.sync-job > :first-child {
	flex: 1 1 12rem;
}
.sync-job > * {
	min-width: 0;
	overflow-wrap: anywhere;
}
.picker {
	display: grid;
	/* 27rem and 32rem in a wide window. A narrow window gives each column its
	   share, so the form does not get what the list leaves. */
	grid-template-columns: minmax(0, 27fr) minmax(0, 32fr);
	gap: 1.5rem;
	align-items: start;
	max-width: 60.5rem;
}
.picker-side {
	display: grid;
	gap: 0.6rem;
	min-width: 0;
}
.picker-search {
	display: grid;
	gap: 0.35rem;
	color: #526171;
	font-size: 0.82rem;
	font-weight: 800;
}
.picker-search[hidden] {
	display: none;
}
.picker-list {
	position: relative;
	max-height: max(19rem, calc(100vh - 29rem));
	margin: 0;
	padding: 0.3rem;
	overflow-y: auto;
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	background: #fffdf9;
	list-style: none;
}
.picker-list li[hidden] {
	display: none;
}
.picker-list a,
.picker-list button {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.05rem 0.75rem;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	color: #17263a;
	font-weight: 500;
	text-decoration: none;
}
.picker-list button {
	width: 100%;
	border: 0;
	background: transparent;
	line-height: inherit;
	text-align: left;
	transition: none;
}
.picker-list a:hover,
.picker-list button:hover:not(:disabled) {
	background: #eef0ea;
	color: #17263a;
	box-shadow: none;
	transform: none;
}
.picker-list button:disabled {
	opacity: 0.6;
}
.picker-list a[aria-current="true"] {
	background: #dcece2;
	box-shadow: inset 3px 0 0 #16735a;
}
.picker-list strong,
.picker-list small {
	grid-column: 1;
	overflow-wrap: anywhere;
}
.picker-list .badge,
.picker-list .badges {
	grid-column: 2;
	grid-row: 1 / span 2;
}
.picker-list .badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.3rem;
}
.picker-list .child a {
	padding-left: 1.9rem;
}
.picker-list .archived strong,
.card.archived .value {
	color: var(--muted);
}
.picker-status {
	min-height: 1.4rem;
	margin: 0;
	font-size: 0.82rem;
}
.picker-detail {
	position: sticky;
	top: 1.5rem;
	display: grid;
	gap: 0.75rem;
	min-width: 0;
}
.picker-back {
	display: none;
}
.picker-hint {
	margin: 0;
	padding: 1.1rem;
	border: 1px dashed #c9d0cc;
	border-radius: 14px;
	color: var(--muted);
}
.picker-detail .settings-form {
	min-width: 0;
}
.picker-detail .settings-form h3,
.picker-detail .settings-form small {
	overflow-wrap: anywhere;
}
.picker-detail .settings-form small {
	font-size: 0.8rem;
	font-weight: 500;
}
.picker-detail .settings-form .actions {
	margin-top: 0.2rem;
}
.settings-form label.check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	color: #17263a;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}
.settings-form label.check input {
	flex: 0 0 auto;
	width: 1.15rem;
	min-height: 0;
	height: 1.15rem;
	accent-color: #16735a;
}
.tx-link {
	display: grid;
	gap: 0.6rem;
	max-width: 44rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #ece9e0;
}
.tx-link-state {
	margin: 0;
}
.tx-link-rows {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tx-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
}
.tx-link-row form {
	margin: 0;
}
.tx-link-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem;
	align-items: end;
}
.tx-link-search label {
	display: grid;
	gap: 0.35rem;
	color: #526171;
	font-size: 0.82rem;
	font-weight: 800;
}
.tx-link-search input {
	font-size: 0.95rem;
	font-weight: 600;
}
.tx-link-search input::placeholder {
	color: var(--muted);
	font-weight: 500;
}
.tx-link-search button {
	min-height: 2.8rem;
}
.tx-link-results form {
	display: grid;
	gap: 0.45rem;
	margin: 0;
}
.tx-link-results p {
	margin: 0;
	font-size: 0.82rem;
}
.tx-link-results .picker-list {
	max-height: none;
}
.tx-link-side {
	display: grid;
	grid-column: 2;
	grid-row: 1 / span 2;
	gap: 0.15rem;
	justify-items: end;
	white-space: nowrap;
}
.tx-link-side .badge {
	grid-column: auto;
	grid-row: auto;
}
.tx-link-side .mono {
	font-size: 0.85rem;
	font-weight: 500;
}
.suggestion-head,
.suggestion {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 11.5rem;
	gap: 0.5rem 0.75rem;
	align-items: center;
}
.suggestion-head {
	padding: 0 0.85rem 0.4rem;
	color: #526171;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.suggestion-list {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.suggestion {
	padding: 0.55rem 0.85rem;
	border: 1px solid #e0ddd4;
	border-radius: 12px;
	background: #fffdf9;
}
.suggestion-raw {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}
.suggestion-raw strong {
	overflow-wrap: anywhere;
	font-size: 0.85rem;
	font-weight: 500;
}
.suggestion label {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
	color: #526171;
	font-size: 0.78rem;
	font-weight: 800;
}
.suggestion label span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.suggestion .actions {
	flex-wrap: nowrap;
	gap: 0.45rem;
	justify-content: flex-end;
	margin-top: 0;
}
.suggestion-list .row-error {
	margin: 0.35rem 0.95rem 0.2rem;
}
.suggestion button {
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	font-size: 0.88rem;
}
/* A heading between the two lists has room above it. */
.suggestion-list + h3 {
	margin-top: 2rem;
}
/* The page asks for its own width, not for the width of the window: the menu
   at the left takes 244 pixels of a window of 1,000 pixels. */
#suggestions-region {
	container-type: inline-size;
	container-name: suggestions;
}
/* Below this width the four columns cut the text of each field. The receipt
   text is line 1, the two fields with their labels are line 2. */
@container suggestions (max-width: 60rem) {
	.suggestion-head {
		display: none;
	}
	.suggestion {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.suggestion-raw,
	.suggestion .actions {
		grid-column: 1 / -1;
	}
	.suggestion label span {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
	.suggestion .actions {
		justify-content: flex-start;
	}
}
/* Settings, Items: the list of item names. One form has each row of a page. */
.item-names-summary {
	margin: 0.4rem 0 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
}
.name-filters a {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
}
.name-filters a > span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.name-filters small {
	min-height: 1.2em;
	color: inherit;
	font-size: 0.74rem;
	font-weight: 600;
	opacity: 0.85;
}
.item-name-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.75rem;
	align-items: end;
	margin: 0 0 1.25rem;
}
.item-name-search label {
	display: grid;
	flex: 1 1 16rem;
	gap: 0.3rem;
	max-width: 26rem;
	color: #526171;
	font-size: 0.82rem;
	font-weight: 800;
}
.item-name-search a {
	display: inline-flex;
	align-items: center;
	min-height: 2.8rem;
}
.item-name-head,
.item-name {
	display: grid;
	grid-template-columns:
		minmax(0, 1.4fr) 8.5rem minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr)
		4.5rem;
	gap: 0.5rem 0.75rem;
	align-items: center;
}
.item-name-head {
	padding: 0 0.85rem 0.4rem;
	color: #526171;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.item-name-head span:nth-child(2) {
	text-align: right;
}
.item-name-list {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.item-name {
	padding: 0.55rem 0.85rem;
	border: 1px solid #e0ddd4;
	border-radius: 12px;
	background: #fffdf9;
}
.item-name-text {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}
.item-name-text strong {
	overflow-wrap: anywhere;
	font-size: 0.85rem;
	font-weight: 500;
}
.item-name-text small {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.45rem;
	align-items: center;
}
/* Each amount has a no-break space, so a second currency goes to a new line. */
.item-name-amount {
	max-width: 9rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}
.item-name-amount button {
	min-height: 44px;
	padding: 0.4rem 0.7rem;
	font-size: 0.82rem;
}
.item-name label {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
	color: #526171;
	font-size: 0.78rem;
	font-weight: 800;
}
.item-name label span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.item-name-source {
	font-size: 0.78rem;
}
/* The count of the lines, and the answer of an alias for the size next to
   it. Only a name with a size has the answer. */
.item-name-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.6rem;
	align-items: center;
}
.item-name label.item-name-size {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	min-height: 1.5rem;
	color: #17263a;
	font-size: 0.83rem;
	font-weight: 600;
	cursor: pointer;
}
.item-name label.item-name-size input {
	flex: 0 0 auto;
	width: 1.05rem;
	min-height: 0;
	height: 1.05rem;
	margin: 0;
	accent-color: #16735a;
}
.item-name-page .row-error {
	margin: 0.6rem 0 0;
}
.item-name-hint {
	max-width: 46rem;
	margin: 0.7rem 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
}
.item-name-add {
	margin-top: 2rem;
}
.item-name-add summary {
	width: fit-content;
	min-height: 44px;
	padding: 0.6rem 0;
	color: #176b50;
	font-weight: 700;
	cursor: pointer;
}
.item-name-add .settings-form {
	max-width: 30rem;
	margin-top: 0.4rem;
}
/* The container is the region of the list, not the section. A browser that
   gives a container layout containment makes it the frame of each
   `position: fixed` part in it, and the message box of the section must stay
   at the edge of the window. */
#item-names-region {
	container-type: inline-size;
	container-name: item-names;
}
/* Below this width the six columns cut the text of each field. The receipt
   text and the sum are line 1, the three fields with their labels are line 2. */
@container item-names (max-width: 64rem) {
	.item-name-head {
		display: none;
	}
	.item-name {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
	}
	.item-name-text {
		grid-column: 1 / span 2;
	}
	.item-name-amount {
		grid-column: 3;
		justify-self: end;
	}
	.item-name-source {
		grid-column: 1 / -1;
	}
	.item-name label span {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
}
@media (max-width: 760px) {
	.item-name-head {
		display: none;
	}
	.item-name {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.item-name-text,
	.item-name-amount {
		grid-column: auto;
	}
	.item-name label,
	.item-name-source {
		grid-column: 1 / -1;
	}
	.item-name label span {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
	/* The text of the checkbox is a part of the target of a finger. */
	.item-name label.item-name-size {
		min-height: 44px;
	}
	.item-name-search button {
		flex: 1 1 auto;
	}
}
.recurring h2 .badge {
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	letter-spacing: 0;
	vertical-align: middle;
}
.recurring-list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	container-type: inline-size;
	container-name: recurring;
}
.recurring-item {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) 10.5rem;
	gap: 0.75rem 1.25rem;
	align-items: center;
	padding: 0.85rem 1rem;
	border: 1px solid #e0ddd4;
	border-radius: 12px;
	background: #fffdf9;
}
.recurring-item.has-warning {
	border-color: #e6c98a;
	background: #fffaf0;
}
.recurring-name {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	align-items: center;
	min-width: 0;
}
.recurring-name strong {
	overflow-wrap: anywhere;
}
.recurring-name small,
.recurring-warning,
.recurring-note {
	flex-basis: 100%;
	overflow-wrap: anywhere;
}
.recurring-warning,
.recurring-note {
	max-width: none;
	margin: 0.2rem 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
}
.recurring-note {
	color: var(--muted);
}
.recurring-facts {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
	margin: 0;
}
.recurring-facts dt {
	color: #526171;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.recurring-facts dd {
	margin: 0.15rem 0 0;
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
}
.recurring-facts dd strong,
.recurring-facts dd span {
	white-space: nowrap;
}
.recurring-item .actions {
	flex-wrap: nowrap;
	gap: 0.45rem;
	justify-content: flex-end;
	margin-top: 0;
}
/* A payment with "Payment missing" has a third button. It goes to a second line. */
.recurring-item .actions.can-end {
	flex-wrap: wrap;
}
.recurring-item button {
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	font-size: 0.88rem;
}
/* Below this width the three columns of a payment do not fit: a date goes
   out of its column. The name, the facts, and the buttons are three lines. */
@container recurring (max-width: 62rem) {
	.recurring-item {
		grid-template-columns: minmax(0, 1fr);
	}
	.recurring-item .actions {
		justify-content: flex-start;
	}
}
.recurring-months {
	width: 100%;
	max-width: 44rem;
	margin: 1rem 0 1.75rem;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.recurring-months caption {
	padding-bottom: 0.4rem;
	color: #526171;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
}
.recurring-months th,
.recurring-months td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid #e0ddd4;
	text-align: right;
}
.recurring-months th:first-child {
	padding-left: 0;
	text-align: left;
}
.recurring-months thead th {
	color: #526171;
	font-size: 0.78rem;
}
.recurring-months tbody th {
	font-weight: 600;
}
.recurring-months tfoot th,
.recurring-months tfoot td {
	border-top: 2px solid #c9d0cc;
	border-bottom: 0;
	font-weight: 800;
}
.recurring-ended,
.recurring-rejected {
	margin-top: 2.75rem;
}
.recurring-ended + .recurring-rejected {
	margin-top: 0.5rem;
}
.recurring-ended summary,
.recurring-rejected summary {
	width: fit-content;
	padding: 0.7rem 0;
	font-weight: 800;
	cursor: pointer;
}
.recurring-ended .recurring-list,
.recurring-rejected .recurring-list {
	margin-top: 0.4rem;
}
.overview-recurring,
.overview-loans {
	margin: 1.75rem 0;
	min-width: 0;
}
.overview-recurring-list,
.overview-loans-list {
	display: grid;
	gap: 0.55rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}
.overview-recurring-item,
.overview-loans-item {
	min-width: 0;
}
.overview-recurring-item a,
.overview-loans-item a {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid #e6c98a;
	border-radius: 12px;
	background: #fffaf0;
	color: inherit;
	font-weight: 500;
	text-decoration: none;
}
.overview-recurring-item a:hover,
.overview-loans-item a:hover {
	border-color: #d4b36a;
	color: inherit;
}
.overview-recurring-name,
.overview-loans-name {
	font-weight: 800;
	overflow-wrap: anywhere;
}
.overview-recurring-text,
.overview-recurring-meta,
.overview-loans-text,
.overview-loans-meta {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 0.9rem;
	line-height: 1.4;
}
.overview-recurring-meta,
.overview-loans-meta {
	color: #526171;
	font-variant-numeric: tabular-nums;
}
.overview-recurring-more,
.overview-loans-more {
	margin: 0.65rem 0 0;
}
.global-row {
	border-style: dashed;
	background: #fafafa;
}
.small {
	padding: 0.45rem 0.65rem;
	font-size: 0.78rem;
}
.danger {
	background: #b3433d;
}
.danger:hover:not(:disabled) {
	background: #8f302d;
}
.success {
	color: #0e6849;
	font-weight: 700;
}
.error {
	color: #a83232;
	font-weight: 700;
}
.empty,
.muted {
	color: var(--muted);
}
.skeleton {
	margin: 1rem 0;
	border-radius: 10px;
	padding: 1rem;
	background: linear-gradient(90deg, #ece9e0, #f9f7f1, #ece9e0);
	background-size: 200% 100%;
	color: #526171;
	animation: pulse 1.5s ease infinite;
}
.settings-form {
	display: grid;
	gap: 0.8rem;
	padding: 1.1rem;
	border: 1px solid #dcd8cd;
	border-radius: 14px;
	background: #fffdf9;
}
.settings-form h3 {
	margin: 0;
}
/* The import page (`pages/settings/import.rs`): each control is 44 px high. */
.import-form input[type="file"],
.import-form select,
.import-form button {
	min-height: 44px;
}
.import-accounts {
	display: grid;
	gap: 0.8rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}
.alias-table .row {
	grid-template-columns: 1.2fr 1.2fr 1fr 0.6fr 0.8fr;
}
.conversion {
	display: grid;
	gap: 0.25rem;
	margin: 0.75rem 0;
	padding: 0.75rem;
	border-left: 3px solid #16735a;
	background: #f2faf4;
}
.merchant-alias-table .row {
	grid-template-columns: 1.4fr 1.4fr 0.55fr;
}
.receipt-preview {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0;
}
.receipt-preview img {
	max-width: 100%;
	max-height: 34rem;
	border: 1px solid #dcd8cd;
	border-radius: 10px;
	object-fit: contain;
}
.suggestions-table .row {
	grid-template-columns: 1.1fr 1.4fr 0.55fr 1.6fr;
}
.category-table .row {
	grid-template-columns: 1.2fr 1fr 1fr 0.6fr;
}
.suggestion-edit,
.suggestion-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.suggestion-edit input,
.suggestion-edit select {
	width: min(220px, 100%);
}
.login {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.auth-card {
	max-width: 680px;
	padding: clamp(2rem, 6vw, 5rem);
}
.auth-card::before {
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 1.5rem;
	border-radius: 10px;
	background: #10263d;
	color: #cbe7d7;
	content: "L";
	display: grid;
	place-items: center;
	font-weight: 800;
}
.auth-card form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.65rem;
	align-items: end;
	max-width: 520px;
}
/* The button is as wide as the field: the two have the two columns. */
.auth-card form button {
	grid-column: 1 / -1;
}
.auth-card form label {
	/* The field is in its label, with room between the text and the field. */
	display: grid;
	grid-column: 1 / -1;
	gap: 0.35rem;
	color: #526171;
	font-size: 0.82rem;
	font-weight: 800;
}
@keyframes pulse {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto;
		animation-duration: 0.01ms;
		transition-duration: 0.01ms;
	}
}
@media (max-width: 760px) {
	.app-shell {
		display: block;
	}
	.app-shell > nav {
		/* The menu is 13rem high with seven links, the e-mail, and the button.
		   It moves away with the page and does not stay at the top. */
		position: static;
		width: 100%;
		height: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.35rem 0.5rem;
		padding: 0.65rem 0.8rem;
		overflow: visible;
	}
	.brand {
		flex: 0 0 auto;
		padding: 0.2rem;
		font-size: 1.1rem;
	}
	.brand-mark {
		width: 1.7rem;
		height: 1.7rem;
	}
	.nav-links {
		display: flex;
		flex: 1 1 12rem;
		flex-wrap: wrap;
		gap: 0.15rem;
		min-width: 0;
	}
	.nav-links a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.45rem 0.55rem;
		font-size: 0.78rem;
		white-space: nowrap;
	}
	.logout {
		display: inline-flex;
		flex: 0 0 auto;
		min-height: 44px;
		margin-top: 0;
		padding: 0.45rem 0.7rem;
		font-size: 0.78rem;
	}
	.content {
		padding: 1.35rem 1rem 2.5rem;
	}
	.hero {
		border-radius: 16px;
	}
	.hero::after {
		opacity: 0.55;
	}
	.line-item-table .row {
		min-width: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.line-item-table .row small {
		grid-column: 1 / -1;
	}
	.receipt-card {
		display: block;
	}
	.receipt-card .value {
		margin: 0.6rem 0;
	}
	.auth-card form {
		grid-template-columns: 1fr;
	}
	.auth-card form button {
		width: 100%;
	}
	.institution-list li {
		flex-direction: column;
		align-items: stretch;
	}
	.institution-list form,
	.institution-list button {
		width: 100%;
	}
	.institution-search {
		grid-template-columns: 1fr;
	}
	.subnav {
		flex-wrap: wrap;
		width: auto;
	}
	.subnav a {
		flex: 1 1 30%;
		justify-content: center;
		padding: 0.5rem 0.6rem;
	}
	.connection-card .actions {
		flex-wrap: wrap;
	}
	.picker {
		grid-template-columns: 1fr;
	}
	.picker-list {
		max-height: none;
	}
	.picker-detail {
		position: static;
	}
	/* A phone shows the list or the form of the chosen row, not both. */
	.picker.has-choice .picker-side {
		display: none;
	}
	.picker.has-choice .picker-back {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	/* A phone has one field on a line, so a long item name is in view. */
	.suggestion label {
		grid-column: 1 / -1;
	}
	.suggestion .actions button {
		flex: 1 1 0;
	}
	/* The navigation is at the top of a narrow screen. A click goes through the status. */
	.row-status {
		right: 1rem;
		width: auto;
	}
	.recurring-item {
		grid-template-columns: minmax(0, 1fr);
	}
	.recurring-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.recurring-facts > :first-child {
		grid-column: 1 / -1;
	}
	.recurring-item .actions {
		justify-content: flex-start;
	}
	.recurring-item .actions button {
		flex: 1 1 0;
	}
	.recurring-months th,
	.recurring-months td {
		padding: 0.5rem 0.35rem;
		font-size: 0.88rem;
	}
}
/* House costs: a table of months that scrolls sideways. The category column stays in view. */
.cost-switch {
	margin-bottom: 0.5rem;
}
.house-costs .grid {
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.cost-scroll {
	container-type: inline-size;
	container-name: cost-box;
	max-width: 100%;
	margin: 1rem 0;
	overflow-x: auto;
	border: 1px solid #dcd8cd;
	border-radius: 14px;
	background: #fffdf9;
}
.cost-scroll:focus-visible {
	outline: 2px solid #16735a;
	outline-offset: 2px;
}
/* A box that scrolls to the side shows a fade at the edge that has more
   columns. No script sets it.
   The right edge: a strip stays at the right edge of the box and is above the
   cells. The cells of the last column are above the strip. At the end of the
   scroll, and in a box that does not scroll, the last column hides the strip. */
.scroll-sign {
	display: flex;
}
.scroll-sign > table {
	flex: 0 0 auto;
}
.scroll-sign::after {
	position: sticky;
	right: 0;
	z-index: 2;
	flex: 0 0 2.5rem;
	margin-left: -2.5rem;
	background: linear-gradient(to right, #fffdf900, #fffdf9);
	content: "";
	pointer-events: none;
}
.scroll-sign :where(th, td):last-child {
	position: relative;
	z-index: 3;
}
.scroll-sign :where(td:last-child) {
	background: #fffdf9;
}
/* The left edge: the columns go below the first column, which stays. A fade
   at its right edge shows after the first pixels of a scroll. A browser with
   no scroll timeline shows no fade there. */
.scroll-sign th:first-child::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 1.5rem;
	background: linear-gradient(to right, #fffdf9, #fffdf900);
	content: "";
	opacity: 0;
	pointer-events: none;
}
@supports (animation-timeline: scroll()) {
	.scroll-sign th:first-child::after {
		animation: scroll-sign-left linear both;
		animation-timeline: scroll(nearest inline);
		animation-range: 0 1.5rem;
	}
}
@keyframes scroll-sign-left {
	to {
		opacity: 1;
	}
}
.cost-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.84rem;
	font-variant-numeric: tabular-nums;
}
.cost-table th,
.cost-table td {
	padding: 0.62rem 0.7rem;
	border-bottom: 1px solid #ebe7dd;
	text-align: right;
	white-space: nowrap;
}
/* 15 columns: the 12 months are in view at a desktop width. */
.cost-months {
	font-size: 0.77rem;
}
.cost-months th,
.cost-months td {
	padding: 0.62rem 0.3rem;
}
.cost-months th:last-child,
.cost-months td:last-child {
	padding-right: 0.7rem;
}
.cost-months thead th {
	white-space: normal;
}
.cost-table thead th {
	background: #f6f3ec;
	color: #526171;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: bottom;
}
.cost-table thead th small {
	display: block;
	font-weight: 600;
	letter-spacing: 0;
}
.cost-table tbody tr:last-child > * {
	border-bottom: 0;
}
.cost-months th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 8.5rem;
	max-width: 14rem;
	padding-left: 0.8rem;
	background: #fffdf9;
	box-shadow: 1px 0 0 #ebe7dd;
	text-align: left;
	white-space: normal;
	/* A long word of a category name stays in the column. */
	overflow-wrap: anywhere;
}
.cost-months thead th:first-child {
	background: #f6f3ec;
}
.cost-months tbody th {
	font-weight: 600;
}
.cost-months .indent-0 > th {
	font-weight: 800;
}
.cost-months .indent-1 > th:first-child {
	padding-left: 1.6rem;
}
.cost-months .indent-2 > th:first-child {
	padding-left: 2.5rem;
}
.cost-months .indent-3 > th:first-child {
	padding-left: 3.4rem;
}
.cost-months .cost-own > th {
	color: var(--muted);
	font-style: italic;
	font-weight: 500;
}
.cost-months .cost-average {
	background: #f4f8f4;
	font-weight: 800;
}
.cost-months .cost-amount a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.cost-months .cost-amount a:hover,
.cost-months .cost-amount a:focus-visible {
	color: #0d4938;
	text-decoration: underline;
}
.cost-months .is-empty {
	color: var(--muted);
}
.cost-months .is-chosen {
	background: #dcece2;
}
.cost-months abbr {
	margin-left: 0.1rem;
	color: #7a5200;
	font-weight: 800;
	text-decoration: none;
	cursor: help;
}
.cost-months tfoot th,
.cost-months tfoot td {
	border-top: 2px solid #17263a;
	border-bottom: 0;
	font-weight: 800;
}
.cost-list th,
.cost-list td {
	text-align: left;
	white-space: normal;
}
.cost-list tbody th {
	min-width: 11rem;
	font-weight: 700;
}
.cost-list tbody th small {
	display: block;
	font-weight: 500;
}
/* The link to the receipt of a part of a payment is a control, so it is 44 px high. */
.cost-list .cost-part a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.cost-list .cost-amount {
	text-align: right;
	white-space: nowrap;
}
.cost-list form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.cost-list button {
	min-height: 2.75rem;
	padding: 0.45rem 0.75rem;
	font-size: 0.78rem;
	white-space: nowrap;
}
.cost-notes {
	display: grid;
	gap: 0.3rem;
	max-width: 72ch;
	padding-left: 1.1rem;
	font-size: 0.88rem;
	line-height: 1.55;
}
.cost-notes .cost-warning {
	color: #7a5200;
	font-weight: 700;
}
.cost-categories > summary {
	width: fit-content;
	padding: 0.75rem 0;
	color: #176b50;
	font-weight: 800;
	cursor: pointer;
}
.cost-categories .settings-form {
	max-width: 40rem;
}
.cost-choices {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cost-choices .indent-1 {
	margin-left: 1.7rem;
}
.cost-choices .indent-2 {
	margin-left: 3.4rem;
}
.cost-choices .indent-3 {
	margin-left: 5.1rem;
}
.cost-choices label.check {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.6rem;
	min-height: 2.75rem;
	color: #17263a;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}
.cost-choices label.check input {
	flex: 0 0 auto;
	width: 1.15rem;
	min-height: 0;
	height: 1.15rem;
	accent-color: #16735a;
}
.cost-items {
	margin: 0 0 0.35rem 1.7rem;
}
.cost-items > summary {
	width: fit-content;
	min-height: 44px;
	padding: 0.7rem 0;
	color: #176b50;
	font-weight: 700;
	cursor: pointer;
}
/* A list of transactions is one block for each row, so the button needs no
   scroll. The box asks for its own width: at a window of 1,000 pixels it has
   676 pixels, and the table with its button does not fit. */
@container cost-box (max-width: 52rem) {
	.cost-list,
	.cost-list tbody {
		display: block;
	}
	.cost-list thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.cost-list tbody tr {
		display: grid;
		/* The date is as wide as its text. The category has the room that is left. */
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"payee payee cost"
			"date category category"
			"action action action";
		gap: 0.3rem 0.75rem;
		padding: 0.85rem 0.8rem;
		border-bottom: 1px solid #ebe7dd;
	}
	.cost-list tbody tr:last-child {
		border-bottom: 0;
	}
	.cost-list tbody th,
	.cost-list tbody td {
		min-width: 0;
		padding: 0;
		border: 0;
		overflow-wrap: anywhere;
	}
	.cost-list tbody th {
		grid-area: payee;
	}
	.cost-list tbody td:nth-child(1) {
		grid-area: date;
		color: var(--muted);
		white-space: nowrap;
	}
	.cost-list tbody td:nth-child(3) {
		grid-area: category;
		color: var(--muted);
		text-align: right;
	}
	.cost-list tbody td:nth-child(4) {
		grid-area: cost;
		font-weight: 800;
	}
	.cost-list tbody td:nth-child(5) {
		grid-area: action;
		margin-top: 0.3rem;
	}
}
@media (max-width: 760px) {
	.house-costs .value {
		font-size: 1.45rem;
	}
	.cost-months th:first-child {
		min-width: 7.5rem;
		max-width: 9rem;
	}
	.cost-months .indent-1 > th:first-child {
		padding-left: 1.2rem;
	}
	.cost-months .indent-2 > th:first-child {
		padding-left: 1.7rem;
	}
	.cost-months .indent-3 > th:first-child {
		padding-left: 2.2rem;
	}
	/* The check box stays at the left of its text. The name and the slug are two lines. */
	.cost-choices label.check {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		padding: 0.35rem 0;
	}
	.cost-choices label.check input {
		grid-row: 1 / span 2;
	}
	.cost-choices label.check > span,
	.cost-choices label.check > small {
		grid-column: 2;
		min-width: 0;
		overflow-wrap: anywhere;
	}
}
.receipt-summary {
	margin: 0.4rem 0 0;
	font-size: 1.15rem;
	font-weight: 700;
}
.receipt-month {
	margin: 1.7rem 0 0.6rem;
	color: #526171;
	font-family: Manrope, sans-serif;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.receipt-list {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.receipt-item {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(6.5rem, auto);
	gap: 0.3rem 1.25rem;
	align-items: center;
	min-height: 44px;
	padding: 0.75rem 1rem;
	border: 1px solid #e0ddd4;
	border-radius: 12px;
	background: #fffdf9;
	color: #17263a;
	text-decoration: none;
}
.receipt-item:hover {
	border-color: #82ad96;
	background: #f8fcf8;
}
.receipt-item-name,
.receipt-item-state {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.6rem;
	align-items: center;
	min-width: 0;
}
.receipt-item-name strong {
	overflow-wrap: anywhere;
}
.receipt-item-amount {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}
.receipt-state {
	max-width: 46rem;
	margin: 1.2rem 0 1.8rem;
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	padding: 1rem 1.15rem;
	background: #fffdf9;
}
.receipt-state p {
	margin: 0 0 0.6rem;
	/* An error text can have a file name or an id with no space. */
	overflow-wrap: anywhere;
}
.receipt-state > :last-child {
	margin-bottom: 0;
}
.receipt-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0 1.75rem;
	margin: 0.7rem 0 1.1rem;
	padding: 0;
	list-style: none;
}
.receipt-groups li {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid #e0ddd4;
	padding: 0.4rem 0;
}
.receipt-more {
	margin-top: 2.2rem;
}
.receipt-more summary {
	min-height: 44px;
	cursor: pointer;
	font-weight: 700;
}
.receipt-more form {
	max-width: 46rem;
	margin: 0.4rem 0 1.4rem;
}
.receipt-ask {
	max-width: 46rem;
	margin: 0.4rem 0 1.4rem;
	border: 1px solid #e3c1bd;
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	background: #fdf1ef;
}
.receipt-ask p {
	margin: 0 0 0.5rem;
}
.receipt-ask form {
	margin: 0 0 0.6rem;
}
/* The line editor of a receipt: see pages/receipt_editor.rs. */
/* With the editor open, each line is on the page one time. */
#receipt-lines:has(> .line-editor[open]) > .receipt-read {
	display: none;
}
.line-editor {
	max-width: 46rem;
}
.line-editor > summary,
.line-edit-part > summary {
	width: fit-content;
	min-height: 44px;
	padding: 0.7rem 0;
	font-weight: 800;
	cursor: pointer;
}
.line-edit-part > summary {
	color: #176b50;
}
.sum-box {
	margin: 0.6rem 0 1rem;
	border: 1px solid #e6bc69;
	border-radius: 14px;
	padding: 0.9rem 1.1rem 0.3rem;
	background: #fff8e8;
}
.sum-box.adds-up {
	border-color: #b8d4c5;
	background: #f2faf4;
}
.sum-box dl {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 0.6rem;
}
.sum-box dl > div {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
}
.sum-box dt {
	color: #526171;
	font-size: 0.88rem;
}
.sum-box dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}
.sum-box-difference {
	border-top: 1px solid #e0ddd4;
	padding-top: 0.3rem;
}
.sum-box-note {
	margin: 0 0 0.5rem;
	font-size: 0.88rem;
	line-height: 1.45;
}
.line-edit-list {
	display: grid;
	/* One column that can shrink. An auto column takes the longest word of a
	   row and makes each row wider than the list. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0 0 0.4rem;
	padding: 0;
	list-style: none;
}
.line-edit {
	border: 1px solid #e0ddd4;
	border-radius: 12px;
	padding: 0.6rem 0.9rem 0.1rem;
	background: #fffdf9;
}
.line-edit.warn {
	border-color: #e6bc69;
}
.line-edit-text {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.6rem;
	align-items: baseline;
}
.line-edit-text strong {
	min-width: 0;
	overflow-wrap: anywhere;
}
.line-edit-total {
	margin-left: auto;
	font-size: 0.92rem;
	font-weight: 700;
	white-space: nowrap;
}
.line-edit-text small {
	flex-basis: 100%;
	color: #526171;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.line-edit-text .line-edit-note {
	color: #7a5200;
}
/* "Change" and "Remove" are next to each other until one of them is open. */
.line-edit > .line-edit-part {
	display: inline-block;
	margin-right: 1.2rem;
	vertical-align: top;
}
.line-edit > .line-edit-part[open] {
	display: block;
	margin-right: 0;
	padding-bottom: 0.8rem;
}
.line-edit-part[open] > p {
	margin: 0 0 0.6rem;
	overflow-wrap: anywhere;
}
.line-form {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 38rem;
}
.line-form .line-field-wide,
.line-form .actions {
	grid-column: 1 / -1;
}
.line-form p {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
}
.line-form small {
	font-weight: 400;
	line-height: 1.45;
}
.line-editor button {
	min-height: 44px;
}
.line-add {
	margin-bottom: 0.6rem;
}
@media (max-width: 760px) {
	.line-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.line-form .line-field-price,
	.line-form .line-field-kind {
		grid-column: 1 / -1;
	}
}
@media (max-width: 760px) {
	.receipt-item {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.receipt-item-name {
		grid-column: 1;
		grid-row: 1;
	}
	.receipt-item-amount {
		grid-column: 2;
		grid-row: 1;
	}
	.receipt-item-state {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.receipt-lines .table-heading {
		display: none;
	}
	.receipt-lines .row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.35rem 0.8rem;
	}
	.receipt-lines .row > :first-child,
	.receipt-lines .row > :last-child {
		grid-column: 1 / -1;
	}
}
.insights-rule {
	max-width: 72ch;
	margin-top: 0;
	font-size: 0.88rem;
	line-height: 1.55;
}
.insight-cards h2 {
	margin-top: 2rem;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
}
.insight-cards .grid {
	margin-top: 1rem;
}
.insight-cards .cards-with-rows {
	align-items: start;
}
/* The heading of an item card is a link to the price view of its product.
   The padding makes the link 44 px high for a finger. The margin takes the
   same room away, so a card with a link is as high as a card with none. */
.insight-cards .card h3 a {
	display: inline-block;
	margin: -0.85rem 0;
	padding: 0.85rem 0;
}
.card-rows {
	margin: 0.8rem 0 0;
	border-top: 1px solid #e0ddd4;
	padding: 0.5rem 0 0;
	list-style: none;
	font-size: 0.9rem;
}
.card-rows li {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.2rem 0;
}
.card-row-name {
	min-width: 0;
	color: #526171;
	overflow-wrap: anywhere;
}
.card-row-amount {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}
.item-groups {
	max-width: 52rem;
	margin-top: 1.5rem;
}
.item-group-parent {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	margin: 2rem 0 0;
	border-bottom: 2px solid #17263a;
	padding-bottom: 0.4rem;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
}
.item-group-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}
.item-group-rows li {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(6.5rem, auto);
	gap: 0.15rem 1.25rem;
	align-items: baseline;
	min-height: 44px;
	border-bottom: 1px solid #e0ddd4;
	padding: 0.6rem 0 0.6rem 1rem;
}
.item-group-name {
	overflow-wrap: anywhere;
}
.item-group-rest .item-group-name {
	color: #526171;
	font-weight: 700;
}
.item-group-count {
	color: #526171;
	font-size: 0.9rem;
}
.item-group-amount {
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0;
	text-align: right;
	white-space: nowrap;
}
.item-group-check {
	max-width: none;
	margin: 0.6rem 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
}
.item-groups .cost-notes {
	margin-top: 2rem;
}
.item-group-list {
	max-width: 52rem;
	min-width: 0;
	margin-top: 2rem;
}
.item-group-list-diff {
	color: #8a4b1a;
}
.item-group-list-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.item-group-list-rows li {
	display: grid;
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(5rem, auto);
	gap: 0.15rem 0.75rem;
	align-items: baseline;
	min-width: 0;
	border-bottom: 1px solid #e0ddd4;
	padding: 0.55rem 0;
}
.item-group-list-lines li {
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 5rem) minmax(0, 4.5rem) minmax(5rem, auto);
}
.item-group-list-date,
.item-group-list-shop,
.item-group-list-name,
.item-group-list-qty,
.item-group-list-price {
	min-width: 0;
	overflow-wrap: anywhere;
}
.item-group-list-amount {
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
}
.item-group-show-all {
	margin-top: 0.75rem;
}
@media (max-width: 760px) {
	.item-group-rows li {
		grid-template-columns: minmax(0, 1fr) auto;
		padding-left: 0.5rem;
	}
	.item-group-name {
		grid-column: 1;
		grid-row: 1;
	}
	.item-group-amount {
		grid-column: 2;
		grid-row: 1;
	}
	.item-group-count {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.item-group-list-rows li,
	.item-group-list-lines li {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.item-group-list-date {
		grid-column: 1;
		grid-row: 1;
	}
	.item-group-list-amount {
		grid-column: 2;
		grid-row: 1;
	}
	.item-group-list-shop,
	.item-group-list-name,
	.item-group-list-qty,
	.item-group-list-price {
		grid-column: 1 / -1;
	}
}
/* Insights prices and savings: product tables that wrap on a narrow screen. */
.prices .price-table,
.savings .price-table {
	width: 100%;
	min-width: 0;
}
.prices .price-table th,
.prices .price-table td,
.savings .price-table th,
.savings .price-table td {
	min-width: 0;
	/* Nine columns: with this padding the last one is in view at a content
	   width of 676 pixels, which a window of 1,000 pixels has. */
	padding-right: 0.3rem;
	padding-left: 0.3rem;
}
.prices .price-table th:first-child,
.prices .price-table td:first-child {
	padding-left: 0.8rem;
}
.prices .price-table th:last-child,
.prices .price-table td:last-child {
	padding-right: 0.7rem;
}
.prices .price-table .price-name,
.savings .price-table .price-name {
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
	/* Keep a readable first column when other cells are nowrap. */
	min-width: 7rem;
}
@media (max-width: 40rem) {
	.prices .price-table .price-name {
		max-width: 11rem;
	}
	/* On a phone, each savings row is a labeled block so amounts stay whole. */
	.savings .cost-scroll {
		overflow-x: visible;
	}
	.savings .price-table,
	.savings .price-table thead,
	.savings .price-table tbody,
	.savings .price-table tr,
	.savings .price-table th,
	.savings .price-table td {
		display: block;
		width: 100%;
	}
	.savings .price-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.savings .price-table tr {
		margin: 0;
		padding: 0.75rem 0.7rem;
		border-bottom: 1px solid #ebe7dd;
	}
	.savings .price-table tbody tr:last-child {
		border-bottom: 0;
	}
	.savings .price-table .price-name {
		text-align: left;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
		max-width: none;
		padding: 0 0 0.35rem;
		border-bottom: 0;
	}
	.savings .price-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		text-align: right;
		padding: 0.2rem 0;
		border-bottom: 0;
		white-space: normal;
	}
	.savings .price-table td::before {
		content: attr(data-label);
		flex: 0 1 auto;
		text-align: left;
		color: #5c584f;
		font-weight: 600;
	}
	.savings .price-table .savings-num {
		white-space: nowrap;
	}
	.savings .price-table .savings-unit {
		display: none;
	}
}
.savings-part {
	margin: 1.5rem 0;
	min-width: 0;
}
.savings-currency {
	margin: 1.5rem 0;
	min-width: 0;
}
.savings-currency-heading {
	margin: 0 0 0.75rem;
}
.price-summary {
	display: grid;
	gap: 0.45rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}
.price-part {
	margin: 1.5rem 0;
	min-width: 0;
}
.price-chart {
	max-width: 100%;
	margin: 0.75rem 0;
	overflow-x: auto;
}
.price-chart-svg {
	display: block;
	width: 100%;
	max-width: 40rem;
	height: auto;
}
.price-lines {
	margin: 1rem 0;
}
.price-lines > summary {
	width: fit-content;
	min-height: 44px;
	padding: 0.7rem 0;
	cursor: pointer;
}
.price-outlier {
	color: #8a4b08;
}
/* Loans: one block for each loan. The parts with a form open in place. */
.loan-list {
	display: grid;
	gap: 1.25rem;
	margin: 1.5rem 0;
}
.loan {
	min-width: 0;
	border: 1px solid #dcd8cd;
	border-radius: 16px;
	padding: 1.15rem;
	background: #fffdf9;
	box-shadow: 0 2px 4px #17263a08;
}
.loan-head h2 {
	margin: 0 0 0.2rem;
	overflow-wrap: anywhere;
}
.loan-head p {
	margin: 0 0 0.9rem;
	overflow-wrap: anywhere;
}
.loan-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.8rem 1.25rem;
	margin: 0 0 1rem;
}
.loan-facts > div {
	min-width: 0;
}
.loan-fact-wide {
	grid-column: 1 / -1;
}
.loan-facts dt {
	color: #526171;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.loan-facts dd {
	margin: 0.15rem 0 0;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.loan-facts dd strong {
	font-size: 1.15rem;
}
.loan-facts dd small {
	display: block;
}
.loan-note {
	max-width: none;
	margin: 0 0 0.6rem;
	border-left: 3px solid #e6c98a;
	padding: 0.35rem 0.75rem;
	background: #fffaf0;
	font-size: 0.9rem;
	line-height: 1.45;
}
.loan-warning {
	max-width: none;
	margin: 0 0 0.75rem;
	border: 1px solid #e6c98a;
	border-radius: 12px;
	padding: 0.55rem 0.85rem;
	background: #fffaf0;
	font-size: 0.95rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.loan h3 {
	margin: 1.1rem 0 0.3rem;
}
/* The table of the payments scrolls in its own element, so the page does not. */
.loan-scroll {
	max-width: 100%;
	margin: 0.5rem 0 1rem;
	overflow-x: auto;
	border: 1px solid #ebe7dd;
	border-radius: 12px;
}
.loan-scroll:focus-visible {
	outline: 2px solid #16735a;
	outline-offset: 2px;
}
.loan-payments {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}
.loan-payments th,
.loan-payments td {
	padding: 0.5rem 0.7rem;
	border-bottom: 1px solid #ebe7dd;
	text-align: right;
	white-space: nowrap;
}
.loan-payments th:first-child {
	text-align: left;
}
.loan-payments thead th {
	background: #f6f3ec;
	color: #526171;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.loan-payments tbody th {
	font-weight: 600;
}
/* The count of the bank rows of an instalment, after its date. */
.loan-payments tbody th small {
	font-size: 0.75rem;
	font-weight: 400;
}
.loan-payments tbody tr:last-child > * {
	border-bottom: 0;
}
.loan-part {
	border-top: 1px solid #ebe7dd;
}
.loan-part[open] {
	padding-bottom: 1rem;
}
.loan-part > summary,
.loan-row-edit > summary {
	min-height: 44px;
	padding: 0.7rem 0;
	font-weight: 800;
	cursor: pointer;
}
.loan-row-edit > summary {
	width: fit-content;
	color: #176b50;
}
.loan-rows {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.loan-rows li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.2rem 1rem;
	align-items: center;
	border: 1px solid #e0ddd4;
	border-radius: 12px;
	padding: 0.6rem 0.9rem;
}
.loan-row-text {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.6rem;
	align-items: baseline;
	min-width: 0;
	font-variant-numeric: tabular-nums;
}
.loan-row-text small {
	flex-basis: 100%;
}
.loan-row-edit {
	grid-column: 1 / -1;
}
.loan-rows button {
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	font-size: 0.88rem;
}
.loan-form {
	max-width: 34rem;
}
.loan-form .actions {
	margin-top: 0.3rem;
}
.loan-offer-result {
	margin-top: 1rem;
}
.loan-offer {
	width: 100%;
	max-width: 34rem;
	margin: 0 0 0.75rem;
	border-collapse: collapse;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}
.loan-offer th,
.loan-offer td {
	padding: 0.45rem 0.6rem;
	border-bottom: 1px solid #ebe7dd;
	text-align: right;
}
.loan-offer th:first-child,
.loan-offer td:first-child {
	text-align: left;
}
.loan-offer thead th {
	color: #526171;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.loan-offer-result p {
	max-width: none;
	margin: 0 0 0.4rem;
}
@media (max-width: 760px) {
	.loan {
		padding: 0.9rem;
	}
	.loan-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.loan-payments {
		font-size: 0.82rem;
	}
	.loan-payments th,
	.loan-payments td {
		padding: 0.45rem 0.5rem;
	}
}
/* Forecast: the form, the chart, and the table of the next months. */
.forecast-form {
	max-width: 44rem;
	margin: 1rem 0 1.75rem;
}
.forecast-sentence {
	margin: 0 0 0.6rem;
}
.forecast-fields {
	display: grid;
	gap: 0.8rem;
	min-width: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid #e0ddd4;
	padding: 0.7rem 0 0;
}
.forecast-fields legend {
	padding: 0 0.6rem 0 0;
	color: #17263a;
	font-size: 0.92rem;
	font-weight: 800;
}
.forecast-field {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}
.forecast-field small {
	font-size: 0.8rem;
	font-weight: 500;
}
.forecast-field .error {
	margin: 0;
	font-size: 0.85rem;
}
.forecast-cost {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0.75rem;
}
.forecast-form .actions {
	margin-top: 0.2rem;
}
.forecast-form .actions a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.forecast-left-out,
.forecast-transfer-note,
.forecast-estimate-line {
	max-width: 44rem;
}
.forecast-currency {
	min-width: 0;
	margin: 2rem 0;
}
.forecast-chart {
	max-width: 100%;
	margin: 0.75rem 0 0.4rem;
}
/* The chart is 480 units wide with texts of 14 units. At this width a text
   is about as high as the text of the page, and on a phone about 10 pixels. */
.forecast-chart-svg {
	display: block;
	width: 100%;
	max-width: 34rem;
	height: auto;
}
/* Six columns: with this size they are in view at a content width of 676
   pixels, which a window of 1,000 pixels has, with amounts of seven digits. */
.forecast-table {
	min-width: 0;
	font-size: 0.8rem;
}
.forecast-table th,
.forecast-table td {
	padding-right: 0.3rem;
	padding-left: 0.3rem;
}
.forecast-table th:last-child,
.forecast-table td:last-child {
	padding-right: 0.8rem;
}
.forecast-table thead th {
	white-space: normal;
}
.forecast-table th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	padding-left: 0.8rem;
	background: #fffdf9;
	box-shadow: 1px 0 0 #ebe7dd;
	text-align: left;
	white-space: normal;
}
.forecast-table thead th:first-child {
	background: #f6f3ec;
}
/* The column "End" stays in view at the right edge, as the month does at the
   left edge. With amounts of eight digits or more, the table is wider than
   its box, and the columns between the two scroll below them.
   A fade at the left edge of "End" is the sign that a column is below it. It
   shows while the box can scroll more to the right, and it uses a scroll
   timeline. A browser with no scroll timeline does not keep "End" in view.
   The box then cuts "End" at its right edge, and the cut text is the only
   sign there: the last column is above the strip of the box. */
@supports (animation-timeline: scroll()) {
	.forecast-table th:last-child,
	.forecast-table td:last-child {
		position: sticky;
		right: 0;
		box-shadow: -1px 0 0 #ebe7dd;
	}
	.forecast-table th:last-child::after,
	.forecast-table td:last-child::after {
		position: absolute;
		top: 0;
		right: 100%;
		bottom: 0;
		width: 1.5rem;
		background: linear-gradient(to right, #fffdf900, #fffdf9);
		content: "";
		opacity: 0;
		pointer-events: none;
		animation: forecast-end-sign linear both;
		animation-timeline: scroll(nearest inline);
		animation-range: calc(100% - 0.5rem) 100%;
	}
	.forecast-table thead th:last-child::after {
		background: linear-gradient(to right, #f6f3ec00, #f6f3ec);
	}
}
/* The fade is there until the last 0.5 rem of the scroll, and it goes in that
   part. A box that does not scroll has no scroll timeline, so its fade keeps
   the opacity 0. */
@keyframes forecast-end-sign {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
.forecast-table tbody th {
	font-weight: 600;
}
.forecast-month {
	white-space: nowrap;
}
.forecast-note {
	display: block;
	max-width: 14rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}
/* The cost that the user added: a line below the name of its month. */
.forecast-cost-line {
	display: block;
	max-width: 14rem;
	font-weight: 600;
}
.forecast-end {
	font-weight: 800;
}
.forecast-below .forecast-end {
	color: #a83232;
}
/* In a narrow box, a month is a block: its name, then one line for each
   column with the heading of the column at the left. No amount is cut, and
   the box does not scroll to the side.
   With balances of seven digits, the table needs 594 pixels in EUR and 619
   pixels in BRL (measured in Chromium, issue #297). So the blocks start at a
   box of 640 pixels, and a table is never wider than its box with amounts up
   to that size. */
@container cost-box (max-width: 40rem) {
	.forecast-scroll::after,
	.forecast-scroll .forecast-table th:first-child::after,
	.forecast-scroll .forecast-table th:last-child::after,
	.forecast-scroll .forecast-table td:last-child::after {
		display: none;
	}
	.forecast-table,
	.forecast-table tbody,
	.forecast-table tr,
	.forecast-table th,
	.forecast-table td {
		display: block;
		width: 100%;
	}
	.forecast-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
		white-space: nowrap;
	}
	.forecast-table tr {
		padding: 0.7rem 0.8rem;
		border-bottom: 1px solid #ebe7dd;
	}
	.forecast-table tbody tr:last-child {
		border-bottom: 0;
	}
	.forecast-table tbody th:first-child {
		position: static;
		padding: 0 0 0.3rem;
		border-bottom: 0;
		box-shadow: none;
		font-size: 0.92rem;
		font-weight: 800;
	}
	.forecast-table td,
	.forecast-table td:last-child {
		display: flex;
		position: static;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.15rem 0;
		border-bottom: 0;
		box-shadow: none;
		white-space: normal;
	}
	.forecast-table td::before {
		color: var(--muted);
		font-weight: 600;
		text-align: left;
		content: attr(data-label);
	}
	.forecast-table td.forecast-end {
		margin-top: 0.25rem;
		border-top: 1px solid #ebe7dd;
		padding-top: 0.4rem;
	}
	.forecast-note,
	.forecast-cost-line {
		max-width: none;
	}
	.forecast-cost-line {
		font-size: 0.8rem;
	}
}
.forecast-how {
	max-width: 44rem;
	margin: 1.5rem 0;
}
.forecast-how > summary {
	width: fit-content;
	min-height: 44px;
	padding: 0.7rem 0;
	font-weight: 800;
	cursor: pointer;
}
.forecast-rules {
	margin: 0.4rem 0 1rem;
}
.forecast-rules dt {
	font-weight: 800;
}
.forecast-rules dd {
	margin: 0 0 0.7rem;
}
.forecast-estimate td:last-child,
.forecast-estimate th:last-child {
	padding-right: 0;
}
.receipt-upload-button input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.receipt-upload-button {
	min-height: 44px;
}
.receipt-upload-button:focus-within {
	outline: 2px solid #16735a;
	outline-offset: 2px;
}
.receipt-upload-list {
	margin: 0.5rem 0;
	padding: 0;
	list-style: none;
}
.receipt-upload-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: space-between;
	min-height: 44px;
	align-items: center;
	border-bottom: 1px solid #e0ddd4;
}
.receipt-upload-name {
	overflow-wrap: anywhere;
}
.receipt-upload-list li[data-state="refused"] .receipt-upload-state {
	color: #a12626;
}
.receipt-upload-list li[data-state="saved"] .receipt-upload-state {
	color: #16735a;
}