/*
 * The sign-in pages in Coho's identity: concept 03, "Six Percent"
 * (coho-concepts/docs/briefs/03-six-percent.md and docs/brand-rules.md).
 *
 * Dark by default. The server renders <html data-theme="dark"> unless the
 * `coho-theme` cookie says light, so nothing flashes; theme.js only switches
 * it and remembers the choice. Tokens are the concept site's, by name.
 */

/* FACES */
/* FACES */
/* FACES */

/* Served from here, not from Google, on a page that takes a password. */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  /* block: a wordmark that flashes in Georgia and reflows is worse than one 80ms late (brand rules) */
  font-display: block;
  src: url(fonts/pt-serif-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* TOKENS */
/* TOKENS */
/* TOKENS */

/* Dark first, because dark is the default. */
:root {
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg: #101419;            /* --ground-dk */
  --panel: #182028;         /* --read-dk */
  --panel-line: #26323E;
  --text: #FBFAF8;
  --head: #FBFAF8;
  --muted: #8FA9BC;         /* --slate-dk, about 7.5:1 on the ground */
  --field: #101419;
  --field-line: #8FA9BC;
  --link: #8FA9BC;
  --focus: #8FA9BC;
  --btn: #8FA9BC;
  --btn-text: #101419;
  --btn-hover: #C5D1DC;
  /* Red is a signal, never a surface or body text: only the error rule uses it. */
  --signal: #D9453F;        /* --red-dk */
  --notice: #8FA9BC;
  --coho-slate: #8FA9BC;
  --coho-red: #D9453F;
  --word: #FBFAF8;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #FBFAF8;            /* --paper */
  --panel: #E4E9EE;         /* --fog, the reading slab */
  --panel-line: #CBD5DF;
  --text: #15181C;          /* --ink */
  --head: #1E2935;          /* --slate-ink */
  --muted: #566A80;         /* --slate-mid */
  --field: #FBFAF8;
  --field-line: #566A80;
  --link: #3A4E63;
  --focus: #3A4E63;
  --btn: #3A4E63;           /* --slate, the working colour */
  --btn-text: #FBFAF8;
  --btn-hover: #2A3847;
  --signal: #9E1B1F;        /* --red */
  --notice: #3A4E63;
  --coho-slate: #3A4E63;
  --coho-red: #9E1B1F;
  --word: #15181C;
  color-scheme: light;
}

/* BASE */
/* BASE */
/* BASE */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A column: the panel, then the legal footer under it, both centred. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 16px;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/26px var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.panel {
  width: 100%;
  max-width: 416px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 32px;
}

/* THE LOCKUP */
/* THE LOCKUP */
/* THE LOCKUP */

/* Every measurement from --h (docs/coho-lockup.css). */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.coho-lockup { --h: 24px; display: inline-flex; align-items: flex-end; gap: calc(var(--h) * 0.1295); color: var(--word); text-decoration: none; }
.coho-mark { display: inline-flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; height: var(--h); width: calc(var(--h) * 2); }
.coho-mark > i { display: block; height: 47%; flex-shrink: 0; }
.coho-mark > i:first-child { background: var(--coho-slate); }
.coho-mark > i:last-child { background: var(--coho-red); }
.coho-word {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.07em;
  font-size: calc(var(--h) * 1.32979);
  margin-bottom: calc(var(--h) * -0.1642);
}

.theme-toggle {
  font: 500 13px/1 var(--sans);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--panel-line);
  padding: 8px 10px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--field-line); }

/* TYPE */
/* TYPE */
/* TYPE */

/* PT Serif headings on the --h scale, tracking -0.03em. */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(24px * 1.32979);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--head);
  margin: 0 0 20px;
  text-wrap: balance;
}
p { margin: 0 0 16px; }
strong { font-weight: 600; }

/* FORMS */
/* FORMS */
/* FORMS */

form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
form.secondary { border-top: 1px solid var(--panel-line); padding-top: 20px; margin-top: 4px; }

label { font-weight: 600; font-size: 14px; line-height: 20px; margin-top: 12px; }
.optional { font-weight: 400; color: var(--muted); }

input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: 400 16px/1 var(--sans);
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 0;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.hint { font-size: 14px; line-height: 20px; color: var(--muted); margin: 4px 0 0; }
/* The slug line when it says no: in the signal colour, without the boxed alert `.error` draws. */
.hint.refused { color: var(--signal); }

/* color-scheme: light, in both themes. The widget's frame is a light-scheme
   document; inside a dark-scheme page a browser paints a mismatched frame on an
   opaque white canvas, which showed as a white edge round the dark widget. */
.captcha { margin-top: 16px; min-height: 78px; color-scheme: light; }

button[type="submit"],
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 20px;
  padding: 0 20px;
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--btn-text);
  background: var(--btn);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
button[type="submit"]:hover, .button:hover { background: var(--btn-hover); }

button.quiet {
  color: var(--link);
  background: transparent;
  border: 1px solid var(--field-line);
}
button.quiet:hover { background: transparent; color: var(--text); }

.links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--text); }

/* Messages: a rule on the left, text in the body colour. Red marks the rule only. */
.error,
.notice {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 20px;
  background: var(--field);
  border-left: 3px solid var(--notice);
}
.error { border-left-color: var(--signal); }

/* Body colour, not --muted: the line that says what creating an account agrees to must be easy to read. */
.assent { font-size: 14px; line-height: 20px; margin: 16px 0 0; }

/* FOOTER */
/* FOOTER */
/* FOOTER */

.site-footer {
  width: 100%;
  max-width: 720px;
  margin-top: 24px;
  font-size: 13px;
  line-height: 20px;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

/* LEGAL PAGES */
/* LEGAL PAGES */
/* LEGAL PAGES */

/* A reading column: wider than a form, still about 75 characters a line. */
.panel.document { max-width: 720px; padding: 40px 48px 48px; }

.document .updated { color: var(--muted); font-size: 14px; line-height: 20px; margin-top: -8px; }

.document h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--head);
  margin: 40px 0 12px;
  scroll-margin-top: 24px;
  text-wrap: balance;
}
.document h3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--head); margin: 24px 0 8px; }

.document ul,
.document ol { margin: 0 0 16px; padding-left: 22px; }
.document li { margin-bottom: 6px; }
.document li > ul,
.document li > ol { margin: 6px 0 0; }

.document dl { margin: 0 0 16px; }
.document dt { font-weight: 600; color: var(--head); }
.document dd { margin: 0 0 12px; }

/* The plain-language summary at the top: a rule on the left, like a notice. */
.document .summary {
  background: var(--field);
  border-left: 3px solid var(--notice);
  padding: 16px 20px 4px;
  margin: 0 0 24px;
}
.document .summary ul { margin-bottom: 12px; }

.document .toc { font-size: 14px; line-height: 20px; margin: 0 0 8px; }
.document .toc ol { columns: 2 220px; column-gap: 32px; margin: 0; }
.document .toc li { break-inside: avoid; }

/* Tables scroll inside themselves on a phone, never the page. */
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
.document table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.document th,
.document td {
  text-align: left;
  vertical-align: top;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--panel-line);
  /* break-word, not anywhere: anywhere shrinks a column to a letter and splits every word in it. */
  overflow-wrap: break-word;
}
.document th:last-child,
.document td:last-child { padding-right: 0; }
.document thead th { color: var(--head); font-weight: 600; border-bottom-color: var(--field-line); }
.document tbody th { color: var(--head); font-weight: 600; }

.document code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

/* Disclaimers and limits of liability are set in capitals so they are conspicuous. */
.document .conspicuous { font-size: 14px; line-height: 22px; letter-spacing: 0.01em; }

@media (max-width: 480px) {
  body { padding: 24px 16px; }
  .panel { padding: 24px 20px; }
  .panel.document { padding: 24px 20px 32px; }
  .document th, .document td { padding-right: 8px; }
}