/* ================================================================
   ORION Observatory — Mission Control (Dashboard)
   ================================================================ */

/* ── Hero Section ── */
.dashboard-hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
  margin: 16px 0 0;
  max-width: 15ch;
  text-wrap: balance;
}

.dashboard-hero-copy {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--muted);
  line-height: 1.7;
  margin: 20px 0 0;
  max-width: 720px;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

/* ── High Signal Feed card title (finding 19 / B1.11) ──
   Two-line clamp with ellipsis instead of a single nowrap line — at 375px
   long headlines ("How Discord reduced websocket traffic by…") overflowed
   their clientWidth and were cut off mid-word. */
.dashboard-signal-title {
  font-size: var(--fs-base);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Mobile-only building blocks (Phase C) ──
   The "Next" capsule (concept-level framing + single Start Orbit CTA) and
   the featured single Signal card have no desktop equivalent — the desktop
   Resume-mission panel is star-level, and the High Signal Feed panel is a
   3-item list. Both render unconditionally from render() but stay hidden
   until the 768px mobile breakpoint below, where they replace their
   desktop counterparts (which hide at that width) rather than stacking
   alongside them. */
.dashboard-next-card,
.dashboard-signal-card {
  display: none;
}

/* Readiness stat's progress bar — real value, mock-visual-match, gated to
   mobile only so the desktop stat card is untouched. */
.orion-stat__bar {
  display: none;
  margin-top: 10px;
}

/* Active Plan's edit control carries both an icon and a text label in the
   markup; desktop shows the text (unchanged behaviour), mobile swaps to an
   icon-only 44x44 square below since there's no room for the word at
   402px (rule 5 / finding 04 — 44px floor via padding, not size). */
.dashboard-plan-edit__icon {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  /* Rule 4 — hero collapses to eyebrow + one 26px line, no copy
     paragraph. Was 367px / 45% of an 812px screen before any content;
     the freed space goes to the Next-orbit capsule below instead. */
  .dashboard-hero-title {
    font-size: var(--fs-hero-mobile);
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: none;
    margin-top: 6px;
  }

  .dashboard-hero-title__sub,
  .dashboard-hero-copy {
    display: none;
  }

  /* Reflow the whole view into the mock's order via flex `order` — one
     source of truth per element, only presentation order changes below
     768px. Desktop stays plain block flow (no flex declared outside this
     query), so nothing above the breakpoint changes. */
  .dashboard-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dashboard-view > .t-eyebrow,
  .dashboard-view > .dashboard-hero-title {
    order: 1;
  }

  .dashboard-next-card {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--hair2);
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
  }

  .dashboard-next-card__title {
    margin-top: 6px;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  .dashboard-next-card__desc {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.5;
  }

  .dashboard-next-card__cta {
    margin-top: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .dashboard-view > .dashboard-stats-grid {
    order: 3;
    margin-top: 0 !important;
    grid-template-columns: 1fr 1fr;
  }

  /* Keep only Readiness (1st) + Recall strength (3rd) on mobile — real,
     already-computed metrics, not the mock's illustrative "Logged 42h"
     tile, which has no backing telemetry anywhere in the app (see commit
     message). Lesson velocity / Role fit stay desktop-only. */
  .dashboard-stats-grid > .orion-stat:nth-child(2),
  .dashboard-stats-grid > .orion-stat:nth-child(4) {
    display: none;
  }

  .orion-stat__bar {
    display: block;
  }

  .dashboard-view > .active-plan-card {
    order: 4;
    margin-top: 0 !important;
    flex-wrap: nowrap;
  }

  /* Active Plan's edit form (ROLE/WEEKS/GOAL) — reachable at this width via
     the pencil button above. .orion-input's shared base rule is 42px
     (design-system.css:688, used by every form in the app); scoped to just
     this screen's edit form rather than bumping the shared rule app-wide,
     which is outside Mission Control's file scope. */
  .dashboard-view .orion-input {
    min-height: 44px;
  }

  .dashboard-plan-customize {
    display: none;
  }

  .dashboard-plan-edit {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dashboard-plan-edit__icon {
    display: inline-flex;
  }

  .dashboard-plan-edit__text {
    display: none;
  }

  .dashboard-view > .dashboard-signal-card {
    order: 5;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: var(--panel);
    padding: 16px;
  }

  .dashboard-signal-card__age {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  .dashboard-signal-card__item {
    margin-top: 12px;
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    padding: 0;
  }

  .dashboard-signal-card__badge {
    flex: 0 0 auto;
    margin-top: 3px;
    font-family: var(--f-mono);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--text);
    border-radius: 4px;
    padding: 3px 6px;
  }

  .dashboard-signal-card__body {
    flex: 1;
    min-width: 0;
  }

  .dashboard-signal-card__title {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }

  .dashboard-signal-card__meta {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.45;
  }

  /* Resume-mission panel + readiness curve — replaced by .dashboard-next-card
     above; both its CTAs (Continue Orbit -> nebula, Open Map/Gravity Well)
     are redundant with the Next capsule and the bottom tab bar. */
  .dashboard-view > .orion-split {
    display: none;
  }

  .dashboard-view > .orion-grid--wide {
    order: 6;
  }

  /* High Signal Feed's 3-item list — replaced above by the single featured
     .dashboard-signal-card so the same data isn't shown twice. */
  .dashboard-signal-panel {
    display: none;
  }

  .dashboard-view > .flight-director {
    order: 7;
  }

  .dashboard-view > .mission-log-card {
    order: 8;
  }
}