/* Everveil design foundation ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;

  /* Color tokens */
  --color-black: #050504;
  --color-obsidian: #0c0b09;
  --color-ivory: #f5f0e5;
  --color-muted: #b4ab9a;
  --gold: #c9a75d;
  /* --gold as an r g b triplet, for translucent fills: rgb(var(--gold-rgb) / N%). */
  --gold-rgb: 201 167 93;
  --gold-light: #ead294;
  /* --gold-light as an r g b triplet, for translucent glows and borders. */
  --gold-light-rgb: 234 210 148;
  --gold-dark: #7c6530;

  /* Status colors */
  --color-danger: #f1aa96;
  --color-danger-bg: rgb(132 49 32 / 13%);
  /* r g b triplets for the status colors. .rlv-panel rebinds these, so translucent status
     borders must use the triplet rather than a literal to follow that override. */
  --color-danger-rgb: 241 170 150;
  --color-success: #cdddab;
  --color-success-bg: rgb(107 130 77 / 13%);
  --color-success-rgb: 205 221 171;

  /* Shared surface for every bordered panel (page shell, account card, nav, drawer). */
  --surface-bg: linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 45%), rgb(12 11 9 / 92%);
  --surface-border: 1px solid rgb(var(--gold-rgb) / 42%);
  --surface-shadow: 0 24px 70px rgb(0 0 0 / 38%), inset 0 1px rgb(255 255 255 / 4%);

  /* Form controls share one height; icon-only and switch controls opt out explicitly. */
  --control-height: 3rem;
  --control-compact-height: 2.25rem;
  --control-background: rgb(5 5 4 / 78%);
  --control-border: 1px solid rgb(var(--gold-rgb) / 45%);
  --control-font: 500 1rem var(--font-body);
  --control-padding: 0.75rem 0.9rem;
  --control-compact-padding: 0.4rem 0.75rem;

  /* Gold button: a muted translucent fill with a gold-light border, matching the site's
     selected-control treatment. The inset top highlight and bottom shade keep it reading
     as a raised button without a bright gradient. */
  --button-gradient: linear-gradient(180deg, rgb(var(--gold-rgb) / 20%), rgb(var(--gold-rgb) / 11%));
  --button-gradient-hover: linear-gradient(180deg, rgb(var(--gold-rgb) / 30%), rgb(var(--gold-rgb) / 18%));
  --button-border-color: var(--gold-light);
  --button-text: var(--gold-light);
  --button-label-font: 600 0.68rem var(--font-body);
  --button-label-spacing: 0.16em;
  --button-padding: 0.8rem 1.4rem;
  --button-shadow: 0 2px 8px rgb(0 0 0 / 25%), inset 0 1px rgb(255 255 255 / 14%), inset 0 -1px rgb(0 0 0 / 22%);
  --button-shadow-hover: 0 4px 14px rgb(0 0 0 / 32%), inset 0 1px rgb(255 255 255 / 18%), inset 0 -1px rgb(0 0 0 / 26%), 0 0 10px rgb(var(--gold-light-rgb) / 14%);

  /* Spacing scale for fixed gaps and margins; responsive hero sizing uses its own
     clamp()s. */
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;

  /* Pill switch geometry (AccountPage.razor.css .admin-stepup-track), kept as tokens so
     any future switch is the same widget. */
  --radius-pill: 999px;
  --switch-track-width: 2.5rem;
  --switch-track-height: 1.35rem;
  --switch-thumb-size: 0.95rem;
  --switch-thumb-inset: 0.15rem;
  --switch-thumb-travel: 1.15rem;

  /* .site-header and .primary-navigation stack directly and must share one content width
     to align. */
  --header-content-width: min(1180px, calc(100% - 64px));
  --header-content-width-mobile: calc(100% - 36px);

  /* Type and layout tokens */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-section-title: 600 1.05rem/1.4 var(--font-display);
  --font-label: 600 0.67rem/1.5 var(--font-body);
  --font-data: 400 0.85rem/1.5 var(--font-body);
  --page-gutter: clamp(1.25rem, 5vw, 3.5rem);

  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 50% 20%, rgb(var(--gold-rgb) / 10%), transparent 45%),
    var(--color-black);
  /* Fixed so a tall page does not stretch the ambient halo, matching MainLayout's fixed
     watermark. */
  background-attachment: fixed;
  color: var(--color-ivory);
  margin: 0;
  min-height: 100svh;
  min-width: 320px;
}

.page-shell {
  border: 1px solid var(--gold-dark);
  border-image: linear-gradient(135deg, var(--gold-dark), var(--gold-light), var(--gold-dark)) 1;
  min-height: 100svh;
}

/* Routed pages fade in. No animation fill-mode: a retained transform on <main> would
   become the containing block for position: fixed descendants and pull full-screen modals
   off-center. */
main {
  animation: page-fade-in 420ms ease;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

a {
  color: inherit;
}

/* Blazor's reconnect banner, restyled to the site surface. blazor.web.js toggles
   components-reconnect-show/-hide/-failed/-rejected on this element and injects no
   markup, so every state needs its own rule. */
#components-reconnect-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgb(5 5 4 / 72%);
  backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
}

.reconnect-modal-panel {
  width: min(360px, calc(100% - 48px));
  padding: var(--space-4);
  text-align: center;
  background: var(--surface-bg);
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
}

.reconnect-modal-title {
  margin: 0 0 var(--space-2);
  font: 600 1.3rem var(--font-display);
  color: var(--gold-light);
}

.reconnect-modal-message,
.reconnect-modal-failed-message,
.reconnect-modal-rejected-message {
  display: none;
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
}

.reconnect-modal-retry-button {
  display: none;
}

/* Trying to re-establish the existing circuit. */
#components-reconnect-modal.components-reconnect-show .reconnect-modal-message {
  display: block;
}

/* Reconnect attempts were exhausted; the circuit is gone and only a full
   reload can recover it. */
#components-reconnect-modal.components-reconnect-failed .reconnect-modal-failed-message {
  display: block;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-modal-retry-button {
  display: inline-flex;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-modal-title {
  color: var(--color-danger);
}

/* Server explicitly rejected resuming this circuit (e.g. it expired). */
#components-reconnect-modal.components-reconnect-rejected .reconnect-modal-rejected-message {
  display: block;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-modal-retry-button {
  display: inline-flex;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-modal-title {
  color: var(--color-danger);
}

/* Literal values (UUIDs, secrets, claim codes, RLV tokens) keep the body font at the
   surrounding size; the gold tint marks them as copyable values instead of a monospace
   face. */
code {
  background: rgb(var(--gold-rgb) / 12%);
  color: var(--gold-light);
  font-family: inherit;
  font-size: inherit;
  /* Slight tracking keeps long UUIDs and base64 values legible in Montserrat. */
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  padding: 0.05rem 0.3rem;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

/* FocusOnNavigate focuses each page's h1 for screen readers; suppress the visible ring
   that would otherwise draw on every navigation. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Modal dialog ---------------------------------------------------------------
   One shell for every dialog (RLV exceptions, permission-profile editor, one-time
   private key). A use site sizes it with --modal-width / --modal-max-height; the body
   scrolls when content exceeds the height cap. */
.modal-backdrop {
  align-items: center;
  background: rgb(5 5 4 / 72%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1.5rem;
  position: fixed;
  z-index: 50;
}

.modal {
  background: var(--color-obsidian);
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
  display: flex;
  flex-direction: column;
  max-height: var(--modal-max-height, 88vh);
  width: min(var(--modal-width, 24rem), 100%);
}

.modal-header {
  align-items: center;
  border-bottom: 1px solid rgb(var(--gold-rgb) / 20%);
  color: var(--gold-light);
  display: flex;
  flex: none;
  font: var(--font-section-title);
  gap: 1rem;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
}

.modal-header h2 {
  font: inherit;
  margin: 0;
}

.modal-body {
  display: grid;
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.1rem;
}

.modal-footer {
  border-top: 1px solid rgb(var(--gold-rgb) / 14%);
  display: flex;
  flex: none;
  gap: 0.6rem;
  justify-content: flex-end;
  padding: 0.9rem 1.1rem;
}

/* Element-qualified so it outranks the account-card button treatment it sits inside. */
.modal button.modal-close {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.2rem;
  letter-spacing: normal;
  line-height: 1;
  min-height: 0;
  padding: 0;
}

.modal button.modal-close:hover {
  background: none;
  box-shadow: none;
  color: var(--color-ivory);
}

.private-key-modal {
  --modal-width: 46rem;
  --modal-max-height: min(42rem, 88vh);
}

.private-key-modal .modal-body p {
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.private-key-modal-value-wrap {
  position: relative;
}

.private-key-modal-value {
  background: rgb(5 5 4 / 75%);
  border: 1px solid rgb(var(--gold-rgb) / 40%);
  color: var(--color-ivory);
  font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  min-height: 16rem;
  padding: 0.85rem 3rem 0.85rem 0.85rem;
  resize: vertical;
  width: 100%;
}

/* Masked by default (see showPrivateKeyDialog in site.js); the eye/eye-off toggle matches
   PasswordField.razor.css. */
.private-key-toggle {
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  height: 2.2rem;
  justify-content: center;
  min-height: 0;
  padding: 0 0.6rem;
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  transition: color 160ms ease;
}

.private-key-toggle:hover {
  color: var(--gold-light);
}

.private-key-toggle svg {
  height: 1.15rem;
  width: 1.15rem;
}

.private-key-toggle .icon-eye-off {
  display: none;
}

.private-key-toggle[aria-pressed="true"] .icon-eye {
  display: none;
}

.private-key-toggle[aria-pressed="true"] .icon-eye-off {
  display: block;
}

.private-key-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

h1,
p {
  margin: 0;
}

/* Ornamental divider --------------------------------------------------------- */
.ornament {
  align-items: center;
  color: var(--gold);
  display: flex;
  gap: 12px;
  width: min(320px, 70vw);
}

.ornament::before,
.ornament::after {
  background: linear-gradient(90deg, transparent, var(--gold));
  content: "";
  flex: 1;
  height: 1px;
}

.ornament::after {
  transform: scaleX(-1);
}

.ornament span {
  border: 1px solid var(--gold-light);
  height: 7px;
  transform: rotate(45deg);
  width: 7px;
}

.ornament-top {
  margin-bottom: 2.25rem;
}

.ornament-bottom {
  margin-top: 3rem;
}

/* Hero ------------------------------------------------------------------------ */
.hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(36rem, calc(100svh - 5rem));
  padding: 3.5rem var(--page-gutter);
  text-align: center;
}

.eyebrow {
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

h1,
h1 span {
  background: linear-gradient(110deg, var(--gold-dark) 5%, var(--gold-light) 35%, #c89427 55%, var(--gold-light) 72%, var(--gold-dark));
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Without background-clip: text the gradient would paint the heading's whole box, so fall
   back to solid text. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  h1,
  h1 span {
    background: none;
    color: var(--gold-light);
  }
}

.intro {
  color: var(--color-muted);
  font: 400 1.2rem/1.7 var(--font-display);
  margin: 1.75rem auto 1.75rem;
  max-width: 32rem;
}

/* Account forms share one field treatment. Component styles only need to describe
   genuine variants such as icon buttons, switches, and compact data-table controls. */
.account-card input:not([type="checkbox"]):not([type="hidden"]),
.account-card select {
  background-color: var(--control-background);
  border: var(--control-border);
  border-radius: 0;
  color: var(--color-ivory);
  font: var(--control-font);
  min-height: var(--control-height);
  padding: var(--control-padding);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  width: 100%;
}

.account-card input:not([type="checkbox"]):not([type="hidden"]):hover,
.account-card select:hover {
  border-color: rgb(var(--gold-light-rgb) / 72%);
}

.account-card input:not([type="checkbox"]):not([type="hidden"]):focus-visible,
.account-card select:focus-visible {
  background-color: var(--color-black);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / 16%);
  outline: none;
}

.account-card select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e8d999' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  padding-right: 2.2rem;
}

.account-card select option {
  background: var(--color-obsidian);
  color: var(--color-ivory);
}

.button,
.account-card button {
  align-items: center;
  background: var(--button-gradient);
  border: 1px solid var(--button-border-color);
  box-shadow: var(--button-shadow);
  color: var(--button-text);
  cursor: pointer;
  display: inline-flex;
  font: var(--button-label-font);
  justify-content: center;
  letter-spacing: var(--button-label-spacing);
  min-height: var(--control-height);
  padding: var(--button-padding);
  text-decoration: none;
  text-transform: uppercase;
  transition: background 200ms ease, box-shadow 200ms ease;
}

/* Hover deepens fill and shadow only; the button does not move. */
.button:hover,
.account-card button:hover {
  background: var(--button-gradient-hover);
  box-shadow: var(--button-shadow-hover);
}

.button:disabled,
.account-card button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

.button-secondary {
  background: rgb(12 11 9 / 72%);
  border-color: rgb(var(--gold-rgb) / 62%);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
  color: var(--gold-light);
}

.button-secondary:hover {
  border-color: var(--gold-light);
  box-shadow: 0 8px 28px rgb(0 0 0 / 34%), inset 0 0 16px rgb(var(--gold-rgb) / 8%);
}

.access-guidance {
  color: var(--color-muted);
  font-size: 0.72rem;
  line-height: 1.7;
  margin-top: 1.25rem;
  max-width: 34rem;
}

.home-session-status {
  color: var(--color-ivory);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  h1 {
    font-size: clamp(3rem, 15vw, 4.25rem);
  }

  .hero {
    min-height: auto;
    padding-block: 3rem;
  }

  .hero-actions,
  .hero-actions .button {
    width: min(100%, 20rem);
  }

  .hero-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button {
    transition: none;
  }

  main {
    animation: none;
  }
}

/* RLV control primitives ----------------------------------------------------- Shared by
   every panel that lists RLV behaviors, so they are global rather than scoped. */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* position: relative anchors the absolutely positioned info icon and .rlv-row-end
   (RlvBehaviorGroupCard.razor.css). Every row reserves the left accent border so a state
   change does not shift layout. */
.rlv-row {
  border-bottom: 1px solid rgb(var(--gold-rgb) / 14%);
  border-left: 5px solid transparent;
  min-height: 2.75rem;
  position: relative;
}

.rlv-row:last-child {
  border-bottom: none;
}

/* Dim the row's content rather than the row: opacity on .rlv-row would also fade the info
   bubbles nested inside it. */
.rlv-row-locked .rlv-row-label,
.rlv-row-locked .rlv-exception-link {
  opacity: 0.6;
}

/* Used by RlvCameraPanel's toggle rows (label and lock icon side by side). */
.rlv-row-control {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 0.65rem;
  min-width: 0;
}

.rlv-row-label {
  color: var(--color-ivory);
  font-size: 0.9rem;
}

.rlv-row-label-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Allowed/restricted is shown by the bar's own color, not a separate pill. */
.rlv-row-label-allowed {
  color: var(--color-success);
}

.rlv-row-label-restricted {
  color: var(--color-danger);
}

.rlv-row-state-allowed {
  border-left-color: var(--color-success);
}

.rlv-row-state-restricted {
  border-left-color: var(--color-danger);
}

/* The .rlv-lock wrapper is scoped in RlvBehaviorGroupCard.razor.css; only the SVG glyph
   sizing is shared. */
.rlv-lock-icon {
  flex-shrink: 0;
}

/* Hover/focus popover shared by IdInfoIcon and RlvBehaviorGroupCard's lock and meaning
   icons. CSS reveals it; site.js adds tap-to-open for touch and clampIdInfoBubble writes
   --id-info-shift so the bubble stays inside its nearest .rlv-panel/.account-card. */
.id-info-wrap {
  display: inline-block;
  position: relative;
}

.id-info-bubble {
  background: var(--color-obsidian);
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
  color: var(--color-ivory);
  display: none;
  /* Reset inherited text styling so the bubble looks the same under any ancestor (e.g.
     AccountProfile's uppercase <dt>). */
  font: 400 0.78rem var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  left: 50%;
  max-width: min(16rem, calc(100vw - 2rem));
  overflow-wrap: anywhere;
  padding: 0.5rem 0.7rem;
  position: absolute;
  top: calc(100% + 6px);
  transform: translateX(calc(-50% + var(--id-info-shift, 0px)));
  /* max-content, not auto: an absolutely positioned box would otherwise shrink to the
     tiny trigger's width and wrap every few characters. Still clamped by max-width and by
     site.js on narrow panels. */
  width: max-content;
  /* Multi-line tooltips arrive as one string with newline characters. */
  white-space: pre-line;
  z-index: 20;
}

.id-info-wrap:focus-within .id-info-bubble,
.id-info-wrap[data-tooltip-open] .id-info-bubble {
  display: block;
}

/* Hover reveals only on devices that really hover; touch browsers leave :hover stuck, so
   they use site.js's data-tooltip-open instead. */
@media (hover: hover) {
  .id-info-wrap:hover .id-info-bubble {
    display: block;
  }
}

/* Jump-to-section select beside the view select in .rlv-controls-row
   (CovenantAttachmentPanel.razor.css). */
.rlv-panel .rlv-group-nav-select {
  background: var(--color-obsidian);
  border: 1px solid rgb(var(--gold-rgb) / 30%);
  color: var(--color-muted);
  font: 500 0.75rem var(--font-body);
  padding: 0.35rem 0.5rem;
}

.rlv-panel .rlv-group-nav-select:focus-visible {
  border-color: var(--gold-light);
  color: var(--gold-light);
  outline: none;
}

/* Collapsible group shell shared by the RLV behavior groups and the admin .admin-entity-
   history disclosures. Admin-only details (margin, arrow, padding) stay in
   AccountPage.razor.css. .rlv-group has no margin because .rlv-panel's grid gap spaces
   the groups. */
.rlv-group,
.admin-entity-history {
  border: 1px solid rgb(var(--gold-rgb) / 20%);
}

.rlv-group-summary,
.admin-entity-history > summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0.55rem 0.85rem;
}

/* Pointer only on a real <summary>: CovenantAttachmentPanel reuses this bar on a non-
   collapsing <div>. */
summary.rlv-group-summary,
.admin-entity-history > summary {
  cursor: pointer;
}

.rlv-group-summary::-webkit-details-marker,
.admin-entity-history > summary::-webkit-details-marker {
  display: none;
}

/* --gold, not --gold-light: section headings are secondary structure; --gold-light marks
   actionable controls. */
.rlv-group-label,
.admin-entity-history-label {
  color: var(--gold);
  font: var(--font-section-title);
}

/* The admin label also lays out its ::before open/closed arrow. */
.admin-entity-history-label {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.rlv-group-count,
.admin-entity-history-count {
  color: var(--color-muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rlv-group-body {
  border-top: 1px solid rgb(var(--gold-rgb) / 14%);
  padding: 0.55rem 0.85rem;
}


/* Nested bordered layers compound padding on phones, so trim the RLV layers on small
   screens. */
@media (max-width: 600px) {
  .rlv-group-summary,
  .rlv-group-body {
    padding: 0.55rem 0.75rem;
  }
}