/* Redline (Claude Design project ca70cdd5, "ShiftClub Redline Pages" 2a-2l
   + "ShiftClub Profile Concepts" 1c) -- scoped to body.app (lib/layout.js's
   shared shell) so the separate marketing landing page and legal pages
   (dist/index.html, /privacy, /terms -- their own older header/footer,
   never touched here) keep their existing palette untouched even though
   some of them load this same stylesheet. Light values are body.app's
   unconditional defaults; the media query covers a "system" theme
   preference resolving to a dark OS, and the html[data-theme=...] pair
   covers an explicit Settings choice overriding that -- same three-way
   mechanism preferences.js/dark-mode.css already established, just
   carrying Redline's tokens through all three instead of the old ones. */
body.app {
  --red: #E10600;
  --ink: #111111;
  --body: rgba(17,17,17,.85);
  --sub: rgba(17,17,17,.5);
  --nav-muted: rgba(17,17,17,.55);
  --line: rgba(0,0,0,.12);
  --red-wash: #fff4f3;
  --tab-active-bg: #111111;
  --tab-active-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  body.app {
    --bg: #141212;
    --paper: #1c1a19;
    --ink: #f5f3f1;
    --body: rgba(245,243,241,.85);
    --sub: rgba(245,243,241,.5);
    --nav-muted: rgba(245,243,241,.55);
    --line: rgba(255,255,255,.14);
    --red: #ff453a;
    --red-wash: rgba(255,69,58,.14);
    --tab-active-bg: #f5f3f1;
    --tab-active-ink: #141212;
  }
}
html[data-theme=dark] body.app {
  --bg: #141212;
  --paper: #1c1a19;
  --ink: #f5f3f1;
  --body: rgba(245,243,241,.85);
  --sub: rgba(245,243,241,.5);
  --nav-muted: rgba(245,243,241,.55);
  --line: rgba(255,255,255,.14);
  --red: #ff453a;
  --red-wash: rgba(255,69,58,.14);
  --tab-active-bg: #f5f3f1;
  --tab-active-ink: #141212;
}
html[data-theme=light] body.app {
  --bg: #ffffff;
  --paper: #f6f4f2;
  --ink: #111111;
  --body: rgba(17,17,17,.85);
  --sub: rgba(17,17,17,.5);
  --nav-muted: rgba(17,17,17,.55);
  --line: rgba(0,0,0,.12);
  --red: #E10600;
  --red-wash: #fff4f3;
  --tab-active-bg: #111111;
  --tab-active-ink: #ffffff;
}
/* Sits between the 6px red accent line and the header row itself --
   deliberately its own thin strip rather than crowding the icon onto the
   red line (6px is nowhere near enough to hold a click target) or into
   the header row next to New post/@username/Log out, per the explicit
   "above the nav row entirely" placement call. */
.theme-bar {
  display:flex;
  justify-content:flex-end;
  padding:6px 56px 0
}
.theme-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:none;
  border-radius:999px;
  background:none;
  color:var(--ink);
  cursor:pointer
}
.theme-toggle:hover {
  color:var(--red)
}
.theme-toggle:focus-visible {
  outline:2px solid var(--red);
  outline-offset:2px
}
.network-main {
  max-width:1180px;
  margin:0 auto;
  padding:36px 24px 60px
}
.network-main h1,.network-main h2,.network-main h3 {
  font-family:"Barlow Condensed",sans-serif
}
.network-main h1 {
  font-style:italic;
  font-weight:900;
  font-size:clamp(34px,6vw,72px);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.005em;
  margin:10px 0 16px;
  padding-bottom:20px;
  border-bottom:2px solid var(--ink)
}
.network-main h2 {
  font-style:italic;
  font-weight:900;
  font-size:28px;
  text-transform:uppercase;
  margin:16px 0 10px
}
.network-main p {
  line-height:1.6
}
.network-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:24px 0
}
.network-card,.network-detail {
  border:1px solid var(--line);
  border-left:8px solid var(--red);
  border-radius:0;
  background:var(--bg);
  padding:20px;
  min-width:0;
  transition:background .12s
}
.network-card:hover {
  background:var(--red-wash)
}
.network-card>a {
  text-decoration:none
}
.network-card img:not(.network-avatar) {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:0
}
.network-author {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  margin-bottom:16px;
  overflow-wrap:anywhere
}
.network-avatar {
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0
}
.network-copy {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--body)
}
.network-meta {
  color:var(--sub);
  font-size:14px
}
.network-detail {
  max-width:720px;
  margin:0 auto 24px
}
.network-detail figure {
  margin:20px 0
}
.network-detail figure img,.network-detail video,.network-cover {
  width:100%;
  max-height:720px;
  object-fit:contain;
  border-radius:8px;
  background:var(--paper)
}
.network-detail figcaption {
  padding:10px 0;
  color:var(--body);
  white-space:pre-wrap
}
.network-actions,.network-pager,.network-filters {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0
}
.network-actions button,.network-filters button,.network-button,.participation-screen button {
  position:relative;
  isolation:isolate;
  font-family:"Barlow Condensed",sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:12px 22px;
  border:none;
  border-radius:0;
  background:none;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  transition:color .12s
}
/* The skew lives on a ::before behind the label, not on the button itself
   -- skewing the button would skew its text too, and most of these
   buttons render plain text (Follow, Apply filters, ...) with no child
   element available to counter-skew back upright. */
.network-actions button::before,.network-filters button::before,.network-button::before,.participation-screen button::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:1px solid var(--red);
  background:var(--red);
  transform:skewX(-10deg);
  transition:background .12s,border-color .12s
}
.network-actions button:hover,.network-filters button:hover,.network-button:hover,.participation-screen button:hover {
  color:var(--tab-active-ink)
}
.network-actions button:hover::before,.network-filters button:hover::before,.network-button:hover::before,.participation-screen button:hover::before {
  background:var(--tab-active-bg);
  border-color:var(--tab-active-bg)
}
.network-actions button[aria-pressed=true] {
  color:var(--tab-active-ink)
}
.network-actions button[aria-pressed=true]::before {
  background:var(--tab-active-bg);
  border-color:var(--tab-active-bg)
}
/* Header-only exception: Redline's own header keeps Log out as a plain
   text link, not a boxed/skewed pill -- the shared button treatment above
   is for real primary-action buttons everywhere else (Follow, Vote,
   Apply filters, Spin the wheel, ...). */
.network-header-nav button[data-logout] {
  font:700 16px "Barlow Condensed",sans-serif;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:0;
  color:var(--ink)
}
.network-header-nav button[data-logout]::before {
  content:none
}
.network-header-nav button[data-logout]:hover {
  color:var(--red)
}
button:disabled {
  opacity:.55;
  cursor:wait
}
.network-filters label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px
}
.network-filters input,.network-filters select {
  font:inherit;
  max-width:100%;
  padding:10px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:6px
}
.network-notice {
  padding:12px 16px;
  background:var(--paper);
  border-left:3px solid var(--red);
  white-space:pre-wrap
}
.network-cta {
  padding:16px 0;
  border-top:1px solid var(--line);
  color:var(--sub)
}
.network-comments article {
  padding:16px 0;
  border-top:1px solid var(--line)
}
.network-comments .reply {
  margin-left:20px
}
.network-pager {
  justify-content:space-between
}
.network-header-nav {
  display:flex;
  gap:0;
  flex-wrap:wrap;
  align-items:stretch;
  width:100%;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  margin-top:14px
}
.network-header-nav a,.network-header-nav summary {
  font-family:"Barlow Condensed",sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink)
}
.nav-group {
  display:flex;
  gap:0;
  flex-wrap:wrap;
  align-items:stretch
}
.nav-group > a,.nav-group > .nav-dropdown > summary {
  display:flex;
  align-items:center;
  padding:13px 18px;
  border-right:1px solid var(--line);
  transition:background .12s,color .12s
}
.nav-group > a:hover,.nav-group > .nav-dropdown > summary:hover {
  background:var(--red);
  color:#fff
}
.nav-group > a[aria-current=page],.nav-group > .nav-dropdown > summary[aria-current=page] {
  background:var(--tab-active-bg);
  color:var(--tab-active-ink);
  box-shadow:inset 0 -6px 0 var(--red)
}
.nav-group-account {
  margin-left:auto;
  border-left:2px solid var(--ink)
}
.nav-group-account a[href="/create/post"] {
  background:var(--ink);
  color:var(--bg)
}
.nav-group-account a[href="/create/post"]:hover {
  background:var(--red);
  color:#fff
}
.nav-group-account a[href="/create/post"][aria-current=page] {
  background:var(--red);
  color:#fff;
  box-shadow:none
}
.nav-group-account > a:not([href="/create/post"]):hover {
  color:var(--red)
}
.network-header-nav [data-login] {
  padding:13px 18px
}
.nav-dropdown {
  position:relative
}
.nav-dropdown > summary {
  position:relative;
  cursor:pointer;
  list-style:none;
  gap:6px
}
.nav-dropdown > summary::-webkit-details-marker {
  display:none
}
.nav-dropdown > summary::after {
  content:"\25BE";
  font-size:.7em;
  font-style:normal
}
.nav-dropdown.has-unread > summary::before {
  content:"";
  position:absolute;
  top:8px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red,#ef4438);
  border:1.5px solid var(--tab-active-bg,var(--bg))
}
.nav-dropdown-menu {
  position:absolute;
  top:100%;
  left:0;
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:200px;
  padding:0;
  background:var(--bg);
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:6px 6px 0 rgba(0,0,0,.15);
  z-index:20
}
.nav-dropdown-menu a {
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;
  font-style:normal;
  font-size:16px;
  text-transform:none;
  letter-spacing:normal;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  padding:12px 16px;
  border-bottom:1px solid var(--line)
}
.nav-dropdown-menu a:last-child {
  border-bottom:none
}
.nav-dropdown-menu a:hover {
  background:var(--red-wash);
  color:var(--red)
}
.network-main a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--red);
  outline-offset:4px
}
.network-counts {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
.network-footer-top {
  max-width:1180px;
  margin:0 auto;
  padding:24px;
  border-top:2px solid var(--ink);
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  align-items:center;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;
  font-size:17px;
  color:var(--body)
}
.network-footer-top-links {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em
}
.network-footer-top-links a {
  color:var(--ink);
  text-decoration:none
}
.network-footer-top-links a:hover {
  color:var(--red)
}
/* Deliberately theme-invariant (black/white, matching RedlineFooter.dc.html
   exactly) rather than following body.app's light/dark tokens -- Redline's
   footer strip is unconditionally dark chrome in every mockup shown. */
.network-footer {
  background:#111111;
  padding:22px 24px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center
}
.network-footer .brand-name {
  color:#ffffff
}
.network-footer-links {
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase
}
.network-footer-links a {
  color:#ffffff;
  text-decoration:none
}
.network-footer-links a:hover {
  color:var(--red)
}
.network-account-notice {
  margin:12px 24px;
  padding:12px;
  background:var(--paper);
  border-left:3px solid var(--red)
}
@media(max-width:760px) {
  .network-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .header {
    padding:16px 20px;
    flex-wrap:wrap
  }
  .theme-bar {
    padding:6px 20px 0
  }
  .network-main {
    padding:24px 16px 40px
  }
  .nav-group-account {
    margin-left:0;
    border-left:none
  }
}
@media(max-width:480px) {
  .network-grid {
    grid-template-columns:1fr
  }
  .network-detail {
    padding:16px
  }
  .network-header-nav {
    gap:14px
  }
  .network-main h1 {
    font-size:32px
  }
}
.network-card h2,.network-detail h2 {
  border-bottom:0;
  padding-bottom:0;
  letter-spacing:.01em
}
.network-main h1 {
  overflow-wrap:anywhere
}
.network-card .network-author {
  margin-bottom:12px
}
.network-main .network-meta {
  font-size:14px
}
.network-card {
  background:var(--paper)
}

/* Participation uses the existing ShiftClub tokens and compact cards. */
.participation-form { display:grid; gap:14px; max-width:520px; margin:20px 0 28px; }
.participation-form label { display:grid; gap:7px; font-weight:500; }
.participation-form input,.participation-form select,.participation-form textarea { box-sizing:border-box; width:100%; min-width:0; font:inherit; padding:12px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:6px; }
.participation-form .check { display:flex; align-items:flex-start; flex-wrap:wrap; font-weight:400; }
.participation-form input[type=checkbox] { width:18px; height:18px; flex-shrink:0; accent-color:var(--red); }
.participation-form small { color:var(--sub); line-height:1.5; }
/* Redline's button treatment (public.css's .network-actions button /
   .network-button / .participation-screen button rule, near the top of
   this file) now covers every participation-screen button directly --
   this used to set its own background/color here, which silently beat
   that shared rule on specificity (0-1-1 vs 0-1-0) for any button that
   also carried .network-button, rendering red text on its own red ::before
   fill until :hover's higher-specificity selector corrected it. That's
   the "invisible until hover" bug: reproduced live on /spin-wheel, and
   present on every .network-button inside a participation screen
   (Activity's "Mark this page read", My Content's action buttons, etc). */
.participation-form button[type=submit] { justify-self:start; }
.participation-screen [role=status] { overflow-wrap:anywhere; scroll-margin-top:20px; }
.participation-list { margin:20px 0; }
.participation-row { border-bottom:1px solid var(--line); padding:16px; overflow-wrap:anywhere; }
.participation-row.unread { border-left:3px solid var(--red); background:var(--paper); }
.participation-row time { color:var(--sub); font-size:14px; }
.participation-avatar { width:90px; height:90px; object-fit:cover; border-radius:50%; }
.network-report { display:inline-block; font-size:14px; margin:10px 0; }
:root[data-theme=light] { color-scheme:light; --bg:#ffffff; --paper:#f6f4f2; --ink:#161314; --body:rgba(22,19,20,.85); --sub:rgba(22,19,20,.5); --line:rgba(0,0,0,.09); --red:#b3261e; --nav-muted:rgba(22,19,20,.55); --footer-bg:#161314; --footer-text:rgba(255,255,255,.62); --footer-muted:rgba(255,255,255,.35); --logo-plate:block; --logo-track:#e9e5df; }
:root[data-theme=dark] { color-scheme:dark; --bg:#0e1116; --paper:#171b22; --ink:#eaedf2; --body:#c2c8d2; --sub:#7c8595; --line:rgba(255,255,255,.08); --red:#ff453a; --nav-muted:rgba(234,237,242,.55); --footer-bg:#171b22; --footer-text:rgba(234,237,242,.62); --footer-muted:rgba(234,237,242,.35); --logo-plate:none; --logo-track:rgba(255,255,255,.16); }
.participation-screen :focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.participation-screen [aria-current=page] { font-weight:700; text-decoration:underline; }


.creation-previews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.creation-previews figure { margin:0; min-width:0; }
.network-detail .creation-previews img { width:100%; max-height:220px; object-fit:contain; border-radius:8px; }
.creation-previews textarea { width:100%; }
@media(max-width:480px) { .creation-previews { grid-template-columns:1fr; } }

.community-avatar img{width:36px!important;height:36px!important;object-fit:cover;border-radius:50%}.participation-row> a>img{max-height:280px;width:100%;object-fit:contain}.participation-row time{display:block;font-size:.85rem;opacity:.75}[data-community-mode] .network-copy{white-space:pre-wrap;overflow-wrap:anywhere}[data-community-mode] input,[data-community-mode] textarea{max-width:100%}#owner-invite-link{overflow-wrap:anywhere}

.dm-history{height:55vh;min-height:240px;max-height:650px;overflow-y:auto;overscroll-behavior:contain;padding:12px;border:1px solid var(--line,#777);border-radius:8px;margin:16px 0}.dm-bubble{max-width:85%;padding:12px;margin:10px 0;border:1px solid var(--line,#777);border-radius:8px;overflow-wrap:anywhere}.dm-bubble p{white-space:pre-wrap;margin:6px 0}.dm-mine{margin-left:auto;border-color:var(--red,#ef4438)}.dm-bubble time{font-size:.75rem;opacity:.75}
.dm-unread-badge{display:inline-flex;min-width:1.35em;height:1.35em;margin-left:.35em;padding:0 .3em;align-items:center;justify-content:center;border-radius:999px;background:var(--red,#ef4438);color:#fff;font-size:.75em;font-weight:700;line-height:1}.dm-unread-badge[hidden]{display:none}

.phase7-nav{margin-bottom:24px;display:flex;gap:0;border-bottom:2px solid var(--ink)}.phase7-nav a{font-family:"Barlow Condensed",sans-serif;font-style:italic;font-weight:800;font-size:16px;text-transform:uppercase;padding:12px 16px;color:var(--sub);text-decoration:none}.phase7-nav a:hover{color:var(--red)}.phase7-status{display:flex;justify-content:space-between;gap:18px;padding:20px 24px;background:var(--tab-active-bg);color:var(--tab-active-ink);text-transform:uppercase;font-family:"Barlow Condensed",sans-serif;font-style:italic;font-weight:900;font-size:20px}.phase7-hero{margin-top:22px;padding:24px}.phase7-award{display:inline-block;padding:5px 9px;border-radius:999px;background:var(--red);color:#fff;font:700 12px "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase}.phase7-wheel{display:block;width:212px;height:212px;margin:24px auto;object-fit:contain;transition:transform 3.2s cubic-bezier(.33,1,.68,1)}.phase7-photo-name{display:block;padding:8px;border:1px solid var(--line);border-radius:6px;overflow-wrap:anywhere}.phase7-screen .network-card>img,.phase7-winner img{aspect-ratio:4/3;object-fit:cover}@media(max-width:520px){.phase7-status{align-items:flex-start;flex-direction:column}.phase7-wheel{width:140px;height:140px}}

/* --- Redline page-specific flair, applied only where the reference
   explicitly calls out a distinct treatment for that one page. --- */

/* 2b Discover: text-only posts (no photo) become black quote cards,
   matching the reference's "hold their own next to photos" treatment.
   :has() detects "no <img> in this card" directly -- postCard() already
   renders zero <img> tags for a caption-only post, so no markup change
   was needed beyond the .network-grid-discover scoping hook. */
.network-grid-discover .network-card:not(:has(img)) {
  background:var(--tab-active-bg);
  color:var(--tab-active-ink);
  border-left:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:280px
}
.network-grid-discover .network-card:not(:has(img)):hover {
  background:var(--red)
}
/* postCard()'s h2 is only ever the literal word "Post" for a non-logbook
   post (the real content is the caption, in .network-copy) -- so the
   quote treatment belongs on the caption, not the generic heading. h2
   stays as a small muted kicker instead of a giant quoted headline. */
.network-grid-discover .network-card:not(:has(img)) h2 {
  color:inherit;
  opacity:.6;
  font-style:normal;
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  margin:0 0 10px
}
.network-grid-discover .network-card:not(:has(img)) .network-copy {
  color:inherit;
  font-family:"Barlow Condensed",sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:clamp(22px,2.6vw,32px);
  line-height:1.05;
  text-transform:none;
  -webkit-line-clamp:6;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical
}
.network-grid-discover .network-card:not(:has(img)) .network-copy::before {
  content:"“"
}
.network-grid-discover .network-card:not(:has(img)) .network-copy::after {
  content:"”"
}
.network-grid-discover .network-card:not(:has(img)) .network-meta,
.network-grid-discover .network-card:not(:has(img)) a {
  color:inherit;
  opacity:.85
}

/* 2c Marketplace: skewed red price plate overlapping the title's bottom
   edge (listingCard()'s DOM is photo -> h2 -> price, so the negative
   margin pulls the plate up against the title, not the photo itself),
   plus the black filter strip. */
.network-listing-card {
  position:relative;
  overflow:visible
}
.network-listing-price {
  position:relative;
  z-index:1;
  display:inline-block;
  margin:-20px 0 22px 16px;
  padding:6px 16px;
  background:var(--red);
  color:#fff;
  font-family:"Barlow Condensed",sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:22px;
  transform:skewX(-10deg);
  box-shadow:4px 4px 0 var(--ink)
}
.network-filters {
  background:var(--tab-active-bg);
  color:var(--tab-active-ink);
  padding:16px 20px
}
.network-filters label {
  color:inherit
}
.network-filters input,.network-filters select {
  background:var(--bg);
  color:var(--ink)
}

/* 2d Meets: giant red date numeral leading each row -- meets() already
   renders a plain <time>; the day-number emphasis is CSS-only via ::first-line
   would be unreliable across locales, so this stays a lighter-touch red
   time stamp rather than restructuring the date into a separate numeral,
   keeping the existing date() formatting/localization intact. */
.network-grid .network-card time {
  color:var(--red);
  font-weight:700;
  display:block;
  margin-top:8px
}

/* 1c Profile flair (giant italic name, red-bottomed avatar, red stat
   numbers, red-rail garage row) lives in profile.css itself, since that
   file loads after public.css and would otherwise re-win the cascade on
   shared properties like font-weight. */

/* "Continue with Google" on /login and /signup (see google-auth.js). A secondary, outlined button under an "or" divider,
   full width of the form, same height and corner radius as the Log In button. It does NOT use .network-button: that class
   (and the .participation-screen button rule that /signup also applies to every button) is the in-app "Redline" look, a red
   fill on a skewed ::before behind italic text, which is what made this button a slanted red shape. Selectors here are
   .google-signin button.google-signin-button (0-2-1) so they outrank .participation-screen button (0-1-1), and the
   ::before is switched off explicitly. */
.google-signin { display:grid; gap:14px; width:100%; margin-top:22px; margin-bottom:18px; box-sizing:border-box; }
.login-form[hidden] + .google-signin { display:none; }
/* /signup: the form is capped at 520px (.participation-form), so the button block next to it is too. */
.participation-form + .google-signin { max-width:520px; }
.google-signin-divider { display:flex; align-items:center; gap:12px; margin:0; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub,rgba(22,19,20,.5)); }
.google-signin-divider::before,.google-signin-divider::after { content:""; flex:1; height:1px; background:var(--line,rgba(0,0,0,.14)); }
.google-signin button.google-signin-button { position:static; isolation:auto; display:flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box; width:100%; min-width:0; height:50px; margin:0; padding:0 16px; border:1px solid #747775; border-radius:6px; background:#fff; color:#1f1f1f; font-family:"Barlow Condensed",sans-serif; font-style:normal; font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .12s,border-color .12s; }
.google-signin button.google-signin-button::before,.google-signin button.google-signin-button:hover::before { content:none; display:none; }
.google-signin button.google-signin-button:hover { background:#f6f4f2; color:#1f1f1f; border-color:#1f1f1f; }
.google-signin button.google-signin-button:focus-visible { outline:2px solid var(--red,#b3261e); outline-offset:3px; }
.google-signin button.google-signin-button:disabled { opacity:.6; cursor:default; }
.google-signin-g { flex:0 0 auto; display:block; }
.google-signin [role=status] { margin:0; min-height:0; overflow-wrap:anywhere; font-size:14px; line-height:1.4; color:var(--red,#b3261e); }
.google-signin [role=status]:empty { display:none; }
:root[data-theme=dark] .google-signin button.google-signin-button { background:transparent; color:#eaedf2; border-color:rgba(234,237,242,.45); }
:root[data-theme=dark] .google-signin button.google-signin-button:hover { background:rgba(255,255,255,.06); color:#fff; border-color:#eaedf2; }