/*
 * SIGNARI verifier · design system v7 (July 2026 — "flat modern" redesign)
 *
 * This file is the SINGLE source of truth for typography, color,
 * spacing tokens, and reusable component classes used across every
 * issuer page (login, signup, signup-verify, verify-domain,
 * forgot/reset-password, dashboard).
 *
 * v7 notes: rebuilt from scratch as a flat, modern-minimal SaaS look
 * (Stripe/Linear-adjacent) after several ornamental passes (gradients,
 * wax-seal brand mark, gold double-rule borders, textured/gradient
 * backdrops, serif headlines) didn't land. Everything is now: one
 * solid accent color, plain white/light-gray surfaces, thin single
 * hairline borders, sans-serif type throughout, and no decorative
 * textures or tinted shadows. Every class name from prior versions is
 * preserved so existing markup and dashboard.html keep working
 * unchanged — only the values changed. See assets/DESIGN.md.
 */

/* ====================================================================
   0. Font
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ====================================================================
   1. Design tokens
   ==================================================================== */

:root {
  /* Neutrals — soft warm off-white page (a hint of cream, not a cold
     gray) so the white card still reads as distinct and the whole
     page feels premium rather than sterile. Text is a warm near-black
     ink rather than a cool slate. */
  --color-bg:            #f7f5ef;
  --color-bg-alt:        #efece3;
  --color-surface:       #ffffff;
  --color-surface-2:     #f3f1ea;
  --color-border:        #e5e2d7;
  --color-border-strong: #cfcab8;
  --color-text:          #1a1a1a;
  --color-text-muted:    #5a5a5a;
  --color-text-faint:    #8f8b7f;

  /* Brand — a classy monochrome-first system: primary CTAs are a
     deep near-black (the "ink" of the product), and a subtle
     indigo accent handles links and focus/interactive states only.
     This is the Vercel/Linear/Notion pattern — restrained, editorial,
     and lets typography and spacing carry the visual weight. */
  --color-primary:        #1a1a1a;
  --color-primary-hover:  #000000;
  --color-primary-2:      #4338ca;
  --color-gold:            #4338ca;
  --color-gold-strong:     #3730a3;
  --color-gold-soft:       #eef2ff;
  --brand-gradient:       #1a1a1a;
  --brand-gradient-soft:  #f3f1ea;
  --seal-gradient:        #1a1a1a;

  --color-accent:        #4338ca;
  --color-accent-soft:   #eef2ff;
  --color-positive:      #16a34a;
  --color-positive-soft: #f0fdf4;
  --color-warning:       #d97706;
  --color-warning-soft:  #fffbeb;
  --color-danger:        #dc2626;
  --color-danger-soft:   #fef2f2;

  /* Type scale (1rem = 16px). */
  --fs-display: 2.25rem;     /* 36px */
  --fs-h1:      1.5rem;      /* 24px */
  --fs-h2:      1.1875rem;   /* 19px */
  --fs-h3:      0.9375rem;   /* 15px */
  --fs-body:    0.9375rem;   /* 15px – default */
  --fs-caption: 0.8125rem;   /* 13px */
  --lh-tight:   1.25;
  --lh-snug:    1.4;
  --lh-base:    1.55;

  /* Radii + elevation — modest rounding, flat/subtle shadows only. */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 0.875rem;
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-raised: 0 6px 20px rgba(26, 26, 26, 0.05), 0 1px 2px rgba(26,26,26,0.03);
  --shadow-modal: 0 24px 60px rgba(26, 26, 26, 0.18);
  --ring-focus: 0 0 0 3px rgba(26, 26, 26, 0.10);

  --font-serif: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* ====================================================================
   2. Base typography
   ==================================================================== */

html {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji",
               "Segoe UI Emoji", sans-serif;
  font-size: 16px;
  color: var(--color-text);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg);
}

.font-mono, code, kbd, samp, pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", monospace;
}

/* Sans-serif throughout — hierarchy comes from size/weight, not a
   separate display face. */
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; }
.t-h1      { font-size: var(--fs-h1);      line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.015em; }
.t-h2      { font-size: var(--fs-h2);      line-height: var(--lh-snug);  font-weight: 600; letter-spacing: -0.01em; }
.t-h3      { font-size: var(--fs-h3);      line-height: var(--lh-snug);  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-base); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-base);  color: var(--color-text-faint); }

/* ====================================================================
   3. Brand surfaces
   ==================================================================== */

.brand-gradient { background: var(--color-primary); }

/* A plain flat logomark: rounded-square, solid accent fill, bold
   sans-serif monogram. No ring, no gradient, no shadow — just a
   simple app icon like Linear/Stripe/Notion use. */
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0;
  flex-shrink: 0;
}
.brand-mark-lg { width: 3rem; height: 3rem; font-size: 1.375rem; border-radius: var(--radius-lg); }

/* ====================================================================
   4. Buttons (4 variants: primary, secondary, ghost, danger)
   ==================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .1s ease;
  -webkit-appearance: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.3125rem 0.75rem; font-size: var(--fs-caption); border-radius: var(--radius-sm); }
.btn-lg { padding: 0.6875rem 1.375rem; font-size: 0.9375rem; }

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  border-color: transparent;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s ease, transform .1s ease;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn-primary:disabled {
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-2); border-color: var(--color-text-faint); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }
.btn-ghost:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color .15s ease;
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ====================================================================
   5. Inputs + labels
   ==================================================================== */

.label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: var(--fs-body);
  line-height: 1.4;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-faint); }
.input:hover:not(:focus):not(:disabled), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: var(--color-border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: var(--ring-focus);
}
.input:disabled { background: var(--color-surface-2); color: var(--color-text-faint); }

.textarea { min-height: 4.5rem; resize: vertical; }

.help { font-size: var(--fs-caption); color: var(--color-text-faint); margin-top: 0.25rem; }
.help-error { color: var(--color-danger); }

/* ====================================================================
   6. Cards + sections
   ==================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.card-compact { padding: 1rem; }
.card-flush   { padding: 0; }

.card > * + * { margin-top: 0.75rem; }
.card-stack > * + * { margin-top: 1rem; }

/* ====================================================================
   7. Alert / banner
   ==================================================================== */

.alert {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.alert-info    { background: var(--color-surface-2); border-color: var(--color-border);        color: var(--color-text); }
.alert-success { background: var(--color-positive-soft); border-color: #bfe3cc; color: #14532d; }
.alert-warning { background: var(--color-warning-soft);  border-color: #e6cf98; color: #7a5a17; }
.alert-error   { background: var(--color-danger-soft);   border-color: #e6bcbf; color: #7a2028; }

/* ====================================================================
   8. Tables
   ==================================================================== */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.table thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
.table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background: var(--color-surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-text-faint);
  font-size: var(--fs-body);
}
.empty-state { padding: 1rem 1rem 0.5rem; text-align: center; }
.empty-state-icon {
  width: 3rem; height: 3rem; margin: 0 auto 0.875rem;
  border-radius: 9999px;
  background: var(--brand-gradient-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.empty-state-title { font-size: var(--fs-body); font-weight: 600; color: var(--color-text-muted); }
.empty-state-sub { font-size: var(--fs-caption); color: var(--color-text-faint); margin-top: 0.25rem; }

/* ====================================================================
   9. Dialog / modal
   ==================================================================== */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 1rem;
}
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 28rem;
  width: 100%;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom: 0.5rem; }
.modal-title  { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; color: var(--color-text); margin: 0; }
.modal-subtitle { font-size: var(--fs-caption); color: var(--color-text-faint); margin-top: 0.25rem; }
.modal-body   { font-size: var(--fs-body); color: var(--color-text); }
.modal-footer { margin-top: 1.25rem; display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
.modal-close  {
  background: transparent; border: none; color: var(--color-text-faint);
  cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.modal-close:hover { color: var(--color-text); background: var(--color-surface-2); }

/* ====================================================================
   10. Sidebar / nav
   ==================================================================== */

.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  position: relative;
}
.sidebar-link:hover  { background: var(--color-surface-2); color: var(--color-text); }
.sidebar-link.active { background: var(--color-accent-soft); color: var(--color-primary); font-weight: 600; }
.sidebar-link.active::before {
  content: "";
  position: absolute; left: -0.25rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.25rem; border-radius: 999px;
  background: var(--color-primary);
}

/* ====================================================================
   11. Misc utilities reused by the existing pages
   ==================================================================== */

.dropzone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  background: var(--color-surface-2);
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Certificate template editor — drag-to-position annotation handles
   (Feature A v4). One handle floats over the PDF preview per
   annotation; percentage-positioned so it lines up with the
   server-rendered PDF regardless of the preview's on-screen size. */
.ct-drag-handle {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 0.75rem);
  padding: 0.1rem 0.45rem;
  font-size: 0.6875rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0.3125rem;
  border: 1.5px dashed rgba(79, 70, 229, 0.55);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.14);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ct-drag-handle--auto {
  border-style: dotted;
  border-color: var(--color-border-strong);
  opacity: 0.82;
}
.ct-drag-handle:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
}
.ct-drag-handle--dragging {
  cursor: grabbing;
  border-style: solid;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.22);
  z-index: 5;
}

@keyframes signari-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Status pill (used in tables / inline) */
.pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.pill-neutral  { background: var(--color-surface-2);    color: var(--color-text-muted); border-color: var(--color-border); }
.pill-info     { background: var(--color-accent-soft);  color: var(--color-primary); border-color: #c7d2fe; }
.pill-success  { background: var(--color-positive-soft);color: #14532d; border-color: #bfe3cc; }
.pill-warning  { background: var(--color-warning-soft); color: #7a5a17; border-color: #e6cf98; }
.pill-danger   { background: var(--color-danger-soft);  color: #7a2028; border-color: #e6bcbf; }

/* ====================================================================
   12. Password-policy live-feedback list (shared with reset/profile)
   ==================================================================== */

.pwd-policy {
  list-style: none; padding: 0; margin: 0.5rem 0 0.5rem;
  font-size: var(--fs-caption); color: var(--color-text-faint);
}
.pwd-policy li { margin: 0.1875rem 0; }
.pwd-policy li.met  { color: #14532d; }
.pwd-policy li.fail { color: #7a2028; }
.pwd-mismatch { font-size: var(--fs-caption); color: var(--color-danger); margin-top: 0.25rem; }

/* ====================================================================
   13. Responsive helpers (sidebar / drawer collapse below md)
   ==================================================================== */

:root {
  --sidebar-w: 268px;
}
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar content";
  background: var(--color-bg);
}
/* Light sidebar — a flat white/near-white panel with a single hairline
   border, not a dark contrast panel. Nav items use the accent color
   for their active/hover state instead of relying on a dark backdrop
   for contrast. */
.app-sidebar {
  grid-area: sidebar;
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-right: 1px solid var(--color-border);
}
.app-content { grid-area: content; overflow-y: auto; min-width: 0; }
.app-topbar  { display: none; }
.app-sidebar-backdrop { display: none; }
.app-topbar-btn {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text); padding: 0.375rem 0.625rem; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer;
}

@media (max-width: 767px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .app-topbar {
    grid-area: topbar;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0.625rem 0.875rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
  }
  .app-sidebar {
    position: fixed; inset: 0 30% 0 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform .2s ease;
    width: 70%; max-width: 320px; padding: 1rem;
    border-right: 1px solid var(--color-border);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(17,24,39,0.4); z-index: 55;
  }
  .app-sidebar-backdrop.is-open { display: block; }
}

/* ====================================================================
   14. Auth-card layout (login, signup, signup-verify, verify-domain,
       forgot-password, reset-password) — v8: on narrow viewports this
       is still a single centered card on a flat page. On wide (lg+)
       viewports, a supporting content column (headline + blurb, and
       on some pages a short feature list) sits beside the card so the
       page doesn't feel like a tiny card lost in a sea of empty
       space. This is NOT a hard split panel: same background on both
       sides, no divider line/border, just generous whitespace between
       two balanced columns. The card itself stays a plain white
       surface with one hairline border and a soft flat shadow — same
       language as every other card in the app.
   ==================================================================== */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.25rem;
  background: var(--color-bg);
}

@media (min-width: 1024px) {
  .auth-shell {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    max-width: 64rem;
    margin: 0 auto;
  }
}

/* Supporting content column — shown only at lg+ via the `hidden
   lg:flex` Tailwind utility classes already on the element in every
   auth page's markup; we only add layout/typography here and never
   touch `display` so those utilities stay in full control of when it
   appears. Grouped tightly so wordmark + tagline + headline read as
   one coherent editorial block rather than scattered elements. */
.auth-brand {
  flex-direction: column;
  width: 22rem;
  flex-shrink: 0;
}
.auth-brand-wordmark {
  display: flex; align-items: center; gap: 0.875rem;
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--color-text);
}
.auth-brand-wordmark .brand-mark {
  width: 3.5rem; height: 3.5rem; font-size: 1.5rem; border-radius: var(--radius-lg);
}
.auth-brand-tagline {
  font-size: 0.8125rem; font-weight: 500; color: var(--color-text-faint);
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
}
.auth-brand-headline {
  font-size: 1.875rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--color-text);
  margin-top: 1.75rem;
}
.auth-brand-blurb {
  font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted);
  margin-top: 0.875rem; max-width: 24rem;
}
.auth-feature-list {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.auth-feature-list li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5;
}
.feat-ico {
  flex-shrink: 0; width: 1.375rem; height: 1.375rem; border-radius: 9999px;
  background: var(--color-accent-soft); color: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 0.0625rem;
}
.auth-brand-foot {
  font-size: 0.6875rem; color: var(--color-text-faint);
  margin-top: 2.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-panel {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .auth-panel { width: auto; flex-shrink: 0; }
}

.auth-card {
  width: 100%;
  max-width: 25rem;
  animation: signari-fade-up 0.25s ease both;
}
.auth-card-wide { max-width: 34rem; }

/* Small, plain logo row — a compact square mark + wordmark side by
   side, centered above the card on mobile. Hidden at lg+ since the
   supporting content column already carries the wordmark, so we
   never show the same brand row twice. */
.auth-card-logo {
  display: flex; flex-direction: row; align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}
.auth-card-logo .brand-mark {
  width: 3.5rem; height: 3.5rem; font-size: 1.5rem; border-radius: var(--radius-lg);
}
.auth-card-logo-word {
  font-size: 1.625rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--color-text); line-height: 1.1;
}
.auth-card-logo-tag {
  font-size: 0.75rem; font-weight: 500; color: var(--color-text-faint);
  letter-spacing: 0.02em;
  margin-top: 0.0625rem;
}
@media (min-width: 1024px) {
  .auth-card-logo { display: none; }
}

/* Title + subtitle sit directly above the card as its natural header.
   Centered at mobile (matches the centered logo row), left-aligned on
   desktop to match the editorial left-align of the brand column so
   the two columns feel like one balanced composition. */
.auth-title {
  font-size: 1.5rem; line-height: 1.25; font-weight: 700;
  letter-spacing: -0.02em; color: var(--color-text);
  text-align: center;
}
.auth-subtitle {
  font-size: 0.9375rem; color: var(--color-text-muted);
  margin-top: 0.375rem;
  text-align: center;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .auth-title, .auth-subtitle { text-align: left; }
}

/* Footer link (e.g. "Don't have an account? Create one") — quieter,
   with a hairline divider above so it feels attached to the card
   rather than floating awkwardly below it. */
.auth-footer-line {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}
.auth-footer-line a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.auth-footer-line a:hover { color: var(--color-accent); }

/* Card itself — generous padding, hairline border, subtle shadow.
   The internal .field-stack rule handles field-to-field spacing. */
.auth-card > form.card,
.auth-card > .card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-raised);
  padding: 2rem 2rem 1.5rem;
  margin-top: 1.5rem !important;
}

/* The primary submit button inside an auth card gets a taller, more
   substantial fill so it feels like the anchor of the whole page —
   without changing .btn-primary everywhere else in the app. */
.auth-card .btn-primary {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
}

/* Alert div sits between subtitle and card, and takes an mt-5 utility
   class in the markup so error banners have breathing room when
   visible. When the alert is empty (no error), collapse it so it
   doesn't add dead space between the header and the card. */
.auth-card > #alert:empty {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: block;
}

/* Wide auth cards (multi-step signup, domain verification) render their
   steps directly inside .auth-card-wide rather than a nested .card, so
   give the wide wrapper the same plain-card treatment directly. */
.auth-card-wide {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 2rem 2.25rem 1.75rem;
  margin-top: 1.5rem;
}

.field-stack > * + * { margin-top: 1rem; }

.link-subtle {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
}
.link-subtle:hover { color: var(--color-text); text-decoration: underline; }
.link-accent {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.link-accent:hover { text-decoration: underline; }

/* ====================================================================
   15. Stat / summary cards (dashboard overview tiles)
   ==================================================================== */

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.stat-card-icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient-soft);
  color: var(--color-primary);
}
.stat-card-value { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); line-height: 1.2; }
.stat-card-label { font-size: var(--fs-caption); color: var(--color-text-faint); margin-top: 0.125rem; }

/* Progress step indicator (signup wizard) polish */
.step-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  background: var(--color-surface-2); color: var(--color-text-faint);
  border: 1px solid var(--color-border);
}
.step-pill.active { background: var(--color-primary); color: #ffffff; border-color: transparent; }
.step-pill.done { background: var(--color-positive-soft); color: #14532d; border-color: #bfe3cc; }

/* "Seal" badge — used for certification / verified-status callouts
   (e.g. the verifier hero pill). Flat accent-tinted pill, no gradient
   dot, consistent with the rest of the flat component set. */
.seal-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: var(--color-accent-soft);
  border: 1px solid #c7d2fe;
}
.seal-badge .seal-badge-dot {
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  background: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
}

::selection { background: rgba(79, 70, 229, 0.22); }

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); background-clip: content-box; }