/* RobotMind family layer. Vendored into every public site by
   packages/brand/sync.mjs; edit this file, never a site's copy.

   A brand sets its own face and accent by overriding the --brand-* variables
   after importing this file. Everything else here is the family resemblance:
   the record line, the neutral ramp, the type scale and the endorsement. */

@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-display: ui-serif, Georgia, serif;
  --brand-text: ui-sans-serif, system-ui, sans-serif;
  --brand-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --brand-accent: #111111;
  --brand-accent-ink: #ffffff;

  --rm-ink: #0b0b0b;
  --rm-ink-2: #4a4a4a;
  --rm-ink-3: #6e6e6e;
  --rm-paper: #fbfbf9;
  --rm-paper-2: #f2f2ee;
  --rm-line: rgb(0 0 0 / 10%);
  --rm-line-strong: rgb(0 0 0 / 20%);

  /* Status is the one colour every brand shares: it is what the record reports. */
  --rm-passed: #1d7a46;
  --rm-held: #9a6205;
  --rm-refused: #b42318;

  --rm-space: 0.25rem;
  --rm-shell: 76rem;
  --rm-gutter: clamp(1rem, 4vw, 2rem);

  /* Fluid scale, 360px to 1440px. The display step is set to be read across a room. */
  --rm-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --rm-step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --rm-step-1: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --rm-step-2: clamp(1.625rem, 1.43rem + 0.83vw, 2.25rem);
  --rm-step-3: clamp(2.25rem, 1.8rem + 1.9vw, 3.75rem);
  --rm-step-4: clamp(3rem, 2.1rem + 3.9vw, 6.5rem);
}

/* A dark brand opts in with data-ground="dark" on <html>. */
:root[data-ground='dark'] {
  --rm-ink: #f4f4f2;
  --rm-ink-2: #b4b4b0;
  --rm-ink-3: #8c8c88;
  --rm-paper: #0a0a0a;
  --rm-paper-2: #131313;
  --rm-line: rgb(255 255 255 / 10%);
  --rm-line-strong: rgb(255 255 255 / 18%);
  --rm-passed: #7dd8a0;
  --rm-held: #f5b544;
  --rm-refused: #ff8a7a;
}

/* The record line: time, actor, act, gate result. The family signature.
   Markup:
   <ol class="rm-record" aria-label="…">
     <li class="rm-record__row" data-state="passed|held|refused|open">
       <time class="rm-record__time">14:18</time>
       <span class="rm-record__actor">agent:billing</span>
       <span class="rm-record__act">stripe.refund 412.00 USD</span>
       <span class="rm-record__gate">held for a person</span>
     </li>
   </ol> */
.rm-record {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--brand-mono);
  font-size: var(--rm-step--1);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--rm-ink);
  border-block: 1px solid var(--rm-line);
}

.rm-record__row {
  display: grid;
  grid-template-columns: 5ch minmax(8ch, 14ch) 1fr auto;
  gap: calc(var(--rm-space) * 4);
  align-items: baseline;
  padding-block: calc(var(--rm-space) * 2.5);
  border-block-end: 1px solid var(--rm-line);
}

.rm-record__row:last-child {
  border-block-end: 0;
}

.rm-record__time,
.rm-record__actor {
  color: var(--rm-ink-3);
}

.rm-record__act {
  overflow-wrap: anywhere;
}

.rm-record__gate {
  color: var(--rm-ink-2);
  white-space: nowrap;
}

.rm-record__gate::before {
  content: '';
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.1em;
}

.rm-record__row[data-state='passed'] .rm-record__gate { color: var(--rm-passed); }
.rm-record__row[data-state='held'] .rm-record__gate { color: var(--rm-held); }
.rm-record__row[data-state='refused'] .rm-record__gate { color: var(--rm-refused); }
.rm-record__row[data-state='open'] .rm-record__gate::before { background: var(--brand-accent); }

@media (max-width: 40rem) {
  .rm-record__row {
    grid-template-columns: 5ch 1fr;
    row-gap: var(--rm-space);
  }
  .rm-record__act,
  .rm-record__gate {
    grid-column: 2;
  }
}

/* The endorsement. Every product footer ends with it, set the same way. */
.rm-endorsement {
  font-family: var(--brand-mono);
  font-size: var(--rm-step--1);
  letter-spacing: 0.02em;
  color: var(--rm-ink-3);
}

.rm-endorsement a {
  color: inherit;
  text-underline-offset: 0.2em;
}