/*
  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.
*/
@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: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    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,
  .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,
    .shell-main,
    .shell-foot { padding-inline: var(--space-5); }
  }
  body[data-width="wide"] :is(.shell-top, .shell-main, .shell-foot) { max-width: var(--page-width-wide); }

  .shell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    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-text);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    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)); }

  .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; }

  .shell-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--space-6) var(--space-7);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-faint);
    font-size: var(--text-sm);
  }
  .shell-foot-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .shell-foot-links a { color: var(--color-text-muted); text-decoration: none; }
  .shell-foot-links a:hover { color: var(--color-text); }
  .shell-foot-company { font-size: var(--text-xs); }

  /* 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-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    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-block { width: 100%; }

  .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-4) 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-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);
  }

  /* 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;
  }
}