/* ===========================================================================
   Summoner design system, ported from the app.
   Every value here has a counterpart in app/src/main/java/.../ui/theme/:
     colours  Color.kt      type  Type.kt
     radii    Shape.kt      space Spacing.kt
   Change it there first, then mirror it here. Nothing on the site should
   invent a colour, a radius or a text size that the app does not have.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- accent -------------------------------------------------- Color.kt */
  --orange: #FF7A45;            /* WarmAccent - primary, dark theme */
  --orange-glow: #FF7A4555;
  --orange-dim: #FF7A4522;
  --orange-hover: #FF9268;

  /* --- warm neutrals ------------------------------------------- Color.kt */
  --bg: #12100F;                /* WarmBackground */
  --bg2: #181514;               /* WarmNav */
  --bg3: #1E1A18;               /* WarmSurface */
  --surface: #1E1A18;           /* WarmSurface     cards, sheets, fields */
  --surface-2: #2A2422;         /* WarmSurfaceVariant  chips, bubbles */
  --border: #3A302B;            /* WarmOutline */
  --divider: #241F1D;           /* WarmDivider */

  /* --- text ladder --------------------------------------------- Color.kt */
  --text: #F5F1ED;              /* WarmOnBackground  primary */
  --muted: #A79D96;             /* WarmOnSurfaceVar  secondary */
  --dim: #8C817A;               /* WarmDim           placeholders */
  --faint: #6E645E;             /* WarmFaint         timestamps */

  /* --- functional. one green, one red -------------------------- Color.kt */
  --green: #4ACF57;             /* SummonGreen - live */
  --green-hover: #66DE72;
  --danger: #C4574A;            /* DangerRed - destructive */

  --font-body: 'DM Sans', sans-serif;

  /* --- radii ---------------------------------------------------- Shape.kt */
  --r-xs: 10px;                 /* chips, badges */
  --r-s: 14px;                  /* inline tags, small tiles */
  --r-m: 20px;                  /* fields, list tiles */
  --r-l: 24px;                  /* cards */
  --r-xl: 28px;                 /* sheets */
  --r-pill: 100px;              /* buttons and avatars are fully round */

  /* --- spacing ------------------------------------------------ Spacing.kt */
  --sp-xs: 4px;  --sp-s: 8px;  --sp-m: 12px;
  --sp-l: 16px;  --sp-xl: 24px; --sp-xxl: 32px;
  --touch: 48px;                /* nothing interactive ships smaller */

  /* Header, footer and page content share one measure so the wordmark lines
     up with the first line of body copy on every page. */
  --page-max: 1040px;
}

html { scroll-behavior: smooth; }

/* Keyboard focus is visible on everything, in the accent, offset so it reads
   against a card edge. Mouse clicks never draw it. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* The app's surfaces have a faint grain. One fixed layer, never interactive. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 9999;
}

/* ---------------------------------------------------------------------------
   TYPE. Mirrors Typography in Type.kt exactly. Use these classes rather than
   setting font-size inline - the app has ~300 hardcoded sizes and that is the
   mistake this scale exists to stop repeating.
   --------------------------------------------------------------------------- */
.t-wordmark { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -1px; }
.t-display  { font-size: clamp(38px, 9vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; }
.t-h1       { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.4px; }
.t-h2       { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.4px; }
.t-h3       { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.3px; }
.t-title-l  { font-size: 20px; line-height: 25px; font-weight: 700; }
.t-title-m  { font-size: 17px; line-height: 22px; font-weight: 700; }
.t-title-s  { font-size: 15px; line-height: 20px; font-weight: 700; }
.t-body-l   { font-size: 15px; line-height: 22px; font-weight: 400; }
.t-body-m   { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-body-s   { font-size: 13px; line-height: 18px; font-weight: 400; }
.t-label-l  { font-size: 16px; line-height: 20px; font-weight: 700; }
.t-label-s  { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; }

.c-text  { color: var(--text); }
.c-muted { color: var(--muted); }
.c-dim   { color: var(--dim); }
.c-faint { color: var(--faint); }
.c-accent{ color: var(--orange); }
.c-live  { color: var(--green); }

/* Section heading above a list. bodySmall bold, secondary - never a rule line. */
.group-label {
  font-size: 13px; line-height: 18px; font-weight: 700;
  color: var(--muted);
  margin: var(--sp-m) 0 var(--sp-s);
}

/* ---------------------------------------------------------------------------
   WORDMARK + BADGE
   --------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: var(--sp-s); text-decoration: none; }
.logo-icon { width: 20px; height: auto; flex-shrink: 0; }
.logo-text { font-size: 18px; font-weight: 700; color: var(--orange); letter-spacing: -0.6px; }

/* Role chips are sentence case in the app, never SHOUTING. This one is the
   exception the app also makes: a status label, so labelSmall caps. */
.badge {
  font-size: 12px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.badge--live { color: var(--green); border-color: transparent; background: rgba(74,207,87,.16); }

/* ---------------------------------------------------------------------------
   SURFACES
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
}
.card--tile { border-radius: var(--r-m); }
.card-body { padding: 18px; }

.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
}

.divider { border: none; border-top: 1px solid var(--divider); }

/* A list row: 48dp avatar, 14dp gap, 11dp vertical. Same as UserRow.kt. */
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px var(--sp-l);
  text-decoration: none; color: inherit;
}
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--text); }
.row-sub { font-size: 14px; line-height: 20px; color: var(--muted); }
.avatar {
  width: var(--touch); height: var(--touch); flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
}

/* Chip: extraSmall radius, surfaceVariant. Sentence case. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--muted);
  border-radius: var(--r-xs);
  padding: 5px 11px;
  font-size: 13px; font-weight: 500;
}
.chip--live { background: rgba(74,207,87,.14); color: var(--green); font-weight: 700; }
.live-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--green); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   BUTTONS. Fully round, 54px tall, labelLarge. Destructive is demoted to a
   quiet text button - it never gets a filled red slab.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-s);
  min-height: 54px; padding: 0 28px;
  border: none; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 20px;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn--block { display: flex; width: 100%; }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 15px; }

.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-hover); }

.btn--live { background: var(--green); color: var(--bg); }
.btn--live:hover { background: var(--green-hover); }

.btn--outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn--outline:hover { border-color: var(--muted); }

.btn--quiet { background: transparent; color: var(--muted); min-height: var(--touch); }
.btn--quiet:hover { color: var(--text); }
.btn--danger { background: transparent; color: var(--danger); min-height: var(--touch); }

/* ---------------------------------------------------------------------------
   FIELDS. Filled, medium radius, no floating labels - the label sits above.
   Errors are inline text under the field, never a toast.
   --------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-l); }
.field-label {
  display: block;
  font-size: 13px; line-height: 18px; font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: 14px var(--sp-l);
  color: var(--text);
  font-family: var(--font-body); font-size: 15px; line-height: 22px;
  transition: border-color .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--orange);
}
.field-error { color: var(--danger); font-size: 13px; line-height: 18px; margin-top: 6px; }

/* ---------------------------------------------------------------------------
   NAV + FOOTER

   One header and one footer for the whole site. Every page that has chrome
   uses this exact markup; the only page that does not is /summon, which is a
   single card someone opened from a link and has no site to navigate.

   Sticky rather than fixed, so no page has to reserve room for it by guessing
   a top padding.
   --------------------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
}
.site-nav-inner {
  max-width: var(--page-max); margin: 0 auto;
  height: 62px; padding: 0 var(--sp-xl);
  display: flex; align-items: center; gap: var(--sp-m);
}
.site-nav .logo-text { font-size: 20px; letter-spacing: -0.8px; }
.nav-spacer { flex: 1; }
.nav-links { display: flex; gap: var(--sp-l); }
.nav-links a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

.site-footer { border-top: 1px solid var(--divider); }
.site-footer-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--sp-xxl) var(--sp-xl);
  display: flex; align-items: center; gap: var(--sp-l); flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 2px; }
.site-footer .logo-text { font-size: 15px; }
.footer-copy { font-size: 12px; line-height: 16px; color: var(--faint); }
.footer-links { display: flex; gap: var(--sp-l); flex: 1; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--text); }
.vaultpoint-credit { font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.vaultpoint-credit .vp-name { font-family: 'Playfair Display', serif; color: #fff; }
.vaultpoint-credit a { text-decoration: none; }
.vaultpoint-credit a:hover .vp-name { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   LONG-FORM PAGES (privacy, terms, child safety)
   --------------------------------------------------------------------------- */
/* The nav is sticky, not fixed, so this only needs breathing room - it is not
   clearing anything. */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 56px var(--sp-xl) 96px; }
.page-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--orange); margin-bottom: var(--sp-m);
}
.page-title { font-size: clamp(34px, 7vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.page-meta {
  font-size: 13px; color: var(--faint);
  margin-bottom: var(--sp-xxl); padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--divider);
}
.prose h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); margin: 40px 0 var(--sp-m); }
.prose h3 { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--text); margin: var(--sp-xl) 0 var(--sp-s); }
.prose p { color: var(--muted); font-size: 15px; line-height: 1.7; margin-bottom: var(--sp-m); }
.prose strong { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { color: var(--muted); font-size: 15px; line-height: 1.7; padding-left: 20px; margin-bottom: var(--sp-m); }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--orange); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* Was a left-bordered callout. The app has no such thing - a set-apart block
   is a card, so this is one. */
.info-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: var(--sp-l) 18px;
  margin: var(--sp-l) 0;
}
.info-box p { margin: 0; font-size: 14px; line-height: 20px; }

/* ---------------------------------------------------------------------------
   MODAL. The app replaced its dialogs with bottom sheets, so this rises from
   the bottom on a phone and centres on a desktop.
   --------------------------------------------------------------------------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: var(--sp-xl);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
  max-width: 380px; width: 100%;
}
.modal-actions { display: flex; flex-direction: column; gap: var(--sp-s); margin-top: var(--sp-xl); }

@media (max-width: 600px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: none;
    padding: var(--sp-xl) var(--sp-xl) var(--sp-xxl);
  }
}

@media (max-width: 768px) {
  .site-nav-inner { padding: 0 var(--sp-l); }
  /* Section links go; the one route off the page that always matters stays. */
  .nav-links a:not(.keep) { display: none; }
  .site-footer-inner { padding: var(--sp-xl) var(--sp-l); gap: var(--sp-m); }
  .page-wrap { padding: 40px var(--sp-l) 64px; }
}