/* ---------------------------------------------------------------
   Text-page template — support, privacy policy, terms.
   Deliberately plain: these pages are read by a lawyer, an App Review
   reviewer and an annoyed user. All three want legible text.
   --------------------------------------------------------------- */

/* Inter, served from this site (fonts/) instead of Google Fonts, so visitors'
   IP addresses are not sent to a third party. Variable font, weights 400–800;
   latin-ext carries the Czech diacritics. Licence: SIL Open Font License 1.1. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8f8;
  --card: #ffffff;
  --text: #0f1a20;
  --text-muted: #5d6b73;
  --text-invert: #ffffff;
  --text-invert-muted: #9fb0b8;
  --line: #e7eaea;
  --accent: #17a789;
  --accent-bright: #4ad3b4;
  --accent-soft: #eaf7f4;
  --ink-900: #0c1218;

  /* Callout blocks */
  --header-alpha: 78%;

  --note-bg: #f7f8f8;
  --todo-bg: #fff4d6;
  --todo-line: #d9a300;
  --todo-text: #6b4e00;

  --radius: 14px;
  /* Text column stays narrow for readability; the bar spans the site width. */
  --header-h: 78px;
  --max-width: 1080px;
  --text-width: 720px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Dark values feed both triggers: the OS setting (when the user has not
   chosen) and the choice stored by the theme menu. Same key as the home page,
   so a visitor's choice carries across the whole site. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1015;
    --bg-soft: #0e161d;
    --card: #131f27;
    --text: #eaf1f2;
    --text-muted: #93a5ad;
    --line: #24333d;
    --accent: #4ad3b4;
    --accent-soft: #14282a;
    --ink-900: #080d12;

    --header-alpha: 85%;

    --note-bg: #0e161d;
    --todo-bg: #241c07;
    --todo-line: #8a6f14;
    --todo-text: #e8cf87;
  }
}

:root[data-theme="dark"] {
  --bg: #0a1015;
  --bg-soft: #0e161d;
  --card: #131f27;
  --text: #eaf1f2;
  --text-muted: #93a5ad;
  --line: #24333d;
  --accent: #4ad3b4;
  --accent-soft: #14282a;
  --ink-900: #080d12;

  --header-alpha: 85%;

  --note-bg: #0e161d;
  --todo-bg: #241c07;
  --todo-line: #8a6f14;
  --todo-text: #e8cf87;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}
/* Content keeps a narrow measure but starts at the container's left edge, so
   headings line up under the logo instead of floating in the middle. */
main .wrap > *,
.doc-footer .wrap > * { max-width: var(--text-width); }

a { color: var(--accent); }
a:hover { text-decoration: underline; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Header — same bar as the rest of the site: transparent on the dark title
   panel, theme-coloured once the page scrolls. */
.doc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--text-invert);
  padding: 22px 0;
  transition: background 0.25s, border-color 0.25s;
}
.doc-header.is-stuck {
  background: color-mix(in srgb, var(--bg) var(--header-alpha), transparent);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
  color: var(--text);
}


/* ---------- Seam between dark panels and light sections ----------
   The panel masks itself: a plain rectangle above the seam and an SVG for the
   curved edge below it. Because the section masks its own background, the
   curve works in both themes with no second colour, and there is no overlaid
   strip that could leave a hairline gap.
   The SVG is authored in a 1200x100 box and stretched to --seam-drop, so the
   depth of the cut is a single number. */
:root { --seam-drop: 54px; }

.doc-hero {
  border-radius: 0;
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--seam-drop)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,0 C800,0 400,100 0,100 Z' fill='%23000'/%3E%3C/svg%3E")
      bottom / 100% var(--seam-drop) no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--seam-drop)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,0 C800,0 400,100 0,100 Z' fill='%23000'/%3E%3C/svg%3E")
      bottom / 100% var(--seam-drop) no-repeat;
}

/* Dark panel carrying the page title, so the bar has something to sit on. */
.doc-hero {
  background: var(--ink-900);
  color: var(--text-invert);
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 36px) 0 56px;
  margin-bottom: 56px;
}
.doc-hero h1 { margin-bottom: 10px; }
.doc-hero .doc-meta { margin-bottom: 22px; color: var(--text-invert-muted); }
.doc-hero .lead { margin-bottom: 0; color: var(--text-invert-muted); }
.doc-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.doc-header a { color: inherit; text-decoration: none; }
.doc-header .logo { font-weight: 800; letter-spacing: -0.04em; font-size: 1.1rem; }
.doc-header .logo span { color: var(--accent); }
.doc-header nav a { font-size: 0.9rem; color: var(--text-invert-muted); }
.doc-header nav a:hover { color: var(--text-invert); text-decoration: none; }
.doc-header.is-stuck nav a { color: var(--text-muted); }
.doc-header.is-stuck nav a:hover { color: var(--text); }
.doc-header nav a.lang-switch {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.doc-header nav a.lang-switch:hover { background: rgba(255, 255, 255, 0.1); }
.doc-header.is-stuck nav a.lang-switch { border-color: var(--line); }
.doc-header.is-stuck nav a.lang-switch:hover { background: var(--accent-soft); }


/* Breadcrumbs next to the logo: the logo is the way home, the trail says
   where you are. Replaces the in-page back link. */
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.crumbs {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  min-width: 0;
}
.crumbs li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The separator sits before every crumb, including the first — the logo is
   the home link, so the trail starts right after it. */
.crumbs li::before {
  content: "›";
  margin-right: 8px;
  opacity: 0.55;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { font-weight: 600; }
.doc-header .crumbs,
.doc-header .crumbs a { color: var(--text-invert-muted); }
.doc-header .crumbs [aria-current="page"] { color: var(--text-invert); }
.doc-header.is-stuck .crumbs,
.doc-header.is-stuck .crumbs a { color: var(--text-muted); }
.doc-header.is-stuck .crumbs [aria-current="page"] { color: var(--text); }

/* Content */
h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 10px;
}
h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 44px 0 12px;
}
h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 28px 0 8px;
}
p, li { color: var(--text); }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

.doc-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 40px;
}

.lead { font-size: 1.08rem; color: var(--text-muted); margin-bottom: 32px; }

.note {
  background: var(--note-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 28px 0;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--text); }

/* Fill-me blocks in the template. On live pages this style disappears with them. */
.todo {
  background: var(--todo-bg);
  border: 1px dashed var(--todo-line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 22px 0;
  color: var(--todo-text);
  font-size: 0.95rem;
}
.todo p:last-child { margin-bottom: 0; }
.todo strong { color: var(--todo-text); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 26px;
  font-size: 0.95rem;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { font-weight: 600; background: var(--bg-soft); }

/* Bug report button on the support page */
.btn-report {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 22px;
  border-radius: 999px;
  /* Dark text on the bright accent reads well in both themes; white on the
     accent would fall below the contrast minimum. */
  background: var(--accent-bright);
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.btn-report:hover { background: #5ee0c1; color: var(--ink-900); text-decoration: none; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn-report:hover { transform: none; } }

/* Footer */
.doc-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 48px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.doc-footer p { margin: 0 0 6px; }

@media (max-width: 620px) {
  :root { --seam-drop: 32px; }
  body { font-size: 16px; }
  main { padding: 40px 0 64px; }
  .doc-header nav { display: none; }
}

/* ---------- Theme menu (shared with the home page) ---------- */

.doc-header nav { display: flex; align-items: center; gap: 20px; }
.theme-menu { position: relative; }
.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-invert);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.18); }
/* Once the bar has a backing, the toggle switches to theme colours and
   shares the bar's opacity so it does not read as a heavier element. */
.is-stuck .theme-toggle {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg-soft) var(--header-alpha), transparent);
  color: var(--text);
}
.is-stuck .theme-toggle:hover,
.is-stuck .theme-toggle[aria-expanded="true"] { background: var(--accent-soft); }
.theme-toggle svg { grid-area: 1 / 1; transition: opacity 0.2s, transform 0.3s; }

/* The icon shows the theme currently in effect: sun for light, moon for dark. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.theme-toggle[data-effective="light"] .icon-sun,
.theme-toggle[data-effective="dark"] .icon-moon { opacity: 1; transform: none; }

.theme-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(8, 13, 18, 0.28);
}
.theme-list[hidden] { display: none; }
.theme-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.theme-list button:hover { background: var(--bg-soft); }
.theme-list .tick { width: 14px; color: var(--accent); opacity: 0; }
.theme-list [aria-checked="true"] { font-weight: 600; }
.theme-list [aria-checked="true"] .tick { opacity: 1; }

@media (max-width: 620px) {
  .doc-header nav { display: flex; }
  .doc-header nav a { display: none; }
  .doc-header nav a.lang-switch { display: inline-block; }
}