/**
 * Shared dark theme for the members area: /members, /members/course and /members/admin.
 *
 * The sales pages are loud on purpose — red buttons, heavy weights, urgency. The members
 * area is the opposite room. Somebody is here after they've already bought, to read, watch
 * and settle in, sometimes late at night. So this is charcoal under a deep galactic purple
 * wash, sand and cream text, and gold kept for the few things worth looking at directly.
 *
 * The rules that hold that feeling together, so later edits don't quietly undo it:
 *   - Light type. Nothing above 500, headings at 300. Weight is what makes an interface
 *     shout, and on a dark background heavy text glares.
 *   - Low-glare contrast. Cream sits a little under pure white and surfaces a little above
 *     the page, so edges are felt rather than seen. Body text still clears WCAG AA.
 *   - Slow, small motion. Everything eases over ~240ms and moves at most a pixel or two.
 *   - One accent. Gold marks focus, the current thing, and the single action on a screen.
 *
 * Page-specific layout stays inline in each page; only the shared vocabulary lives here.
 */
:root{
  color-scheme: dark;

  /* Charcoal, from the deepest recess up to the raised surfaces. */
  --char-deep:#0E0F13;
  --char:#15161B;
  --surface:#1B1C24;
  --surface-2:#212230;
  --line:#2C2D3A;
  --line-soft:#24252F;

  /* Galactic purple — used as light in the background, never as a block of colour. */
  --purple:#2A1B5E;
  --purple-soft:#4B3A8F;
  --purple-veil:rgba(88,66,160,0.16);

  /* Sand and cream carry all the reading. */
  --cream:#EAE1CF;
  --sand:#C3B9A5;
  --sand-dim:#9A9285;
  --sand-faint:#857E70;

  /* Gold, and only where it earns its place. */
  --gold:#C9A84C;
  --gold-soft:#DCC383;
  --gold-dim:#8E7838;
  --gold-veil:rgba(201,168,76,0.12);

  --good:#8FC7A4;
  --warn:#D9BE87;
  --bad:#DFA9A9;

  --serif:'Merriweather', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease:240ms cubic-bezier(0.32, 0.72, 0.28, 1);
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  /* Two soft pools of purple light over charcoal. Fixed, so scrolling doesn't drag the
     glow along with the content — the room stays still while you move through it. */
  background:
    radial-gradient(1100px 720px at 50% -25%, rgba(78,54,150,0.34), transparent 62%),
    radial-gradient(880px 620px at 88% 112%, rgba(50,36,104,0.30), transparent 66%),
    var(--char);
  background-attachment:fixed;
  color:var(--sand);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:rgba(201,168,76,0.22);color:var(--cream);}

/* The gutter, and deliberately only the gutter. `main` carries the class too, and a
   `padding` shorthand here would win on specificity and silently flatten whatever
   vertical space `main` asked for — which is exactly what used to happen. Inline and
   block padding are kept on separate properties so the two rules can never collide. */
.col{max-width:860px;margin:0 auto;padding-inline:20px;}

/* ---- Top bar ------------------------------------------------------------------ */

.topbar{
  position:sticky;top:0;z-index:5;
  background:rgba(14,15,19,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding:16px 0;
}
.topbar .col{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.mark{
  font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:3px;
  color:var(--gold);text-decoration:none;transition:color var(--ease);
}
.mark:hover{color:var(--gold-soft);}
.who{font-size:13px;font-weight:300;color:var(--sand-dim);display:flex;align-items:center;gap:14px;}
.topbar button,
.topbar a.back{
  background:none;border:none;padding:0;
  font:inherit;font-size:13px;font-weight:300;color:var(--sand-dim);
  text-decoration:none;border-bottom:1px solid rgba(154,146,133,0.32);
  cursor:pointer;transition:color var(--ease),border-color var(--ease);
}
.topbar button:hover,
.topbar a.back:hover{color:var(--cream);border-color:var(--gold-dim);}

/* ---- Type --------------------------------------------------------------------- */

/* The top bar is sticky and translucent, so a heading that starts against it reads as
   tucked underneath rather than sitting below. This is that breathing space. Block-only
   on purpose: `main` is a `.col`, and a shorthand would fight the gutter rule above. */
main{padding-block:72px 72px;}

h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,4.2vw,32px);line-height:1.32;letter-spacing:0.005em;
  color:var(--cream);margin-bottom:12px;
}
h2,h3{font-weight:400;color:var(--cream);}
.lede{font-size:16px;font-weight:300;line-height:1.75;color:var(--sand);margin-bottom:34px;}
.hint{font-size:14px;font-weight:300;color:var(--sand-dim);margin-bottom:18px;}

a{color:var(--gold-soft);}

/* ---- Surfaces ------------------------------------------------------------------ */

.box,.panel,.item,.card,.empty,.list{
  background:linear-gradient(180deg, rgba(38,34,56,0.55), rgba(24,25,33,0.55));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.035), 0 24px 48px -34px rgba(0,0,0,0.85);
}

.panel{max-width:440px;margin:0 auto;padding:38px 32px;}
.panel h1{text-align:center;font-size:26px;}
.panel .lede{text-align:center;font-size:15px;margin-bottom:28px;}

/* ---- Forms --------------------------------------------------------------------- */

label{
  display:block;font-size:11.5px;font-weight:400;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--sand-dim);margin-bottom:9px;
}
input[type=text],input[type=email],input[type=password],input[type=url],input:not([type]),
textarea,select{
  width:100%;font-family:var(--sans);font-size:16px;font-weight:300;
  padding:14px 15px;border:1px solid var(--line);border-radius:10px;
  background:rgba(10,11,15,0.5);color:var(--cream);
  transition:border-color var(--ease),box-shadow var(--ease),background-color var(--ease);
}
textarea{resize:vertical;min-height:66px;line-height:1.6;}
input::placeholder,textarea::placeholder{color:var(--sand-faint);}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:rgba(201,168,76,0.55);
  background:rgba(10,11,15,0.72);
  box-shadow:0 0 0 3px rgba(201,168,76,0.12);
}
input[type=file]{font-size:14px;font-weight:300;width:100%;color:var(--sand-dim);}
input[type=file]::file-selector-button{
  font:inherit;font-size:13px;color:var(--sand);margin-right:12px;
  background:rgba(255,255,255,0.04);border:1px solid var(--line);
  border-radius:8px;padding:8px 14px;cursor:pointer;
  transition:border-color var(--ease),color var(--ease);
}
input[type=file]::file-selector-button:hover{border-color:var(--gold-dim);color:var(--cream);}
input[type=checkbox]{accent-color:var(--gold);width:auto;}

/* ---- Buttons -------------------------------------------------------------------- */

.btn{
  display:inline-block;
  background:linear-gradient(180deg, #CFAE58, #B5923C);
  color:#191408;
  font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:0.015em;
  padding:15px 28px;border:1px solid rgba(220,195,131,0.5);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 14px 30px -18px rgba(201,168,76,0.55);
  cursor:pointer;text-align:center;text-decoration:none;
  transition:transform var(--ease),box-shadow var(--ease),filter var(--ease),border-color var(--ease);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 18px 34px -18px rgba(201,168,76,0.6);}
.btn:active{transform:translateY(0);filter:brightness(0.98);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,168,76,0.3);}
.btn[disabled]{opacity:0.45;cursor:default;transform:none;filter:none;}

.btn.quiet{
  background:rgba(255,255,255,0.035);color:var(--sand);
  border:1px solid var(--line);box-shadow:none;font-weight:400;
}
.btn.quiet:hover{background:rgba(255,255,255,0.06);border-color:var(--gold-dim);color:var(--cream);filter:none;}
.btn.small{font-size:14px;padding:11px 20px;}

.linkish{
  display:block;width:100%;background:none;border:none;text-align:center;margin-top:18px;
  font:inherit;font-size:14px;font-weight:300;color:var(--sand-dim);
  text-decoration:none;border-bottom:none;cursor:pointer;
  transition:color var(--ease);
}
.linkish:hover{color:var(--gold-soft);}

/* ---- Notes ---------------------------------------------------------------------- */

.note{
  font-size:14px;font-weight:300;border-radius:10px;padding:12px 15px;margin-top:16px;display:none;
}
.note.err{background:rgba(120,58,58,0.16);color:var(--bad);border:1px solid rgba(190,110,110,0.26);}
.note.ok{background:rgba(60,110,80,0.14);color:var(--good);border:1px solid rgba(110,170,130,0.24);}
.note.show{display:block;}

/* ---- Odds and ends -------------------------------------------------------------- */

.loading{text-align:center;color:var(--sand-faint);font-size:15px;font-weight:300;padding:70px 0;}
footer{text-align:center;font-size:11px;font-weight:300;letter-spacing:0.04em;color:var(--sand-faint);padding:0 0 44px;}
[hidden]{display:none !important;}

::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--char-deep);}
::-webkit-scrollbar-thumb{background:#2E2F3C;border-radius:8px;border:3px solid var(--char-deep);}
::-webkit-scrollbar-thumb:hover{background:#3B3C4C;}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important;}
  .btn:hover{transform:none;}
}