/* base.v1.css — shared base styles on top of tokens.v1.css. Hand-written.
   Load order: tokens.v1.css, fonts.v1.css (optional), base.v1.css, then app CSS.
   Bare elements get sensible defaults; components use the ui- class prefix. */

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
ul, ol { margin: 0; padding-left: 1.4em; }
hr { border: 0; border-top: var(--ui-border-w) solid var(--ui-line); margin: var(--ui-space-6) 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- document ------------------------------------------------------------- */
body {
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-weight-regular);
  line-height: var(--ui-leading-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
::selection { background: var(--ui-accent-soft); color: var(--ui-ink); }
:focus-visible { outline: var(--ui-focus-ring-w) solid var(--ui-accent); outline-offset: var(--ui-focus-ring-offset); }
:focus:not(:focus-visible) { outline: none; }

/* ---- type ----------------------------------------------------------------- */
h1, .ui-h1 { font-size: var(--ui-text-2xl); line-height: var(--ui-leading-heading); font-weight: var(--ui-weight-semibold); letter-spacing: -0.01em; }
h2, .ui-h2 { font-size: var(--ui-text-xl);  line-height: var(--ui-leading-heading); font-weight: var(--ui-weight-semibold); }
h3, .ui-h3 { font-size: var(--ui-text-lg);  line-height: var(--ui-leading-heading); font-weight: var(--ui-weight-semibold); }
h4, .ui-h4 { font-size: var(--ui-text-md);  line-height: var(--ui-leading-tight);   font-weight: var(--ui-weight-medium); }
.ui-hero { font-size: var(--ui-text-3xl); line-height: var(--ui-leading-heading); font-weight: var(--ui-weight-semibold); letter-spacing: -0.01em; }
.ui-lede { font-size: var(--ui-text-md); color: var(--ui-ink-muted); }
small, .ui-small { font-size: var(--ui-text-sm); }
.ui-muted { color: var(--ui-ink-muted); }
.ui-faint { color: var(--ui-ink-faint); }
.ui-label { font-size: var(--ui-text-xs); font-weight: var(--ui-weight-medium); text-transform: uppercase; letter-spacing: var(--ui-tracking-label); color: var(--ui-ink-muted); }
.ui-num { font-variant-numeric: tabular-nums; text-align: right; }
.ui-neg { color: var(--ui-bad); }
.ui-pos { color: var(--ui-ok); }
code, kbd, samp, pre, .ui-mono { font-family: var(--ui-font-mono); font-size: 0.92em; }
pre { font-size: var(--ui-text-sm); line-height: var(--ui-leading-body); overflow: auto; padding: var(--ui-space-3); background: var(--ui-surface); border: var(--ui-border-w) solid var(--ui-line); border-radius: var(--ui-radius-sm); }
pre code { font-size: inherit; }
a { color: var(--ui-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.ui-link-quiet { color: inherit; text-decoration: none; }
.ui-link-quiet:hover { color: var(--ui-accent); }
[data-app="coins"] h1, [data-app="coins"] .ui-h1, [data-app="coins"] .ui-hero { font-family: var(--ui-font-serif); font-weight: var(--ui-weight-medium); letter-spacing: 0; }

/* ---- page skeleton -------------------------------------------------------- */
.ui-masthead {
  display: flex; align-items: center; gap: var(--ui-space-5);
  height: 48px; padding: 0 var(--ui-gutter);
  background: var(--ui-surface); border-bottom: var(--ui-border-w) solid var(--ui-line);
  position: sticky; top: 0; z-index: 10;
}
.ui-brand { display: inline-flex; align-items: center; gap: var(--ui-space-2); font-weight: var(--ui-weight-semibold); color: var(--ui-ink); text-decoration: none; white-space: nowrap; }
.ui-brand::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--ui-accent); }
.ui-nav { display: flex; gap: var(--ui-space-4); min-width: 0; overflow-x: auto; }
.ui-nav a { color: var(--ui-ink-muted); text-decoration: none; white-space: nowrap; line-height: 48px; }
.ui-nav a:hover { color: var(--ui-ink); }
.ui-nav a[aria-current] { color: var(--ui-ink); box-shadow: inset 0 -2px var(--ui-accent); }
.ui-masthead-end { margin-left: auto; display: flex; align-items: center; gap: var(--ui-space-3); font-size: var(--ui-text-sm); color: var(--ui-ink-muted); }
.ui-page { max-width: var(--ui-content-width); margin: 0 auto; padding: var(--ui-space-6) var(--ui-gutter) var(--ui-space-16); }
.ui-page > h1 { margin-bottom: var(--ui-space-2); }
.ui-page > h2 { margin-top: var(--ui-space-10); margin-bottom: var(--ui-space-4); }
.ui-stack > * + * { margin-top: var(--ui-space-4); }
.ui-row { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); align-items: center; }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ui-space-4); }

/* ---- surfaces ------------------------------------------------------------- */
.ui-card { background: var(--ui-surface); border: var(--ui-border-w) solid var(--ui-line); border-radius: var(--ui-radius-sm); padding: var(--ui-space-4); }
.ui-card-flush { padding: 0; overflow: hidden; }
.ui-pop { background: var(--ui-surface-raised); border: var(--ui-border-w) solid var(--ui-line-strong); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-pop); padding: var(--ui-space-3); }
.ui-flash { padding: var(--ui-space-2) var(--ui-gutter); font-size: var(--ui-text-sm); border-bottom: var(--ui-border-w) solid var(--ui-line); }
.ui-flash.ok   { background: var(--ui-ok-soft);   color: var(--ui-ok); }
.ui-flash.warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.ui-flash.bad  { background: var(--ui-bad-soft);  color: var(--ui-bad); }
.ui-flash.info { background: var(--ui-info-soft); color: var(--ui-info); }

/* ---- stat tile (four of five apps show headline numbers) ------------------ */
.ui-stat { display: flex; flex-direction: column; gap: 2px; }
.ui-stat b { font-size: var(--ui-text-2xl); line-height: var(--ui-leading-tight); font-weight: var(--ui-weight-bold); font-variant-numeric: tabular-nums; }
.ui-stat span { font-size: var(--ui-text-sm); color: var(--ui-ink-muted); }
.ui-meter { height: 8px; background: var(--ui-line); border-radius: var(--ui-radius-pill); overflow: hidden; }
.ui-meter > i { display: block; height: 100%; background: var(--ui-accent); border-radius: inherit; }

/* ---- chips ---------------------------------------------------------------- */
.ui-chip { display: inline-flex; align-items: center; gap: var(--ui-space-1); padding: 2px var(--ui-space-2); border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-sm); font-weight: var(--ui-weight-medium); line-height: 1.4; background: var(--ui-line); color: var(--ui-ink); white-space: nowrap; }
.ui-chip.dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ui-chip.accent { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-chip.ok   { color: var(--ui-ok);   background: var(--ui-ok-soft); }
.ui-chip.warn { color: var(--ui-warn); background: var(--ui-warn-soft); }
.ui-chip.bad  { color: var(--ui-bad);  background: var(--ui-bad-soft); }
.ui-chip.info { color: var(--ui-info); background: var(--ui-info-soft); }

/* ---- controls ------------------------------------------------------------- */
.ui-btn, button.ui-btn, a.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
  height: var(--ui-control-h); padding: 0 var(--ui-space-4);
  border: var(--ui-border-w) solid var(--ui-line-strong); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-ink);
  font-weight: var(--ui-weight-medium); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease);
}
.ui-btn:hover { background: var(--ui-bg); }
.ui-btn:active { background: var(--ui-line); }
.ui-btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-btn.primary:hover { filter: brightness(1.08); }
.ui-btn.quiet { border-color: transparent; background: transparent; }
.ui-btn.quiet:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-btn.danger { color: var(--ui-bad); border-color: var(--ui-bad); }
.ui-btn.danger:hover { background: var(--ui-bad-soft); }
.ui-btn.sm { height: 26px; padding: 0 var(--ui-space-2); font-size: var(--ui-text-sm); }
.ui-btn.lg { height: var(--ui-control-h-lg); padding: 0 var(--ui-space-6); font-size: var(--ui-text-md); }
.ui-btn.touch { height: var(--ui-control-h-touch); padding: 0 var(--ui-space-6); font-size: var(--ui-text-lg); }
.ui-btn.block { display: flex; width: 100%; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; }

.ui-input, .ui-select, .ui-textarea {
  display: block; width: 100%; height: var(--ui-control-h); padding: 0 var(--ui-space-2);
  border: var(--ui-border-w) solid var(--ui-line-strong); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-raised); color: var(--ui-ink);
  transition: border-color var(--ui-dur-fast) var(--ui-ease);
}
.ui-textarea { height: auto; min-height: calc(var(--ui-control-h) * 3); padding: var(--ui-space-2); line-height: var(--ui-leading-body); resize: vertical; }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-ink-faint); }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { border-color: var(--ui-accent); outline-offset: 0; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-ink-faint); }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { background: var(--ui-bg); color: var(--ui-ink-faint); cursor: not-allowed; }
.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--ui-bad); }
.ui-select { padding-right: var(--ui-space-8); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23807971' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right var(--ui-space-2) center; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); width: 16px; height: 16px; margin: 0; vertical-align: -3px; }
input[type="range"] { accent-color: var(--ui-accent); }
.ui-field { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.ui-field > label, .ui-field > .ui-label { font-size: var(--ui-text-xs); font-weight: var(--ui-weight-medium); text-transform: uppercase; letter-spacing: var(--ui-tracking-label); color: var(--ui-ink-muted); }
.ui-field .ui-hint { font-size: var(--ui-text-sm); color: var(--ui-ink-muted); }
.ui-field .ui-error { font-size: var(--ui-text-sm); color: var(--ui-bad); }
.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); cursor: pointer; }

/* ---- tables --------------------------------------------------------------- */
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-text-sm); }
.ui-table th, .ui-table td { text-align: left; padding: var(--ui-space-2) var(--ui-space-3); border-bottom: var(--ui-border-w) solid var(--ui-line); vertical-align: top; }
.ui-table th { font-size: var(--ui-text-xs); font-weight: var(--ui-weight-medium); text-transform: uppercase; letter-spacing: var(--ui-tracking-label); color: var(--ui-ink-muted); white-space: nowrap; }
.ui-table thead th { position: sticky; top: 0; background: var(--ui-surface); }
.ui-table tbody tr:hover > td { background: var(--ui-bg); }
.ui-table tr.selected > td, .ui-table tr[aria-selected="true"] > td { background: var(--ui-accent-soft); }
.ui-table .ui-num, .ui-table td.num, .ui-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table.dense th, .ui-table.dense td { padding: var(--ui-space-1) var(--ui-space-2); }
.ui-table tfoot td { font-weight: var(--ui-weight-semibold); border-top: var(--ui-border-w-strong) solid var(--ui-line-strong); border-bottom: 0; }
.ui-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 767px) {
  .ui-page { padding-top: var(--ui-space-4); }
  .ui-masthead { gap: var(--ui-space-3); }
  .ui-masthead-end .ui-hide-sm { display: none; }
  .ui-table th, .ui-table td { padding: var(--ui-space-2); }
}