/* Product UI components for Feedwatch.
   These are rendered HTML, not screenshots: crisp at any zoom, theme-aware,
   no external assets, and the same component can sit in a hero, a section
   panel or a card without being re-exported.

   Status colour is semantic (ok / warn / err) and deliberately separate from
   the brand accent. Every status also carries a text label, so state is never
   communicated by colour alone. */

:root {
  --ok:   #2E7D5B;
  --warn: #A9740D;
  --err:  #B3402E;
  --ui-bg:     #FFFFFF;
  --ui-sunk:   #F4F4F1;
  --ui-line:   #E5E6E1;
  --ui-ink:    #14161A;
  --ui-soft:   #6A7075;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ok:#5FBF92; --warn:#E0A93F; --err:#F0806B;
    --ui-bg:#1B1E21; --ui-sunk:#23272B; --ui-line:#2E3338; --ui-ink:#EDEFEC; --ui-soft:#98A0A6;
  }
}
:root[data-theme="dark"] {
  --ok:#5FBF92; --warn:#E0A93F; --err:#F0806B;
  --ui-bg:#1B1E21; --ui-sunk:#23272B; --ui-line:#2E3338; --ui-ink:#EDEFEC; --ui-soft:#98A0A6;
}
:root[data-theme="light"] {
  --ok:#2E7D5B; --warn:#A9740D; --err:#B3402E;
  --ui-bg:#FFFFFF; --ui-sunk:#F4F4F1; --ui-line:#E5E6E1; --ui-ink:#14161A; --ui-soft:#6A7075;
}

/* ---------- window chrome ---------- */
.ui {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(20,22,26,.14);
  font-family: var(--sans, ui-sans-serif, -apple-system, sans-serif);
  color: var(--ui-ink);
  text-align: left;
  container-type: inline-size;
}
.ui-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 15px; border-bottom: 1px solid var(--ui-line);
  background: var(--ui-sunk);
}
.ui-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ui-line); flex: none; }
.ui-bar span {
  margin-left: 6px; font-size: 12px; color: var(--ui-soft);
  font-family: var(--mono, ui-monospace, monospace);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-body { padding: 18px; }

.ui-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.ui-h h5 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ui-h em {
  font-style: normal; font-family: var(--mono, monospace);
  font-size: 11px; color: var(--ui-soft); white-space: nowrap;
}

/* ---------- account / connection rows ---------- */
.acct { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--ui-line); }
.acct:last-child { border-bottom: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--err); }
.acct .who { flex: 1; min-width: 0; }
.acct .who b { display: block; font-size: 14px; font-weight: 550; letter-spacing: -.005em; }
.acct .who small {
  display: block; font-size: 11.5px; color: var(--ui-soft);
  font-family: var(--mono, monospace); margin-top: 3px;
}
.acct .state { text-align: right; flex: none; }
.acct .state b {
  display: block; font-size: 12.5px; font-weight: 550;
  font-family: var(--mono, monospace);
}
.acct .state b.ok { color: var(--ok); }
.acct .state b.warn { color: var(--warn); }
.acct .state b.err { color: var(--err); }
.acct .state small {
  display: block; font-size: 11px; color: var(--ui-soft); margin-top: 3px;
  font-family: var(--mono, monospace);
}

/* ---------- uptime strip ---------- */
.uptime { display: flex; gap: 2px; align-items: flex-end; height: 42px; margin: 6px 0 10px; }
.uptime i { flex: 1; border-radius: 2px; background: var(--ok); min-width: 2px; }
.uptime i.warn { background: var(--warn); }
.uptime i.err  { background: var(--err); }
.uptime-legend {
  display: flex; justify-content: space-between;
  font-family: var(--mono, monospace); font-size: 10.5px; color: var(--ui-soft);
}

/* ---------- failover trace ---------- */
.trace { font-family: var(--mono, monospace); font-size: 12px; }
.trace div {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--ui-line);
}
.trace div:last-child { border-bottom: 0; }
.trace .prov { width: 62px; flex: none; color: var(--ui-ink); }
.trace .res { flex: 1; color: var(--ui-soft); }
.trace .res.ok { color: var(--ok); }
.trace .res.err { color: var(--err); }
.trace .tag {
  font-size: 10px; padding: 3px 8px; border-radius: 20px;
  background: var(--ui-sunk); color: var(--ui-soft); white-space: nowrap;
}
.trace .tag.used { background: var(--ok); color: #fff; }
@media (prefers-color-scheme: dark) { .trace .tag.used { color: #10201A; } }

/* ---------- rule chip ---------- */
.rule { background: var(--ui-sunk); border-radius: 11px; padding: 14px 15px; margin-bottom: 10px; }
.rule .top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.rule .lock {
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ok); font-weight: 600;
}
.rule .map { font-family: var(--mono, monospace); font-size: 12.5px; line-height: 1.5; }
.rule .map .from { color: var(--ui-soft); }
.rule .map .to { color: var(--ui-ink); font-weight: 600; }
.rule small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ui-soft); }

/* ---------- toggle ---------- */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; }
.toggle span { font-size: 13.5px; }
.toggle small { display: block; color: var(--ui-soft); font-size: 11.5px; margin-top: 3px; }
.sw { width: 40px; height: 23px; border-radius: 20px; background: var(--ui-line); position: relative; flex: none; }
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--ui-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sw.on { background: var(--ok); }
.sw.on::after { left: auto; right: 3px; }

/* ---------- placement helpers ---------- */
.ui-in-panel {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 7%;
}
.ui-in-panel .ui { width: 100%; max-width: 460px; }

/* Sits below centre so the nav card overlaps only its top edge, the way the
   reference hero layers its product shot under the floating card. */
.ui-hero {
  position: relative; z-index: 5;
  width: min(88vw, 560px);
  transform: translateY(clamp(96px, 15vh, 178px)) rotate(-1.1deg);
}
@media (max-width: 700px) { .ui-hero { transform: translateY(60px); } }

.ui-note {
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft, #6A7075);
  margin-top: 14px; text-align: center;
}

/* ---------- stat visuals ----------
   Each one illustrates the number it sits under. Single series, direct
   labels, semantic status colour only — no legend needed, and never colour
   alone: every figure is stated in text beside the graphic. */
.statviz { position: absolute; inset: 0; display: grid; place-items: center; padding: 12%; }
.statviz figure { margin: 0; width: 100%; }
.statviz figcaption {
  font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ui-soft); margin-top: 14px; text-align: center;
}

/* feed outages across 30 days */
.sv-outage { display: flex; gap: 3px; align-items: flex-end; height: 92px; }
.sv-outage i { flex: 1; border-radius: 2px; background: var(--ok); opacity: .85; }
.sv-outage i.b { background: var(--err); opacity: 1; }

/* proportion ring */
.sv-ring { display: block; margin: 0 auto; }
.sv-ring circle { fill: none; stroke-linecap: round; }
.sv-ring .track { stroke: rgba(20,22,26,.1); }
@media (prefers-color-scheme: dark) { .sv-ring .track { stroke: rgba(255,255,255,.14); } }
.sv-ring .val { stroke: var(--err); }
.sv-ring text {
  font-family: var(--mono, monospace); font-size: 15px; font-weight: 600;
  fill: var(--ui-ink); text-anchor: middle; dominant-baseline: central;
}

/* star-rating distribution */
.sv-stars { display: flex; flex-direction: column; gap: 7px; }
.sv-stars div { display: flex; align-items: center; gap: 9px; }
.sv-stars span {
  font-family: var(--mono, monospace); font-size: 10.5px; color: var(--ui-soft);
  width: 20px; flex: none; text-align: right;
}
.sv-stars b { display: block; height: 11px; border-radius: 2px; background: var(--err); }
.sv-stars .lo b { background: var(--err); }
.sv-stars .hi b { background: rgba(20,22,26,.16); }
@media (prefers-color-scheme: dark) { .sv-stars .hi b { background: rgba(255,255,255,.18); } }

/* corpus dot grid */
.sv-dots { display: grid; grid-template-columns: repeat(22, 1fr); gap: 4px; }
.sv-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(20,22,26,.14); }
@media (prefers-color-scheme: dark) { .sv-dots i { background: rgba(255,255,255,.14); } }
.sv-dots i.on { background: var(--err); }

/* ---------- carousel ----------
   All panels share one grid cell, so the frame height is the tallest screen
   and nothing jumps as it cycles. Auto-advance pauses on hover and focus, and
   is switched off entirely under prefers-reduced-motion — where the tabs still
   work, so the content stays reachable. */
/* Pushed down far enough that the nav card clears the window's own title bar
   and section header — the whole point is that a real screen is visible, not
   a sliver. The hero's bottom padding is enlarged to match, so the tabs and
   progress bar below still clear the band boundary. */
.ui-hero.has-carousel { transform: translateY(clamp(104px, 15vh, 168px)); }
@media (max-width: 700px) { .ui-hero.has-carousel { transform: translateY(56px); } }

.carousel { width: 100%; }
.carousel-stage { display: grid; }
.carousel-stage > * {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(10px) scale(.994);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.carousel-stage > .is-on { opacity: 1; transform: none; pointer-events: auto; }

/* One segmented control rather than four loose buttons: a single quiet
   container with the active item as a solid pill. Sentence case, not
   uppercase mono — at this size uppercase mono reads as cramped and techy
   next to the rest of the page. */
.carousel-ctl {
  display: inline-flex; align-items: stretch; gap: 2px;
  margin: 18px auto 0; padding: 4px;
  border-radius: 13px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(20,22,26,.07);
  box-shadow: 0 2px 10px rgba(20,22,26,.05);
  backdrop-filter: blur(10px);
}
.carousel-ctl-wrap { display: flex; justify-content: center; }
@media (prefers-color-scheme: dark) {
  .carousel-ctl { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); }
}

.carousel-ctl button {
  appearance: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em;
  padding: 8px 16px; border-radius: 10px; cursor: pointer;
  border: 0; background: transparent; color: var(--ui-soft);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.carousel-ctl button:hover { color: var(--ui-ink); background: rgba(20,22,26,.05); }
@media (prefers-color-scheme: dark) {
  .carousel-ctl button:hover { background: rgba(255,255,255,.07); }
}
.carousel-ctl button[aria-selected="true"] {
  background: var(--ui-bg); color: var(--ui-ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20,22,26,.14);
}
@media (prefers-color-scheme: dark) {
  .carousel-ctl button[aria-selected="true"] { background: rgba(255,255,255,.14); }
}

/* Progress reads as a hairline under the active pill, not a separate widget. */
.carousel-prog {
  height: 2px; border-radius: 2px; margin: 14px auto 0; max-width: 168px;
  background: rgba(20,22,26,.1); overflow: hidden;
}
@media (prefers-color-scheme: dark) { .carousel-prog { background: rgba(255,255,255,.13); } }
.carousel-prog i { display: block; height: 100%; width: 0; background: var(--ui-soft); }
.carousel.is-running .carousel-prog i { animation: cdwell var(--dwell, 5200ms) linear forwards; }
@keyframes cdwell { from { width: 0 } to { width: 100% } }

@media (max-width: 560px) {
  .carousel-ctl { flex-wrap: wrap; justify-content: center; }
  .carousel-ctl button { font-size: 12.5px; padding: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-stage > * { transition: none; }
  .carousel-prog { display: none; }
  .carousel.is-running .carousel-prog i { animation: none; }
}

/* narrow containers: drop the right-hand column so rows don't crush */
@container (max-width: 330px) {
  .acct .state small { display: none; }
  .acct .who small { font-size: 10.5px; }
}