/* CoZoo landing — the mark, the line, and where we are. Same Graphik faces and
   text greys as the app (style.css). */

body.landing {
  height: 100%;
  overflow: auto;
  /* ONE of the palette, chosen per visit by landing.js — refreshing deals
     another. The value here is only what shows before that script runs, and
     the first of CalendarPalette.mainColors is as good a card as any.

     It cycled through all eight once, two seconds each. Even stepped rather
     than faded, a page that will not hold still is a page arguing with its own
     copy: the words say "a continuous timeline of care" while the background
     insists something is happening. Once per visit says the same thing about
     the palette without saying it over and over. */
  background: #1FB6A6;
}

/* style.css hides h1 outright ("the calendar IS the page"). The landing's is
   the whole point of it. */
body.landing h1 { display: block; }

/* ── The way in, on the top-right corner ──────────────────────────────── */

.site-head {
  /* THE TOP-RIGHT corner. The way IN belongs at the head of the page: it is the
     first thing someone arrives to do, and the mark and its line still have the
     middle of the page to themselves.
     (The way OUT is the opposite case and sits at the foot — see the <header>
     rule in style.css, which the schedule page uses.)

     `bottom: auto` on purpose: style.css pins every <header> for the app's own
     chrome, and an element given BOTH a top and a bottom stretches between them
     instead of sitting on either. */
  position: fixed;
  top: 0;
  bottom: auto;
  right: 0;
  left: auto;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  padding: 20px 24px;
}

.head-auth {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

/* Apple paints its own button in here; it sizes itself. */
.apple-slot:empty { display: none; }

/* Twice the button it was. Apple's own button is stretched to match it by
   .auth-slot, so the two stay the same size without being told twice. */
.app-button {
  appearance: none;
  font: 500 19px/1 "Graphik", -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(0, 0, 0, 0.9);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-radius: 999px;
  padding: 24px 44px;
  cursor: pointer;
}

.app-button:hover { background: #f6f7f9; }

/* SIGN IN, on the coloured page: line and letter only, so the colour shows
   through it. Scoped to the header — the same class dresses the Safari modal's
   Close and Copy link, which stand on a WHITE card, and white-on-white is an
   invisible button. */
.head-auth .app-button {
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.head-auth .app-button:hover { background: rgba(255, 255, 255, 0.12); }
.app-button:active { transform: scale(0.98); }

/* ── The page ─────────────────────────────────────────────────────────── */

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 96px 24px;
}

.mark {
  /* Shown AS IS: the artwork carries its own greys, so nothing here tints,
     fades or animates it.
     The only thing done to it is the box. The source is a square canvas with
     the lockup in its upper middle, so a square box hangs a third of a page of
     nothing beneath the mark; `cover` scales to the width and the offset
     centres the crop on where the lockup actually sits. */
  width: 260px;
  height: 122px;
  object-fit: cover;
  object-position: center 44%;
  margin-bottom: 22px;
}

/* Both lines are the page's one voice: same size, same white. Each sentence
   holds ONE line at any width — clamped against the viewport so a phone shrinks
   the type rather than breaking the sentence, with the stage's padding keeping
   air at the edges. */
.stage h1,
.status {
  /* A fixed 19px, not a clamp: it is three words that never need to wrap, and a
     line that resizes with the viewport reads as a headline. */
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

.stage h1 {
  max-width: none;
  margin-bottom: 10px;
}

.fine {
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  max-width: 26rem;
  margin-top: 20px;
}

/* ── Foot ─────────────────────────────────────────────────────────────── */

.site-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  font-size: 14px;
  color: #fff;
}

.foot-links {
  display: flex;
  gap: 22px;
}

.site-foot a {
  color: #fff;
  text-decoration: none;
}

.site-foot a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .site-head { padding: 14px 16px; }
  .mark { width: 210px; height: 99px; margin-bottom: 18px; }
  .site-foot { font-size: 13px; padding: 18px 16px; }
  .foot-links { gap: 16px; }
}


/* ── "Sign in with Safari" ─────────────────────────────────────────────── */
/* Raised by the sign-in button when Apple's flow cannot run in this browser.
   The button never stops offering to sign you in — this only says where. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.modal[hidden] { display: none; }

.modal-card {
  width: 100%;
  max-width: 26rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  padding: 36px 32px 28px;
}

.modal-glyph {
  width: 56px;
  height: 56px;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 20px;
}

.modal-card h2 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 8px;
}

.modal-card p {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* The committing action wears the app's selected chrome. */
.app-button.primary {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
}

.app-button.primary:hover { background: #000; }

/* ── Apple's button, wearing ours ─────────────────────────────────────── */
/* CloudKit paints a plain <div class="apple-auth-button"> (no iframe) with its
   own inline black-pill styling. Rather than restyle it — or forward a
   synthetic click, which its sign-in WINDOW can have blocked as a popup — ours
   is what you see and Apple's sits invisibly on top. The click that matters is
   still a real one, landing on Apple's own element. */

.auth-slot {
  position: relative;
  display: inline-block;
}

.auth-slot .app-button {
  display: inline-block;
}

/* An EMPTY slot must not eat the click: where Apple's button never mounted,
   ours is the real control (it opens the Safari modal, or says why not). */
.auth-slot > div[id^="apple-sign-"]:empty {
  pointer-events: none;
}

.auth-slot > div[id^="apple-sign-"] {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Apple sizes its button in inline styles, so stretching it to cover ours
   needs the override. */
.auth-slot > div[id^="apple-sign-"] .apple-auth-button {
  width: 100% !important;
  height: 100% !important;
}