/* ==========================================================================
   APPLICANS — HOME WORKSPACE
   Loads last. Owns the `hx-` namespace outright.

   Every class here is new, so nothing in the eight stylesheets before this
   one targets it. That is the point: no !important, no specificity war.
   The three shared classes the JS still writes into — .hgrid/.hcard from
   buildHomeGrid, .rd-* from readiness.js, .sl-empty — are reclaimed under
   `#dashboard .hx` so they win on specificity rather than on force.

   Palette is unchanged from the project: zinc neutrals, indigo action,
   violet tint. Motion follows Apple's model — springs live in
   dashboard-home-motion.js; this file carries only the static states and
   the reduced-motion fallbacks.
   ========================================================================== */

#dashboard .hx {
  /* ---- palette, exactly as the project already defines it ---- */
  --hx-ground:      #FAFAFA;
  --hx-surface:     #FFFFFF;
  --hx-raised:      #F4F4F5;
  --hx-ink:         #18181B;
  --hx-ink-2:       #52525B;   /* 7.5:1 on white */
  /* Sized against the RAISED surface (#F4F4F5), not white. zinc-500 clears
     4.5:1 on white but lands at 4.2–4.4 on the segmented control and inside
     cards, which is where most of this tier actually renders. */
  --hx-ink-3:       #62626A;   /* 5.2:1 on raised, 6.6:1 on white */
  --hx-line:        #E4E4E7;
  --hx-line-soft:   #F1F1F3;

  --hx-indigo:      #4338CA;   /* 8.6:1 on white — action + accent text */
  --hx-indigo-ink:  #3730A3;
  --hx-violet:      #C4B5FD;   /* 1.9:1 — fills and tints only, never text */
  --hx-violet-soft: #EEEBFF;
  --hx-pink:        #FBCFE8;

  --hx-good:        #15803D;
  --hx-warn:        #B45309;

  /* ---- type scale, semantic names ----
     Tracking is size-specific: negative as text grows, ~0 at body,
     positive on the small uppercase labels. */
  --hx-fs-micro:  11px;
  --hx-fs-cap:    12px;
  --hx-fs-sm:     13px;
  --hx-fs-base:   14px;
  --hx-fs-md:     15px;
  --hx-fs-lg:     17px;
  --hx-fs-xl:     20px;
  --hx-fs-2xl:    26px;

  /* ---- 4px spacing scale ---- */
  --hx-1: 4px;  --hx-2: 8px;  --hx-3: 12px; --hx-4: 16px;
  --hx-5: 20px; --hx-6: 24px; --hx-8: 32px; --hx-10: 40px; --hx-12: 48px;

  --hx-r-sm: 10px;
  --hx-r:    14px;
  --hx-r-lg: 20px;

  --hx-shadow: 0 1px 2px rgba(24, 24, 27, .05), 0 8px 24px -16px rgba(24, 24, 27, .18);

  display: flex;
  flex-direction: column;
  gap: var(--hx-12);
  max-width: 1180px;
  margin-inline: auto;
  color: var(--hx-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  font-size: var(--hx-fs-base);
  line-height: 1.55;
}

.hx-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   A. CONTEXT ROW
   ========================================================================== */

#dashboard .hx-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hx-6);
  flex-wrap: wrap;
}

#dashboard .hx-eyebrow {
  display: block;
  margin-bottom: var(--hx-2);
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Was 58.88px/700. A greeting is orientation, not a headline. */
#dashboard .hx-greeting {
  margin: 0;
  color: var(--hx-ink);
  font-size: var(--hx-fs-2xl);
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}

#dashboard .hx-sub {
  margin: var(--hx-1) 0 0;
  max-width: 62ch;
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-md);
}

#dashboard .hx-top-actions { display: flex; gap: var(--hx-2); }

/* ---- buttons: controls must never read like content ---- */
#dashboard .hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hx-2);
  min-height: 40px;
  padding-inline: var(--hx-4);
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--hx-fs-sm);
  font-weight: 560;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
#dashboard .hx-btn svg { width: 15px; height: 15px; flex: none; }

#dashboard .hx-btn--solid {
  color: #fff;
  border: 1px solid var(--hx-indigo);
  background: var(--hx-indigo);
}
#dashboard .hx-btn--solid:hover { background: var(--hx-indigo-ink); border-color: var(--hx-indigo-ink); }

#dashboard .hx-btn--ghost {
  color: var(--hx-ink-2);
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
}
#dashboard .hx-btn--ghost:hover { color: var(--hx-ink); background: var(--hx-raised); }

#dashboard .hx-btn:focus-visible {
  outline: 2px solid var(--hx-indigo);
  outline-offset: 2px;
}

/* ==========================================================================
   B. READINESS RAIL
   ========================================================================== */

#dashboard .hx-rail {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--hx-8);
  padding: var(--hx-5) var(--hx-6);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r-lg);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

#dashboard .hx-rail-id { display: flex; align-items: center; gap: var(--hx-3); min-width: 0; }

#dashboard .hx-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  color: var(--hx-indigo);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--hx-violet-soft), var(--hx-pink));
  font-size: var(--hx-fs-lg);
  font-weight: 650;
}

#dashboard .hx-rail-name {
  margin: 0;
  font-size: var(--hx-fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
}
#dashboard .hx-rail-detail {
  margin: 1px 0 0;
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-sm);
}

/* readiness.js renders the meter into #readiness-summary */
#dashboard .hx-rail-meter {
  display: grid;
  gap: var(--hx-2);
  min-width: 0;
}
#dashboard .hx-rail-meter .hs-readiness-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hx-4);
}
#dashboard .hx-rail-meter .hs-readiness-head strong {
  flex: none;
  white-space: nowrap;
}

/* ==========================================================================
   C / D / E — SECTION HEADS
   One treatment for every band, sized as a section label rather than a
   page title. Heading levels descend: h1 26px, h2 20px.
   ========================================================================== */

#dashboard .hx-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hx-4);
  margin-bottom: var(--hx-4);
  flex-wrap: wrap;
}

#dashboard .hx-kicker {
  display: block;
  margin-bottom: var(--hx-1);
  color: var(--hx-indigo);
  font-size: var(--hx-fs-micro);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#dashboard .hx-h2 {
  margin: 0;
  font-size: var(--hx-fs-xl);
  font-weight: 620;
  letter-spacing: -.018em;
}

#dashboard .hx-head-note {
  margin: 0;
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-sm);
}

/* ==========================================================================
   D. WORKSPACE GRID
   buildHomeGrid() owns this markup, so .hgrid/.hcard are reclaimed here
   at #dashboard .hx specificity.
   ========================================================================== */

/* #home-grid holds two children: the focus row and the library disclosure.
   dashboard-better-interface.css pins it to one column with !important, and
   that is correct for this structure — so it is left alone. */
#dashboard .hx .hgrid { display: grid; gap: var(--hx-4); }

/* Three recommended workspaces, side by side. */
#dashboard .hx .home-tool-focus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hx-3);
}

#dashboard .hx .hcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "index  .      open"
    "icon   copy   copy";
  align-items: start;
  gap: var(--hx-2) var(--hx-3);
  min-height: 0;
  padding: var(--hx-4);
  /* The cards had no font-family and were silently falling back to Arial
     at 13.33px while the rest of the shell ran on the system stack. */
  font-family: inherit;
  font-size: var(--hx-fs-base);
  color: var(--hx-ink);
  text-align: start;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  background: var(--hx-surface);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #dashboard .hx .hcard:hover { border-color: var(--hx-violet); background: var(--hx-violet-soft); }
}
#dashboard .hx .hcard:focus-visible { outline: 2px solid var(--hx-indigo); outline-offset: 2px; }

#dashboard .hx .hcard-index {
  grid-area: index;
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-micro);
  font-weight: 650;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
#dashboard .hx .hcard .ci {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--hx-indigo);
  border-radius: var(--hx-r-sm);
  background: var(--hx-violet-soft);
}
#dashboard .hx .hcard .ci svg { width: 17px; height: 17px; }

#dashboard .hx .hcard-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#dashboard .hx .hcard-open {
  grid-area: open;
  color: var(--hx-indigo);
  font-size: var(--hx-fs-base);
}

#dashboard .hx .hcard-group {
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-micro);
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#dashboard .hx .hcard-title {
  font-size: var(--hx-fs-md);
  font-weight: 600;
  letter-spacing: -.012em;
}
#dashboard .hx .hcard-description {
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-sm);
  line-height: 1.5;
  text-wrap: pretty;
}
#dashboard .hx .hcard-plan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--hx-1);
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-cap);
}
#dashboard .hx .hcard.locked-card .ci { color: var(--hx-ink-3); background: var(--hx-raised); }
#dashboard .hx .hcard-lock { width: 12px; height: 12px; flex: none; }

/* ---- the library disclosure: all 13, grouped, behind one control ---- */

#dashboard .hx .home-tool-library {
  /* Match the checklist's disclosure timing, including its content reveal. */
  --rd-motion-standard: 240ms;
  --rd-ease-out: cubic-bezier(.16, 1, .3, 1);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r-lg);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}
#dashboard .hx .home-tool-library > summary {
  display: flex;
  align-items: center;
  gap: var(--hx-3);
  min-height: 60px;
  padding-inline: var(--hx-5);
  border-radius: var(--hx-r-lg);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--bi-fast) var(--bi-ease);
}
#dashboard .hx .home-tool-library > summary::-webkit-details-marker { display: none; }
#dashboard .hx .home-tool-library > summary:focus-visible {
  outline: 2px solid var(--hx-indigo);
  outline-offset: -3px;
}
#dashboard .hx .home-tool-library > summary > span:first-child { flex: 1; min-width: 0; }
#dashboard .hx .home-tool-library summary strong {
  display: block;
  font-size: var(--hx-fs-md);
  font-weight: 600;
  letter-spacing: -.012em;
}
#dashboard .hx .home-tool-library summary small {
  display: block;
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-sm);
}
#dashboard .hx .tool-library-count {
  padding: 2px 9px;
  color: var(--hx-indigo);
  border-radius: 999px;
  background: var(--hx-violet-soft);
  font-size: var(--hx-fs-cap);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
#dashboard .hx .tool-library-chevron {
  width: 18px; height: 18px;
  flex: none;
  border: 0;
  color: var(--bi-primary-active);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform var(--motion-state) var(--experience-ease);
}
#dashboard .hx .home-tool-library[open] .tool-library-chevron { transform: rotate(180deg); }
#dashboard .hx .home-tool-library[open] > .home-tool-list {
  animation: rd-disclose var(--rd-motion-standard) var(--rd-ease-out) both;
}

#dashboard .hx .home-tool-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--hx-5);
  padding: var(--hx-2) var(--hx-5) var(--hx-5);
  border-top: 1px solid var(--hx-line-soft);
}
#dashboard .hx .home-tool-group h3 {
  margin: var(--hx-3) 0 var(--hx-2);
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-micro);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#dashboard .hx .tool-list-row {
  display: flex;
  align-items: center;
  gap: var(--hx-3);
  width: 100%;
  min-height: 44px;
  padding: var(--hx-2);
  color: var(--hx-ink);
  border: 1px solid transparent;
  border-radius: var(--hx-r-sm);
  background: transparent;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease;
}
#dashboard .hx .tool-list-row:hover { border-color: var(--hx-line); background: var(--hx-raised); }
#dashboard .hx .tool-list-row:focus-visible { outline: 2px solid var(--hx-indigo); outline-offset: 1px; }
#dashboard .hx .tool-list-row > span:nth-child(2) { flex: 1; min-width: 0; }
#dashboard .hx .tool-list-row strong {
  display: block;
  font-size: var(--hx-fs-base);
  font-weight: 560;
  letter-spacing: -.008em;
}
#dashboard .hx .tool-list-row small {
  display: block;
  overflow: hidden;
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-cap);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard .hx .tool-list-icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  color: var(--hx-indigo);
  border-radius: 9px;
  background: var(--hx-violet-soft);
}
#dashboard .hx .tool-list-icon svg { width: 15px; height: 15px; }
#dashboard .hx .tool-list-row.locked-card .tool-list-icon { color: var(--hx-ink-3); background: var(--hx-raised); }
#dashboard .hx .tool-list-plan { flex: none; color: var(--hx-ink-3); font-size: var(--hx-fs-micro); }
#dashboard .hx .tool-list-open { flex: none; color: var(--hx-indigo); }

/* ==========================================================================
   E. SAVED WORK — segmented control
   ========================================================================== */

#dashboard .hx-seg {
  position: relative;
  display: flex;
  gap: var(--hx-1);
  margin-bottom: var(--hx-4);
  padding: var(--hx-1);
  border: 1px solid var(--hx-line);
  border-radius: 999px;
  background: var(--hx-raised);
  overflow-x: auto;
  scrollbar-width: none;
}
#dashboard .hx-seg::-webkit-scrollbar { display: none; }

#dashboard .hx-seg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--hx-2);
  min-height: 36px;
  padding-inline: var(--hx-4);
  flex: 1 0 auto;
  justify-content: center;
  color: var(--hx-ink-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: var(--hx-fs-sm);
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease;
}
#dashboard .hx-seg-btn:hover { color: var(--hx-ink-2); }
#dashboard .hx-seg-btn.is-active { color: var(--hx-ink); }
#dashboard .hx-seg-btn:focus-visible { outline: 2px solid var(--hx-indigo); outline-offset: -2px; }

#dashboard .hx-seg-n {
  min-width: 20px;
  padding: 1px 6px;
  color: var(--hx-ink-3);
  border-radius: 999px;
  background: var(--hx-line-soft);
  font-size: var(--hx-fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#dashboard .hx-seg-btn.is-active .hx-seg-n { color: var(--hx-indigo); background: var(--hx-violet-soft); }

/* The thumb is positioned and sprung by dashboard-home-motion.js. */
#dashboard .hx-seg-thumb {
  position: absolute;
  z-index: 0;
  top: var(--hx-1);
  left: 0;
  height: calc(100% - var(--hx-2));
  border-radius: 999px;
  background: var(--hx-surface);
  box-shadow: 0 1px 3px rgba(24, 24, 27, .12);
  will-change: transform, width;
}

#dashboard .hx-pane[hidden] { display: none; }
#dashboard .hx-pane {
  display: flex;
  flex-direction: column;
  gap: var(--hx-4);
  align-items: flex-start;
  padding: var(--hx-5);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r-lg);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}
#dashboard .hx-pane:focus-visible { outline: 2px solid var(--hx-indigo); outline-offset: 2px; }
#dashboard .hx-pane-body { width: 100%; min-width: 0; }

#dashboard .hx .sl-empty {
  margin: 0;
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-base);
  line-height: 1.55;
}

/* ==========================================================================
   C. READINESS LEDGER — readiness.js markup, reclaimed
   ========================================================================== */

/* This wrapper is layout-only: its cards align with the section heading.
   The ID also wins over the legacy double-ID desktop/mobile padding. */
#dashboard .hx #readiness-section {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#dashboard .hx .rd-section .panel-title {
  color: var(--hx-ink);
  font-size: var(--hx-fs-lg);
  font-weight: 620;
  letter-spacing: -.015em;
}
#dashboard .hx .rd-section .section-kicker { color: var(--hx-indigo); }

/* readiness.js emits this kicker at 10px. Targeted rather than a blanket
   floor: a `.hx :is(span,div,p)` rule would outrank this file's own sizing
   at (1,1,1) and quietly resize copy it was never meant to touch. */
#dashboard .hx .rd-next-copy > span,
#dashboard .hx .rd-kicker {
  color: var(--hx-ink-3);
  font-size: var(--hx-fs-micro);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  #dashboard .hx { gap: var(--hx-10); }
  #dashboard .hx-rail { grid-template-columns: minmax(0, 1fr); gap: var(--hx-4); }
  #dashboard .hx-top { align-items: stretch; flex-direction: column; }
  #dashboard .hx-top-actions .hx-btn { flex: 1; }
}

@media (max-width: 520px) {
  #dashboard .hx { gap: var(--hx-8); }
  #dashboard .hx-greeting { font-size: var(--hx-fs-xl); }
  #dashboard .hx .hgrid { grid-template-columns: minmax(0, 1fr); }
  #dashboard .hx-pane-cta { width: 100%; }
  #dashboard .hx-seg-btn { flex: 0 0 auto; }
}

/* ==========================================================================
   REDUCED MOTION
   The spring module checks this too and falls back to an instant snap;
   these rules cover the CSS-driven states.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #dashboard .hx *,
  #dashboard .hx *::before,
  #dashboard .hx *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  #dashboard .hx-seg-thumb { will-change: auto; }
}