/* ============================================================================
   CALIBER Assist page                                   assets/caliber-assist.css

   /caliber/assist/ in the shared page identity (caliber-aura.css tokens and
   buttons, caliber-pages.css shell): charcoal ground, graphite panels, gold
   actions, violet as light, Rajdhani headings, Inter text. Loads after both.
   Only what this page adds: the hero headline, the Download glow, the three
   Fill / Review / Record cards, install steps, troubleshooting, status line.
   ========================================================================= */

/* ------------------------------------------------------------------ hero */
.cp--assist .cp-hero h1 {
  max-width: 15ch;
  letter-spacing: -.005em;          /* Rajdhani set tight: the name reads as one word, not spaced capitals */
  text-wrap: balance;
}
.cp--assist .assist-name { color: var(--nx-gold-bright); letter-spacing: .01em; white-space: nowrap; }
.cp--assist .cp-hero__lead { max-width: 62ch; }
.assist-status, .assist-browsers { margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; }
.cp .assist-browsers { color: var(--ds-ink-3, #9E99A8); }
.cp .assist-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(189, 160, 227, .32); background: rgba(136, 87, 195, .1); color: #DDD3EC; }
.cp .assist-status[hidden] { display: none; }
.assist-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--aura-lavender); box-shadow: 0 0 8px rgba(189, 160, 227, .8); }
.assist-status[data-state="missing"]::before { background: #6E6878; box-shadow: none; }

/* Phones and tablets (caliber-assist-page.js): Assist is desktop only. Lavender information alert, above the headline. */
.assist-desktop-only {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(189, 160, 227, .32);
  border-left: 4px solid var(--aura-lavender);
  border-radius: 10px;
  background: rgba(136, 87, 195, .12);
}
.assist-desktop-only[hidden] { display: none; }
.assist-desktop-only svg { color: var(--aura-lavender); margin-top: 1px; }
.cp .assist-desktop-only p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #E4DDEE; }
.assist-desktop-only strong { display: block; margin-bottom: 4px; color: var(--nx-text); font-size: 16.5px; }
/* on a phone the downloads stay (a link can be sent on), but stop leading the page */
html.assist-on-mobile body .btn.primary.assist-cta { box-shadow: none; border-color: rgba(185, 140, 73, .95) !important; }

/* -------------------------------------------- Download: the page's main action
   The shared gold primary, with a steady violet ring and halo at rest (the same
   light its hover builds up to, held at lower power), so it leads the page
   without turning into neon. Hover/press/focus/disabled come from caliber-aura.css. */
html body .btn.primary.assist-cta {
  min-height: 52px;
  padding: 13px 26px;
  border-color: rgba(189, 160, 227, .7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, .65),
    inset 0 -1px 0 rgba(120, 82, 34, .28),
    0 0 0 1px rgba(var(--cta-lav), .35),
    0 0 18px -2px rgba(var(--cta-violet), .45),
    0 10px 24px -10px rgba(var(--cta-plum), .9);
}

/* -------------------------------------------------- Fill / Review / Record */
.assist-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.assist-flow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(21, 23, 29, .92), rgba(16, 18, 23, .96));
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.assist-flow__card::before {        /* hairline of violet light along the top edge */
  content: "";
  position: absolute;
  left: 22px; right: 22px; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(189, 160, 227, .55), transparent);
}
.assist-flow__n {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 2px solid var(--nx-gold);
  background: #15171D;
  color: var(--nx-gold-bright);
  font: 700 19px/1 var(--font-head);
  box-shadow: 0 0 16px -4px rgba(136, 87, 195, .55);
}
.assist-flow__card h3 { margin: 0 0 8px; font: 700 24px/1.1 var(--font-head) !important; letter-spacing: .01em; color: var(--nx-text); text-transform: none; }
.cp .assist-flow__card p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.assist-flow__card em { color: var(--nx-text); font-style: normal; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .assist-flow__card:hover { border-color: var(--nx-line-2); box-shadow: 0 18px 44px -24px rgba(136, 87, 195, .6); transform: translateY(-2px); }
}

/* ------------------------------------------------------------- install */
.assist-install .cp-process { max-width: 780px; }
.assist-install .cp-step h3 { margin-top: 9px; }
.cp .cp-step p + p { margin-top: 10px; }
.assist-step-action { margin: 16px 0 4px !important; }
.cp--assist code {
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: #15171D;
  color: var(--nx-text);
  font: 500 .88em/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
  overflow-wrap: anywhere;
}
.cp--assist main a.btn { text-decoration: none; }
.cp--assist main a:not(.btn):not(.cp-brand) { color: var(--nx-gold); text-underline-offset: 3px; }
.cp--assist main a:not(.btn):not(.cp-brand):hover { color: var(--nx-gold-bright); }
.cp .assist-note { max-width: 70ch; margin: 6px 0 0; font-size: 14.5px; color: var(--ds-ink-3, #9E99A8); }

/* ------------------------------------------------------- troubleshooting */
.assist-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.assist-faq > div { padding: 18px 20px; border: 1px solid var(--nx-line); border-left: 3px solid var(--aura-violet); border-radius: 10px; background: rgba(21, 23, 29, .7); }
.assist-faq dt { margin: 0 0 6px; font-weight: 600; color: var(--nx-text); }
.assist-faq dd { margin: 0; color: var(--nx-muted); font-size: 15.5px; line-height: 1.65; }
.assist-help .cp-actions { margin-top: 24px; }

.assist-version { color: var(--nx-gold-bright); font-variant-numeric: tabular-nums; }
#assist-update p, .assist-never p { max-width: 75ch; }

/* ------------------------------------------- v99: store install + update state
   caliber-assist-page.js: with a store listing for this browser one "Add to <Browser>"
   button leads (same gold + violet halo as Download) and the zip steps fold into
   "Install manually"; without one the manual steps stay open and the fold's summary
   is not shown. Status pill: up to date (lavender), update ready (gold), update
   required (red), not installed (grey). Browser note (Safari, Firefox before its
   listing) reuses the desktop-only alert. */
.cp--assist main [hidden] { display: none !important; }
.cp .assist-status[data-state="installed"] { border-color: rgba(189, 160, 227, .42); }
.cp .assist-status[data-state="update"] { border-color: rgba(230, 198, 129, .45); background: rgba(230, 198, 129, .08); color: #EFE3C6; }
.assist-status[data-state="update"]::before { background: var(--nx-gold); box-shadow: 0 0 8px rgba(230, 198, 129, .7); }
.cp .assist-status[data-state="outdated"] { border-color: rgba(232, 112, 112, .5); background: rgba(196, 64, 64, .12); color: #F3D6D6; }
.assist-status[data-state="outdated"]::before { background: #E87070; box-shadow: 0 0 8px rgba(232, 112, 112, .75); }
.assist-status-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 0; }
.cp .assist-status-how { font-size: 14.5px; }

.assist-store .cp-process { max-width: 780px; }
.assist-store + .assist-manual { margin-top: 8px; }
.assist-manual > summary { display: none; }                        /* manual steps primary: no fold */
.assist-manual.is-collapsible > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 4px;
  padding: 10px 16px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: rgba(21, 23, 29, .7);
  color: var(--nx-text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.assist-manual.is-collapsible > summary::-webkit-details-marker { display: none; }
.assist-manual.is-collapsible > summary::before {                 /* chevron, turns when open */
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--nx-gold); border-bottom: 2px solid var(--nx-gold);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.assist-manual.is-collapsible[open] > summary::before { transform: rotate(45deg); }
.assist-manual.is-collapsible > summary:hover { border-color: var(--nx-line-2); }
.assist-manual.is-collapsible > summary:focus-visible { outline: 2px solid var(--aura-lavender); outline-offset: 3px; }
.assist-manual.is-collapsible[open] > .cp-lead { margin-top: 16px; }
.assist-update-store { padding: 14px 16px; border: 1px solid var(--nx-line); border-left: 3px solid var(--nx-gold); border-radius: 10px; background: rgba(21, 23, 29, .7); }
.assist-browser-note strong { display: block; }
/* v100: the download-install update steps (remove + Load unpacked) and the unpacked -> store switch note */
.assist-update-steps { max-width: 75ch; margin: 0 0 14px; padding-left: 22px; color: var(--nx-muted); line-height: 1.65; }
.assist-update-steps li { margin: 0 0 4px; }
.cp .assist-status-how#assistSwitchNote { max-width: 75ch; margin: 10px 0 0; color: var(--nx-muted); }

/* v119: Assist is for CALIBER Plus and Pro: the plan note under the hero, and the panel a signed-in account without
   Plus / Pro sees instead of the install steps and downloads (html.assist-locked) */
.cp .assist-plan-note { max-width: 75ch; margin: 12px 0 0; color: var(--nx-muted); font-size: 14px; }
.cp .assist-dl-msg { color: var(--nx-text, #EDE8E3); }
.assist-paywall { padding: 22px 24px; border: 1px solid var(--nx-line); border-left: 3px solid var(--nx-gold); border-radius: 12px; background: rgba(21, 23, 29, .7); }
.assist-paywall h2 { margin-top: 0; }
html.assist-locked #assistHeroActions, html.assist-locked #assistStatus, html.assist-locked #assistStatusAction,
html.assist-locked #assistSwitchNote, html.assist-locked #assistPlanNote, html.assist-locked #install,
html.assist-locked #troubleshooting, html.assist-locked #assist-update { display: none !important; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .assist-flow { grid-template-columns: 1fr; gap: 12px; }
  .assist-flow__card { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 20px; }
  .assist-flow__n { grid-row: span 2; margin: 0; }
  .assist-flow__card h3 { margin-top: 6px; }
  .assist-faq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cp--assist .cp-hero h1 { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.02; max-width: none; }
  html body .btn.primary.assist-cta { width: 100%; }
  .assist-step-action .btn { width: 100%; }
  .cp .assist-status { display: flex; border-radius: 12px; }
  .assist-status-action .btn { width: 100%; }
  .assist-manual.is-collapsible > summary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .assist-flow__card { transition: none; }
  .assist-flow__card:hover { transform: none; }
  .assist-manual.is-collapsible > summary::before { transition: none; }
}

/* ------------------------------------------- v122: one tab per browser (install) */
.assist-btabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.assist-btab {
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--nx-line); background: transparent;
  color: var(--nx-muted); font: 600 15px/1.2 var(--font-body, Inter, system-ui, sans-serif); cursor: pointer;
}
.assist-btab:hover { color: var(--nx-text); border-color: var(--nx-line-2); }
.assist-btab[aria-selected="true"] { color: var(--nx-gold-bright); border-color: var(--nx-gold); background: rgba(226, 190, 81, .08); }
.assist-btab:focus-visible { outline: 2px solid var(--nx-gold); outline-offset: 2px; }
.assist-bpanel[hidden] { display: none !important; }
.assist-bpanel > .assist-note { margin: 0 0 14px; }