/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #0d0817 #3a322c #faf5f0 #6039a7 #288011 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #faf5f0;
  --surface: #fdfbf8;
  --surface-2: #eee9e5;
  --border: #d9d4d2;
  --border-strong: #b3aeaf;
  --ink: #3a322c;
  --muted: #726d67;
  --accent: #6039a7;
  --accent-hover: #52308e;
  --accent-ink: #ffffff;
  --accent-text: #288011;
  --accent-strong: #6039a7;
  --accent-soft: #e4dbe6;
  --accent-border: #b5a0cf;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe7db;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e2d4;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dbd7;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty.
 *
 * design.css is a FLOOR, not a ceiling.
 *
 * For a long time it was both, and the cost was measurable: an app could
 * not write a single CSS rule, so every app built here had the same 10px
 * radius, the same Public Sans at the same 15px, the same 1px borders and
 * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three
 * apps in a row came out looking like the same product in three coats of
 * paint, which is what this file exists to end.
 *
 * It loads AFTER design.css and theme.css, so anything here wins.
 *
 * ---- THE FIRST LEVER: RETUNE THE SYSTEM ---------------------------
 *
 * A :root block here re-tunes every component at once — nothing is
 * restyled one class at a time. These are the tokens that decide an app's
 * CHARACTER, and they are the fastest way to make two apps look nothing
 * alike:
 *
 *   --radius-sm --radius --radius-lg   0 is brutal, 4 is crisp, 18 is soft
 *   --font-sans --font-mono            a display face changes more than colour
 *   --t-xs … --t-5xl                   the type scale, and how far it ramps
 *   --lh --lh-tight --track-tight      density and tone
 *   --s-1 … --s-12                     the spacing scale: tight or generous
 *   --shadow --shadow-raised           flat, or lifted
 *   --border --border-strong widths    hairline, or heavy and drawn
 *   --dur-1 --dur-2 --ease             brisk, or languid
 *   --content-max --measure            a wide dashboard or a narrow reading page
 *
 * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner
 * picked the palette on the approval card before you built anything, and
 * it is the only part of the look they chose themselves. theme.css holds
 * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an
 * rgb() or an hsl(), here or anywhere. The validator refuses those.
 *
 * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE ---------------------
 *
 * design.css covers the ordinary furniture. It does NOT cover the one
 * screen that makes this app itself — a timer's dial, a board's columns,
 * a chart, a seating plan, a game grid. Write those here, in full, and
 * name them for what they are (.dial, .board-col), never .card-2.
 *
 * Compose the primitives where they fit and write your own where they do
 * not. An app that used only the frozen classes and added nothing shipped
 * 160 component classes and zero rules of its own — and read as generated,
 * because the system's ceiling had become the app's ceiling.
 *
 * Keep using the tokens in what you write. A rule built on var(--s-4) and
 * var(--radius) stays consistent with everything around it and follows the
 * app when its character changes; one built on 16px and 10px does not.
 * ==================================================================== */

:root {
  /* Softer, more generous corners than the dashboard default — this is a
     journal, not an admin console. */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;

  /* A personal, single-column app reads better narrow than it does wide. */
  --content-max: 640px;

  /* A touch slower and softer than the system default — unhurried, calm. */
  --dur-2: 220ms;
  --dur-3: 360ms;
}

/* ---- No sideways scroll, ever ------------------------------------------
 * iOS Safari sizes an <input type="date"> by its own locale-formatted
 * content rather than strictly honouring `width: 100%`, so inside a
 * padded field it can render a hair wider than its box. On any other
 * platform this would just clip; on iOS the html/body element still
 * scrolls to reveal it, and a phone report of a field "going beyond the
 * screen" is that scroll. Belt and braces: cap the field itself AND
 * stop the page from ever growing wider than the viewport.
 *
 * `-webkit-min-logical-width` was tried here as a stronger fix and made
 * things worse: it forces a MINIMUM rendered width against the nearest
 * positioned ancestor rather than this field's own flex column, so the
 * date field stretched out past its siblings right to the dialog's inner
 * edge instead of matching their padding — the field looked "misaligned"
 * even though it no longer overflowed the viewport. Plain width/max-width/
 * box-sizing is the correct fix; do not reintroduce that property. */
html, body { max-width: 100%; overflow-x: hidden; }
input[type="date"] {
  display: block;
  /* Shrinking this field to a fixed ~168px (tried above, now reverted) was
     the wrong move: at that width there is barely enough room left for
     "Sep 2, 2026" plus the calendar icon, and on a real iPhone that meant
     the control had to squeeze its own day/month/year segments so tightly
     that a tap could land on the wrong one and silently change the year —
     which is what turned "Add expense" into an entry silently misdated
     into the past. Match the row's full width like every other field
     instead; that is what design.css already gives every .input, and nothing
     here needs to override it. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---- Sign in / sign up background --------------------------------------
   A single evocative photo, full-bleed behind the auth card — the one place
   in the app that isn't a working screen yet, so it can carry a moment of
   atmosphere the dashboard never should. A tinted scrim (ink, not black)
   keeps the topbar's frosted glass and the white card both readable over
   whatever part of the photo sits behind them. */
body.auth-bg {
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ink) 55%, transparent),
      color-mix(in srgb, var(--ink) 80%, transparent)
    ),
    url("/assets/portrait.jpg");
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}
body.auth-bg .topbar { background: transparent; backdrop-filter: none; border-bottom: none; }
.auth-page { padding-top: var(--s-6); padding-bottom: var(--s-11); }
@media (max-width: 640px) {
  body.auth-bg { background-attachment: scroll; }
}

/* ---- Page rhythm ---------------------------------------------------- */
.page-head { margin-bottom: var(--s-2); }
.page-title { letter-spacing: -0.02em; }

/* ---- The month hero ----------------------------------------------------
   One gradient, used once, carrying the number that matters most. */
.hero-total {
  position: relative;
  overflow: hidden;
}
.hero-total::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120px 120px at 85% -10%,
    color-mix(in srgb, var(--primary-ink) 18%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

/* Prev/next month controls sitting directly on the gradient — a transparent
   icon button tuned for that background rather than the page. */
.hero-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary-ink) 14%, transparent);
  color: var(--primary-ink);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hero-nav-btn:hover { background: color-mix(in srgb, var(--primary-ink) 24%, transparent); }
.hero-nav-btn:active { transform: scale(0.94); }
.hero-nav-btn:focus-visible {
  outline: 2px solid var(--primary-ink);
  outline-offset: 2px;
}
.hero-nav-btn .icon { width: 18px; height: 18px; }

/* ---- Table polish -----------------------------------------------------
   The default cell padding reads tight for a list people scan every day —
   give each row real breathing room. */
.table th, .table td { padding: var(--s-4) var(--s-5); }
.table td.truncate { max-width: 1px; } /* lets the column shrink so ellipsis can kick in */
.table td:first-child, .table th:first-child { padding-left: var(--s-6); }
.table td:last-child, .table th:last-child { padding-right: var(--s-6); }

/* ---- Small screens: everything fits without a sideways scroll ---------
 * The total was sized for a wide card and could crowd the month-nav
 * buttons on a narrow phone; the four-column table forced its own
 * horizontal scrollbar inside the card. Both are rebuilt as one column
 * below 640px so the whole page reads top-to-bottom only. */
@media (max-width: 640px) {
  .hero-total { padding: var(--s-5) var(--s-4); }
  /* Scales with the viewport instead of a fixed 39px, so a big monthly
     total never pushes past the prev/next buttons on either side. */
  .hero-amount { font-size: clamp(1.6rem, 9vw, var(--t-4xl)); }

  /* The table becomes a two-line card per expense: description and
     amount on top, date and the delete button underneath. Nothing needs
     to scroll sideways to be read. */
  .table-wrap { overflow-x: visible; }
  .table, .table tbody { display: block; width: 100%; }
  .table thead { display: none; }
  .table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "desc   amount"
      "date   actions";
    column-gap: var(--s-3);
    row-gap: var(--s-2);
    align-items: center;
    padding: var(--s-4) var(--s-5);
  }
  .table td { padding: 0; border: 0; min-width: 0; }
  .table td:nth-child(1) { grid-area: date; }
  .table td:nth-child(2) { grid-area: desc; font-weight: var(--fw-medium); color: var(--ink); }
  .table td:nth-child(3) { grid-area: amount; text-align: right; }
  .table td:nth-child(4) { grid-area: actions; display: flex; justify-content: flex-end; }

  /* A delete icon that only appears on hover is unreachable on a touch
     screen with no hover at all — show it plainly, and make it big
     enough to tap without missing. */
  .table .row-actions { opacity: 1; }
  .table .row-actions .btn { width: 40px; height: 40px; }
}

/* ---- iOS Safari: stop the automatic zoom on focus -----------------------
 * Any text input under 16px makes iOS Safari zoom the whole page in the
 * moment it gets focus — the system's own field font-size is 15px. On the
 * add-expense modal that zoom is what reads as "the screen broke": the
 * dialog is fixed-positioned, so the zoom shoves it half off-screen and the
 * Add button becomes unreachable until the visitor manually pinches back
 * out. 16px is the exact threshold iOS checks, not a design choice, so it
 * is written as a literal rather than the type scale. */
.input, .textarea, .select {
  font-size: 16px;
}

/* The amount field sets its own larger size (text-2xl) and already clears
   the threshold, but keep it explicit so a class-order change can't reopen
   the zoom bug on the field most likely to be tapped first. */
#amount.input {
  font-size: max(16px, var(--t-2xl));
}

/* ---- Add-expense modal on a small phone screen ------------------------
 * The dialog's own max-height (60vh for the body) is generous on desktop
 * but on a short iPhone viewport with the keyboard open it can push the
 * footer's Add button out of reach. Let the body claim more of the sheet
 * on narrow screens so the primary action stays reachable while typing. */
@media (max-width: 480px) {
  #add-expense {
    width: calc(100vw - var(--s-6));
  }
  #add-expense .modal-body {
    max-height: 68vh;
  }
}

/* ---- Reduced motion, as the system asks every app to honour. ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-nav-btn { transition: none; }
}