/*
  Screen 05 — Saved Markets Workspace.
  Layout traces to SCREEN_05_SAVED_MARKETS_WORKSPACE_VISUAL_CONCEPT.md.
  Deliberately accent-free (frozen decision) — every interactive or
  priority state below is carried by weight, position, and rule, never
  by the brass accent. Quieter register than Screen 01 throughout:
  narrower reading column, no chips, no full-strength colour anywhere.
*/

.page-shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-9);
}

/* ---------- Hero / Portfolio Overview ---------- */

.sm-hero {
  padding-bottom: var(--space-7);
}

.sm-hero__line {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: var(--leading-tight);
  font-weight: 500;
  max-width: 34rem;
}

.portfolio-overview {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  color: var(--colour-text);
  max-width: 36rem;
}

/* ---------- Active Saved Markets ---------- */

.market-list { margin-top: var(--space-2); }

.market-entry {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--colour-hairline);
}
.market-entry:last-child { border-bottom: none; }

.market-entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.market-entry__name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.market-entry__health {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
  white-space: nowrap;
}

.market-entry__health--elevated {
  color: var(--colour-text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.market-entry__health--elevated::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border: 1px solid var(--colour-text);
}

.market-entry__body {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  color: var(--colour-text);
  max-width: 40rem;
}

.market-entry__trajectory {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-faint);
  font-style: italic;
}

.market-entry__status {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
}

.market-entry__actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.market-entry__actions .text-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border-bottom-color: var(--colour-hairline-strong);
}

.market-entry__actions .text-link--quiet {
  color: var(--colour-text-faint);
  border-bottom-style: dashed;
}
.market-entry__actions .text-link--quiet:hover { color: var(--colour-text-muted); border-color: var(--colour-hairline-strong); }

/* The one route into an active material interruption (Screen 02) — set
   apart from Open/Rename/Delete by weight alone, never by colour, per
   this page's own accent-free discipline. */
.market-entry__actions .text-link--investigate {
  font-weight: 600;
}

.market-list__collapsed {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
}

/* ---------- Monitoring Health ---------- */

.health-explainer p + p { margin-top: var(--space-4); }
.health-explainer p {
  font-family: var(--font-serif);
  font-size: var(--size-small);
  line-height: var(--leading-loose);
  color: var(--colour-text-muted);
  max-width: 38rem;
}
.health-explainer strong { color: var(--colour-text); font-weight: 600; }

/* ---------- Recent Intelligence ---------- */

.ri-entry {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--colour-hairline);
}
.ri-entry:last-child { border-bottom: none; }

.ri-entry__text {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  max-width: 40rem;
}

.ri-entry__links {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.ri-entry__why {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
  border-bottom: 1px dashed var(--colour-hairline-strong);
  cursor: pointer;
}
.ri-entry__why:hover { color: var(--colour-text-muted); }

.ri-entry__detail {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-left: 2px solid var(--colour-hairline-strong);
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
  line-height: var(--leading-loose);
  max-width: 38rem;
}
.ri-entry__detail.visible { display: block; }

.ri-absent {
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-faint);
}

/* ---------- Explainability ---------- */

.explain-body {
  font-family: var(--font-serif);
  font-size: var(--size-small);
  line-height: var(--leading-loose);
  color: var(--colour-text-muted);
  max-width: 38rem;
}

/* ---------- Management Pathways ---------- */

.pathways { display: flex; flex-direction: column; gap: var(--space-3); }

.pathway { font-family: var(--font-serif); font-size: var(--size-body); }

.pathway--muted {
  color: var(--colour-text-faint);
  font-size: var(--size-small);
}
.pathway--muted em { font-style: normal; }

/* ---------- Restrained disclosure (shared pattern, page-scoped tone) ---------- */

.disclosure { margin-top: var(--space-3); }

/* ---------- Closing statement ---------- */

.closing-statement {
  padding-top: var(--space-7);
}

.closing-statement__line {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  max-width: 36rem;
}

.closing-statement__tenure {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--colour-text-faint);
}

/* ---------- Prototype-only demo state switcher ---------- */
/* Clearly separated from the product interface: distinct panel style,
   fixed position, explicitly labelled as tooling, never part of the
   customer-facing chrome above. */

/* A full-width bar, not a floating corner panel — a corner panel
   overlapped real content at tablet and mobile widths, where the
   reading column runs closer to the viewport edge. The bar compensates
   by reserving its own space (see body padding-bottom below) rather
   than floating over whatever happens to scroll beneath it. */

body { padding-bottom: 3.75rem; }

.demo-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--colour-base-raised);
  border-top: 1px dashed var(--colour-hairline-strong);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  opacity: 0.7;
  transition: opacity var(--duration-quick) ease;
}
.demo-controls:hover, .demo-controls:focus-within { opacity: 1; }

.demo-controls__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #d98a4f;
  white-space: nowrap;
}

.demo-controls__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.demo-controls button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--colour-hairline-strong);
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.demo-controls button[aria-pressed="true"] {
  background: var(--colour-text);
  color: var(--colour-base);
  border-color: var(--colour-text);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .page-shell { padding: var(--space-6) var(--space-4) var(--space-8); }
  .market-entry__head { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .demo-controls { justify-content: center; }
  body { padding-bottom: 4.75rem; }
}