/* EucBuddy user manual — web components, built on the shared variables in ../style.css.
   Used by instructions/index.html (EN) and instructions/pl.html (PL). */

.manual-vars { --green:#4ade80; --yellow:#ffd27a; --pink:#f472b6; }

.doc { padding: 40px 0 24px; }

/* Header + language switch */
.doc-hero { margin-bottom: 28px; }
.doc-hero h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.03em; line-height: 1.05; margin: 8px 0 14px; }
.doc-hero .lede { max-width: 680px; }
.lang { display: inline-flex; gap: 6px; margin: 4px 0 6px; }
.lang a { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--fg-2); font-size: 13px; font-weight: 600; }
.lang a.on { background: var(--accent); border-color: var(--accent); color: #06121f; }

/* Smooth-scroll TOC jumps; offset so the sticky top nav doesn't cover the heading. */
html { scroll-behavior: smooth; }

/* Sections */
.sec { padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.kicker { display: inline-block; color: var(--accent); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.sec h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; margin: 0 0 6px; }
.rule { height: 3px; border-radius: 3px; margin: 8px 0 18px; max-width: 120px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--pink)); }

/* Two-column rows that collapse on mobile. Scoped to .doc so they don't clobber the
   site footer's .row (defined in ../style.css). */
.doc .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.doc .row.media-sm { grid-template-columns: 1.3fr 0.7fr; }
@media (max-width: 760px) { .doc .row, .doc .row.media-sm { grid-template-columns: 1fr; gap: 18px; } }

/* Cards */
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin: 0 0 12px; }
.card h4 { margin: 0 0 4px; font-size: 16px; color: var(--fg); }
.card p { margin: 0; color: var(--fg-2); font-size: 14.5px; }

ul.clean { margin: 6px 0 10px; padding: 0; list-style: none; }
ul.clean li { position: relative; padding-left: 18px; margin-bottom: 6px; color: var(--fg-2); font-size: 15px; }
ul.clean li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); }

/* Device screen frames */
.screen { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #000;
  box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.screen img { display: block; width: 100%; }
.cap { color: var(--muted); font-size: 12.5px; margin: 8px 2px 0; text-align: center; }
/* Screen-tile title sitting under its frame (uniform spacing keeps the grid rows aligned). */
.scr-h { margin: 12px 0 4px; font-size: 16px; }

/* Button chips */
.k { display: inline-block; min-width: 22px; text-align: center; font-weight: 700;
  color: #06121f; background: var(--accent); border-radius: 6px; padding: 1px 8px; font-size: 13px; }
.k.b { background: var(--green); }
.k.pw { background: var(--yellow); }

/* Tables */
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 4px 0 10px; }
table.t th, table.t td { text-align: left; padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--line); }
table.t th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
table.t td.h { white-space: nowrap; color: var(--fg); font-weight: 700; }
table.t .opt { color: var(--accent); font-weight: 700; }

/* Notes */
.note { border-left: 3px solid var(--accent); background: rgba(78,163,255,.06);
  border-radius: 8px; padding: 12px 15px; margin: 8px 0 12px; color: var(--fg-2); font-size: 14.5px; }
.note.warn { border-left-color: var(--yellow); background: rgba(255,210,122,.07); }
.note b { color: var(--fg); }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line); color: var(--fg-2); background: var(--bg-3); }
.pill.soon { color: var(--yellow); border-color: rgba(255,210,122,.4); background: rgba(255,210,122,.08); }

/* Table of contents */
.toc { columns: 2; column-gap: 28px; margin: 6px 0 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .toc { columns: 1; } }
.toc li { break-inside: avoid; padding: 7px 0; border-bottom: 1px dashed var(--line); color: var(--fg-2); font-size: 14.5px; }
.toc li b { color: var(--accent); margin-right: 8px; }
.toc a { display: block; color: inherit; text-decoration: none; transition: color .15s; }
.toc a:hover, .toc a:focus { color: var(--accent); }