/* "All tools" panel (desktop) and "All steps and tools" sheet (phone), drawn by
   lib/all-tools.js. Colours are the cb-design tokens written out, as the rest of
   the hub course panel does: ink #0E2535, muted #5A6B7B, line #D4DAE3, gold
   #C9A84C, gold dark #A8882E, gold tint rgba(201,168,76,0.12). */

/* Rail field. It keeps its height when the rail is too long for a short window. */
.at-find {
  display: flex; flex: none; align-items: center; gap: 8px; box-sizing: border-box; height: 40px;
  margin: 14px 8px 2px; padding: 0 4px 0 11px;
  background: #FFFFFF; border: 1px solid #D4DAE3; border-radius: 8px; color: #5A6B7B;
}
.at-find.is-active { border: 1.5px solid #C9A84C; padding-left: 10.5px; box-shadow: 0 0 0 3px rgba(201,168,76,0.12); }
.at-find .at-ico { flex: none; }
.at-find-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font: 400 14px 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #0E2535;
}
.at-find-input::placeholder { color: #5A6B7B; opacity: 1; }
.at-find-x {
  display: none; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: #5A6B7B; cursor: pointer;
}
.at-find.is-active .at-find-x { display: inline-flex; }
.at-find-x:hover { color: #0E2535; background: #EEF1F5; }
.at-find-x:focus-visible { outline: 2px solid #806B2D; outline-offset: 1px; }

/* Scrim, shared by both modes */
.at-scrim { display: none; position: fixed; z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.at-scrim-panel { display: block; top: 60px; left: 264px; right: 0; bottom: 0; background: rgba(14,37,53,0.32); }
.at-scrim-sheet { display: block; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14,37,53,0.45); }
.at-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Desktop panel */
.at-panel {
  display: none; flex-direction: column; position: fixed; z-index: 901; top: 60px; left: 264px; bottom: 0;
  width: 760px; max-width: calc(100vw - 264px); box-sizing: border-box;
  background: #FFFFFF; border-right: 1px solid #D4DAE3; box-shadow: 0 8px 32px rgba(5,28,44,0.14);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #0E2535;
  opacity: 0; transform: translateX(-12px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.at-panel.is-mounted { display: flex; }
.at-panel.is-open { opacity: 1; transform: none; }
.at-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 28px 32px 18px; border-bottom: 1px solid #EEF1F5; }
.at-panel-title { margin: 0; font: 700 22px/1.2 'Libre Baskerville', Georgia, serif; color: #0E2535; letter-spacing: -0.01em; }
.at-panel-meta { font-size: 13px; color: #5A6B7B; font-variant-numeric: tabular-nums; white-space: nowrap; }
.at-panel-body { flex: 1; overflow-y: auto; padding: 20px 32px 32px; }
/* Columns sit inside the scroller: on the scroller itself they spill sideways. */
.at-panel-cols { column-count: 2; column-gap: 32px; }
.at-panel .at-step { break-inside: avoid; padding-bottom: 14px; }
/* Step 5's tests run on into the second column, firm by firm, so all seven
   steps fit at 1440 x 900. */
.at-panel .at-step:has(.at-firm) { break-inside: auto; }
.at-panel .at-firm { break-after: avoid; }
.at-panel .at-step-h { gap: 10px; padding: 6px 0; }
.at-panel .at-num { width: 20px; height: 20px; font-size: 11px; }
.at-panel .at-step-name { font-size: 14px; font-weight: 700; }
.at-panel .at-step-meta { font-size: 12px; }
.at-panel .at-tool { padding: 4px 0 4px 30px; font-size: 13.5px; line-height: 1.4; }
.at-panel .at-empty { column-span: all; }

/* Shared list rows */
.at-step { display: block; }
.at-step-h, .at-tool {
  display: flex; align-items: center; width: 100%; box-sizing: border-box; margin: 0;
  background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: #0E2535;
}
.at-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 50%; border: 1px solid #D4DAE3; background: #FFFFFF;
  font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; color: #5A6B7B;
}
.at-step-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-step-meta { color: #5A6B7B; font-variant-numeric: tabular-nums; }
.at-chev { flex: none; color: #94A3B8; }
.at-step-h:hover .at-step-name, .at-tool:hover { color: #A8882E; }
.at-step-h:hover .at-chev { color: #A8882E; }
.at-step-h:focus-visible, .at-tool:focus-visible { outline: 2px solid #806B2D; outline-offset: 2px; border-radius: 4px; }
.at-tool-locked { color: #94A3B8; cursor: default; }
/* Step 5's firm labels over its tests */
.at-firm { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5A6B7B; }
.at-panel .at-firm { margin: 6px 0 0; padding-left: 30px; }
.at-sheet .at-firm { padding-left: 34px; }
.at-tool-locked:hover { color: #94A3B8; }
.at-soon { margin-left: 6px; font-size: 11px; font-weight: 600; color: #94A3B8; }
.at-empty { margin: 8px 0; font-size: 14px; color: #5A6B7B; }

/* Phone sheet: up to 72px from the top, stopping above the tab bar */
.at-sheet {
  display: none; flex-direction: column; position: fixed; z-index: 901; left: 0; right: 0; top: 72px; bottom: 0;
  background: #FFFFFF; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(5,28,44,0.14);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #0E2535;
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.at-sheet.is-mounted { display: flex; }
.at-sheet.is-open { transform: none; }
.at-sheet.is-dragging { transition: none; }
@media (max-width: 640px) {
  .at-sheet, .at-scrim-sheet { bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* The sheet slides up from behind the tab bar, which stays usable. */
  html.at-sheet-open #dashboard .hub-bottom-nav { z-index: 902; }
}
.at-grab { flex: none; display: flex; justify-content: center; align-items: center; height: 20px; touch-action: none; cursor: grab; }
.at-grab span { width: 36px; height: 4px; border-radius: 2px; background: #D4DAE3; }
.at-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px 20px; touch-action: none; }
.at-sheet-title { margin: 0; font: 700 20px/1.2 'Libre Baskerville', Georgia, serif; color: #0E2535; outline: 0; }
.at-sheet-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #0E2535; cursor: pointer;
}
.at-sheet-x:focus-visible { outline: 2px solid #806B2D; outline-offset: -2px; }
.at-sheet-search {
  flex: none; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 44px; margin: 0 16px 4px; padding: 0 12px;
  border: 1px solid #D4DAE3; border-radius: 8px; color: #5A6B7B;
}
.at-sheet-search.has-text { border: 1.5px solid #C9A84C; padding: 0 11.5px; }
.at-sheet-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font: 400 16px 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #0E2535;
}
.at-sheet-input::placeholder { color: #5A6B7B; opacity: 1; }
.at-sheet-count { flex: none; font-size: 13px; color: #5A6B7B; font-variant-numeric: tabular-nums; }
.at-sheet-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 24px; }
.at-phase { margin: 16px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5A6B7B; }
.at-sheet .at-step-h { min-height: 52px; gap: 12px; padding: 4px 0; }
.at-sheet .at-num { width: 28px; height: 28px; font-size: 12px; }
.at-sheet .at-step-h.is-current .at-num { border: 2px solid #C9A84C; color: #0E2535; }
.at-sheet .at-step-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.at-sheet .at-step-meta { font-size: 12.5px; line-height: 1.35; }
.at-sheet .at-tool { min-height: 44px; padding: 0 0 0 34px; font-size: 15px; }
.at-mentor { margin-top: 20px; padding: 16px; border-radius: 12px; background: #0E2535; }
.at-mentor-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #C9A84C; }
.at-mentor-body { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #FFFFFF; }
.at-mentor-cta {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 16px;
  border-radius: 6px; background: #C9A84C; color: #0E2535; font-size: 13px; font-weight: 700; text-decoration: none;
}
.at-mentor-cta:hover { background: #A8882E; }
.at-mentor-cta:focus-visible { outline: 2px solid #C9A84C; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .at-scrim, .at-panel, .at-sheet { transition: none; }
}