/* MinTick website. One stylesheet for every page, in the app's "Graphite and signal" look (same colours as
   Theme.swift, the guide and the privacy notice). No outside fonts or scripts. Light and dark follow the system. */
:root {
  --bg: #F7FAFE;
  --raised: #F0F4F9;
  --hairline: #DADEE5;
  --text: #1B2025;
  --text2: #565B63;
  --meta: #6A6F76;
  --accent: #335AA6;
  --on-accent: #FFFFFF;
  --good: #337344;
  --risk: #8A5A00;
  --late: #C33A32;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111417; --raised: #1A1D21; --hairline: #262A30; --text: #E5E8EC; --text2: #A0A5AB; --meta: #878C93;
    --accent: #7FA4EA; --on-accent: #111417; --good: #76C788; --risk: #E3B04B; --late: #F07A70;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 52rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--bg); padding: 6px 10px; z-index: 10; }

/* Site header */
.site-header { border-bottom: 1px solid var(--hairline); }
.site-header .wrap { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 17px; text-decoration: none; margin-right: auto; }
.brand svg { flex: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.site-nav a { color: var(--text2); text-decoration: none; font-size: 15px; font-weight: 550; padding: 4px 8px; border-radius: 8px; }
.site-nav a:hover { color: var(--text); background: var(--raised); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.lang { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; padding: 3px; background: var(--raised); }
.lang a { color: var(--text2); text-decoration: none; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.lang a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }

/* Page body */
main.wrap { padding-block: 40px 64px; display: flex; flex-direction: column; gap: 44px; }
.page-header { display: flex; flex-direction: column; gap: 12px; }
h1 { font-family: var(--font-display); font-size: clamp(30px, 6vw, 40px); line-height: 1.12; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
.lede { font-size: 18px; color: var(--text2); margin: 0; max-width: 62ch; }
.updated { font-size: 13px; color: var(--meta); margin: 0; font-variant-numeric: tabular-nums; }
section { display: flex; flex-direction: column; gap: 14px; }
h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.3; margin: 0; text-wrap: balance; }
h3 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; }
p { margin: 0; max-width: 66ch; }
ul, ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 6px; max-width: 66ch; }
li::marker { color: var(--meta); }
strong { font-weight: 600; }
.muted, .note-text { color: var(--text2); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.button { display: inline-block; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 10px; padding: 9px 16px; border: 1px solid var(--accent); }
.button.primary { background: var(--accent); color: var(--on-accent); }
.button.secondary { color: var(--accent); background: transparent; border-color: var(--hairline); }
.button.secondary:hover { border-color: var(--accent); }
button { font: inherit; font-size: 14px; color: var(--accent); background: transparent; border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--accent); }

/* Home */
.hero { display: flex; flex-direction: column; gap: 16px; }
.badge { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); border: 1px solid var(--hairline); background: var(--raised); border-radius: 999px; padding: 3px 10px; }
.hero h1 { font-size: clamp(34px, 7vw, 48px); }
.platforms { font-size: 14px; color: var(--meta); margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 14px; }
.card { background: var(--raised); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card p { font-size: 15px; color: var(--text2); }

/* Guide */
.start { list-style: none; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; max-width: none; }
.start li { counter-increment: s; background: var(--raised); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.start li::before { content: counter(s); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.start span { color: var(--text2); font-size: 15px; }
figure { margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hairline); display: block; background: var(--raised); }
figcaption { font-size: 13px; color: var(--meta); }
figure.tall { max-width: 30rem; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 20px; align-items: start; }
.pair figure { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } .pair figure { max-width: 18rem; } }
.signals { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: var(--text2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.good { background: var(--good); } .dot.risk { background: var(--risk); } .dot.late { background: var(--late); }
.downloads { display: flex; flex-wrap: wrap; gap: 10px; }

/* Tables */
.table-wrap { overflow-x: auto; }
.table-wrap.boxed { border: 1px solid var(--hairline); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--meta); font-weight: 600; }
.boxed table { min-width: 520px; }
.boxed th, .boxed td { padding: 10px 14px; }
.boxed thead th { background: var(--raised); color: var(--text2); }
.boxed tbody tr:last-child td { border-bottom: 0; }
td.no { color: var(--good); font-weight: 600; }
td.dash { color: var(--meta); }
code, kbd { font-family: var(--mono); font-size: 14px; background: var(--raised); border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.keys td:first-child { white-space: nowrap; width: 9rem; }

/* Privacy */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.mode { background: var(--raised); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mode ul { gap: 6px; font-size: 15px; }
.tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.menu { font-weight: 600; white-space: nowrap; }

/* Contact boxes */
.note { background: var(--raised); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.email { font-family: var(--mono); font-size: 15px; background: var(--raised); border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 10px; user-select: all; overflow-wrap: anywhere; }
.note .email { background: var(--bg); }

/* Support: questions that fold open */
.faq { display: flex; flex-direction: column; gap: 8px; }
details { border: 1px solid var(--hairline); border-radius: 12px; background: var(--raised); }
summary { cursor: pointer; font-weight: 600; padding: 12px 16px; list-style-position: outside; margin-left: 1.1em; }
details > div { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }

/* Steps (beta) */
.steps { counter-reset: s; list-style: none; padding: 0; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; gap: 2px 8px; }
.steps li::before { content: counter(s); grid-row: span 2; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; display: grid; place-items: center; margin-top: 1px; }
.steps span { color: var(--text2); font-size: 15px; }

/* Footer */
.site-footer { border-top: 1px solid var(--hairline); font-size: 13px; color: var(--meta); }
.site-footer .wrap { padding-block: 18px 28px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.site-footer a { color: var(--text2); }

@media print {
  .site-header nav, .lang, .site-footer, .web-only, .skip { display: none; }
  body { background: #fff; color: #000; }
  a { color: inherit; }
}