/* The chrome around a page, public and signed-in alike: buttons, the two top
   bars, the breadcrumb trail, the footer, and the small marks a page hangs off
   its chrome. Loaded on every screen. */

/* ============ BUTTONS ============ */
/* One button, one size, wherever it is pressed. The transition and the press
   nudge came from the public pages and now apply everywhere; the padding and
   the type size are the app's, because a control's size should not depend on
   which half of the product it sits in. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--step-0); font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; text-align: center; padding: 11px 18px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; background: none;
  transition: background-color 0.15s ease, transform 0.06s ease;
}
.btn:active { transform: translateY(1px); }
/* White text on the ochre, and hover goes darker rather than lighter: navy on
   this ochre measures 2.79:1 against the 4.5:1 minimum. */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); color: #fff; }
.btn-ghost { color: var(--ink); border-color: var(--hair-strong); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn-sm { font-size: var(--step--1); padding: 9px 16px; }
.btn-lg { padding: 12px 22px; }

/* A call to action and the line under it that qualifies the offer. */
.cta-cluster { display: flex; flex-direction: column; gap: var(--s3); }
.cta-note { font-size: 0.9rem; color: var(--ink-muted); max-width: 46ch; }
.cta-note strong { color: var(--ink-body); font-weight: 600; }

/* ============ THE WORDMARK ============ */
/* Both bars carry it, at one size. The public navigation pushes everything
   after it to the right, which is that bar's layout rather than the mark's. */
.wordmark { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.025em; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--ink); text-decoration: none; }

/* ============ SIGNED-IN TOP BAR ============ */
/* The nav is always rendered as <div class="wrap topnav">, so .wrap supplies
   the max width and the inline padding. */
.topbar { border-bottom: 1px solid var(--hair); background: var(--ground); }
.topnav { display: flex; align-items: center; gap: var(--s4); min-height: 52px; flex-wrap: wrap; padding-block: var(--s1); }
.crumb { font-size: var(--step--1); color: var(--ink-muted); min-width: 0; }
.crumb b { color: var(--ink-body); font-weight: 600; }
.topnav .spacer { margin-left: auto; }
/* The bar's quiet destinations. Two of the three are anchors and the third is
   the submit button of the sign-out form, so the rule opens with a button
   reset: a button draws a background, a border, padding, and its own font
   otherwise, and would not look like the link beside it. `font: inherit` comes
   before the two font declarations after it, because the shorthand resets every
   font longhand and would clear them if it came later. */
.quiet-link {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  font-size: var(--step--1); font-weight: 500; color: var(--ink-muted); text-decoration: none;
}
.quiet-link:hover { color: var(--accent-strong); text-decoration: underline; }
/* On its own page the destination renders as text, not a link back to itself,
   so it must not hover-style as one. */
.quiet-link[aria-current]:hover { color: var(--ink-muted); text-decoration: none; }

/* ============ FLASH ============ */
/* One line about what just happened, in a quiet band between the top bar and
   the page. It is a band rather than a toast: it sits in the document, pushes
   the page down, and stays until the next request, so a message cannot time out
   before the customer has read it. The text inside the band sits in a .wrap, so
   it starts on the same left edge as the screen's own content. The hairline
   under the band carries the only color — ochre when the message reports the
   thing the customer asked for, the red when it reports something they have to
   act on.

   .flash .wrap outranks the wrapper variants a screen names, so a flash on the
   failed page keeps this padding rather than taking .page's. */
.flash { background: var(--surface); border-bottom: 1px solid var(--hair); }
.flash .wrap { padding-block: var(--s3); }
.flash p { font-size: var(--step--1); color: var(--ink-body); }
.flash-notice { border-bottom-color: var(--accent); }
.flash-alert { border-bottom-color: var(--warn); }
.flash-alert p { color: var(--warn); }

/* ============ STATE BAR ============ */
/* Four fixed labels, the current step marked, no label renamed per state. No
   Rails view draws it — three integration tests assert its absence — but
   job-processing.html, job-ready.html, and review-i-sheet.html in
   docs/design/app all render it and link this file, so the rules stay until the
   screen that shows a customer where they are is built or those three drop it. */
.statebar { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s3); font-size: var(--step--1); color: var(--ink-faint); }
.statebar .done::before { content: "\2713 "; color: var(--check); font-weight: 700; font-size: 0.8rem; }
.statebar .done { color: var(--ink-muted); }
.statebar a.done { text-decoration: none; }
.statebar a.done:hover { color: var(--accent-strong); text-decoration: underline; }
.statebar [aria-current="step"] { color: var(--ink); font-weight: 600; }

/* ============ PUBLIC TOP NAV ============ */
.nav {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--ground);
  border-bottom: 1px solid var(--hair);
}
.nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); min-height: 64px; padding-block: var(--s2); }
.nav__inner .wordmark { margin-right: auto; }
.navlinks { display: flex; align-items: center; gap: var(--s5); }
.navlinks a { color: var(--ink-body); text-decoration: none; font-size: 0.98rem; font-weight: 500; }
.navlinks a:hover { color: var(--accent-strong); }
.nav .btn { padding: 0.55em 1em; }
@media (max-width: 640px) {
  .nav__inner { gap: var(--s2) var(--s4); min-height: 0; }
  .nav__cta { order: 2; }
  .navlinks {
    order: 3; flex-basis: 100%; justify-content: space-between; gap: var(--s3);
    font-size: 0.9rem; padding-top: var(--s3); border-top: 1px solid var(--hair);
  }
}

/* ============ BREADCRUMBS ============ */
/* Every public page but the homepage shows the catalog's parent chain, walked
   by Marketing::Catalog.ancestry — the same walk the BreadcrumbList in the head
   renders, so the visible trail and the structured data cannot disagree. The
   design file has no breadcrumb component, so these rules are new; they borrow
   the navigation's hairline and the footer's link treatment rather than
   introducing a third. */
.breadcrumbs { border-bottom: 1px solid var(--hair); background: var(--ground); }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  list-style: none; margin: 0; padding: 0; padding-block: var(--s3);
  font-size: var(--step--1);
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--s3); }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-ghost); }
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-strong); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ============ PUBLIC FOOTER ============ */
.site-foot { border-top: 1px solid var(--hair); background: var(--surface); }
.foot { display: grid; gap: var(--s6); padding-block: var(--s8) var(--s6); }
/* A grid at every width, because the design left the stacked columns with no gap
   at all below 760px and the brand paragraph ran straight into the next heading.
   Above 760px the first column is the brand and every column after it is an
   equal share, so the track list is exactly the design's 1.4fr repeat(3, 1fr)
   once the Guides and Company column tickets land, and it caps to the columns
   that exist until then rather than leaving the right half of the page empty. */
.foot__cols { display: grid; gap: var(--s6); }
@media (min-width: 760px) {
  .foot__cols { grid-template-columns: 1.4fr; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.foot__brand p { color: var(--ink-muted); font-size: 0.92rem; margin-top: var(--s3); max-width: 34ch; }
.foot__col h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 var(--s3); font-weight: 600; line-height: 1.2; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.foot__col a { color: var(--ink-body); text-decoration: none; font-size: 0.92rem; }
.foot__col a:hover { color: var(--accent-strong); text-decoration: underline; }
.foot__bottom { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; padding-block: var(--s5); border-top: 1px solid var(--hair); color: var(--ink-muted); font-size: 0.85rem; }
.foot__bottom a { color: var(--ink-muted); }

/* ============ THE DRAFT FLAG ============ */
/* Marks a passage whose wording the founder has not approved. */
.flag {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flag-ink);
  background: var(--flag-bg);
  border: 1px dashed var(--flag-border);
  border-radius: 4px;
  padding: 0.18em 0.5em;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
}
.flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--flag-border); flex: none; }

/* ============ INTRO ============ */
/* .intro's own padding differs per screen and lives with the screen. */
.intro h1 { font-size: var(--step-2); }

/* ============ MOTION ============ */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.enter { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}