/*
  AtADollar design system: base styles, layout and components.

  Load tokens.css first, then this file, then the product's own stylesheet.
  Everything here sits in cascade layers, so a product's own (unlayered) CSS always wins
  without !important. A product should add styles for its own screens, not restyle these.

  The full list of components, with markup to copy, is on the sample app's /design page.
  The rules for using them (the app style) are in DESIGN.md next to this library.
*/
@layer reset, base, layout, components, utilities;

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

/* ---------- Base: plain HTML elements ---------- */
@layer base {
  html { background: var(--color-bg); }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1 {
    font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  h2 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }
  h3 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }
  p { text-wrap: pretty; }
  strong, b { font-weight: var(--weight-semibold); }
  small { font-size: var(--text-sm); }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--color-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  a:hover { text-decoration-color: currentColor; }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

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

  hr { margin: 0; border: 0; border-top: 1px solid var(--color-line); }

  code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
  }

  table { font-variant-numeric: tabular-nums; }
}

/* ---------- Layout: the page shell and simple arrangements ---------- */
@layer layout {
  /* The shell: header, main and footer, all on one centred column. */
  .shell-top-inner,
  .shell-app,
  .shell-main,
  .shell-foot {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  @media (min-width: 40rem) {
    .shell-top-inner,
    .shell-app,
    .shell-main,
    .shell-foot { padding-inline: var(--space-5); }
  }
  body[data-width="wide"] :is(.shell-main, .shell-foot),
  body[data-side] :is(.shell-app, .shell-foot),
  .shell-top-inner { max-width: var(--page-width-wide); }
  body[data-width="narrow"] .shell-main { max-width: 30rem; }

  /* The app bar: full width, stays on top while the page scrolls. */
  .shell-top {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--color-line);
    background: rgba(246, 247, 246, 0.88);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }
  .shell-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--bar-height);
  }

  /* A screen with a side menu: set the "Side" section in the product's layout.
     On a phone the menu becomes one scrolling row under the app bar. */
  .shell-app {
    flex: 1;
    display: grid;
    grid-template-columns: var(--side-width) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  .shell-app > .shell-main { max-width: none; margin: 0; padding-inline: 0; }
  .shell-side {
    position: sticky;
    top: var(--bar-height);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: var(--space-5);
    font-size: var(--text-sm);
  }
  .shell-side a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }
  .shell-side a:hover { background: var(--color-surface-raised); color: var(--color-text); }
  .shell-side a[aria-current="page"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-line); }
  .shell-side a[aria-current="page"] .i { color: var(--color-accent-text); }
  .shell-side-label {
    margin: var(--space-4) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
  }
  .shell-side .badge { margin-left: auto; }
  /* A Side section that rendered nothing (for example, nobody is signed in) takes no room. */
  .shell-side:not(:has(*)) { display: none; }
  .shell-app:not(:has(.shell-side > *)) { grid-template-columns: minmax(0, 1fr); }
  body[data-width="narrow"] .shell-app > .shell-main { max-width: 30rem; margin-inline: auto; }
  @media (max-width: 48rem) {
    .shell-app { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .shell-side {
      position: static;
      min-width: 0;
      flex-direction: row;
      overflow-x: auto;
      padding-block: var(--space-3) 0;
      margin-inline: calc(-1 * var(--space-4));
      padding-inline: var(--space-4);
      scrollbar-width: none;
    }
    .shell-side-label { display: none; }
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
  }
  .wordmark-mark {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-black);
    letter-spacing: -0.04em;
  }
  .wordmark-product { color: var(--color-text-faint); font-weight: var(--weight-medium); }
  /* ".com" sits right after "AtADollar", with no gap, so the brand reads AtADollar.com. */
  .wordmark-tld { margin-left: calc(-1 * var(--space-2)); }
  /* On a phone inside a product, the $1 mark and the product name are enough: the menu needs the room. */
  @media (max-width: 30rem) {
    .wordmark:has(.wordmark-tld + .wordmark-product) > :is(span:nth-child(2), .wordmark-tld) { display: none; }
  }

  .shell-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .shell-nav:not(:has(*)) { display: none; }
  .shell-nav a { text-decoration: none; }
  .shell-nav a:hover,
  .shell-nav a[aria-current="page"] { color: var(--color-text); }
  .shell-nav a { white-space: nowrap; }
  .shell-nav-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; color: var(--color-text-faint); }
  @media (max-width: 30rem) { .shell-nav-user { display: none; } }
  /* "Sign out" in a product is a form post, drawn like the links beside it. */
  .shell-nav-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
  .shell-nav-button:hover { color: var(--color-text); }

  /* The products menu: every space the person can open, then "Account". A <details>, so it needs no script. */
  .menu { position: relative; }
  .menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    cursor: pointer;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 10;
    min-width: 15rem;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--shadow-overlay);
  }
  .menu-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
  }
  .menu-list a:hover,
  .menu-list a[aria-current="page"] { background: var(--color-surface-raised); }
  .menu-list .faint { font-size: var(--text-xs); }
  .menu-list hr { margin: var(--space-2) 0; }

  /* Main content flows as a stack. A heading after other content gets extra room above it. */
  .shell-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-5) var(--space-8);
  }
  .shell-main > :is(h2, .section):not(:first-child) { margin-top: var(--space-5); }

  /* In a column, a lone button or badge keeps its own width instead of stretching. */
  :is(.shell-main, .stack, .section, .form, .card) > :is(.button:not(.button-block), .badge) { align-self: flex-start; }

  /* The footer: one line (who runs it, then the links), and the trademark line under it in small type. */
  .shell-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-faint);
    font-size: var(--text-xs);
  }
  .shell-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-5); }
  .shell-foot-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .shell-foot-links a { color: var(--color-text-muted); text-decoration: none; }
  .shell-foot-links a:hover { color: var(--color-text); }
  .shell-foot-legal { font-size: 0.6875rem; line-height: var(--leading-snug); }

  /* Arrangements */
  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
  .stack-sm { --stack-gap: var(--space-2); }
  .stack-lg { --stack-gap: var(--space-6); }

  .section { display: flex; flex-direction: column; gap: var(--space-3); }

  .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  /* A form that holds one button (for example an htmx action) lines up with the other buttons. */
  :is(.row, .card-actions, .shell-nav) > form { display: flex; }
  .spread { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

  /* Columns that fold to one on a phone. Set --grid-min on the element to change the column width. */
  .grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
  }
}

/* ---------- Components ---------- */
@layer components {
  /* Text styles */
  .eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-text);
  }
  .table .eyebrow { color: var(--color-text-faint); }
  .lead { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-text-muted); }
  .back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
  }
  .back:hover { color: var(--color-text); }

  /* Buttons. One primary button per screen at most. */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .button:hover { background: var(--color-surface-raised); border-color: var(--color-text-faint); }
  .button:active { transform: translateY(1px); }

  .button-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
    font-weight: var(--weight-semibold);
  }
  .button-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

  .button-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--color-text-muted); }
  .button-quiet:hover { background: var(--color-surface-raised); border-color: transparent; color: var(--color-text); }

  .button-danger { background: var(--color-surface); border-color: var(--color-bad-line); color: var(--color-bad); }
  .button-danger:hover { background: var(--color-bad-soft); border-color: var(--color-bad); }

  .button-sm { min-height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }
  .button-lg { min-height: var(--control-height-lg); padding: 0 var(--space-5); font-size: var(--text-base); }
  .button-block { width: 100%; }
  .button .i { width: 1.05em; height: 1.05em; }

  .button:disabled,
  .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

  /* While htmx sends a form or a button's request */
  .button.htmx-request,
  form.htmx-request .button { opacity: 0.6; cursor: progress; }

  /* Forms */
  .form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 28rem; }
  .field { display: flex; flex-direction: column; gap: var(--space-2); }
  .field > label,
  .label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
  .hint { font-size: var(--text-sm); color: var(--color-text-faint); }
  .field-error { font-size: var(--text-sm); color: var(--color-bad); }

  :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="file"]), textarea, select) {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  :where(textarea) { min-height: 6.5rem; padding-block: var(--space-2); line-height: var(--leading-normal); resize: vertical; }
  :where(select) {
    appearance: none;
    padding-right: var(--space-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%234d5a52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
  }
  :where(input, textarea, select)::placeholder { color: var(--color-text-faint); }
  :where(input, textarea, select):hover { border-color: var(--color-text-faint); }
  :where(input, textarea, select):focus-visible { border-color: var(--color-accent-text); outline-offset: 1px; }
  :where(input, textarea, select)[aria-invalid="true"] { border-color: var(--color-bad); }
  :where(input, textarea, select):disabled { opacity: 0.5; cursor: not-allowed; }

  :where(input[type="checkbox"], input[type="radio"]) { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--color-accent-text); }
  .check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }

  /* Card: a group of things about one subject. */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }
  .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .card-head > .icon + * { margin-right: auto; }
  .card-title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
  .card-title a { text-decoration: none; }
  .card-title a:hover { text-decoration: underline; text-decoration-color: var(--color-line-strong); }
  .card-text { font-size: var(--text-sm); color: var(--color-text-muted); }
  .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }

  /* Badge: a short state, such as Active or Paused. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.5rem;
    padding: 0 0.625rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
  }
  .badge::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
  .badge-good { border-color: var(--color-good-line); background: var(--color-good-soft); color: var(--color-good); }
  .badge-warn { border-color: var(--color-warn-line); background: var(--color-warn-soft); color: var(--color-warn); }
  .badge-bad  { border-color: var(--color-bad-line);  background: var(--color-bad-soft);  color: var(--color-bad); }

  /* Notice: a message about the page, such as a confirmation or a problem. Every problem names its fix. */
  .notice {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--text-sm);
  }
  .notice-good { border-color: var(--color-good-line); border-left-color: var(--color-good); background: var(--color-good-soft); }
  .notice-warn { border-color: var(--color-warn-line); border-left-color: var(--color-warn); background: var(--color-warn-soft); }
  .notice-bad  { border-color: var(--color-bad-line);  border-left-color: var(--color-bad);  background: var(--color-bad-soft); }

  /* Stat: one big number, such as the wallet balance. Mono and green. */
  .stat { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-4); }
  .stat-value {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 14vw, 5rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent-text);
  }
  .stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* Table */
  .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .table th {
    padding: 0 var(--space-4) var(--space-2) 0;
    border-bottom: 1px solid var(--color-line-strong);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-faint);
  }
  .table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
  .table :is(th, td):last-child { padding-right: 0; }
  .table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
  .table .date { font-family: var(--font-mono); color: var(--color-text-faint); white-space: nowrap; }
  .table-wrap { overflow-x: auto; }

  /* List: rows inside one box, such as settings or links. */
  .list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
  .list > li { padding: var(--space-3) var(--space-4); }
  .list > li + li { border-top: 1px solid var(--color-line); }

  /* Tabs: moving between the screens of one product. Mark the current one with aria-current="page". */
  .tabs { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--color-line); scrollbar-width: none; }
  .tabs a {
    padding: var(--space-2) var(--space-3);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }
  .tabs a:hover { color: var(--color-text); }
  .tabs a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent-text); }

  /* Dialog: use the native <dialog> element. */
  .dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: var(--space-5);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    color: var(--color-text);
    box-shadow: var(--shadow-overlay);
  }
  .dialog[open] { display: flex; flex-direction: column; gap: var(--space-4); }
  .dialog::backdrop { background: var(--color-backdrop); }

  /* Empty state: what to do when there is nothing yet. */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-text-muted);
  }

  /* ----- App style parts (see DESIGN.md) ----- */

  /* Icon: <svg class="i" aria-hidden="true"><use href="/_content/AtADollar.Ui/icons.svg#home"></use></svg> */
  .i { display: inline-block; flex: none; width: 1.125rem; height: 1.125rem; vertical-align: -0.2em; }

  /* Icon tile: the square that holds a product's icon, in menus, cards and lists. */
  .icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-line);
    border-radius: 9px;
    background: var(--color-surface-raised);
    color: var(--color-text);
  }
  .icon .i { width: 1.125rem; height: 1.125rem; }
  .icon-lg { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); }
  .icon-lg .i { width: 1.375rem; height: 1.375rem; }

  /* Page head: the page title on the left, its main actions on the right. */
  .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
  .page-head > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .page-head p { color: var(--color-text-muted); }

  /* Section head: eyebrow, heading and one line, with an action or a summary on the right. */
  .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
  .section-head > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .section-head p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-sm); }

  /* Tiles: a grid of things you open, such as products. Each tile is a card with an icon. */
  .tiles {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min, 15rem)), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tiles-wide { --tile-min: 20rem; } /* tiles with actions, such as the products on the account page */
  .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  }
  .tile:has(a.tile-link):hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
  .tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
  .tile-title { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
  .tile-text { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-faint); }
  .tile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
  /* The whole tile is clickable through its title link. */
  .tile-link { text-decoration: none; }
  .tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .tile :is(button, form, .button):not(.tile-link) { position: relative; z-index: 1; }

  /* Money panel: one amount of money that matters on this screen (the wallet), with its action. */
  .money {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }
  .money > div:first-child { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .money-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-faint); }
  .money-value {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: var(--weight-bold);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent-text);
  }
  .money-note { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* Segmented choice: a few fixed options, such as $12, $24, $60. Mark the chosen one with aria-current or aria-pressed. */
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--color-surface-raised); }
  .seg > :is(a, button) {
    display: grid;
    place-items: center;
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
  }
  .seg > :is(a, button):hover { color: var(--color-text); }
  .seg > :is([aria-current="true"], [aria-pressed="true"]) { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(15, 26, 20, 0.12); }

  /* Switch: an on/off setting. <input type="checkbox" class="switch" role="switch"> */
  input[type="checkbox"].switch {
    appearance: none;
    position: relative;
    width: 2.25rem;
    height: 1.35rem;
    border-radius: var(--radius-pill);
    background: var(--color-line-strong);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  input[type="checkbox"].switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.35rem - 4px);
    height: calc(1.35rem - 4px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 26, 20, 0.25);
    transition: transform var(--duration-fast) var(--ease-out);
  }
  input[type="checkbox"].switch:checked { background: var(--color-accent); }
  input[type="checkbox"].switch:checked::after { transform: translateX(0.9rem); }

  /* Steps: a short numbered process, such as how to start. Only when the order matters. */
  .steps { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: step; }
  .steps > li { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
  .steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: var(--space-2);
    border-radius: 50%;
    background: var(--color-text);
    color: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
  }

  /* Loading. htmx shows .htmx-indicator during a request (its own indicator styles are off, for the CSP). */
  .spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: atadollar-spin 0.7s linear infinite;
  }
  .htmx-indicator { opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator { opacity: 1; }
}

/* ---------- Utilities: small one-job classes ---------- */
@layer utilities {
  .muted { color: var(--color-text-muted); }
  .faint { color: var(--color-text-faint); }
  .text-good { color: var(--color-good); }
  .text-warn { color: var(--color-warn); }
  .text-bad { color: var(--color-bad); }
  .text-sm { font-size: var(--text-sm); }
  .text-xs { font-size: var(--text-xs); }
  .mono { font-family: var(--font-mono); }
  .num { font-variant-numeric: tabular-nums; }
  .nowrap { white-space: nowrap; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .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;
  }
}

@keyframes atadollar-spin { to { transform: rotate(360deg); } }

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