/* ══ PROJECT HOME DASHBOARD ═══════════════════════════════════════════
 *
 * Self-contained companion to Javascript/project-home.js — mirrors the
 * inline-injection pattern used by abstract-screen.css/js: the stage
 * hides .left-panel / #rightPanel and injects its own full-width panel
 * (#projHomeDash) into .proj-body, so it never touches the Sources /
 * Summarisation markup or CSS.
 *
 * Sections in this file (Sept 2026 — modelled on Harvey's project-home
 * layout, updated with a premium gradient-wash pass on the hero + a
 * lightweight elevation pass on cards/panels so the dashboard reads as a
 * finished product rather than a wireframe):
 *   1. Layout shell          — .proj-body--home / .proj-home-dash
 *   2. Hero                  — .home-hero (title/description/actions)
 *   3. Workflow-stage tabs   — .home-stage-row (plain text, no icons)
 *   4. Your Assignments      — .home-stats-row / .home-stat-card
 *   5. Publications panel    — .home-tag-chart
 *   6. Progress by tag       — .home-progtag-select + .home-donut-row
 *   7. Project picker        — .home-proj-select (lives in the hero)
 *   8. Onboarding / loading states
 *
 * Colour/elevation: navigation (stage tabs, the project picker) stays
 * plain text — no icons added there — and the tag chart / progress
 * donuts remain the primary place colour carries real meaning. On top of
 * that, this pass adds: (a) a soft brand-tinted gradient wash behind the
 * hero (ambient colour, not a boxed card — no border/shadow on the hero
 * itself, so it still reads as "sitting on the page" the way Harvey's
 * header band does), (b) a quiet per-card icon watermark + hover lift on
 * the four assignment stat cards so their four categories are
 * distinguishable at a glance, and (c) real elevation (var(--shadow-card)
 * / var(--shadow-panel), with safe inline fallbacks) on the two bottom
 * panels, which the previous pass had deliberately flattened to
 * box-shadow:none/border:none — that flattening is reversed here.
 *
 * Loading states use skeleton.css's shared .skel-bar / .skel-avatar
 * shimmer classes (see that file's header comment) rather than
 * reinventing shimmer CSS here — this file only adds size/layout
 * modifiers on top of them.
 * ══════════════════════════════════════════════════════════════════ */

.proj-body .left-panel.home-hidden,
.proj-body .right-panel.home-hidden {
  display: none !important;
}

.proj-body.proj-body--home {
  display: flex !important;
  flex-direction: column;
  gap: 24px;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 10px 8px 28px;
  /* Very low-opacity echo of the hero's own gradient, fixed to the
     viewport rather than the scroll content, so the whole dashboard
     feels tied to one palette instead of a coloured hero sitting on a
     flat white page. Scoped to this one container (not body/html) so it
     can never bleed into Sources/Abstract Screen/etc. */
  background: radial-gradient(1100px 460px at 12% -8%, rgba(74,133,120,0.045) 0%, rgba(74,133,120,0) 62%) fixed,
              var(--bg-page);
}

.proj-home-dash {
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1;
  min-height: 0;
}

.icon-btn-sm.proj-edit {
  border: none;
  color: transparent;
}

.breadcrumb .proj-edit {
  border: none;
  color: transparent;
}

.breadcrumb:hover .proj-edit {
  color: var(--ink-muted);
}

.home-section { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.home-section--fill { flex: 1; min-height: 0; }
.home-eyebrow {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

/* ══ 2. HERO — PROJECTS OVERVIEW ══════════════════════════════════════*/
.home-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background:
    radial-gradient(130% 190% at 100% -15%, rgba(74,133,120,0.16) 0%, rgba(74,133,120,0) 58%),
    linear-gradient(160deg, rgba(74,133,120,0.10) 0%, rgba(74,133,120,0.025) 48%, rgba(74,133,120,0) 78%);
  border: none;
  border-radius: 8px;
  padding: 22px 24px 18px;
  flex-shrink: 0;
  position: relative;
  box-shadow: none;
}

.home-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.home-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 320px;
}

.home-hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: -2px;
}

.home-hero-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.home-hero-avatar {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(150deg, #4a8578 0%, #35594f 100%);
  color: var(--bg-surface);
  font-size: 1rem;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
  box-shadow: 0 4px 12px -4px rgba(53,89,79,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}

.home-hero-title {
  font-size: 1.75rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 620px;
}

/* Project picker — plain text button, replacing the old at-a-glance
   stat numbers. */
.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.home-hero-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.home-hero-btn:hover,
.home-hero-btn.open {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  color: var(--ink);
}
/* Primary action — the project-picker trigger ("Select Project") is the
 * one thing in the hero someone actually clicks to move forward, so it
 * gets the filled teal treatment; "Edit" stays a quiet outline button.
 * Assumes the two hero actions render in that order (Edit, then the
 * project-select trigger) as in the current layout — if project-home.js
 * ever adds a third hero action, give the primary one an explicit
 * .home-hero-btn--primary class instead of relying on :last-child. */
.home-hero-actions .home-hero-btn:last-child {
  border-color: transparent;
  background: linear-gradient(155deg, #4a8578 0%, #35594f 100%);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(53,89,79,0.45);
}
.home-hero-actions .home-hero-btn:last-child:hover {
  background: linear-gradient(155deg, #52927f 0%, #3c6457 100%);
  color: #fff;
  box-shadow: 0 4px 12px -3px rgba(53,89,79,0.55);
  transform: translateY(-1px);
}
.home-proj-trigger.home-hero-btn .home-proj-trigger-label { max-width: 160px; }

@media (max-width: 760px) {
  .home-hero { padding: 18px 16px 16px; gap: 16px; }
  .home-hero-actions { width: 100%; }
}

/* ══ 3. WORKFLOW-STAGE BUTTONS ═════════════════════════════════════════
 * Sits inside the hero, beneath the title/stats — the modernised
 * replacement for the old centred .proj-stage-dropdown while Home is the
 * active stage (that dropdown is simply hidden for this one stage; every
 * other stage still uses it as before — see _homeOnStageChange() in
 * project-home.js). Clicking a button jumps straight into that stage via
 * the same _homeCardClick() the stat cards below already use. */
.home-stage-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(74,133,120,0.16);
  padding-top: 14px;
  flex-wrap: wrap;
}

.home-stage-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm, 0.72rem);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.home-stage-btn:hover {
  background: rgba(255,255,255,0.55);
  color: var(--ink);
}
/* Home is always the active tab here — this row only ever renders while
   Home is the current stage (see _homeOnStageChange in project-home.js),
   so there's nothing else for "active" to reflect. Now that it sits on a
   gradient wash rather than a flat surface, the active tab gets a fully
   opaque white pill + a soft lift so it reads as "raised above" the
   colour wash — the same visual move Harvey uses for its active tab. */
.home-stage-btn.active {
  background: var(--bg-surface);
  color: var(--ink);
  cursor: default;
  box-shadow: 0 1px 2px rgba(43,24,23,0.05), 0 4px 10px -6px rgba(43,24,23,0.14);
}
.home-stage-btn.active:hover {
  background: var(--bg-surface);
}

/* ── Collaborator avatars — bottom-right corner of the hero ───────────
 * Stacked, overlapping initials circles (owner first) with a "+N"
 * bubble for whoever doesn't fit, and a hover/focus popover listing
 * everyone by name — see _homeCollabAvatarsHtml() in project-home.js.
 * Absolutely positioned against .home-hero (position: relative, above)
 * so it sits quietly in the corner without competing with the title/
 * actions row or the stage tabs for layout space. */
.home-collab-stack {
  position: absolute;
  /* Offsets matched to .home-hero's own padding (above) so the stack
     sits flush with the hero's right/bottom content inset rather than
     floating in its padding band. */
  right: 20px;
  bottom: 14px;
}
.home-collab-stack:focus-visible { outline: none; }
.home-collab-avatars {
  display: flex;
  align-items: center;
  cursor: default;
}
.home-collab-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 2px rgba(43,24,23,0.08);
}
.home-collab-avatar + .home-collab-avatar { margin-left: -8px; }
.home-collab-more {
  background: var(--bg-page);
  color: var(--ink-muted);
  font-size: 0.6rem;
}

/* Name list — hidden until the stack is hovered or (keyboard) focused.
 * Opens downward below the stack — opening upward left too little room
 * inside the hero card above the stack and got visually cut off there;
 * downward has the whole page beneath it to work with, and the popover
 * is z-index'd above the Metrics section so it simply overlays it
 * rather than needing space reserved in the layout. */
.home-collab-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 168px;
  max-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(43,24,23,0.16);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 50;
}
.home-collab-stack:hover .home-collab-popover,
.home-collab-stack:focus-within .home-collab-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.home-collab-popover-title {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  margin-bottom: 7px;
}
.home-collab-popover-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 180px;
  overflow-y: auto;
}
.home-collab-popover-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-collab-popover-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  font-size: 0.56rem;
  font-weight: 700;
}
.home-collab-popover-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══ 4. YOUR ASSIGNMENTS ══════════════════════════════════════════════ */
.home-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.home-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px;
  background: var(--bg-surface);
  border: none;
  box-shadow: inset 0 0 0 1px transparent;
  border-radius: var(--r-card);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.home-stat-card:hover {
  background: var(--bg-elevated);
}

/* Conflicts card, while count > 0 — a quiet inset-ring tint only (no
 * border, to stay consistent with the fill-only treatment above), no
 * icon or dot, so it still reads as "needs attention" without adding
 * colour noise to the row. */
.home-stat-card.hsc-urgent {
  box-shadow: inset 0 0 0 1px rgba(220,38,38,0.28);
}
.home-stat-card.hsc-urgent:hover {
  box-shadow: inset 0 0 0 1px rgba(220,38,38,0.28), var(--shadow-card, 0 10px 22px -14px rgba(43,24,23,0.24));
}

/* Per-card watermark icon — one per assignment category (Abstracts,
 * Full Text, Conflicts, Summaries, in that fixed order), so the four
 * cards are distinguishable by colour/shape even before reading the
 * numbers. Pure CSS: a mask-image (so it can be painted with
 * currentColor, i.e. the --teal/--amber/--red/--purple set below) rather
 * than four separate image files or an icon font dependency. Decorative
 * only — aria-hidden by nature (::after, not read by screen readers) —
 * so it adds no noise for assistive tech. */
.home-stat-card::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask-image: var(--hsc-icon);
  mask-image: var(--hsc-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.13;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.home-stat-card:hover::after {
  opacity: 0.22;
  transform: translateY(-1px) scale(1.06);
}
.home-stats-row .home-stat-card:nth-child(1) { color: var(--teal); }
.home-stats-row .home-stat-card:nth-child(1)::after {
  --hsc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='8' y1='16' x2='13' y2='16'/%3E%3C/svg%3E");
}
.home-stats-row .home-stat-card:nth-child(2) { color: var(--amber); }
.home-stats-row .home-stat-card:nth-child(2)::after {
  --hsc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='13' height='17' rx='1.5'/%3E%3Cline x1='7' y1='7' x2='14' y2='7'/%3E%3Cline x1='7' y1='11' x2='12' y2='11'/%3E%3Ccircle cx='17' cy='17' r='4'/%3E%3Cline x1='20' y1='20' x2='22.3' y2='22.3'/%3E%3C/svg%3E");
}
.home-stats-row .home-stat-card:nth-child(3) { color: var(--red); }
.home-stats-row .home-stat-card:nth-child(3)::after {
  --hsc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L22 20 L2 20 Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='14'/%3E%3Ccircle cx='12' cy='17' r='0.7' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.home-stats-row .home-stat-card:nth-child(4) { color: var(--purple); }
.home-stats-row .home-stat-card:nth-child(4)::after {
  --hsc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.5 2.5H18v3.5L20.5 11 18 13.5V17h-3.5L12 19.5 9.5 17H6v-3.5L3.5 11 6 8V4.5h3.5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.home-stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hsc-zero .home-stat-num { color: var(--ink-muted); }
.hsc-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.hsc-desc {
  font-size: 0.72rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* Skeleton — sized modifier on top of skeleton.css's shared .skel-bar */
.skel-bar.home-stat-skel {
  width: 42px;
  height: 22px;
  border-radius: 6px;
  margin-bottom: 4px;
}

/* Reverses the earlier flat-fill pass: these two panels (Publications by
 * Search Tag / Progress by Search Tag) are the main content of the page,
 * so they get real elevation back — the shared --shadow-card/
 * --shadow-panel tokens from the site-wide shadow audit, with an inline
 * fallback in case this file ever loads before design-alignment.css. */
.panel-card.home-panel {
  background: var(--bg-surface);
  box-shadow: none;
  border: none;
}

/* ── Bottom row — two panels ──────────────────────────────────────── */
.home-bottom-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.35fr);
  gap: 16px;
  flex: 1;
  min-height: 320px;
}
.home-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.home-panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-muted);
  padding: 24px 20px;
  text-align: center;
}
.home-panel-empty p { font-size: 0.76rem; margin: 0; max-width: 320px; line-height: 1.5; }

@media (max-width: 1100px) {
  .home-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .home-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ══ 5. PUBLICATIONS BY SEARCH TAG ════════════════════════════════════
 * One row per distinct pub.searchTag value (blank tags fold into
 * "Untagged"; see _homeTagBreakdown() in project-home.js). Bars are
 * plain flex/width%, no chart library — consistent with the rest of
 * this app's hand-rolled UI. */
.home-pub-header { gap: 10px; padding: 14px 18px; }
.home-pub-header h3 { flex-shrink: 0; }

.home-tag-chart {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 20px 20px;
}
.home-tag-chart::-webkit-scrollbar { width: 4px; }
.home-tag-chart::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.home-tag-row {
  display: grid;
  grid-template-columns: 100px 1fr 26px;
  align-items: center;
  gap: 10px;
}
.home-tag-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-tag-row-other .home-tag-label { font-style: italic; color: var(--ink-muted); }

.home-tag-track {
  height: 7px;
  border-radius: 5px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.home-tag-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #3c6e63;
  transition: width 0.25s ease;
}
.home-tag-row-other .home-tag-fill { background: var(--border-hover); }

.home-tag-count {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ══ 6. PROGRESS BY SEARCH TAG ════════════════════════════════════════
 * Three small donuts (Abstracts / Full Text / Summaries), scoped by the
 * search-tag selector in the panel header. See _homeProgressPanelHtml() /
 * _homeDonutBlockHtml() in project-home.js for how segments + totals are
 * computed. */
.home-progress-header { gap: 10px; padding: 14px 18px; }
.home-progress-header h3 { flex-shrink: 0; }

.home-donut-row {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 10px 16px 20px;
  overflow-y: auto;
}
@media (max-width: 620px) {
  .home-donut-row { grid-template-columns: 1fr; }
}

.home-donut-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
}
.home-donut-block + .home-donut-block { border-left: 1px solid var(--border); }
@media (max-width: 620px) {
  .home-donut-block + .home-donut-block { border-left: none; border-top: 1px solid var(--border); }
}

.home-donut-block-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

.home-mini-donut {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex-shrink: 0;
}
.home-mini-donut-hole {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Thin ring so the hole reads as a crisp cut-out rather than the donut
     segments just fading into an untextured centre. */
  box-shadow: inset 0 0 0 1px var(--border);
}
.home-mini-donut-total {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.home-mini-donut-total-label {
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.home-mini-donut-skel {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex-shrink: 0;
}

.home-mini-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.home-mini-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-mini-legend-row.zero { opacity: 0.45; }
.home-mini-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.home-mini-legend-label {
  font-size: 0.7rem;
  color: var(--ink-soft);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-mini-legend-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Search-tag selector — same trigger/menu construction as the topbar's
 *   project selector (.home-proj-select below), just without the
 *   avatar, so the two dropdowns on this page feel like one component
 *   family rather than two different pickers. ───────────────────────── */
.home-progtag-select { position: relative; }

.home-progtag-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s;
}
.home-progtag-trigger:hover,
.home-progtag-trigger.open {
  background: var(--bg-elevated);
  border-color: var(--border-hover);
}
.home-progtag-trigger:disabled { cursor: default; opacity: 0.6; }
.home-progtag-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.home-progtag-trigger.open .home-proj-caret { transform: rotate(180deg); }
/* One or more tags actively narrowing the charts — a filled teal trigger
 * reads at a glance as "this view is filtered", distinct from the neutral
 * "All Tags" default state. */
.home-progtag-trigger.has-selection {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--ink);
}

/* Same viewport-anchored, JS-positioned approach as .home-proj-menu
 * above, for the same reason. */
.home-progtag-menu {
  display: none;
  position: fixed;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(43,24,23,0.14);
  padding: 6px;
  z-index: 400;
}
.home-progtag-menu.open { display: flex; }
.home-progtag-menu::-webkit-scrollbar { width: 4px; }
.home-progtag-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.home-progtag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.76rem;
  color: var(--ink-soft);
  transition: background 0.13s;
}
.home-progtag-item:hover { background: var(--bg-elevated); }
/* "All Tags" row — the one item without a checkbox, so it keeps the
 * original single-select active treatment (bold + trailing check) to
 * read clearly as "clear filter" rather than another checkable option. */
.home-progtag-item--all.active { background: var(--teal-soft); color: var(--ink); font-weight: 700; }
.home-progtag-item--all .bx-check { color: var(--teal); font-size: 0.9rem; }

/* Multiselect tag rows — a real checkbox on the left so several can
 * visibly be picked at once, label left-aligned rather than
 * space-between (no trailing check icon needed once the box itself
 * shows the state). */
.home-progtag-item:not(.home-progtag-item--all) { justify-content: flex-start; }
.home-progtag-item.active:not(.home-progtag-item--all) { background: var(--teal-soft); color: var(--ink); }
.home-progtag-item-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid var(--border-hover);
  background: var(--bg-page);
  color: transparent;
  transition: all 0.12s;
}
.home-progtag-item-checkbox .bx-check { font-size: 0.8rem; line-height: 1; }
.home-progtag-item-checkbox.checked {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.home-progtag-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* ══ 7. PROJECT PICKER (moved into the hero — see .home-hero-actions
 *   above for the trigger button's own appearance; this covers the
 *   dropdown menu it opens). ══════════════════════════════════════════ */
.home-proj-select { position: relative; }

.home-proj-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

/* position:fixed (not absolute) + top/left set in JS from the trigger's
 * getBoundingClientRect() — see _homePositionMenu() in project-home.js.
 * .proj-body--home scrolls its own content (overflow-y:auto), and per
 * spec that implicitly makes overflow-x 'auto' too, so an absolutely
 * positioned menu anchored inside it could get silently clipped on
 * either axis. Anchoring to the viewport instead sidesteps that
 * entirely — the menu is measured and clamped to stay fully on-screen
 * every time it opens, regardless of where its trigger sits or how the
 * dashboard is scrolled. */
.home-proj-menu {
  display: none;
  position: fixed;
  min-width: 260px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(43,24,23,0.14);
  padding: 6px;
  z-index: 400;
}
.home-proj-menu.open { display: flex; }
.home-proj-menu::-webkit-scrollbar { width: 4px; }
.home-proj-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.home-proj-menu-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 0.74rem;
  color: var(--ink-muted);
}

.home-proj-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.13s;
}
.home-proj-item:hover { background: var(--bg-elevated); }
.home-proj-item.active { background: var(--teal-soft); }
.home-proj-item-avatar { width: 22px; height: 22px; font-size: 0.62rem; }
.home-proj-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.home-proj-item-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-proj-item-owner {
  font-size: 0.66rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-proj-item-check { color: var(--teal); font-size: 0.9rem; flex-shrink: 0; }

/* Skeleton rows while window.allProjects hasn't loaded yet — same
   skel-avatar + skel-bar combo as the sidebar/table skeletons. */
.home-proj-skel-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
}

/* ── Menu footer — "Create new project" row ──────────────────────────
 * Appended after the project list (and after the empty state) by
 * _homeProjMenuCreateRowHtml() in project-home.js — replaces the old
 * standalone #homeCreateBtn pill that used to sit next to the dropdown
 * trigger in the topbar. */
.home-proj-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 5px 4px;
  flex-shrink: 0;
}
.home-proj-create-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.78rem;
  transition: background 0.13s;
}
.home-proj-create-item:hover,
.home-proj-create-item:focus-visible { background: var(--teal-soft); }
.home-proj-create-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .home-proj-trigger-label { max-width: 90px; }
}

.home-pub-header,
.home-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* ══ 9. ONBOARDING / LOADING STATES ═══════════════════════════════════ */

/* #viewHome now only ever renders for a brand-new account with no
 * projects yet — everyone else is auto-landed inside a project (see
 * goHome() / _openMostRecentProject() in literature-review.js). Centers
 * the single empty-state panel now that the old table/search/topbar
 * chrome around it is gone; this file is the simplest place for the one
 * rule that needs, since literature-review.css's existing .rp-home rules
 * were written for the old, taller layout. */
#viewHome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 62px);
  padding: 24px;
}

/* #projHomeLoading — the default state on page load, before Firebase's
 * first litProjects snapshot has confirmed whether the person has zero
 * projects or plenty. A plain spinning circle rather than the
 * skel-bar/skel-avatar shimmer used elsewhere — this state is normally
 * on screen only briefly (auto-landing into the most recent project
 * happens as soon as the first snapshot arrives), so a spinner reads as
 * "actively working" rather than implying specific content is about to
 * fade in at this exact shape/size the way a skeleton does. Reuses the
 * same spin keyframes + border-spinner construction as
 * .ai-progress-spinner (literature-review.css) rather than inventing a
 * new animation. */
.rp-home-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rp-home-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Breadcrumb — project edit affordance + back-to-Home link ────────
 * Lives in the always-visible topbar (not gated to the Home stage like
 * everything else in this file) — it's the replacement for the old
 * all-projects table's row-level edit button, so it needs to be reachable
 * from any stage, not just Home. Scoped here rather than a shared
 * stylesheet since this file is the one place a couple of extra rules for
 * it can live without a new CSS file. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb #projEditBtn {
  opacity: 0.5;
  transition: opacity 0.14s ease;
}
.breadcrumb:hover #projEditBtn,
.breadcrumb #projEditBtn:focus-visible {
  opacity: 1;
}

/* .breadcrumb-home-link (#projBackBtn) — the project title itself, now a
 * single clickable unit that jumps back to Home (_selectProjStage('home'),
 * projects.js) from Sources/Abstract Screen/Full Text Screen/
 * Summarisation/PRISMA. One <button> wrapping both the chevron and the
 * name rather than two separately-clickable pieces, so keyboard/tab
 * order treats it as one control and the hover state visibly covers the
 * whole thing, not just a tiny icon next to inert text. Quiet by
 * default — a plain chevron + the existing bold breadcrumb-current
 * styling from literature-review.css — so it doesn't look like a bigger
 * deal than the rest of this understated topbar; the hover/focus chip
 * background is what signals "this is clickable". */
.breadcrumb-home-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin-left: -4px;
  padding: 4px 8px 4px 4px;
  border: none;
  background: none;
  border-radius: 7px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}
.breadcrumb-home-link:hover,
.breadcrumb-home-link:focus-visible {
  background: var(--bg-elevated);
}
.breadcrumb-home-link .breadcrumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb-back-icon {
  font-size: 1.05rem;
  color: var(--ink-muted);
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.16s ease, opacity 0.14s ease;
}
.breadcrumb-home-link:hover .breadcrumb-back-icon,
.breadcrumb-home-link:focus-visible .breadcrumb-back-icon {
  opacity: 1;
  transform: translateX(-2px);
}

/* Export button (topbar) + modal — retired. Exporting now lives entirely
 * on the Exports page (exports.html / exports.css), which covers
 * Quarantine / Abstract Screen / Full Text Screen (.xlsx) and Summaries
 * (.docx) for any project. project-home-export.js and #homeExportModal
 * have been removed from projects.html accordingly. */

/* ── Reduced motion ────────────────────────────────────────────────────
 * The lift/scale micro-interactions added in the gradient/elevation pass
 * (stat-card hover lift, watermark-icon scale, primary-button lift) are
 * all purely decorative, so they're the first thing to drop for anyone
 * who has asked their OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .home-stat-card,
  .home-stat-card::after,
  .home-hero-actions .home-hero-btn:last-child {
    transition: none !important;
  }
  .home-stat-card:hover,
  .home-hero-actions .home-hero-btn:last-child:hover {
    transform: none !important;
  }
  .home-stat-card:hover::after {
    transform: none !important;
  }
}