/* ——— Signed-in homepage workspace ———
   Rendered only for logged-in visitors, via the {% if user_logged_in %} block
   in home.html. Every rule is scoped under .home-dash so it cannot reach the
   guest homepage, the scan funnel or the repertoire videos below it.
   Class names here must stay in step with that markup. */

/* ——— Widening the frame the two boxes live in ———
   This is where the workspace's width is actually decided, and it used to be
   decided somewhere it could not take effect.

   `.home-dash` carried `width: min(2400px, calc(100% - 24px))`, but a child
   can never be wider than the box that holds it, and its box is
   `.page-shell` — capped at 1560px by `.home-page .page-shell` in
   style_dark.css. So the 2400px figure was dead code: the workspace rendered
   at 1560px, ~772px per panel, however high the child asked to go. That is
   also why the comment on that rule read as though the panels were already
   1190px each — they never were, and the dashboard's six-up metric row and
   the importer's form row were being squeezed into three-up and stacked
   because of it.

   So the cap moves UP to the shell, where it can bind, and `.home-dash`
   becomes a plain `width: 100%` of it. 2400px is kept as the ceiling: at that
   measure each panel is ~1190px, which is what those two rows want, and the
   cap still stops an ultrawide from pulling the two panels apart.

   Scoped to `.home-workspace` rather than `.home-page`, because the guest
   marketing page renders from this same template at the same URL and its
   1560px measure is load-bearing — the hero, the tab strip and the guest
   importer are all built to it, and test_home_tabs.py pins it.

   Above 1100px only. Below that the two panels stack (see the 1100px query),
   so there is nothing to spread and the narrower frame is the better one;
   below 760px `.page-shell` is narrowed again by the phone rules in
   style_dark.css, and this must not undo them. */
@media (min-width: 1101px) {
  body.home-workspace .page-shell {
    width: min(2400px, calc(100% - 32px));
  }
}

/* The header and the footer are the same frame's furniture, and they were
   still at the 1240px base measure. Widening only the content between them
   would leave the logo and the theme switch marooned in the middle of a
   2400px page, so they are widened to the same ceiling and stop agreeing with
   the content. */
@media (min-width: 1101px) {
  body.home-workspace .site-header-inner,
  body.home-workspace .footer-inner {
    width: min(2400px, calc(100% - 32px));
  }
}

.home-dash {
  display: block;
  /* Restrained workspace accent — same token family as pricing, used as fill/
     border only (no neon halos). --dash-accent tints quiet chrome; --gold is
     reserved for primary CTAs and the active tab indicator. */
  --dash-accent: color-mix(in srgb, var(--gold) 42%, var(--muted));
  /* Soft edges: keep a readable frame, but blur the hard cut so borders
     feel smooth rather than sketched. */
  --dash-border: color-mix(in srgb, var(--cream) 12%, transparent);
  --dash-border-strong: color-mix(in srgb, var(--cream) 18%, transparent);
  --dash-edge: 1.5px;
  --dash-radius: 14px;
  /* Safe whether .home-view is a block or a grid: spans the full row either way. */
  grid-column: 1 / -1;
  /* The frame's full width, not a width of its own: the cap lives on
     .page-shell above, where it can actually bind. */
  width: 100%;
  /* .home-view > * forces 40px vertical padding; override it for our own rhythm. */
  padding: 0;
  margin: 12px 0 0;

  /* ——— The workspace fits the window ———
     The workspace is the only thing on this view (every marketing section is
     guest-only), so its whole height is a fixed budget rather than a growing
     document: the site header (~52px), .page-shell's own 16/48px padding, and
     a small margin. `100dvh` rather than `100vh` because a desktop browser's
     chrome changes the visible height as the user scrolls, and `vh` would
     size the shell to the window with the toolbars hidden.

     Use `height` (with max-height as backstop) so the grid children have a
     definite track size to fill. The inner flex columns then stretch to
     exactly the viewport bottom without scrolling the page. */
  --dash-chrome: 128px;
  height: calc(100dvh - var(--dash-chrome));
  max-height: calc(100dvh - var(--dash-chrome));
  min-height: 0;
}

/* Below this the cap stops being reachable in practice: the shell would be
   shorter than its own content and the whole workspace would scroll. On a
   small screen, scrolling the page is the correct behaviour, so the cap is
   lifted and the panels go back to growing naturally. */
@media (max-height: 620px), (max-width: 1100px) {
  .home-dash {
    max-height: none;
  }
  html.home-js .home-dash-panel.is-active {
    min-height: 0;
    max-height: none;
  }
}

/* ——— The workspace is tabbed ———
   One panel at a time, switched from the tab strip (`.home-dash-tabs`). That is
   the whole point of the redesign: each piece — account, welcome, import,
   practice — gets the FULL height of the workspace instead of sharing it with
   the others, so none of them has to compact itself to fit beside a peer.

   Progressive enhancement, gated on the `home-js` marker that home.html's
   inline script sets before first paint:

     · Without JS the tab strip is hidden (its buttons would be dead controls) and
       every panel renders stacked, so no-JS visitors still reach every piece
       and the page scrolls naturally.
     · With JS the tab strip appears and exactly one panel is visible; the shell
       keeps its viewport cap and the active panel scrolls internally.

   The shell itself is unframed -- see below. */



.home-dash-inner {
  /* No border or surface of its own. The panels carry the surfaces; a framed
     shell around framed panels is a box inside a box inside a box — the outer
     one adds nothing and reads as a third region. */
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  min-height: 0;
  height: 100%; /* Fill .home-dash so grid tracks have definite size */
}

/* Tab strip wrapper holds the tab strip and its scroll arrows */
.home-dash-tabs-wrapper {
  position: relative;
  display: none; /* hidden without JS */
}

html.home-js .home-dash-tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
}

/* The tab strip is hidden by default so a JS-less page never shows dead buttons. */
.home-dash-tabs {
  display: none;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  padding: 5px;
  min-width: 0;
  flex: 1;
  border: var(--dash-edge, 1.5px) solid var(--dash-border, var(--line-strong));
  border-radius: var(--dash-radius, 14px);
  background: color-mix(in srgb, var(--bg) 55%, var(--bg-2));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 4%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cream) 4%, transparent);
}

html.home-js .home-dash-tabs {
  display: flex;
}

/* The panels column and its members. Block by default (stacked); the grid
   form under JS stretches the active panel to its track, which is what lets
   the panel's `max-height` and internal scroll bind. */
.home-dash-panels {
  display: block;
  min-width: 0;
  min-height: 0;
}

.home-dash-panel {
  min-width: 0;
  min-height: 0;
}

/* ——— JS is on: the tabbed workspace ———
   `auto 1fr`: the tab strip on top, the visible panel stretching below.
   The panels column is a one-track grid of its own so the active panel
   is a STRETCHED grid item with a definite height — without that, its
   `max-height: 100%` has nothing to bind to and the internal scroll below
   silently becomes an external one. */
html.home-js .home-dash-inner {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "tabs" "panels";
  gap: 14px;
}

html.home-js .home-dash-tabs-wrapper {
  grid-area: tabs;
  align-self: start;
}

html.home-js .home-dash-panels {
  grid-area: panels;
}

html.home-js .home-dash-panels {
  grid-area: panels;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

html.home-js .home-dash-panel[data-workspace-panel] {
  display: none;
}

/* The active panel fills the grid track (remaining viewport after tab strip).
   A flex column so the inner box (`.home-dash-col` / `.home-practice-dash`)
   stretches to the same height rather than ending in a straight line part
   way down the panel.

   The grid track is `minmax(0, 1fr)` so it fills the remaining space.
   Using `height: 100%` on the panel binds to the grid area, making the panel
   the scroll container. Its flex children (`min-height: 0`) shrink to fit. */
html.home-js .home-dash-panel.is-active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden; /* Panel itself doesn't scroll; inner content does if needed */
  overscroll-behavior: contain;
}

html.home-js .home-dash-panel.is-active > * {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden; /* Inner box doesn't scroll; its children do if needed */
}

/* Inner content areas that may need scrolling (e.g., scanned games list, heatmap) */
html.home-js .home-dash-panel.is-active .home-import-results,
html.home-js .home-dash-panel.is-active .om-heat-wrap,
html.home-js .home-dash-panel.is-active .om-dash-openings .om-opening-list {
  overflow-y: auto;
  scrollbar-width: thin;
  max-height: 100%;
}

/* ——— Tab rail controls ———
   Thicker segmented control: stronger borders and taller hit targets so the
   workspace chrome feels solid on charcoal. Solid accent only on the active
   tab. Visible only under `html.home-js`. */
.home-dash-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: max-content;
  padding: 12px 16px;
  border: var(--dash-edge, 2px) solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.home-dash-tab:hover,
.home-dash-tab:focus-visible {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--dash-border, var(--line-strong)) 70%, transparent);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}

.home-dash-tab.is-active {
  border-color: var(--dash-border-strong, var(--line-strong));
  background: color-mix(in srgb, var(--bg-3) 78%, var(--panel));
  color: var(--cream);
  font-weight: 700;
  box-shadow:
    inset 0 -3px 0 color-mix(in srgb, var(--gold) 78%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cream) 5%, transparent);
}

.home-dash-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 40%, transparent);
  outline-offset: 2px;
}

.home-dash-tab-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--dash-border, var(--line)) 55%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-2) 45%, transparent);
  color: var(--muted);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.home-dash-tab:hover .home-dash-tab-icon,
.home-dash-tab:focus-visible .home-dash-tab-icon {
  border-color: var(--dash-border, var(--line-strong));
  color: var(--cream);
}

.home-dash-tab.is-active .home-dash-tab-icon {
  border-color: color-mix(in srgb, var(--gold) 30%, var(--dash-border, var(--line)));
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold);
}

.home-dash-tab-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* ─── User menu (replaces visible Account tab) ──────────────────────────── */
.home-dash-user {
  position: relative;
  width: 100%;
}

.home-dash-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: var(--dash-edge, 1.5px) solid var(--dash-border, var(--line-strong));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg-2));
  color: var(--muted, rgba(246, 241, 230, 0.68));
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.home-dash-user-btn:hover,
.home-dash-user-btn:focus-visible,
.home-dash-user-btn[aria-expanded="true"] {
  border-color: var(--line-strong);
  color: var(--cream, #f6f1e6);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}

.home-dash-user-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: 2px;
}

.home-dash-user-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.home-dash-user-btn:hover .home-dash-user-avatar,
.home-dash-user-btn:focus-visible .home-dash-user-avatar,
.home-dash-user-btn[aria-expanded="true"] .home-dash-user-avatar {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
}

.home-dash-user-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-dash-user-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.home-dash-user-btn[aria-expanded="true"] .home-dash-user-chevron {
  transform: rotate(180deg);
  color: var(--cream);
}

.home-dash-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--panel) 98%, var(--bg));
  border: var(--dash-edge, 1.5px) solid var(--dash-border, var(--line-strong));
  border-radius: 12px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cream) 4%, transparent),
    0 12px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.12s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.12s,
    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-dash-user:hover .home-dash-user-menu,
.home-dash-user:focus-within .home-dash-user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.home-dash-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.home-dash-user-menu-item:hover,
.home-dash-user-menu-item:focus-visible {
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  color: var(--cream);
}

.home-dash-user-menu-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: -2px;
}

.home-dash-user-menu-item svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* ——— Combined welcome + plan split layout ———
   Shortcuts on top, today's plan below. Content-sized top row, flexible
   plan row underneath, with a tight divider instead of a large empty band. */
.home-dash .home-welcome-plan {
  display: grid;
  grid-template-rows: auto minmax(0, 1.55fr);
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.home-dash .home-welcome-plan-top {
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}

.home-dash .home-welcome-plan-bottom {
  /* Soft emerald/sage ramp — calmer tropical fills for long sessions. */
  --plan-fill-deep: #00b84a;
  --plan-fill-mid: #2fe66a;
  --plan-fill-bright: #9af5b8;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  padding-top: 16px;
  scrollbar-width: thin;
  flex: 1 1 auto;
}

/* Welcome half: calm gold hierarchy, denser shortcut toolbar. */
.home-welcome-plan .home-dash-head {
  gap: 6px 22px;
  padding: 0;
  margin: 0;
}
.home-welcome-plan .home-dash-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  padding: 5px 12px 5px 9px;
}
.home-welcome-plan .home-dash-title {
  font-size: clamp(1.55rem, 2.1vw, 1.9rem);
  letter-spacing: -0.025em;
  white-space: nowrap;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--cream);
}
.home-welcome-plan .home-dash-sub {
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 46ch;
}
.home-welcome-plan .home-dash-public-link {
  font-size: 0.76rem;
  margin-top: 4px;
}
.home-welcome-plan .home-dash-actions {
  gap: 10px;
  margin: 0;
}
.home-welcome-plan .home-dash-card {
  padding: 13px 13px 14px;
  border-radius: 11px;
  gap: 6px 8px;
  border: var(--dash-edge, 2px) solid var(--dash-border, var(--line-strong));
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: none;
}
.home-welcome-plan .home-dash-card:hover,
.home-welcome-plan .home-dash-card:focus-visible {
  border-color: var(--dash-border-strong, var(--line-strong));
  transform: none;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent);
}
.home-welcome-plan .home-dash-card--primary {
  border-color: var(--dash-border-strong, var(--line-strong));
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--gold);
}
.home-welcome-plan .home-dash-card-icon {
  width: 34px;
  height: 34px;
  font-size: 1.05rem;
  border-radius: 8px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  color: var(--cream);
}
.home-welcome-plan .home-dash-card:hover .home-dash-card-icon,
.home-welcome-plan .home-dash-card:focus-visible .home-dash-card-icon {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
}
.home-welcome-plan .home-dash-card-title {
  font-size: 0.86rem;
  letter-spacing: -0.015em;
}
.home-welcome-plan .home-dash-card-text {
  font-size: 0.72rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Plan half: compact header + prioritized task grid + week habit strip. */
.home-welcome-plan .home-plan-header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(200px, 0.9fr);
  gap: 14px 18px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  flex: 0 0 auto;
}
.home-welcome-plan .home-plan-coach {
  gap: 12px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  align-items: flex-start;
  min-width: 0;
}
.home-welcome-plan .home-plan-coach .coach-avatar-panel {
  width: 46px;
  height: 46px;
  filter: saturate(0.8) brightness(0.96);
  flex-shrink: 0;
}
.home-welcome-plan .home-plan-coach-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}
.home-welcome-plan .home-plan-coach-who {
  margin: 0;
  padding: 0 2px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uc-accent, var(--gold));
}
.home-welcome-plan .home-plan-coach-bubble {
  margin: 0;
  padding: 14px 16px;
  border-radius: 15px;
  border-top-left-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--uc-line, var(--line-strong)));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--gold) 14%, transparent) 0%,
      transparent 46%
    ),
    color-mix(in srgb, var(--uc-surface, var(--bg-2)) 94%, var(--panel));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.1);
  display: grid;
  gap: 4px;
  min-width: 0;
}
.home-welcome-plan .home-plan-title {
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
  line-height: 1.2;
}
.home-welcome-plan .home-plan-sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 82%, var(--muted));
  margin: 0;
  max-width: 46ch;
}

.home-welcome-plan .home-plan-meta {
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}
.home-welcome-plan .home-plan-streak {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  min-width: 68px;
  padding: 8px 10px;
  border-radius: 11px;
  border: var(--dash-edge, 2px) solid color-mix(in srgb, var(--plan-fill-mid, #2fe66a) 42%, var(--dash-border, var(--line-strong)));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--plan-fill-bright, #9af5b8) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-2) 62%, transparent);
}
.home-welcome-plan .home-plan-streak[hidden] {
  display: none;
}
.home-welcome-plan .home-plan-streak-value {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--plan-fill-bright, #9af5b8);
  font-variant-numeric: tabular-nums;
}
.home-welcome-plan .home-plan-streak-label {
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.home-welcome-plan .home-plan-overall {
  margin: 0;
  padding: 10px 12px;
  border-radius: 11px;
  border: var(--dash-edge, 2px) solid var(--dash-border, var(--line-strong));
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.home-welcome-plan .home-plan-overall-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--muted);
  margin: 0;
}
.home-welcome-plan .home-plan-overall-count {
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.home-welcome-plan .home-plan-overall-bar {
  height: 8px;
  background: color-mix(in srgb, var(--bg-3) 72%, transparent);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.home-welcome-plan .home-plan-overall-fill {
  --plan-fill-deep: #00b84a;
  --plan-fill-mid: #2fe66a;
  --plan-fill-bright: #9af5b8;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--plan-fill-deep) 0%,
    var(--plan-fill-mid) 48%,
    var(--plan-fill-bright) 100%
  );
  animation: none;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.home-welcome-plan .home-plan-overall-detail {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.home-welcome-plan .home-plan-tasks-wrap {
  position: static;
  overflow: visible;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.home-welcome-plan .home-plan-arrow {
  display: none;
}
.home-welcome-plan .home-plan-tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 0;
  flex: 1 1 auto;
  align-content: stretch;
}
.home-welcome-plan .home-plan-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 14px 13px;
  min-height: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  border: var(--dash-edge, 2px) solid var(--dash-border, var(--line));
  box-shadow: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.home-welcome-plan .home-plan-task:hover,
.home-welcome-plan .home-plan-task:focus-visible {
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent);
  transform: none;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  outline: none;
}
.home-welcome-plan .home-plan-task.is-next {
  border-color: color-mix(in srgb, var(--plan-fill-mid, #2fe66a) 55%, var(--line-strong));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--plan-fill-bright, #9af5b8) 7%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-2) 70%, transparent);
  box-shadow: inset 2px 0 0 var(--plan-fill-mid, #2fe66a);
}
.home-welcome-plan .home-plan-task.is-next:hover,
.home-welcome-plan .home-plan-task.is-next:focus-visible {
  border-color: color-mix(in srgb, var(--plan-fill-bright, #9af5b8) 45%, var(--line-strong));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--plan-fill-bright, #9af5b8) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-2) 82%, transparent);
}
.home-welcome-plan .home-plan-task-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  font-size: 1.05rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--cream) 6%, transparent);
  color: var(--cream);
  flex-shrink: 0;
}
.home-welcome-plan .home-plan-task.is-next .home-plan-task-icon {
  border-color: color-mix(in srgb, var(--plan-fill-mid, #2fe66a) 40%, var(--line));
  background: color-mix(in srgb, var(--plan-fill-mid, #2fe66a) 14%, transparent);
}
.home-welcome-plan .home-plan-task-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.home-welcome-plan .home-plan-task-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.home-welcome-plan .home-plan-task-title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-welcome-plan .home-plan-task-desc {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.home-welcome-plan .home-plan-task-meter {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}
.home-welcome-plan .home-plan-status {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--cream) 5%, transparent);
  line-height: 1;
}
.home-welcome-plan .home-plan-status--start {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 24%, var(--line));
}
.home-welcome-plan .home-plan-status--continue,
.home-welcome-plan .home-plan-status--done {
  color: var(--plan-fill-bright, #9af5b8);
  border-color: color-mix(in srgb, var(--plan-fill-mid, #2fe66a) 45%, var(--line));
  background: color-mix(in srgb, var(--plan-fill-mid, #2fe66a) 12%, transparent);
}
.home-welcome-plan .home-plan-bar {
  height: 7px;
  width: 100%;
  background: color-mix(in srgb, var(--bg-3) 78%, transparent);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.home-welcome-plan .home-plan-fill {
  --plan-fill-deep: #00b84a;
  --plan-fill-mid: #2fe66a;
  --plan-fill-bright: #9af5b8;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--plan-fill-deep) 0%,
    var(--plan-fill-mid) 48%,
    var(--plan-fill-bright) 100%
  );
  background-size: 100% 100%;
  animation: none;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.home-welcome-plan .home-plan-fill::after {
  display: none;
}
.home-welcome-plan .home-plan-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}
.home-welcome-plan .home-plan-progress-text {
  font-size: 0.7rem;
  font-weight: 750;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.home-welcome-plan .home-plan-progress-hint {
  font-size: 0.66rem;
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-welcome-plan .home-plan-task.is-complete {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg-2) 42%, transparent);
  box-shadow: none;
  opacity: 0.72;
}
.home-welcome-plan .home-plan-task.is-complete:hover,
.home-welcome-plan .home-plan-task.is-complete:focus-visible {
  opacity: 0.9;
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
}
.home-welcome-plan .home-plan-task.is-complete .home-plan-task-title {
  color: color-mix(in srgb, var(--cream) 82%, var(--muted));
}
.home-welcome-plan .home-plan-task.is-complete .home-plan-fill {
  background: linear-gradient(
    90deg,
    #00963c 0%,
    #00b84a 45%,
    #6af592 100%
  );
}
.home-welcome-plan .home-plan-task.is-complete .home-plan-progress-text {
  color: #9af5b8;
}
.home-welcome-plan .home-plan-task.is-complete .home-plan-bar {
  background: color-mix(in srgb, var(--bg-3) 80%, transparent);
}
.home-welcome-plan .home-plan-loading,
.home-welcome-plan .home-plan-empty {
  margin: 0;
  padding: 22px 18px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  grid-column: 1 / -1;
  align-self: center;
}
.home-welcome-plan .home-plan-empty-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--cream);
}
.home-welcome-plan .home-plan-empty-text {
  margin: 0 auto 14px;
  max-width: 42ch;
  font-size: 0.8rem;
  line-height: 1.45;
}
.home-welcome-plan .home-plan-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.home-welcome-plan .home-plan-empty-link {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}
.home-welcome-plan .home-plan-empty-link:hover,
.home-welcome-plan .home-plan-empty-link:focus-visible {
  border-color: color-mix(in srgb, var(--plan-fill-mid, #2fe66a) 50%, var(--line-strong));
  outline: none;
}

/* Week strip: count on the left, Mon–Sun markers underneath.
   Marker holds practiced / today / upcoming; the weekday name sits under it
   so neither has to share a chip. */
.home-welcome-plan .home-plan-week {
  margin: 0;
  padding: 12px 14px 11px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  border: var(--dash-edge, 2px) solid var(--dash-border, var(--line-strong));
  border-radius: 11px;
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
}
.home-welcome-plan .home-plan-week-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.home-welcome-plan .home-plan-week-label {
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  color: var(--muted);
}
.home-welcome-plan .home-plan-week-summary {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-welcome-plan .home-plan-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.home-welcome-plan .home-plan-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
  transition: opacity 0.18s ease;
}
.home-welcome-plan .home-plan-week-day i {
  display: block;
  width: 100%;
  max-width: 26px;
  min-width: 14px;
  aspect-ratio: 1;
  border-radius: 7px;
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.home-welcome-plan .home-plan-week-day-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--muted);
}
.home-welcome-plan .home-plan-week-day-short {
  display: none;
}
@media (max-width: 520px) {
  .home-welcome-plan .home-plan-week-day-full {
    display: none;
  }
  .home-welcome-plan .home-plan-week-day-short {
    display: inline;
  }
}
.home-welcome-plan .home-plan-week-day.is-practiced i {
  background: linear-gradient(
    160deg,
    var(--plan-fill-mid, #2fe66a),
    var(--plan-fill-deep, #00b84a)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.home-welcome-plan .home-plan-week-day.is-practiced .home-plan-week-day-label {
  color: color-mix(in srgb, var(--plan-fill-bright, #9af5b8) 72%, var(--cream));
}
.home-welcome-plan .home-plan-week-day.is-today i {
  box-shadow: inset 0 0 0 1.5px var(--cream);
}
.home-welcome-plan .home-plan-week-day.is-today .home-plan-week-day-label {
  color: var(--cream);
  font-weight: 800;
}
.home-welcome-plan .home-plan-week-day.is-practiced.is-today i {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1.5px var(--plan-fill-bright, #9af5b8);
}
.home-welcome-plan .home-plan-week-day.is-future {
  opacity: 0.38;
}
.home-welcome-plan .home-plan-week-day.is-future i {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.home-welcome-plan .home-plan-week-day.is-practiced::after {
  content: none;
  animation: none;
}

@media (max-width: 1100px) {
  .home-welcome-plan .home-plan-header {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .home-welcome-plan .home-plan-tasks {
    grid-template-columns: 1fr;
  }
  .home-welcome-plan .home-dash-head {
    grid-template-columns: 1fr;
  }
  .home-welcome-plan .home-dash-sub,
  .home-welcome-plan .home-dash-public-link {
    grid-column: 1;
    grid-row: auto;
  }
}

/* The left-hand column: header, shortcuts, importer — one box.
   Compare-scroll language from the pricing table: calm border, soft shadow,
   no neon wash. */
.home-dash .home-dash-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 22px 24px 24px;
  border: var(--dash-edge, 1.5px) solid var(--dash-border, var(--line-strong));
  border-radius: var(--dash-radius, 14px);
  background: var(--panel);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cream) 5%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ——— One-row header ———
   Eyebrow + title on the left; copy and escape-hatch link on the right so the
   header stays compact. The sub keeps its measure via max-width so it does
   not stretch into a thin ribbon. */
.home-dash-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 26px;
  row-gap: 4px;
  margin: 0;
  flex: 0 0 auto;
}

.home-dash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  grid-column: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.home-dash-eyebrow::before {
  content: none;
}

.home-dash-title {
  grid-column: 1;
  margin: 0;
  font-family: var(--font);
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  white-space: nowrap;
}

.home-dash-sub {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  max-width: 64ch;
  font-size: 1.15rem;
  color: var(--muted, rgba(246, 241, 230, 0.68));
  line-height: 1.6;
}

/* ——— Sidebar-aligned feature shortcuts ——— */

/* Five across, two rows for the ten default shortcuts. That fills the welcome
   toolbar evenly without sparse empty cells (6) or cramped captions (3). */
.home-dash-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
  flex: 0 0 auto;
}

.home-dash-card {
  position: relative;
  /* A wrapping ROW, not the column it was: the icon and the title share the
     first line and the description takes a second. Stacked, three children
     meant three lines, and ten cards in one row is only affordable at two. */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  padding: 18px 16px 19px;
  border: var(--dash-edge, 1.5px) solid var(--dash-border, var(--line-strong));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cream) 3%, transparent);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

/* A raking sheen that only appears on hover, so the resting state stays calm.
   Its origin is driven by --mx/--my, which the script at the foot of this file
   sets from the pointer; with no JS the default centre still reads correctly. */
.home-dash-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    180px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--cream) 9%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.home-dash-card:hover,
.home-dash-card:focus-visible {
  border-color: var(--dash-border-strong, var(--line-strong));
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent);
}

.home-dash-card:hover::after,
.home-dash-card:focus-visible::after {
  opacity: 0;
}

/* A visible keyboard focus ring. These are real links, and the default ring is
   easy to lose against a raised surface. */
.home-dash-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: 2px;
}

.home-dash-card--primary {
  border-color: var(--dash-border-strong, var(--line-strong));
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* The icon sits in a machined well so the row of shortcuts reads as a
   toolbar of controls rather than a wall of loose glyphs.

   It is placed BESIDE the title rather than above it. Stacked, the icon
   costs a full 38px row in every one of ten cards; inline, the card's height
   is set by the title alone and the ten-across row fits in one band. */
.home-dash-card-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  font-size: 2.7rem;
  line-height: 1;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  color: var(--cream);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.home-dash-card:hover .home-dash-card-icon,
.home-dash-card:focus-visible .home-dash-card-icon {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
}

.home-dash-card-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

/* Icon and title share the first line, description wraps beneath.

   The card is a wrapping row rather than the column it was: `flex: 1 1 100%`
   on the text pushes it onto its own line while the icon (fixed 30px) and the
   title (flexible) sit side by side above. That is what keeps a ten-across
   card to two short lines instead of three full-height ones. */
.home-dash-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream, #f6f1e6);
  line-height: 1.25;
}

.home-dash-card-text {
  /* Claim a whole line so the title is never squeezed by the description. */
  flex: 1 1 100%;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted, rgba(246, 241, 230, 0.68));
  /* Clamped to two lines. The descriptions are 30-40 characters and a 10th of
     the shell is ~130px, so left alone they wrap to three or four lines and
     the row doubles in height. `-webkit-line-clamp` with an explicit
     `overflow: hidden` also degrades to a plain clip where it is unsupported,
     which is the same visual result rather than an overflow. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Primary card variant -- inset accent rail like the featured pricing column. */
.home-dash-card--primary {
  border-color: var(--dash-border-strong, var(--line-strong));
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* Placeholder cards -- shown when a shortcut is hidden, with an add button. */
.home-dash-card--placeholder {
  opacity: 0.55;
  border-style: dashed;
  border-color: var(--line);
}

.home-dash-card--placeholder:hover {
  opacity: 0.85;
  border-color: var(--line-strong);
  transform: none;
  box-shadow: none;
}

.home-dash-card--placeholder .home-dash-card-icon {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  color: var(--muted);
}

/* Disabled shortcut card -- stays in place, goes gray. Only the add button
   on it is interactive; the card itself cannot be followed. Mirrors the
   placeholder's muted look so hidden and disabled read as the same state. */
.home-dash-card--disabled {
  opacity: 0.55;
  border-style: dashed;
  border-color: var(--line);
}

.home-dash-card--disabled .home-dash-card-icon {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  color: var(--muted);
}

/* Kill the hover lift and pointer sheen on a disabled card. */
.home-dash-card--disabled:hover,
.home-dash-card--disabled:focus-visible {
  border-color: inherit;
  transform: none;
  box-shadow: none;
}
.home-dash-card--disabled:hover::after,
.home-dash-card--disabled:focus-visible::after {
  opacity: 0;
}

/* Remove/Add buttons inside shortcut cards. */
.home-dash-card-remove,
.home-dash-card-add {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
  padding: 0;
  line-height: 1;
}

.home-dash-card:hover .home-dash-card-remove,
.home-dash-card:hover .home-dash-card-add,
.home-dash-card:focus-within .home-dash-card-remove,
.home-dash-card:focus-within .home-dash-card-add {
  opacity: 1;
}

.home-dash-card-remove:hover,
.home-dash-card-add:hover {
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  border-color: var(--line-strong);
  color: var(--cream);
}

.home-dash-card-remove:focus-visible,
.home-dash-card-add:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: 2px;
  opacity: 1;
}

.home-dash-card-remove svg,
.home-dash-card-add svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}


/* ——— The importer as the primary action ———
   It sits under the shortcut cards in the left column and is the one thing a
   member opened the workspace to do, but it was still sized as a utility
   inset: a 0.92rem input and a 40px button, deliberately shrunk on the
   grounds that it sat below a full-width dashboard and outweighed it.

   That reasoning is gone. With the dashboard compact and beside it rather
   than above, the importer can afford to be a real control instead of a
   footnote, so its type and targets step back up toward the guest panel's
   scale. Declared here rather than in home_import.css because that sheet is
   shared with the guest landing page, where the panel is still a wide
   marketing band and must keep its own sizing. */
.home-dash .home-import--member {
  /* Single surface with the column: no nested card chrome. */
  margin: 0;
  padding: 4px 2px 0;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-dash .home-import--member::before {
  content: none;
}

.home-dash-col--import {
  display: flex;
  flex-direction: column;
  background: var(--panel);
}

/* The form row goes two-up in the workspace, spending the panel's new width on
   a second column rather than on a longer line.

   The member panel is single-column by default (home_import.css), which was
   right while the panel was ~660px. At ~1190px it stretches the username input
   across more than a thousand pixels, which is the exact failure the guest
   card's own rule documents: "one input stretched across 1560px is neither a
   readable measure nor a usable target". The guest solved it with
   `.home-import--guest .home-import-row`; this is the same two columns, scoped
   to the workspace so the shared sheet still owns the guest's.

   0.85fr / 1.15fr rather than 1fr / 1fr: the source switch is two short
   labels, the field and its button need the room. */
.home-dash .home-import--member .home-import-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: end;
  gap: 11px;
}

/* Collapses with the panel rather than on the window: below the split
   breakpoint the two panels stack, so the importer gets the full frame and
   still has room for two columns — it only gives them up when the frame itself
   is too narrow, which is a measure question, not a layout one. Mirrors the
   guest card's 900px collapse, which is the same judgment at the same size. */
@media (max-width: 900px) {
  .home-dash .home-import--member .home-import-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.home-dash .home-import--member .home-import-head h2 {
  font-size: clamp(1.55rem, 2.1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.home-dash .home-import--member .home-import-head .eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.home-dash .home-import--member .home-import-head > p:not(.eyebrow),
.home-dash .home-import--member .home-import-lead {
  margin-top: 8px;
  font-size: 0.92rem;
  max-width: 48ch;
  line-height: 1.55;
}

.home-dash .home-import--member .home-import-select,
.home-dash .home-import--member .home-import-input {
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: 12px;
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--input-bg, var(--bg-2)) 92%, transparent);
}

.home-dash .home-import--member .home-import-input:focus,
.home-dash .home-import--member .home-import-select:focus {
  border-color: color-mix(in srgb, var(--cream) 36%, var(--line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cream) 10%, transparent);
  outline: none;
}

/* 46px rather than 40px: comfortably above the 44px touch-target floor even
   with the panel's own padding and borders counted. */
.home-dash .home-import--member .home-import-go {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--gold);
  color: var(--on-gold, #0a0a0a);
  box-shadow: none;
}

.home-dash .home-import--member .home-import-go:hover,
.home-dash .home-import--member .home-import-go:focus-visible {
  filter: none;
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  color: var(--on-gold, #0a0a0a);
}

.home-dash .home-import--member .home-import-refresh {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper-2, var(--bg-2)) 80%, transparent);
  color: var(--cream);
  font-weight: 700;
  font-size: 0.82rem;
}

.home-dash .home-import--member .home-import-refresh:hover,
.home-dash .home-import--member .home-import-refresh:focus-visible {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--on-solid, #0a0a0a);
}

.home-dash .home-import--member .home-import-toggle {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  border-radius: 12px;
  padding: 3px;
}

.home-dash .home-import--member .home-import-toggle-btn {
  padding: 9px 10px;
  font-size: 0.9rem;
  border-radius: 9px;
  color: var(--muted);
}

.home-dash .home-import--member .home-import-toggle-btn:hover {
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 6%, transparent);
}

.home-dash .home-import--member .home-import-toggle-btn.active {
  background: color-mix(in srgb, var(--cream) 12%, transparent);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 18%, transparent);
}

.home-dash .home-import--member .home-import-source-chip,
.home-dash .home-import--member .home-import-head-cta {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  color: var(--cream);
}

.home-dash .home-import--member .home-import-head-cta:hover {
  border-color: color-mix(in srgb, var(--cream) 28%, var(--line));
  color: var(--cream);
}

.home-dash .home-import--member .home-import-field > span {
  margin-bottom: 5px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.home-dash .home-import--member .home-import-note {
  color: var(--muted);
  font-size: 0.8rem;
}

/* The scanned-games list is the tall part of the Import tab. The shared
   sheet's 420px cap is right for the guest band, but here it was a stub in
   the middle of a panel that has the whole window's height.

   So the workspace replaces that number with a viewport-derived one: the
   importer's furniture above the list (head, form, the two paddings) costs
   roughly 330px of a desktop shell, so `100dvh - --dash-chrome - 330px` is
   the height the results row has left on any window. It grows with the
   window and never beyond it, and the 1fr row below lets it shrink when the
   panel is shorter; the shared sheet's `overflow-y` keeps a long scan
   scrolling INSIDE the box instead of growing the page.

   The cap must be definite and viewport-derived rather than `none`: an
   unbounded list made the grid rows grow with their content, the panel
   passed its cap, and the whole workspace ran down the page. */
.home-dash .home-import--member .home-import-results {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  scrollbar-color: color-mix(in srgb, var(--cream) 28%, transparent) transparent;
  max-height: calc(100dvh - var(--dash-chrome) - 330px);
}

.home-dash .home-import--member:has(.home-import-results:not([hidden])) {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

/* ——— Import / linked account row ——— */

.home-dash-import {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: inset 2px 0 0 var(--gold);
}

.home-dash-import-copy {
  min-width: 0;
  flex: 1 1 320px;
}

.home-dash-import-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream, #f6f1e6);
}

.home-dash-import-text {
  margin: 5px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted, rgba(246, 241, 230, 0.68));
  overflow-wrap: anywhere;
}

.home-dash-import-btn {
  white-space: nowrap;
}

/* The practice dashboard: the right-hand box.

   Given the SAME panel surface as `.home-dash-col` beside it — same padding,
   same radius, same machined top light — because the two are a pair. The
   left column carries that surface on its own wrapper; this one is a
   `<section class="om-dash">` from the shared partial, so the surface has to
   be declared here.

   No top margin: a margin would drop it below the left column's top edge,
   and the two boxes would stop reading as a row. */
.home-dash .home-practice-dash {
  --plan-fill-deep: #00b84a;
  --plan-fill-mid: #2fe66a;
  --plan-fill-bright: #9af5b8;
  /* Emerald heat / habit sequence — matches welcome bars and Tropic accent. */
  --seq-base: #2fe66a;
  --seq-1: color-mix(in srgb, #9af5b8 55%, transparent);
  --seq-2: #6af592;
  --seq-3: #2fe66a;
  --seq-4: #00b84a;
  --seq-empty: color-mix(in srgb, var(--cream) 7%, transparent);
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 22px 24px 24px;
  border: var(--dash-edge, 1.5px) solid var(--dash-border, var(--line-strong));
  border-radius: var(--dash-radius, 14px);
  background: var(--panel);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cream) 5%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Import is the sole child of its column now — no leftover "under cards" gap. */
.home-dash .home-dash-col > .home-import {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* ——— The dashboard in a split column ———
   style_tracking.css sizes this panel for a full-width shell: six metric
   tiles across, ~90px of padding on the card, and two opening lists that
   grow with however many openings a member has. In the split it gets half
   the frame, and at narrower frames all three of those assumptions break —
   the labels wrap and the lists push the panel past the budget.

   So it is declared here rather than inherited. Two mechanisms:

     · A CONTAINER query, not a viewport one. The panel's width comes from
       the split grid, not the window, so keying off the viewport is simply
       the wrong signal — the same panel is ~1190px on a wide monitor and
       ~570px on a 1200px one, and only one of those wants three-up tiles.
       The query is scoped to .home-practice-dash so it outweighs the bare
       .om-dash-metrics rule in style_tracking.css, which loads after this
       sheet.

     · The compact layout as the panel's own declaration, rather than
       something the query turns on. A compaction gated on a query match
       would leave the panel unstyled in the narrow case it was written for,
       which is the case that actually needs it.

   The 900px threshold is where six tiles stop being six tiles: below it
   each tile is under 120px and "Lines mastered" wraps. Above it — which is
   where the widened frame puts a full-size monitor — the query does not
   match and the tiles go back to the six-up row the panel was designed
   around. */

.home-dash .home-practice-dash {
  container-type: inline-size;
}

@container (max-width: 900px) {
  .home-practice-dash .om-dash-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ——— Sizing for the Practice tab ——— */
.home-practice-dash .om-dash {
  padding: 20px 22px 22px;
}

.home-practice-dash #om-dash-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 14px;
}

/* Header — compact row: kicker + title on left, leaderboard link on right. */
.home-practice-dash .om-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  flex: 0 0 auto;
}

.home-practice-dash .om-dash-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.home-practice-dash .om-dash-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--muted);
}

.home-practice-dash .om-dash-title {
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -0.025em;
  margin: 0;
}

.home-practice-dash .om-dash-lead {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

.home-practice-dash .om-dash-link {
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--paper-2, var(--bg-2)) 80%, transparent);
}

.home-practice-dash .om-dash-link:hover,
.home-practice-dash .om-dash-link:focus-visible {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--on-solid, #0a0a0a);
  outline: none;
}

.home-practice-dash .om-dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.home-practice-dash .om-metric {
  padding: 14px 12px;
  border-radius: 11px;
  border: var(--dash-edge, 2px) solid var(--dash-border, var(--line));
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --tile-accent: #2fe66a;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.home-practice-dash .om-metric:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  box-shadow: none;
  transform: none;
}

.home-practice-dash .om-metric::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--plan-fill-bright), var(--plan-fill-deep));
  opacity: 0.9;
  transition: opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}
.home-practice-dash .om-metric:hover::after {
  opacity: 1;
  top: 10%;
  bottom: 10%;
}

.home-practice-dash .om-metric-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-practice-dash .om-metric strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.home-practice-dash .om-metric-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-practice-dash .om-level-track {
  display: block;
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-3) 78%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.home-practice-dash .om-level-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--plan-fill-deep), var(--plan-fill-mid), var(--plan-fill-bright));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ——— Panels row: Habit + Activity ——— */
.home-practice-dash .om-dash-panels {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.home-practice-dash .om-panel {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: none;
  transition: border-color 0.18s ease, background 0.18s ease;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.home-practice-dash .om-panel-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker note"
    "title note";
  align-items: start;
  column-gap: 10px;
  row-gap: 2px;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.home-practice-dash .om-panel-head h3 {
  grid-area: title;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--cream);
  letter-spacing: -0.01em;
}

.home-practice-dash .om-panel-kicker {
  grid-area: kicker;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--muted);
  margin: 0;
}

.home-practice-dash .om-panel-note {
  grid-area: note;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  justify-self: end;
  align-self: center;
}

/* Week chips — cream language, no teal neon */
.home-practice-dash .om-week-chips {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  align-items: stretch;
}
.home-practice-dash .om-week-chip {
  flex: 1 1 0;
  padding: 10px 4px;
  gap: 5px;
  font-size: 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  text-shadow: none;
}
.home-practice-dash .om-week-chip b {
  font-size: 0.9rem;
  color: inherit;
}
.home-practice-dash .om-week-chip.is-done {
  border-color: color-mix(in srgb, var(--seq-3) 50%, var(--line));
  background: linear-gradient(180deg, var(--seq-1), color-mix(in srgb, var(--seq-2) 55%, transparent));
  color: var(--cream);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  text-shadow: none;
}
.home-practice-dash .om-week-chip.is-done b {
  color: var(--seq-4);
  text-shadow: none;
}
.home-practice-dash .om-week-chip.is-today {
  border-color: color-mix(in srgb, var(--seq-base) 60%, var(--line));
  color: var(--cream);
  outline: none;
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--seq-base) 40%, transparent);
}

.home-practice-dash .om-panel-heat .om-heat-wrap {
  flex: 1 1 auto;
  min-height: 120px;
}

/* ——— Openings section: Achievements + Best + Needs work ——— */
.home-practice-dash .om-dash-openings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
  flex: 1.15 1 auto;
  min-height: 0;
}

.home-practice-dash .om-ach-next {
  margin-bottom: 10px;
}
.home-practice-dash .om-ach-next-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-3) 78%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.home-practice-dash .om-ach-next-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--plan-fill-deep), var(--plan-fill-mid), var(--plan-fill-bright));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: width 0.4s ease;
}
.home-practice-dash .om-ach-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-practice-dash .om-ach-badge {
  border-color: color-mix(in srgb, var(--seq-3) 40%, var(--line));
  background: color-mix(in srgb, var(--seq-2) 18%, transparent);
  color: var(--cream);
}
.home-practice-dash .om-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 8px;
  border: 1px dashed color-mix(in srgb, var(--cream) 18%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.home-practice-dash .om-empty-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--cream);
}
.home-practice-dash .om-empty-lead {
  margin: 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.home-practice-dash .om-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.home-practice-dash .om-dash-status {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Opening lists */
.home-practice-dash .om-dash-openings .om-opening-list {
  max-height: min(280px, 32vh);
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cream) 28%, transparent) transparent;
}
.home-practice-dash .om-dash-openings .om-opening-list a {
  padding: 9px 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-practice-dash .om-dash-openings .om-opening-list a:hover {
  background: color-mix(in srgb, var(--cream) 7%, transparent);
}
.home-practice-dash .om-dash-openings .om-opening-list strong {
  font-size: 0.88rem;
  font-weight: 650;
}

/* ——— Per-tile emerald accent ramp ——— */
.home-practice-dash .om-metric:has(#om-metric-day) { --tile-accent: #9af5b8; }
.home-practice-dash .om-metric:has(#om-metric-week) { --tile-accent: #6af592; }
.home-practice-dash .om-metric:has(#om-metric-all) { --tile-accent: #2fe66a; }
.home-practice-dash .om-metric:has(#om-metric-accuracy) { --tile-accent: #1ad45c; }
.home-practice-dash .om-metric:has(#om-metric-mastered) { --tile-accent: #00b84a; }
.home-practice-dash .om-metric:has(#om-metric-run) { --tile-accent: #00963c; }
.home-practice-dash .om-metric:has(#om-metric-level) { --tile-accent: #6af592; }
.home-practice-dash .om-metric:has(#om-metric-season) { --tile-accent: #2fe66a; }

/* The streak tile is the habit metric, so it keeps the shell's live pip. */
.home-practice-dash .om-metric:has(#om-metric-run) strong::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--tile-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-accent) 22%, transparent);
  animation: om-tile-pulse 2.4s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes om-tile-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

/* Panels take a single restrained wash each, keyed off their own role. */
.home-practice-dash .om-panel-heat {
  background: var(--panel);
}

.home-practice-dash .om-panel-head h3 {
  letter-spacing: -0.01em;
}

.home-practice-dash .om-panel-heat {
  background: var(--panel);
}

/* Escape hatch back to the public marketing homepage. Deliberately quiet --
   the workspace should not advertise the landing page, but it must not be a
   dead end either.

   Placed in the header's second column under the sub, so it costs the header
   one line instead of a block of its own. */
.home-dash-public-link {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  display: inline-block;
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted, rgba(246, 241, 230, 0.68));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.home-dash-public-link:hover,
.home-dash-public-link:focus-visible {
  color: var(--gold-bright);
  border-bottom-color: currentColor;
}

@media (max-width: 1200px) {
  /* The shell no longer has padding of its own -- it is an unframed grid whose
     two children are the panels. The gap is still its job. */
  .home-dash-inner {
    gap: 14px;
  }

  /* Drop to three across when the welcome panel narrows. */
  .home-dash-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* On narrow screens, the tab strip continues to scroll horizontally.
   The viewport cap is lifted (see `.home-dash` above) so the page scrolls naturally. */
@media (max-width: 1100px) {
  html.home-js .home-dash-inner {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tabs" "panels";
    gap: 12px;
  }

  html.home-js .home-dash-panels {
    grid-area: panels;
  }

  /* Narrow screens scroll the page naturally again -- the shell's cap is
     lifted (see `.home-dash` above), so the panel must not constrain height.
     The panel and its inner box revert to natural height. */
  html.home-js .home-dash-panel.is-active {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  html.home-js .home-dash-panel.is-active > * {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* Inner scrollable areas still scroll on mobile */
  html.home-js .home-dash-panel.is-active .home-import-results,
  html.home-js .home-dash-panel.is-active .om-heat-wrap,
  html.home-js .home-dash-panel.is-active .om-dash-openings .om-opening-list {
    overflow-y: auto;
    max-height: none;
  }

  .home-dash-tab {
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .home-dash-inner {
    gap: 12px;
  }

  /* The panels keep their own padding at every width -- they ARE the boxes now,
     so their inner padding is what the phone rule is really about. */
  .home-dash .home-dash-col,
  .home-dash .home-practice-dash {
    padding: 14px 14px 16px;
    border-radius: 10px;
  }

  .home-dash-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Back to a comfortable single-column card: the width is there again, so
     the compact padding of the five-across grid only looks cramped. */
  .home-dash-card {
    padding: 14px 14px 15px;
  }

  .home-dash-import {
    align-items: flex-start;
    padding: 18px 16px;
  }

  .home-dash-import-btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-dash-card,
  .home-practice-dash .om-metric,
  .home-practice-dash .om-panel,
  .home-practice-dash .om-heat-cell {
    transition: none;
  }

  .home-dash-card:hover,
  .home-dash-card:focus-visible {
    transform: none;
  }

  .home-practice-dash .om-heat-cell:hover {
    transform: none;
  }

  /* The sheen and the pips are pure decoration, so they never animate in. */
  .home-dash-card::after {
    display: none;
  }

  .home-dash-eyebrow::before,
  .home-practice-dash .om-metric:has(#om-metric-run) strong::after {
    animation: none;
  }
}

/* ——— Pointer-tracked sheen ———
   The shortcut cards highlight wherever the cursor actually is, so the hover
   reads as the surface catching light rather than a canned animation.

   Uses a single delegated pointermove listener and writes two custom
   properties, so there is exactly one handler no matter how many cards render.
   Guarded for reduced motion, and skipped entirely on coarse pointers, where
   there is no cursor to track. Everything degrades to the static CSS sheen. */
.home-dash-js .home-dash-actions {
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .home-dash-card {
      --mx: 50%;
      --my: 0%;
    }
  }
}

/* ——— Premium glow on the scrollable regions ———
   The workspace has two places content scrolls inside a fixed-height frame:
   the importer's results list, and the 90-day heatmap (13 weeks of cells in a
   strip narrower than the panel). Both are easy to miss — one just looks like
   a short list, the other like a dead strip. A soft blue halo around the frame
   marks "there is more in here, scroll", without a scrollbar being mandatory
   to notice.

   The hue is the site's accent blue (--gold is that name in this codebase —
   a legacy name, but changing it is a much larger refactor than this warrants),
   so the glow sits in the same family as the Plus pill and the active nav.

   Three details that matter:
     * `overflow: hidden` is deliberately NOT used. The glow lives in the
       element's own box-shadow, so a clipped container would cut the halo off
       at the frame edge and it would read as a hard outline instead.
     * The intensity is themed, because one set of values cannot serve both.
       A tight translucent halo only reads against a dark page; the same values
       on the near-white light theme are a pale blue smear that all but
       disappears. So the light theme gets a darker accent, a stronger ring and
       a wider spread, which is what a shadow needs to be seen on white.
     * Only the FRAME glows. The rows inside keep their own surfaces, so no
       text sits on a tinted background and contrast is untouched. */
.home-dash {
  /* One knob per layer, so the intensity is tunable in a single place. */
  --dash-glow-ring: 1px;
  --dash-glow-edge: color-mix(in srgb, var(--dash-accent) 30%, transparent);
  --dash-glow-near: color-mix(in srgb, var(--dash-accent) 34%, transparent);
  --dash-glow-far: color-mix(in srgb, var(--dash-accent) 26%, transparent);
  --dash-glow-hot-ring: color-mix(in srgb, var(--dash-accent) 44%, transparent);
  --dash-glow-hot-near: color-mix(in srgb, var(--dash-accent) 46%, transparent);
  --dash-glow-hot-far: color-mix(in srgb, var(--dash-accent) 32%, transparent);

  --dash-glow:
    0 0 0 var(--dash-glow-ring) var(--dash-glow-edge),
    0 0 18px -2px var(--dash-glow-near),
    0 0 46px -10px var(--dash-glow-far);
  --dash-glow-hot:
    0 0 0 1px var(--dash-glow-hot-ring),
    0 0 24px -2px var(--dash-glow-hot-near),
    0 0 58px -10px var(--dash-glow-hot-far);
}

/* Light theme: keep accent aligned with global --gold, not a separate neon. */
[data-theme="light"] .home-dash {
  --dash-accent: color-mix(in srgb, var(--gold) 50%, var(--muted));
  --dash-glow-ring: 1px;
  --dash-glow-edge: color-mix(in srgb, var(--line-strong) 80%, transparent);
  --dash-glow-near: transparent;
  --dash-glow-far: transparent;
  --dash-glow-hot-ring: color-mix(in srgb, var(--line-strong) 90%, transparent);
  --dash-glow-hot-near: transparent;
  --dash-glow-hot-far: transparent;
}

/* The importer's results list. */
.home-dash .home-import-results {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 6%, transparent);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-dash .home-import-results:hover,
.home-dash .home-import-results:focus-within {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 8%, transparent);
}

/* The heatmap strip. It scrolls horizontally, so the glow doubles as the
   affordance for that. */
.home-dash .om-heat-wrap {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--cream) 16%, var(--line-strong));
  border-radius: 12px;
  padding: 12px 10px 8px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-dash .om-heat-wrap:hover,
.home-dash .om-heat-wrap:focus-within {
  border-color: color-mix(in srgb, var(--cream) 28%, var(--line-strong));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 8%, transparent),
    0 8px 20px -14px rgba(0, 0, 0, 0.4);
}

/* The two opening lists (Best openings / Needs work). These are grid lists
   rather than fixed-height scrollers today, so the glow here is the same
   premium accent rather than a scroll affordance — it keeps the practice
   dashboard reading as one lit set. */
.home-dash .om-dash-openings .om-panel {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-dash .om-dash-openings .om-panel:hover {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 7%, transparent);
}

/* Scroll affordance matches cream chrome, not the old neon accent. */
.home-dash .home-import-results::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cream) 32%, transparent);
}

.home-dash .home-import-results {
  scrollbar-color: color-mix(in srgb, var(--cream) 34%, transparent) transparent;
}

.home-dash .om-heat-wrap::-webkit-scrollbar {
  height: 8px;
}

.home-dash .om-heat-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.home-dash .om-heat-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cream) 32%, transparent);
  border-radius: 999px;
}

/* ——— Rating trends inside its own workspace tab ———
   The charts used to sit at the bottom of the practice dashboard, separated
   by the divider and top margin below; as a tab the charts ARE the content,
   so both go away. */
.home-dash-panel .home-rating-charts {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Empty state (no linked account yet): a centred card that names the value
   of the tab and sends the member to /profile to link a site. */
.home-trends-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg-2));
}

.home-trends-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  color: var(--cream);
}

.home-trends-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.home-trends-cta h3 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  color: var(--cream, #f6f1e6);
}

.home-trends-cta p {
  margin: 0 0 16px;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted, rgba(246, 241, 230, 0.68));
}

/* ——— Rating trends charts ——— */
.home-rating-charts {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.home-rating-charts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.home-rating-charts-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
}
.home-rating-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--track-gold, var(--dash-accent));
  opacity: 0.72;
}
.home-rating-charts-note {
  margin: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
}

.home-rating-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.home-rating-panel {
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  min-height: 0;
}
.home-rating-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--cream);
}
.home-rating-logo {
  display: inline-flex;
  align-items: center;
}


.home-rating-charts-grid {
  display: block;
  min-height: 130px;
}

/* Time-control filter chips */
.home-rating-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

[data-pool="bullet"] { --chip-color: #5b8def; }
[data-pool="blitz"] { --chip-color: #5b8def; }
[data-pool="rapid"] { --chip-color: #5b8def; }
[data-pool="daily"] { --chip-color: #5b8def; }
.home-rating-chip[data-pool] {
  border-left: 3px solid var(--chip-color);
  transition: border-left-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, background 0.2s;
}
.home-rating-chip.active[data-pool] {
  border-left-color: var(--chip-color);
}
.home-rating-panel:hover .home-rating-logo svg {
  filter: drop-shadow(0 0 8px var(--data-win-fill, #5b8def));
}
.home-rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
}
.home-rating-chip.active {
  border-color: var(--line-strong);
  color: var(--cream);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  box-shadow: inset 2px 0 0 var(--gold);
}
.home-rating-chip:hover {
  border-color: var(--line-strong);
  color: var(--cream);
  box-shadow: none;
}

/* Blinking live dot */
@keyframes home-rating-live-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
.chart-dot-ring {
  animation: home-rating-live-pulse 2s ease-in-out infinite;
}

/* Glowing panel header */
.home-rating-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--cream);
}
.home-rating-logo {
  display: inline-flex;
  align-items: center;
  transition: filter 0.3s;
}
.home-rating-panel-header strong {
  font-weight: 700;
  color: var(--cream);
  text-shadow: 0 0 6px color-mix(in srgb, var(--data-win-fill, #5b8def) 50%, transparent);
  transition: text-shadow 0.3s;
}

.home-rating-charts-loading {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  padding: 12px;
  animation: home-rating-pulse 1.4s ease-in-out infinite;
}
.home-rating-charts-empty {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  padding: 12px;
}

@keyframes home-rating-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.home-rating-chart {
  width: 100%;
}
.home-rating-chart-empty {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.home-rating-chart-empty span {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream);
}
.home-rating-chart-empty a {
  color: var(--gold-bright);
}

.home-rating-chart-label {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}
.home-rating-chart-pool {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.home-rating-chart-current {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--cream);
}
.home-rating-chart-trend {
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: auto;
  font-style: normal;
}
.home-rating-chart-trend.is-up {
  color: var(--data-win-fill, #5b8def);
}
.home-rating-chart-trend.is-down {
  color: var(--data-loss-fill, #5b8def);
}
.home-rating-chart-trend.is-flat {
  color: var(--muted);
}
.home-rating-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--cream);
}
.home-rating-chart-range {
  font-family: inherit;
  font-size: 7px;
  fill: var(--muted);
}
.home-rating-chart-range-value {
  font-family: inherit;
  font-size: 7px;
  font-weight: 700;
  fill: var(--muted);
}

@media (max-width: 640px) {
  .home-rating-grid {
    grid-template-columns: 1fr;
  }
}

/* ——— Today's Plan panel ———
   Daily habit tracker with progress bars for each task category. */
.home-plan-coach {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.home-plan-coach .coach-avatar-panel .circuit-node {
  animation: none;
}
.home-plan-coach .coach-avatar-panel {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}
.home-plan-coach-stack {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 5px;
}
.home-plan-coach-who {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.home-plan-coach-bubble {
  margin: 0;
  padding: 14px 16px;
  border-radius: 15px;
  border-top-left-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 46%),
    color-mix(in srgb, var(--bg-2) 92%, var(--card));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.1);
  display: grid;
  gap: 4px;
}
.home-plan-overall {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--bg-2, var(--card));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.home-plan-overall-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.home-plan-overall-count {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.home-plan-overall-bar {
  width: 100%;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line-strong, var(--border));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.home-plan-overall-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
  background-size: 200% 100%;
  animation: plan-flow 2.4s linear infinite;
  border-radius: 5px;
  transition: width 0.4s ease;
}
.home-plan-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
  line-height: 1.2;
}
.home-plan-sub {
  color: color-mix(in srgb, var(--cream) 82%, var(--muted));
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.home-plan-tasks-wrap {
  position: relative;
}
.home-plan-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.home-plan-arrow:hover {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateX(-50%) translateY(-1px);
}
.home-plan-arrow svg {
  width: 20px;
  height: 20px;
}
.home-plan-arrow--top {
  top: -20px;
}
.home-plan-arrow--bottom {
  bottom: -20px;
}
.home-plan-tasks {
  /* Non-scrollable: all tasks visible, page handles overflow if needed */
  padding: 0.5rem 0;
}

.home-plan-task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.35rem 1.75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, transparent), color-mix(in srgb, var(--bg-2) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.3s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 3px 12px -4px rgba(0, 0, 0, 0.4);
}
.home-plan-task:hover {
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 20px -6px rgba(0, 0, 0, 0.5),
    0 0 24px color-mix(in srgb, var(--gold) 15%, transparent);
  transform: translateY(-2px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, transparent), color-mix(in srgb, var(--bg-2) 90%, var(--gold) 3%));
}
.home-plan-task:hover .home-plan-bar {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 16px color-mix(in srgb, var(--gold) 25%, transparent);
}

.home-plan-task-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.home-plan-task-main {
  min-width: 0;
}
.home-plan-task-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.3rem;
}
.home-plan-task-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.home-plan-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 100px; /* Extended further left */
  width: 35%; /* Take more horizontal space */
}
.home-plan-progress-text {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold-bright);
  text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 50%, transparent);
}
.home-plan-bar {
  width: 100%;
  height: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 80%, transparent), color-mix(in srgb, var(--bg-2) 40%, transparent));
  border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}
.home-plan-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  animation: plan-flow 3s linear infinite;
  border-radius: 7px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 12px color-mix(in srgb, var(--gold) 60%, transparent),
    0 0 24px color-mix(in srgb, var(--gold) 30%, transparent);
}
.home-plan-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  border-radius: 2px;
}

/* Completed state - premium, professional look */
.home-plan-task.is-complete {
  border-color: var(--success);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, transparent), color-mix(in srgb, var(--bg-2) 88%, var(--success) 8%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px var(--success),
    0 6px 24px -8px color-mix(in srgb, var(--success) 40%, transparent),
    0 0 32px -8px color-mix(in srgb, var(--success) 20%, transparent);
  animation: task-complete-pulse 2s ease-out;
}
@keyframes task-complete-pulse {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px var(--success), 0 0 40px var(--success); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px var(--success), 0 6px 24px -8px color-mix(in srgb, var(--success) 40%, transparent), 0 0 32px -8px color-mix(in srgb, var(--success) 20%, transparent); }
}
.home-plan-task.is-complete .home-plan-task-title {
  color: var(--success);
  text-shadow: 0 0 12px color-mix(in srgb, var(--success) 50%, transparent);
}
.home-plan-task.is-complete .home-plan-task-desc {
  color: var(--muted);
  opacity: 0.8;
}
.home-plan-task.is-complete .home-plan-fill {
  background: linear-gradient(90deg, var(--success) 0%, #4ade80 30%, #22c55e 50%, #4ade80 70%, var(--success) 100%);
  background-size: 200% 100%;
  animation: plan-flow 3s linear infinite, fill-glow 2s ease-in-out infinite alternate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 16px color-mix(in srgb, var(--success) 80%, transparent),
    0 0 32px color-mix(in srgb, var(--success) 40%, transparent);
}
@keyframes fill-glow {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 12px color-mix(in srgb, var(--success) 80%, transparent), 0 0 24px color-mix(in srgb, var(--success) 30%, transparent); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px color-mix(in srgb, var(--success) 90%, transparent), 0 0 40px color-mix(in srgb, var(--success) 50%, transparent); }
}
.home-plan-task.is-complete .home-plan-bar {
  border-color: var(--success);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 80%, transparent), color-mix(in srgb, var(--success) 15%, var(--bg-2) 60%));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    0 0 0 2px rgba(255, 255, 255, 0.03),
    0 0 20px color-mix(in srgb, var(--success) 35%, transparent);
}
.home-plan-task.is-complete .home-plan-progress-text {
  color: var(--success);
  text-shadow: 0 0 10px color-mix(in srgb, var(--success) 60%, transparent);
  animation: text-pulse 2s ease-in-out infinite;
}
@keyframes text-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes plan-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.home-plan-task.is-complete .home-plan-fill::after {
  display: none;
}

/* Fallback week strip (non-welcome contexts). Prefer the .home-welcome-plan rules. */
.home-plan-week {
  margin-top: 1.25rem;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  border: 1px solid var(--line-strong, var(--border));
  border-radius: 12px;
  display: grid;
  gap: 10px;
}
.home-plan-week-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.home-plan-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.home-plan-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  position: relative;
}
.home-plan-week-day i {
  display: block;
  width: 100%;
  max-width: 26px;
  aspect-ratio: 1;
  border-radius: 7px;
  background: color-mix(in srgb, var(--cream, #fff) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line, var(--border));
}
.home-plan-week-day-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.home-plan-week-day.is-practiced i {
  background: linear-gradient(160deg, var(--plan-fill-mid, #2fe66a), var(--plan-fill-deep, #00b84a));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.home-plan-week-day.is-practiced::after {
  content: none;
}
.home-plan-week-day.is-today i {
  box-shadow: inset 0 0 0 1.5px var(--cream, #fff);
}
.home-plan-week-day.is-future {
  opacity: 0.38;
}
.home-plan-loading {
  color: var(--muted);
  text-align: center;
  padding: 2rem;
}

/* Mobile adjustments */
@media (max-width: 760px) {
  .home-plan-task {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon title"
      "icon progress";
    gap: 0.5rem 1rem;
  }
  .home-plan-task-icon {
    grid-area: icon;
  }
  .home-plan-task-main {
    grid-area: title;
  }
  .home-plan-progress {
    grid-area: progress;
    align-items: flex-end;
    min-width: auto;
    width: 100%;
  }
  .home-plan-bar {
    width: 100%;
    max-width: 200px;
  }
}
.home-plan-header {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--border));
}
.home-plan-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.home-plan-coach .coach-avatar-panel .circuit-node,
.home-plan-coach .coach-avatar-panel .circuit-line {
  animation: none;
}

/* ==========================================================================
   Ultracoach Panel (workspace tab)
   Chat with the Cyber Chameleon about reviewed library games. One composed
   column: branded header, transcript stage, docked prompts + composer.
   ========================================================================== */

.home-dash-col--coach {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.home-coach {
  --uc-line: var(--dash-border-strong, color-mix(in srgb, var(--line-strong) 90%, transparent));
  --uc-surface: color-mix(in srgb, var(--bg-2) 72%, var(--panel));
  --uc-surface-2: color-mix(in srgb, var(--bg-2) 88%, transparent);
  --uc-accent: color-mix(in srgb, var(--gold) 55%, var(--dash-accent, var(--muted)));
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  height: 100%;
  padding: 2px 2px 6px;
}

.home-coach-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 18px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.home-coach-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.home-coach-identity .coach-avatar-panel,
.home-coach .home-coach-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  filter: saturate(0.88) brightness(0.98);
}

.home-coach-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}

.home-coach-who {
  margin: 0;
  padding: 0 2px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uc-accent);
}

.home-coach-bubble {
  margin: 0;
  padding: 14px 16px;
  border-radius: 15px;
  border-top-left-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--uc-line));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--gold) 14%, transparent) 0%,
      transparent 46%
    ),
    color-mix(in srgb, var(--uc-surface) 94%, var(--panel));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.1);
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-coach-title {
  margin: 0;
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
  line-height: 1.2;
}

.home-dash-tab-icon--emoji {
  display: grid;
  place-items: center;
  place-content: center;
  font-size: 1.35rem;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  color: var(--cream);
  -webkit-text-fill-color: unset;
}

/* Keep emoji natural colours — same approach as sidebar glyphs. */
.home-dash-tab:hover .home-dash-tab-icon--emoji,
.home-dash-tab:focus-visible .home-dash-tab-icon--emoji,
.home-dash-tab.is-active .home-dash-tab-icon--emoji {
  color: var(--cream);
}

.home-dash-tab-icon--avatar {
  overflow: hidden;
  padding: 0;
  background: #0b0b0c;
  border-color: color-mix(in srgb, #00ff66 28%, var(--dash-border, var(--line)));
}

.home-dash-tab-icon--avatar img {
  display: block;
  width: 118%;
  height: 118%;
  margin: -9%;
  object-fit: cover;
  object-position: center 12%;
  pointer-events: none;
}

.home-dash-tab:hover .home-dash-tab-icon--avatar,
.home-dash-tab:focus-visible .home-dash-tab-icon--avatar,
.home-dash-tab.is-active .home-dash-tab-icon--avatar {
  border-color: color-mix(in srgb, #00ff66 42%, var(--dash-border, var(--line)));
  background: #0b0b0c;
  color: inherit;
}

.home-coach-sub {
  margin: 0;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--cream) 82%, var(--muted));
  line-height: 1.5;
  max-width: 46ch;
}

.home-coach-header .home-coach-status {
  margin: 0;
  max-width: 260px;
  font-size: 0.76rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.35;
  align-self: center;
}

.home-coach-clear {
  appearance: none;
  margin: 0;
  padding: 7px 12px;
  min-height: 2.4rem;
  border-radius: 8px;
  border: 1px solid var(--uc-line);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.home-coach-clear:hover,
.home-coach-clear:focus-visible {
  color: color-mix(in srgb, #e85d5d 75%, var(--cream));
  border-color: color-mix(in srgb, #e85d5d 40%, var(--uc-line));
  background: color-mix(in srgb, #e85d5d 8%, transparent);
  outline: none;
}

.home-coach-clear[hidden] {
  display: none !important;
}

.home-coach-status {
  margin: 0;
  max-width: 260px;
  font-size: 0.76rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.35;
}

.home-coach-status.is-error {
  color: color-mix(in srgb, #e85d5d 85%, var(--cream));
}

.home-coach-empty {
  display: grid;
  gap: 8px;
  align-content: start;
  margin: auto 0;
  padding: 28px 22px;
  max-width: 34rem;
  border-radius: 14px;
  border: 1px solid var(--uc-line);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 55%),
    var(--uc-surface);
}

.home-coach-empty[hidden],
.home-coach-chat[hidden] {
  display: none !important;
}

.home-coach-empty-portrait-wrap {
  margin: 0 0 6px;
}

.home-coach-empty-portrait-wrap .coach-avatar-panel.home-coach-empty-portrait,
.home-coach-empty-portrait {
  width: 120px;
  height: 120px;
  border-radius: 18px;
}

.home-coach-empty-kicker {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uc-accent);
}

.home-coach-empty-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.home-coach-empty-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 42ch;
}

.home-coach-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.home-coach-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}

.home-coach-transcript {
  --uc-scroll: color-mix(in srgb, var(--gold) 35%, var(--muted));
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--uc-line);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 42%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 42%, transparent), transparent 32%),
    color-mix(in srgb, var(--panel) 62%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.12);
  scrollbar-width: thin;
  scrollbar-color: var(--uc-scroll) transparent;
}

.home-coach-transcript::-webkit-scrollbar {
  width: 8px;
}

.home-coach-transcript::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 28%, var(--muted));
  border: 2px solid transparent;
  background-clip: padding-box;
}

.home-coach-msg {
  max-width: min(44rem, 94%);
  animation: home-coach-msg-in 0.42s ease both;
}

.home-coach-msg--user {
  align-self: end;
}

.home-coach-msg--assistant {
  align-self: start;
}

.home-coach-msg--intro {
  max-width: min(48rem, 98%);
}

.home-coach-msg-rail {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.home-coach-msg--user .home-coach-msg-rail {
  grid-template-columns: minmax(0, 1fr) 46px;
}

.home-coach-msg--user .home-coach-msg-mark {
  order: 2;
}

.home-coach-msg--user .home-coach-msg-stack {
  order: 1;
  align-items: end;
  text-align: right;
}

.home-coach-msg-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--uc-line));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-2) 80%, var(--panel));
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: color-mix(in srgb, var(--gold) 55%, var(--cream));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  overflow: hidden;
  flex: 0 0 auto;
}

.home-coach-msg-mark--avatar {
  padding: 0;
  border-color: color-mix(in srgb, #00ff66 28%, var(--uc-line));
  background: #0b0b0c;
}

.home-coach-msg-avatar-svg,
.home-coach-msg-avatar-img {
  display: block;
  width: 118%;
  height: 118%;
  margin: -9%;
  pointer-events: none;
  object-fit: cover;
  object-position: center 12%;
}

.home-coach-msg--user .home-coach-msg-mark {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--uc-line));
  background: color-mix(in srgb, var(--gold) 16%, var(--bg-2));
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--cream);
}

.home-coach-msg-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.home-coach-msg-who {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px;
}

.home-coach-msg--intro .home-coach-msg-who {
  color: var(--uc-accent);
}

.home-coach-msg-body {
  margin: 0;
  padding: 14px 16px;
  border-radius: 15px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--cream);
  background: color-mix(in srgb, var(--uc-surface) 92%, var(--bg));
  border: 1px solid var(--uc-line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.home-coach-msg--assistant .home-coach-msg-body {
  border-top-left-radius: 5px;
}

.home-coach-msg--intro .home-coach-msg-body {
  padding: 17px 19px;
  font-size: 1.08rem;
  line-height: 1.58;
  letter-spacing: -0.012em;
  border-color: color-mix(in srgb, var(--gold) 32%, var(--uc-line));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--gold) 14%, transparent) 0%,
      transparent 46%
    ),
    color-mix(in srgb, var(--uc-surface) 94%, var(--bg));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.1);
}

.home-coach-msg--user .home-coach-msg-body {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, transparent), transparent 65%),
    color-mix(in srgb, var(--gold) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--gold) 36%, var(--uc-line));
  border-top-right-radius: 5px;
}

.home-coach-msg-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 0;
}

.home-coach-cta-chip,
.home-coach-inline-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--uc-line));
  background: color-mix(in srgb, var(--gold) 9%, var(--uc-surface-2));
  color: color-mix(in srgb, var(--gold) 62%, var(--cream));
  text-decoration: none;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.home-coach-cta-chip:hover,
.home-coach-cta-chip:focus-visible,
.home-coach-inline-link:hover,
.home-coach-inline-link:focus-visible {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 48%, var(--uc-line));
  background: color-mix(in srgb, var(--gold) 14%, var(--uc-surface-2));
  outline: none;
}

@keyframes home-coach-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-coach-msg {
    animation: none;
  }
}

.home-coach-dock {
  display: grid;
  gap: 11px;
  flex: 0 0 auto;
  padding: 13px 13px 11px;
  border-radius: 16px;
  border: 1px solid var(--uc-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 40%),
    var(--uc-surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.1);
}

.home-coach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-coach-chip {
  appearance: none;
  margin: 0;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--uc-line);
  background: color-mix(in srgb, var(--bg) 50%, var(--uc-surface-2));
  color: var(--cream);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.home-coach-chip:hover,
.home-coach-chip:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--uc-line));
  background: color-mix(in srgb, var(--gold) 11%, var(--uc-surface-2));
  transform: translateY(-1px);
  outline: none;
}

.home-coach-chip:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.home-coach-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: none;
}

.home-coach-field {
  min-width: 0;
  display: flex;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--uc-line);
  background: color-mix(in srgb, var(--bg) 58%, var(--panel));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-coach-field:focus-within {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--uc-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}

.home-coach-input {
  width: 100%;
  min-height: 3.1rem;
  max-height: 7.5rem;
  resize: vertical;
  margin: 0;
  padding: 11px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
}

.home-coach-input::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.home-coach-input:focus {
  outline: none;
}

.home-coach-composer-actions {
  display: grid;
  gap: 6px;
  align-content: stretch;
  justify-items: stretch;
  min-width: 6.5rem;
}

.home-coach-send {
  min-width: 6.5rem;
  min-height: 0;
  height: 100%;
  font-size: 0.92rem;
}

.home-coach-composer-actions .home-coach-clear {
  min-height: 0;
  height: 100%;
}

.home-coach-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 1px 2px 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.home-coach-links a {
  color: var(--muted);
  text-decoration: none;
}

.home-coach-links a:hover,
.home-coach-links a:focus-visible {
  color: var(--gold);
}

@media (max-width: 640px) {
  .home-coach-header {
    padding: 0;
  }

  .home-coach-composer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .home-coach-composer-actions {
    min-width: 5.75rem;
  }

  .home-coach-send {
    min-width: 5.75rem;
    width: 100%;
  }

  .home-coach-header .home-coach-status,
  .home-coach-status {
    max-width: none;
    text-align: left;
  }
}

/* ==========================================================================
   Account Panel (in Home Dashboard Tab)
   Compact profile surface sized to the same panel height as the other
   workspace tabs: hero + 2-column card grid, no internal page scroll.
   ========================================================================== */

#home-tab-account [hidden] {
  display: none !important;
}

#home-tab-account .profile-container {
  max-width: 100%;
  padding: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

html.home-js #home-tab-account.home-dash-panel.is-active > .home-dash-col {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
}

html.home-js #home-tab-account.home-dash-panel.is-active > .home-dash-col > .profile-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#home-tab-account .profile-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: none;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}

#home-tab-account .profile-hero {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: inset 2px 0 0 var(--gold);
  overflow: visible;
  position: relative;
  z-index: 5;
}

#home-tab-account .profile-hero .eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

#home-tab-account .profile-hero h1 {
  margin: 0 0 4px;
  font-family: var(--font);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cream);
}

#home-tab-account .profile-email {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.95rem;
}

#home-tab-account .profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#home-tab-account .profile-meta-row .premium-pill,
#home-tab-account .profile-meta-row .profile-plan-chip,
#home-tab-account .profile-meta-row .profile-meta-item,
#home-tab-account .profile-meta-row .profile-meta-link {
  min-height: 28px;
  padding: 0 12px;
  font-size: 0.72rem;
}

#home-tab-account .profile-avatar-shell {
  position: relative;
  flex-shrink: 0;
  gap: 12px;
}

#home-tab-account .profile-hero .avatar-frame--md {
  --avatar-size: 96px;
}

#home-tab-account .profile-avatar-actions {
  max-width: 200px;
}

#home-tab-account .avatar-trigger,
#home-tab-account .avatar-frame-trigger {
  min-height: 34px;
  padding: 6px 10px;
  gap: 6px;
  border-radius: 9px;
}

#home-tab-account .avatar-action-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
}

#home-tab-account .avatar-action-icon > svg {
  width: 14px;
  height: 14px;
}

#home-tab-account .avatar-action-label {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

#home-tab-account .avatar-action-lock {
  width: 12px;
  height: 12px;
  right: 4px;
  top: 4px;
  bottom: auto;
}

#home-tab-account .avatar-action-lock svg {
  width: 10px;
  height: 10px;
}

#home-tab-account .avatar-frame--md .avatar-glyph {
  font-size: 2.55rem;
}

#home-tab-account .profile-flashes {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

#home-tab-account .profile-flash {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--cream);
  font-size: 0.92rem;
}

#home-tab-account .profile-flash--warning { border-color: var(--gold); }
#home-tab-account .profile-flash--info,
#home-tab-account .profile-flash--success {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}

#home-tab-account .profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: none;
}

#home-tab-account .profile-card--plan {
  border-color: var(--line-strong);
  box-shadow: inset 2px 0 0 var(--gold);
}

#home-tab-account .profile-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

#home-tab-account .profile-card-top h2,
#home-tab-account .profile-card h2 {
  margin: 0;
  font-family: var(--font);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--cream);
}

#home-tab-account .profile-plan-note {
  margin: 0;
  max-width: none;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

#home-tab-account .profile-plan-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-subtle);
}

#home-tab-account #premium-status {
  margin: 0;
  color: var(--cream);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

#home-tab-account #premium-remaining {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}

#home-tab-account .profile-cancel-confirm {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--danger-border, color-mix(in srgb, #d9534f 40%, var(--line)));
  border-radius: 12px;
  background: var(--danger-bg, color-mix(in srgb, #d9534f 8%, transparent));
}

#home-tab-account .profile-cancel-confirm > p:first-child {
  margin: 0 0 10px;
  color: var(--danger-text, #fecaca);
  font-size: 0.92rem;
  line-height: 1.5;
}

#home-tab-account .profile-edit-form {
  display: grid;
  gap: 12px;
}

#home-tab-account .profile-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}

#home-tab-account .profile-form-row label,
#home-tab-account .profile-edit-form > label:not(.profile-check) {
  display: grid;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#home-tab-account .profile-form-row input,
#home-tab-account .profile-edit-form input[type="text"],
#home-tab-account .profile-edit-form input[type="password"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--input-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

#home-tab-account .profile-form-row input:focus,
#home-tab-account .profile-edit-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent);
}

#home-tab-account .profile-display-name-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  grid-template-columns: none;
}

#home-tab-account .profile-display-name-row label {
  flex: 1 1 180px;
}

#home-tab-account .profile-username-save {
  height: 2.6rem;
  padding: 6px 14px;
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ok-green, #2e9e6b) 55%, transparent);
  background: var(--ok-green, #2e9e6b);
  color: #fff;
}

#home-tab-account .profile-username-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#home-tab-account .profile-check {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--fill-subtle);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
  line-height: 1.35;
}

#home-tab-account .profile-check input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: var(--gold);
  flex-shrink: 0;
}

#home-tab-account .profile-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#home-tab-account .profile-card-actions .btn,
#home-tab-account #cancel-premium-btn,
#home-tab-account #sign-out-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--cream);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

#home-tab-account .profile-card-actions .btn:hover,
#home-tab-account #cancel-premium-btn:hover {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--on-solid, #0a0a0a);
}

#home-tab-account .profile-card-actions .btn.btn-gold {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--on-gold, var(--ink, #0a0a0a));
  box-shadow: none;
}

#home-tab-account .profile-card-actions .btn.btn-gold:hover {
  filter: none;
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  color: var(--on-gold, var(--ink, #0a0a0a));
}

#home-tab-account .profile-card--account .profile-card-actions .btn[href*="reset_password"] {
  background: color-mix(in srgb, var(--paper-2, var(--bg-2)) 80%, transparent);
  border-color: var(--line-strong);
  color: var(--cream);
}

#home-tab-account #sign-out-button:hover {
  background: color-mix(in srgb, var(--data-down, #d9534f) 10%, transparent);
  border-color: var(--data-down, #d9534f);
  color: var(--data-down, #d9534f);
}

#home-tab-account .danger-submit {
  border: 1px solid color-mix(in srgb, var(--data-down, #d9534f) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--data-down, #d9534f) 16%, transparent);
  color: var(--data-down, #d9534f);
  font-weight: 700;
  padding: 0.55rem 1.05rem;
  font-size: 0.88rem;
  cursor: pointer;
}

@media (max-width: 720px) {
  #home-tab-account .profile-box {
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-y: auto;
  }

  html.home-js #home-tab-account.home-dash-panel.is-active > .home-dash-col {
    overflow-y: auto;
  }

  #home-tab-account .profile-hero {
    flex-wrap: wrap;
    padding: 16px;
  }

  #home-tab-account .profile-form-row {
    grid-template-columns: 1fr;
  }
}

/* ——— Workspace CTAs: pricing-table language ———
   Scoped to `.home-dash` so the rest of the site keeps its existing gold
   buttons. Featured = solid gold fill; secondary = neutral cream pill. */
.home-dash .btn-gold,
.home-dash a.btn-gold,
.home-dash button.btn-gold {
  border: 1px solid var(--gold);
  border-radius: 8px;
  min-height: 40px;
  padding: 9px 14px;
  background: var(--gold);
  color: var(--on-gold, var(--ink, #0a0a0a));
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.home-dash .btn-gold:hover,
.home-dash a.btn-gold:hover,
.home-dash button.btn-gold:hover,
.home-dash .btn-gold:focus-visible,
.home-dash a.btn-gold:focus-visible,
.home-dash button.btn-gold:focus-visible {
  filter: none;
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  color: var(--on-gold, var(--ink, #0a0a0a));
  box-shadow: none;
}

.home-dash .btn-ghost,
.home-dash a.btn-ghost,
.home-dash button.btn-ghost,
.home-dash .btn-secondary,
.home-dash a.btn-secondary {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  min-height: 40px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--paper-2, var(--bg-2)) 80%, transparent);
  color: var(--cream);
  box-shadow: none;
  font-weight: 700;
}

.home-dash .btn-ghost:hover,
.home-dash a.btn-ghost:hover,
.home-dash button.btn-ghost:hover,
.home-dash .btn-secondary:hover,
.home-dash a.btn-secondary:hover {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--on-solid, #0a0a0a);
}

/* Import results: denser tabular rows (compare-table hover language). */
.home-dash .imported-game-row:nth-child(even) {
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}

.home-dash .imported-game-row:hover,
.home-dash .imported-game-row:focus-visible {
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  box-shadow: none;
}

html[data-theme="dark"] .home-dash .home-dash-col,
html[data-theme="dark"] .home-dash .home-practice-dash,
html[data-theme="dark"] .home-dash .home-dash-tabs {
  background: var(--bg-2);
  border-color: var(--line);
}