/* Shiftclub legal pages — visual language from Claude Design concept
   "1A · Pit Wall" (condensed chrome, red accent, white surface). Barlow
   Condensed for chrome/headings, Barlow for body copy. */

:root {
  --bg: #ffffff;
  --paper: #f6f4f2;
  --ink: #161314;
  --body: rgba(22, 19, 20, 0.85);
  --sub: rgba(22, 19, 20, 0.5);
  --nav-muted: rgba(22, 19, 20, 0.55);
  --line: rgba(0, 0, 0, 0.09);
  --red: #b3261e;
  --footer-bg: #161314;
  --footer-text: rgba(255, 255, 255, 0.62);
  --footer-muted: rgba(255, 255, 255, 0.35);
  --logo-plate: block;
  --logo-track: #e9e5df;
}

* {
  box-sizing: border-box;
}

/* Hit twice now (login.css's .login-form[hidden], post.css's
   .comment-form[hidden]): any author rule that sets `display` on an
   element also toggled via the `hidden` attribute is equal-or-greater
   specificity than the browser's default `[hidden] { display: none }` UA
   rule, so it silently wins and the "hidden" element stays visible. Fixed
   once, globally, here — loaded on every page — instead of requiring a
   fresh `.foo[hidden] { display: none }` override every time a new
   interactive element is added. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Barlow, system-ui, sans-serif;
}

a {
  color: inherit;
}

.top-bar {
  height: 6px;
  background: var(--red);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 56px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand svg {
  display: block;
  flex-shrink: 0;
}

/* Mirrors ShiftclubIcon's light/"plateless" dark treatment (see
   src/components/shiftclub-icon.tsx): dark mode drops the white plate +
   ink outline entirely so the mark sits directly on the page background,
   and the empty track becomes translucent white instead of warm beige. */
.logo-plate {
  display: var(--logo-plate);
}

.logo-track {
  stroke: var(--logo-track);
}

.logo-arc {
  stroke: var(--red);
}

.logo-needle {
  stroke: var(--ink);
}

.logo-hub {
  fill: var(--ink);
}

.brand-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.header-nav a {
  text-decoration: none;
  color: var(--nav-muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.header-nav a:hover {
  color: var(--ink);
}

.header-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--red);
}

/* CTA-styled nav item (currently just Login, on the homepage nav) — the
   plain .header-nav a rules above are muted-gray text for the other
   items; this one needs to actually read as a call to action rather than
   another nav label, so it gets real red color plus its own outline
   instead of the shared underline-on-hover treatment. The extra `a` in
   the selector (matching .header-nav a[aria-current="page"] just above)
   isn't decorative — .header-nav a's own border-bottom/padding-bottom
   need a selector at least as specific to actually be overridden rather
   than just partially winning on the bottom edge. Lives here (not
   landing.css) since it's a generic nav-CTA pattern, not homepage-specific
   decoration — landing.css's overrides are for things that only ever
   apply to the flashy homepage chrome. */
.header-nav a.header-nav-login {
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 4px;
  padding: 6px 16px 8px;
}

.header-nav a.header-nav-login:hover {
  color: #fff;
  background: var(--red);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.doc-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}

.doc-updated {
  font-size: 14.5px;
  color: var(--sub);
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.doc-updated strong {
  color: var(--ink);
  font-weight: 600;
}

main > p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 20px;
}

h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 48px 0 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--red);
}

h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 32px 0 10px;
}

p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 18px;
}

ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 10px;
}

li ul {
  margin-top: 10px;
  margin-bottom: 4px;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

a.inline-link {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc-caps p {
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 48px 0 24px;
}

.doc-disclaimer {
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sub);
}

footer {
  background: var(--footer-bg);
  color: #fff;
  padding: 44px 56px 34px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-brand-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

.footer-links {
  display: flex;
  gap: 26px;
  font-size: 13px;
  color: var(--footer-text);
  flex-wrap: wrap;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: var(--footer-muted);
}

/* Delete-account request form (Google Play's required web-based deletion
   page) — same doc-page shell as Privacy/Terms, just with a form instead
   of legal copy. */
.delete-form {
  margin-top: 8px;
}

.delete-form label {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.delete-form input[type="email"],
.delete-form input[type="text"] {
  width: 100%;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 13px 14px;
  margin-bottom: 20px;
}

.delete-form input:focus {
  outline: none;
  border-color: var(--red);
}

.delete-form button {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 4px;
  padding: 14px 26px;
  cursor: pointer;
}

.delete-form button:disabled {
  opacity: 0.5;
  cursor: default;
}

.delete-form-status {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.6;
}

.delete-form-status.success {
  color: var(--ink);
}

.delete-form-status.error {
  color: var(--red);
}

/* Shared-post fallback page (/posts/:id) — shown when a shared post link
   is opened without the app installed (App Links, once verified, skip
   this page entirely and open the app directly to the real post). Static
   and generic on purpose — no per-post content, see functions/posts/[id].js. */
.store-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

a.store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border-radius: 4px;
  padding: 14px 26px;
  text-decoration: none;
}

a.store-button.disabled {
  background: var(--paper);
  color: var(--sub);
  border: 1.5px solid var(--line);
}

@media (max-width: 640px) {
  .header {
    padding: 16px 20px;
  }

  .header-nav {
    gap: 18px;
    font-size: 12px;
  }

  main {
    padding: 40px 20px 72px;
  }

  h1 {
    font-size: 32px;
  }

  footer {
    padding: 36px 20px 26px;
  }
}