/*
  Shared anonymous shell styling.
  This file is loaded after template-local CSS so landing, login, signup, MFA,
  and password reset surfaces resolve to the same Fabric rules as the app shell.
*/

:root {
  --v-shell-grid-line: color-mix(in srgb, var(--border-soft) 68%, transparent);
  --v-shell-gutter: clamp(12px, 1.2vw, 18px);
  --v-shell-max-width: 1520px;
}

body.auth-shell,
body.velocity-anonymous {
  background:
    linear-gradient(90deg, var(--v-shell-grid-line) 0 1px, transparent 1px 56px),
    linear-gradient(0deg, color-mix(in srgb, var(--v-shell-grid-line) 78%, transparent) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--canvas-0), var(--canvas-1)) !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
}

/* body.auth-shell::before is intentionally NOT killed: the auth templates use
   it for the landing-style film-grain overlay. */
body.auth-shell::after,
body.velocity-anonymous::before,
body.velocity-anonymous::after {
  display: none !important;
}

body.auth-shell {
  min-height: 100svh;
  grid-template-columns: minmax(0, 420px);
  place-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* Landing hero canvas recipe: ambient glows over the operational grid. */
  background:
    var(--glow-primary),
    var(--glow-accent),
    linear-gradient(90deg, var(--v-shell-grid-line) 0 1px, transparent 1px 56px),
    linear-gradient(0deg, color-mix(in srgb, var(--v-shell-grid-line) 78%, transparent) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--canvas-0), var(--canvas-1)) !important;
}

.velocity-anonymous .site-header {
  inset: 0 0 auto;
  width: 100%;
  min-height: 64px;
  border: 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  padding: 10px clamp(12px, 1.6vw, 18px);
}

.velocity-anonymous .sidebar,
.velocity-anonymous .content-shell,
body.auth-shell .auth-panel {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-surface) !important;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
}

body.auth-shell .auth-panel {
  width: min(420px, 100%);
  gap: 16px;
  overflow: hidden;
  padding: 24px 22px 22px;
}

body.auth-shell .auth-panel.auth-panel-wide {
  width: min(480px, 100%);
}

body.auth-shell .auth-panel {
  box-shadow: var(--shadow-raised, var(--shadow-soft)) !important;
}

body.auth-shell .auth-panel::before {
  display: none !important;
}

.velocity-anonymous .topbar,
.velocity-anonymous .sidebar-head,
.velocity-anonymous .sidebar-foot,
.velocity-anonymous .panel-header,
.velocity-anonymous .product-screenshot .panel-header {
  border-color: var(--border-soft) !important;
  background: var(--surface) !important;
  background-image: none !important;
}

.velocity-anonymous .search-shell,
.velocity-anonymous .theme-control,
.velocity-anonymous .button,
body.auth-shell .auth-theme-toggle,
body.auth-shell .auth-button,
body.auth-shell .auth-panel button {
  min-height: 38px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  background: var(--control-bg) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-control-size);
  font-weight: 700;
  line-height: var(--type-control-line-height);
  letter-spacing: 0;
}

.velocity-anonymous .button.primary,
body.auth-shell .auth-panel button[type="submit"]:not(.auth-button-secondary),
body.auth-shell .auth-button:not(.auth-button-secondary) {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

.velocity-anonymous .button:hover,
.velocity-anonymous .theme-control:hover,
body.auth-shell .auth-theme-toggle:hover,
body.auth-shell .auth-button:hover,
body.auth-shell .auth-panel button:hover {
  border-color: var(--primary) !important;
  background: var(--surface-muted) !important;
  color: var(--text) !important;
}

.velocity-anonymous .button.primary:hover,
body.auth-shell .auth-panel button[type="submit"]:not(.auth-button-secondary):hover,
body.auth-shell .auth-button:not(.auth-button-secondary):hover {
  border-color: var(--primary-hover) !important;
  background: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
}

.velocity-anonymous .brand-mark,
body.auth-shell .auth-brand-mark {
  border-radius: var(--radius-control) !important;
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  box-shadow: none !important;
}

/* The favicon SVG is a chamfered tile (7/64 bevel), but the square container
   background fills its transparent corners and reads as a hard square. Clip the
   container to the same bevel so the app icon's chamfer shows on landing,
   matching the in-app VelocityMark. */
.velocity-anonymous .brand-mark,
.velocity-anonymous .avatar.avatar-mark {
  background: transparent !important;
  clip-path: var(--angular-clip) !important;
}

@supports (corner-shape: bevel) {
  .velocity-anonymous .brand-mark {
    border-radius: calc(2.35rem * 7 / 64) !important;
    corner-shape: bevel !important;
  }

  /* Same treatment for the 2.2rem demo "Operator session" mark in the preview
     app shell, which uses the favicon SVG under a different class. */
  .velocity-anonymous .avatar.avatar-mark {
    border-radius: calc(2.2rem * 7 / 64) !important;
    corner-shape: bevel !important;
  }
}

.velocity-anonymous .avatar {
  border-radius: var(--radius-control) !important;
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

.velocity-anonymous .nav-item {
  border-radius: var(--radius-control) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.velocity-anonymous .nav-item.is-active,
.velocity-anonymous .nav-item:hover,
.velocity-anonymous .nav-item:focus-visible {
  border-color: var(--border-soft) !important;
  background: var(--surface-muted) !important;
  box-shadow: inset 3px 0 0 var(--tone, var(--primary)) !important;
}

.velocity-anonymous :is(
  .panel,
  .product-screenshot,
  .module-card,
  .component-card,
  .proof-card,
  .chat-panel,
  .table-panel,
  .control-card,
  .connector-card,
  .policy-card,
  .workflow-step,
  .run-card,
  .signal-card,
  .record-row,
  .source-row,
  .message,
  .final-cta,
  .section-band
) {
  border-color: var(--border-soft) !important;
  border-radius: var(--radius-surface) !important;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
}

.velocity-anonymous :is(.connector-card, .workflow-step, .run-card, .signal-card, .record-row, .source-row, .message) {
  background: var(--control-bg-subtle) !important;
  box-shadow: none !important;
}

.velocity-anonymous .metric-strip {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-control) !important;
  background: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

.velocity-anonymous .metric {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.velocity-anonymous .surface-switcher {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-control) !important;
  background: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

.velocity-anonymous .surface-tab {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.velocity-anonymous .surface-tab:is(:hover, :focus-visible),
.velocity-anonymous .surface-tab.is-active {
  background: var(--surface-muted) !important;
}

.velocity-anonymous :is(.badge, .signal-score, .connector-meta span),
body.auth-shell :is(.auth-error, .helptext) {
  border-radius: var(--radius-badge) !important;
}

.velocity-anonymous :is(input, .mini-input, .composer input),
body.auth-shell .auth-panel input,
body.auth-shell .auth-code,
body.auth-shell .auth-manual-setup,
body.auth-shell .auth-code-list li,
body.auth-shell .auth-error,
body.auth-shell .auth-qr {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-input) !important;
  background: var(--control-bg-subtle) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.velocity-anonymous .search-shell input {
  min-height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 0;
}

.velocity-anonymous .search-shell input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

body.auth-shell .auth-qr {
  background: #ffffff !important;
}

body.auth-shell .auth-secondary,
body.auth-shell .auth-secondary a,
body.auth-shell a.auth-secondary {
  color: var(--primary) !important;
  font-family: var(--font-ui);
  font-size: var(--type-control-size);
  font-weight: 700;
}

:root[data-theme="dark"] body.auth-shell .auth-secondary,
:root[data-theme="dark"] body.auth-shell .auth-secondary a,
:root[data-theme="dark"] body.auth-shell a.auth-secondary,
:root[data-theme="dark"] body.auth-shell .auth-button.auth-button-secondary {
  color: var(--text) !important;
}

:root[data-theme="dark"] body.auth-shell .auth-button.auth-button-secondary:hover,
:root[data-theme="dark"] body.auth-shell .auth-secondary a:hover,
:root[data-theme="dark"] body.auth-shell a.auth-secondary:hover {
  color: var(--text-muted) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.auth-shell .auth-secondary,
  :root:not([data-theme="light"]) body.auth-shell .auth-secondary a,
  :root:not([data-theme="light"]) body.auth-shell a.auth-secondary,
  :root:not([data-theme="light"]) body.auth-shell .auth-button.auth-button-secondary {
    color: var(--text) !important;
  }

  :root:not([data-theme="light"]) body.auth-shell .auth-button.auth-button-secondary:hover,
  :root:not([data-theme="light"]) body.auth-shell .auth-secondary a:hover,
  :root:not([data-theme="light"]) body.auth-shell a.auth-secondary:hover {
    color: var(--text-muted) !important;
  }
}

body.auth-shell .auth-brand-title,
.velocity-anonymous .brand-title,
.velocity-anonymous :is(h1, h2, h3, .panel-title, .row-title) {
  font-family: var(--font-brand) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.velocity-anonymous :is(strong, .metric-value) {
  font-family: inherit !important;
  font-weight: 700 !important;
}

body.auth-shell .auth-brand-subtitle,
.velocity-anonymous .brand-subtitle,
.velocity-anonymous :is(p, .row-copy, .metric-note, .nav-meta) {
  color: var(--text-muted) !important;
}

.velocity-anonymous .data-table,
.velocity-anonymous .v-table {
  border-collapse: collapse;
}

.velocity-anonymous .data-table th,
.velocity-anonymous .data-table td {
  border-color: var(--border-soft) !important;
  background: var(--surface) !important;
}

.velocity-anonymous .data-table th {
  background: var(--control-bg-subtle) !important;
  color: var(--text-soft) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-label-size);
  font-weight: 700;
  line-height: var(--type-label-line-height);
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  body.auth-shell {
    place-content: start center;
  }
}

/* Chamfered chrome — same progressive enhancement as the app shell's vm-*
   polish layer: `corner-shape: bevel` keeps native borders/shadows/focus,
   non-Chromium browsers fall back to the square house style. Placed last so
   the bevel radius wins over the zeroed radius tokens above. */
@supports (corner-shape: bevel) {
  body.auth-shell .auth-panel,
  body.auth-shell .auth-panel input,
  body.auth-shell .auth-panel button,
  body.auth-shell .auth-button,
  body.auth-shell .auth-theme-toggle,
  body.auth-shell .auth-brand-mark,
  body.auth-shell .auth-error,
  body.auth-shell .auth-code,
  body.auth-shell .auth-code-list li,
  body.auth-shell .auth-manual-setup,
  body.auth-shell .mfa-recovery-code,
  body.auth-shell .auth-qr,
  .velocity-anonymous .button,
  .velocity-anonymous .theme-control {
    border-radius: var(--chamfer, 4px) !important;
    corner-shape: bevel;
  }
}

/* Pending-submit state (class toggled by the shared auth script). */
body.auth-shell .auth-panel button.is-pending,
body.auth-shell .auth-panel button.is-pending:disabled {
  position: relative;
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: transparent !important;
  cursor: progress;
}

body.auth-shell .auth-panel button.is-pending::after {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--primary-contrast) 35%, transparent);
  border-top-color: var(--primary-contrast);
  border-radius: 999px;
  animation: auth-pending-spin 700ms linear infinite;
}

@keyframes auth-pending-spin {
  to {
    transform: rotate(360deg);
  }
}