/* apps.exordix.com — legal document pages.
   Self-contained: no @import, no external fonts, no tracking. Optimized to
   read fully with JavaScript off and to print/save-as-PDF cleanly. */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8f6;
  --text: #14161a;
  --text-muted: #5b6169;
  --border: #e6e8e3;
  --accent: #c8ff3d;
  --accent-text: #14161a;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101114;
    --bg-soft: #17181c;
    --text: #f2f3f0;
    --text-muted: #9a9fa6;
    --border: #2a2c31;
    --accent: #c8ff3d;
    --accent-text: #101114;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 740px; margin: 0 auto; padding: 0 20px; }

/* header / chrome, shared with style.css */
header.site { padding: 28px 0 8px; border-bottom: 1px solid var(--border); }
header.site .top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.lang-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 3px; font-size: 13px; }
.lang-switch a { display: inline-block; padding: 4px 11px; border-radius: 999px; text-decoration: none; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; }
.lang-switch a.active { background: var(--accent); color: var(--accent-text); }
.lang-switch a:not(.active):hover { color: var(--text); }

.brand { display: inline-flex; align-items: baseline; gap: 2px; font-size: 20px; font-weight: 700; text-decoration: none; color: var(--text); }
.brand .mark { position: relative; }
.brand .mark::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -2px; height: 4px; border-radius: 2px; background: var(--accent); }

/* app icon mark, shared visual language with style.css (kept separate on purpose) */
/* The apps' real store tiles, drawn edge to edge: no inset and no ground of
   ours behind them, or the visitor stops recognising the icon they tapped in
   the store. The hairline is inset so it rides on top of the artwork —
   Caloryzor's tile is white and would otherwise bleed into the page. */
.app-icon {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border-radius: 22.5%; /* the iOS tile ratio: holds at 40px and at 68px alike */
  box-shadow: inset 0 0 0 1px var(--border);
}
.app-icon img { display: block; width: 100%; height: 100%; }
.app-icon--sm { width: 40px; height: 40px; }

.doc-icon { display: inline-flex; color: var(--text-muted); flex: none; }

.breadcrumbs { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }

.back-link { display: inline-flex; align-items: center; gap: 6px; margin: 28px 0; font-size: 14px; color: var(--text-muted); text-decoration: none; }
.back-link:hover { color: var(--text); }

main { padding: 0 0 80px; }

/* document typography: single column, generous size, for reading & print */
article.doc { max-width: 68ch; font-size: 18px; }

/* The text column must be allowed to shrink below its intrinsic width,
   or a long unbreakable word (e.g. "конфиденциальности") pushes the whole
   page wider than the viewport on phones. */
.doc-head > div { min-width: 0; }
.doc-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* Not a flex container: flex would stop long words from wrapping, which
   overflows narrow phones on locales with long compound words. */
article.doc h1 { font-size: 30px; font-weight: 700; margin: 6px 0 6px; letter-spacing: -0.01em; overflow-wrap: break-word; }
article.doc .updated { color: var(--text-muted); font-size: 15px; margin-bottom: 0; }

article.doc h2 {
  font-size: 21px; font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: 28px; margin: 36px 0 14px;
  scroll-margin-top: 20px;
}
article.doc h2:first-of-type { border-top: none; padding-top: 0; }

article.doc h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; scroll-margin-top: 20px; }

/* Hanging permalink: sits in the left margin so headings stay flush with
   the body text instead of being pushed right by an invisible glyph. */
article.doc h2, article.doc h3 { position: relative; }
article.doc .anchor {
  position: absolute;
  right: 100%;
  margin-right: 8px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0;
}
article.doc h2:hover .anchor,
article.doc h3:hover .anchor,
article.doc h2:focus-within .anchor,
article.doc h3:focus-within .anchor { opacity: 1; }

article.doc p { margin: 0 0 16px; }
article.doc ul { padding-left: 22px; margin: 0 0 16px; }
article.doc li { margin-bottom: 8px; }
article.doc a { color: var(--text); text-decoration-thickness: 1px; }

.placeholder-note {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.placeholder-note strong { color: var(--text); }
.placeholder-note a { color: var(--text); }

.doc-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-list.archive-list a { display: inline-flex; padding: 4px 0; color: var(--text-muted); text-decoration: underline; font-size: 15px; }

footer.site { border-top: 1px solid var(--border); padding: 24px 0 40px; color: var(--text-muted); font-size: 14px; }
footer.site a { color: var(--text-muted); }

/* print: single column, force light background, hide navigation chrome */
@media print {
  :root { --bg: #ffffff; --text: #000000; --text-muted: #333333; --border: #cccccc; }
  body { font-size: 12pt; }
  .lang-switch, .back-link, footer.site, .placeholder-note a[href^="/"]::after { display: none; }
  header.site { border-bottom: 1px solid #000; }
  article.doc { max-width: none; font-size: 12pt; }
  article.doc h2 { break-after: avoid; }
  article.doc .anchor { display: none; }
  a { color: #000; text-decoration: underline; }
  .wrap { max-width: none; padding: 0; }
  .app-icon { display: none; }
  .doc-head { border-bottom: 1px solid #000; padding-bottom: 10pt; margin-bottom: 14pt; }
  article.doc h1 { margin-top: 0; }
}

/* phones: smaller heading so long words fit, and allow breaking as a last resort */
@media (max-width: 560px) {
  article.doc { font-size: 17px; }
  article.doc h1 { font-size: 24px; overflow-wrap: break-word; }
  article.doc h2 { font-size: 19px; }
  .doc-head { gap: 12px; }
  article.doc .anchor { display: none; }
}