/* app/ui/revops.css · rows PL-06, PL-07 · component rules for the views of Revenue Operations: C-ENTRY (PL-06), the
   set-password view and C-IDENTITY (PL-07).
   Every colour, size, weight, duration and curve is a var() from design/tokens.css (served first as /assets/tokens.css).
   No local custom property, no colour literal (test/PL-06 and test/PL-03 read this file). */

/* The face: the Desktop's Inter Keystone Latin subset, one file for every weight (DESIGN §3 face; Desktop keystone.css,
   whose unicode-range this copies). Weights 400 to 700 only: no 800 or 900 in this product. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/InterKeystoneLatin.woff2?v=dev") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-read);
  -webkit-font-smoothing: antialiased;
}

/* the top line: the wordmark left; signed in, C-IDENTITY right (DESIGN §4) */
.bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--chrome-h);
  padding-inline: var(--space-5);
}

.wordmark {
  font-size: var(--wordmark-size);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--tr-wordmark);
  line-height: 1;
  color: var(--fg-1);
}

/* the mint full stop after the wordmark and the sign-in title, nowhere else (DESIGN §7); a mark, so it is drawn by CSS
   with empty alternative text and is not part of the accessible name */
.wordmark::after,
.entry-title::after {
  content: "." / "";
  color: var(--wordmark-stop);
}

/* the column: centred across, at most --col-entry wide. Its top is one fixed offset below the bar (four bar heights and
   a gutter, 232 px), never centred on its own height, so every entry-grammar view (email, code, refused) puts its title at the same y and the page does not jump between states (PL-07 eyes-on) */
.entry {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: calc(var(--col-entry) + 2 * var(--space-5));
  margin-inline: auto;
  padding: calc(4 * var(--chrome-h) + var(--space-5)) var(--space-5) var(--space-6);
}

.entry-title {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-display);
  line-height: var(--lh-title);
  font-weight: var(--w-title);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
}

.entry-form { display: flex; flex-direction: column; }

.field { display: flex; flex-direction: column; margin-bottom: var(--space-5); }

.field-label {
  margin-bottom: var(--space-1); /* a 4 px breath between the label and its field */
  font-size: var(--fs-table);
  line-height: var(--lh-table);
  font-weight: var(--w-control);
  color: var(--fg-3);
}

/* boxless underline field: one 1 px rule-strong baseline. Focus never draws a box: the underline becomes a 2 px
   signal-deep line (the 1 px border recoloured plus a 1 px inset line above it, so nothing moves) (DESIGN §5 C-ENTRY) */
.field-input {
  appearance: none;
  width: 100%;
  min-height: var(--target-min);
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: none;
  color: var(--fg-1);
  font: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-table);
  transition: box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}

.field-input:focus { outline: none; }

.field-input:focus-visible {
  border-bottom-color: var(--signal-deep);
  box-shadow: inset 0 -1px 0 var(--signal-deep);
}

/* the error line: one line of ink, its height reserved so filling it moves nothing (PL-07 fills it) */
.entry-error {
  margin: 0 0 var(--space-4);
  min-height: calc(var(--fs-table) * var(--lh-table));
  font-size: var(--fs-table);
  line-height: var(--lh-table);
  font-weight: var(--w-control);
  color: var(--fg-1);
}

/* step 2 (PL-22): the one line saying where the code went, plain text above the code field */
.entry-who {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

/* the one filled ink button */
.entry-button {
  appearance: none;
  width: 100%;
  min-height: var(--target-min);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--fg-1);
  color: var(--fg-on-ink);
  font: inherit;
  font-size: var(--fs-table);
  line-height: var(--lh-table);
  font-weight: var(--w-emph);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}

.entry-button:hover { background: var(--fg-2); }

.entry-button:focus { outline: none; }

.entry-button:focus-visible { box-shadow: var(--focus-ring); }

/* step 2 (PL-22): back to step 1. A text link, ink 3, centred under the button; its box is a full 44 px target */
.entry-again {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  color: var(--fg-3);
  font-size: var(--fs-table);
  line-height: var(--lh-table);
  font-weight: var(--w-control);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}

.entry-again:hover { color: var(--fg-1); }

.entry-again:focus { outline: none; }

.entry-again:focus-visible { box-shadow: var(--focus-ring); }

/* C-IDENTITY (PL-07): the operator's email and Sign out, top right, 12/700 in ink 3, no underline. Sign out is a form
   button whose box is a full 44 px target; it turns ink 1 on hover only, and keyboard focus draws the focus ring */
.identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-inline-end: calc(-1 * var(--space-2)); /* the button's inner pad sits in the gutter, so its text aligns to it */
  font-size: var(--identity-size);
  line-height: var(--lh-caption);
  font-weight: var(--identity-weight);
  color: var(--identity-ink);
}

.identity-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-form { flex: none; display: flex; margin: 0; }

.identity-signout {
  appearance: none;
  min-width: var(--target-min);
  min-height: var(--target-min);
  margin: 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}

.identity-signout:hover { color: var(--fg-1); }

.identity-signout:focus { outline: none; }

.identity-signout:focus-visible { box-shadow: var(--focus-ring); }

.home { flex: 1 0 auto; }

/* reduced motion: the tokens zero every band; transitions are also removed here so nothing animates at all */
@media (prefers-reduced-motion: reduce) {
  .field-input, .entry-button, .identity-signout { transition: none; }
}

/* forced colours: keep the baseline and a visible focus where shadows are dropped */
@media (forced-colors: active) {
  .field-input:focus-visible { border-bottom-width: 2px; }
  .entry-button:focus-visible, .identity-signout:focus-visible { outline: 2px solid; outline-offset: 2px; }
}