/* Shared Brand Tools chassis — header, account menu, tokens, base. Loaded by
   the hub and every tool so the frame is identical everywhere. */
@font-face {
  font-family: "Akkurat Pro";
  src: url("/fonts/AkkuratPro-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Akkurat Pro";
  src: url("/fonts/AkkuratPro-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manyone";
  src: url("/fonts/Manyone-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --bg: #ffffff;
  --panel: #f5f4f6;        /* Grey 3 */
  --panel-2: #edecef;      /* Grey 2 */
  --border: #dcd9e0;       /* Grey 1 */
  --border-strong: #c3bfcb;
  --text: #0a001b;         /* Manyone Deep Blue */
  --muted: #575167;
  --accent: #200bd1;       /* Manyone Blue */
  --accent-hover: #1a09ab;
  --on-accent: #ffffff;
  /* Used as TEXT (.err, the confidential badges), so this is the readable step of
     the manual's Red, not the Red itself. See --cv-danger below. */
  --danger: #c02015;

  --display-font: "Manyone", "Times New Roman", Georgia, serif;
  --ui-font: "Akkurat Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radius: 8px;

  /* ---- Motion system (additive; used by the Composer, safe for all tools) ---- */
  --mo-fast:   120ms;   /* press, tile tick, dot */
  --mo-quick:  180ms;   /* hover, entrance stagger step */
  --mo-base:   240ms;   /* screen cross-fade, card entrance */
  --mo-slow:   320ms;   /* longer settles */
  --mo-out:    cubic-bezier(.22, .61, .36, 1);   /* decelerate: entrances, screen-in */
  --mo-inout:  cubic-bezier(.45, .05, .35, 1);   /* symmetric: hovers, toggles */
  --mo-in:     cubic-bezier(.4, 0, 1, 1);         /* accelerate: exits */
  --mo-pop:    cubic-bezier(.2, .8, .3, 1.25);    /* the ONE spring, badge only */
  --mo-rise:   8px;     /* card/panel entrance rise */
  --mo-slide:  16px;    /* screen slide offset */
}

/* ============================================================
   BRAND TOOLS VISUAL SYSTEM — the --cv-* tokens (born in the Composer, now shared
   by the hub and the Video Optimizer too; tools opt in via their own stylesheets).
   Motion tokens live in common.css (--mo-*). Change values here.

   THE PALETTE IS THE BRAND MANUAL'S, AND IT IS COOL (Aug 2026). These tokens used
   to be a warm paper set — #f6f4f1 canvas, #6b6459 muted, a near-black ink at
   #14100a — every one of which is brown, under a Deep Blue brand. Manyone Catalyst
   corrected this first; the values below are Catalyst's, taken verbatim so the two
   platforms are one system rather than two interpretations.

   Manual colours are named. Where the interface needs a value the manual does not
   define, it is DERIVED from Deep Blue rather than invented, so the temperature
   holds. Never reach back to a warm value.
   ============================================================ */
:root {
  /* Canvas & surfaces. The ground is Deep Blue at 2% over white: as close to white
     as a surface can get while a white card still visibly sits ON it. */
  --cv-canvas:        #faf9fb;   /* derived: Deep Blue 2% over white */
  --cv-canvas-2:      #f5f4f6;   /* Grey 3 — rails, tool bars */
  --cv-surface:       #ffffff;   /* White */
  --cv-surface-sunk:  #f5f4f6;   /* Grey 3 */

  /* Hairlines. line draws on the page, line-onwhite is a step softer for borders on
     white cards, line-strong holds its own against a tint. */
  --cv-line:          #dcd9e0;   /* Grey 1 */
  --cv-line-strong:   #c3bfcb;   /* derived */
  --cv-line-onwhite:  #edecef;   /* Grey 2 */
  /* The boundary of a form control: the only thing saying where a field is, so it
     clears the 3:1 non-text minimum on white AND on the page. Decorative hairlines
     stay on the lighter steps; this one carries meaning. */
  --cv-line-control:  #8b8698;   /* derived: 3.52 on white, 3.36 on the page */

  /* Ink. Deep Blue with two derived steps down, both keeping the violet cast rather
     than fading to a neutral grey (a page of mid-grey text reads as grey no matter
     what colour the paper is). --cv-muted is for labels and asides only. */
  --cv-ink:           #0a001b;   /* Manyone Deep Blue */
  --cv-ink-2:         #2e2740;   /* derived */
  --cv-muted:         #575167;   /* derived; AAA at 12px on the canvas */

  /* Accent — Manyone Blue over the manual's own blue ramp. */
  --cv-accent:        var(--accent);
  --cv-accent-wash:   #e5e5ff;   /* Blue 3 */
  /* Half a step of Blue 3 over white, for LARGE tinted blocks (the story card): the
     canvas is nearly white now, so a whisper of a tint disappears into it, and full
     Blue 3 across a big panel is too much colour for a working surface. */
  --cv-accent-wash-2: #f2f2ff;   /* derived */
  --cv-accent-line:   #b4b5ff;   /* Blue 2 */
  --cv-accent-tint:   #6f70e9;   /* Blue 1 */

  /* Signals, as PAIRS. The manual's Red and Brown are signal colours measured to be
     SEEN on a dot or a filled control; as text they fail (Red is 3.39:1 on white).
     So -ink is the same hue taken down until it holds AA on white, on its own wash,
     and with white on top. Use -ink for anything anybody has to READ, the plain
     token for a fill or a border. Brown is the attention colour — the old amber
     (#7a5200 / #d9a441) was an invented warm value with no place in the manual. */
  --cv-danger:        #ff4639;   /* Red, fills and marks */
  --cv-danger-ink:    #c02015;   /* derived: 6.07 on white, 5.22 on wash */
  --cv-danger-wash:   #ffe9e7;   /* derived */
  --cv-danger-hover:  #9c1a11;   /* derived, for a filled danger button */
  --cv-warn:          #b26d54;   /* Brown, fills and marks */
  --cv-warn-ink:      #8a4d33;   /* derived: 6.58 on white, 5.63 on wash */
  --cv-warn-wash:     #f6ebe6;   /* derived */
  --cv-warn-line:     #e6d2c9;   /* derived, the wash's own border */

  /* Radius scale */
  /* Brand rule: ALL box corners are 8px (pills/avatars exempt) — same tokens as the
     Events Manager. md/lg once carried 12/16px; collapsed to 8 (Aug 2026, brand alignment). */
  --cv-r-sm:   8px;   --cv-r-md:  8px;   --cv-r-lg:  8px;   --cv-r-pill: 999px;

  /* Elevation, cast from Deep Blue — a warm shadow on a violet-grey page goes muddy.
     e1 carries more weight than the warm one did: the page it lifts a card off is
     nearly white now, so a lighter shadow left white cards with no edge at all. */
  --cv-e0: 0 0 0 1px var(--cv-line);
  --cv-e1: 0 1px 2px rgba(10,0,27,.05), 0 4px 12px rgba(10,0,27,.07);
  --cv-e2: 0 2px 4px rgba(10,0,27,.05), 0 8px 20px rgba(10,0,27,.08);
  --cv-e3: 0 8px 28px rgba(10,0,27,.12), 0 2px 6px rgba(10,0,27,.06);

  /* Spacing rhythm (4px base) */
  --cv-s1: 4px;  --cv-s2: 8px;  --cv-s3: 12px; --cv-s4: 16px;
  --cv-s5: 24px; --cv-s6: 32px; --cv-s7: 48px; --cv-s8: 64px;

  /* Type scale */
  --cv-fs-display:  52px;   --cv-fs-display-xl: clamp(56px, 6.5vw, 84px); /* hub masthead only */
  --cv-fs-h2: 28px;   --cv-fs-lede: 16px;
  --cv-fs-body:     14px;   --cv-fs-eyebrow: 11px;
  --cv-lh-display:  1.02;   --cv-track-eyebrow: .14em;

  /* Chrome offsets (rail sticky math — one place to tune) */
  --cv-chrome-top:    68px;
  --cv-chrome-bottom: 88px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui-font); background: var(--bg); color: var(--text);
  min-height: 100vh; -webkit-font-smoothing: antialiased; font-size: 14px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header (shared across hub + all tools) ---------- */
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--border); }
.topbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.topbar-logo { height: 20px; width: auto; display: block; }
.topbar-title { font-family: var(--display-font); font-style: italic; font-size: 16px; }
.topbar-back { color: var(--muted); text-decoration: none; font-size: 13px; }
.topbar-back:hover { color: var(--accent); }
.topbar-spacer { flex: 1; }

/* ---------- Account menu ---------- */
.user-menu { position: relative; margin-left: 8px; }
.user-avatar {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border-strong); cursor: pointer;
  display: block; flex-shrink: 0; transition: border-color 0.15s;
}
.user-avatar:hover { border-color: var(--accent); }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 14px;
}
.user-popover {
  position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(19, 0, 50, 0.14); padding: 14px 16px; min-width: 240px; z-index: 100;
}
.user-popover-name { font-weight: 700; color: var(--text); font-size: 14px; margin-bottom: 2px; }
.user-popover-email { color: var(--muted); font-size: 12px; margin-bottom: 12px; word-break: break-all; }
.user-popover-actions { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
.user-popover-link { color: var(--accent); text-decoration: none; font-size: 13px; }
.user-popover-link:hover { text-decoration: underline; }

/* ---------- Shared layout + type ---------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 40px 22px 80px; }
.display { font-family: var(--display-font); font-style: italic; font-weight: 400; line-height: 1.05; }
h1.display { font-size: 38px; margin: 0 0 12px; }
h2.display { font-size: 24px; margin: 0; }
.lede { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 56ch; margin: 0; }

/* ---------- Shared buttons ---------- */
.btn-primary, .btn-secondary {
  display: inline-block; font-family: var(--ui-font); font-size: 14px; font-weight: 700;
  padding: 12px 22px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center; transition: background 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  /* The Events Manager / manyone.com button signature: a fully rounded indigo pill with
     the label set in the Manyone display italic. The face carries no bold and a smaller
     x-height than Akkurat, so the label runs a step larger at weight 400, and the pill's
     height comes from the flex row, not from padding. (Pills are exempt from the 8px
     corner rule by design.) */
  font-family: var(--display-font); font-style: italic; font-weight: 400; font-synthesis: none;
  font-size: 15px; line-height: 1; letter-spacing: normal;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 24px; height: 44px; border-radius: 999px;
}
.btn-primary.btn-sm { height: 36px; font-size: 14px; padding: 0 18px; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }
.btn-secondary { background: var(--bg); color: var(--accent); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); }
.link { background: none; border: none; color: var(--accent); cursor: pointer; font-family: var(--ui-font); font-size: 13px; padding: 0; }
.link:hover { text-decoration: underline; }