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

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

   The names are semantic, not literal: --ground is the page, --ink is type on
   it. That is what let the whole system move from a dark palette to this one by
   changing values alone.

   public/pencilem/multifamily/index.html carries its own copy of the block
   below so it still renders when opened as a standalone file, and
   scripts/check_tool.py fails the build if the two drift. Change one, change
   both.

   Fonts are self-hosted. The Content-Security-Policy in netlify.toml sets
   font-src 'self', so no CDN can serve them, and Montserrat is not a system
   face on any platform we run on. */

/* Montserrat, SIL Open Font License 1.1. Latin subset only — the pages are
   English and the other subsets are four times the weight for nothing. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/shared/fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/shared/fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/shared/fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/shared/fonts/montserrat-800.woff2") format("woff2");
}

:root {
  --ground:      #F6F7F9;
  --surface:     #FFFFFF;
  --surface-2:   #F1F3F7;
  --surface-3:   #E4E8EF;
  --line:        #D8DEE8;
  --line-soft:   #EBEEF3;
  --ink:         #0A0A0A;
  --ink-2:       #4A4A4A;
  --ink-3:       #6E7480;
  --accent:      #1863DC;
  --accent-ink:  #001A72;
  --accent-soft: #E9F0FD;
  --brass:       #001A72;
  --brass-soft:  #E3E8F5;
  --good:        #0F7A46;
  --good-soft:   #E4F5EC;
  --warn:        #8A5A00;
  --warn-soft:   #FBF0DA;
  --bad:         #C22A1B;
  --bad-soft:    #FDECEA;
  --shadow:      0 1px 2px rgba(16,24,40,.05), 0 16px 36px -16px rgba(16,24,40,.24);

  --display: Montserrat, "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: Montserrat, "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --r: 8px;

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

/* ======================================================== 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: 999px; 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; font-weight: 600; 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: 700;
  letter-spacing: .03em; color: var(--accent-ink);
  background: var(--accent-soft); border-color: var(--accent);
}