/* Parkodoro site — shared by the landing, support and privacy pages.
   The page background is exactly the colour the screenshots were shot over
   (the panel's material blends with what's behind it), so keep --bg in sync
   with any reshoot: #f3f3f5 light, #121214 dark. */

:root {
  color-scheme: light;

  --page: 1080px;
  --gutter: 24px;
  /* Side padding that centres a full-width element's content on the page. */
  --edge: max(var(--gutter), (100% - var(--page)) / 2);
  /* 36 body ems (not each element's own), and never more than the room there
     is: a <pre>'s fit-content width is its longest line. */
  --measure: min(calc(var(--fz) * 36), 100%);
  --space: 8px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fz: 17px;
  --fz-lead: 20px;
  --fz-small: 14px;
  --fz-smaller: 13px;
  --lh: 1.55;

  --bg: #f3f3f5;
  --text: #1d1d1f;
  --text2: rgba(29, 29, 31, .62);
  --text3: rgba(29, 29, 31, .4);
  --line: rgba(29, 29, 31, .12);
  --fill: rgba(29, 29, 31, .055);
  --fill2: rgba(29, 29, 31, .09);
  --card: rgba(255, 255, 255, .62);
  --highlight: rgba(0, 0, 0, .1);
  --link: #0a64d8;
  --link-visited: #6a4fc4;
  --link-hover: #0a4fa8;
  --link-active: #e5484d;
  --invalid: #e5484d;
  --work: linear-gradient(135deg, #fa8750, #ff5854 40%, #ff418e);
  --rest: linear-gradient(135deg, #586cff, #4646ff 50%, #7d41ff);
  --str: #1f8a4c;
  --key: #3478f6;
  /* The window's own hairline edge and shadow, measured off a real screenshot;
     the captures stop at the window's bounds, so these are drawn here. */
  --panel-shadow: 0 0 0 .5px rgba(0, 0, 0, .34), 0 1px 3px rgba(0, 0, 0, .07), 0 8px 26px rgba(0, 0, 0, .13);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121214;
    --text: #f2f2f4;
    --text2: rgba(242, 242, 244, .62);
    --text3: rgba(242, 242, 244, .38);
    --line: rgba(242, 242, 244, .13);
    --fill: rgba(242, 242, 244, .06);
    --fill2: rgba(242, 242, 244, .1);
    --card: rgba(255, 255, 255, .035);
    --highlight: rgba(255, 255, 255, .16);
    --link: #4b9dff;
    --link-visited: #a98bff;
    --link-hover: #7db8ff;
    --link-active: #ff6b70;
    --str: #5fd08a;
    --key: #6aa5ff;
    --panel-shadow: 0 0 0 .5px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121214;
  --text: #f2f2f4;
  --text2: rgba(242, 242, 244, .62);
  --text3: rgba(242, 242, 244, .38);
  --line: rgba(242, 242, 244, .13);
  --fill: rgba(242, 242, 244, .06);
  --fill2: rgba(242, 242, 244, .1);
  --card: rgba(255, 255, 255, .035);
  --highlight: rgba(255, 255, 255, .16);
  --link: #4b9dff;
  --link-visited: #a98bff;
  --link-hover: #7db8ff;
  --link-active: #ff6b70;
  --str: #5fd08a;
  --key: #6aa5ff;
  --panel-shadow: 0 0 0 .5px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .5);
}

/* Screenshots come in pairs; the one for the other theme is hidden. */
.dark-only { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .light-only { display: none; }
  :root:not([data-theme="light"]) .dark-only { display: block; }
}
:root[data-theme="dark"] .light-only { display: none; }
:root[data-theme="dark"] .dark-only { display: block; }

/* Apple's continuous corners where the browser can draw them (Chromium only,
   for now): the closest superellipse to Apple's corner is superellipse(1.31)
   at 1.183 times the radius. Elsewhere --bdrs-x stays 1, a plain circle.
   Capsules are left alone: along their short side there is no room for the
   run-up. So are the app's window shots, whose real corners are circular. */
@property --bdrs-x {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@supports (corner-shape: superellipse(1.31)) {
  .callout, pre, .automation, .player, .try input, .phase, .call, .call .face, .keys kbd {
    --bdrs-x: 1.183;
    corner-shape: superellipse(1.31);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font: var(--fz)/var(--lh) var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

a {
  color: var(--link);
  text-decoration: underline 1px color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .2em;
  text-decoration-skip-ink: none;
  transition: color .2s ease-out, text-decoration-color .2s ease-out;
}
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; transition: none; }
a:active { color: var(--link-active); }

abbr { font-variant-caps: all-small-caps; letter-spacing: .04em; text-decoration: none; }
code { font: 600 .9em var(--mono); background: var(--fill); padding: .1em .38em; border-radius: 5px; white-space: nowrap; }
kbd {
  font: 600 .86em var(--font);
  display: inline-block; min-width: 1.6em; text-align: center;
  padding: .05em .4em; border-radius: 5px;
  background: var(--card); border: 1px solid var(--line); border-bottom-width: 2px;
}
/* As wide as its code, never wider than its column; a longer line scrolls
   inside. A column's own max-width replaces the 100% here, so it must cap at
   the available width too (as --measure does). */
pre {
  width: fit-content; max-width: 100%;
  font: 13px/1.65 var(--mono);
  background: var(--fill); border-radius: calc(10px * var(--bdrs-x));
  padding: 12px 14px; margin-bottom: calc(var(--space) * 2);
  color: var(--text2); overflow-x: auto;
  .str { color: var(--str); }
  .key { color: var(--key); }
  .dim { color: var(--text3); }
}

h1 { font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
h2 {
  font-size: clamp(26px, 3.6vw, 34px); line-height: 1.15;
  letter-spacing: -.018em; font-weight: 750; margin-bottom: calc(var(--space) * 2);
  text-wrap: balance;
  code { font-size: .9em; }
}
h3 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin-bottom: var(--space); }
main p { max-width: var(--measure); color: var(--text2); margin-bottom: calc(var(--space) * 1.75); }
main p b { color: var(--text); font-weight: 600; }

/* ---------- the menu bar ---------- */

.menubar {
  position: relative; z-index: 20;
  display: flex; align-items: center;
  height: 30px;
  /* Its items' padding included, the first and last labels line up with the
     page's content. */
  padding-inline: calc(var(--edge) - 10px);
  /* No background of its own, as in macOS 26: the window's shadow reaches up
     across it, and only the items and their highlights show. */
  font-size: var(--fz-smaller);

  a, button, .app-name, .clock {
    color: inherit; font: inherit; background: none; border: 0; text-decoration: none;
    height: 24px; padding: 0 10px;
    border-radius: 12px;  /* capsules, as in the macOS 26 menu bar */
    display: inline-flex; align-items: center; gap: 4px; cursor: default;
  }
  a, button { transition: background-color .2s ease-out; }
  a:hover, button:hover, [aria-current="page"], [aria-expanded="true"] { background: var(--highlight); transition: none; }
  .app-name { font-weight: 700; }
  nav { display: contents; }
  .status { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
  .status svg { width: 18px; height: 18px; display: block; }
  .status .time { min-width: 3.1em; }
  .status .time:empty { display: none; }
  .clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* Three-state theme switch: system → dark → light. The icon is one sprite of
   three glyphs (sun, half, moon), masked and slid by mask-position. */
.theme-switch::before {
  content: ""; width: 16px; height: 16px;
  background: currentColor;
  mask: url(theme.svg) center / cover no-repeat;
}
:root[data-theme="dark"] .theme-switch::before { mask-position: right center; }
:root[data-theme="light"] .theme-switch::before { mask-position: left center; }

@media (max-width: 640px) {
  .menubar .secondary:not([aria-current]), .menubar .clock .date { display: none; }
}
@media (max-width: 360px) {
  .menubar .clock { display: none; }
}

/* ---------- footer ---------- */

.site-footer {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 3px calc(var(--space) * 3);
  margin-top: calc(var(--space) * 12);
  padding: calc(var(--space) * 3.5) var(--edge) calc(var(--space) * 5.5);
  border-top: 1px solid var(--line);
  color: var(--text3); font-size: var(--fz-small);

  a, a:visited { color: var(--text2); }
  .credit { grid-column: 1; font-size: var(--fz-smaller); }
  nav { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 6px calc(var(--space) * 2.75); }
}
@media (max-width: 640px) {
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { grid-column: 1; grid-row: auto; margin-top: calc(var(--space) * 1.5); }
}

/* ---------- small pages (support, privacy) ---------- */

.page {
  padding: calc(var(--space) * 8) var(--edge) 0;
  > * { max-width: var(--measure); }
  h1 { font-size: clamp(36px, 6vw, 52px); margin-bottom: 10px; }
  h2 { font-size: 24px; margin: calc(var(--space) * 5) 0 10px; }
  .subtitle { color: var(--text3); margin-bottom: calc(var(--space) * 4.5); }
  .path { font-weight: 600; color: var(--text); }
}
.page-head {
  display: flex; gap: 20px; align-items: center; margin-bottom: var(--space);
  img { width: 64px; height: 64px; }
  h1 { margin: 0; }
}

.faq {
  details { border-bottom: 1px solid var(--line); }
  summary {
    list-style: none; cursor: pointer;
    padding: 15px 28px 15px 0; position: relative;
    font-weight: 600; color: var(--text);
  }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: ""; position: absolute; right: 6px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3);
    transform: rotate(45deg); transition: transform .2s;
  }
  [open] summary::after { transform: rotate(225deg); margin-top: -2px; }
  p:last-child { margin-bottom: calc(var(--space) * 2); }
}

.callout {
  margin: calc(var(--space) * 3.5) 0; padding: 18px 20px;
  border-radius: calc(14px * var(--bdrs-x));
  background: var(--card); border: 1px solid var(--line);
  color: var(--text2);
  a { font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}