/* EMET design tokens — the single source of colour, type, and radius.

   Extracted verbatim from the Pencil’em underwriter so the hub and every tool
   render identically.

   One palette, pinned. There is no light variant and no toggle: the site is
   read on company screens, and a second palette is a second set of contrast
   decisions to keep correct on every page for no one's benefit. Anything that
   needs to be light regardless — the printable pages inside a PDF preview —
   carries its own colours literally and does not read these.

   Local font stacks only — no CDN. */

:root {
  --ground:      #0C1214;
  --surface:     #131B1D;
  --surface-2:   #1A2427;
  --surface-3:   #223034;
  --line:        #29383B;
  --line-soft:   #1F2C2F;
  --ink:         #E3EAEA;
  --ink-2:       #96A8AA;
  --ink-3:       #718587;
  --accent:      #56B4B8;
  --accent-ink:  #7FCACD;
  --accent-soft: #10312F;
  --brass:       #C79A3E;
  --brass-soft:  #2E2513;
  --good:        #4FBE86;
  --good-soft:   #122E22;
  --warn:        #D8A249;
  --warn-soft:   #31260F;
  --bad:         #E2695C;
  --bad-soft:    #351714;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --r: 4px;

  /* Native controls, scrollbars, and form widgets follow the page. */
  color-scheme: dark;
}

/* ======================================================== identity block

   The signed-in agent, top right of the hub and of Pencil'em's home page.
   shared/identity.js builds the markup; this styles it. It lives here rather
   than in each page because there are three copies of the block and they were
   already drifting — a photo, a monogram fallback, and a broken-image path is
   more than is worth maintaining three times.

   Defines no custom properties of its own. The palette check compares every
   custom property declared in this file against Pencil'em's inlined copy, so
   adding one here without adding it there fails the build.

   Pages that use this need `img-src` to allow the Supabase origin — see the
   Content-Security-Policy in netlify.toml.
*/
.who {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  line-height: 1.3; text-decoration: none;
  border-radius: var(--r); padding: 3px 6px; margin-right: -6px;
}
a.who:hover { background: var(--surface-2); }
a.who:hover .who-name { color: var(--ink); }

.who-lines {
  display: flex; flex-direction: column;
  align-items: flex-end; text-align: right; min-width: 0;
}
.who-name { font-size: 12.5px; color: var(--ink-2); }
.who-dre {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: -.01em;
}

/* Both states share a footprint so the masthead does not reflow when a photo
   finishes loading, or when one fails and is swapped for the monogram. */
.who-face {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: block; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--line);
}
.who-mono {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .03em; color: var(--accent-ink);
  background: var(--accent-soft); border-color: var(--accent);
}