/* =====================================================================
   vrhshk — shared product UI
   Built strictly on design-code/DESIGN_CODE.md + design-tokens.css.
   Rules honoured: warm dark canvas, gold as light (never fill), zero
   radius on stone, 1px gold hairlines, restrained grain, thin icons,
   Oranienbaum display + EB Garamond body.
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* one light source, top-right — as on the landing */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--canvas-glow);
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: var(--grain-url);
  z-index: var(--z-grain);
  mix-blend-mode: overlay;
}
body > * { position: relative; z-index: 1; }

::selection { background: rgba(201,161,95,.28); color: var(--text-accent); }

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-regular); }

.t-display {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  color: var(--text-accent);
  text-shadow: var(--shadow-title);
}
.t-section {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-section);
  color: var(--text-accent);
}
.t-card {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: .03em;
  color: var(--text-primary);
}
.t-eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-secondary);
}
.t-caps {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
}
.t-meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.t-body { margin: 0; color: var(--text-primary); }
.t-dim  { color: var(--text-secondary); }
.t-caption { margin: 0; font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.55; }
.t-num { font-variant-numeric: tabular-nums; }

a { color: var(--accent-primary); text-decoration: none; transition: color var(--duration-normal) var(--ease-standard); }
a:hover { color: var(--accent-hover); }
a.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,161,95,.45); }

/* ------------------------------------------------------------ skeleton */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap {
  width: min(var(--container-content), 100% - calc(var(--gutter) * 2));
  margin-inline: auto;
}
.wrap--narrow { width: min(520px, 100% - calc(var(--gutter) * 2)); }
.wrap--mid    { width: min(860px, 100% - calc(var(--gutter) * 2)); }

.stack-8  > * + * { margin-top: var(--space-8); }
.stack-12 > * + * { margin-top: var(--space-12); }
.stack-16 > * + * { margin-top: var(--space-16); }
.stack-24 > * + * { margin-top: var(--space-24); }
.stack-32 > * + * { margin-top: var(--space-32); }
.row { display: flex; align-items: center; gap: var(--space-12); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.hidden { display: none !important; }
/* The hidden attribute must win over any component's own display rule:
   the profile's owner-only action ships hidden and is revealed by script. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------- chrome */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-20) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  text-decoration: none;
  color: var(--text-primary);
}
.brand .emblem {
  width: 46px; height: 46px;
  color: var(--accent-primary);
  flex: none;
  filter: drop-shadow(0 0 10px var(--accent-glow));
  transition: filter var(--duration-slow), transform var(--duration-slow);
}
.brand:hover .emblem { filter: drop-shadow(0 0 18px rgba(241,207,143,.6)); transform: scale(1.04); }
.brand__name {
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text-primary);
}
.brand__name small {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.emb-ring { transform-box: fill-box; transform-origin: center; animation: vrSpinSlow 40s linear infinite; }
.brand:hover .emb-ring { animation: vrSpinFast 6s linear infinite; }

.footer {
  margin-top: auto;
  padding: var(--space-32) 0 var(--space-24);
  border-top: var(--border-width) solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}

/* ================================================================
   UNIVERSAL ACCOUNT ICON — identical language on every surface.
   Source: landing `.login` (ring 54px, dashed halo, 1.6px user glyph).
   ================================================================ */
.acct {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
  color: var(--text-primary);
  padding: 4px;
  border-radius: 999px;
  outline: none;
}
.acct__ring {
  position: relative;
  width: 46px; height: 46px;
  border-radius: var(--radius-round);
  border: 1.5px solid var(--accent-primary);
  display: grid; place-items: center;
  flex: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 28%, rgba(241,207,143,.2), rgba(201,161,95,.04) 70%);
  box-shadow: inset 0 1px 0 rgba(241,207,143,.35);
  transition: box-shadow var(--duration-slow), transform var(--duration-slow), border-color var(--duration-slow);
}
.acct__ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-round);
  border: 1px dashed rgba(201,161,95,.55);
  animation: vrSpinSlow 18s linear infinite;
  pointer-events: none;
}
.acct__ring svg { width: 20px; height: 20px; color: var(--accent-hover); transition: transform var(--duration-normal); }
.acct__ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct__label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  font-size: .78rem;
  color: var(--text-primary);
  transition: color var(--duration-normal), letter-spacing var(--duration-normal);
}
.acct:hover .acct__ring,
.acct:focus-visible .acct__ring {
  box-shadow: inset 0 1px 0 rgba(241,207,143,.5), 0 0 30px -2px rgba(241,207,143,.6);
  transform: scale(1.06);
  border-color: var(--accent-hover);
}
.acct:hover .acct__ring::before { animation: vrSpinFast 4s linear infinite; border-color: rgba(241,207,143,.9); }
.acct:hover .acct__label { color: var(--accent-hover); letter-spacing: .3em; }
.acct:active .acct__ring { transform: scale(.97); }
.acct:focus-visible { outline: var(--focus-width) solid var(--border-focus); outline-offset: var(--focus-offset); }
.acct--sm .acct__ring { width: 34px; height: 34px; }
.acct--sm .acct__ring::before { inset: -4px; }
.acct--sm .acct__ring svg { width: 16px; height: 16px; }
/* the icon must never flash the wrong state before session-info resolves */
.acct[data-state="pending"] .acct__label { opacity: 0; }

/* --------------------------------------------------------------- panels */
.panel {
  position: relative;
  background: var(--surface-gradient);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-panel);
  padding: var(--space-32);
}
.panel--framed::before {
  content: '';
  position: absolute;
  inset: var(--frame-inset);
  border: var(--border-width) solid var(--border-subtle);
  pointer-events: none;
}
.panel--flat { background: var(--row-gradient); box-shadow: none; padding: var(--space-20) var(--space-24); }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }

.rule { height: 1px; border: 0; background: var(--border-subtle); margin: var(--space-24) 0; }
.rule--accent { background: var(--accent-line); }

/* --------------------------------------------------------------- fields */
.field { display: block; }
.field__label {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
}
.field__input,
.field__area,
.field__select {
  width: 100%;
  min-height: var(--control-h-md);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: rgba(12,9,6,.55);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.5);
  transition: border-color var(--duration-normal), background var(--duration-normal);
  appearance: none;
}
.field__area { min-height: 96px; resize: vertical; line-height: 1.5; }
.field__input:hover, .field__area:hover, .field__select:hover { border-color: var(--border-strong); }
.field__input:focus-visible, .field__area:focus-visible, .field__select:focus-visible {
  outline: var(--focus-width) solid var(--border-focus);
  outline-offset: 2px;
  border-color: var(--border-strong);
}
.field__input::placeholder, .field__area::placeholder { color: var(--text-disabled); }
.field__input:disabled, .field__area:disabled, .field__select:disabled {
  color: var(--text-disabled);
  background: var(--bg-subtle);
  cursor: not-allowed;
}
.field__input[aria-invalid="true"], .field__area[aria-invalid="true"] { border-color: var(--danger); }
.field__help { margin: var(--space-8) 0 0; font-size: var(--text-sm); color: var(--text-tertiary); }
.field__error { margin: var(--space-8) 0 0; font-size: var(--text-sm); color: var(--danger); }
.field__count { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.field--prefixed { display: flex; align-items: stretch; }
.field--prefixed .field__prefix {
  display: grid; place-items: center;
  padding: 0 12px;
  color: var(--text-secondary);
  background: rgba(12,9,6,.75);
  border: var(--border-width) solid var(--border-default);
  border-right: 0;
  font-size: var(--text-base);
}
.field--prefixed .field__input { border-left: 0; }

/* -------------------------------------------------------------- buttons */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  min-height: var(--control-h-lg);
  padding: 12px 26px;
  border-radius: var(--radius-none);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  font-size: .78rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-slow), background var(--duration-slow),
              border-color var(--duration-slow), color var(--duration-normal);
}
.btn::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,243,214,.45) 50%, transparent 70%);
  transform: translateX(-130%) skewX(-8deg);
  transition: transform .9s var(--ease-standard);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(130%) skewX(-8deg); }
.btn svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: var(--focus-width) solid var(--border-focus); outline-offset: var(--focus-offset); }
.btn[disabled], .btn[aria-disabled="true"] { pointer-events: none; opacity: .45; }
.btn--block { width: 100%; }
.btn--sm { min-height: var(--control-h-sm); padding: 6px 14px; font-size: var(--text-xs); letter-spacing: .16em; gap: 8px; }
.btn--sm svg { width: var(--icon-sm); height: var(--icon-sm); }

.btn--primary {
  color: var(--text-on-accent);
  border: var(--border-width) solid rgba(255,238,200,.65);
  background: linear-gradient(180deg, #eccf93, #c3985a 55%, #9a7439);
  box-shadow: 0 16px 32px -14px rgba(241,207,143,.55), inset 0 1px 0 rgba(255,246,222,.75), inset 0 -1px 0 rgba(0,0,0,.25);
}
.btn--primary:hover { box-shadow: 0 20px 40px -14px rgba(241,207,143,.7), inset 0 1px 0 rgba(255,246,222,.9); }

.btn--ghost {
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-default);
  background: rgba(201,161,95,.05);
}
.btn--ghost:hover { border-color: var(--border-strong); color: var(--text-accent); background: var(--bg-hover); }

.btn--danger { color: var(--danger); border: var(--border-width) solid rgba(194,91,74,.45); background: var(--danger-soft); }
.btn--danger:hover { border-color: var(--danger); color: #dd7361; }

.btn--quiet {
  min-height: var(--control-h-sm);
  padding: 4px 0;
  color: var(--text-secondary);
  background: none; border: 0;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
}
.btn--quiet::before { display: none; }
.btn--quiet:hover { color: var(--accent-hover); }

.btn__spinner {
  width: 14px; height: 14px; flex: none;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-round);
  animation: vrSpin .8s linear infinite;
}
.btn[data-busy="true"] { pointer-events: none; }

/* --------------------------------------------------------------- notes */
.note {
  padding: 12px 16px;
  border-left: 2px solid var(--neutral);
  background: var(--neutral-soft);
  font-size: var(--text-md);
  color: var(--text-primary);
}
.note--error   { border-color: var(--danger);  background: var(--danger-soft); }
.note--success { border-color: var(--success); background: var(--success-soft); }
.note--warning { border-color: var(--warning); background: var(--warning-soft); }
.note--info    { border-color: var(--info);    background: var(--info-soft); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: var(--border-width) solid var(--border-default);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: var(--radius-round); background: currentColor; flex: none; }
.badge--on   { color: var(--success); border-color: rgba(138,168,122,.45); background: var(--success-soft); }
.badge--off  { color: var(--text-tertiary); }
.badge--bad  { color: var(--danger);  border-color: rgba(194,91,74,.45);  background: var(--danger-soft); }
.badge--gold { color: var(--accent-hover); border-color: var(--border-strong); background: var(--accent-soft); }

/* --------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table th {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
  border-bottom: var(--border-width) solid var(--border-default);
  white-space: nowrap;
}
.table td { padding: 12px; border-bottom: var(--border-width) solid var(--border-subtle); vertical-align: middle; }
.table tbody tr { transition: background var(--duration-fast); }
.table tbody tr:hover { background: var(--bg-hover); }
.table-scroll { overflow-x: auto; margin-inline: calc(var(--space-32) * -1); padding-inline: var(--space-32); }

/* -------------------------------------------------------------- toggles */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 42px; height: 22px; flex: none;
  border: var(--border-width) solid var(--border-default);
  background: rgba(12,9,6,.6);
  position: relative;
  transition: border-color var(--duration-normal), background var(--duration-normal);
}
.switch__track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: var(--radius-round);
  background: var(--text-secondary);
  transition: transform var(--duration-normal) var(--ease-standard), background var(--duration-normal);
}
.switch input:checked + .switch__track { border-color: var(--accent-primary); background: var(--accent-soft); }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--accent-primary); }
.switch input:focus-visible + .switch__track { outline: var(--focus-width) solid var(--border-focus); outline-offset: var(--focus-offset); }
.switch input:disabled + .switch__track { opacity: .45; }

/* --------------------------------------------------------------- avatar */
.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-round);
  border: var(--border-width) solid var(--border-default);
  overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 28%, rgba(241,207,143,.14), rgba(201,161,95,.03) 70%);
  color: var(--accent-primary);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar svg { width: 18px; height: 18px; }
.avatar--lg { width: 108px; height: 108px; border-color: var(--border-strong); }
.avatar--lg svg { width: 44px; height: 44px; }

/* ------------------------------------------------------------ utilities */
.skip {
  position: absolute; left: -9999px; top: 0;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-strong);
  color: var(--text-accent);
  z-index: 999;
}
.skip:focus { left: var(--space-16); top: var(--space-16); }

.spin { animation: vrSpin 1s linear infinite; }
@keyframes vrSpin { to { transform: rotate(360deg); } }
@keyframes vrSpinSlow { to { transform: rotate(360deg); } }
@keyframes vrSpinFast { to { transform: rotate(360deg); } }
@keyframes vrRise { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: vrRise .8s var(--ease-enter) backwards; }

/* -------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  .wrap, .wrap--mid, .wrap--narrow { width: calc(100% - calc(var(--gutter-mobile) * 2)); }
  .panel { padding: var(--space-24) var(--space-20); }
  .table-scroll { margin-inline: calc(var(--space-20) * -1); padding-inline: var(--space-20); }
  .acct__label { display: none; }
  .brand__name { font-size: 1.35rem; }
  .brand .emblem { width: 38px; height: 38px; }
  .t-display { font-size: 1.75rem; }
  .footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}