/*
 * saveroom.app: the one stylesheet for every page, static and rendered.
 *
 * Why one file: the pages are few and small, and the Pages Functions
 * (web/functions) render the same classes, so a change here reaches every page.
 * The look follows the mockups (design doc 7.1, the four saveroom.app pages of
 * version 5 part 2): white page, white cards drawn by a light gray border, one
 * ink button. The page was cream until October 3, 2026, when Ken retired cream
 * for white ("do away with the cream color scheme and just use white"; design
 * doc 7.2), as in the app.
 *
 * Colors come only from the tokens below, never a hex further down, so light and
 * dark stay in step. The values are the approved palette (brand/README.md,
 * section 10; design doc 7.2). The site follows the browser's Light or Dark
 * setting, as the app follows the phone's (design doc 7.2, "Dark mode: yes").
 *
 * No inline styles anywhere: the Content-Security-Policy (web/public/_headers and
 * web/src/respond.ts) allows styles from this file only.
 */

:root {
  color-scheme: light dark;

  /* Light theme (brand/README.md, section 10). The grays are ink mixed into
     white, as in the app (src/theme/palette.ts). */
  --page: #FFFFFF;
  --card: #FFFFFF;
  --text: #1F1A17; /* ink */
  --text-secondary: #666361; /* 6.0:1 on white */
  --border: #E1E0DF;
  --track: #E7E7E7; /* the recessed shade: the step badge, the invite-only box */
  --button: #1F1A17; /* filled buttons are ink with white text in light */
  --button-text: #FFFFFF;
  --icon-glyph: #908D8C;
  --link: #1E6EF4; /* brand blue, 4.57:1 on the white page (Ken, October 6) */

  /* The same in both themes. Friends' avatars keep their pastel and ink initials
     in dark (design doc 7.2), and the QR code stays ink on white because phone
     cameras read dark-on-light most reliably. */
  --pastel-sand: #D9C7B8;
  --on-pastel: #1F1A17;
  --qr-tile: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme: the brand reversed (brand/README.md, section 10). Cards stop
       at #26201C, the lightest shade the cherry heart still reads on (3:1). */
    --page: #1F1A17;
    --card: #26201C;
    --text: #FFFFFF;
    --text-secondary: #A19E9D; /* 6.5:1 on the page, 6.0:1 on cards */
    --border: #3A322C;
    --track: #120F0D; /* recessed below the page */
    --button: #FFFFFF; /* filled buttons turn white with ink text in dark */
    --button-text: #1F1A17;
    --icon-glyph: #959291;
    --link: #4A8BFF; /* lightened for dark: 5.28:1 on the page, 4.92:1 on cards */
  }
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */

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

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

/* Archivo, as in the app (Ken, October 3, 2026: one font everywhere, the logo
   included; design doc 7.6). The four cuts are the app's
   own, made by brand/source/make_fonts.py and served from this site
   (fonts/), so nothing loads from anywhere else. Weights as in the app: 400 for
   text, 700 for names, buttons and links, 900 for titles. Helvetica or Arial stands in
   for the moment before the font arrives (font-display: swap). */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--link);
}

/* A visible focus ring for keyboard users, in the text color so it shows in
   both themes. */
a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
p,
ol,
ul {
  margin: 0;
}

/* Static pages hold their text in English, French and Italian; the inline script
   in each page's head sets data-lang on <html> from the browser's languages, and
   these rules hide the other two (design doc 7.2: pages follow the browser's
   language). Without the script, data-lang stays "en" and English shows. */
html[data-lang="en"] [data-l]:not([data-l="en"]),
html[data-lang="fr"] [data-l]:not([data-l="fr"]),
html[data-lang="it"] [data-l]:not([data-l="it"]) {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Page frame: logo at the top, content centered, footer at the bottom
 * ------------------------------------------------------------------------- */

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px 28px;
}

/* The computer page is a wider frame (the mockup's computer-size page). */
.shell--computer {
  padding: 56px 24px 28px;
}

/* The home page puts the logo inside its content column, a little lower. */
.shell--home {
  padding-top: 72px;
}

.brand-link {
  display: block;
  border-radius: 8px;
}

/* The stacked logo. Its files carry their own clear space (brand/README.md, 4),
   and every size here stays well above the 60 px minimum. */
.logo {
  display: block;
  width: 150px;
  height: auto;
}

.logo--home {
  width: 220px;
}

.logo--computer {
  width: 168px;
}

.logo--legal {
  width: 120px;
}

.content {
  flex-grow: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px 0;
}

.content--computer {
  max-width: 540px;
  gap: 14px;
  padding: 28px 0;
}

.content--home {
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 0;
}

.content--legal {
  max-width: 680px;
  justify-content: flex-start;
  gap: 14px;
  padding-top: 28px;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.shell--computer .footer {
  gap: 6px 16px;
  font-size: 13px;
}

.footer a {
  color: var(--link);
  font-weight: 700;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Cards and text
 * ------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
}

.card--computer {
  padding: 28px;
}

.card--center {
  align-items: center;
  gap: 10px;
  padding: 24px 18px 20px;
  text-align: center;
}

/* The home page's two small cards (Invite-only for now; Questions). */
.card--small {
  align-self: stretch;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
}

.title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.title--computer {
  font-size: 28px;
}

.card--center .title {
  margin-top: 4px;
}

.subtitle {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.body {
  font-size: 15px;
  line-height: 1.5;
}

.body--computer {
  font-size: 17px;
}

.secondary {
  color: var(--text-secondary);
}

.small {
  font-size: 14px;
  line-height: 1.45;
}

.strong {
  font-weight: 700;
}

/* "Your invitation still works. This page didn't use it." */
.note {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.shell--computer .note {
  font-size: 14px;
}

.tagline {
  max-width: 300px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.lede {
  text-align: center;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
 * Buttons and links
 * ------------------------------------------------------------------------- */

/* The one filled button (design doc 7.2: one ink button per card). 50 px tall,
   so it clears the 44 px touch target the app keeps too (docs/app-build.md 7.3). */
.button {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.card--center .button {
  align-self: stretch;
  margin-top: 6px;
}

/* "Already have the app? Open Save Room": a quiet link, 44 px tall to tap. */
.quiet-link {
  align-self: center;
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 5px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
}

.quiet-link .strong {
  color: var(--text);
}

/* hello@saveroom.app on the home page: the contact Apple's guideline 1.2 asks
   for (design doc 7.2, "The home page is the contact page"). */
.mail-link {
  align-self: flex-start;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Pieces of the link pages
 * ------------------------------------------------------------------------- */

/* The phone in a soft square at the top of the computer page. */
.icon-square {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--track);
  color: var(--text);
}

/* The QR box: code on the left, words on the right. */
.qr-box {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--page);
  border: 1px solid var(--border);
}

.qr-box__words {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qr-box__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.qr {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  padding: 4px;
  border-radius: 10px;
  background: var(--qr-tile);
}

.qr img {
  display: block;
  width: 104px;
  height: 104px;
}

/* The two steps on the iPhone page. */
.steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step .button {
  flex-grow: 1;
}

.step__badge {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--track);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.step__badge--filled {
  background: var(--button);
  color: var(--button-text);
}

/* A friend's initials, in a friend's pastel with ink initials (design doc 7.2). */
.avatar {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: var(--pastel-sand);
  color: var(--on-pastel);
  font-size: 20px;
  font-weight: 700;
}

/* "Not on Save Room? It's invite-only for now..." (design doc 7.2: a friend link
   without an account says invite-only, nothing more). */
.callout {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--track);
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * Terms and privacy
 * ------------------------------------------------------------------------- */

.legal-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal h1 {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

.legal h2 {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.55;
}

.legal ul {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Narrow phones: the QR box stacks, so the words keep a readable width. */
@media (max-width: 420px) {
  .qr-box {
    flex-direction: column;
    align-items: flex-start;
  }
}