/* ==========================================================================
   SIDE INCOME LEDGER — styles.css
   Sections:
     0. Fonts            self-hosted, so the page makes no third-party requests
     1. Design tokens    colours, radii, fonts
     2–9.                base, layout, controls, chart, signals, tables,
                         settings, responsive (same as the Claude version)
     10. Sign-in screen and account bar (new in this version)
   ========================================================================== */

/* ==========================================================================
   0. FONTS
   Newsreader (a serif) is used for the summary sentence and the "signal"
   statements, so the key findings read like plain sentences.
   Public Sans is used for everything else. It has tabular (fixed-width)
   digits, which keeps columns of money lined up.
   Both are open-source (SIL Open Font License; see fonts/LICENSE.txt) and
   served from this site's /fonts folder. If a file can't load, the fallback
   stacks in --serif and --sans take over.
   ========================================================================== */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
             src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("fonts/public-sans-latin-700-normal.woff2") format("woff2"); }

/* ==========================================================================
   1. DESIGN TOKENS
   Every colour, radius and font lives here, so the look can be changed in
   one place. The app is dark-only: nothing switches it to light, whatever
   the device's setting.
   ========================================================================== */
:root {
  color-scheme: dark;            /* makes native controls (date picker, scrollbars) draw dark too */

  /* Surfaces, from deepest to most raised */
  --bg: #121B26;                 /* page background: deep slate blue */
  --surface: #192433;            /* panels and tables */
  --raised: #213043;             /* inputs, hover states, tooltips */
  --line: #2D3E54;               /* borders */
  --line-soft: #223146;          /* table row dividers, chart grid */
  --zero-line: #3A4E68;          /* the chart's zero line, slightly brighter */

  /* Text */
  --text: #ECE7DB;               /* warm off-white: softer than pure white on dark */
  --muted: #9BA7B7;              /* secondary text */
  --faint: #6F7E91;              /* hints and axis labels */

  /* Accent and status colours */
  --brass: #D9B25C;              /* primary buttons and the after-tax line */
  --brass-hover: #E6C477;
  --on-brass: #1C1506;           /* text placed on brass */
  --good: #7FCB9C;
  --warn: #E7B866;
  --bad: #F08C8C;

  /* Shape */
  --r-panel: 14px;
  --r-ctl: 8px;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* stops class-level display rules from overriding the hidden attribute */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Screen-reader-only text: present for assistive tech, invisible on screen */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Respect people who have asked their system for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   3. PAGE LAYOUT
   ========================================================================== */
.app { max-width: 1180px; margin: 0 auto; padding: 22px 20px 72px; }

/* Top bar: name on the left; period switcher and account on the right.
   (On narrow screens the account moves up beside the name and the period
   switcher drops to its own row; see section 9.) */
.topbar {
  display: flex; align-items: center;
  gap: 10px 14px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.02rem; margin-right: auto; }

/* Overview: summary and chart on the left, the logging form on the right */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  padding-top: 32px;
  align-items: start;
}
.summary h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.05rem + 1.6vw, 2.35rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  max-width: 30ch;
  text-wrap: balance;
}

/* Generic sections further down the page */
.section { margin-top: 48px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.section-head h2 { font-size: 1.12rem; font-weight: 600; margin: 0; }
.section-head p { margin: 2px 0 0; color: var(--muted); font-size: .86rem; }

/* ==========================================================================
   4. CONTROLS
   ========================================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 20px;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label, .label { font-size: .84rem; color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type="text"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(217, 178, 92, .18);
}
input::placeholder { color: var(--faint); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: #405873; }
.btn-primary { background: var(--brass); border-color: var(--brass); color: var(--on-brass); font-weight: 600; }
.btn-primary:hover { background: var(--brass-hover); border-color: var(--brass-hover); }
.btn-quiet {
  min-height: 32px; padding: 5px 10px;
  background: transparent; border-color: transparent;
  color: var(--muted); font-size: .85rem;
}
.btn-quiet:hover { color: var(--text); background: var(--raised); border-color: transparent; }
.btn-quiet.armed { color: var(--bad); background: rgba(240, 140, 140, .12); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Segmented control, built from real radio buttons so it works with a keyboard */
.seg {
  display: inline-flex; gap: 2px;
  margin: 0; padding: 3px; min-width: 0; max-width: 100%;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .86rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.seg input:checked + label { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.seg input:focus-visible + label { outline: 2px solid var(--brass); outline-offset: 1px; }
.seg.block { display: flex; background: var(--bg); }
.seg.block label { flex: 1; text-align: center; }
.seg input.is-cost:checked + label { color: var(--bad); }

.form-error { color: var(--bad); font-size: .84rem; min-height: 1.25em; margin: 0 0 10px; }
.hint { font-size: .8rem; color: var(--faint); margin: 0; }
.form-actions { display: flex; gap: 10px; }
.form-actions .btn-primary { flex: 1; }

.log-panel h2 { font-size: 1rem; font-weight: 600; margin: 0 0 14px; }
.log-empty p { margin: 0 0 14px; color: var(--muted); }

/* ==========================================================================
   5. CHART
   ========================================================================== */
.chart-wrap { position: relative; }
.chart { display: block; width: 100%; height: 260px; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .grid.zero { stroke: var(--zero-line); }
.chart .axis { fill: var(--faint); font-size: 11px; font-family: var(--sans); }
.chart .empty-msg { fill: var(--muted); font-size: 13px; font-family: var(--sans); }
.chart .line { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linejoin: round; }
.chart .pt { fill: var(--bg); stroke: var(--brass); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover, .chart .hit:focus { fill: rgba(236, 231, 219, .045); outline: none; }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  list-style: none; margin: 10px 0 0; padding: 0;
  font-size: .84rem; color: var(--muted);
}
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.sw.line { width: 16px; height: 3px; border-radius: 2px; vertical-align: 3px; background: var(--brass); }

.tooltip {
  position: absolute; top: 6px; z-index: 5;
  min-width: 200px; padding: 10px 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .82rem;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(4, 8, 14, .5);
}
.tooltip strong { display: block; margin-bottom: 6px; font-weight: 600; }
.tt-row { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.tt-row.total { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.tt-row.after { color: var(--brass); }

/* ==========================================================================
   6. SIGNALS (the four health checks under the chart)
   Laid out as a row of statements divided by rules, not as boxed cards.
   ========================================================================== */
.signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.signal { padding: 18px 22px 20px 0; }
.signal + .signal { padding-left: 22px; border-left: 1px solid var(--line); }
.signal h3 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: .84rem; font-weight: 600; color: var(--muted);
}
.tag { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--raised); }
.tag.good { color: var(--good); }
.tag.warn { color: var(--warn); }
.tag.bad { color: var(--bad); }
.statement { font-family: var(--serif); font-size: 1.22rem; line-height: 1.3; margin: 0 0 8px; }
.detail { font-size: .85rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   7. TABLES
   ========================================================================== */
.table-wrap {
  position: relative;            /* keeps the hidden screen-reader labels inside the box, so they can't widen the page */
  overflow-x: auto;              /* wide tables scroll inside their box, never the whole page */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 11px 14px; text-align: left; white-space: nowrap; }
th { font-size: .8rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
td { border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 600; }
th.r, td.r { text-align: right; font-variant-numeric: tabular-nums; }
td.note { white-space: normal; min-width: 160px; max-width: 320px; color: var(--muted); }
td.actions { text-align: right; padding-right: 8px; }
td.src-cell { white-space: normal; min-width: 210px; }   /* lets the source description wrap so the table fits */
tr.dim td { color: var(--faint); }
.neg { color: var(--bad); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; flex: none; }
.src-name { display: flex; align-items: center; font-weight: 500; }
.src-sub { display: block; margin-left: 18px; color: var(--faint); font-size: .78rem; }
.pill { font-size: .75rem; padding: 2px 8px; border-radius: 999px; }
.pill.income { color: var(--good); background: rgba(127, 203, 156, .12); }
.pill.cost { color: var(--bad); background: rgba(240, 140, 140, .12); }
.empty { padding: 30px 18px; text-align: center; color: var(--muted); white-space: normal; }
.more { display: flex; justify-content: center; padding-top: 12px; }
.ledger-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.ledger-tools select, .ledger-tools input { width: auto; min-width: 180px; }

/* ==========================================================================
   8. SETTINGS, DIALOG, NOTICES
   ========================================================================== */
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.storage-note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.storage-note.overdue { color: var(--warn); }       /* a CSV backup is due */
.table-note { margin-top: 8px; }
textarea.csv-out { min-height: 160px; margin-top: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }

dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 22px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: 0 24px 60px rgba(3, 6, 12, .6);
}
dialog::backdrop { background: rgba(6, 10, 16, .66); }
dialog h2 { margin: 0 0 16px; font-size: 1.05rem; font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: .9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brass); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

.notice {
  margin-top: 16px; padding: 10px 14px;
  font-size: .87rem; color: var(--warn);
  background: rgba(231, 184, 102, .09);
  border: 1px solid rgba(231, 184, 102, .35);
  border-radius: var(--r-ctl);
}

.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 20;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .88rem;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(240, 140, 140, .55); }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .overview { grid-template-columns: 1fr; gap: 28px; }
  .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two columns: drop the left rules, draw a rule under each item instead */
  .signal, .signal + .signal { padding: 18px 16px 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .signal:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .app { padding: 16px 14px 64px; }
  .signals { grid-template-columns: 1fr; }
  .signal:nth-child(even) { padding-left: 0; border-left: 0; }
  .row2, .settings-grid { grid-template-columns: 1fr; }
  .ledger-tools, .ledger-tools select, .ledger-tools input { width: 100%; }
  .topbar .seg label { padding: 6px 8px; font-size: .8rem; }   /* fit all four periods on a phone */
}

/* ==========================================================================
   10. SIGN-IN SCREEN AND ACCOUNT BAR
   ========================================================================== */

/* The gate fills the screen and centres a single card. */
.gate {
  min-height: 100vh;
  min-height: 100dvh;            /* phones: ignore the collapsing browser bar */
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.gate-card {
  width: min(420px, 100%);
  padding: 36px 28px 26px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
}
.gate-logo { display: block; margin: 0 auto 14px; }
.gate-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 10px;
}
.gate-text { margin: 0 0 6px; color: var(--muted); }
.gate-account { margin: 0 0 6px; font-size: .9rem; overflow-wrap: anywhere; }
.gate-help { margin: 12px 0 0; }
.gate-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.gate-actions .btn { min-width: 190px; }
.gate-error { margin: 14px 0 0; min-height: 0; }
.gate-foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* File names mentioned in help text */
code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .85em;
  padding: 1px 5px;
  background: var(--raised);
  border-radius: 4px;
}

/* Signed-in email and the Sign out button, at the end of the top bar. */
.account { display: flex; align-items: center; gap: 4px; min-width: 0; }
.account-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;       /* long addresses end in "…"; the full one is in the tooltip */
  white-space: nowrap;
  font-size: .84rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  /* Name and account share the first row; the period switcher gets its own. */
  .topbar .account { order: 2; }
  .topbar .seg { order: 3; }
  .account-email { max-width: 160px; }
}
@media (max-width: 480px) {
  .account-email { display: none; }   /* too tight on a phone; the gate shows it at sign-in */
  .gate-card { padding: 30px 20px 22px; }
}