/* Every page the server renders. Linked once from templates/base.html,
   which is what every template extends, so a rule here applies to all
   of them and nothing has to remember to include it.

   Small enough to have lived in a <style> block in that layout, which
   cost a copy of it in the body of every response and could not be
   cached on its own; as one asset under /static it is fetched once and
   then revalidated, and it changes the tag it is fetched under when it
   changes (blueprint/spec/tech.md). */

/* Colours and faces come from tokens.css (blueprint/spec/design.md),
   linked before this file by the layout, and the kit the signed-in
   pages are built from is filt.css, linked between the two; nothing
   here names a colour of its own. What is here is the public pages:
   the centred column, the shell with the lockup and the footer, and
   the legal pages' reading column. */

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--ground);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A page is one centred column: an optional icon, a title, a line under
   it. The homepage and the error page are both this shape, which is why
   the rules are named for the shape rather than for either page.

   Names are BEM — block, then __element, then --modifier. The point of
   it here is that a class says where it belongs: .page__title is part
   of .page and nowhere else, so it can be read, moved or deleted
   without reading the templates to find out what else uses it. Nesting
   and element selectors are what BEM exists to avoid, so a rule matches
   one class and specificity stays flat. */

.page {
  text-align: center;
  padding: 2rem;
}

.page__icon {
  /* Matches the corner radius iOS gives the same icon on a home
     screen, so the app looks like itself on the web too. */
  border-radius: 28px;
  display: block;
  margin: 0 auto 1.5rem;
}

.page__title {
  margin: 0;
  font-size: 2.5rem;
}

.page__lede {
  color: var(--ink-secondary);
  margin-top: 0.5rem;
}

.page__form {
  margin-top: 2rem;
}

/* One action per page is the web app's shape (blueprint/spec/web.md), so one
   button style carries it: system font, semibold, 44pt tall, a lime
   fill with ink on it, the primary action's colour (blueprint/spec/design.md).
   It sits on <button> and <a> alike, so it clears both elements'
   defaults. */
.page__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  /* Wide like the standard button: generous horizontal padding and a
     floor close to Apple's default width, so the label never looks
     cramped against the corners. */
  min-width: 210px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0 2.5rem;
  border: none;
  border-radius: 22px;
  background: var(--lime-bright);
  color: #12181F;
  text-decoration: none;
  cursor: pointer;
}

/* The Sign in with Apple button is Apple's, not the palette's: black
   on a light page and white on a dark one, the adaptive pairing their
   guidelines ask for, with the logo beside the label. */
.page__button--apple {
  /* Square, and taller than the rest, the shape the public pages were
     designed to (blueprint/spec/web.md, "The public shell"). The colours
     stay the system pair, so the button is black on paper and white on
     ink without naming either. */
  min-height: 56px;
  border-radius: 0;
  background: CanvasText;
  color: Canvas;
}

/* The Apple logo inside the button, sized to the type beside it: the
   glyph stands as tall as the font, raised slightly so its optical
   centre sits on the label's.

   It is masked rather than drawn. The file is one shape with no colour
   of its own, and the mask paints it in `currentColor`, so the glyph
   flips with the button the way an inline `fill="currentColor"` used
   to and an `<img>` could not. The URL is the unversioned path, since
   a stylesheet cannot ask Rust for the digest; that path revalidates
   against its ETag rather than being cached forever. */
.page__button-logo {
  /* An empty span is inline, and width and height do not apply to one.
     Being a flex item inside .page__button blockifies it, so the sizes
     below hold today, but they should not depend on the parent this
     sits in. */
  display: block;
  width: 1.35em;
  height: 1.35em;
  margin-top: -0.2em;
  background-color: currentColor;
  -webkit-mask: url("/static/apple-logo.svg") center / contain no-repeat;
  mask: url("/static/apple-logo.svg") center / contain no-repeat;
}

/* The action that ends something rather than starts it, sign out, End,
   Withdraw, steps back: ink on a hairline, no fill. */
.page__button--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}

/* The action that cannot be undone, deleting the account
   (blueprint/spec/web.md): terracotta, the palette's danger, filled
   rather than outlined so it does not read as one more quiet action in
   the column of them above it. */
.page__button--danger {
  background: var(--terracotta-dark);
  color: var(--ground-raised);
  border: none;
}

/* The way back from the deletion page, and the link to it from the
   profile: a plain line of text under the action, not a second button
   competing with it. */
.page__step {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

.page__step--danger a {
  color: var(--terracotta-dark);
}

/* What deleting takes, one line each. Listed rather than written as a
   sentence, because the point is that it is read. */
.delete__list {
  margin: 1.5rem auto;
  padding-left: 1.2rem;
  max-width: 26rem;
  color: var(--ink-secondary);
}

.delete__item {
  margin: 0.4rem 0;
}

/* The signature (blueprint/spec/design.md): where a person meets the product
   before they are in it, the invitation, the title sits on cyan. */
.page__signature {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 14px;
  background: var(--cyan-bright);
  color: #12181F;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- The public shell (blueprint/spec/web.md, "The public shell") ----

   The three pages anyone may read without signing in, the homepage and
   the two legal pages, share a shape the signed-in pages do not: a
   column the height of the window with the content in the middle and
   one footer at the bottom. `.site` is that column. The body centres
   it, so it asks for the full width rather than being positioned. */
.site {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The mark and the wordmark, always together and always in this order
   (brand/README.md). The wordmark is live text in the system face, set
   tight: the ascenders in f, l and t echo the three bars, which is why
   it is lowercase and why no other face is bundled. */
.lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lockup__mark {
  display: block;
  width: 56px;
  height: 56px;
}

.lockup__wordmark {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
}

/* The homepage: the lockup, what Filt is, and the one action, centred
   in what the footer leaves. */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 4.5rem;
}

.hero__tagline {
  max-width: 380px;
  margin: 1.25rem 0 0;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.hero__action {
  margin: 2.75rem 0 0;
}

/* The acceptance line, under every button that concludes the contract
   (blueprint/spec/web.md, "Legal pages"): the homepage's and the
   invitation's. Its own block rather than the hero's element, because
   those two pages are different blocks and the line is the same line.
   The footer links the same two pages, and on the invitation there is
   no footer to do it; either way a footer link cannot say what signing
   in means. Narrow, being a footnote to the button. */
.acceptance {
  max-width: 300px;
  margin: 1rem auto 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.acceptance a {
  color: var(--ink);
}

/* The legal pages carry the lockup small, as the way back to the
   homepage rather than as a title. */
.site-header {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
}

.site-header__home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.site-header__mark {
  display: block;
  width: 24px;
  height: 24px;
}

.site-header__wordmark {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1;
}

/* One footer under all three, wrapping on a narrow window. The legal
   links write in secondary ink; the page a reader is already on writes
   in full ink, which is the only state these pages have. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.78125rem;
  color: var(--ink-secondary);
}

.site-footer__link {
  color: var(--ink-secondary);
  text-decoration: none;
}

.site-footer__link--current,
.site-footer__company {
  color: var(--ink);
}

/* Who made it is one item, not three: the words and the link wrap
   together when the footer wraps, rather than the gap opening up
   inside the sentence. */
.site-footer__maker {
  white-space: nowrap;
}

.site-footer__company {
  text-decoration: none;
}

/* A legal page is a text to be read rather than an action to be taken,
   so it is a left-aligned column at reading width with a heading per
   clause. The one place the public pages set type. */
.legal {
  flex: 1;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  font-size: 0.96875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* When the page was last written, in the monospace face at the day
   band's setting (blueprint/spec/design.md, "Type"): the one number on
   the page a reader might compare against another version. */
.legal__updated {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.legal__title {
  margin: 0 0 2rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.15;
}

/* The clauses are set 32px apart. The heading carries all of it: the
   paragraph above it has a bottom margin of its own and the two
   collapse to the larger, being adjacent siblings in normal flow, so
   they never sum. 8px from a heading to its own first line. */
.legal__heading {
  margin: 2rem 0 0.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.legal__text {
  margin: 0 0 0.75rem;
}

.legal__list {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

.legal__item {
  margin-top: 0.5rem;
}