/* Aether UI layer — polish, states, accessibility.
   Loaded after aether.css so it can refine without changing the visual identity.
   Rules here are additive: nothing from the original design is restyled away. */

:root {
  --ui-radius: 6px;
  --ui-radius-sm: 4px;
  --ui-ring: 0 0 0 2px #08090a, 0 0 0 4px rgba(255, 255, 255, .55);
  --ui-ok: #8ee0a0;
  --ui-err: #ff8a8a;
  --ui-warn: #ffcc00;
  --ui-panel: #0b0b0c;
  --ui-panel-2: #101113;
}

/* ---------- accessibility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #fff; color: #090a0b; padding: 10px 14px; border-radius: var(--ui-radius-sm);
  font-size: 12px; font-weight: 600; text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: none; box-shadow: var(--ui-ring); border-radius: var(--ui-radius-sm); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { box-shadow: var(--ui-ring); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: #6b6f76; }

/* ---------- shared page shell ---------- */
.page-kicker { display: inline-block; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.page-lead a { text-decoration: underline; text-decoration-color: #4a4d53; text-underline-offset: 3px; }
/* Account notes are shared by the portal, the beta pages and the request builders, so the base
   rule lives in this sheet (loaded by every page). portal.css used to own it, which silently left
   the request forms' `#bot-account-note` / `#web-account-note` unstyled. */
.acc-note {
  padding: 11px 13px;
  border: 1px solid #4a3a15;
  border-radius: 6px;
  background: #1a1510;
  color: #c9a87a;
  font-size: 11px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.acc-note.ok { color: var(--ui-ok); }
.acc-note.warn { color: var(--ui-warn); }
.nav a.is-active, .nav a.active { color: #fff; }
.nav a.is-active::after { content: ""; display: block; height: 1px; margin-top: 4px; background: #fff; opacity: .7; }

/* ---------- buttons ---------- */
.button, .header-cta, .purchase-button, .outline-button, .tier-cta, .acc-btn {
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.button:active, .header-cta:active, .purchase-button:active, .outline-button:active, .tier-cta:active, .acc-btn:active { transform: translateY(1px); }
.button[disabled], .purchase-button[disabled], .tier-cta[disabled], .acc-btn[disabled], .btn-donate[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.outline-button {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none;
  padding: 10px 14px; border-radius: var(--ui-radius-sm); font-size: 12px;
}
.outline-button:hover { border-color: #6b6f76; background: #0f1012; }
.button-secondary { background: transparent; border: 1px solid #4a4d53; color: var(--text); }
.button-secondary:hover { background: #131416; border-color: #7b7f86; }
.button-danger { background: transparent; border: 1px solid #5a2b2b; color: var(--ui-err); }
.button-danger:hover { background: #1b0f0f; border-color: #7d3838; }
button.is-loading { position: relative; color: transparent !important; }
button.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Donate — secondary action, deliberately quieter than Purchase */
.btn-donate {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--ui-radius-sm);
  padding: 9px 13px; font-size: 12px; color: var(--muted); text-decoration: none;
  background: transparent;
}
.btn-donate:hover { color: var(--text); border-color: #6b6f76; background: #101113; }
.btn-donate svg { width: 13px; height: 13px; fill: currentColor; }
.donate-head { display: flex; align-items: center; gap: 10px; }
.donate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 22px; }
.donate-card { border: 1px solid var(--line); border-radius: var(--ui-radius); padding: 18px; background: var(--ui-panel); }
.donate-card h3 { font-size: 15px; font-weight: 500; margin: 0 0 8px; letter-spacing: -.02em; }
.donate-card p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--muted); }
.donate-note {
  margin-top: 22px; border: 1px dashed #3a3d42; border-radius: var(--ui-radius);
  padding: 16px 18px; font-size: 12px; line-height: 1.7; color: #b9bbc0; background: #0a0a0b;
}
.donate-note code { font-family: 'DM Mono', monospace; font-size: 11px; color: #fff; background: #141518; padding: 2px 6px; border-radius: 3px; }

/* ---------- forms ---------- */
.field input, .field textarea, .acc-input, .ui-input {
  width: 100%; background: var(--ui-panel-2); border: 1px solid var(--line);
  border-radius: var(--ui-radius-sm); color: var(--text);
  font-family: inherit; font-size: 13px; padding: 11px 12px;
  transition: border-color .18s ease, background .18s ease;
}
.field input::placeholder, .field textarea::placeholder, .acc-input::placeholder { color: #5f6268; }
.field input:hover, .field textarea:hover, .acc-input:hover { border-color: #34383d; }
.field textarea { min-height: 120px; resize: vertical; }
.field label, .ui-label { display: block; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); margin-bottom: 8px; }
.field .req { color: var(--ui-err); }
.field .hint, .ui-hint { display: block; margin-top: 7px; font-size: 11px; color: #75777d; line-height: 1.6; }
.field input.has-error, .field textarea.has-error, .acc-input.has-error { border-color: #7d3838; background: #150e0e; }
.ui-check { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: #b9bbc0; line-height: 1.6; }
.ui-check input { margin-top: 2px; }
.pw-meter { height: 3px; margin-top: 9px; border-radius: 2px; background: #1c1e21; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; background: var(--ui-err); transition: width .25s ease, background .25s ease; }
.pw-meter.lvl-1 span { width: 33%; background: var(--ui-err); }
.pw-meter.lvl-2 span { width: 66%; background: var(--ui-warn); }
.pw-meter.lvl-3 span { width: 100%; background: var(--ui-ok); }

/* ---------- inline messages and states ---------- */
.form-msg, .acc-msg { line-height: 1.6; }
.form-msg.err, .acc-msg.err, .ui-msg.err { color: var(--ui-err); }
.form-msg.ok, .acc-msg.ok, .ui-msg.ok { color: var(--ui-ok); }
.form-msg.info, .acc-msg.info, .ui-msg.info { color: #b9bbc0; }
.ui-note { border: 1px solid var(--line); border-left: 2px solid #4a4d53; border-radius: var(--ui-radius-sm); padding: 12px 14px; font-size: 12px; line-height: 1.7; color: #b9bbc0; background: var(--ui-panel); }
.ui-note.ok { border-left-color: var(--ui-ok); }
.ui-note.err { border-left-color: var(--ui-err); }
.ui-note.warn { border-left-color: var(--ui-warn); }
.ui-empty { text-align: center; padding: 34px 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.ui-empty strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 6px; font-size: 14px; }
.skeleton { position: relative; overflow: hidden; background: #101113; border-radius: var(--ui-radius-sm); min-height: 14px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: ui-shimmer 1.4s infinite;
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }

/* ---------- toasts ---------- */
.toast-host {
  position: fixed; z-index: 60; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px; max-width: min(340px, calc(100vw - 36px));
}
.toast {
  background: #131416; border: 1px solid var(--line); border-radius: var(--ui-radius);
  padding: 12px 14px; font-size: 12px; line-height: 1.6; color: var(--text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.toast.is-in { opacity: 1; transform: none; }
.toast.err { border-color: #5a2b2b; }
.toast.ok { border-color: #2f5d3c; }

/* ---------- auth cards (login / register / reset) ---------- */
.auth-card {
  max-width: 470px; margin: 0; border: 1px solid var(--line); border-radius: var(--ui-radius);
  background: var(--ui-panel); padding: 26px 24px 28px;
}
.auth-card h2 { font-size: 22px; font-weight: 500; letter-spacing: -.04em; margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0 0 20px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card .form-msg { min-height: 18px; margin: 0; font-size: 12px; }
.auth-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; font-size: 12px; }
.auth-nav a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.auth-nav a:hover { color: var(--text); border-bottom-color: #4a4d53; }
.auth-split { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: #60636a; font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.auth-split::before, .auth-split::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- status pages (error.html) ---------- */
.status-code {
  font: 11px 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.status-title { font-size: clamp(34px, 6vw, 58px); line-height: 1.05; letter-spacing: -.06em; font-weight: 500; margin: 14px 0 16px; }
.status-body { max-width: 520px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.status-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.status-hint { margin-top: 26px; font: 10px 'DM Mono', monospace; color: #60636a; line-height: 1.8; }

/* ---------- tables / detail rows on small screens ---------- */
.acc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acc-scroll::-webkit-scrollbar { height: 8px; }
.acc-scroll::-webkit-scrollbar-thumb { background: #2a2d31; border-radius: 4px; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .toast-host { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .auth-card { padding: 20px 16px 22px; }
  .donate-grid { grid-template-columns: 1fr; }
  .status-actions .outline-button, .status-actions .button { width: 100%; justify-content: center; }
  .page-actions .outline-button { flex: 1 1 46%; justify-content: center; }
}

@media print {
  .site-header, .site-footer, .toast-host, .menu-btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- customer portal: roles, verification, chat history, beta ---------- */
.role-chip {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
}
.role-chip.tester { color: #b7f7c3; border-color: rgba(0, 200, 83, .45); background: rgba(0, 200, 83, .08); }
.role-chip.admin { color: #cde1ff; border-color: rgba(74, 139, 255, .45); background: rgba(74, 139, 255, .08); }
.beta-chip {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  font: 10px 'DM Mono', monospace; letter-spacing: .14em;
  padding: 3px 8px; border-radius: 4px; color: #0b0b0c; background: #ffcc00; font-weight: 700;
}
.beta-ribbon {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid rgba(255, 204, 0, .4); background: rgba(255, 204, 0, .07);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 22px; font-size: 12px; color: #e8eaed;
}
.beta-ribbon .beta-chip { margin: 0; }
.beta-body .page-main h1 em { color: #ffcc00; }
.beta-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.flag-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 11px 'DM Mono', monospace; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: #0a0a0b; color: var(--text);
}
.flag-chip.on { border-color: rgba(0, 200, 83, .5); }
.flag-chip.off { opacity: .55; }
.flag-chip b { font-weight: 600; letter-spacing: .04em; }
.flag-chip.on::after { content: "on"; color: #b7f7c3; }
.flag-chip.off::after { content: "off"; color: #8b8e93; }
.ad-flag { display: inline-flex; align-items: center; gap: 8px; font: 11px 'DM Mono', monospace; color: var(--text); }
.acc-msg.info { color: #cde1ff; }
.acc-note.info { border-color: rgba(74, 139, 255, .4); }
#acc-convs tbody tr[data-conv], #ad-convos tbody tr[data-conv] { cursor: pointer; }
#acc-convs tbody tr[data-conv]:hover, #ad-convos tbody tr[data-conv]:hover { background: rgba(255, 255, 255, .03); }