/* The reset, the typographic defaults, the page wrapper, and the handful of
   utilities every screen reaches for. Every layout loads every stylesheet, so a
   bare element selector here reaches the public pages and the signed-in screens
   alike; anything only one of the two wants sits on a class instead. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--ground); color: var(--ink-body);
  font-family: var(--sans); font-size: var(--step-0); line-height: 1.5;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* The public pages set text looser than the signed-in screens do, which is the
   design's own distinction between reading and working. It rides on the four
   containers the public chrome draws rather than on body, so a job screen keeps
   its 1.5 and every public page keeps its 1.62. */
.nav, .breadcrumbs, .band, .site-foot { line-height: 1.62; }

/* The rest of what the public pages set differently: headings a step lighter,
   and line breaks the browser is allowed to balance. These name the public
   containers rather than the elements, because a bare h1 would reach the job
   screens too. They live in this file, which loads ahead of chrome.css and
   marketing.css, so a component that sets one of the same properties still
   wins. */
.band h1, .band h2, .band h3 { color: var(--ink); line-height: 1.12; font-weight: 600; text-wrap: balance; }
.band p, .site-foot p { text-wrap: pretty; }
.band strong { font-weight: 600; color: var(--ink); }

h1 { color: var(--ink); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
h2, h3 { margin: 0; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.tnum { font-variant-numeric: tabular-nums; }

/* The page wrapper. A screen that needs a different measure names a variant
   that sets --wrap-max, and pages.css holds the app's four. .wrap-wide is the
   public one: every .wrap on a public page carries it. */
.wrap { width: 100%; max-width: var(--wrap-max, 720px); margin-inline: auto; padding-inline: var(--wrap-pad); }
.wrap-wide { --wrap-max: var(--maxw); --wrap-pad: var(--edge); }

/* A band is one horizontal stripe of a public page. The rule is on a class
   rather than on bare <section> because the app's screens use <section> too,
   for the sign-in panel and the magic-link page, and would inherit the
   rhythm. */
.band { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-line { border: 0; border-top: 1px solid var(--hair); margin: 0; }

.lede { max-width: 60ch; }

/* visually hidden, still read aloud */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* skip link: off-canvas until focused, then flush into the top-left corner */
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); border-radius: 0 0 var(--radius-sm) 0; z-index: 200; }
.skip:focus { left: 0; }

/* ---- the info tip --------------------------------------------------------
   A round button beside a label or beside a cell's value, and the sentence or
   two it holds (app/views/shared/forms/_info_tip.html.erb). It lives here
   rather than in forms.css because both a form and the sheet's table draw it.

   The text is positioned out of the page's flow, so opening it moves nothing:
   a row of boxes keeps its height and a table row keeps its own.

   It appears on hover and on focus with no JavaScript at all; the `is-open`
   class the tip controller toggles is the tap's way in. `visibility` rather
   than `display` is what hides it, so the text stays in the accessibility tree
   for the `aria-describedby` that points at it. */
.tip { position: relative; display: inline-flex; vertical-align: middle; }
.tip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--ink-faint); background: var(--surface);
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700; line-height: 1;
  color: var(--ink-muted); cursor: pointer; padding: 0;
}
.tip-btn:hover { border-color: var(--ink-muted); color: var(--ink-body); }
.tip-text {
  visibility: hidden; position: absolute; z-index: var(--z-header);
  top: calc(100% + 8px); left: -8px; width: max-content; max-width: 280px;
  padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px -18px oklch(0.30 0.05 264 / 0.6);
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  line-height: 1.5; color: var(--ink-body);
  text-transform: none; letter-spacing: normal; text-align: left;
  /* A sentence, wherever it sits: the sheet's number cells set tabular
     figures, which space a list's commas and full stops apart. */
  font-variant-numeric: normal;
}
/* The 8px between the button and the text is bridged by a strip of the text's
   own box, so a pointer travelling from one to the other never crosses a gap
   that belongs to neither and the tip does not close under the customer's
   hand. The strip is part of .tip-text, so it is there only while the text is
   showing, and it draws nothing. */
.tip-text::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
.tip:hover .tip-text,
.tip-btn:focus-visible ~ .tip-text,
.tip.is-open .tip-text { visibility: visible; }
/* Escape hides the text while the button still holds focus, which is what the
   ARIA tooltip pattern asks for. Hovering away or moving focus elsewhere drops
   this again, so the next hover or the next focus shows the text as usual. */
.tip.is-dismissed .tip-text { visibility: hidden; }

/* The label and its tip button sit on one line, and the button rides with the
   label rather than stretching to the row. */
.lbl-row { display: flex; align-items: center; gap: 6px; }