/* Rozcestník nápovědy help.pad.cz.
   Tokeny jsou stejné jako v návodech (assets/theme.css), aby portál i návod
   působily jako jedna věc. Vlastní třídy mají předponu p-, ať se nemíchají
   se styly návodu, který se otevírá v okně. */
:root {
  --primary: #09B3BF; --primary-bright: #23C8E6; --secondary: #0CA5B0;
  --navy: #0F2750; --ink: #4D4D4D; --muted: #6C81A5; --label: #636F83;
  --paper: #F6F8FA; --surface: #FFFFFF; --line: #D1E9E9; --line-soft: #DEE5E7;
  --hover: #EFF7F8; --signal: #EA5147;
  --r-card: 0.625rem;
  --shadow-panel: 0 0 10px 0 rgba(55,103,226,.1);
  --shadow-lift: 0 2px 4px 0 rgba(15,39,80,.1);
  --shadow-pop: 0 24px 60px -12px rgba(15,39,80,.28);
  --gutter: 40px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --navy: #F3F4F6; --ink: #E5E7EB; --muted: #9CA3AF; --label: #6B7280;
    --paper: #111827; --surface: #18212F; --line: #2D3A4A; --line-soft: #252F3E;
    --hover: #1E2D3D;
    --shadow-panel: 0 0 10px 0 rgba(0,0,0,.4);
    --shadow-lift: 0 2px 4px 0 rgba(0,0,0,.25);
    --shadow-pop: 0 24px 60px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --navy: #F3F4F6; --ink: #E5E7EB; --muted: #9CA3AF; --label: #6B7280;
  --paper: #111827; --surface: #18212F; --line: #2D3A4A; --line-soft: #252F3E;
  --hover: #1E2D3D;
  --shadow-panel: 0 0 10px 0 rgba(0,0,0,.4);
  --shadow-lift: 0 2px 4px 0 rgba(0,0,0,.25);
  --shadow-pop: 0 24px 60px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 18px/1.62 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .p-eyebrow, .p-brandline, .p-title, .p-hit-t, .p-mtitle {
  font-family: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
}
a { color: var(--secondary); }
.p-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------- horní lišta ---------------- */
.p-top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.p-top-in {
  max-width: 1240px; margin: 0 auto; padding: 13px var(--gutter) 11px;
  display: flex; align-items: center; gap: 22px;
}
.p-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.p-brand img { height: 26px; width: auto; display: block; }
.p-brandline {
  font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); padding-left: 13px; border-left: 1px solid var(--line);
}
.p-icon {
  margin-left: auto; width: 38px; height: 38px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  display: grid; place-items: center; padding: 0; font-size: 17px; line-height: 1;
}
.p-icon:hover { border-color: var(--primary); color: var(--primary); }
.p-icon::before { content: '\263D'; }
:root[data-theme='dark'] .p-icon::before { content: '\2600'; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .p-icon::before { content: '\2600'; }
}

/* ---------------- úvod a hledání ---------------- */
.p-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) 90px; }
.p-hero { padding: 56px 0 30px; }
.p-eyebrow {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--primary);
}
.p-hero h1 {
  margin: 0 0 16px; font-size: 46px; line-height: 1.14; font-weight: 700;
  color: var(--navy); letter-spacing: -.02em;
}
.p-hero h1 span { display: block; color: var(--muted); font-weight: 500; font-size: .62em; margin-top: 8px; }
.p-lead { margin: 0 0 28px; font-size: 19px; color: var(--label); }

.p-search { position: relative; display: block; }
.p-search input {
  width: 100%; font: inherit; font-size: 19px; color: var(--ink);
  padding: 18px 52px 18px 54px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-panel); -webkit-appearance: none;
}
.p-search input::placeholder { color: var(--muted); }
.p-search input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.p-search::before {
  content: '\1F50D'; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-size: 19px; opacity: .5; pointer-events: none;
}
.p-search input::-webkit-search-cancel-button { display: none; }
.p-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--hover); color: var(--muted); font-size: 14px;
}
.p-clear:hover { color: var(--signal); }

.p-chips {
  margin: 18px 0 0; font-size: 15px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.p-chips button {
  font: inherit; font-size: 15px; cursor: pointer; color: var(--secondary);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 99px; padding: 5px 14px;
}
.p-chips button:hover { border-color: var(--primary); background: var(--hover); }

/* ---------------- oblasti a výpis návodů ----------------
   Stejné řádky jako výběr kapitoly v příručce pro pacienta:
   číslo v kolečku, název s popiskem, počet kroků vpravo. */
.p-cat { padding-top: 46px; }
.p-cat-head { margin-bottom: 10px; }
.p-cat-head h2 { margin: 0; font-size: 25px; color: var(--navy); font-weight: 700; }
.p-cat-head p { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
.p-list {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-card); box-shadow: var(--shadow-lift); overflow: hidden;
}
.p-row {
  display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit;
  padding: 15px 22px; border-top: 1px solid var(--line-soft);
}
.p-row:first-child { border-top: 0; }
.p-row:hover, .p-row:focus-visible { background: var(--hover); outline: none; }
.p-n {
  flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.p-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-title { font-size: 18px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.p-perex { font-size: 15.5px; color: var(--label); line-height: 1.45; }
.p-row:hover .p-title { color: var(--primary); }
.p-meta { flex: 0 0 auto; font-size: 14px; color: var(--muted); white-space: nowrap; }

/* ---------------- výsledky hledání ---------------- */
.p-results { padding-top: 34px; }
.p-count { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.p-none { font-size: 18px; color: var(--label); max-width: 640px; }
.p-hit {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-card); padding: 18px 22px; margin-bottom: 14px;
  box-shadow: var(--shadow-lift);
}
.p-hit-t { font-size: 20px; font-weight: 600; color: var(--navy); text-decoration: none; }
.p-hit-t:hover { color: var(--primary); }
.p-hit-p { margin: 4px 0 0; color: var(--label); font-size: 16px; }
.p-hit-s { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.p-hit-s a {
  display: flex; gap: 10px; align-items: baseline; text-decoration: none;
  color: var(--ink); font-size: 15.5px; padding: 6px 10px; border-radius: 7px;
  background: var(--hover);
}
.p-hit-s a:hover { color: var(--primary); }
.p-hit-s span {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--primary); white-space: nowrap;
}

/* ---------------- pata ---------------- */
.p-help {
  margin-top: 56px; padding: 28px 30px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
}
.p-help h2 { margin: 0 0 8px; font-size: 21px; color: var(--navy); }
.p-help p { margin: 0; color: var(--label); font-size: 16.5px; }
.p-back {
  display: inline-block; background: var(--primary); color: #fff; text-decoration: none;
  padding: 12px 24px; border-radius: 99px; font-weight: 600;
}
/* ---------------- patička ----------------
   Obsah stejný jako na www.pad.cz (firma, kontakty, sociální sítě),
   ale v barvách a písmu nápovědy. */
.p-foot { border-top: 1px solid var(--line); background: var(--surface); }
.p-foot-in {
  max-width: 1240px; margin: 0 auto; padding: 34px var(--gutter) 40px;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.p-foot-col { display: flex; flex-direction: column; gap: 4px; }
.p-foot-name {
  margin: 0; font-family: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 700; color: var(--navy);
}
.p-foot-ic { margin: 0 0 10px; font-size: 14.5px; color: var(--muted); }
.p-foot-title {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.p-foot-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p-foot-contact li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.p-foot svg { width: 17px; height: 17px; flex: 0 0 17px; fill: var(--signal); }
.p-foot-contact a, .p-foot-links a { color: var(--ink); text-decoration: none; }
.p-foot-contact a:hover, .p-foot-links a:hover {
  color: var(--primary); text-decoration: underline;
}
.p-foot-soc { margin: 0 0 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.p-soc {
  width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center;
  background: var(--hover); border: 1px solid var(--line); cursor: pointer; padding: 0;
}
.p-soc:hover { border-color: var(--primary); background: var(--surface); }
.p-soc svg { fill: var(--muted); }
.p-soc:hover svg { fill: var(--primary); }
.p-foot-links { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: 14.5px; color: var(--muted); }
.p-foot-links a:not(:last-child)::after { content: ' ·'; color: var(--muted); }

/* ---------------- okno s návodem ---------------- */
.p-modal {
  width: min(1360px, 96vw); height: min(94vh, 1000px); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop);
}
.p-modal::backdrop { background: rgba(15, 39, 80, .55); backdrop-filter: blur(3px); }
.p-modal[open] { display: flex; flex-direction: column; }
.p-mhead {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.p-mtitle {
  font-size: 17px; color: var(--navy); font-weight: 600; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34%;
}
/* čárky s postupem — stejné jako v hlavičce samotného návodu */
.p-mdots { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; align-items: center; }
.p-mdots button {
  width: 26px; height: 7px; border: 0; padding: 0; border-radius: 99px;
  background: var(--line); cursor: pointer; transition: background .18s, transform .18s;
}
.p-mdots button:hover { transform: scaleY(1.6); }
.p-mdots button.on { background: var(--primary); }
.p-mdots button.now { background: var(--signal); transform: scaleY(1.7); }
.p-mdots button:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.p-mcount {
  flex: 0 0 auto; font-size: 14px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .p-mdots button { transition: none; } }
.p-mopen { font-size: 14.5px; text-decoration: none; color: var(--muted); white-space: nowrap; }
.p-mopen:hover { color: var(--primary); }
.p-mclose {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 99px; padding: 7px 16px; white-space: nowrap;
}
.p-mclose:hover { border-color: var(--signal); color: var(--signal); }
.p-mframe { flex: 1; width: 100%; border: 0; background: var(--paper); }

/* ---------------- menší obrazovky ---------------- */
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .p-hero { padding-top: 34px; }
  .p-hero h1 { font-size: 34px; }
  .p-lead { font-size: 17.5px; }
  .p-search input { font-size: 17px; padding: 15px 48px 15px 48px; }
  .p-row { padding: 13px 15px; gap: 12px; }
  .p-meta { display: none; }
  .p-foot-in { flex-direction: column; gap: 26px; }
  .p-foot-fb { flex-wrap: wrap; }
  .p-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .p-mopen, .p-mdots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p-card { transition: none; }
}

/* jediný návod v kategorii: název nese nadpis, řádek jen popis */
.p-title-solo { font-weight: 500; color: var(--ink); font-size: 16.5px; }
.p-row:hover .p-title-solo { color: var(--primary); }

/* okno s výběrem profilu na sociální síti (jako na www.pad.cz) */
.p-soc-modal {
  width: min(560px, 92vw); border: 0; border-radius: 14px; padding: 28px 30px 24px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
}
.p-soc-modal::backdrop { background: rgba(15, 39, 80, .55); backdrop-filter: blur(3px); }
.p-soc-title {
  margin: 0 0 20px; font-family: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  font-size: 20px; font-weight: 700; color: var(--navy); text-align: center;
}
.p-soc-grid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.p-soc-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px; border-radius: var(--r-card); text-decoration: none;
  background: var(--paper); border: 1px solid var(--line-soft); color: var(--navy);
  font-weight: 600; font-size: 15.5px;
}
.p-soc-tile:hover { border-color: var(--primary); color: var(--primary); background: var(--hover); }
.p-soc-tile svg { width: 26px; height: 26px; fill: var(--muted); }
.p-soc-tile:hover svg { fill: var(--primary); }
.p-soc-close {
  display: block; margin: 22px auto 0; font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 99px; padding: 8px 20px;
}
.p-soc-close:hover { border-color: var(--signal); color: var(--signal); }