/* Довідник ВПО: hub and section pages. Uses the shared tokens (theme.css), no underlines, titles never truncated. */
.vpo-page{padding-bottom:24px}
.vpo-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0 0 8px;font-size:14px;color:#586974}
.vpo-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:#38474f;text-decoration:none}
.vpo-crumbs a:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.vpo-crumbs [aria-current]{color:var(--ink,#142531);font-weight:500}
.vpo-intro{margin:0 0 24px;max-width:70ch;font-size:18px;line-height:1.55;color:#38474f}

/* Search */
.vpo-search{position:relative;margin:0 0 12px}
.vpo-search svg{position:absolute;left:16px;top:50%;width:22px;height:22px;margin-top:-11px;fill:#586974;pointer-events:none}
.vpo-search input{display:block;width:100%;min-height:54px;padding:0 52px 0 50px;border:1px solid #aab6be;background:#fff;color:var(--ink,#142531);font:16px 'Onest',sans-serif;border-radius:0;-webkit-appearance:none;appearance:none}
.vpo-search input::placeholder{color:#6b7781;opacity:1}
.vpo-search input:focus-visible{outline:3px solid var(--accent-ink);outline-offset:0}
.vpo-clear{position:absolute;right:4px;top:5px;width:44px;height:44px;border:0;background:none;color:#38474f;font-size:26px;line-height:1;cursor:pointer}
.vpo-clear[hidden]{display:none}
.vpo-clear:focus-visible{outline:3px solid var(--accent-ink);outline-offset:-3px}
.vpo-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:0 0 20px;font-size:14px;color:#586974}
.vpo-verified{color:var(--ok-ink,#0b5a3c);font-weight:500}

/* Section pills: links to the section pages */
.vpo-pills{display:flex;gap:8px;margin:0 0 28px;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.vpo-pill{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 16px;border:1px solid #c0cad0;background:#fff;color:#142531;font-size:15px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;scroll-snap-align:start;transition:background-color 160ms var(--ease-out,ease-out)}
.vpo-pill[aria-current="page"]{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.vpo-pill:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.vpo-pill:hover:not([aria-current]){background:var(--city-tint)}}
@media(min-width:901px){.vpo-pills{flex-wrap:wrap;overflow:visible}}

/* Cards: accordion */
.vpo-feed{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.vpo-item{border:1px solid var(--line,#d4d8d9);background:#fff}
.vpo-item[hidden]{display:none}
.vpo-head{padding:20px 20px 0}
.vpo-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.vpo-tag{padding:6px 9px;font-size:12px;line-height:1;font-weight:500;background:var(--city-tint);color:var(--accent-ink)}
.vpo-tag.accent{background:var(--note-bg,#fff3d6);color:var(--note-ink,#6b4300)}
.vpo-tag.navy{background:#e6ecf1;color:var(--ink,#142531)}
.vpo-tag.green{background:var(--ok-bg,#e3f3ea);color:var(--ok-ink,#0b5a3c)}
.vpo-title{margin:0}
.vpo-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;margin:0;padding:0 0 20px;border:0;background:none;color:var(--ink,#142531);font:inherit;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.vpo-toggle-text{font-size:22px;line-height:1.3;font-weight:600;text-wrap:balance}
.vpo-chevron{flex:none;width:28px;height:28px;margin-top:1px;fill:#38474f;transition:transform 200ms var(--ease-out,ease-out)}
.vpo-toggle[aria-expanded="true"] .vpo-chevron{transform:rotate(180deg)}
.vpo-toggle:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px}
.vpo-toggle:active .vpo-toggle-text{opacity:.75}
.vpo-panel{padding:0 20px 24px}
.vpo-panel[hidden]{display:none}
.vpo-panel>*+*{margin-top:16px}
.vpo-panel p,.vpo-panel li{font-size:16px;line-height:1.6}
.vpo-panel p{margin:0}

/* Body blocks */
.vpo-summary,.vpo-alert,.vpo-success{padding:16px 18px;font-size:16px;line-height:1.6}
.vpo-summary{background:#eef2f4;color:#1f2f3a}
.vpo-alert{background:#fff4de;color:#5a3a00}
.vpo-success{background:#e6f4ec;color:#0b4a32}
.vpo-block>*+*{margin-top:10px}
.vpo-subtitle{font-size:16px;font-weight:600;color:var(--ink,#142531)}
.vpo-list,.vpo-steps{margin:0;padding-left:22px}
.vpo-list li,.vpo-steps li{margin:0 0 10px;padding-left:4px}
.vpo-list li:last-child,.vpo-steps li:last-child{margin-bottom:0}
.vpo-small{font-size:14px}
.vpo-muted{color:#586974;font-size:14px}
.vpo-emph{font-weight:700;color:var(--accent-ink)}
a.vpo-emph{padding-block:13px;margin-block:-13px}
.vpo-gap{margin-top:16px}
.vpo-panel h3{margin:0 0 6px;font-size:17px;line-height:1.3;font-weight:600}

/* Tables scroll inside their own frame on phones */
.vpo-table-wrap{overflow-x:auto;border:1px solid var(--line,#d4d8d9);-webkit-overflow-scrolling:touch}
.vpo-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.5}
.vpo-table th{padding:12px 14px;background:#eef2f4;text-align:left;font-weight:600;color:var(--ink,#142531)}
.vpo-table td{padding:12px 14px;border-top:1px solid var(--line,#d4d8d9);vertical-align:top}

/* Document templates */
.vpo-template{margin:0;padding:18px;border:1px solid #d4d8d9;background:#f7f9fa;color:var(--ink,#142531);font:15px/1.65 'Onest',sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.vpo-copy{margin-top:12px}
@media(max-width:599px){.vpo-copy{width:100%}}

/* Contacts */
.vpo-contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vpo-contact{padding:16px;border:1px solid var(--line,#d4d8d9);background:#fff}
.vpo-contact p{margin:0 0 4px;font-size:15px}
.vpo-phone{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-ink);font-size:17px;font-weight:600;text-decoration:none}
@media(hover:hover) and (pointer:fine){.vpo-phone:hover{color:var(--ink,#142531)}}
.vpo-phone:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}

.vpo-empty{margin:24px 0;padding:24px;background:#eef2f4;font-size:17px}
.vpo-empty[hidden]{display:none}
.vpo-footnote{margin:28px 0 0;max-width:70ch;font-size:14px;line-height:1.55;color:#586974}

@media(max-width:900px){
  .vpo-intro{font-size:17px}
  .vpo-head{padding:16px 16px 0}
  .vpo-toggle-text{font-size:20px}
  .vpo-panel{padding:0 16px 20px}
  .vpo-contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:599px){
  .vpo-contacts{grid-template-columns:1fr}
  .vpo-pills{margin-right:-18px;padding-right:18px}
}
@media(prefers-reduced-motion:reduce){.vpo-chevron,.vpo-pill{transition:none}}

/* Tables on phones: every row becomes a card (column names come from data-label), so nothing scrolls sideways or is cut at the frame */
@media(max-width:700px){
  .vpo-table-wrap{overflow:visible;border:0}
  .vpo-table{display:block;min-width:0;border:0}
  .vpo-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vpo-table tbody,.vpo-table tr,.vpo-table td{display:block}
  .vpo-table tr{margin:0 0 12px;border:1px solid var(--line,#d4d8d9);background:#fff}
  .vpo-table tr:last-child{margin-bottom:0}
  .vpo-table td{padding:12px 16px;border-top:1px solid #e3e8ea}
  .vpo-table td:first-child{border-top:0;background:#eef2f4;font-weight:600}
  .vpo-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:13px;font-weight:600;color:#586974}
  .vpo-table td:first-child::before{display:none}
}

/* The whole card header opens the card */
.vpo-item .vpo-head{cursor:pointer}

/* The guide hub starts higher on phones: smaller title and intro, tighter blocks, so the first card appears on the first screen */
@media(max-width:700px){
  html body .vpo-page .section-page-heading h1{font-size:28px!important;line-height:1.18!important;margin-bottom:10px}
  html body .vpo-page .section-page-heading h1[data-title="long"]{font-size:26px!important}
  html body .vpo-page .section-page-heading h1[data-title="xlong"]{font-size:24px!important}
  html body .vpo-page .vpo-intro{font-size:15px;line-height:1.5;margin:0 0 16px}
  html body .vpo-page .vpo-status{margin:8px 0 12px;font-size:13px}
  html body .vpo-page .vpo-crumbs{margin-bottom:12px}
}