/* FleetHook — onboarding + help styles.
 *
 * Everything the setup checklist, the help reference and the inline "?" markers
 * need lives in this one file, and only welcome.html, help.html and the pages
 * carrying "?" markers link it. That is deliberate: this whole feature is meant
 * to be removable by deleting files, and folding these rules into styles.css
 * would have made removal a surgery instead of a delete.
 *
 * Colours come from the variables styles.css already defines, so this file
 * inherits both themes for free and has no hard-coded palette of its own —
 * except the two amber/green accents below, which exist nowhere else.
 */

:root {
  --ob-done: #34d399;
  --ob-next: #ffb020;
}

/* --------------------------------------------------------------- checklist -- */

.ob-intro {
  max-width: 60ch;
  color: var(--color-text-muted, #9aa7bd);
  line-height: 1.6;
  margin-bottom: var(--space-5, 1.25rem);
}

.ob-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-5, 1.25rem);
  flex-wrap: wrap;
}

.ob-bar {
  flex: 1 1 220px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.ob-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ob-done);
  transition: width 0.35s ease;
}

.ob-bar-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint, #6f7d94);
  white-space: nowrap;
}

.ob-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  background: var(--color-surface-2, rgba(255, 255, 255, 0.03));
}

/* The one step to do next is the only thing on the page asking for attention.
   Marking every incomplete step would be the same as marking none. */
.ob-step.is-next {
  border-color: rgba(255, 176, 32, 0.5);
  background: rgba(255, 176, 32, 0.07);
}

.ob-step.is-done {
  opacity: 0.72;
}

.ob-tick {
  grid-row: 1 / span 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 800;
  border: 2px solid var(--color-border, rgba(255, 255, 255, 0.18));
  color: var(--color-text-faint, #6f7d94);
  background: transparent;
}

.ob-step.is-done .ob-tick {
  border-color: var(--ob-done);
  background: var(--ob-done);
  color: #04301f;
}

.ob-step.is-next .ob-tick {
  border-color: var(--ob-next);
  color: var(--ob-next);
}

.ob-step h3 {
  margin: 0 0 0.25rem;
  font-size: var(--text-base, 1rem);
  line-height: 1.35;
}

.ob-step.is-done h3 {
  text-decoration: line-through;
  text-decoration-color: rgba(52, 211, 153, 0.55);
  text-decoration-thickness: 2px;
}

.ob-why,
.ob-note,
.ob-donewhen {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: var(--color-text-muted, #9aa7bd);
}

.ob-note {
  margin-top: 0.5rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-faint, #6f7d94);
}

.ob-donewhen {
  margin-top: 0.5rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-faint, #6f7d94);
}

.ob-step-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Collapsed by default so four steps read as a short list rather than an essay.
   The <summary> is the step title, so the whole row stays keyboard-reachable. */
.ob-step details > summary {
  cursor: pointer;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-faint, #6f7d94);
  list-style: none;
  padding: 0.25rem 0;
}

.ob-step details > summary::-webkit-details-marker { display: none }
.ob-step details > summary::before { content: '▸ '; }
.ob-step details[open] > summary::before { content: '▾ '; }
.ob-step details > summary:hover { color: var(--color-text, #e8edf5) }

/* ------------------------------------------------------------------- fork -- */

.ob-fork {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--space-4, 1rem);
}

.ob-fork-option {
  text-align: left;
  padding: 1rem 1.125rem;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: var(--color-surface-2, rgba(255, 255, 255, 0.03));
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ob-fork-option:hover,
.ob-fork-option:focus-visible {
  border-color: rgba(255, 176, 32, 0.6);
  background: rgba(255, 176, 32, 0.07);
}

.ob-fork-option[aria-pressed='true'] {
  border-color: var(--ob-next);
  background: rgba(255, 176, 32, 0.12);
}

.ob-fork-option strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--text-base, 1rem);
}

.ob-fork-option span {
  display: block;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-muted, #9aa7bd);
}

.ob-mode-line {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #9aa7bd);
}

/* -------------------------------------------------------------- chapter 2 -- */

.ob-later {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ob-later-card {
  padding: 1rem 1.125rem;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  background: var(--color-surface-2, rgba(255, 255, 255, 0.03));
}

.ob-later-card h4 {
  margin: 0 0 0.375rem;
  font-size: var(--text-sm, 0.875rem);
}

.ob-later-card p {
  margin: 0 0 0.75rem;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: var(--color-text-muted, #9aa7bd);
}

/* ------------------------------------------------- dashboard summary card -- */

.ob-card {
  padding: 1rem 1.125rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 176, 32, 0.4);
  background: rgba(255, 176, 32, 0.07);
  display: grid;
  gap: 0.625rem;
}

.ob-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ob-card-head strong {
  font-size: var(--text-base, 1rem);
}

.ob-card-head .ob-bar-label {
  margin-left: auto;
}

.ob-card-next {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-muted, #9aa7bd);
}

.ob-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------- help -- */

.ob-search {
  width: 100%;
  max-width: 420px;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.14));
  background: var(--color-surface-2, rgba(255, 255, 255, 0.04));
  color: var(--color-text, #e8edf5);
  font: inherit;
}

.ob-help-list {
  display: grid;
  gap: 0.625rem;
}

.ob-help-entry {
  padding: 1rem 1.125rem;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  background: var(--color-surface-2, rgba(255, 255, 255, 0.03));
  scroll-margin-top: 90px;
}

.ob-help-entry h3 {
  margin: 0 0 0.375rem;
  font-size: var(--text-base, 1rem);
}

.ob-help-entry p {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
  color: var(--color-text-muted, #9aa7bd);
}

.ob-help-entry .ob-aka {
  margin-top: 0.5rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-faint, #6f7d94);
}

/* Deep-linked entry, so /help.html#vsf-number visibly lands on the right one. */
.ob-help-entry:target {
  border-color: var(--ob-next);
  background: rgba(255, 176, 32, 0.09);
}

.ob-permalink {
  float: right;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-faint, #6f7d94);
  text-decoration: none;
}

.ob-permalink:hover { color: var(--ob-next) }

/* -------------------------------------------------------- inline ? marker -- */

/* An 18px circle beside a label that a person could reasonably read twice and
   still not know what to type. It is a link to help.html#id, not a tooltip:
   a tooltip cannot be searched, bookmarked or read on a phone in a truck. */
.ob-help-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 0.375rem;
  border-radius: 50%;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.28));
  color: var(--color-text-faint, #6f7d94);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  flex: none;
}

.ob-help-dot:hover,
.ob-help-dot:focus-visible {
  border-color: var(--ob-next);
  color: var(--ob-next);
}