/* Hallmark · component: flow bar · genre: modern-minimal · theme: HookOS (docs/DESIGN_DIRECTION.md)
 * states: default · hover · focus · active · done · current · working · reduced-motion
 * The portal's one navigational promise: where you are, what to do next, how to
 * get back. Tokens only — no colour or font is declared here that is not
 * already in portal.css.
 */

/* Whatever a page hands to the topbar stays a direct flex child of the row:
   display: contents means this wrapper draws nothing and lays out nothing. The
   landing ships its own spacer inside this block, and boxing it moved Sign in and
   Create account out of the right corner. */
.topbar-meta { display: contents; }

/* On an app page the block carries status CHIPS — facts, not actions — and with
   them in the row the dashboard topbar needed 467px on a 320px phone. They drop
   out there, and the page head carries them instead. This must never hide the
   landing's block: that one holds the only Sign in and Create account on the
   page, and hiding them cost the signup path on every phone width. */
@media (max-width: 900px) {
  body.has-app-shell .topbar-meta { display: none; }
}

.flowbar-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.flowbar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s-3) var(--s-5);
}

/* ---------- back ---------- */

.flowbar-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex: 0 0 auto;
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.flowbar-back svg { width: 1rem; height: 1rem; }
.flowbar-back:hover { color: var(--ink); background: var(--bg-hover); }
.flowbar-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.flowbar-back:active { color: var(--ink); opacity: .85; }

/* The dashboard is the one page you cannot go back to from. */
.flowbar.is-home .flowbar-back { display: none; }

/* ---------- the five steps ---------- */

.flowbar-steps {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flowbar-step { min-width: 0; }

.flowbar-step > a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  color: var(--faint);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.flowbar-step > a:hover { color: var(--ink); background: var(--bg-hover); }
.flowbar-step > a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.flowbar-step > a:active { opacity: .85; }

.flowbar-dot {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.flowbar-step.is-done > a { color: var(--muted); }
.flowbar-step.is-done .flowbar-dot {
  border-color: transparent;
  background: var(--accent-dim);
  color: var(--accent-hover);
}

.flowbar-step.is-current > a { color: var(--ink); }
.flowbar-step.is-current .flowbar-dot {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

/* Hairline between steps, drawn on the list so it never overlaps a label. */
.flowbar-step + .flowbar-step::before {
  content: "";
  display: inline-block;
  width: var(--s-3);
  height: 1px;
  margin-right: var(--s-1);
  vertical-align: middle;
  background: var(--line-strong);
}

/* ---------- the one next action ---------- */

.flowbar-next {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 1 auto;
  min-width: 0;
}

.flowbar-headline {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.flowbar-next .btn { flex: 0 0 auto; white-space: nowrap; }

.flowbar-live {
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--signal);
  vertical-align: middle;
  animation: flowbar-pulse 1.6s var(--ease-in-out, var(--ease)) infinite;
}
@keyframes flowbar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ---------- narrow ---------- */

/* Five labels do not fit a phone. The rail becomes a position line: the labels
   go, the dots stay, and the sentence plus its button take the full width. */
@media (max-width: 900px) {
  .flowbar {
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-2) var(--s-4);
  }
  .flowbar-steps { order: 2; flex: 1 1 100%; }
  .flowbar-next {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .flowbar-step.is-current .flowbar-name { display: inline; }
  .flowbar-name { display: none; }
  .flowbar-step > a { padding: var(--s-1); }
}

@media (max-width: 380px) {
  .flowbar-next { flex-wrap: wrap; }
  .flowbar-next .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .flowbar-live { animation: none; }
  .flowbar-back,
  .flowbar-step > a { transition-duration: 0ms; }
}