/*
 * House base. Every value comes from tokens.css.
 *
 * Desktop is the first design; the phone layout is a dedicated optimization
 * pass, never the desktop squeezed (or the phone widened). The CSS runs one
 * direction: rules that hold at every width, then the phone-only edits under
 * 40rem and the desktop layout from 40rem up (see BUILD_GUIDANCE.md, "Desktop
 * first, then optimize for mobile").
 *   Pages:    .wrap is a reading-width column (articles, forms, settings).
 *             .workspace runs full width (boards, tables, dashboards).
 *   Controls: sized by --tap, 44px on touch and 36px with a mouse, in --fs-ui.
 *   Details:  open in a drawer or dialog over the content; never reflow the page.
 */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, li { overflow-wrap: break-word; }

/* ---- Page ---- */
body {
  min-height: 100dvh;               /* dvh follows the phone's address bar; vh does not */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  overscroll-behavior-y: none;      /* no rubber-band bounce past the page ends */
  -webkit-tap-highlight-color: transparent;
}
main { flex: 1; padding-block: var(--space-m) var(--space-l); }

/* Reading pages sit in a centered column; workspaces use the whole window.
   Pick one per page, and use the same one in the header so the edges line up. */
.wrap, .workspace {
  width: 100%;
  /* Side margin clears a landscape notch, with a real floor everywhere else. */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
}

/* ---- Type ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.muted { color: var(--ink-3); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Eyebrows, field labels, badges. Casing follows the per-app token. */
.label {
  font-size: var(--fs-small);
  font-weight: var(--w-strong);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
}
.badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-badge);
  font-weight: var(--w-strong);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
}

a { color: var(--accent); text-underline-offset: 0.2em; }

/* ---- Focus: visible for keyboards, quiet for taps ---- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---- Header (sticky, clears the notch) ---- */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  background: var(--bg);
  border-bottom: var(--border) solid var(--line);
  padding-top: max(var(--space-2xs), env(safe-area-inset-top));
}
.site-head :is(.wrap, .workspace) {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: calc(var(--tap) + var(--space-2xs));
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-right: auto;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--w-display);
  text-decoration: none;
}
.brand img { width: 28px; height: 28px; }

/* ---- Footer: copyright centered on its own line ---- */
.site-foot {
  margin-top: var(--space-2xl);
  padding-block: var(--space-m) max(var(--space-m), env(safe-area-inset-bottom));
  border-top: var(--border) solid var(--line);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.site-foot > * + * { margin-top: var(--space-2xs); }
.site-foot .copy { max-width: none; }

/* ---- Buttons and anything tappable: --tap high (44px on touch, 36px with a mouse) ---- */
.btn, .icon-btn, .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  border: var(--border) solid transparent;
  border-radius: var(--r-m);
  font-size: var(--fs-ui);
  font-weight: var(--w-strong);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  touch-action: manipulation;       /* no double-tap zoom delay */
}
.btn { padding-inline: var(--space-s); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.icon-btn { min-width: var(--tap); padding: 0; background: transparent; color: var(--ink-2); }
.icon-btn svg { width: 22px; height: 22px; }
.chip { padding-inline: var(--space-xs); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* Tap feedback lives outside the hover gate so touch devices get it too. */
.btn:active, .icon-btn:active, .chip:active { transform: scale(0.97); }

/* Hover polish only on devices with a real pointer, so a tap never sticks. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-quiet:hover, .icon-btn:hover { border-color: var(--line); background: var(--surface-2); }
  .chip:hover { border-color: var(--accent); }
  a:hover { text-decoration-thickness: 2px; }
}

/* ---- Form fields: UI size, as tall as a button ---- */
input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea {
  min-height: var(--tap);
  font-size: var(--fs-ui);
}
/* On touch, never under 16px: iOS zooms the page into a smaller field on focus. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(1rem, var(--fs-ui)); }
}

/* ---- Theme toggle: shows the icon for the theme you would switch to ---- */
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--r-l);
  padding: var(--space-s);
  box-shadow: var(--shadow-1);
}
.stack > * + * { margin-top: var(--space-s); }
.grid { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }

/* ---- Fixed bottom bar (actions): clears the home indicator ---- */
.bottom-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-bar);
  background: var(--surface);
  border-top: var(--border) solid var(--line);
  padding: var(--space-2xs) max(var(--gutter), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}

/*
 * ---- Data tables: each row becomes a card on a phone ----
 * Give every <td> a data-label; the phone layout prints it as the cell's label.
 * Sortable headers are hidden on a phone, so pair the table with a <select>
 * that sorts the same way.
 */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: var(--lh-snug); }
.data-table th { text-align: left; color: var(--ink-3); font-weight: var(--w-strong); text-transform: var(--label-case); letter-spacing: var(--label-track); }
.data-table th, .data-table td { padding: var(--space-2xs) var(--space-xs); border-bottom: var(--border) solid var(--line); }
.data-table .num { text-align: right; }
@media (max-width: 39.99rem) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xs) var(--space-s); padding: var(--space-xs) 0; border-bottom: var(--border) solid var(--line); }
  .data-table td { border: 0; padding: 0; }
  .data-table td:first-child { grid-column: 1 / -1; font-size: var(--fs-body); font-weight: var(--w-strong); }
  .data-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; color: var(--ink-3); font-size: var(--fs-badge); text-transform: var(--label-case); letter-spacing: var(--label-track); }
  .data-table .num { text-align: left; }
}

/* ---- Desktop layout (40rem and up): wider gutter, multi-column grid ---- */
@media (min-width: 40rem) {
  :root { --gutter: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  .card { padding: var(--space-m); }
}

/* ---- Utilities ---- */
.plain-list { list-style: none; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Reduced motion: no transitions or animation ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}