/* Seeday — the public page under /seeday/.
   Colours, type and imagery follow DESIGN_SYSTEM.md; the template is
   "Seeday Landing A" from the brand project. A stylesheet instead of styles
   on every element: otherwise the page cannot wrap on small screens, because
   every size would be fixed in the markup. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  /* The same file the editing interface loads. */
  src: url("atkinson-hyperlegible.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand colours. They are the same in both themes: text on coral, sun,
     sage and sky is always aubergine according to DESIGN_SYSTEM.md, or the
     contrast fails. That is why --aubergine stays a colour and is not
     reinterpreted as the text tone. */
  --aubergine: #35283D;
  --cream: #FFF9F0;
  --coral: #F66B5D;
  --sun: #FFC857;
  --sage: #83B692;
  --sky: #70A9E8;

  /* The page's surfaces and tones. Only these eleven values change between
     light and dark; they carry the same dark colours as the editing
     interface, so that both together look like one house. */
  --bg: var(--cream);
  --surface: #FFFFFF;
  --surface-deep: var(--cream);
  --text: var(--aubergine);
  --quiet: #6B5F72;
  --line: #E6DCCD;
  --sand: #F2EBDD;
  --muted: var(--aubergine);
  --muted-quiet: #D8CBDC;
  --selection: #DDF2E3;
  --tint: rgba(53, 40, 61, 0.06);

  --shadow-card: 0 2px 10px rgba(53, 40, 61, 0.10);
  --shadow-tablet: 0 28px 60px rgba(53, 40, 61, 0.30);
  --shadow-action: 0 8px 20px rgba(53, 40, 61, 0.25);

  /* Outer margin of all bands. 20px on the phone, 56px on the screen, as in
     the template. */
  --margin: clamp(20px, 5vw, 56px);

  color-scheme: light;
}

/* Dark in two cases: the device is set that way and nobody chose otherwise on
   the page, or it was chosen here explicitly. Both blocks carry the same
   values, so that the switch wins in either direction — a device setting
   must not overrule "Light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1B1522;
    --surface: #251E2E;
    --surface-deep: #1B1522;
    --text: #F3EEF5;
    --quiet: #B3A7B9;
    --line: #3A3143;
    --sand: #3E3145;
    --muted: #1C1421;
    --muted-quiet: #B3A7B9;
    --selection: rgba(131, 182, 146, 0.22);
    --tint: rgba(255, 255, 255, 0.08);

    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-tablet: 0 28px 60px rgba(0, 0, 0, 0.50);
    --shadow-action: 0 8px 20px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1B1522;
  --surface: #251E2E;
  --surface-deep: #1B1522;
  --text: #F3EEF5;
  --quiet: #B3A7B9;
  --line: #3A3143;
  --sand: #3E3145;
  --muted: #1C1421;
  --muted-quiet: #B3A7B9;
  --selection: rgba(131, 182, 146, 0.22);
  --tint: rgba(255, 255, 255, 0.08);

  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-tablet: 0 28px 60px rgba(0, 0, 0, 0.50);
  --shadow-action: 0 8px 20px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

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

/* The scroll bar's space stays reserved. Without that the page gets narrower
   as soon as the bar appears — the scaled-down replica of the app then fits
   again, the bar disappears, and it all starts over: the page jitters. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { letter-spacing: -0.02em; }

img, svg { max-width: 100%; }

a { color: var(--text); }
a:hover { color: var(--coral); }

/* Staying visible is a duty, not a matter of taste: without this rule whoever
   navigates with the keyboard loses their place on the page. */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The Tab key's first stop: jump to the content. */
.skip-link {
  position: absolute;
  left: var(--margin);
  top: -60px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--aubergine);
  font-weight: 700;
  text-decoration: none;
  transition: top 120ms ease-out;
}
.skip-link:focus { top: 12px; }

.symbol {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ----------------------------------------------------------------- Buttons -- */

/* At least 48px high — the same promise as in the app. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 30px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--coral); color: var(--aubergine); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn-cream { background: var(--cream); color: var(--aubergine); }
.btn-primary:hover, .btn-cream:hover { color: var(--aubergine); }
.btn:hover { filter: brightness(1.04); }
.btn-small { min-height: 48px; padding: 6px 22px; font-size: 17px; }

/* ------------------------------------------------------------------ Header -- */

.site-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px var(--margin);
  border-bottom: 2px solid var(--line);
  background: var(--surface);
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-header .brand:hover { color: var(--text); }
.site-header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  flex-wrap: wrap;
  font-size: 17px;
}
.site-header nav a:not(.btn) { text-decoration: none; padding: 8px 0; }
.site-header nav a:not(.btn):hover { text-decoration: underline; }

/* -------------------------------------------------------------------- Band -- */

.band { padding: clamp(48px, 6vw, 84px) var(--margin); }
.band-white {
  background: var(--surface);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}
.band-dark { background: var(--muted); color: var(--cream); }
.band-dark .quiet { color: var(--muted-quiet); }

.band h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 38px); }
.band > h2:first-child + p { margin: 0 0 32px; }
.quiet { color: var(--quiet); }
.lead { font-size: clamp(18px, 2vw, 20px); color: var(--quiet); max-width: 62ch; }

/* Two columns as soon as both halves have at least 420px. Below that one
   under the other — nothing gets squeezed. */
.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.pair > div { max-width: 620px; }

/* -------------------------------------------------------------------- Hero -- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 44px);
  padding: clamp(40px, 5vw, 84px) var(--margin) clamp(48px, 5vw, 72px);
}
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 26px);
  max-width: 860px;
  text-align: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--aubergine);
  font-size: 16px;
  font-weight: 700;
}
.hero h1 {
  margin: 0;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.hero .intro {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.45;
  max-width: 72ch;
}
.button-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.footnote { margin: 0; color: var(--quiet); font-size: 17px; }

/* ------------------------------------------------------------- Tablet view -- */

/* The replica is drawn 1320px wide and scaled as a whole. A second set of
   sizes for small screens would be double upkeep for a picture that only
   shows what the app looks like. overflow:auto is the fallback without
   JavaScript: then the replica can at least be scrolled. */
.stage-wrap {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.stage {
  width: 100%;
  max-width: 1320px;
  /* Scroll sideways, nothing vertically: with overflow:auto a pixel or two
     remained after scaling, and the mouse wheel stopped scrolling the page at
     this spot and held on here instead. */
  overflow-x: auto;
  overflow-y: hidden;
}
.stage-content {
  width: 1320px;
  transform-origin: top left;
  background: var(--sun);
  border-radius: 40px;
  padding: 34px;
}
.tablet {
  background: var(--aubergine);
  border-radius: 30px;
  padding: 12px;
  box-shadow: var(--shadow-tablet);
}
.tablet-screen {
  display: flex;
  background: var(--surface-deep);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.rail {
  width: 112px;
  flex: none;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 20px;
}
.rail > svg:first-child { margin-bottom: 18px; }
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
  padding: 9px 0;
  margin-bottom: 10px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
}
.rail-item .symbol { width: 30px; height: 30px; }
.rail-item.selected { background: var(--selection); }
.rail-gap { flex: 1; min-height: 40px; }

.tablet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tablet-head { display: flex; align-items: center; padding: 16px 28px; }
.tablet-head .round {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.tablet-head .round .symbol { width: 32px; height: 32px; }
.tablet-head .round.tinted { background: var(--tint); }
.tablet-head .period { flex: 1; text-align: center; }
.tablet-head .period b { display: block; font-size: 32px; line-height: 1.18; }
.tablet-head .period span { font-size: 16px; font-weight: 700; color: var(--coral); }

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0 100px 24px 18px;
}
.week-column { border-radius: 22px; padding: 5px; display: flex; flex-direction: column; gap: 8px; }
.week-column.today { background: rgba(246, 107, 93, 0.07); }
.week-head { background: var(--sand); border-radius: 16px; padding: 10px 0; text-align: center; }
.week-head.today { background: var(--coral); color: var(--aubergine); }
.week-head .day { font-size: 16px; }
.week-head .number { font-size: 22px; font-weight: 700; }
.event-card {
  background: var(--surface);
  border: 2px solid rgba(246, 107, 93, 0.65);
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.event-card.sage { border-color: rgba(131, 182, 146, 0.65); }
.event-card.sun { border-color: rgba(255, 200, 87, 0.65); }
.event-card.sky { border-color: rgba(112, 169, 232, 0.65); }
.event-card img {
  width: 100%;
  /* Without height:auto the image's height attribute wins and the square
     becomes a tower: the ratio only applies when one of the two sides is
     open. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16%;
  display: block;
}
.event-card .what {
  font-size: 14px;
  overflow-wrap: anywhere;
  font-weight: 700;
  text-align: center;
  width: 100%;
  min-height: 2.6em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card .clock { width: 100%; aspect-ratio: 1; }
.event-card .time { font-size: 15px; white-space: nowrap; }

.tablet-action {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--aubergine);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-action);
}
.tablet-action .symbol { width: 36px; height: 36px; stroke-width: 2.6; }

/* ----------------------------------------------------------- Picture cards -- */

.picture-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
}
.picture-cards figure {
  margin: 0;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.picture-cards img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.picture-cards figcaption { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.picture-cards .title { font-size: 21px; font-weight: 700; }

/* ---------------------------------------------------------------- Features -- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 36px 28px;
  margin-top: 40px;
}
.features > div { display: flex; flex-direction: column; gap: 10px; }
.features .symbol { width: 34px; height: 34px; color: var(--coral); }
.features h3 { margin: 0; font-size: 22px; }
.features p { margin: 0; color: var(--quiet); }

/* ------------------------------------------------------------------- Steps -- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps .step-number {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--aubergine);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.steps b { display: block; font-size: 20px; }
.steps span { color: var(--quiet); }

/* ------------------------------------------------------------ Browser view -- */

.browser {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 620px;
}
.browser-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 2px solid var(--line);
}
.browser-head .name { font-size: 21px; font-weight: 700; }
.browser-head .save-state { margin-left: auto; color: var(--quiet); font-size: 15px; }
.browser-head .person { font-weight: 700; font-size: 15px; }
.browser-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px 0; }
.browser-row .month { font-size: 20px; font-weight: 700; }
.browser-row .round {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--line);
}
.browser-row .round .symbol { width: 18px; height: 18px; }
.browser-row .new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--aubergine);
  font-weight: 700;
}
.browser-row .new .symbol { width: 16px; height: 16px; stroke-width: 2.6; }
.tabs { display: flex; gap: 8px; padding: 14px 20px 0; flex-wrap: wrap; }
.tabs span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid var(--line);
}
.tabs span.selected { border-color: var(--text); background: var(--sun); color: var(--aubergine); font-weight: 700; }
.browser-week {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 20px 24px;
}
.browser-day {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  /* The replica should show what the interface looks like — not how text
     runs out of a card. */
  min-width: 0;
  overflow: hidden;
}
.browser-day > b { font-weight: 700; }
.browser-chip {
  display: flex;
  align-items: center;
  /* Without min-width:0 a flex item never shrinks below its content: the time
     then stood outside the card instead of wrapping. And if it does get
     tight, it slides under the picture — cut off would be worse than wrapped,
     and overflowing worst. */
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--surface-deep);
  border: 2px solid var(--line);
  border-left: 8px solid var(--coral);
  border-radius: 10px;
  padding: 4px 6px;
  font-size: 14px;
}
.browser-chip.sage { border-left-color: var(--sage); }
.browser-chip.sun { border-left-color: var(--sun); }
.browser-chip.sky { border-left-color: var(--sky); }
.browser-chip img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }

/* ----------------------------------------------------------------- Figures -- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 28px;
}
.figures > div { display: flex; flex-direction: column; gap: 6px; }
.figures b { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; color: var(--sun); }

/* -------------------------------------------------------------- Info cards -- */

.info-cards { display: flex; flex-direction: column; gap: 18px; }
.info-cards > div {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 20px;
}
.info-cards .symbol { width: 30px; height: 30px; color: var(--coral); }
.info-cards b { display: block; font-size: 20px; }
.info-cards span { color: var(--quiet); }

/* ----------------------------------------------------------------- Closing -- */

.closing {
  margin: 0 var(--margin) clamp(48px, 6vw, 88px);
  background: var(--sun);
  /* A coloured surface: the text stays aubergine, even when the page is dark. */
  color: var(--aubergine);
  border-radius: 36px;
  padding: clamp(32px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
}
.closing > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; }
.closing h2 { margin: 0; font-size: clamp(30px, 4.4vw, 44px); }
.closing p { margin: 0; font-size: clamp(18px, 2vw, 20px); }
.closing .footnote { color: inherit; }

/* ------------------------------------------------------------------ Footer -- */

.site-footer {
  border-top: 2px solid var(--line);
  background: var(--surface);
  padding: 32px var(--margin);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--quiet);
  font-size: 16px;
}
.site-footer .brand { color: var(--text); font-weight: 700; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .imprint { margin-left: auto; }

/* ----------------------------------------------------------- Small screens -- */

/* Measured on a phone with 412 CSS pixels (Pixel 8/9/10): the header was
   262px high, the menu ran over three lines — a third of the screen before
   the first sentence. The controls (brand, three jump links, language,
   theme, download) simply do not fit side by side there: the three jump
   links alone measure 372px together. */
@media (max-width: 640px) {
  .site-footer .imprint { margin-left: 0; }
}

/* The limit is 900 and not 640: measured, the full navigation with the brand
   needs about 1060px to fit on one line. On a tablet in portrait (768px) the
   header was otherwise 214px high — three lines before the page begins. */
@media (max-width: 900px) {
  .site-header { gap: 10px 12px; padding: 12px var(--margin); }
  .site-header .brand { font-size: 22px; gap: 10px; }
  .site-header .brand .brand-mark { width: 34px; height: 34px; }

  .site-header nav { width: 100%; margin-left: 0; gap: 10px; flex-wrap: nowrap; }

  /* The three jump links stay away here. This page has three short sections
     right after one another — on a phone one scrolls there faster than one
     aims, and a jump menu costs more space than it brings. Heading
     navigation, the main route for screen readers, stays untouched. */
  .site-header nav a:not(.btn) { display: none; }

  /* The call to action takes the rest of the line: half a button at the edge
     looks like a mistake, a whole one like an invitation. Capped at the top,
     otherwise it stretches to 551px on a tablet in portrait and looks less
     like a button than a bar. */
  .site-header nav .btn-primary { flex: 1 1 auto; min-width: 0; max-width: 360px; }
  .site-header nav #theme-button, .site-header nav .language-button { flex: none; }

  /* Four day columns on 371px are 75px wide each — the time in the chip stuck
     out of its card by 28px. Two columns show the same four days, only
     legibly. */
  .browser-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below 400px it gets tight: measured, "Get it for Android" had 180px left
   and its text needed 194 — the button broke into two lines, 67px high.
   Narrower padding and one type size less are enough; the 48px touch height
   stays, and nothing disappears. The word of the theme switch goes, its
   symbol and aria-label stay. */
@media (max-width: 400px) {
  .site-header nav { gap: 8px; }
  .site-header nav .btn-small { padding: 6px 14px; font-size: 16px; gap: 8px; }
  #theme-word { display: none; }
}

/* Whatever is operated with a finger is at least 48px high — the rule from
   REQUIREMENTS.md applies to the app, and there is no reason the page behind
   it should fall short. Measured, the footer links were 24px, the jump links
   42px. On "pointer: coarse" rather than width: it is about the finger, not
   the screen — a 1024px tablet is tapped just the same. */
@media (pointer: coarse) {
  .site-header .brand,
  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
}

/* The jump links need the same — but only where they still exist. Without
   the second condition this rule sets "display: inline-flex" on elements
   that just got "display: none" above, and brings them back on every phone:
   measured 504px of content in a 360px window. Later in the sheet wins at
   equal specificity. */
@media (pointer: coarse) and (min-width: 901px) {
  .site-header nav a:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
}