/* learner_home_html, root .lh-wrap.
   Rules whose first compound is the root itself stay bare; every other rule is scoped
   :where(.lh-wrap), which adds zero specificity and so cannot change which rule wins.
   The slot parents hold Anvil's <anvil-dropzone> (display: contents), so an empty slot is
   :not(:has(> anvil-dropzone > *)) and the banner-stack child combinator includes the
   dropzone. */

/* Greenwood × PX T-LEARNER — lifted verbatim from
   training_wireframes.html (.profile-header / .stats-row /
   .panel / .grid-cards / chip / empty-state). All --gw-*
   variables come from greenwood_tokens.css; --ch-* spacing
   tokens stay for layout rhythm
   that matches the rest of the carehome chrome.

   Scoping note: the rules live inside .lh-wrap, so they only
   apply when T-LEARNER is mounted — the carehome portal's
   other surfaces are unaffected. */

.lh-wrap {
  font-family: var(--gw-font);
  color: var(--gw-ink);
}
/* Greenwood radial-gradient chrome is owned by training_html
   (.tr-root::before) so the whole training tab shares one
   background layer regardless of which child is mounted. */

/* Banner column — multiple banners stack with gap */
:where(.lh-wrap) .lh-banner-stack > anvil-dropzone > * + * {
  margin-top: var(--ch-space-sm);
}
:where(.lh-wrap) .lh-banner-stack:not(:has(> anvil-dropzone > *)) {
  display: none;
}
:where(.lh-wrap) .lh-banner-stack {
  margin-bottom: var(--ch-space-md);
}

/* Embedded-mode header — only shown when target != self */
:where(.lh-wrap) .lh-embedded-header {
  background: var(--gw-paper-2);
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gw-ink-2);
  margin-bottom: var(--ch-space-md);
  display: none;
}
:where(.lh-wrap) .lh-embedded-header.lh-visible {
  display: flex;
  align-items: center;
  gap: 8px;
}
:where(.lh-wrap) .lh-embedded-header strong {
  color: var(--gw-ink);
  font-weight: 600;
}

/* Welcome panel — profile-header layout from wireframe lines
   624-642. Avatar circle + name with Instrument Serif italic
   + access line + lg compliance ring + ghost-link to T-STAFF.
   Stats row sits below the header. */
:where(.lh-wrap) .lh-profile-header {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
:where(.lh-wrap) .lh-profile-header .lh-info {
  flex: 1;
  min-width: 200px;
}
:where(.lh-wrap) .lh-profile-header .lh-info h2 {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  /* Reserve one line of heading height so the empty <em> below
     doesn't push subsequent content when the name lands. */
  min-height: 1.3em;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--gw-ink);
}
:where(.lh-wrap) .lh-profile-header .lh-name-emph {
  font-family: var(--gw-font-emph);
  font-style: italic;
  font-weight: 400;
  color: var(--gw-brand-d);
}
/* Ring slot — fixed to SIZE_LG (84px) so compliance_ring_html
   mounting after the welcome panel paints doesn't expand the
   profile-header from 0×0 to 84×84 and shift siblings. */
:where(.lh-wrap) .lh-profile-header .lh-ring-slot {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}
:where(.lh-wrap) .lh-profile-header .lh-access {
  font-size: 12.5px;
  color: var(--gw-ink-2);
  margin-top: 4px;
  /* Reserve one line so the empty access div doesn't grow when
     the entries land. */
  min-height: 1.4em;
}
:where(.lh-wrap) .lh-profile-header .lh-access .lh-home-name {
  font-weight: 600;
  color: var(--gw-ink);
}
:where(.lh-wrap) .lh-profile-header .lh-access .lh-access-sep {
  color: var(--gw-mute);
  margin: 0 6px;
}
/* Role badge — small Greenwood pill rendered after each home
   name when the target user's role at that home is non-empty
   (T-LEARNER wireframe). Uses --gw-paper-2 for a quiet pill
   that doesn't compete with the home name itself. */
:where(.lh-wrap) .lh-profile-header .lh-access .lh-home-role-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--gw-font);
  color: var(--gw-ink-2);
  background: var(--gw-paper-2);
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-pill);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  vertical-align: baseline;
}

/* Avatar — circular brand-gradient pill. Decorative only;
   T-LEARNER is the canonical self-view per §F-T07c. */
:where(.lh-wrap) .lh-avatar {
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gw-brand), var(--gw-brand-d));
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 16px -6px rgba(246,139,31,0.5);
  font-family: var(--gw-font);
}

/* Stats row — four blocks, Archivo Black numerals. */
:where(.lh-wrap) .lh-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
:where(.lh-wrap) .lh-stat-block {
  background: var(--gw-paper-2);
  padding: 10px 14px;
  border-radius: var(--gw-r-md);
  border: 1px solid var(--gw-bd);
  min-width: 90px;
}
:where(.lh-wrap) .lh-stat-block .lh-stat-label {
  font-size: 10.5px;
  color: var(--gw-mute);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-family: var(--gw-font-mono);
  font-weight: 600;
}
:where(.lh-wrap) .lh-stat-block .lh-stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--gw-ink);
  margin-top: 2px;
  font-family: var(--gw-font-brand);
  letter-spacing: -0.04em;
  line-height: 1;
  /* Anchor digits to the right so growth from "0" to "100"
     doesn't visually jump leftwards as the value lands. */
  min-width: 3ch;
  text-align: right;
}
:where(.lh-wrap) .lh-stat-block[data-tone="ok"] .lh-stat-value {
  color: var(--gw-success);
}
:where(.lh-wrap) .lh-stat-block[data-tone="warn"] .lh-stat-value {
  color: var(--gw-warn-c);
}
:where(.lh-wrap) .lh-stat-block[data-tone="danger"] .lh-stat-value {
  color: var(--gw-danger);
}

/* Shortcuts row — Within-home / Cross-home leaderboard buttons. */
:where(.lh-wrap) .lh-shortcuts {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
:where(.lh-wrap) .lh-shortcut-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--gw-font);
  background: var(--gw-paper);
  color: var(--gw-ink-2);
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-sm);
  cursor: pointer;
  min-height: 32px;
  transition: background var(--gw-t), color var(--gw-t),
              border-color var(--gw-t);
  white-space: nowrap;
}
:where(.lh-wrap) .lh-shortcut-btn:hover {
  background: var(--gw-paper-2);
  color: var(--gw-ink);
  border-color: var(--gw-bd-2);
}
:where(.lh-wrap) .lh-shortcut-btn:focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: 2px;
}

/* Section blocks — Required, Optional, Trend, History each
   live in their own .lh-section. Section header uses the
   wireframe .panel h2 treatment (border-bottom + h-meta). */
:where(.lh-wrap) .lh-section {
  background: var(--gw-paper);
  border: 1px solid var(--gw-bd);
  padding: 18px 20px;
  margin-bottom: 14px;
  border-radius: var(--gw-r-lg);
  box-shadow: var(--gw-shadow-1);
}
:where(.lh-wrap) .lh-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--gw-ink);
  border-bottom: 1px solid var(--gw-bd);
  padding-bottom: 8px;
}
:where(.lh-wrap) .lh-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--gw-ink);
  letter-spacing: -0.005em;
}
:where(.lh-wrap) .lh-section-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
:where(.lh-wrap) .lh-section-chips:empty {
  display: none;
}
:where(.lh-wrap) .lh-chip {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--gw-font);
  background: var(--gw-paper-2);
  color: var(--gw-ink-2);
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-pill);
  cursor: pointer;
  min-height: 26px;
  letter-spacing: 0.02em;
  transition: background var(--gw-t), color var(--gw-t),
              border-color var(--gw-t);
}
:where(.lh-wrap) .lh-chip:hover {
  background: var(--gw-bd);
  color: var(--gw-ink);
}
:where(.lh-wrap) .lh-chip.lh-chip-active {
  background: var(--gw-brand);
  color: #fff;
  border-color: var(--gw-brand);
}
:where(.lh-wrap) .lh-chip:focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: 2px;
}
/* Card hidden by chip filter — preserves DOM order on chip toggle */
:where(.lh-wrap) .lh-card-hidden {
  display: none !important;
}
:where(.lh-wrap) .lh-section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}
:where(.lh-wrap) .lh-section-cards:not(:has(> anvil-dropzone > *)) {
  display: none;
}

/* "+ Assign optional test" CTA (admin-view-other-staff only).
   Sits in the Optional section header when there are rows; rendered
   inside the empty state when the accordion is empty. Hidden in
   self-view via display:none default. Brand-filled to match the
   catalog's primary Assign button. */
:where(.lh-wrap) .lh-assign-optional-btn {
  display: none;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--gw-font);
  background: var(--gw-brand);
  color: #fff;
  border: 1px solid var(--gw-brand);
  border-radius: var(--gw-r-sm);
  cursor: pointer;
  min-height: 32px;
  transition: background var(--gw-t), border-color var(--gw-t);
  white-space: nowrap;
}
:where(.lh-wrap) .lh-assign-optional-btn.lh-visible {
  display: inline-flex;
  align-items: center;
}
:where(.lh-wrap) .lh-assign-optional-btn:hover {
  background: var(--gw-brand-d);
  border-color: var(--gw-brand-d);
}
:where(.lh-wrap) .lh-assign-optional-btn:focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: 2px;
}

/* Empty-state copy per UX §F-T02 — JS toggles visibility */
:where(.lh-wrap) .lh-empty {
  display: none;
  padding: 18px 20px;
  background: var(--gw-paper-2);
  border: 1px dashed var(--gw-bd);
  border-radius: var(--gw-r-md);
  color: var(--gw-ink-2);
  font-size: 13px;
  line-height: 1.5;
}
:where(.lh-wrap) .lh-empty.lh-visible {
  display: block;
}
:where(.lh-wrap) .lh-empty.lh-happy {
  background: var(--gw-success-pale);
  color: var(--gw-success);
  border-color: var(--gw-success);
  border-style: solid;
}

/* Collapsible Trend + History panels — same .lh-section
   shell, but the body collapses. Header reuses section title
   treatment so the visual rhythm stays. */
:where(.lh-wrap) .lh-collapsible {
  background: var(--gw-paper);
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--gw-shadow-1);
}
:where(.lh-wrap) .lh-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  background: var(--gw-paper);
  border: none;
  width: 100%;
  color: var(--gw-ink);
  font-family: var(--gw-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: left;
}
:where(.lh-wrap) .lh-collapsible-header:hover {
  background: var(--gw-paper-2);
}
:where(.lh-wrap) .lh-collapsible-header:focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: -2px;
}
:where(.lh-wrap) .lh-collapsible-chevron {
  font-size: 18px;
  color: var(--gw-mute);
  transition: transform var(--gw-t);
}
:where(.lh-wrap) .lh-collapsible[data-open="true"] .lh-collapsible-chevron {
  transform: rotate(180deg);
}
:where(.lh-wrap) .lh-collapsible-body {
  padding: 14px 20px;
  border-top: 1px solid var(--gw-bd);
}
:where(.lh-wrap) .lh-collapsible[data-open="false"] .lh-collapsible-body {
  display: none;
}

/* Zero-home state */
:where(.lh-wrap) .lh-zero-home {
  display: none;
  padding: 32px 24px;
  background: var(--gw-paper);
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-lg);
  text-align: center;
  color: var(--gw-ink-2);
  font-size: 14px;
  line-height: 1.5;
}
:where(.lh-wrap) .lh-zero-home.lh-visible {
  display: block;
}
:where(.lh-wrap) .lh-mainwrap.lh-zero {
  display: none;
}

/* Paint gate — root carries .lh-not-ready until the first
   learnerhomeApplyStats / learnerhomeApplyZeroHome call finishes
   its writes. Keeps mainwrap + zero-home invisible (layout still
   computes so geometry locks above apply) so the user never sees
   the empty-placeholder state of the welcome card before the
   name / stats / access entries land. */
.lh-wrap.lh-not-ready .lh-mainwrap,
.lh-wrap.lh-not-ready .lh-zero-home {
  visibility: hidden;
}

@media (max-width: 700px) {
  :where(.lh-wrap) .lh-profile-header {
    align-items: flex-start;
  }
  :where(.lh-wrap) .lh-profile-header .lh-info {
    order: 2;
  }
  :where(.lh-wrap) .lh-stats-row {
    gap: 8px;
  }
  :where(.lh-wrap) .lh-stat-block {
    min-width: 78px;
    padding: 8px 10px;
  }
}