/* ==========================================================================
   PD Discovery — app shell + Health page, built on the Instiglio design system.

   Loaded AFTER Tailwind's app.css so these rules win on the shell and on any
   page that opts in with the `ds-*` classes. Tailwind's preflight is doing us
   a favour here (border-width: 0, box-sizing, button font inheritance), so
   this file only has to describe the design, not re-reset the browser.

   The design system's own tokens/base.css is deliberately not loaded globally
   (it restyles bare h1/h2/p and would wreck the pages still written in
   Tailwind). Its element rules are reproduced here scoped to `.ds`.
   ========================================================================== */

/* ==========================  Shell  ====================================== */

body.ds-app {
  margin: 0;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--app-text);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-shell {
  display: grid;
  grid-template-columns: var(--app-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.ds-shell--bare { grid-template-columns: minmax(0, 1fr); }

/* ---- Sidebar ---- */
.ds-side {
  background: var(--app-panel);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.ds-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
.ds-brand:hover { text-decoration: none; }
.ds-brand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  font-size: 21px;
  line-height: 1.1;
  color: var(--text-primary);
}
.ds-brand-sub { font-size: var(--app-text-xs); color: var(--text-muted); }

.ds-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.ds-nav-group + .ds-nav-group { margin-top: 16px; }
.ds-nav-label {
  display: block;
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--app-radius-sm);
  font-size: var(--app-text);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.ds-nav-item:hover { background: var(--app-hover); color: var(--text-primary); text-decoration: none; }
.ds-nav-item.is-active {
  background: var(--app-active);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
.ds-nav-item.is-active .ds-nav-icon { color: var(--ember-s1); }
.ds-nav-icon { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.ds-nav-item:hover .ds-nav-icon { color: var(--text-secondary); }
.ds-nav-badge {
  margin-left: auto;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--soft-peach);
  color: var(--ember-s1);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.ds-user {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--soft-peach);
  color: var(--ember-s1);
  font-size: var(--app-text-xs);
  font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center;
}
/* The whole identity block is a link to /profile, so it needs the row's layout
   rather than the default inline-anchor box. */
.ds-user-link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 4px; margin: -4px;
  border-radius: var(--app-radius-sm);
  color: inherit; text-decoration: none;
}
.ds-user-link:hover .ds-user-name { color: var(--text-accent); }
.ds-user-link:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 1px; }
.ds-user-id { min-width: 0; display: flex; flex-direction: column; }
.ds-user-name {
  font-size: var(--app-text-sm);
  font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-user-version { font-size: var(--app-text-xs); color: var(--text-muted); }
.ds-logout {
  margin-left: auto; flex: none;
  border: 0; background: none; font: inherit;
  font-size: var(--app-text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
  cursor: pointer;
  padding: 4px;
}
.ds-logout:hover { text-decoration: underline; }

/* ---- Main column ---- */
.ds-main { min-width: 0; display: flex; flex-direction: column; }

.ds-page-head {
  padding: 24px 28px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.ds-page-head > .ds-page-heading { flex: 1; min-width: 0; }
.ds-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  font-size: 34px;
  color: var(--text-primary);
}
.ds-page-lede {
  margin: 8px 0 0;
  max-width: 88ch;
  font-size: var(--app-text);
  color: var(--text-secondary);
  line-height: 1.5;
}
.ds-page-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ds-page-stamp { font-size: var(--app-text-xs); color: var(--text-muted); }

/* Block, not flex: the pages still written in Tailwind put a <table> straight in
   here, and a table as a flex item shrink-wraps to its content instead of filling
   the column. Pages that want the stacked rhythm add `ds-stack`. */
.ds-page-body { padding: 20px 28px 28px; }
.ds-stack { display: flex; flex-direction: column; gap: 18px; }
.ds-page-foot {
  margin: 0;
  padding: 0 28px 28px;
  font-size: var(--app-text-xs);
  color: var(--text-muted);
}

/* ==========================  Scoped element defaults  ====================
   The design system's base.css, narrowed to opted-in subtrees. */
.ds :where(a) { color: var(--text-link); text-decoration: none; }
.ds :where(a:hover) { color: var(--ember-s2); text-decoration: underline; }
.ds :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds ::selection { background: var(--ember); color: var(--white); }

/* ==========================  Controls  =================================== */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h);
  padding: 0 16px;
  border: 0;
  border-radius: var(--app-radius);
  background: var(--accent);
  color: var(--text-on-ember);
  font: inherit;
  font-size: var(--app-text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.ds-btn:hover { background: var(--accent-hover); color: var(--text-on-ember); text-decoration: none; }
.ds-btn:active { background: var(--accent-active); }
.ds-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.ds-btn--outline {
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.ds-btn--outline:hover { background: var(--app-hover); color: var(--text-primary); }

.ds-btn--sm { height: 34px; padding: 0 12px; font-size: var(--app-text-xs); }
.ds-btn--xs {
  height: 26px; padding: 0 10px;
  font-size: var(--app-text-xs);
  border-radius: var(--app-radius-sm);
}

/* ==========================  Panels  ===================================== */
.ds-panel {
  background: var(--surface-card);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ds-panel--pad { padding: 16px 18px; }

.ds-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--warm-200);
}
.ds-panel--pad .ds-panel-head { padding: 0 0 12px; border-bottom: 0; }
.ds-panel-title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--app-text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  white-space: nowrap;
}
.ds-panel-note { font-size: var(--app-text-xs); color: var(--text-muted); }
.ds-panel-note--end { margin-left: auto; text-align: right; }
.ds-panel-sub { margin: 0 0 12px; font-size: var(--app-text-xs); color: var(--text-muted); }

.ds-count {
  font-size: var(--app-text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ember-s1);
  background: var(--soft-peach);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.ds-count--clear { color: var(--land-s1); background: var(--land-t1); }

/* ==========================  Needs attention  ============================ */
.ds-incident {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) 190px 132px;
  align-items: start;
  gap: 16px;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--warm-200);
}
.ds-incident:last-child { border-bottom: 0; }
.ds-incident-tone { width: 4px; align-self: stretch; background: var(--sand-s1); }
.ds-incident--critical .ds-incident-tone { background: var(--ember-s2); }
.ds-incident-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ds-incident-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-incident-key {
  font-family: var(--font-mono);
  font-size: var(--app-text-sm);
  font-weight: var(--fw-semibold);
}
.ds-incident-level {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
.ds-incident--critical .ds-incident-level { color: var(--ember-s2); }
.ds-incident-detail {
  font-size: var(--app-text);
  color: var(--text-secondary);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ds-incident-when { font-size: var(--app-text-xs); color: var(--text-muted); line-height: 1.5; }
.ds-incident-action { font-size: var(--app-text-sm); font-weight: var(--fw-semibold); }

.ds-allclear { display: flex; align-items: center; gap: 14px; padding: 22px 18px; flex-wrap: wrap; }
.ds-allclear-dot { width: 10px; height: 10px; flex: none; background: var(--land-s1); }
.ds-allclear-title { font-size: var(--app-text-lg); font-weight: var(--fw-medium); }
.ds-allclear-note { font-size: var(--app-text); color: var(--text-secondary); }

/* ==========================  Health body layout  ========================= */
.ds-health-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .ds-health-grid { grid-template-columns: minmax(0, 1fr); }
}
.ds-rail { display: flex; flex-direction: column; gap: 18px; }

/* ==========================  Sources table  ============================== */
.ds-sources { overflow-x: auto; }
.ds-src-grid {
  display: grid;
  grid-template-columns:
    minmax(140px, 1.5fr) 108px 150px 118px minmax(160px, 1.1fr) 92px;
  gap: 12px;
  min-width: 840px;
}
.ds-sources .ds-panel-head { min-width: 840px; }
.ds-src-headrow {
  padding: 9px 18px;
  border-bottom: 1px solid var(--warm-200);
  background: var(--warm-100);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ds-src { border-bottom: 1px solid var(--warm-200); }
.ds-src:last-child { border-bottom: 0; }
.ds-src-row { align-items: center; padding: 11px 18px; min-height: var(--row-h); }
.ds-src-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ds-src-name a {
  font-size: var(--app-text);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-src-key { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ds-src-status { display: flex; align-items: center; gap: 6px; }
.ds-src-status-label { font-size: var(--app-text-sm); font-weight: var(--fw-medium); }
.ds-src-when {
  font-size: var(--app-text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ds-src-spark { color: var(--warm-500); }
.ds-src-spark svg { overflow: visible; }
.ds-src-lastrun {
  min-width: 0;
  font-size: var(--app-text-sm);
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-src-toggle { display: flex; justify-content: flex-end; }

/* Status markers: the square is the brand's mark, the label falls back to the
   text ramp because sand and land do not pass as small text on white. */
.ds-dot { width: 7px; height: 7px; flex: none; background: var(--warm-500); }
.ds-dot--fetching { background: var(--land-s1); }
.ds-dot--stale    { background: var(--sand-s1); }
.ds-dot--failing  { background: var(--ember-s2); }
.ds-dot--paused   { background: var(--warm-500); }
.ds-dot--retired  { background: var(--warm-400); }
.ds-src--failing .ds-src-status-label { color: var(--ember-s2); }
.ds-src--fetching .ds-src-status-label { color: var(--text-secondary); }

/* ---- Expanded source detail ---- */
.ds-src-detail {
  padding: 4px 18px 18px;
  background: var(--warm-100);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 840px;
}
.ds-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 10px;
  padding-top: 14px;
}
.ds-counter {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-card);
  border: 1px solid var(--warm-200);
  border-radius: var(--app-radius-sm);
  padding: 8px 10px;
}
.ds-counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ds-counter-value {
  font-size: var(--app-text-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ds-counter--bad .ds-counter-value { color: var(--ember-s2); }
.ds-src-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ds-src-foot-note { font-size: var(--app-text-sm); color: var(--text-secondary); }
.ds-src-foot-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ds-src-queued { font-size: var(--app-text-sm); color: var(--land-s1); font-weight: var(--fw-semibold); }
.ds-src-foot-end a { font-size: var(--app-text-sm); font-weight: var(--fw-semibold); }

/* ==========================  Rail lists  ================================= */
.ds-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--warm-200);
}
.ds-line--baseline { align-items: baseline; padding: 7px 0; }
.ds-line-mono {
  font-family: var(--font-mono);
  font-size: var(--app-text-sm);
  font-weight: var(--fw-medium);
}
.ds-line-label { font-size: var(--app-text-sm); color: var(--text-secondary); }
.ds-line-end { margin-left: auto; font-size: var(--app-text-xs); color: var(--text-muted); }
.ds-line-value {
  margin-left: auto;
  font-size: var(--app-text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.ds-line-stat {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================  Login  ====================================== */
.ds-centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ==========================  Inline result messages  ===================== */
.ds-ok   { color: var(--land-s1); font-weight: var(--fw-semibold); }
.ds-warn { color: var(--sand-s1); font-weight: var(--fw-semibold); }
.ds-bad  { color: var(--ember-s2); font-weight: var(--fw-semibold); }
.ds-result { margin: 0; font-size: var(--app-text-sm); }

[x-cloak] { display: none !important; }

/* ==========================  Login form  ================================= */
.ds-login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.ds-login .ds-panel-sub { margin: -8px 0 0; }
.ds-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--app-text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.ds-field input {
  height: var(--control-h);
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--app-radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--app-text);
}
.ds-field input:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-focus); outline: 0; }

/* ==========================  Narrow viewports  ===========================
   This is a desk tool and the Sources table keeps its 880px min-width behind a
   horizontal scroll rather than pretending to be a phone layout. What does adapt
   is the chrome: the sidebar becomes a scrolling strip and the incident rows
   stack, so a laptop at half-width is still usable. */
@media (max-width: 1000px) {
  /* Explicit rows: the shell is min-height 100vh, and a stretched auto row would
     blow the collapsed nav strip up to half the screen. */
  .ds-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ds-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .ds-nav { display: flex; align-items: center; gap: 6px; overflow-x: auto;
            padding: 10px 12px; flex: none; }
  .ds-nav-group { display: flex; align-items: center; gap: 4px; }
  .ds-nav-group + .ds-nav-group { margin-top: 0; }
  .ds-nav-group + .ds-nav-group::before {
    content: "";
    width: 1px;
    height: 20px;
    background: var(--border-subtle);
    margin: 0 6px;
  }
  .ds-nav-label { display: none; }
  .ds-nav-item { white-space: nowrap; }
  .ds-page-head, .ds-page-body, .ds-page-foot { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 860px) {
  .ds-incident {
    grid-template-columns: 4px minmax(0, 1fr);
    row-gap: 8px;
    padding-right: 18px;
  }
  .ds-incident-when, .ds-incident-action { grid-column: 2; }
}