/* Algo Patterns page. Every value is a token (design policy rule 1): colours, type, space, radius from
   /static/tokens.css, generated from knowledge/specs/design/tokens.json. Plain surfaces, one-pixel lines, no motion. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ap-color-bg); color: var(--ap-color-text); }
body {
  margin: 0;
  font: var(--ap-type-weight-regular) var(--ap-type-size-md) / var(--ap-type-leading-normal) var(--ap-type-family-sans);
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--ap-space-4); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-3); padding: var(--ap-space-4) 0; border-bottom: 1px solid var(--ap-color-line); }
.top-right { display: flex; align-items: center; gap: var(--ap-space-2); }
.brand { font-weight: var(--ap-type-weight-medium); letter-spacing: 0.01em; }
.chip {
  display: inline-block; padding: 1px var(--ap-space-2); margin-left: var(--ap-space-2);
  border: 1px solid var(--ap-color-line); border-radius: var(--ap-radius-pill);
  font-size: var(--ap-type-size-xs); line-height: var(--ap-type-leading-normal); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ap-color-text-muted); white-space: nowrap;
}
.top-right .chip { margin-left: 0; }
.chip.ok { color: var(--ap-color-positive); border-color: currentColor; }
.chip.err { color: var(--ap-color-negative); border-color: currentColor; }
.theme {
  appearance: none; border: 1px solid var(--ap-color-line); background: transparent; color: var(--ap-color-text-muted);
  border-radius: var(--ap-radius-md); padding: var(--ap-space-1) var(--ap-space-2); font: inherit; font-size: var(--ap-type-size-xs); cursor: pointer;
}
.theme:hover { color: var(--ap-color-text); }

/* hero */
.hero { padding: var(--ap-space-7) 0 var(--ap-space-5); }
.label { font-size: var(--ap-type-size-sm); color: var(--ap-color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.price {
  font-size: var(--ap-type-size-2xl); font-weight: var(--ap-type-weight-medium); line-height: var(--ap-type-leading-tight);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: var(--ap-space-2) 0;
}
.price small { font-size: var(--ap-type-size-lg); font-weight: var(--ap-type-weight-regular); color: var(--ap-color-text-muted); margin-left: var(--ap-space-2); }
.delta { font-variant-numeric: tabular-nums; color: var(--ap-color-text-muted); }
.delta.up { color: var(--ap-color-positive); }
.delta.down { color: var(--ap-color-negative); }
.state { margin-top: var(--ap-space-2); font-size: var(--ap-type-size-sm); color: var(--ap-color-text-muted); }
.state:empty { display: none; }

/* chart panel */
.panel { background: var(--ap-color-surface); border: 1px solid var(--ap-color-line); border-radius: var(--ap-radius-lg); padding: var(--ap-space-4); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--ap-space-3); flex-wrap: wrap; margin-bottom: var(--ap-space-3); }
.seg { display: inline-flex; border: 1px solid var(--ap-color-line); border-radius: var(--ap-radius-md); overflow: hidden; }
.seg button {
  appearance: none; border: 0; background: transparent; color: var(--ap-color-text-muted);
  font: inherit; font-size: var(--ap-type-size-sm); padding: var(--ap-space-1) var(--ap-space-3); cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--ap-color-line); }
.seg button[aria-pressed="true"] { background: var(--ap-color-surface-raised); color: var(--ap-color-text); font-weight: var(--ap-type-weight-medium); }
button:focus-visible { outline: 2px solid var(--ap-color-accent); outline-offset: 2px; }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--ap-chart-grid); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--ap-chart-up); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--ap-chart-up); }
.chart.down .line { stroke: var(--ap-chart-down); }
.chart.down .dot { fill: var(--ap-chart-down); }
.chart .axis { fill: var(--ap-chart-annotation); font-size: var(--ap-type-size-xs); font-variant-numeric: tabular-nums; }
.chart .empty { fill: var(--ap-color-text-muted); font-size: var(--ap-type-size-sm); }
.caption { margin-top: var(--ap-space-3); font-size: var(--ap-type-size-xs); color: var(--ap-color-text-muted); }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ap-space-3); margin-top: var(--ap-space-4); }
.tile { background: var(--ap-color-surface); border: 1px solid var(--ap-color-line); border-radius: var(--ap-radius-md); padding: var(--ap-space-3) var(--ap-space-4); }
.tile .k { font-size: var(--ap-type-size-xs); color: var(--ap-color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.tile .v { font-size: var(--ap-type-size-lg); font-weight: var(--ap-type-weight-medium); font-variant-numeric: tabular-nums; margin-top: var(--ap-space-1); overflow-wrap: anywhere; }

/* footer */
.bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ap-space-2);
  margin-top: var(--ap-space-6); padding: var(--ap-space-4) 0 var(--ap-space-6); border-top: 1px solid var(--ap-color-line);
  font-size: var(--ap-type-size-xs); color: var(--ap-color-text-muted);
}
.mono { font: var(--ap-type-weight-regular) var(--ap-type-size-xs) / var(--ap-type-leading-normal) var(--ap-type-family-mono); }

/* phone */
@media (max-width: 767px) {
  .hero { padding: var(--ap-space-5) 0 var(--ap-space-4); }
  .price { font-size: var(--ap-type-size-xl); }
  .price small { font-size: var(--ap-type-size-md); }
  .panel { padding: var(--ap-space-3); }
}
@media (prefers-reduced-motion: no-preference) {
  .theme, .seg button { transition: color var(--ap-motion-duration-fast) var(--ap-motion-ease), background-color var(--ap-motion-duration-fast) var(--ap-motion-ease); }
}

/* sign-in page (REQ-0010): a real form, so password managers offer to save and fill it */
.signin { max-width: 380px; margin: var(--ap-space-7) auto var(--ap-space-8); }
.signin h1 { font-size: var(--ap-type-size-lg); font-weight: var(--ap-type-weight-medium); margin: 0 0 var(--ap-space-1); }
.signin .sub { color: var(--ap-color-text-muted); font-size: var(--ap-type-size-sm); margin-bottom: var(--ap-space-5); }
.field { display: grid; gap: var(--ap-space-1); margin-bottom: var(--ap-space-4); }
.field label { font-size: var(--ap-type-size-sm); color: var(--ap-color-text-muted); }
.field input {
  font: inherit; color: var(--ap-color-text); background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-line); border-radius: var(--ap-radius-md); padding: var(--ap-space-2) var(--ap-space-3);
}
.field input:focus-visible { outline: 2px solid var(--ap-color-accent); outline-offset: 1px; }
.primary {
  width: 100%; appearance: none; border: 0; border-radius: var(--ap-radius-md); cursor: pointer;
  padding: var(--ap-space-2) var(--ap-space-3); background: var(--ap-color-accent); color: var(--ap-color-accent-contrast);
  font: inherit; font-weight: var(--ap-type-weight-medium);
}
.alert { color: var(--ap-color-negative); font-size: var(--ap-type-size-sm); margin-bottom: var(--ap-space-4); }
.alert:empty { display: none; }
.fine { margin-top: var(--ap-space-4); font-size: var(--ap-type-size-xs); color: var(--ap-color-text-muted); }
.signout { text-decoration: none; display: inline-block; }