/* Gusi Studios, one stylesheet for every page on the site.

   THE EMAILS ARE THE SOURCE OF TRUTH FOR THIS PALETTE, not the other way round.
   supabase/templates/confirmation.html and recovery.html are what a person sees
   FIRST, before they ever reach one of these pages, and the auth confirm page is
   reached BY TAPPING A BUTTON IN ONE OF THEM. A cream email with a teal button
   handing somebody to an indigo page reads as a redirect to somewhere else,
   which is exactly the instinct a phishing-aware person should have. So the
   values below are lifted from those templates: #F7F3E8 ground, #ffffff card,
   #e2ded2 border, #0E4749 brand teal, #1b2231 body, #6d7789 muted.

   Light is the bare :root. Dark is redefined twice, once behind
   prefers-color-scheme guarded with :not([data-theme="light"]) so an explicit
   light choice still wins, and once for an explicit [data-theme="dark"].

   THE DARK NEUTRALS ARE BIASED TOWARDS THE ACCENT rather than a flat grey, and
   the accent itself lightens to #5FBFB3, because #0E4749 on a dark ground is
   nearly invisible. A brand colour that only works in one theme is half a brand
   colour. */

:root {
  --bg: #F7F3E8;
  --surface: #ffffff;
  --border: #e2ded2;
  --text: #1b2231;
  --text-soft: #3a4557;
  --text-muted: #6d7789;
  --accent: #0E4749;
  --on-accent: #ffffff;
  --link: #0E4749;
  --accent-soft: #0E4749;
  --shadow: 0 1px 2px rgba(27, 34, 49, .04), 0 8px 24px rgba(27, 34, 49, .05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1A1B;
    --surface: #162324;
    --border: #26383A;
    --text: #E8EDEC;
    --text-soft: #C7D2D1;
    --text-muted: #93A3A2;
    --accent: #5FBFB3;
    --on-accent: #06302F;
    --link: #7FD4C8;
    --accent-soft: #5FBFB3;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  --bg: #0F1A1B;
  --surface: #162324;
  --border: #26383A;
  --text: #E8EDEC;
  --text-soft: #C7D2D1;
  --text-muted: #93A3A2;
  --accent: #5FBFB3;
  --on-accent: #06302F;
  --link: #7FD4C8;
  --accent-soft: #5FBFB3;
  --shadow: none;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* THE BRAND BAR. Identical markup on every page, so somebody arriving from an
   email sees the same duck and wordmark that were at the top of it. The logo
   carries alt="" on purpose: the wordmark beside it is real text, so announcing
   the name twice is noise for a screen reader. */
.brand {
  max-width: 800px;
  margin: 0 auto;
  padding: 22px 20px 0;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--accent);
}
.brand-link img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 9px;
}
.brand-link span {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
}
.brand-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

main {
  max-width: 800px;
  margin: 16px auto 0;
  padding: 32px 40px 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

h1 { font-size: 30px; font-weight: 700; margin: 0 0 4px; text-wrap: balance; }
.sub { color: var(--text-muted); margin-top: 0; }
section { margin-top: 36px; }

h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  text-wrap: balance;
}
h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 24px 0 6px;
  color: var(--text-soft);
}

ul { padding-left: 22px; margin: 10px 0; }
li { margin-bottom: 6px; }

a { color: var(--link); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--bg); font-weight: 650; }
code { font-size: .92em; }

/* Wide things get their own scroller so the PAGE never scrolls sideways. */
.scroller { overflow-x: auto; }

/* The button, shared by the auth pages. Both tokens are defined above, so the
   fallbacks in those pages' inline styles never fire. */
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The index card list, used only on / */
.links { list-style: none; padding: 0; margin: 24px 0 0; }
.links li { margin-bottom: 12px; }
.links a { font-weight: 600; }

.pagefoot {
  max-width: 800px;
  margin: 0 auto;
  padding: 18px 20px 64px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.pagefoot a { color: var(--link); }

@media (max-width: 640px) {
  .brand, .pagefoot { padding-left: 16px; padding-right: 16px; }
  main {
    margin-left: 16px;
    margin-right: 16px;
    padding: 24px 20px 32px;
  }
  h1 { font-size: 25px; }
  h2 { font-size: 19px; }
}