/* ============================================================================
   Groong reader identity service (id.groong.org).

   The design tokens and the masthead rules below are COPIED from
   groong-public/static/css/feed.css so the sign-in page looks like the public
   site it belongs to. A copy, not a shared file: the two are separate repos and
   separate deployables, and this page needs only a fraction of the feed's CSS.
   If the public tokens change, re-copy the :root blocks.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light dark;

  /* neutrals (warm-biased) */
  --paper:      #FAF8F4;
  --surface:    #FFFFFF;
  --surface-2:  #F4F0E9;
  --border:     #E6E0D5;
  --border-2:   #D9D2C4;
  --ink:        #211C17;
  --ink-soft:   #554E44;
  --ink-mute:   #8A8175;

  /* accents */
  --pom:        #9E2B34;
  --pom-ink:    #7C1E27;
  --petrol:     #1F5C5A;
  --petrol-ink: #17403F;

  /* type */
  --font-display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --font-body:    "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-ui:      ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-body: 1.0625rem;
  --feed-max: 880px;

  --radius:   10px;
  --radius-s: 7px;
  --shadow:   0 1px 2px rgba(33,28,23,.05), 0 4px 16px -8px rgba(33,28,23,.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #14110D;
    --surface:    #1C1813;
    --surface-2:  #241F18;
    --border:     #322B22;
    --border-2:   #453C30;
    --ink:        #F1EBE1;
    --ink-soft:   #C4BAA9;
    --ink-mute:   #8C8272;
    --pom:        #E0616B;
    --pom-ink:    #EE8790;
    --petrol:     #5FB4B0;
    --petrol-ink: #86C8C4;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 4px 18px -8px rgba(0,0,0,.6);
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--petrol-ink); }
img { max-width: 100%; display: block; }

/* ── Light-touch masthead (copied from feed.css) ───────────────────────── */
.site-head {
  border-bottom: 1px solid var(--border); background: var(--paper);
}
.site-head__row {
  max-width: var(--feed-max); margin: 0 auto; padding: .9rem 16px;
}
.site-head__brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: .01em; color: var(--ink);
}
.site-head__brand b { color: var(--pom); font-weight: 600; }

/* ── Sign-in card ──────────────────────────────────────────────────────── */
.wrap { max-width: 34rem; margin: 0 auto; padding: 2.5rem 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem 1.8rem;
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600; margin: 0 0 .8rem;
}
.note { color: var(--ink-soft); font-family: var(--font-ui); font-size: .95rem; }

.identity { display: flex; align-items: center; gap: .75rem; margin: .4rem 0 1rem; }
.identity__avatar { border-radius: 50%; width: 48px; height: 48px; }
.identity__name { font-family: var(--font-ui); font-weight: 600; }

.providers { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.provider {
  display: block; text-align: center;
  font-family: var(--font-ui); font-size: .98rem; font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-s);
  padding: .7rem 1rem;
}
.provider:hover { color: var(--ink); border-color: var(--ink-mute); }