/* ═══════════════════════════════════════════════════════════════════════════
   Home (step 9) — web/src/pages/Home/. Layout from tmp/mockups/Home.dc.html.

   - The briefing is AI-written, so it is a petal (.im-ai--lg) with its
     provenance line; everything else — sources, actions waiting on people,
     pinned boards, and the briefing's own failure states — is square.
   - Logical properties throughout, so a right-to-left document mirrors it.
   - Sizes read the density tokens (spec 015) where one exists, with today's
     value as the fallback, so a compact theme tightens Home with the rest.
   ═══════════════════════════════════════════════════════════════════════════ */

.home-body {
  padding: var(--page-body-pad, 36px clamp(20px, 3vw, 44px) 44px);
  display: flex; flex-direction: column; gap: var(--home-gap, 32px);
}

/* ── greeting and the ask box ─────────────────────────────────────────────── */
.home-ask { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.home-date { margin: 0; color: var(--muted); font-size: var(--type-body, 15px); }
.home-greeting {
  margin: 2px 0 0; font: 600 clamp(26px, 3.2vw, 36px)/1.15 var(--display);
  letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.home-greeting:lang(ar), [dir="rtl"] .home-greeting { letter-spacing: 0; line-height: 1.4; }
.home-lead { margin: 8px 0 0; color: var(--muted); max-width: 68ch; }

.home-ask-box {
  display: flex; align-items: center; gap: 10px;
  padding-block: 8px; padding-inline: 20px 8px;
  border: 2px solid var(--accent); border-radius: 16px; background: var(--surface);
}
.home-ask-box:focus-within { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.home-ask-field { flex: 1; min-width: 0; display: flex; }
.home-ask-field input {
  flex: 1; min-width: 0; height: max(44px, var(--touch-min, 0px));
  border: 0; outline: 0; background: transparent; color: var(--text);
  font: 400 17px var(--sans);
}
.home-ask-field input::placeholder { color: var(--faint); }
.home-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-suggestions .im-chip { text-align: start; min-height: max(40px, var(--touch-min, 0px)); }

/* ── the two columns: briefing, and the aside ─────────────────────────────── */
.home-split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.home-split > .home-brief, .home-split > .home-brief-state { flex: 2 1 520px; min-width: 0; }
.home-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.home-panel { padding: var(--panel-pad, 22px); gap: 14px; }
.home-panel-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.home-panel-title { margin: 0; font: 600 18px/1.3 var(--display); }
.home-link {
  border: 0; padding: 0; background: none; cursor: pointer;
  color: var(--accent); font: 500 14px var(--sans); text-decoration: underline;
  text-underline-offset: 3px; min-height: var(--touch-min, auto);
}
.home-link:hover { color: color-mix(in srgb, var(--accent) 80%, var(--text)); }
.home-link:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.home-quiet { margin: 0; color: var(--muted); font-size: var(--type-body, 14px); }
.home-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.home-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--row-gap, 12px); }
.home-row {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  padding: 0; border: 0; background: none; color: var(--text); text-align: start; cursor: pointer;
  font: inherit; min-height: var(--touch-min, auto);
}
.home-row .im-petal-dot { margin-top: 7px; }
[dir="rtl"] .home-row .im-petal-dot { border-radius: 1px 6px 1px 6px; }
.home-row:hover .home-row-title { color: var(--accent); }
.home-row:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 4px; }
.home-row-text { display: flex; flex-direction: column; min-width: 0; }
.home-row-title { font-weight: 500; overflow-wrap: anywhere; }
.home-row-meta { font-size: var(--type-secondary, 13px); color: var(--muted); }

.home-source {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: var(--type-body, 14px);
}
.home-source-name { min-width: 0; overflow-wrap: anywhere; }

/* ── pinned dashboards: text cards (no server-side thumbnail renderer) ────── */
.home-pins { display: flex; flex-direction: column; gap: 16px; }
.home-section-title { margin: 0; font: 600 20px/1.3 var(--display); }
.home-pins-empty { max-width: 560px; padding: var(--empty-pad, 22px); }
.home-pins-new { align-self: flex-start; }
.home-pin-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px;
}
.home-pin {
  position: relative; display: flex; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .12s;
}
.home-pin:hover, .home-pin:focus-within { border-color: var(--accent-dim); }
.home-pin-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 16px; padding-inline-end: 4px;
  border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer;
  border-radius: var(--r-lg);
}
.home-pin-open:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
.home-pin-title { font-weight: 500; overflow-wrap: anywhere; }
.home-pin-unpin {
  flex: none; margin: 8px; display: grid; place-items: center;
  width: max(36px, var(--touch-min, 0px)); height: max(36px, var(--touch-min, 0px));
  border: 0; border-radius: var(--r); background: none; color: var(--accent); cursor: pointer;
}
.home-pin-unpin:hover { background: var(--accent-bg); }
.home-pin-unpin:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }

/* ── the briefing: AI-written, so a petal; its failures are square ────────── */
.home-brief { gap: 18px; }
.home-brief-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-brief-head .home-panel-title { font-size: 20px; }
.home-brief-prov { flex: 1 1 220px; min-width: 0; }
.home-brief-refresh { margin-inline-start: auto; }
.home-brief-refresh svg { width: 16px; height: 16px; }
.home-brief-writing { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--muted); }
.home-brief-summary { margin: 0; color: var(--text); max-width: 68ch; }
.home-brief-note { font-size: var(--type-secondary, 13px); }
.home-brief-error { margin: 0; font-weight: 500; }
.home-brief-state { padding: var(--panel-pad, 22px); }
.home-brief-connect { align-self: flex-start; }

.home-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.home-finding {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding-block: var(--row-pad-y, 16px); border-top: 1px solid var(--ai-border, var(--border));
}
.home-finding:last-child { padding-block-end: 0; }
.home-finding-text { flex: 1 1 260px; min-width: 0; }
.home-finding-headline { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.home-finding-detail { margin: 2px 0 0; color: var(--muted); font-size: var(--type-body, 14px); overflow-wrap: anywhere; }
.home-finding-ask { white-space: nowrap; margin-inline-start: auto; }
/* The sparkline is the data drawn, so it reads in the direction the page does. */
.home-spark { flex: none; display: block; }
[dir="rtl"] .home-spark { transform: scaleX(-1); }