/* Flintty website: shared styles for every page (index.html, privacy.html). */

/* Fonts are served from this site, never from a font CDN, so a visit sends nothing to a third party.
   All three are under the SIL Open Font License; the texts are next to the files. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('fonts/big-shoulders-display-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Code';
  src: url('fonts/google-sans-code-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f1115;
  --ink: #f2ede6;
  --ink-2: rgba(242, 237, 230, 0.74);
  --ink-3: rgba(242, 237, 230, 0.62);
  --line: rgba(242, 237, 230, 0.10);
  --accent: #ff8a4c;
  --accent-ink: #1a0d05;
  --accent-text: #ff9d66;
  --footer: #140c07;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Google Sans Code', ui-monospace, Menlo, monospace;
  --display: 'Big Shoulders Display', Impact, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); }
a:hover { color: #ffc29e; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.contents { display: contents; }
.mono { font-family: var(--mono); }
.strong { color: var(--ink); }

.page { width: 100%; min-height: 100vh; overflow-x: hidden; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(15, 17, 21, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(242, 237, 230, 0.08); }
.site-nav { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.site-logo:hover { color: var(--ink); }
.site-links { display: flex; gap: 22px; margin-left: auto; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-links a { color: var(--ink-2); text-decoration: none; }
.site-links a:hover { color: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; border-radius: 10px; }
.btn:hover { color: var(--accent-ink); background: #ff9d66; }
.btn-small { margin-left: auto; font-size: 14px; padding: 11px 18px; border-radius: 8px; min-height: 44px; }

/* Footer */
.site-footer { background: var(--footer); padding: 40px 0; }
.site-footer-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(242, 237, 230, 0.66); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer-links a { color: var(--ink-2); }

/* A page of plain text, such as the privacy page */
.prose { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 48px); font-size: 17px; line-height: 1.7; color: rgba(242, 237, 230, 0.82); }
.prose h1 { margin: 0 0 24px; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 8vw, 88px); line-height: 0.9; text-transform: uppercase; color: var(--ink); }
.prose h2 { margin: 40px 0 8px; font-size: 22px; font-weight: 600; color: var(--ink); }
.prose p, .prose ul { margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }

/* Live window demo */
.ft-side, .ft-panes, .ft-panel { display: flex; }
.ft-show-sm { display: none; }
.ft-pbtn { color: var(--w-textTertiary); background: transparent; }
.ft-pbtn:hover { color: var(--w-textSecondary); }
.ft-pbtn[aria-pressed="true"] { color: var(--w-accent); background: var(--w-fillSelected); }
.ft-pbtn[data-panel="store"][aria-pressed="true"] { background: transparent; }
.theme-pick { border: 2px solid rgba(242, 237, 230, 0.12); }
/* "Make it yours": the theme buttons with a small copy of the window beside them (under them on a phone). */
.theme-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.theme-picks { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.theme-preview { flex: 1 1 420px; min-width: 0; display: flex; gap: 8px; padding: 10px; border-radius: 14px; background: var(--w-frame); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07); font-family: var(--sans); font-size: 13px; transition: background-color .2s; }
.tp-side { width: 196px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.tp-area { border-radius: 10px; background: var(--w-fillArea); border: 1px solid var(--w-separator); padding: 6px 4px 4px; display: flex; flex-direction: column; gap: 2px; }
.tp-row { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px 0 8px; border-radius: 7px; color: var(--w-textSecondary); }
.tp-lit { background: var(--w-fillSelected); color: var(--w-textPrimary); }
.tp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-pane { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 10px; background: var(--w-bg); font-family: var(--mono); font-size: 12px; line-height: 1.75; overflow: hidden; transition: background-color .2s; }
.tp-pane > div { white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { .theme-preview, .tp-pane { transition: none; } }
@media (max-width: 420px) { .tp-side { width: 150px; } .tp-pane { font-size: 11px; padding: 12px; } }
.theme-pick[aria-pressed="true"] { border-color: var(--accent); }
.ft-line { white-space: pre-wrap; min-height: 22px; }

/* The feature grid under "Make it yours": every card the same height, key chips lined up at the bottom. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.feature { padding: 22px; border-radius: 14px; background: rgba(242, 237, 230, 0.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.feature strong { font-size: 18px; font-weight: 600; }
.feature span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.key { align-self: flex-start; font-family: var(--mono); font-size: 13px; padding: 4px 9px; border-radius: 6px; background: rgba(242, 237, 230, 0.08); border: 1px solid rgba(242, 237, 230, 0.16); border-bottom-width: 2px; color: var(--ink); }
.feature .key, .feature .key-slot { margin-top: auto; }
.feature .key-slot { display: block; height: 28px; }
/* A group's top tab trades its icon for a fold chevron while pointed at or focused. */
.ft-chev { display: none; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.ft-group:hover .ft-chev, .ft-group:focus-within .ft-chev { display: flex; }
.ft-group:hover .ft-icon, .ft-group:focus-within .ft-icon { display: none !important; }
#spark { cursor: pointer; }

/* The hero's spark: the cursor blinks twice, then flashes white-hot under a warm haze. */
.run0 .fs-cursor { animation: fs-blink0 1s steps(1, end) both, fs-hot0 .9s ease-out 1s both; }
.run1 .fs-cursor { animation: fs-blink1 1s steps(1, end) both, fs-hot1 .9s ease-out 1s both; }
.run0 .fs-haze { animation: fs-haze0 1.8s ease-out 1s both; }
.run1 .fs-haze { animation: fs-haze1 1.8s ease-out 1s both; }
@keyframes fs-blink0 { 0%, 100% { opacity: 1 } 25%, 75% { opacity: .15 } 50% { opacity: 1 } }
@keyframes fs-blink1 { 0%, 100% { opacity: 1 } 25%, 75% { opacity: .15 } 50% { opacity: 1 } }
@keyframes fs-hot0 { 0% { fill: #ffffff; filter: drop-shadow(0 0 22px #ffc890) } 100% { fill: #ededed; filter: none } }
@keyframes fs-hot1 { 0% { fill: #ffffff; filter: drop-shadow(0 0 22px #ffc890) } 100% { fill: #ededed; filter: none } }
@keyframes fs-haze0 { 0% { opacity: 0 } 12% { opacity: 1 } 100% { opacity: 0 } }
@keyframes fs-haze1 { 0% { opacity: 0 } 12% { opacity: 1 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .run0 *, .run1 * { animation: none !important; } }

.ft-chips { display: none; }
@media (max-width: 760px) {
  .ft-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 10px 0 0 10px; }
  .ft-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--w-textSecondary); font-family: 'Geist', sans-serif; font-size: 14px; cursor: pointer; }
  .ft-chip[aria-selected="true"] { background: var(--w-fillSelected); color: var(--w-textPrimary); }
  .ft-body { min-height: 0 !important; }
  .ft-side { display: none; }
  .ft-panes { flex-direction: column; }
  .ft-panel { display: none; }
  .ft-hide-sm { display: none; }
  .ft-show-sm { display: inline; }
}

/* Release notes: a hero with the latest release on a card, then one article per release.
   The markup between the latest/releases markers is written by scripts/release-notes.swift. */
.site-links a[aria-current="page"], .site-footer-links a[aria-current="page"] { color: var(--ink); }
.release-hero { padding: clamp(56px, 9vw, 112px) 0 clamp(40px, 6vw, 72px); background: radial-gradient(900px 500px at 85% 100%, rgba(255, 138, 76, 0.16), transparent 70%), var(--bg); border-bottom: 1px solid var(--line); }
.release-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; }
.release-hero-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.release-hero-text h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(72px, 12vw, 168px); line-height: 0.84; text-transform: uppercase; color: var(--ink); }
.release-hero-text p { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }

.release-latest { flex: 0 1 340px; min-width: 260px; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border-radius: 18px; text-decoration: none; color: var(--ink); background: rgba(255, 138, 76, 0.08); border: 1px solid rgba(255, 138, 76, 0.35); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); transition: border-color .15s, background-color .15s; }
.release-latest:hover { color: var(--ink); border-color: var(--accent); background: rgba(255, 138, 76, 0.12); }
.release-latest-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.release-latest-version { font-family: var(--display); font-weight: 900; font-size: 72px; line-height: 0.9; }
.release-latest-headline { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.release-list { padding: clamp(24px, 4vw, 48px) 0 clamp(64px, 9vw, 120px); }
.release { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; padding: clamp(32px, 5vw, 56px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.release:last-child { border-bottom: 0; }
.release > :not(.release-head) { grid-column: 2; }
.release-head { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; }
.release-version { margin: 0; font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 0.9; }
.release-version a { color: var(--ink); text-decoration: none; }
.release-version a:hover { color: var(--accent-text); }
.release-head time { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.release-headline { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; font-weight: 500; color: var(--ink); }
.release h3 { margin: 24px 0 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.release ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.release li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.65; color: rgba(242, 237, 230, 0.80); }
.release li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.release li strong { color: var(--ink); font-weight: 600; }
.release code { font-family: var(--mono); font-size: 0.9em; padding: 1px 6px; border-radius: 5px; background: rgba(242, 237, 230, 0.08); color: var(--ink); }

@media (max-width: 760px) {
  .release { grid-template-columns: minmax(0, 1fr); }
  .release > :not(.release-head) { grid-column: 1; }
  .release-head { grid-row: auto; position: static; flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 12px; }
  .release-version { font-size: 44px; }
  .release-latest { flex-basis: 100%; }
}