/* flowscalendar.com: a crisp workspace.
   Structure comes from surfaces: a near-white canvas, white panels, thin rules
   and barely-there shadows. Tide blue is the one working accent (links and
   buttons). Variety comes from small tinted icon chips, never tinted areas.
   SF Rounded is the brand voice and appears only on each page's h1; everything
   else is the system text font. Contrast is measured, not eyeballed: body,
   muted, link and button text are 4.5:1 or more on every surface, and chip
   glyphs and the edges of interactive things are 3:1 or more, light and dark. */

:root {
  color-scheme: light;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --rule: #e2e4e9;
  --line: #868c9b;
  --ink: #141a2a;
  --ink-2: #464e62;
  --ink-3: #5c6376;
  --accent: #2f64cc;
  --accent-hover: #2654b0;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgb(20 26 42 / 0.05);

  --tide: #2f64cc;     --tide-bg: #e8eef9;
  --lagoon: #0e8a83;   --lagoon-bg: #e4f2f1;
  --orchid: #8a4cc8;   --orchid-bg: #f2ebf9;
  --rose: #c43f6b;     --rose-bg: #f9eaef;
  --amber: #a8620a;    --amber-bg: #f5eee4;

  --glass-edge: rgb(255 255 255 / 0.7);

  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --wrap: 52rem;
  --gutter: 1rem;
  --pad: 1.25rem;
  --chip: 2.25rem;
  --chip-gap: 0.875rem;
}

/* Dark: deep neutral grounds, a lighter tide for the accent, the same names. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #1c2027;
    --rule: #2a2f38;
    --line: #6f7787;
    --ink: #eceef2;
    --ink-2: #b9bfcc;
    --ink-3: #9ba2b1;
    --accent: #86a8f5;
    --accent-hover: #a6c0fa;
    --accent-ink: #0b1430;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    --tide: #86a8f5;     --tide-bg: #293142;
    --lagoon: #4cc3b8;   --lagoon-bg: #1f3538;
    --orchid: #c39cf0;   --orchid-bg: #332f41;
    --rose: #f28bab;     --rose-bg: #3a2c36;
    --amber: #f0b562;    --amber-bg: #3a332b;
    --glass-edge: rgb(255 255 255 / 0.28);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #171a20;
  --surface-2: #1c2027;
  --rule: #2a2f38;
  --line: #6f7787;
  --ink: #eceef2;
  --ink-2: #b9bfcc;
  --ink-3: #9ba2b1;
  --accent: #86a8f5;
  --accent-hover: #a6c0fa;
  --accent-ink: #0b1430;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  --tide: #86a8f5;     --tide-bg: #293142;
  --lagoon: #4cc3b8;   --lagoon-bg: #1f3538;
  --orchid: #c39cf0;   --orchid-bg: #332f41;
  --rose: #f28bab;     --rose-bg: #3a2c36;
  --amber: #f0b562;    --amber-bg: #3a332b;
  --glass-edge: rgb(255 255 255 / 0.28);
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; --pad: 1.5rem; --chip: 2.5rem; --chip-gap: 1rem; }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

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

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

p { margin: 0 0 1rem; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
}
.skip:focus { top: 0.75rem; }

/* Type: one voice for the brand (h1), one for the work (everything else). */

h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2, h3 {
  font-family: var(--font-text);
  color: var(--ink);
  text-wrap: balance;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

h3, .h3 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Header and footer */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand img { width: 2rem; height: 2rem; }

.site-nav { display: flex; gap: 0.25rem; margin-right: -0.75rem; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 0.5em;
}

.site-footer {
  margin-top: 4.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding-block: 0.75rem 2rem;
}

.site-footer nav { display: flex; gap: 0 1.25rem; }

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink-2);
  text-decoration: none;
}
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* Surfaces */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Chips: a small tinted square with one glyph. The hue is set per chip. */

.chip {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--chip);
  height: var(--chip);
  border-radius: 0.625rem;
  color: var(--hue);
  background: var(--hue-bg);
}
.chip svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip.tide { --hue: var(--tide); --hue-bg: var(--tide-bg); }
.chip.lagoon { --hue: var(--lagoon); --hue-bg: var(--lagoon-bg); }
.chip.orchid { --hue: var(--orchid); --hue-bg: var(--orchid-bg); }
.chip.rose { --hue: var(--rose); --hue-bg: var(--rose-bg); }
.chip.amber { --hue: var(--amber); --hue-bg: var(--amber-bg); }

/* Lists of items inside one panel, separated by rules aligned with the text. */

.list { margin: 0; padding: 0; list-style: none; }

.item {
  position: relative;
  display: grid;
  grid-template-columns: var(--chip) 1fr;
  gap: var(--chip-gap);
  align-items: start;
  padding: 1.125rem var(--pad);
}
.item + .item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: calc(var(--pad) + var(--chip) + var(--chip-gap));
  border-top: 1px solid var(--rule);
}
.item p { margin: 0; color: var(--ink-2); max-width: 38em; }
.item h3, .item .h3 { margin-top: 0.125rem; letter-spacing: 0; }

/* Landing */

.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2.75rem;
  padding: 4.5rem 0 3rem;
}

.vessel { width: 8.5rem; height: auto; }
.vessel .glass-edge { stroke: var(--glass-edge); }

.lede {
  margin: 0;
  max-width: 33em;
  color: var(--ink-2);
  font-size: 1.25rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.notice {
  display: grid;
  grid-template-columns: var(--chip) 1fr;
  gap: var(--chip-gap);
  align-items: start;
  padding: 1.125rem var(--pad);
}
.notice p { margin: 0.375rem 0 0; color: var(--ink-2); }
.notice strong { color: var(--ink); font-weight: 600; }

.section { margin-top: 3.25rem; }
.section > .after { margin: 0.875rem 0 0; color: var(--ink-2); }

/* Documents: privacy, support, the sign-in page, 404 */

.doc-head { padding: 3.5rem 0 1.75rem; }
.doc-head h1 { margin: 0; font-size: clamp(2.125rem, 1.6rem + 2vw, 2.75rem); }
.doc-head .meta { margin: 0.625rem 0 0; color: var(--ink-3); font-size: 0.9375rem; }
.doc-head .lede { margin-top: 0.75rem; font-size: 1.125rem; }

.prose { overflow: hidden; }

.prose .strip {
  padding: 1.25rem var(--pad);
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.prose .strip p { margin: 0; max-width: 40em; }

.prose .body { padding: 0.25rem var(--pad) 1.5rem; }
.prose h2 { margin: 2.25rem 0 0.5rem; font-size: 1.25rem; }
.prose h2:first-child { margin-top: 1.75rem; }
.prose p, .prose li { max-width: 40em; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin: 0.375rem 0; padding-left: 0.25rem; }
.prose li::marker { color: var(--ink-3); }
.prose strong { font-weight: 600; }
.prose > .body > :last-child { margin-bottom: 0; }

/* Support questions: one panel, a rule between each question. */

.faq .q { padding: 1.375rem var(--pad); }
.faq .q + .q { border-top: 1px solid var(--rule); }
.faq h3 { margin-bottom: 0.375rem; }
.faq p, .faq li { max-width: 40em; color: var(--ink-2); }
.faq .q > :last-child { margin-bottom: 0; }
.faq ol { margin: 0 0 1rem; padding-left: 1.375rem; }
.faq li { margin: 0.25rem 0; padding-left: 0.25rem; }

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 1rem/1.2 var(--font-text);
  text-decoration: none;
}
.button:hover { background: var(--accent-hover); color: var(--accent-ink); text-decoration: none; }

/* Sign-in link page */

.signin { max-width: 34rem; padding: 1.5rem var(--pad); }
.signin p { color: var(--ink-2); }
.signin .actions { margin: 1.5rem 0 0; }
.signin .note { margin: 1.25rem 0 0; padding-top: 1.125rem; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 0.9375rem; }

/* Phone */

@media (max-width: 39.99rem) {
  .hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.25rem 0 2rem; }
  .vessel { width: 5.5rem; }
  .lede { font-size: 1.1875rem; }
  .section { margin-top: 2.5rem; }
  .doc-head { padding: 2.25rem 0 1.25rem; }
  .site-footer { margin-top: 3.5rem; }
}

/* The waves drift gently, unless motion is reduced. */

@media (prefers-reduced-motion: no-preference) {
  .wave { animation: drift 7s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: translateX(-6px); }
    to { transform: translateX(6px); }
  }
}