/* ===============================================================
   Dois Agentes, her side of it.

   The tokens are the landing page's, so the product she buys and the
   product she opens are recognisably the same thing. Two of them carry
   meaning rather than decoration, and the whole screen depends on the
   distinction: --human is what Sofia did, --machine is what the
   Assistant did. The landing page argues that two agents work the same
   day; this screen is the one place that argument has to be true.

   Raised surfaces are hers. Sunk surfaces with a magenta top edge are
   the Assistant's. Do not unify them for tidiness.
   =============================================================== */

:root {
  --paper:      #F3F4F9;
  --raised:     #FFFFFF;
  --sunk:       #ECEEF6;
  --ink:        #15182F;
  --ink-soft:   #454A6B;
  --muted:      #656A87;
  --rule:       #DCDFEC;
  /* --muted carries text on all three surfaces and its worst pairing, on
     --sunk, is 4.57:1. Lightening either token breaks WCAG AA. */

  --human:      #2E30A6;
  --human-lo:   #E6E7F8;
  --machine:    #C4157F;
  --machine-lo: #FBE7F3;
  --wait:       #94640B;
  --wait-lo:    #FBF0D9;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shell: 1080px;
  --gap: clamp(18px, 3.5vw, 40px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #101227;
    --raised:     #1B1E3A;
    --sunk:       #171A33;
    --ink:        #EEEFF7;
    --ink-soft:   #B8BCD6;
    --muted:      #9195B4;
    --rule:       #2C3054;

    --human:      #9FA1FF;
    --human-lo:   #23264F;
    --machine:    #FF6FC4;
    --machine-lo: #3A1130;
    --wait:       #E8B84B;
    --wait-lo:    #332708;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 700;
  line-height: 1.1;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.015em; }
h2 { font-size: 1.15rem; }

a { color: var(--human); }

/* --- chrome ------------------------------------------------- */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px var(--gap);
  border-bottom: 1px solid var(--rule);
  background: var(--raised);
}

.wordmark {
  font-family: var(--display);
  font-size: 1rem;
  font-variation-settings: "wdth" 100, "wght" 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark .two { font-variation-settings: "wdth" 84, "wght" 700; color: var(--machine); }


.shell { max-width: var(--shell); margin: 0 auto; padding: var(--gap); }

.lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 28px; }

/* --- flashes ------------------------------------------------ */

.flash {
  margin: 0 0 22px;
  padding: 12px 16px;
  border-left: 3px solid var(--human);
  background: var(--human-lo);
  color: var(--ink);
  font-size: 0.92rem;
}
.flash.alert { border-left-color: var(--wait); background: var(--wait-lo); }

/* --- her surfaces, raised ----------------------------------- */

.card {
  background: var(--raised);
  border: 1px solid var(--rule);
  padding: 22px;
  margin: 0 0 20px;
}

/* --- its surfaces, sunk, with the edge that means it acted --- */

.machine {
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--machine);
  padding: 22px;
  margin: 0 0 20px;
}

.machine .said {
  /* A heading for screen readers, and not a heading to look at: h2's display
     face and weight would make it shout where it should murmur. */
  font-family: var(--body);
  font-variation-settings: normal;
  line-height: 1.55;
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--machine);
}

/* --- forms -------------------------------------------------- */

label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 5px; }

input[type="text"], input[type="email"], input[type="password"], input[type="file"], select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--raised);
  /* Not --rule. A field's fill matches the card behind it, so the border is
     the only thing marking the control, and --rule against --raised is 1.33:1
     where WCAG wants 3:1. --muted is 5.30:1 on --raised and 4.57:1 on --sunk. */
  border: 1px solid var(--muted);
  border-radius: 0;
}

/* A select has to look like one. The chevron is drawn rather than left to the
   platform, because the platform's own control ignores the border and type
   here, and a field with no affordance reads as a disabled text box. */
select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* In forced-colors, background-image computes to none unless it holds a url(),
   so the drawn chevron vanishes and appearance: none has already taken the
   platform's own away. Hand the control back for the people who need the
   affordance most. */
@media (forced-colors: active) {
  select {
    appearance: auto;
    padding-right: 11px;
  }
}

input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--human);
  outline-offset: 2px;
}

.field { margin-bottom: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover { background: var(--human); border-color: var(--human); }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--muted); }
.btn.quiet:hover { border-color: var(--ink); background: transparent; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }

/* Six fields stacked full width pushed the preview off the screen, and the
   preview is the thing she is here to read. */
.pairs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 20px;
}

/* The remember-me row and the forgot-password link are the two controls that
   would otherwise sit at about 23px. */
.checkline { display: flex; align-items: center; gap: 10px; min-height: 44px;
  text-transform: none; font-size: 0.92rem; color: var(--ink); margin: 0; }
.checkline input { width: auto; min-height: 0; }

.hint { display: block; margin-top: 5px; font-size: 0.82rem; color: var(--muted); }

.errors { margin: 0 0 18px; padding: 14px 16px 14px 32px; border-left: 3px solid var(--wait);
  background: var(--wait-lo); font-size: 0.9rem; }
.errors ul { margin: 0; padding-left: 0; list-style: disc; }

/* --- tables ------------------------------------------------- */

.scroller { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
td.num { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

.missing { color: var(--muted); font-style: italic; }

/* --- states ------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
}
.tag.done { color: var(--human); }
.tag.pending { color: var(--wait); }

.note {
  border-left: 3px solid var(--wait);
  background: var(--wait-lo);
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

.tally { display: flex; gap: 28px; flex-wrap: wrap; margin: 0 0 4px; padding: 0; list-style: none; }
.tally div { font-variant-numeric: tabular-nums; }
.tally b { font-family: var(--display); font-size: 1.5rem; font-variation-settings: "wght" 700; display: block; }
.tally span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }

.empty { color: var(--muted); }

.account { display: flex; align-items: baseline; gap: 18px; font-size: 0.85rem; }
.account span { color: var(--ink-soft); }

/* Visible to screen readers only. Carries the severity of an alert, which
   otherwise reaches a sighted reader through colour alone. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}