/* =========================================================
Weaver — css/base.css
Step 1: reset, design tokens, view switching, splash screen.
V4.6 BRAND: the freehand golden W is a path-drawn SVG delivered
as a CSS background-image data-URI, shaded as polished metal:
  · nine-stop gradient ACROSS each downstroke (bronze → gold →
    near-white specular → gold → bronze) so the shine and the
    fade both live inside a single stroke
  · every hairline stroked three times: dark rim, gold body,
    white core — a lit wire rather than a flat line
  · radial specular highlight on the upper-left of each blade
  · layered gold glow, plus a travelling sheen on hero sizes
No webfont, no JavaScript, no background-clip:text — the swashes
can never be clipped.
========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* each panel/view manages its own scrolling */
}
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Design tokens (dark charcoal + gold) ---------- */
:root {
  --bg: #0b0b0c;
  --surface: #141416;
  --surface-2: #1c1c20;
  --surface-3: #232327;
  --border: #2b2b30;
  --border-strong: #3a3a40;
  --text: #e8e5dd;
  --muted: #94918a;
  --faint: #6b6862;
  --accent: #e0a83c;
  --accent-soft: rgba(224, 168, 60, 0.14);
  --danger: #d4604f;
  --success: #7fb069;

  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-prose: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, .55);

  /* ---------- THE BRAND MARK — polished gold ----------
     viewBox 128×88. Gradient 'b' runs LEFT→RIGHT across each
     blade's own bounding box, which is what produces the
     metallic band: shadow edge, rising gold, white-hot
     specular, falling gold, shadow edge. Gradient 'a' runs
     diagonally across the whole mark for the hairlines.
     Radial 'c' is the highlight bloom on each blade. */
  --weaver-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 88'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='8' y1='12' x2='120' y2='80'%3E%3Cstop offset='0' stop-color='%23fffdf4'/%3E%3Cstop offset='.18' stop-color='%23ffeaa6'/%3E%3Cstop offset='.4' stop-color='%23ffcb52'/%3E%3Cstop offset='.62' stop-color='%23eda21a'/%3E%3Cstop offset='.82' stop-color='%23c07d10'/%3E%3Cstop offset='1' stop-color='%238a5510'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236b3f06'/%3E%3Cstop offset='.08' stop-color='%23a0640c'/%3E%3Cstop offset='.2' stop-color='%23e0a41c'/%3E%3Cstop offset='.34' stop-color='%23ffd45e'/%3E%3Cstop offset='.44' stop-color='%23fffef9'/%3E%3Cstop offset='.52' stop-color='%23ffe89a'/%3E%3Cstop offset='.64' stop-color='%23f2b021'/%3E%3Cstop offset='.8' stop-color='%23b8760f'/%3E%3Cstop offset='1' stop-color='%236b3f06'/%3E%3C/linearGradient%3E%3CradialGradient id='c' cx='.34' cy='.2' r='.55'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.8'/%3E%3Cstop offset='.45' stop-color='%23fff6d8' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M6 76C12 58 20 34 32 22C33 40 33 56 37 66C42 76 52 70 58 46C61 34 63 26 66 24C67 42 67 56 71 66C76 76 86 70 92 46C95 34 97 26 99 22C105 13 114 10 119 15C124 19 123 29 116 30C111 31 107 27 106 22' fill='none' stroke='%235c3405' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round' opacity='.85'/%3E%3Cpath d='M6 76C12 58 20 34 32 22C33 40 33 56 37 66C42 76 52 70 58 46C61 34 63 26 66 24C67 42 67 56 71 66C76 76 86 70 92 46C95 34 97 26 99 22C105 13 114 10 119 15C124 19 123 29 116 30C111 31 107 27 106 22' fill='none' stroke='url(%23a)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 76C12 58 20 34 32 22C33 40 33 56 37 66C42 76 52 70 58 46C61 34 63 26 66 24C67 42 67 56 71 66C76 76 86 70 92 46C95 34 97 26 99 22C105 13 114 10 119 15C124 19 123 29 116 30C111 31 107 27 106 22' fill='none' stroke='%23fffdf6' stroke-width='.8' stroke-linecap='round' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M24 26C23 44 26 58 31 68C33.5 74 41 73.5 40.5 67C38 56 38.5 42 40 24C40.5 18.5 24.5 19.5 24 26Z' fill='url(%23b)'/%3E%3Cpath d='M24 26C23 44 26 58 31 68C33.5 74 41 73.5 40.5 67C38 56 38.5 42 40 24C40.5 18.5 24.5 19.5 24 26Z' fill='url(%23c)'/%3E%3Cpath d='M58 28C57 45 60 58 65 68C67.5 74 75 73.5 74.5 67C72 56 72.5 43 74 26C74.5 20.5 58.5 21.5 58 28Z' fill='url(%23b)'/%3E%3Cpath d='M58 28C57 45 60 58 65 68C67.5 74 75 73.5 74.5 67C72 56 72.5 43 74 26C74.5 20.5 58.5 21.5 58 28Z' fill='url(%23c)'/%3E%3C/svg%3E");
}

/* ---------- View routing ---------- */
.app-root { height: 100%; }
.view { display: none; height: 100%; }
.view.is-active { display: block; }

/* ---------- Splash ---------- */
.splash {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(224, 168, 60, .07), transparent 60%),
    var(--bg);
}
.splash-logo { width: 84px; height: 84px; }
.splash-title { font-size: 2.6rem; font-weight: 600; letter-spacing: .04em; }
.splash-tag {
  color: var(--muted);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .72rem;
}
.splash-status {
  margin-top: 18px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .75rem;
}

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--border-strong), #2b2b30);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffd45e, #b8760f);
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================
   WEAVER LOGO — polished gold, never clipped.
   The element keeps its `W` text for screen readers and markup
   compatibility; the glyph is fully transparent and the visible
   mark is the background image.
   ========================================================= */
.weaver-logo {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.455em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  background-image: var(--weaver-mark);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  font-family: var(--font-ui);
  user-select: none;
  pointer-events: none;
  overflow: visible;
  filter:
    drop-shadow(0 0 2px rgba(255, 222, 130, .60))
    drop-shadow(0 2px 8px rgba(240, 178, 40, .50));
}
.weaver-logo.logo-sm { font-size: 1.8rem; margin-right: 6px; }
.weaver-logo.logo-md {
  font-size: 3rem;
  filter:
    drop-shadow(0 0 3px rgba(255, 222, 130, .58))
    drop-shadow(0 3px 12px rgba(240, 175, 35, .48));
}
.weaver-logo.logo-lg {
  font-size: 4.6rem;
  filter:
    drop-shadow(0 0 5px rgba(255, 214, 110, .52))
    drop-shadow(0 6px 20px rgba(240, 170, 30, .46));
}
.weaver-logo.logo-xl {
  font-size: 6.5rem;
  filter:
    drop-shadow(0 0 8px rgba(255, 214, 110, .50))
    drop-shadow(0 8px 28px rgba(240, 170, 30, .50));
}

/* ---------- Travelling sheen on the hero sizes ----------
   A white band sweeps across, masked to the mark itself, so it
   only ever lights the gold. Guarded so an unsupported mask
   never paints a rectangle. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .weaver-logo.logo-lg::after,
  .weaver-logo.logo-xl::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(104deg,
      transparent 34%,
      rgba(255, 250, 226, .35) 44%,
      rgba(255, 255, 255, .88) 50%,
      rgba(255, 250, 226, .35) 56%,
      transparent 66%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image: var(--weaver-mark);
    mask-image: var(--weaver-mark);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: weaver-sheen 5.2s cubic-bezier(.4, 0, .2, 1) infinite;
  }
}
@keyframes weaver-sheen {
  0%, 64%  { background-position: 190% 0; opacity: 0; }
  70%      { opacity: 1; }
  92%      { opacity: 1; }
  100%     { background-position: -90% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .weaver-logo.logo-lg::after,
  .weaver-logo.logo-xl::after { animation: none !important; opacity: 0 !important; }
}

/* ---------- Container overrides ---------- */
.auth-head .auth-logo { width: auto; height: auto; flex: none; }
.launch-hero .launch-hero-logo,
.launch-hero.is-compact .launch-hero-logo {
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .weaver-logo.logo-lg,
  .weaver-logo.logo-xl { animation: weaver-mark-in .7s cubic-bezier(.2, .8, .3, 1) both; }
}
@keyframes weaver-mark-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: none; }
}