/* Kur Pinigai — vienas stiliaus failas. */
:root {
  color-scheme: light dark;

  --bg: #faf7f2;
  --bg-elev: #ffffff;
  --ink: #1c1917;
  --ink-soft: #6b625a;
  --line: #e6ded2;
  --accent: #15803d;
  --accent-ink: #ffffff;
  --accent-soft: #dcfce7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 12px 32px -18px rgba(28, 25, 23, .35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14120f;
    --bg-elev: #1e1b17;
    --ink: #f5f0e8;
    --ink-soft: #a8a09a;
    --line: #322d27;
    --accent: #4ade80;
    --accent-ink: #0b2b17;
    --accent-soft: #12341f;
    --danger: #fca5a5;
    --danger-soft: #3b1616;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -20px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 15% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
}

.landing {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 6rem) 1.25rem 4rem;
}

.brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.brand .wordmark { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; }

/* The heading under the wordmark: what the thing does, in the words somebody
   would search for. Smaller than the brand lockup, larger than the lede. */
.landing h1 {
  font-size: clamp(1.35rem, 3.5vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 34rem;
  margin: 0 0 .85rem;
}
.landing .card h1 { font-size: 1.25rem; margin: 0 0 .75rem; }

.mark {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 1.35rem;
}

.lede {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 0 2.5rem;
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.card h2 { margin: 0 0 .35rem; font-size: 1.15rem; letter-spacing: -.01em; }
.hint { color: var(--ink-soft); font-size: .925rem; margin: 0 0 1.25rem; }

form { display: grid; gap: .5rem; }
label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

input[type="email"] {
  width: 100%;
  padding: .8rem .9rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

button {
  justify-self: start;
  margin-top: .35rem;
  padding: .7rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}

button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: .55; cursor: progress; }

.status { margin: 1rem 0 0; font-size: .925rem; min-height: 1.4em; }
.status:empty { margin: 0; min-height: 0; }
.status-ok { color: var(--accent); background: var(--accent-soft); padding: .7rem .9rem; border-radius: 10px; }
.status-error { color: var(--danger); background: var(--danger-soft); padding: .7rem .9rem; border-radius: 10px; }

.features {
  list-style: none;
  display: grid;
  gap: 1rem;
  /* 16rem, not 12: four features at 12rem land 3-up and leave the fourth
     stranded on a row of its own. This lays them out two by two, which also
     suits the longer sentences under each heading. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  padding: 0;
  margin: 2.5rem 0 0;
}

.features li { display: grid; gap: .2rem; border-top: 2px solid var(--line); padding-top: .75rem; }
.features strong { font-size: .95rem; }
.features span { color: var(--ink-soft); font-size: .9rem; }

/* The closing block: who can see the money. It is deliberately not a card —
   the page already has one, and the answer to "is this safe" should not look
   like another product feature. The claim is marked in the margin the way you
   would mark a passage you mean, and the facts under it are listed like the
   rows of the statement the whole app is built on. */
.trust {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.75rem clamp(1.5rem, 5vw, 3rem);
}

/* The rule belongs to the claim, not to the whole block: run it down the list
   as well and it becomes a long green bar holding up nothing. */
.trust-say {
  align-self: start;
  padding-left: clamp(.9rem, 3vw, 1.25rem);
  border-left: 3px solid var(--accent);
}

/* The split is uneven on purpose: the claim needs a short measure, the facts
   need a long one. Below that, they stack and the measure takes care of itself. */
@media (min-width: 44rem) {
  .trust { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.trust-say h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
}

.trust-say p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.trust-say .trust-more { margin-top: .75rem; }
.trust-more a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }

.trust-list { margin: 0; display: grid; }
.trust-list > div { padding: .8rem 0; border-top: 1px solid var(--line); }
.trust-list > div:first-child { border-top: none; padding-top: 0; }
.trust-list > div:last-child { padding-bottom: 0; }
.trust-list dt { font-weight: 600; font-size: .95rem; }
.trust-list dd { margin: .15rem 0 0; color: var(--ink-soft); font-size: .9rem; }

/* The site footer, under every page: the terms of the thing, and who wrote it.
   It sits outside the page's own <main>, so it carries the same width itself
   rather than inheriting one. */
.sitefoot {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .85rem;
  text-align: center;
}

.sitefoot p { margin: 0 0 .35rem; }
.sitefoot p:last-child { margin-bottom: 0; }
.sitefoot a { color: inherit; }
/* The separators divide, they are not read, so they are faded rather than
   set in the same ink as the links they stand between. */
.sitefoot .sep { padding: 0 .2rem; opacity: .5; }

/* Its rule is the width of the page above it, not a width of its own: the
   landing and the prose pages are each narrower than the app. */
main.landing ~ .sitefoot { max-width: 46rem; }
main.prose ~ .sitefoot { max-width: 44rem; }

/* Signed-in shell */
.app { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* The pages the footer points at: prose rather than a list or a form, so the
   measure is shorter than the app's and the headings have room above them. */
.prose { max-width: 44rem; }
.prose-head { margin-bottom: 1.5rem; }
.prose-head .brand-small { text-decoration: none; color: inherit; }
.prose h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 1rem; }
.prose h2 { font-size: 1.1rem; letter-spacing: -.01em; margin: 2rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose strong { color: var(--ink); }
.prose code { font-size: .9em; }

/* The bar holds a lot: the brand, the two-view toggle, five links, the address
   and the way out. Seven things never fit on one line, so the bar is built as
   two: who you are, then where in your money you are. Each line is anchored
   left and closed right, rather than breaking wherever the address happens to
   run out of room. */
.appbar {
  display: grid;
  gap: .85rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.appbar-identity,
.appbar-place {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1rem;
}

/* The address and the way out close the first line; the brand holds its left
   end. */
.appbar-identity .who { margin-left: auto; }

.brand-small { display: flex; align-items: center; gap: .5rem; font-weight: 600; white-space: nowrap; }
.brand-small .mark { width: 1.75rem; height: 1.75rem; font-size: 1rem; border-radius: 8px; }
/* An address can be long enough to set the width of the whole bar by itself,
   so it gives way with an ellipsis and keeps the full text in its tooltip. */
.who {
  color: var(--ink-soft);
  font-size: .9rem;
  min-width: 0;
  max-width: min(24rem, 50vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.who { text-decoration: none; }
a.who:hover { color: var(--accent); }

.linkish {
  background: none;
  color: var(--ink-soft);
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
}
.linkish:hover { color: var(--ink); filter: none; }

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

/* Išlaidos */
.appnav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; }
.appnav a { text-decoration: none; color: var(--ink-soft); }
.appnav a:hover { color: var(--accent); }

.app .card + .card { margin-top: 1.5rem; }

.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.list-head h2 { margin: 0; }

/* The search: fields that wrap into as many columns as fit, then the button
   row under them, so the same form works on a phone and on a wide screen. */
.search {
  gap: .75rem;
  padding: .9rem 1rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: .75rem;
}
.search-fields {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.search .field { display: grid; gap: .25rem; }
.search input[type="date"],
.search input[type="text"] {
  width: 100%;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.search-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.search-actions button { margin-top: 0; padding: .5rem 1.1rem; }
.search .tick {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
}
.search .clear { font-size: .875rem; }
.search-hint { margin: 0; font-size: .825rem; }

/* What the search found, above the rows it found. */
.found {
  margin: 1rem 0 0;
  font-size: .925rem;
  font-weight: 600;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.found .more { font-weight: 500; color: var(--ink-soft); font-size: .85rem; }

/* Importai: the upload, and what has been uploaded before. */
.import { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

/* The file input is the button. It stays in the DOM, and stays focusable, so
   the keyboard and the form both still have it; the label around it is what is
   actually seen, and :focus-within is how the focus ring gets there. */
.file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  /* A label by tag, a button by role: the caps and tracking the form labels
     carry would make it the loudest thing on the page. */
  font-size: .95rem;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.file-button:hover { filter: brightness(1.05); }
.file-button:active { transform: translateY(1px); }
.file-button:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* The paperclip says "a file goes here" without a word of Lithuanian to
   translate; the label beside it says the rest. */
.file-button::before { content: "\1F4CE"; font-size: 1rem; }
.file-button input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.imports { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .25rem; }
.imports li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .875rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding: .6rem 0;
}
.imports li.empty { border-top: 0; color: var(--ink-soft); }
/* Fixed-width figures so the dates stack into a column that can be read down. */
.imports .imported-at { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.imports .filename { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.imports .counts { color: var(--ink-soft); }
.imports form { margin-left: auto; }
.imports button { margin-top: 0; }

.expenses { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .25rem; }
.row-note { font-size: .925rem; padding: .7rem .9rem; border-radius: 10px; display: flex; align-items: center; gap: .75rem; }
.row-note-close { margin-left: auto; border: 0; background: none; color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 .25rem; }

.expense {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "what when amount" "form form form";
  gap: .35rem 1rem;
  align-items: start;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}

.expense .what { grid-area: what; min-width: 0; display: grid; gap: .15rem; }
.expense .seller { font-size: .975rem; }
.seller-none { color: var(--ink-soft); font-weight: 500; font-style: italic; }
.expense .description {
  color: var(--ink-soft);
  font-size: .825rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expense .when { grid-area: when; color: var(--ink-soft); font-size: .85rem; display: grid; justify-items: end; }
.expense .spent-on { font-size: .775rem; opacity: .8; }
.expense .amount {
  grid-area: amount;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  display: grid;
  justify-items: end;
  gap: .1rem;
}

/* An expense left out of the sums keeps its place and its money on screen, and
   says so twice: the figure is struck through, and the word underneath names
   what the strike means. The row itself is not dimmed — it is still an expense,
   and still the one row the user may want to find again. */
.expense.is-excluded .sum { text-decoration: line-through; color: var(--ink-soft); }
.expense .not-counted {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

.categorise {
  grid-area: form;
  display: flex;
  align-items: start;
  gap: .5rem;
  flex-wrap: wrap;
}

.categorise input[type="text"],
.rename input[type="text"] {
  width: 100%;
  padding: .4rem .6rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.categorise input[type="text"]:focus,
.rename input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The category and the news about it are one column: the strip under the input
   is reserved whether or not anything is in it, so saving and saved never move
   the rule buttons next to them. */
.category-field { display: grid; gap: .3rem; width: 12rem; }
.save-state { display: grid; height: .95rem; }
.save-state > * { grid-area: 1 / 1; align-self: center; }

.saving {
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: hidden;
}
.saving::after {
  content: "";
  display: block;
  height: 100%;
  width: 35%;
  border-radius: 999px;
  background: var(--accent);
  animation: saving-sweep 900ms ease-in-out infinite;
}
@keyframes saving-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(285%); }
}

.saved {
  font-size: .75rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity .4s ease;
}
.saved.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .saving::after { animation: none; width: 100%; opacity: .55; }
  .saved { transition: none; }
}

/* Where the category came from: one line at a time, on the input's own line,
   so the row keeps its height and the eye learns one place to look. Neither
   state is given a border — the input is the work, and a row that is already
   done should not carry the loudest control in the list. The padding sits the
   text on the input's line without tying the two together in a grid. */
.rule-open,
.exclude-toggle,
.by-rule {
  margin: 0;
  padding: .5rem 0 0;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.6;
  background: none;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}

/* The offer invites, so it takes the accent; the statement is an answer to a
   question nobody has asked yet, so it stays quiet and carries a dotted rule
   to show it can be opened. */
.rule-open { color: var(--accent); }
.by-rule {
  color: var(--ink-soft);
  text-decoration: underline dotted color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}

/* The quietest control on the row: it is used once in a while, on the one
   payment somebody recognised, and should never compete with the category. */
.exclude-toggle {
  margin-left: auto;
  color: var(--ink-soft);
  cursor: pointer;
}

.rule-open:hover,
.exclude-toggle:hover,
.by-rule:hover {
  color: var(--accent);
  filter: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rule-open:focus-visible,
.exclude-toggle:focus-visible,
.by-rule:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* It reads as text, so it should not shift like a button. */
.rule-open:active,
.exclude-toggle:active { transform: none; }

/* The draft is one panel with one question in it, so it stacks: the question,
   the conditions to tick, the buttons, then what the ticks will do. */
.rule-draft,
.merge-draft {
  grid-area: form;
  display: grid;
  gap: .55rem;
  padding: .7rem .8rem;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
}
.draft-head { margin: 0; font-size: .85rem; }
.draft-head strong { font-weight: 600; }

/* Tick, what it is, and the text it matches: one row per condition, with the
   values left-aligned under each other so the two are read as alternatives. */
.draft-match {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: .4rem .6rem;
}
.draft-match input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
}
.rule-draft label {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
  white-space: nowrap;
}
/* An unticked half is still legible — it is the text you would tick to use —
   but it steps back so the ticked condition reads as the live one. */
.rule-draft input[type="text"]:disabled {
  color: var(--ink-soft);
  background: transparent;
  opacity: .75;
}
.rule-draft input[type="text"] {
  width: 100%;
  padding: .4rem .6rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rule-draft input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.draft-buttons { display: flex; gap: .4rem; align-items: center; }
.draft-buttons button { margin-top: 0; padding: .35rem .8rem; font-size: .85rem; }
.draft-buttons button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.draft-hint {
  margin: 0;
  font-size: .775rem;
  color: var(--ink-soft);
}

.empty { color: var(--ink-soft); font-size: .925rem; padding: 1rem 0; border-top: 1px solid var(--line); }

.categories { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .25rem; }

/* Name on the left, what stands behind it on the right, and the merge question
   taking over the whole row when a rename turns out to be one. */
.category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "form form";
  align-items: start;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
.rename {
  grid-area: form;
  display: flex;
  align-items: start;
  gap: 1rem;
  flex-wrap: wrap;
}
.rename .category-field { width: 16rem; }
.category .counts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-top: .45rem;
  font-size: .85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.category .counts a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.category .counts a:hover { color: var(--accent); border-bottom-color: currentColor; }
.category .counts .dot { opacity: .5; }
.merge-draft { width: 100%; }

.rules { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .25rem; }
.rules li {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
/* Arriving from an expense that a rule categorised: the rule the link was
   about is marked, so the page answers the question the row asked. */
.rules li:target {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: 8px;
  padding-inline: .7rem;
  scroll-margin-top: 1.5rem;
}

.rules .kind {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .55rem;
}
.rules .pattern {
  font-size: .85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .1rem .4rem;
  overflow-wrap: anywhere;
}
.rules .arrow { color: var(--ink-soft); }
.rules .plus { color: var(--ink-soft); }
.rules form { margin-left: auto; }
.rules button { margin-top: 0; }

/* Statistika: the two charts, and the controls they share.

   The ten slice colours are the one palette in the file that is not a theme
   token: a chart needs colours that stay apart from each other, not colours
   that agree with the page. They are lightened for the dark theme, where the
   same hues would sit too close to the background to be told apart. */
:root {
  --colour-1: #15803d;
  --colour-2: #b45309;
  --colour-3: #1d4ed8;
  --colour-4: #b91c1c;
  --colour-5: #6d28d9;
  --colour-6: #0e7490;
  --colour-7: #a16207;
  --colour-8: #be185d;
  --colour-9: #4d7c0f;
  --colour-10: #57534e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --colour-1: #4ade80;
    --colour-2: #fbbf24;
    --colour-3: #60a5fa;
    --colour-4: #f87171;
    --colour-5: #c084fc;
    --colour-6: #22d3ee;
    --colour-7: #fcd34d;
    --colour-8: #f472b6;
    --colour-9: #a3e635;
    --colour-10: #a8a29e;
  }
}

/* Which page of the section is open. The tabs are the section's own heading
   row, so they sit above the period controls, quieter than the h2. */
.tabs { display: flex; gap: 1rem; margin: .25rem 0 1rem; font-size: .9rem; }
.tabs .tab {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: .3rem;
  border-bottom: 2px solid transparent;
}
.tabs .tab:hover { color: var(--accent); }
.tabs .tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* The toggle changes what every page below it is about; the links only change
   which page. A hairline between them says they are not the same kind of
   control, so the two do not read as one strip of buttons. */
.appbar-place .appnav {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}
.appbar-place:not(:has(.scope-toggle)) .appnav { padding-left: 0; border-left: 0; }

/* The ready-made ranges, and the pie's detail toggle, which behave the same
   way: a link that reloads the page as it would look with that one thing
   changed, with the current one marked. */
.periods, .toggle { display: flex; gap: .4rem; flex-wrap: wrap; }
.toggle { align-items: end; }
.periods .period, .toggle .period {
  font-size: .85rem;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .8rem;
  white-space: nowrap;
}
.periods .period:hover, .toggle .period:hover { color: var(--accent); border-color: var(--accent); }
.periods .period.on, .toggle .period.on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* The ring and what it means, side by side while there is room for both, and
   the ring above the list once there is not. */
.chart {
  display: flex;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.donut { width: clamp(12rem, 40vw, 16rem); height: auto; flex: none; }
.donut .slice { transition: opacity .15s ease; }
.donut .slice:hover { opacity: .75; }
.donut-total { font-size: 11px; font-weight: 700; fill: var(--ink); }
.donut-currency { font-size: 5px; fill: var(--ink-soft); letter-spacing: .08em; }

/* The legend is the chart in numbers: name, share, amount, in one column each
   so the amounts can be read down the page. */
.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 18rem; min-width: 0; }
.legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem 0;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.legend li:first-child { border-top: 0; }
.swatch { width: .7rem; height: .7rem; border-radius: 3px; align-self: center; }
.legend-name { overflow-wrap: anywhere; color: var(--ink); text-decoration: none; justify-self: start; }
a.legend-name { border-bottom: 1px solid var(--line); }
a.legend-name:hover { color: var(--accent); border-bottom-color: currentColor; }
.legend-share { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: .85rem; }
.legend-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* A colour is worn by an arc as a stroke and by a swatch as a fill, so both
   are set: whichever the element uses, it is the same number. */
.colour-1 { stroke: var(--colour-1); background: var(--colour-1); }
.colour-2 { stroke: var(--colour-2); background: var(--colour-2); }
.colour-3 { stroke: var(--colour-3); background: var(--colour-3); }
.colour-4 { stroke: var(--colour-4); background: var(--colour-4); }
.colour-5 { stroke: var(--colour-5); background: var(--colour-5); }
.colour-6 { stroke: var(--colour-6); background: var(--colour-6); }
.colour-7 { stroke: var(--colour-7); background: var(--colour-7); }
.colour-8 { stroke: var(--colour-8); background: var(--colour-8); }
.colour-9 { stroke: var(--colour-9); background: var(--colour-9); }
.colour-10 { stroke: var(--colour-10); background: var(--colour-10); }

/* Two years of months is wider than a phone, and a bar squeezed to nothing is
   worse than one that has to be scrolled to. */
.chart-scroll { overflow-x: auto; margin-top: 1rem; padding-bottom: .25rem; }
/* The chart takes the width it is given and keeps its own proportions, so the
   bars grow with the card rather than sitting in a corner of it. Below the
   floor the labels stop being readable, and the container scrolls instead. */
.bars { width: 100%; height: auto; min-width: 30rem; }
.bars .bar { fill: var(--accent); opacity: .85; }
.bars .bar:hover { opacity: 1; }
/* The biggest month is the one the eye is looking for, so it is the one the
   chart says out loud. */
.bars .bar.is-tallest { opacity: 1; }
.bars .baseline { stroke: var(--line); stroke-width: 1; }
.bars .average { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
/* The whole month is the target, not just the bar: a short month would
   otherwise be a sliver to aim at, and an empty one nothing at all. */
.bars .hit { fill: transparent; }
.bars .month:hover .bar { opacity: 1; }
/* What the month came to, written over its bar while it is pointed at. It is
   there in the markup all along, so it neither moves the chart nor waits for
   anything to load. */
.bars .bar-amount {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
  /* The label is wider than the month it stands over, so at the ends of the
     chart it is nudged sideways and can cross a taller neighbour. The halo
     keeps it readable over a bar as well as over the page. */
  paint-order: stroke fill;
  stroke: var(--bg-elev);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.bars .month:hover .bar-amount,
.bars .month:focus-visible .bar-amount { opacity: 1; }
.bars .month:focus { outline: none; }
.bars .month:focus-visible .bar { outline: 2px solid var(--accent); outline-offset: 2px; }
.bars .bar-month { font-size: 11px; fill: var(--ink-soft); }
.bars .bar-year { font-size: 10px; font-weight: 600; fill: var(--ink-soft); }


/* Šeima */

/* The one control that says whose money is on the screen. It sits next to the
   brand rather than in the nav: it changes what every page below it is about,
   which is a different kind of thing from a link to another page. */
.scope-toggle { flex-wrap: nowrap; }

/* Who spent what — the summary the family view exists for. It reads as a small
   table above the list, and stays legible with a member per row on a phone. */
.by-member {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: grid;
  gap: .2rem;
}
.by-member li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .75rem;
  padding: .4rem 0;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.by-member .member { font-weight: 600; overflow-wrap: anywhere; }
.by-member .amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.by-member .share { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The buttons that act on the whole search rather than on one row. They sit
   under the count they are talking about, which is what says what they will
   touch. */
.bulk { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.bulk button { margin-top: 0; }

/* A shared row carries one thing the personal row does not: whose it is. */
.expense.shared { grid-template-areas: "what when amount" "whose whose whose"; }
.expense .whose {
  grid-area: whose;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .85rem;
}
.expense .whose .member {
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .05rem .5rem;
}
.expense .whose .category { color: var(--ink-soft); }
.expense .whose .category-none { font-style: italic; }

.members { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .25rem; }
.members li {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
.members .member { font-weight: 600; overflow-wrap: anywhere; }
.members form { margin-left: auto; }
.members button { margin-top: 0; }
.members.pending .member { color: var(--ink-soft); }
.badge {
  font-size: .75rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .05rem .5rem;
}
.subhead { margin: 1.5rem 0 0; font-size: .95rem; }

.invite { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.invite .field { display: grid; gap: .25rem; }
.invite input[type="email"] {
  width: 16rem;
  max-width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  font: inherit;
}
.invite button { margin-top: 0; }
.leave { margin-top: 1.5rem; }

/* Paskyra: the address behind the session, and the end of it. The delete card
   is outlined rather than filled, so it reads as a warning without shouting
   over the page it sits under. */
.account { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1rem; margin: 1rem 0 0; }
.account dt { color: var(--ink-soft); font-size: .9rem; }
.account dd { margin: 0; overflow-wrap: anywhere; }
.account dd a { margin-left: .5rem; font-size: .9rem; }

/* The export is a link, not a form: it is a GET that changes nothing and the
   browser saves what comes back. It still reads as a button, so it is dressed
   as one. */
.button-link {
  display: inline-block;
  padding: .7rem 1.4rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 10px;
  text-decoration: none;
  transition: filter .15s, transform .05s;
}
.button-link:hover { filter: brightness(1.06); }
.button-link:active { transform: translateY(1px); }

.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.danger-zone h2 { color: var(--danger); }
.delete-account { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.delete-account .field { display: grid; gap: .25rem; }
.delete-account input[type="email"] {
  width: 18rem;
  max-width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  font: inherit;
}
.delete-account button { margin-top: 0; }
button.danger { background: var(--danger); color: var(--bg-elev); }

/* The rules the rest of the family uses, offered rather than applied. */
.suggestions { margin-top: 1.5rem; }
.suggestions .rules li { flex-wrap: wrap; }
.suggestions form { margin-left: 0; }
.suggestions form:first-of-type { margin-left: auto; }

@media (max-width: 34rem) {
  .expense.shared { grid-template-areas: "what amount" "when amount" "whose whose"; }
  .members form { margin-left: 0; }
  .account { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .account dd { margin-bottom: .6rem; }
  .by-member li { grid-template-columns: minmax(0, 1fr) auto; }
  .by-member .share { grid-column: 2; }
}

@media (max-width: 34rem) {
  /* Too narrow for the address to sit between the brand and the way out, so
     it takes the line under them. */
  .brand-small { margin-right: auto; }
  .appbar-identity .who { order: 1; width: 100%; max-width: 100%; margin-left: 0; }
  /* No room to set the links beside the toggle, so they take the line under
     it and the hairline that divided them has nothing left to divide. */
  .appbar-place .appnav { flex-basis: 100%; padding-left: 0; border-left: 0; gap: .5rem .9rem; }
  /* The undo button has no room left of it here, so it goes under the row
     rather than pushing the file name into one word per line. */
  .imports form { margin-left: 0; }
  .expense { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what amount" "when amount" "form form"; }
  /* The counts drop under the name rather than squeezing it. */
  .rename .category-field { width: 100%; }
  .category .counts { margin-left: 0; padding-top: 0; }
  .expense .when { justify-items: start; }
  .category-field { width: 100%; }
  /* The line wraps under the input here, so the padding that sat it on the
     input's line would only push it away from what it is talking about. */
  .rule-open,
  .by-rule { padding-top: 0; }
  /* Narrow enough that the value cannot sit beside its label, so it moves to
     its own line, indented under the tick it belongs to. */
  .draft-match { grid-template-columns: auto minmax(0, 1fr); }
  .draft-match input[type="text"] { grid-column: 2; }
  .rule-draft label { white-space: normal; }
  /* The share moves under the name here rather than squeezing the amount off
     the row; the amount stays on the first line, beside the name it belongs
     to. */
  .legend li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .legend-share { grid-column: 2; }
  .donut { width: 100%; max-width: 16rem; margin: 0 auto; }
}