/* floattask.com — shared styles, in the app's own look: Warm Paper and Dark, Source Serif
   headings with DM Sans body, cards that open with a soft pastel band, peach buttons. */
:root {
  --f-serif: 'Source Serif 4', Georgia, 'Iowan Old Style', serif;
  --f-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap: 1140px;
}
/* Colours come from tokens.css, generated from the app's design/tokens.json (Warm Paper,
   Dark, and Underwater for the deep-sea bands). The site's shorter names point at them;
   declared on .ground-underwater too, so they resolve against that band's palette. */
:root, .ground-underwater {
  --a-myday: var(--area-myday); --a-tasks: var(--area-tasks); --a-calendar: var(--area-calendar); --a-projects: var(--area-projects);
  --a-insights: var(--area-insights); --a-assistant: var(--area-assistant); --a-settings: var(--area-settings); --a-classes: var(--area-classes);
  --shadow: var(--shadow-site); --shadow-sm: var(--shadow-card);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
a { color: var(--gold-text); }
h1, h2, h3 { font-family: var(--f-serif); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
p { margin: 0; }
kbd { font: 500 .86em/1 var(--f-body); padding: 3px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); white-space: nowrap; }
.shot-l { display: var(--show-l); } .shot-d { display: var(--show-d); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

/* ---------- header & footer ---------- */
.top { display: flex; align-items: center; gap: 24px; padding-block: 18px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 700 22px/1 var(--f-serif); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.logo svg { color: var(--gold-text); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
.top nav a { color: var(--ink-2); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
footer { padding-block: 48px 120px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; color: var(--muted); font-size: 14px; }
footer a { color: inherit; text-decoration: none; } footer a:hover { color: var(--ink); }
footer .logo { font-size: 18px; }
footer .right { margin-left: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 14px; font: 600 15px/1 var(--f-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; color: var(--ink); }
.btn.primary { background: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.quiet { background: var(--surface); border-color: var(--line-strong); }
.btn.quiet:hover { border-color: var(--gold-text); }
.btn.small { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn svg { width: 18px; height: 18px; }

/* ---------- sections & cards ---------- */
section { padding-block: clamp(56px, 9vw, 104px) 0; }
.eyebrow { font: 600 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.sec-head { display: grid; gap: 12px; max-width: 640px; margin-bottom: 32px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.05; }
.sec-head p { color: var(--ink-2); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 12px 12px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.card > :not(.band):not(.stage) { margin-inline: 12px; }
.card .stage { margin: 0; }
.band { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; border-radius: 15px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--c, var(--gold)) 19%, var(--surface)), color-mix(in oklab, var(--c, var(--gold)) 7%, var(--surface))); }
.band h2, .band h3 { font-size: 21px; line-height: 1.1; }
.band .ico { width: 22px; height: 22px; color: color-mix(in oklab, var(--c, var(--gold)) 78%, var(--ink)); flex: none; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--ink-2); }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.ticks li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; border-radius: 5px; background: color-mix(in oklab, var(--c, var(--a-myday)) 40%, var(--surface)); border: 1.5px solid color-mix(in oklab, var(--c, var(--a-myday)) 70%, var(--surface)); box-sizing: border-box; }

/* pre-launch: html.prelaunch hides downloads/buy buttons and shows beta notes */
.prelaunch .launch-only { display: none !important; }
html:not(.prelaunch) .prelaunch-only { display: none !important; }
.beta-bar { background: color-mix(in oklab, var(--a-myday) 26%, var(--surface)); color: var(--ink); font-size: 14.5px; text-align: center; padding: 10px 16px; }
.beta-bar a { color: var(--gold-text); font-weight: 600; }

/* ---------- long-form pages (privacy, terms, contact) ---------- */
.page { max-width: 760px; padding-block: clamp(20px, 4vw, 40px) 0; display: grid; gap: 16px; }
.page h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; }
.page h2 { font-size: 1.45rem; margin-top: 22px; }
.page h3 { font-size: 1.1rem; margin-top: 8px; }
.page p, .page li { color: var(--ink-2); }
.page ul, .page ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.page .updated { font-size: 14px; color: var(--muted); }
.page .note { padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.page table { border-collapse: collapse; width: 100%; font-size: 15px; }
.page th, .page td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.page th { font-weight: 600; color: var(--ink); }
@media (max-width: 600px) { .top nav a:not(.btn) { display: none; } footer .right { margin-left: 0; } }

/* ---------- deep-sea bands ----------
   Warm Paper page with full-width bands in the Underwater theme (style-guide tokens only).
   .ground-underwater swaps the theme tokens locally, so cards, bands, text and buttons inside follow Underwater
   in both light and dark mode. */
.ground { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
  padding-bottom: clamp(56px, 9vw, 104px); }
/* breathing room before each band, so content above never touches its edge */
.ground { margin-top: clamp(56px, 9vw, 104px); }

/* ---------- cookie choice (consent.js) ---------- */
.consent { position: fixed; right: 16px; bottom: 16px; z-index: 300; width: min(380px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  padding: 18px 20px 20px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent p { margin: 0; color: var(--ink-2); }
.consent .consent-title { font: 700 19px/1.15 var(--f-serif); color: var(--ink); }
.consent a { color: var(--gold-text); font-weight: 600; }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .consent { animation: consent-rise .38s cubic-bezier(.2,.8,.2,1); } @keyframes consent-rise { from { transform: translateY(8px); opacity: 0; } } }

/* ---------- a note from the maker (home page) ---------- */
.letter-wrap { margin-top: clamp(32px, 5vw, 56px); }
.letter { max-width: 640px; margin-inline: auto; position: relative;
  background-color: var(--surface); border: 1px solid var(--line); border-radius: 6px 22px 22px 6px; box-shadow: var(--shadow-sm);
  padding: 44px 48px 40px 72px;
  background-image: linear-gradient(90deg, transparent 52px, color-mix(in oklab, var(--a-myday) 45%, transparent) 52px, color-mix(in oklab, var(--a-myday) 45%, transparent) 53.5px, transparent 53.5px),
    repeating-linear-gradient(180deg, transparent 0 33px, var(--line) 33px 34px);
  background-position: 0 0, 0 38px; }
.letter h2 { font: 700 26px/34px var(--f-serif); margin: 0 0 0; color: var(--ink); text-wrap: balance; }
.letter p { font: 400 19px/34px var(--f-serif); color: var(--ink); margin: 0 0 34px; }
.letter p:first-of-type { margin-top: 34px; }
.letter .sig { margin: 0; font-style: italic; font-weight: 600; color: var(--gold-text); }
.letter .sig span { display: block; font: 400 14px/34px var(--f-body); font-style: normal; color: var(--muted); }
@media (max-width: 600px) { .letter { padding: 32px 20px 28px 40px; background-image: linear-gradient(90deg, transparent 26px, color-mix(in oklab, var(--a-myday) 45%, transparent) 26px, color-mix(in oklab, var(--a-myday) 45%, transparent) 27.5px, transparent 27.5px), repeating-linear-gradient(180deg, transparent 0 33px, var(--line) 33px 34px); background-position: 0 0, 0 26px; } .letter p { font-size: 17.5px; } }