/* MobiCAM — user manual page ("Kılavuz").
   Layered on top of styles.css, which owns the brand tokens, the fonts and the header/footer.
   Nothing here is inline, so the site CSP keeps `style-src 'self'`. */

/* ── Layout: sticky table of contents + a reading column ──────────────────────────────────── */
.man-wrap {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 28px 0 96px;
}

/* The reading column is deliberately narrow — a manual is read line by line, not scanned. */
.man-body { max-width: 76ch; }

/* ── Masthead ─────────────────────────────────────────────────────────────────────────────── */
.man-head {
  border-bottom: 1px solid var(--line);
  padding: 40px 0 26px;
}
.man-head h1 {
  font-size: var(--fs-title);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 10px 0 14px;
}
.man-head .lede { max-width: 62ch; margin: 0; }
.man-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.man-meta span {
  font-family: var(--mono);
  font-size: var(--fs-t1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ── Table of contents ────────────────────────────────────────────────────────────────────── */
.man-toc {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  padding-right: 18px;
}
.man-toc h2 {
  font-family: var(--mono);
  font-size: var(--fs-t1);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-weight: 400;
}
.man-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.man-toc li { counter-increment: toc; }
.man-toc a {
  display: flex;
  gap: 10px;
  padding: 6px 10px 6px 8px;
  border-radius: 7px;
  font-size: var(--fs-t3);
  line-height: var(--lh-lede);
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.man-toc a::before {
  content: counter(toc);
  font-family: var(--mono);
  font-size: var(--fs-t1);
  color: var(--ink-soft);
  opacity: .6;
  min-width: 1.4em;
  padding-top: 2px;
}
.man-toc a:hover { color: var(--ink); background: var(--surface); }
.man-toc a.on {
  color: var(--ink);
  border-left-color: var(--acc);
  background: var(--surface);
  font-weight: 500;
}
.man-toc a.on::before { color: var(--acc-ink); opacity: 1; }

/* Mobile disclosure — the same list, folded into a <details> so it needs no JS to open. */
.man-toc-m { display: none; margin: 18px 0 4px; }
.man-toc-m summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-t2);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  list-style: none;
}
.man-toc-m summary::-webkit-details-marker { display: none; }
.man-toc-m summary::after { content: " ▾"; }
.man-toc-m[open] summary::after { content: " ▴"; }
.man-toc-m .man-toc { position: static; max-height: none; border-right: 0; padding: 14px 0 0; }

/* ── Sections ─────────────────────────────────────────────────────────────────────────────── */
.man-body section { padding-top: 30px; scroll-margin-top: 76px; }
.man-body section + section { border-top: 1px solid var(--line); margin-top: 38px; }

/* A chapter head, one rank below a marketing page's section head — the manual is a document that is
   read, not a page that is scanned, and its widest heading sits in a 76ch column. */
.man-body h2 {
  font-size: var(--fs-argument);
  letter-spacing: var(--tr-sub);
  line-height: var(--lh-sub);
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.man-body h2 .num {
  font-family: var(--mono);
  font-size: var(--fs-t3);
  color: var(--acc-ink);
  letter-spacing: 0;
  flex: none;
}
.man-body h3 {
  font-size: var(--fs-d1);
  margin: 30px 0 8px;
  letter-spacing: var(--tr-small);
}
/* Was 14.5px — a heading set a pixel and a half SMALLER than the 16px paragraphs beneath it, and
   bold, so it read as a label rather than a level. Body size, bold: a run-in fourth level. */
.man-body h4 {
  font-size: var(--fs-t6);
  margin: 20px 0 6px;
  color: var(--ink);
}
.man-body p { margin: 0 0 12px; line-height: var(--lh-long); }
.man-body .sub { color: var(--ink-soft); margin-bottom: 20px; }
.man-body ul, .man-body ol { margin: 0 0 14px; padding-left: 22px; line-height: var(--lh-long); }
.man-body li { margin-bottom: 6px; }
.man-body li > ul, .man-body li > ol { margin-top: 6px; }
.man-body strong { font-weight: 600; }

/* Numbered click-by-click procedures — the backbone of the manual. */
ol.man-steps { list-style: none; padding-left: 0; counter-reset: step; margin: 0 0 18px; }
ol.man-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 42px;
  margin-bottom: 13px;
}
ol.man-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--on-acc);
  font-family: var(--mono);
  font-size: var(--fs-t2);
  display: grid;
  place-items: center;
}

/* Keyboard keys and on-screen button names. */
kbd {
  font-family: var(--mono);
  font-size: var(--fs-mono-inline);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  background: var(--surface-2);
  white-space: nowrap;
}
/* An on-screen name, underlined in amber. Unlike `kbd` this one must be allowed to break: a menu
   path such as "Ayarlar ▸ Hakkında ▸ Güncellemeleri denetle" is 43 characters and fits on no phone
   at all, so `white-space: nowrap` was not a preference the layout could honour — it was an
   instruction to hang off the edge. It did: the manual scrolled 2 px sideways at 390 px, 5 px at
   360 and 14 px at 320, which on a phone is a page that rubber-bands when you touch it. Wrapping at
   a space is the normal thing for prose; `overflow-wrap` is only the backstop for a single long
   token, and matches what `code, .path` below already do. */
.ui {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--acc);
  padding-bottom: 1px;
  overflow-wrap: break-word;
}
code, .path {
  font-family: var(--mono);
  font-size: var(--fs-mono-inline);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  word-break: break-word;
}

/* Call-outs. `note` explains, `tip` speeds you up, `warn` protects the work. */
.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.callout p:last-child { margin-bottom: 0; }
.callout .lbl {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-t1);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--acc-ink);
  margin-bottom: 5px;
}
.callout.warn { border-left-color: #b3261e; }
.callout.warn .lbl { color: #b3261e; }
:root[data-theme="dark"] .callout.warn { border-left-color: #f2917f; }
:root[data-theme="dark"] .callout.warn .lbl { color: #f2917f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout.warn { border-left-color: #f2917f; }
  :root:not([data-theme="light"]) .callout.warn .lbl { color: #f2917f; }
}

/* Tables — shortcut lists, field references, format matrices. */
.man-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: var(--fs-t4); }
.man-table th, .man-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: var(--lh-ui);
}
.man-table th {
  font-family: var(--mono);
  font-size: var(--fs-t1);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  border-bottom-color: var(--line-strong);
}
.man-table td:first-child { white-space: nowrap; }
.man-table td.wrapped { white-space: normal; }
.table-scroll { overflow-x: auto; margin-bottom: 18px; }
.table-scroll .man-table { margin-bottom: 0; }

/* Figures: labelled inline SVG diagrams (self-contained, theme-aware, never stale) and real
   screenshots of the running app. A diagram gets padding because it is drawn on the page's own
   surface; a screenshot carries its own dark background edge to edge, so `.man-fig-shot` drops the
   padding and lets the picture meet the border. */
.man-fig {
  margin: 4px 0 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
}
.man-fig svg { width: 100%; height: auto; display: block; }
.man-fig-shot { padding: 0; overflow: hidden; }
.man-fig-shot img { width: 100%; height: auto; display: block; }
.man-fig-shot figcaption { margin: 0; padding: 12px 16px 14px; }
/* A narrow dialog — Settings is 320 CSS px wide in the app — must not be stretched to the column
   width: upscaling a 665-px capture to 700 would only make a crisp screenshot blurry. Shown at its
   own size, centred, so the pixels stay 1:1 on a normal screen and sharp on a dense one. */
.man-fig-narrow img { max-width: 380px; margin-inline: auto; }
.man-fig figcaption {
  margin-top: 12px;
  font-size: var(--fs-t2);
  color: var(--ink-soft);
  line-height: var(--lh-ui);
}
.fig-fill { fill: var(--surface-2); }
.fig-line { stroke: var(--line-strong); }
.fig-acc { fill: var(--acc); }
.fig-acc-s { stroke: var(--acc); }
/* The only two type sizes on the site that are NOT on the scale, and they cannot be: these label
   `<text>` inside `<svg viewBox="0 0 720 400">`, so 11 and 9 are user units in a 720-wide coordinate
   space, not screen pixels. The figure is `width: 100%`, so what a reader actually sees is 11 × (the
   column width ÷ 720) — about 10.7px in a 700px column, something else again on paper. A scale token
   here would resolve to 11 *units* and go on looking right until the day the token is retuned for
   screens and silently rescales the diagrams. `deploy/audit-type.mjs` knows about these two by name. */
.fig-txt { fill: var(--ink); font-family: var(--geo); font-size: 11px; }
.fig-txt-s { fill: var(--ink-soft); font-family: var(--mono); font-size: 9px; }

/* A compact definition list for the glossary. */
.gloss { margin: 0 0 18px; }
.gloss dt { font-weight: 600; margin-top: 14px; }
.gloss dd { margin: 4px 0 0; color: var(--ink-soft); line-height: var(--lh-long); }

/* Back-to-top rule closing each chapter. */
.man-top {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: var(--fs-t1);
  letter-spacing: var(--tr-label);
  color: var(--ink-soft);
  text-decoration: none;
}
.man-top:hover { color: var(--acc-ink); }

/* ── Responsive ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .man-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; }
  .man-toc-d { display: none; }
  .man-toc-m { display: block; }
  .man-body { max-width: none; }
}

/* ── The one contact address on the site ───────────────────────────────────────────────────
   This slot used to be a hatched "not filled in yet" placeholder. It is now the address itself,
   and it is the only place it appears: yasal.html links here instead of repeating it. Mono and
   a size up, because it is the thing a reader came to this section for. */
.contact-line {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: var(--fs-d1);
  word-break: break-word;
}
/* No underline: `styles.css` sets `text-decoration: none` on every link and the accent colour is
   what marks one. Underlining this address alone would make it the only underlined link on the
   site. */
.contact-line a { color: var(--acc); }

/* ── Print: the manual is meant to end up on the workshop wall ────────────────────────────── */
@media print {
  .site-header, .site-footer, .man-toc-d, .man-toc-m, .man-top, .skip { display: none !important; }
  .man-wrap { display: block; padding: 0; }
  .man-body { max-width: none; }
  .man-body section { break-inside: auto; page-break-inside: auto; }
  .man-body h2 { break-after: avoid; page-break-after: avoid; }
  .man-body h3, .man-fig, .callout, .man-table { break-inside: avoid; page-break-inside: avoid; }
  a[href^="#"] { text-decoration: none; color: inherit; }
}

/* ---- the PDF: a download button, and a cover that exists only on paper ---- */
.man-dl { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.man-dl .mono { font-size: var(--fs-t2); }

/* Hidden on screen; @media print turns it on. */
.man-cover { display: none; }

@media print {
  .man-dl { display: none !important; }

  /* Paper is white. The cream is a screen colour, and printBackground (which the call-outs, the
     code spans and the key caps need to keep their fills) would otherwise flood every one of the
     39 pages with it — an odd-looking document and a lot of ink. Forcing the page white here keeps
     the component fills and loses only the canvas. */
  html, body { background: #fff !important; }

  .man-cover {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 92vh; break-after: page; page-break-after: always;
    text-align: left;
  }
  .man-cover .brand-mark { width: 54px; height: 54px; color: var(--ink); }
  .cover-brand { font-family: var(--geo); font-weight: 600; font-size: var(--fs-d4); margin-top: 14px; }
  .cover-title { font-size: var(--fs-d6); line-height: var(--lh-display); margin-top: 46px; letter-spacing: var(--tr-display); }
  .cover-sub { font-size: var(--fs-t5); color: var(--ink-soft); margin-top: 14px; }
  .cover-meta { font-size: var(--fs-t2); color: var(--ink-soft); margin-top: 30px; }

  /* The manual's own masthead is redundant once there is a cover. */
  .man-head { display: none !important; }
}