/* KinkyRaven supporter portal. Tokens and recipes from kinkyraven.com css/base.css + chrome.css.
   Open layout: hairline ruled rows on the field. Glass is rationed to one elevated moment per screen. */

:root {
  --field: #050409;
  --fg: #F2EEF6;
  --dim: #ABA2B4;
  --faint: #8B8394;
  --faint-deco: #6B6375;
  --ink: #0A0810;

  --glass-hi: rgba(255, 255, 255, .055);
  --glass-lo: rgba(255, 255, 255, .022);
  --glass-row: rgba(255, 255, 255, .035);
  --glass-well: rgba(5, 4, 10, .45);
  --stroke: rgba(255, 255, 255, .09);
  --stroke-2: rgba(255, 255, 255, .17);
  --hairline: rgba(255, 255, 255, .06);
  --topline: rgba(255, 255, 255, .12);
  --specular: rgba(255, 255, 255, .34);

  --purple: #8B6DC7;
  --cyan: #9EDFEA;
  --magenta: #F0A6D8;
  --red: #FF9A9A;
  --ok: #9EE7B0;
  --warn: #F0CE9A;
  --bad: #FF9A9A;

  --accent: var(--purple);
  --accent-soft: rgba(139, 109, 199, .09);
  --accent-line: rgba(139, 109, 199, .44);
  --accent-glow: rgba(139, 109, 199, .14);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --display: "Unbounded", var(--sans);

  --r-1: 6px; --r-2: 8px; --r-3: 10px; --r-4: 14px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --shadow-card: 0 14px 34px -14px rgba(0, 0, 0, .72);
  --shadow-lift: 0 22px 48px -18px rgba(0, 0, 0, .8);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .36s;
  --gutter: clamp(20px, 4.5vw, 64px);
  --content-max: 960px;
  --nav-h: 56px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* accent swaps for app landing pages */
.acc-cyan { --accent: var(--cyan); --accent-soft: rgba(158, 223, 234, .07); --accent-line: rgba(158, 223, 234, .38); --accent-glow: rgba(158, 223, 234, .12); }
.acc-magenta { --accent: var(--magenta); --accent-soft: rgba(240, 166, 216, .07); --accent-line: rgba(240, 166, 216, .38); --accent-glow: rgba(240, 166, 216, .12); }
.acc-red { --accent: var(--red); --accent-soft: rgba(255, 154, 154, .07); --accent-line: rgba(255, 154, 154, .38); --accent-glow: rgba(255, 154, 154, .12); }
.acc-purple { --accent: var(--purple); --accent-soft: rgba(139, 109, 199, .09); --accent-line: rgba(139, 109, 199, .44); --accent-glow: rgba(139, 109, 199, .14); }

* { box-sizing: border-box; }
html { background: var(--field); }
body {
  margin: 0;
  background: var(--field);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 560px) { body { font-size: 14.5px; } }
::selection { background: var(--fg); color: var(--ink); }
a { color: inherit; text-decoration-color: var(--stroke-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid rgba(242, 238, 246, .92); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
main.wrap { flex: 1; padding-top: clamp(36px, 6vh, 64px); padding-bottom: clamp(48px, 8vh, 96px); }
main.tight { max-width: 560px; }

/* ---------- nav / footer ---------- */
.nav { background: var(--purple); min-height: var(--nav-h); display: flex; align-items: center; }
.nav .in { display: flex; align-items: center; gap: var(--s2); width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.nav .brand { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .2em; color: #fff; margin-right: auto; text-decoration: none; }
.nav .brand span { color: #E3DAF4; }
.nav a.link { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #EFE9F9; text-decoration: none; padding: 7px 13px; border-radius: var(--r-pill); transition: background var(--t-fast) var(--ease); }
.nav a.link:hover { background: #7A5BB8; }
.nav a.link.on { background: #6C4FAE; }
.nav a.link.cta { background: #5A3F98; }
.nav a.link.cta:hover { background: #4D3486; }
.foot { background: #000; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 18px var(--gutter); }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 700; letter-spacing: -.032em; line-height: .98; margin: 0; font-size: clamp(34px, 6vw, 58px); text-wrap: balance; }
.display-2 { font-family: var(--display); font-weight: 700; letter-spacing: -.026em; line-height: 1.04; margin: 0; font-size: clamp(22px, 3.4vw, 30px); }
.display-3 { font-family: var(--display); font-weight: 600; letter-spacing: -.014em; line-height: 1.15; margin: 0; font-size: clamp(17px, 2vw, 21px); }
.lede { color: var(--dim); font-size: clamp(15px, 1.8vw, 19px); line-height: 1.6; max-width: 62ch; margin: 0; }
.sub { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 0; }
.kick { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.kick::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.mlabel { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fine { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint-deco); line-height: 1.9; }
.ok-t { color: var(--ok); }
.warn-t { color: var(--warn); }
.bad-t { color: var(--bad); }
.acc-t { color: var(--accent); }

/* ---------- ruled rows ---------- */
.rows { border-top: 1px solid var(--hairline); }
.row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--hairline); }
.row .grow { flex: 1; min-width: 0; }
.row .val { font-size: 13px; }
.row .arr { color: var(--faint-deco); font-size: 14px; transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
a.row { text-decoration: none; }
a.row:hover .arr { color: var(--accent); transform: translateX(3px); }
a.row:hover { background: var(--glass-row); }
button.row { background: none; border: 0; border-bottom: 1px solid var(--hairline); font: inherit; color: inherit; width: 100%; text-align: left; cursor: pointer; }
button.row:hover .arr { color: var(--accent); transform: translateX(3px); }
button.row:hover { background: var(--glass-row); }

/* ---------- tier list ---------- */
.tlist { border-top: 1px solid var(--hairline); }
.trow { display: grid; grid-template-columns: 130px 92px 1fr 20px; gap: 14px; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--hairline); text-decoration: none; transition: background var(--t-fast) var(--ease); }
@media (max-width: 640px) { .trow { grid-template-columns: 104px 78px 1fr 18px; gap: 10px; } }
.trow .tname { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.trow .price { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.trow .price small { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--faint); font-weight: 400; }
.trow .tdesc { color: var(--faint); font-size: 12.5px; line-height: 1.45; }
.trow .arr { color: var(--faint-deco); text-align: right; transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
a.trow:hover { background: var(--glass-row); }
a.trow:hover .arr { color: var(--accent); transform: translateX(3px); }
.trow.sel { box-shadow: inset 2px 0 0 var(--accent-line); padding-left: 12px; }
.trow.sel .tname, .trow.sel .arr { color: var(--accent); }

/* cadence toggle */
.cad { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 14px; align-items: baseline; }
.cad a, .cad b { font-weight: 400; color: var(--faint); text-decoration: none; }
.cad a.on, .cad b.on { color: var(--fg); border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; }
.cad .hint { color: var(--faint-deco); letter-spacing: .06em; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-2); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight: 700; background: var(--fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-card); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.btn:hover { background: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 26px rgba(242, 238, 246, .3); }
.btn:active { transform: translateY(1px); }
.btn .go { color: var(--ink); }
.btn.quiet { color: var(--dim); font-weight: 400; background: var(--glass-row); box-shadow: inset 0 0 0 1px var(--stroke), inset 0 1px 0 var(--topline); }
.btn.quiet:hover { color: var(--fg); background: var(--glass-row); box-shadow: inset 0 0 0 1px var(--stroke-2), inset 0 1px 0 var(--topline); }
.btn.quiet .go { color: var(--faint-deco); }
.btn:disabled { opacity: .4; cursor: default; }
.textlink { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--stroke-2); text-underline-offset: 3px; }
.textlink:hover { color: var(--fg); text-decoration-color: var(--accent); }

.input { width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-2); background: var(--glass-well); box-shadow: inset 0 0 0 1px var(--stroke), inset 0 1px 3px rgba(0, 0, 0, .5); font-family: var(--mono); font-size: 13px; color: var(--fg); }
.input:focus { box-shadow: inset 0 0 0 1px var(--accent-line), inset 0 1px 3px rgba(0, 0, 0, .5); outline: none; }
.input::placeholder { color: var(--faint-deco); }
.input.code { font-size: 21px; letter-spacing: .4em; text-align: center; }

.field { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }

/* ---------- the one elevated element ---------- */
.glass { position: relative; border-radius: var(--r-3); background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border: 1px solid var(--stroke); box-shadow: var(--shadow-card); padding: clamp(18px, 2.4vw, 26px); }
.glass::before { content: ""; position: absolute; top: 0; left: 8%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--specular) 38%, transparent); }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .05; pointer-events: none; }
.glass.lit { border-color: var(--accent-line); box-shadow: var(--shadow-card), 0 0 22px var(--accent-glow); }
.glass > .rows .row:last-child { border-bottom: 0; padding-bottom: 2px; }

/* app icon tile */
.appicon { width: 36px; height: 36px; border-radius: 9px; background: var(--glass-well); box-shadow: inset 0 0 0 1px var(--stroke); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 14px; flex: none; color: var(--accent); }
.appicon.lg { width: 46px; height: 46px; font-size: 19px; border-radius: 11px; }
.appicon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* flash messages */
.flash { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 12px 16px; border-radius: var(--r-2); margin-bottom: var(--s5); }
.flash.err { color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255, 154, 154, .4); background: rgba(255, 154, 154, .07); }
.flash.good { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(158, 231, 176, .4); background: rgba(158, 231, 176, .07); }

/* stacking rhythm */
.stack > * + * { margin-top: var(--s6); }
.gap-sm { margin-bottom: var(--s3); }
.gap-md { margin-bottom: var(--s5); }
.gap-lg { margin-bottom: var(--s8); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .glass, .btn, .input, .row, .trow { border: 1px solid; }
}