/*
 * @aurbis/ui — core primitives
 *
 * Vanilla CSS, no framework runtime. Pages compose primitives by stacking
 * class names; styles cascade through the tokens defined in tokens.css.
 *
 * Primitives in this file (v0.1):
 *   - Page chrome: .a-page, .a-shell
 *   - Frame container: .a-frame (with corner-floret + double-rule decoration)
 *   - Panel: .a-panel, .a-panel-head
 *   - Masthead: .a-masthead, .a-masthead-row
 *   - Text: .a-eyebrow, .a-subline, .a-display, .a-h1, .a-h2, .a-h3, .a-body
 *   - Buttons: .a-button, .a-button--primary, .a-button--danger, .a-button--compact
 *   - Icon button: .a-icon-button
 *   - Badges: .a-badge, modifiers --success/--warn/--danger/--info/--ghost
 *   - Pills: .a-pill (stacked label + value), modifiers --live/--warn/--offline
 *   - Lists: .a-action-list, .a-action-row (icon · copy · meta · chevron)
 *   - Definition row: .a-info-row (dt/dd grid)
 *   - Rule: .a-rule (horizontal rule with center ornament)
 *
 * Class naming: BEM-lite. Base class `.a-foo` plus modifier `.a-foo--bar`.
 * `a-` prefix avoids collisions when these are dropped into Flarum or any
 * other host that brings its own CSS.
 */

/* ============================================================
 * Reset basics (kept light — host pages may already have a reset)
 * ============================================================ */

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

[hidden] { display: none !important; }

/* ============================================================
 * Page chrome
 * ============================================================ */

.a-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body-font);
  font-size: var(--size-body);
  line-height: var(--line-body);
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
  background:
    radial-gradient(circle at 18% 8%, rgba(154, 183, 214, 0.08), transparent 36%),
    radial-gradient(circle at 84% 92%, rgba(168, 130, 46, 0.06), transparent 30%),
    linear-gradient(168deg, #090c10 0%, #10141a 46%, #0c1015 100%);
}

.a-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.a-shell {
  width: min(1240px, calc(100vw - 48px));
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-7);
}

/* ============================================================
 * Frame — bordered container with corner-floret + double-rule decoration
 * ============================================================ */

.a-frame {
  position: relative;
  overflow: hidden;
  border: var(--rule-width) solid color-mix(in srgb, var(--rule-color) 56%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%),
    radial-gradient(circle at top, rgba(154, 183, 214, 0.08), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-panel) 92%, transparent), color-mix(in srgb, var(--surface-base) 96%, transparent));
  box-shadow: var(--inset-hi), var(--shadow-deep);
}

.a-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    url("assets/frames/nordic-corner-floret.svg"),
    url("assets/frames/nordic-corner-floret.svg"),
    url("assets/frames/nordic-corner-floret.svg"),
    url("assets/frames/nordic-corner-floret.svg");
  background-repeat: no-repeat;
  background-size: 84px 84px;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
}

/* Parchment frame variant — replaces corner florets with parchment overlays */
[data-register="parchment"] .a-frame,
.register-parchment .a-frame {
  border-color: color-mix(in srgb, var(--rule-color) 72%, transparent);
  background:
    url("assets/frames/parchment-fold-shadow.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--paper-cream) 92%, transparent), color-mix(in srgb, var(--paper-warm) 96%, transparent));
  box-shadow: var(--shadow-card);
}

[data-register="parchment"] .a-frame::before,
.register-parchment .a-frame::before {
  display: none;
}

/* ============================================================
 * Panel — content container inside a frame, or standalone
 * ============================================================ */

.a-panel {
  position: relative;
  padding: var(--space-5);
  border: var(--rule-width) solid color-mix(in srgb, var(--rule-color) 48%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 46%),
    color-mix(in srgb, var(--surface-panel) 96%, transparent);
  box-shadow: var(--inset-hi), var(--shadow-panel);
}

.a-panel-head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--rule-color) 36%, transparent);
  background:
    url("assets/frames/nordic-double-rule.svg") left bottom / 240px 10px no-repeat;
}

[data-register="parchment"] .a-panel-head,
.register-parchment .a-panel-head {
  background:
    url("assets/frames/parchment-rule-dot.svg") left bottom / 200px 10px no-repeat;
}

/* ============================================================
 * Masthead — page-level header
 * ============================================================ */

.a-masthead {
  padding: var(--space-7) var(--space-6) var(--space-6);
  margin-bottom: var(--space-5);
}

.a-masthead-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.a-masthead-copy {
  min-width: 0;
}

/* ============================================================
 * Text primitives
 * ============================================================ */

.a-eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-nordic-body);
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-loose);
  line-height: var(--line-snug);
  text-transform: uppercase;
  color: var(--accent);
}

.a-display,
.a-h1,
.a-h2,
.a-h3 {
  margin: 0;
  font-family: var(--display-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: var(--line-tight);
  text-transform: uppercase;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.a-display { font-size: var(--size-display); }
.a-h1      { font-size: var(--size-h1); }
.a-h2      { font-size: var(--size-h2); }
.a-h3      { font-size: var(--size-h3); }

.a-subline {
  margin: var(--space-3) 0 0;
  max-width: 60ch;
  color: var(--text-secondary);
  font-size: var(--size-lead);
  line-height: var(--line-body);
}

.a-body {
  color: var(--text-primary);
  font-family: var(--body-font);
  font-size: var(--size-body);
  line-height: var(--line-prose);
}

/* Parchment prose register — used inside .register-parchment for letter / archive bodies */
[data-register="parchment"] .a-body,
.register-parchment .a-body {
  font-family: var(--font-parchment-body);
  color: var(--sepia-ink);
}

/* ============================================================
 * Buttons
 * ============================================================ */

.a-button {
  --btn-bg-top:    rgba(40, 48, 58, 0.85);
  --btn-bg-bot:    rgba(16, 21, 26, 0.95);
  --btn-border:    color-mix(in srgb, var(--rule-color-hi) 84%, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--btn-border);
  background: linear-gradient(180deg, var(--btn-bg-top), var(--btn-bg-bot));
  color: var(--text-primary);
  font-family: var(--font-nordic-body);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
  box-shadow: var(--inset-hi), var(--shadow-card);
}

.a-button:hover,
.a-button:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  outline: none;
  box-shadow: var(--inset-hi), 0 10px 22px rgba(0, 0, 0, 0.28);
}

.a-button:active { transform: translateY(0); }

.a-button:disabled,
.a-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: var(--inset-hi), 0 2px 10px rgba(0, 0, 0, 0.12);
}

.a-button--primary {
  --btn-bg-top: rgba(62, 83, 104, 0.95);
  --btn-bg-bot: rgba(25, 37, 50, 0.95);
  --btn-border: rgba(154, 183, 214, 0.62);
}

.a-button--danger {
  --btn-bg-top: rgba(74, 33, 29, 0.94);
  --btn-bg-bot: rgba(34, 18, 16, 0.96);
  --btn-border: rgba(178, 89, 74, 0.62);
  color: #f2c9bb;
}

.a-button--compact {
  padding: var(--space-2) var(--space-3);
  font-size: 0.78rem;
}

.a-button--ghost {
  --btn-bg-top: transparent;
  --btn-bg-bot: transparent;
  --btn-border: color-mix(in srgb, var(--rule-color) 56%, transparent);
  box-shadow: none;
}

[data-register="parchment"] .a-button,
.register-parchment .a-button {
  --btn-bg-top: color-mix(in srgb, var(--paper-cream) 92%, transparent);
  --btn-bg-bot: color-mix(in srgb, var(--paper-warm) 92%, transparent);
  --btn-border: color-mix(in srgb, var(--paper-edge) 88%, transparent);
  color: var(--sepia-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

.a-icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--rule-color) 56%, transparent);
  background: rgba(0, 0, 0, 0.38);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.a-icon-button:hover,
.a-icon-button:focus-visible {
  border-color: var(--rule-color-hi);
  background: rgba(25, 36, 48, 0.78);
  color: var(--text-primary);
  outline: none;
}

/* ============================================================
 * Badges — inline status labels
 * ============================================================ */

.a-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-2);
  border: 1px solid color-mix(in srgb, var(--rule-color) 56%, transparent);
  background: rgba(63, 88, 117, 0.22);
  color: var(--text-secondary);
  font-family: var(--font-clean-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.a-badge--success { border-color: rgba(145, 188, 139, 0.45); background: rgba(84, 130, 76, 0.22); color: #b9d9b0; }
.a-badge--warn    { border-color: rgba(216, 185, 119, 0.45); background: rgba(118, 89, 29, 0.22); color: #efd59c; }
.a-badge--danger  { border-color: rgba(201, 102, 93, 0.48); background: rgba(108, 35, 29, 0.22); color: #f1b0a8; }
.a-badge--info    { border-color: rgba(154, 183, 214, 0.48); background: rgba(63, 88, 117, 0.22); color: #c5d6e6; }
.a-badge--ghost   { border-color: color-mix(in srgb, var(--rule-color) 38%, transparent); background: transparent; color: var(--text-faint); }

/* ============================================================
 * Pills — stacked label + value
 * ============================================================ */

.a-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 148px;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--rule-color) 48%, transparent);
  background: rgba(11, 15, 20, 0.78);
  box-shadow: var(--inset-hi);
}

.a-pill-label {
  color: var(--accent);
  font-family: var(--font-clean-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.a-pill-value {
  color: var(--text-primary);
  font-family: var(--font-nordic-body);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}

.a-pill--live    { border-color: rgba(145, 188, 139, 0.55); box-shadow: var(--inset-hi), 0 0 0 1px rgba(145, 188, 139, 0.18); }
.a-pill--warn    { border-color: rgba(216, 185, 119, 0.55); box-shadow: var(--inset-hi), 0 0 0 1px rgba(216, 185, 119, 0.18); }
.a-pill--offline { border-color: rgba(220, 95, 95, 0.6);   box-shadow: var(--inset-hi), 0 0 0 1px rgba(220, 95, 95, 0.22); }

/* ============================================================
 * Action list — icon · copy · meta · chevron rows
 * Same vocabulary as the in-game Prisma action lists.
 * ============================================================ */

.a-action-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06)),
    rgba(5, 7, 10, 0.42);
}

.a-action-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-left: 2px solid color-mix(in srgb, var(--rule-color-hi) 48%, transparent);
  background: rgba(12, 16, 22, 0.62);
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.a-action-row:hover,
.a-action-row:focus-visible,
.a-action-row[aria-current="true"] {
  border-color: rgba(154, 183, 214, 0.32);
  border-left-color: var(--accent-hi);
  background: rgba(23, 32, 42, 0.82);
  outline: none;
}

.a-action-row--primary { border-left-color: rgba(159, 202, 154, 0.62); }
.a-action-row--danger  { border-left-color: rgba(240, 107, 95, 0.55); }

.a-action-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.a-action-row-title {
  font-family: var(--font-nordic-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.a-action-row-meta {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.a-action-row-chevron {
  font-size: 0.9rem;
  color: var(--text-faint);
}

.a-action-row:hover .a-action-row-chevron,
.a-action-row:focus-visible .a-action-row-chevron { color: var(--accent-hi); }

/* ============================================================
 * Info row — definition-list grid (label / value)
 * ============================================================ */

.a-info-row {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.a-info-row + .a-info-row { border-top: 1px solid color-mix(in srgb, var(--rule-color) 28%, transparent); }

.a-info-label {
  color: var(--accent);
  font-family: var(--font-clean-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.a-info-value {
  color: var(--text-primary);
  font-size: var(--size-body);
  line-height: var(--line-body);
  overflow-wrap: anywhere;
}

/* ============================================================
 * Rule — horizontal divider with optional center ornament
 * ============================================================ */

.a-rule {
  height: 14px;
  margin: var(--space-4) 0;
  background: url("assets/frames/nordic-rule-diamond.svg") center / 220px 14px no-repeat;
  opacity: 0.7;
}

[data-register="parchment"] .a-rule,
.register-parchment .a-rule {
  background: url("assets/frames/parchment-rule-dot.svg") center / 200px 10px no-repeat;
  opacity: 0.85;
}

.a-rule--trefoil { background-image: url("assets/frames/nordic-rule-trefoil.svg"); }

/* ============================================================
 * Divider — stretchy, with optional centered brand ornament
 *
 * Renders as a flexbox row with hairline gradients on each side
 * of a fixed-width PNG ornament cropped from the brand dividers.
 * The hairlines fade in from transparent at the edges and fade to
 * transparent again near the ornament, so the join looks intentional
 * even though the ornament's metalwork bars are heavier than 1px.
 *
 * Usage:
 *   <div class="a-divider">
 *     <span class="a-divider-ornament a-divider-ornament--01"></span>
 *   </div>
 *
 * Modifiers: --01 / --02 / --03 / --04 / --medallion / --astrolabe
 * Parchment register flips the rule color to rust automatically.
 * ============================================================ */

.a-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: min(960px, calc(100vw - 48px));
  margin: var(--space-5) auto;
  padding: 0;
  --divider-rule:        color-mix(in srgb, var(--cold-gold) 36%, transparent);
  --divider-rule-strong: color-mix(in srgb, var(--cold-gold) 56%, transparent);
}

.a-divider::before,
.a-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--divider-rule) 22%,
    var(--divider-rule-strong) 52%,
    var(--divider-rule) 78%,
    transparent 100%
  );
}

.a-divider::after {
  background: linear-gradient(
    to left,
    transparent 0%,
    var(--divider-rule) 22%,
    var(--divider-rule-strong) 52%,
    var(--divider-rule) 78%,
    transparent 100%
  );
}

.a-divider-ornament {
  flex: none;
  width: 120px;
  aspect-ratio: 700 / 627;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.a-divider-ornament--01        { background-image: url("assets/brand/divider-01-center.png"); }
.a-divider-ornament--02        { background-image: url("assets/brand/divider-02-center.png"); }
.a-divider-ornament--03        { background-image: url("assets/brand/divider-03-center.png"); }
.a-divider-ornament--04        { background-image: url("assets/brand/divider-04-center.png"); }
.a-divider-ornament--medallion {
  background-image: url("assets/brand/medallion.png");
  width: 64px;
  aspect-ratio: 1 / 1;
}

/* CSS-only ornament — no asset. Themable, scalable, doesn't carry the
 * metallic art but works on any surface. Use until proper SVG dividers
 * land, or in places where a lighter touch reads better. */
.a-divider-ornament--diamond {
  width: 18px;
  height: 18px;
  background: none;
  filter: none;
  position: relative;
}
.a-divider-ornament--diamond::before,
.a-divider-ornament--diamond::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--divider-rule-strong);
  transform: rotate(45deg);
  transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.a-divider-ornament--diamond::after {
  inset: 5px;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--cold-gold-hi) 64%, transparent), transparent 70%);
  border-color: transparent;
}
.a-divider:hover .a-divider-ornament--diamond::before { transform: rotate(135deg); }

/* CSS-only trefoil — three small dots, themable */
.a-divider-ornament--trefoil {
  width: 36px;
  height: 10px;
  background: none;
  filter: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a-divider-ornament--trefoil::before,
.a-divider-ornament--trefoil::after {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--divider-rule-strong);
}
.a-divider-ornament--trefoil > * {
  /* Center dot is added via a child span when used inline. */
}

.a-divider--small .a-divider-ornament { width: 84px; }
.a-divider--small .a-divider-ornament--medallion { width: 44px; }

.a-divider--large .a-divider-ornament { width: 156px; }
.a-divider--large .a-divider-ornament--medallion { width: 92px; }

[data-register="parchment"] .a-divider,
.register-parchment .a-divider {
  --divider-rule:        color-mix(in srgb, var(--rust) 42%, transparent);
  --divider-rule-strong: color-mix(in srgb, var(--rust) 62%, transparent);
}

/* ============================================================
 * Reveal-on-scroll (paired with ui/reveal.js)
 *
 * Elements marked [data-reveal] start veiled — slight Y offset,
 * zero opacity. Once they cross 12% into the viewport, .is-revealed
 * flips on (set by reveal.js) and they ease in over 700ms.
 *
 * Premium ancient/modern: looks like the page is being inscribed
 * as you scroll, but is entirely declarative.
 * ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
[data-reveal-stagger] > *.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: skip the veil entirely. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
 * Torch — cursor-proximity glow for interactive surfaces
 *
 * Add `.a-torch` to any container with link/card children. The
 * CSS-only fallback gives a hover glow; with a tiny snippet of JS
 * (TODO: ui/torch.js) it would track the cursor for a true light
 * source effect. For now: a quiet pulse on hover.
 * ============================================================ */
.a-torch {
  position: relative;
  isolation: isolate;
}
.a-torch::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--torch-x, 50%) var(--torch-y, 50%),
    color-mix(in srgb, var(--cold-gold-hi) 22%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
  z-index: -1;
}
.a-torch:hover::before,
.a-torch:focus-visible::before {
  opacity: 1;
}