/* =========================================================================
   DS v4 — INDEX / SITUATION PAGE COMPONENTS (guvnor.ai/start/ family)
   From the design handoff start.css; builds on ds4/core.css. Guvnor voice
   only: no official artefacts on index pages — everything is navigation.
   Dark scope adapted [data-mode="dark"] → .dark.
   ========================================================================= */

.idx-body { max-width: var(--max-width); margin: 0 auto; padding: 0 40px 80px; width: 100%; }
.idx-main { max-width: 880px; }

.idx-section { margin-top: calc(64px * var(--rk)); }
.idx-section:first-child { margin-top: calc(40px * var(--rk)); }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.sec-head h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.02em; font-weight: 650; margin: 0; }
.sec-link { white-space: nowrap; color: var(--color-link); text-decoration: none; font-size: 15px; line-height: 24px; font-weight: 600; }
.sec-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.sec-intro { font-size: 17px; line-height: 28px; color: var(--color-text-secondary); margin: 8px 0 0; max-width: var(--measure); }
.sec-intro strong { font-weight: 650; color: var(--color-text-primary); }

/* ---- task grid ("What are you trying to do?") ------------------------------ */
.tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: calc(24px * var(--rk)); }
.task { display: grid; grid-template-columns: 1fr 16px; gap: 16px; align-items: center; background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-md); padding: 16px 20px; text-decoration: none; color: inherit; transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.task:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); }
.task:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.task h3 { font-family: var(--font-heading); font-size: 17px; line-height: 24px; letter-spacing: -0.005em; font-weight: 600; margin: 0; color: var(--color-link); }
.task p { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 2px 0 0; }
.task svg { width: 16px; height: 16px; color: var(--color-accent); }
@media (max-width: 700px) { .tasks { grid-template-columns: 1fr; } }

/* ---- journey list (editorial index rows) ----------------------------------- */
.journeys { display: flex; flex-direction: column; margin-top: calc(16px * var(--rk)); }
.journey { display: grid; grid-template-columns: 1fr 16px; gap: 24px; align-items: start; padding: calc(20px * var(--rk)) 0; border-top: 1px solid var(--color-border-light); text-decoration: none; color: inherit; }
.journey:first-child { border-top: 0; }
.journey:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.journey h3 { font-family: var(--font-heading); font-size: 19px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 0; color: var(--color-link); }
.journey p { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 4px 0 0; max-width: 66ch; text-wrap: pretty; }
.journey .chev { width: 16px; height: 16px; margin-top: 4px; color: var(--color-text-muted); transition: color var(--transition-base); }
.journey:hover .chev { color: var(--color-accent); }

/* the "why you're seeing this" line — profile-aware provenance */
.match { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--color-accent-text); }
.match svg { width: 15px; height: 15px; flex: none; padding: 2.5px; border-radius: 50%; background: var(--color-accent); color: #fff; }
.dark .match svg { color: #22362c; }

/* ---- "Changing now" flux card — promoted, date-badged pick ----------------- */
.flux { display: grid; grid-template-columns: 1fr 16px; gap: 24px; align-items: center; background: var(--color-bg-white); border: 1px solid color-mix(in srgb, var(--color-accent) 36%, transparent); border-radius: var(--border-radius-md); padding: 18px 20px; margin-top: calc(16px * var(--rk)); text-decoration: none; color: inherit; transition: box-shadow var(--transition-base); }
/* the box hangs into the margin so its TEXT shares the column's left edge with
   the heading and the flush .journey rows (boxes hang, text aligns) */
@media (min-width: 721px) { .flux { margin-inline: -21px; } }
.flux:hover { box-shadow: var(--shadow-md); }
.flux:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.fx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.fx-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-accent-text); }
.fx-date { background: var(--color-accent-subtle); color: var(--color-accent-text); border-radius: var(--border-radius-pill); padding: 2px 10px; font-size: 12px; line-height: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.flux h3 { font-family: var(--font-heading); font-size: 19px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 0; color: var(--color-link); }
.flux p { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 4px 0 0; max-width: 66ch; }
.flux .chev { width: 16px; height: 16px; color: var(--color-accent); }
.flux + .journeys .journey:first-child { border-top: 0; }

/* ISS-584 — a date-badged card keeps its CURATED position, so .flux cards
   interleave with .journey rows inside the same list rather than being hoisted
   above it. The list's own margin-top already spaces a leading card; elsewhere
   the preceding row's bottom padding carries most of the gap, and the following
   row's hairline is redundant against the card's own border. */
.journeys > .flux { margin-top: calc(6px * var(--rk)); }
.journeys > .flux:first-child { margin-top: 0; }
.journeys > .flux + .journey { border-top: 0; }

/* ---- sector picker chips (cold start) -------------------------------------- */
.sector-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(20px * var(--rk)); }
.sector-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--border-radius-pill); background: var(--color-bg-white); border: 1px solid var(--color-border-light); color: var(--color-text-secondary); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; transition: border-color var(--transition-base), color var(--transition-base); }
.sector-chips a:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); color: var(--color-accent-text); }
.sector-chips svg { width: 12px; height: 12px; color: var(--color-text-muted); }
.sector-chips a:hover svg { color: var(--color-accent-text); }

/* trailing "all <sector> guidance" link */
.all-link { display: inline-flex; align-items: center; gap: 6px; margin-top: calc(20px * var(--rk)); color: var(--color-link); font-size: 15px; line-height: 24px; font-weight: 600; text-decoration: none; }
.all-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.all-link svg { width: 14px; height: 14px; }

.idx-main .brand-block { margin-top: calc(64px * var(--rk)); }

/* wide desktop — index pages flow to the full shell width */
@media (min-width: 1200px) {
  .idx-main { max-width: none; }
  .tasks { grid-template-columns: repeat(3, 1fr); }
  .journey p { max-width: var(--measure); }
}

@media (max-width: 720px) { .idx-body { padding: 0 20px 64px; } }
@media print { .task, .journey { break-inside: avoid; } }