@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* Shared design system and controls for the account pages.
 *
 * Served from /assets rather than inlined into each page: seven pages carrying
 * the same tokens is seven places to edit when a colour changes. The CSP allows
 * style-src 'self' plus the Google Fonts host, so both this sheet and the
 * @import above load — it is *scripts* that are nonce-gated, because those are
 * what can execute.
 *
 * The tokens are the landing page's: near-black canvas, white display type at
 * ‑5% tracking, one blue signal colour used only for links and focus, pill
 * buttons, and a gradient spotlight panel as the single piece of atmosphere.
 * The class names are unchanged from the version before it, so the markup on
 * account, settings and admin did not have to move to get the new surface.
 */

:root {
  /* Colour is not here: every hue, surface and shadow in this file comes from
   * /assets/theme.css, which defines both themes at once. What is left is the
   * part of the design that does not change between them — type, radius, motion.
   */

  /* type */
  --display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --cv: "cv01" 1, "cv05" 1, "cv09" 1, "cv11" 1, "ss03" 1, "ss07" 1;

  /* radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 15px;
  --r-xl: 20px; --r-xxl: 30px; --r-pill: 100px; --r-full: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.30;
  letter-spacing: -0.01em; font-feature-settings: var(--cv);
  padding: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.centred { display: grid; place-items: center; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }

/* The blue is a signal colour: links, focus, selection. Never a fill. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--accent-blue), 0 0 0 5px var(--focus-ring);
}

/* ---------------------------------------------------------------- layout ---
 * .auth is the two-up shell: the form on the left, one gradient spotlight
 * panel on the right. Below 900px the panel is dropped rather than stacked —
 * on a phone it would push the form a screen down for no information.
 */
.auth {
  width: min(1120px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch;
}
@media (min-width: 900px) { .auth { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 30px; } }

.card {
  width: min(460px, 100%); background: var(--surface-1);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 34px 32px;
  box-shadow: var(--shadow-1);
}
.auth .card { width: 100%; }
.wide { width: min(1100px, 100%); margin: 0 auto; }

/* --- the gradient spotlight panel ------------------------------------------
 * Colour saturation against the black canvas is what carries elevation here,
 * so it takes no border and no shadow.
 */
.aside {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: 40px; display: none; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(150deg, var(--g-violet) 0%, var(--g-magenta) 52%, var(--g-coral) 100%);
  isolation: isolate;
}
.aside--orange {
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, 0.15), transparent 55%),
    linear-gradient(150deg, var(--g-orange) 0%, var(--g-coral) 62%, var(--g-magenta) 100%);
}
@media (min-width: 900px) { .aside { display: flex; } }

.aside::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(100% 100% at 30% 0%, #000 20%, transparent 75%);
}
.aside__eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.78);
}
.aside__title {
  font-family: var(--display); font-size: clamp(32px, 3.4vw, 52px); font-weight: 500;
  line-height: 1.0; letter-spacing: -0.05em; margin: 26px 0 0; color: #fff;
  text-wrap: balance;
}
.aside__copy { margin: 18px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 17px; line-height: 1.35; max-width: 34ch; }
.aside__figs { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 40px; }
.aside__fig b {
  display: block; font-family: var(--display); font-size: 30px; font-weight: 500;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #fff;
}
.aside__fig span { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.aside__foot { margin-top: 34px; font-size: 13px; color: rgba(255, 255, 255, 0.78); max-width: 40ch; }

/* ------------------------------------------------------------------ type ---*/
.mark {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-size: 16px; letter-spacing: -0.03em; color: var(--ink);
}
.mark span { color: var(--ink-muted); }
/* The same two-bar wordmark the favicon draws: a white rounded square with the
   bars knocked out, built from two gradients so it needs no image request. */
.mark::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: var(--r-sm);
  background-color: var(--primary);
  background-image: linear-gradient(var(--on-primary), var(--on-primary)),
                    linear-gradient(var(--on-primary), var(--on-primary));
  background-repeat: no-repeat;
  background-size: 56% 19%, 34% 19%;
  background-position: 50% 27%, 33% 65%;
}

h1 {
  font-family: var(--display); font-size: 38px; font-weight: 500; line-height: 1.0;
  letter-spacing: -0.05em; margin: 0 0 10px; text-wrap: balance;
}
h2 {
  font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.15;
  letter-spacing: -0.035em; margin: 34px 0 14px;
}
p.sub { color: var(--ink-muted); font-size: 15px; line-height: 1.35; margin: 0 0 26px; }

.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink-muted); margin: 0 0 14px;
}

/* ---------------------------------------------------------------- inputs ---*/
label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin: 18px 0 8px; }

input, select, textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 11px 14px; color: var(--ink);
  font: inherit; font-size: 15px; font-family: var(--sans); outline: none;
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--hairline); box-shadow: 0 0 0 1px var(--accent-blue), 0 0 0 5px var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
select { appearance: none; cursor: pointer; }

/* --------------------------------------------------------------- buttons ---
 * Every action is a pill: white for primary, charcoal for secondary. No
 * bordered ghost buttons, and no square corners.
 */
button {
  border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary);
  border: 1px solid var(--primary); font-family: var(--sans); font-size: 14px;
  font-weight: 500; letter-spacing: -0.01em; padding: 11px 18px; cursor: pointer;
  min-height: 44px; transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
button.block { width: 100%; margin-top: 20px; }
button:hover:not(:disabled) { background: color-mix(in oklab, var(--primary) 92%, var(--ink-muted)); }
button:active:not(:disabled) { transform: scale(0.98); }
button:disabled { opacity: .55; cursor: default; }

button.quiet {
  background: var(--surface-2); color: var(--ink); border-color: var(--hairline);
  font-size: 13px; padding: 9px 15px; min-height: 38px;
}
button.quiet:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
button.danger { background: transparent; color: var(--critical);
  border-color: color-mix(in oklab, var(--critical) 38%, transparent); }
button.danger:hover:not(:disabled) { background: var(--critical-soft); color: var(--critical); }

/* Microsoft sign-in: a charcoal pill, because the primary white pill belongs to
   the form's own submit and two whites would make neither the main path. */
.ms {
  background: var(--surface-2); color: var(--ink); border-color: var(--hairline);
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 0;
}
.ms:hover:not(:disabled) { background: var(--surface-3); }
.ms svg { flex: none; }

.or {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-muted); font-family: var(--sans); font-size: 13px;
  letter-spacing: -0.01em; margin: 24px 0 2px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* -------------------------------------------------------------- messages ---*/
.msg {
  margin-top: 20px; font-size: 14px; line-height: 1.4; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--surface-2); display: none;
}
.msg.on { display: block; }
.msg.bad { color: var(--critical); background: var(--critical-soft);
  border-color: color-mix(in oklab, var(--critical) 38%, transparent); }
.msg.ok { color: var(--good); background: var(--success-soft);
  border-color: color-mix(in oklab, var(--good) 38%, transparent); }
.msg.warn { color: var(--warn); background: var(--warn-soft);
  border-color: color-mix(in oklab, var(--warn) 38%, transparent); }

.note {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hairline-soft);
  color: var(--ink-muted); font-size: 13px; line-height: 1.55;
}
.note a, .foot a, p.sub a, .row a.link { color: var(--accent-blue); }
.note a:hover, .foot a:hover { color: var(--accent-blue); text-decoration: underline; }

.foot { margin-top: 24px; text-align: center; font-size: 13px; color: var(--ink-muted); }
.auth .foot, .wide + .foot { text-align: left; }
.foot a { text-decoration: none; }
.hide { display: none !important; }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row a { font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.row a:hover { color: var(--accent-blue); }

/* Role and status chips live in user-card.css, which every page carrying them
   also links — they belong to the card, not to this page layout. */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 500; color: var(--ink-muted); font-size: 12px;
  letter-spacing: -0.01em; padding: 11px 12px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); }

.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.stack { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

nav.top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 30px; gap: 16px; flex-wrap: wrap;
}
nav.top .links { display: flex; gap: 18px; font-size: 13px; align-items: center; }
nav.top a { color: var(--ink-muted); text-decoration: none; }
nav.top a:hover { color: var(--ink); }

/* The user card that sits in nav.top on these pages is styled by
 * /assets/user-card.css, which every page carrying it links alongside this
 * file. It is separate because the dashboard and the status page want the card
 * and must not inherit this file's page layout — see the note at the top of
 * user-card.css for what that cost when they did.
 */

@media (max-width: 640px) { .hide-sm { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}