/* Page styles. Shared FNS foundations live in fns-base.css; tokens, the hero scene
   and the result cards follow the design system of subscriber-id-guide v7. */
:root {
  --shell:1200px; --service-accent:var(--blue); --service-soft:var(--blue-soft); --service-line:#ccd9f5; --service-ice:#eaf3ff;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
}
/* Scroll compensation in app.js is the only one: the browser's own anchoring would add a second.
   Chrome reads it from body as well as from html. */
html, body { overflow-anchor:none; }
/* The half of a section card with the task, as in the client's file. */
:root { --task-ice:color-mix(in srgb,var(--service-ice) 55%,var(--surface)); }
[data-theme=light] { --text-faint:#666c76; --amber:#8c5600; --empty:#614800; --empty-fill:#fff1b8; --empty-line:#ecc94b; }
[data-theme=dark] { --service-line:#3b4e6f; --service-ice:#22334a; --empty:#ffd84d; --empty-fill:#3f3510; --empty-line:#7a6418; }
body { background:radial-gradient(ellipse 900px 680px at 95% 2%,color-mix(in srgb,var(--service-ice) 85%,transparent),transparent 100%),radial-gradient(ellipse 680px 620px at 0 18%,color-mix(in srgb,var(--service-soft) 65%,transparent),transparent 100%),var(--bg); background-repeat:no-repeat; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
h1,h2,h3,h4 { letter-spacing:-.035em; }

/* ---------------------------------------------------------------- hero */
/* As in the client's file subscriber-id-guide-v6, value for value: the paddings, the grid, the eyebrow
   «Электронный документооборот» with its dot (the file's own words, added at the client's request), the
   title and the lead. The access line is the note under the lead, as «Без регистрации…» there; only its
   grey is darker than in the file, for contrast. */
.hero { position:relative; padding:90px 0 16px; }
.hero-grid { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:65px; }
/* «Инструкции по настройке» stands on the first line, at the client's request: the title is as large as in
   the file where that line fits its column, else smaller (8.9% of the column is that line's width). */
.hero-copy { container-type:inline-size; }
.hero h1 { margin:0 0 24px; font-size:min(clamp(44px,4.7vw,66px),8.9cqi); line-height:1.06; overflow-wrap:break-word; }
.hero h1 .hero-accent { display:block; color:var(--blue); }
.hero .eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.hero .eyebrow::before { width:7px; height:7px; border-radius:50%; background:var(--blue); content:""; }
.hero-lead { max-width:610px; margin:0; color:var(--text-soft); font-size:19px; line-height:1.6; text-wrap:pretty; }
/* The lead: one sentence, then the access line; no full stop at the end. */
.hero-lead > p { margin:0; }
.hero-lead > :not(:first-child) { margin-top:14px; }
.hero-lead > .hero-note { display:flex; align-items:center; gap:10px; margin-top:22px; color:var(--text-faint); font-size:15px; line-height:1.55; text-wrap:balance; }
.hero-note .icon-mask { width:22px; height:22px; flex:0 0 22px; opacity:.8; }
.hero-scene { position:relative; min-width:0; margin:0; }
/* Routing on a 600 by 440 stage: the lines are SVG, the holders, the stack and the documents
   are 3D sprites placed in stage units (--x, --y, --w). motion.js plays the story. */
.route-art { --route-track:#e3e9f4; --route-off:#aab6ca; --route-stop:#df4750; --route-shadow:rgba(28,62,130,.2); --route-a:var(--blue); --route-b:#e07a1c; --route-trunk:#8f9bb1; position:relative; aspect-ratio:600 / 440; isolation:isolate; container-type:inline-size; }
[data-theme=dark] .route-art { --route-track:#252c37; --route-off:#56617a; --route-stop:#ec5a61; --route-shadow:rgba(0,0,0,.5); --route-b:#ff9f4d; --route-trunk:#76829a; }
.route-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route-tracks, .route-track { fill:none; stroke:var(--route-track); stroke-width:18; stroke-linecap:round; }
/* A soft pool of light under the scene gives it a floor. */
.route-floor { position:absolute; z-index:-1; top:14%; left:6%; width:90%; height:74%; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 10%,transparent),transparent); pointer-events:none; }
[data-theme=dark] .route-floor { background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 12%,transparent),transparent); }
.route-trunk { fill:none; stroke:var(--route-trunk); stroke-width:7; stroke-linecap:round; }
.route-off { fill:none; stroke:var(--route-off); stroke-width:4.5; stroke-linecap:round; stroke-dasharray:.5 11; }
/* Past its sign the closed road fades out. */
.route-cut { opacity:.35; }
.route-way { fill:none; stroke-width:7; stroke-linecap:round; stroke-dasharray:1; }
.route-way-a { stroke:var(--route-a); }
.route-way-b { stroke:var(--route-b); }
/* The light that runs under a riding document (motion.js moves it); hidden in the still frame. */
.route-trail { fill:none; stroke:#fff; stroke-width:3.6; stroke-linecap:round; stroke-dasharray:56 4000; stroke-dashoffset:28; opacity:0; }
[data-theme=dark] .route-trail { stroke:#eef3ff; }
/* The ring the switch sends out as it reads a document's type (motion.js); hidden in the still frame. */
.route-scan { fill:none; stroke-width:2.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.route-scan[data-way=a] { stroke:var(--route-a); }
.route-scan[data-way=b] { stroke:var(--route-b); }
/* The switch at the fork turns to the road of the next document. */
.route-switch circle { fill:var(--surface); stroke:var(--route-trunk); stroke-width:4; }
.route-switch-arrow { fill:none; stroke:var(--route-b); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; transform-box:fill-box; transform-origin:center; rotate:36deg; }
.route-stack, .route-box, .route-doc, .route-cover, .route-sign { position:absolute; top:calc(var(--y) / 4.4 * 1%); left:calc(var(--x) / 6 * 1%); }
.route-stack, .route-box, .route-doc, .route-cover { width:calc(var(--w) / 6 * 1%); aspect-ratio:480 / 494; }
.route-stack img, .route-box img, .route-doc img, .route-cover img { position:absolute; inset:0; width:100%; height:100%; }
/* Soft contact shadows keep the sprites on the ground. */
.route-stack::before, .route-box::before { position:absolute; border-radius:50%; background:radial-gradient(closest-side,var(--route-shadow),transparent); content:""; }
.route-box::before { top:88%; left:12%; width:76%; height:13%; }
.route-stack::before { top:79%; left:24%; width:48%; height:9%; opacity:.7; }
/* The unused holder is the same sprite, put out. */
.route-box-off img { filter:grayscale(.85) brightness(1.04) contrast(.9) blur(.6px); opacity:.6; }
.route-box-off::before { opacity:.5; }
[data-theme=dark] .route-box-off img { opacity:.45; }
/* Layers: stack, holders, resting documents (a behind b), front walls with their labels; a
   document in flight (a copy motion.js makes) goes above them all until it clears the rim. */
.route-stack { z-index:1; }
.route-box { z-index:2; }
.route-doc { z-index:3; }
.route-doc-b { z-index:4; }
.route-cover { z-index:5; }
/* A holder, its documents and its front wall give a little from the bottom as a document lands. */
.route-box, .route-doc, .route-cover { transform-origin:50% 92%; }
.route-tag { transform-origin:61.3% 78.9%; }
.route-flyer { z-index:9; transform-origin:48.5% 44.3%; pointer-events:none; }
.route-flyer.route-doc-b { transform-origin:60.2% 46.8%; }
/* The shadow of a riding document, 56 by 12 stage units, under the holders. */
.route-ghost { position:absolute; z-index:1; width:calc(56 / 6 * 1%); height:calc(12 / 4.4 * 1%); border-radius:50%; background:radial-gradient(closest-side,var(--route-shadow),transparent); opacity:0; pointer-events:none; }
.route-sign { z-index:10; }
.route-sign { display:grid; width:clamp(22px,5.8%,34px); aspect-ratio:1; border-radius:50%; background:var(--route-stop); place-items:center; translate:-50% -50%; box-shadow:0 0 0 3px var(--bg); }
.route-sign::after { width:58%; height:19%; border-radius:2px; background:#fff; content:""; }

/* The scene shows once its sprites are decoded (motion.js), never half built. Should the script not
   arrive, it shows after 4 s anyway. */
.js .route-art { opacity:0; animation:route-reveal .01s 4s forwards; }
.js .route-art.is-ready { opacity:1; animation:none; transition:opacity .45s var(--ease-out); }
/* motion.js is running and waits for the sprites: no early reveal on a slow network. */
.js .route-art.is-waiting { animation:none; }
@keyframes route-reveal { to { opacity:1; } }

/* ---------------------------------------------------------------- tasks */
.tasks-section { padding:44px 0 88px; }
.tasks-title { margin:0 0 24px; font-size:30px; line-height:1.15; }
/* Four tiles in a row, as in the UI kit: the 3D picture and the number of the task, the title under them. The chosen tile turns light blue with a blue edge and a check; its instructions open in the
   card under the row. */
.tasks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:16px; }
.task { position:relative; grid-row:1; display:flex; min-width:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px; min-height:200px; border:1px solid var(--line); border-radius:20px; padding:18px 22px 22px; background:var(--surface); color:var(--text); box-shadow:none; cursor:pointer; text-align:left; transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),translate .2s var(--ease-out),scale .12s var(--ease-out); }
.task[aria-expanded=true] { border-color:var(--blue); background:var(--blue-soft); box-shadow:inset 0 0 0 1px var(--blue); }
.task-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.task-art { display:block; width:84px; height:84px; margin:-6px 0 -2px -10px; object-fit:contain; transition:translate .3s var(--ease-out); }
.task-number { padding-top:8px; color:var(--text-faint); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; transition:color .2s var(--ease-out); }
.task-label { padding-right:26px; font-size:19px; font-weight:700; line-height:1.23; letter-spacing:-.02em; text-wrap:balance; transition:color .2s var(--ease-out); }
.task[aria-expanded=true] .task-number, .task[aria-expanded=true] .task-label { color:var(--blue); }
.task-check { position:absolute; right:18px; bottom:18px; display:grid; width:24px; height:24px; border-radius:50%; background:var(--action); color:#fff; place-items:center; opacity:0; scale:.6; transition:opacity .2s var(--ease-out),scale .2s var(--ease-out); }
.task-check svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.task[aria-expanded=true] .task-check { opacity:1; scale:1; }
.task:active { scale:.98; }
.task:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 75%,white); outline-offset:3px; }
.task-panel { grid-column:1 / -1; grid-row:2; align-self:start; display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s var(--ease-out); }
.task-panel.is-open { grid-template-rows:1fr; transition-duration:.3s; }
.task-panel[data-panel=types] { --k:1; }
.task-panel[data-panel=manage] { --k:2; }
.task-panel[data-panel=block] { --k:3; }
/* clip, not hidden: it does not create a scroll container, so the choice column can stay sticky. */
.task-panel-clip { min-height:0; overflow:hidden; overflow:clip; }
/* Explanation on the left, the operator choice and the answer on the right: the action is visible as soon as the section opens. */
.task-panel-body { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(380px,1fr); align-items:start; gap:0; margin-top:18px; border:1px solid var(--line); border-radius:27px; padding:0; background:var(--surface); box-shadow:0 18px 48px rgba(25,67,113,.045); opacity:0; translate:0 -6px; transition:opacity .16s var(--ease-out),translate .2s var(--ease-out); }
/* The notch points at the chosen tile: the centre of column k of four, 16px apart. Tiles 1 and 2 stand over
   the light blue half of the card, 3 and 4 over the white one. */
.task-panel[data-panel=find] .task-panel-body::before, .task-panel[data-panel=types] .task-panel-body::before { background:var(--task-ice); }
.task-panel-body::before { position:absolute; top:-8px; left:calc(var(--k,0) * ((100% - 48px) / 4 + 16px) + (100% - 48px) / 8 - 7px); width:14px; height:14px; border:1px solid var(--line); border-right:0; border-bottom:0; border-radius:3px 0 0 0; background:var(--surface); content:""; rotate:45deg; }
.task-panel.is-open .task-panel-body { opacity:1; translate:0 0; transition-duration:.24s,.3s; transition-delay:.05s; }
.tasks.is-booting *, .task-panel.is-instant, .task-panel.is-instant * { transition:none !important; }
/* A section that takes the place of another on a wide screen: its content fades in over the card (app.js). */
.task-panel-body > * { transition:opacity .18s var(--ease-out); }
.task-panel.is-fresh .task-panel-body > * { opacity:0; }
.task-panel-body > * { min-width:0; }
.task-panel.is-settled .task-panel-clip { overflow:visible; }
/* Before app.js arrives (html.js without .is-ready) the open section is the one from ?task= or, on a
   wide screen, the first one, and section 1 shows the side from ?for=. Without the script every section
   stays open and the switch is not there. So nothing swaps or jumps when the script starts. */
html:not(.js) .task-panel { grid-template-rows:1fr; }
html:not(.js) .task-panel-body { opacity:1; translate:none; }
html:not(.js) .identity { display:none; }
/* The slot for the answer waits for the script; until it builds the operator button, the list stands in
   for it at its height. */
html:not(.js) .answer-wait { display:none; }
html.js .select select { min-height:68px; border-radius:16px; }
/* ...each in a row of its own under the tiles, with no notch; the tiles do nothing then. */
html:not(.js) .task-panel[data-panel=types] { grid-row:3; }
html:not(.js) .task-panel[data-panel=manage] { grid-row:4; }
html:not(.js) .task-panel[data-panel=block] { grid-row:5; }
html:not(.js) .task-panel-body::before { display:none; }
html:not(.js) .task { pointer-events:none; }
html.js:not(.is-ready)[data-start-task=find] #panel-find, html.js:not(.is-ready)[data-start-task=types] #panel-types, html.js:not(.is-ready)[data-start-task=manage] #panel-manage, html.js:not(.is-ready)[data-start-task=block] #panel-block { grid-template-rows:1fr; }
html.js:not(.is-ready)[data-start-task=find] #panel-find .task-panel-body, html.js:not(.is-ready)[data-start-task=types] #panel-types .task-panel-body, html.js:not(.is-ready)[data-start-task=manage] #panel-manage .task-panel-body, html.js:not(.is-ready)[data-start-task=block] #panel-block .task-panel-body { opacity:1; translate:none; }
html.js:not(.is-ready):not([data-start-for]) .step[data-identity=partner], html.js:not(.is-ready)[data-start-for] .step[data-identity=self] { display:none; }
html.js:not(.is-ready):not([data-start-task]) #panel-find { grid-template-rows:1fr; }
html.js:not(.is-ready):not([data-start-task]) #panel-find .task-panel-body { opacity:1; translate:none; }
.steps { display:grid; align-self:stretch; align-content:start; gap:28px; border-radius:26px 0 0 26px; padding:32px; background:var(--task-ice); }
.step { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:start; gap:18px; }
.step-icon { display:grid; width:52px; height:52px; border-radius:16px; background:var(--surface); place-items:center; }
.step-icon .icon-mask { width:28px; height:28px; }
/* The heading starts level with the top of its icon: the negative margin is the room above the capitals
   in a Golos UI line at this height (measured in the browser). */
.step h3 { margin:-.233em 0 16px; color:var(--text); font-size:27px; line-height:1.15; }
.step p { margin:0; color:var(--text-soft); font-size:14px; line-height:1.65; text-wrap:pretty; }
/* Section 1: whose identifier, the own one or the counterparty's. A segmented switch over native
   radios (arrows work as is); the thumb slides under the choice and the chosen explanation fades in.
   Without the script the switch stays hidden and both explanations show. */
.identity { min-width:0; margin:0 0 -6px; padding:0; border:0; }
.identity legend { margin:0 0 12px; padding:0; color:var(--text); font-size:18px; font-weight:600; line-height:1.3; }
.identity-switch { position:relative; display:grid; grid-template-columns:1fr 1fr; width:fit-content; max-width:100%; padding:3px; border-radius:13px; background:#eef1f6; }
[data-theme=dark] .identity-switch { background:#191c22; }
.identity-thumb { position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:10px; background:var(--surface); box-shadow:0 2px 7px rgba(25,67,113,.1); transition:transform .22s var(--ease-out); }
[data-theme=dark] .identity-thumb { background:#2c323c; box-shadow:0 2px 7px rgba(0,0,0,.35); }
.identity-switch:has(input[value="partner"]:checked) .identity-thumb { transform:translateX(100%); }
.identity-switch label { position:relative; display:grid; min-height:40px; padding:0 26px; color:var(--text-soft); font-size:15px; font-weight:400; place-items:center; cursor:pointer; transition:color .16s ease; }
.identity-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.identity-switch label:has(input:checked) { color:var(--blue); }
.identity-switch label:has(input:focus-visible) { border-radius:10px; outline:2px solid var(--blue); outline-offset:2px; }
@media (hover:hover) { .identity-switch label:not(:has(input:checked)):hover { color:var(--text); } }
@media (pointer:coarse) { .identity-switch label { min-height:44px; } }
.step.is-entering { animation:step-in .2s var(--ease-out); }
@keyframes step-in { from { opacity:0; transform:translateY(4px); } }
@media (prefers-reduced-motion:reduce) {
  .identity-thumb, .identity-switch label { transition:none; }
  .step.is-entering { animation:none; }
}
/* The deck draws the choice as a two-cell row: the question and the dropdown. */
/* The question, the dropdown and the answer form one block, like the two-cell row on the slides. */
.choose { position:sticky; top:112px; display:grid; gap:18px; padding:32px; }
/* 3. The two halves are numbered, as in the client's file: 01 the task, 02 the operator. */
.step-label { display:flex; align-items:center; gap:9px; margin:0; color:var(--text-faint); font-size:11px; font-weight:500; }
.step-label > span { display:grid; width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:var(--surface); color:var(--blue); font-size:10px; font-variant-numeric:tabular-nums; place-items:center; }
/* Under a label: 25px on the left, 17px on the right, as in the client's file (17px both on a phone). */
.steps > .step-label { margin-bottom:-3px; }
.choose .step-label { margin-bottom:-1px; }
.choose .step-label > span { background:var(--blue-soft); }
.operator-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; }
.operator-row > .picker, .operator-row > .select { grid-column:1 / -1; }
/* Shown once an operator is chosen: back to the empty choice. A quiet button with the UI kit's reset sign, lit
   on hover as the header buttons are; the text lines up with the field's edge. The target is 32px tall. */
.picker-reset { display:inline-flex; align-items:center; gap:6px; min-height:32px; margin:-6px -10px -6px 0; border:0; border-radius:10px; padding:0 10px; background:transparent; color:var(--text-soft); cursor:pointer; font-size:14px; line-height:20px; transition:color .18s ease,background-color .18s ease; }
.picker-reset svg { width:16px; height:16px; flex:0 0 16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.picker-reset { position:relative; }
.picker-reset::after { position:absolute; inset:-6px -8px; content:""; }
.choose .provider-result { background:var(--surface); }
.operator-row label { font-size:15px; font-weight:500; line-height:1.45; text-wrap:pretty; }
.select { position:relative; }
.select select { width:100%; min-height:54px; border:1px solid var(--line-strong); border-radius:12px; padding:0 46px 0 16px; background:var(--surface); color:var(--text); font-size:16px; cursor:pointer; appearance:none; -webkit-appearance:none; transition:border-color .16s var(--ease-out); }
.select select:focus-visible { border-color:var(--blue); outline:3px solid color-mix(in srgb,var(--blue) 30%,transparent); outline-offset:1px; }
.select-chevron { position:absolute; top:50%; right:14px; width:22px; height:22px; fill:none; stroke:var(--text-soft); stroke-width:1.7; translate:0 -50%; pointer-events:none; }
.choose .instruction-actions { flex-direction:column; align-items:stretch; }
.choose .instruction-link { width:100%; }
.noscript-note { margin-top:20px; border-radius:14px; padding:20px; background:var(--amber-soft); }

/* ---------------------------------------------------------------- operator picker
   The pattern of the UI kit (07 «Выбор оператора»): a button with the chosen operator, a popover
   with search and a list, a full screen sheet on a phone. Behaviour in app.js, «operator picker». */
.picker { position:relative; }
.picker-toggle { display:flex; width:100%; min-height:68px; align-items:center; gap:14px; border:1px solid var(--line-strong); border-radius:16px; padding:11px 16px 11px 12px; background:var(--surface); color:var(--text); cursor:pointer; text-align:left; transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out); }
.picker-toggle.has-choice { border-color:color-mix(in srgb,var(--blue) 45%,var(--line-strong)); }
.picker-toggle[aria-expanded=true] { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent); }
.picker-toggle:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 75%,white); outline-offset:2px; }
.picker-value { display:grid; min-width:0; flex:1; gap:2px; }
/* Long names and the hint wrap instead of being cut off on a narrow screen. */
.picker-value strong, .picker-value small { text-wrap:pretty; }
.picker-value strong { font-size:16px; font-weight:500; line-height:1.3; text-wrap:balance; }
.picker-value small { color:var(--text-faint); font-size:13px; line-height:1.35; }
.picker-chevron { width:22px; height:22px; flex:0 0 22px; fill:none; stroke:var(--text-soft); stroke-width:1.7; transition:rotate .2s var(--ease-out); }
.picker-toggle[aria-expanded=true] .picker-chevron { rotate:180deg; }
/* An operator's mark: a 3D icon with its own shape, so it needs no tile. Initials stand in where
   an operator has no icon file. */
.op-mark { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; }
.op-mark img { width:100%; height:100%; object-fit:contain; }
.op-mark-text { border-radius:12px; background:var(--blue-soft); color:var(--blue); font-size:13px; font-weight:700; letter-spacing:-.02em; }
.op-mark-search { overflow:hidden; border-radius:12px; background:var(--blue-soft); }
.op-mark-search img { width:78%; height:78%; }
.picker-pop.is-up { top:auto; bottom:calc(100% + 8px); transform-origin:bottom center; }
.picker-pop { position:absolute; z-index:20; top:calc(100% + 8px); right:0; left:0; border:1px solid var(--line); border-radius:18px; padding:10px; background:var(--surface-elevated); box-shadow:var(--shadow-md); transform-origin:top center; animation:picker-in .16s var(--ease-out); }
.picker-sheet-head { display:none; }
.picker-search { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:0 4px 0 12px; background:var(--surface-soft); transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out); }
.picker-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent); }
.picker-search > .icon-mask { width:20px; height:20px; }
/* 16px keeps iOS Safari from zooming the page when the field gets focus. */
.picker-search input { min-width:0; min-height:46px; flex:1; border:0; padding:0; background:transparent; color:var(--text); font-size:16px; outline:none; }
.picker-search input::placeholder { color:var(--text-faint); }
.picker-clear { display:grid; width:44px; height:44px; flex:0 0 44px; border:0; border-radius:10px; background:transparent; color:var(--text-soft); cursor:pointer; place-items:center; }
.picker-clear svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
/* max-content rows: with auto rows a scrolling grid keeps an option that wraps at its min-height. */
.picker-list { position:relative; display:grid; max-height:clamp(200px,calc(100vh - 330px),340px); overflow:auto; grid-auto-rows:max-content; align-content:start; gap:2px; margin-top:8px; overscroll-behavior:contain; scrollbar-width:thin; }
.picker-option { display:flex; min-height:58px; align-items:center; gap:12px; border-radius:12px; padding:7px 10px; cursor:pointer; }
.picker-option .op-mark { width:40px; height:40px; flex-basis:40px; }
.picker-option.is-active { background:color-mix(in srgb,var(--blue) 8%,var(--surface-elevated)); }
.picker-pop:not(.is-pointing) .picker-option.is-active { box-shadow:inset 0 0 0 2px var(--blue); }
.picker-option[aria-selected=true] { background:var(--blue-soft); }
.picker-copy { display:grid; min-width:0; flex:1; gap:1px; }
.picker-copy strong { font-size:15px; font-weight:500; }
/* The lines wrap rather than end in «…»: a cut would hide the INN or the part that matched. A prefix
   or an INN keeps its label on its line. */
.picker-copy small { color:var(--text-faint); font-size:13px; overflow-wrap:anywhere; }
.picker-copy small > span { white-space:nowrap; }
.picker-copy mark { background:none; color:var(--blue); font-weight:700; }
.picker-check { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; visibility:hidden; }
.picker-option[aria-selected=true] .picker-check { visibility:visible; }
.picker-empty { padding:22px 14px 14px; text-align:center; }
.picker-empty strong { font-size:15px; }
.picker-empty p { margin:6px 0 0; color:var(--text-soft); font-size:14px; line-height:1.55; }
.picker-empty a { color:var(--blue); }
/* What the answer slot says before a choice, and the way out for operators outside the table. */
.answer-wait { display:flex; align-items:center; gap:14px; border:1px dashed var(--line-strong); border-radius:16px; padding:16px 18px; color:var(--text-soft); }
.answer-wait > .icon-mask { width:24px; height:24px; opacity:.75; }
.answer-wait span { display:grid; gap:3px; }
.answer-wait strong { color:var(--text); font-size:15px; font-weight:500; }
.answer-wait small { font-size:13px; line-height:1.45; }
.choose-more { margin:0; border-top:1px solid var(--line); padding-top:14px; color:var(--text-faint); font-size:13px; line-height:1.5; }
.choose-more a { color:var(--blue); text-underline-offset:3px; }
/* A section clips its content while it opens and closes; an open list may hang over its edge. */
.task-panel[data-picker-open] .task-panel-clip { overflow:visible; }
.task-panel[data-picker-open] .task-panel-body { z-index:3; }
@keyframes picker-in { from { opacity:0; translate:0 -4px; scale:.98; } }
@keyframes picker-sheet { from { opacity:0; translate:0 24px; } }
body.picker-lock { overflow:hidden; }
/* The list as a full screen sheet (app.js: phones and short screens), so the keyboard does not cover it. */
.picker-pop.is-sheet { position:fixed; z-index:120; inset:0; display:flex; flex-direction:column; border:0; border-radius:0; padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom)); box-shadow:none; animation:picker-sheet .26s var(--ease-drawer); }
.is-sheet .picker-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 12px; }
.is-sheet .picker-sheet-head strong { font-size:18px; line-height:1.3; }
.picker-done { min-height:44px; border:0; padding:0 4px; background:transparent; color:var(--blue); cursor:pointer; font-size:16px; font-weight:500; }
.is-sheet .picker-list { max-height:none; flex:1; }

@media (hover:hover) {
  .picker-toggle:hover { border-color:var(--blue-light); }
  .picker-clear:hover { background:var(--surface); color:var(--text); }
}
@media (prefers-reduced-motion:reduce) {
  .picker-pop { animation:none; }
}

/* ---------------------------------------------------------------- answer cards */
.provider-result { border:1px solid var(--line); border-radius:18px; padding:20px 22px; background:var(--surface); }
.result-topline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; margin:0 0 12px; }
.result-status { display:inline-flex; align-items:center; gap:6px; color:var(--green); font-size:13px; font-weight:500; }
.result-status .icon-mask { width:18px; height:18px; background-color:currentColor; }
.result-support .result-status, .result-text .result-status { color:var(--blue); }
.result-pending .result-status { color:var(--amber); }
.result-empty .result-status { color:var(--empty); }
.result-operator { color:var(--text-soft); font-size:13px; }
.result-text-body { margin:0 0 16px; color:var(--text); font-size:16px; line-height:1.6; }
.result-pending { border-color:color-mix(in srgb,var(--amber) 22%,var(--line)); background:var(--amber-soft); }
/* Filled, so it is plain at once that there is nothing yet; it wins over the white answer card of .choose. */
.provider-result.result-empty, .choose .provider-result.result-empty { border-color:var(--empty-line); background:var(--empty-fill); }
.instruction-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.instruction-link { min-height:48px; justify-content:space-between; gap:16px; padding:12px 20px; border-radius:12px; font-size:15px; font-weight:500; text-align:left; line-height:1.35; }
.contact-address { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; border:1px solid var(--line); border-radius:12px; padding:8px 8px 8px 14px; background:var(--surface-soft); }
.contact-address > span { display:grid; min-width:0; gap:2px; }
.contact-address small { color:var(--text-faint); font-size:13px; }
.contact-address a { display:inline-block; margin:-10px 0; padding:10px 0; color:var(--blue); font-size:16px; font-weight:500; overflow-wrap:anywhere; text-decoration:none; }
.contact-address a:hover { text-decoration:underline; }
.copy-email { display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; border:0; border-radius:10px; padding:6px 10px; background:var(--surface); color:var(--green); font-size:13px; cursor:pointer; transition:scale .12s var(--ease-out); }
.copy-email .icon-mask { width:20px; height:20px; }
.copy-fallback { position:fixed; width:1px; height:1px; opacity:0; }
.is-arriving .provider-result { animation:rise .26s var(--ease-out) both; }
@keyframes rise { from { opacity:0; translate:0 6px; } }

/* ---------------------------------------------------------------- toggletips and step lists
   An underlined term is a button that opens a short explanation (behaviour in app.js, «toggletips»).
   The bubble sits right after the term in the markup; app.js places it under the line or above it,
   16px from the screen edges and below the sticky header. A term does not break across lines. */
.tip { position:relative; white-space:nowrap; }
.tip-btn { display:inline; margin:0; border:0; padding:0; background:none; color:var(--blue); cursor:pointer; font:inherit; letter-spacing:inherit; text-decoration:underline dashed; text-decoration-color:var(--blue); text-decoration-thickness:1.5px; text-underline-offset:4px; transition:color .16s var(--ease-out),text-decoration-color .16s var(--ease-out); }
.tip-btn[aria-expanded=true] { color:var(--blue); text-decoration-color:var(--blue); text-decoration-style:solid; }
/* The word is the button; its target reaches a little above and below the line, 38px in all. */
.tip-btn { position:relative; }
.tip-btn::before { position:absolute; inset:-7px -3px; content:""; }
.tip-btn:focus-visible { border-radius:4px; outline-offset:2px; }
.tip-pop { position:absolute; z-index:30; top:calc(100% + 8px); left:0; display:block; width:max-content; max-width:min(340px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--surface); box-shadow:var(--shadow-md); color:var(--text); font-size:14px; font-weight:400; letter-spacing:0; line-height:1.5; text-align:left; white-space:normal; text-wrap:pretty; transform-origin:var(--tip-arrow,24px) 0; }
.tip-pop[data-side=top] { transform-origin:var(--tip-arrow,24px) 100%; }
/* app.js sets the position in one go; fns-base.css gives every element a 0.01ms transition under
   reduced motion, which would show one frame at the old spot. */
.tip-pop, .tip-pop::before { transition-property:none; }
/* The notch points at the term, like the one on the section card. */
.tip-pop::before { position:absolute; top:-7px; left:calc(var(--tip-arrow,24px) - 6px); width:12px; height:12px; border:1px solid var(--line); border-right:0; border-bottom:0; border-radius:3px 0 0 0; background:inherit; content:""; rotate:45deg; }
.tip-pop[data-side=top]::before { top:auto; bottom:-7px; rotate:225deg; }
.tip-pop b { font-weight:700; }
.tip-line { display:block; }
.tip-line + .tip-line { margin-top:6px; }
.tip-pop:not([hidden]) { animation:tip-in .18s var(--ease-out); }
.tip-pop[data-side=top]:not([hidden]) { animation-name:tip-in-top; }
@keyframes tip-in { from { opacity:0; translate:0 -4px; scale:.97; } }
@keyframes tip-in-top { from { opacity:0; translate:0 4px; scale:.97; } }
[data-theme=dark] .tip-pop { background:var(--surface-elevated); }
/* A section clips its content for the open and close animation. While an explanation is open the
   section is at rest, so it lets the bubble hang over the card edge and over the next tile. */
.task-panel[data-tip-open] .task-panel-clip { overflow:visible; }
.task-panel[data-tip-open] .task-panel-body { z-index:2; }
@media (hover:hover) {
  .tip-btn[aria-expanded=false]:hover { color:var(--blue-hover); text-decoration-color:var(--blue-hover); }
  .picker-reset:hover { background:var(--blue-soft); color:var(--blue); }
}
@media (prefers-reduced-motion:reduce) {
  .tip-pop:not([hidden]) { animation:none; }
}
/* A step that branches or lists what follows: a lead-in sentence, then short points. */
.step-list { display:grid; gap:6px; margin:10px 0 0; padding:0; color:var(--text-soft); font-size:14px; line-height:1.65; list-style:none; }
.step h3 + .step-list { margin-top:0; }
.step-list li { position:relative; padding-left:20px; text-wrap:pretty; }
.step-list li::before { position:absolute; top:calc(.825em - 3px); left:3px; width:6px; height:6px; border-radius:50%; background:var(--blue); content:""; }
@media (max-width:900px) {
  .step-list { grid-column:1 / -1; margin:0; font-size:12px; }
}
@media print {
  .tip-pop { display:none !important; }
  .tip-btn { text-decoration:none; }
}

/* ---------------------------------------------------------------- footer, toast */
.site-footer { padding:0; border-top:0; background:transparent; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; border-top:1px solid var(--line); padding-top:32px; }
.footer-inner strong { font-size:15px; font-weight:500; }
.footer-inner p { margin:4px 0 0; color:var(--text-faint); font-size:13px; }
.footer-links { display:flex; gap:25px; }
.footer-links a { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:14px; }
.footer-bottom { padding:24px 0 32px; color:var(--text-faint); font-size:12px; }
.toast { position:fixed; z-index:200; right:24px; bottom:24px; display:flex; align-items:center; gap:10px; max-width:min(420px,calc(100vw - 32px)); border:1px solid color-mix(in srgb,var(--green) 28%,var(--line)); border-radius:15px; padding:14px 18px; background:var(--green-soft); color:var(--green); box-shadow:var(--shadow-md); font-size:14px; opacity:0; translate:0 8px; pointer-events:none; transition:opacity .15s ease,translate .2s var(--ease-out); }
.toast:empty { border:0; padding:0; box-shadow:none; }
.toast.is-visible { opacity:1; translate:0 0; transition-duration:.2s; }
.toast .icon-mask { width:22px; height:22px; flex:0 0 22px; background-color:var(--green); }

/* ---------------------------------------------------------------- interaction */
.button:hover, .icon-button:hover { transform:none; }
.theme-toggle { border:0; border-radius:12px; background:transparent; color:var(--text-soft); }
.theme-toggle:hover, .theme-toggle[aria-expanded=true] { background:var(--blue-soft); color:var(--blue); }
.button { transition:background-color .16s ease,border-color .16s ease,color .16s ease,scale .12s var(--ease-out); }
.button:active, .icon-button:active, .copy-email:active { scale:.97; }
@media (hover:hover) {
  .task[aria-expanded=false]:hover { border-color:var(--blue-light); translate:0 -3px; box-shadow:var(--shadow-sm); }
  .task:hover .task-art { translate:0 -2px; }
  .select select:hover { border-color:var(--blue-light); }
}
/* Opened from disk the icons keep their colour filters (fns-base.css); the empty status is #614800, #ffd84d in the dark theme. */
.from-disk .result-status .icon-mask, .from-disk .toast .icon-mask { background-color:transparent; filter:brightness(0) saturate(100%) invert(39%) sepia(37%) saturate(1257%) hue-rotate(103deg) brightness(91%) contrast(91%); }
.from-disk .result-support .result-status .icon-mask, .from-disk .result-text .result-status .icon-mask { filter:brightness(0) saturate(100%) invert(31%) sepia(89%) saturate(3163%) hue-rotate(218deg) brightness(95%) contrast(92%); }
.from-disk .result-pending .result-status .icon-mask { filter:brightness(0) saturate(100%) invert(43%) sepia(91%) saturate(637%) hue-rotate(358deg) brightness(91%) contrast(96%); }
.from-disk .result-empty .result-status .icon-mask { filter:brightness(0) saturate(100%) invert(27%) sepia(17%) saturate(3878%) hue-rotate(21deg) brightness(95%) contrast(101%); }
[data-theme=dark].from-disk .result-status .icon-mask, [data-theme=dark].from-disk .toast .icon-mask { filter:brightness(0) saturate(100%) invert(79%) sepia(28%) saturate(660%) hue-rotate(93deg) brightness(96%) contrast(87%); }
[data-theme=dark].from-disk .result-support .result-status .icon-mask, [data-theme=dark].from-disk .result-text .result-status .icon-mask { filter:brightness(0) saturate(100%) invert(69%) sepia(44%) saturate(1128%) hue-rotate(191deg) brightness(102%) contrast(102%); }
[data-theme=dark].from-disk .result-pending .result-status .icon-mask { filter:brightness(0) saturate(100%) invert(85%) sepia(57%) saturate(453%) hue-rotate(329deg) brightness(103%) contrast(101%); }
[data-theme=dark].from-disk .result-empty .result-status .icon-mask { filter:brightness(0) saturate(100%) invert(90%) sepia(26%) saturate(1216%) hue-rotate(333deg) brightness(105%) contrast(101%); }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px) {
  /* The route needs room: below this width it goes under the text. */
  .hero-grid { gap:40px; }
  .hero h1 { font-size:min(54px,8.9cqi); }
  .hero-lead { font-size:17px; }
  .steps, .choose { padding:26px; }
  .task { min-height:184px; padding:16px 18px 18px; }
  .task-art { width:72px; height:72px; }
  .task-label { font-size:17px; }
}
/* The file's tablet step: two columns still, the scene a little narrower. Under 763px a word of our
   title is wider than its column at 45px (the file's words are shorter): the size eases down to 36px. */
@media (max-width:860px) {
  .hero { padding:64px 0 20px; }
  .hero-grid { grid-template-columns:1fr .9fr; gap:28px; }
  .hero h1 { font-size:min(clamp(36px,5.9vw,45px),8.9cqi); }
  .hero-lead { font-size:15px; }
  .hero-lead > .hero-note { gap:9px; font-size:13px; }
  .hero-note .icon-mask { width:20px; height:20px; flex-basis:20px; }
}
/* Below this width the tiles stand two by two, as in the client's file; the chosen tile's section opens
   in one card under them, as on a wide screen, without the notch. */
@media (max-width:900px) {
  .tasks-section { padding:28px 0 56px; }
  .tasks-title { margin:0 0 16px; font-size:26px; }
  .tasks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #task-manage, #task-block { grid-row:2; }
  .task-panel { grid-row:3; }
  html:not(.js) .task-panel[data-panel=types] { grid-row:4; }
  html:not(.js) .task-panel[data-panel=manage] { grid-row:5; }
  html:not(.js) .task-panel[data-panel=block] { grid-row:6; }
  .task { min-height:160px; border-radius:18px; }
  .task-panel-body { margin-top:6px; border-radius:22px; }
  .task-panel-body::before { display:none; }
  .steps { gap:20px; border-radius:21px 21px 0 0; padding:24px; }
  /* On a narrow screen the icon sits beside the heading and the text takes the full width. */
  .step { grid-template-columns:44px minmax(0,1fr); align-items:start; gap:16px 12px; }
  .steps > .step-label { margin-bottom:5px; }
  .step > div { display:contents; }
  .step-icon { width:44px; height:44px; border-radius:13px; }
  .step-icon .icon-mask { width:24px; height:24px; }
  .step h3 { margin:-.259em 0 0; font-size:24px; }
  .identity legend { font-size:17px; }
  .step p { grid-column:1 / -1; font-size:12px; }
  .task-panel-body { display:block; }
  .choose { position:static; padding:24px; }
  .instruction-actions { flex-direction:column; align-items:stretch; }
  .instruction-link { width:100%; }
}
@media (max-width:680px) {
  .identity-switch { width:100%; }
  .steps, .choose { padding:23px; }
  .step { row-gap:11px; }
  .steps > .step-label { margin-bottom:-3px; }
  html { scroll-padding-top:92px; }
  .shell { width:calc(100% - 32px); }
  .hero { padding:42px 0 12px; }
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .hero .eyebrow { margin-bottom:16px; font-size:10px; }
  /* As in the file from 385px; on a narrower phone «документооборота» would not fit at its 37px. */
  .hero h1 { margin-bottom:21px; font-size:min(clamp(32px,9.6vw,54px),8.9cqi); }
  .hero-lead { font-size:15px; line-height:1.7; }
  .hero-lead > .hero-note { margin-top:17px; font-size:13px; }
  .tasks-title { font-size:24px; }
  /* The scene as a small picture, as in the client's file: it no longer takes the width of the screen. */
  .hero-scene { width:min(56%,230px); justify-self:center; }
  /* Tiles as in the client's file for a phone: smaller picture and number, no check (the tile itself is
     light blue). */
  .tasks { gap:10px; }
  .task { min-height:172px; gap:8px; padding:17px; }
  .task-art { width:62px; height:62px; margin:-5px 0 0 -7px; }
  .task-number { padding-top:4px; font-size:10px; }
  .task-label { padding-right:0; font-size:15px; overflow-wrap:break-word; }
  .task-check { display:none; }
  /* No card inside a card on a phone: the answer sits in the choice block under a divider. */
  .choose .provider-result { border:0; border-top:1px solid var(--line); border-radius:0; padding:14px 0 0; background:transparent; }
  .choose .provider-result.result-empty { border:1px solid var(--empty-line); border-radius:16px; padding:16px; background:var(--empty-fill); }
  .instruction-link { padding-inline:16px; }
  .footer-inner { align-items:flex-start; flex-direction:column; gap:12px; padding-top:24px; }
  .footer-links { flex-wrap:wrap; gap:0 22px; }
  .toast { right:16px; bottom:16px; left:16px; max-width:none; }
  .picker-toggle { min-height:64px; gap:12px; padding:10px 12px 10px 10px; }
  /* A slightly smaller mark leaves the name a line of its own on a 375px screen. */
  .picker-toggle .op-mark { width:38px; height:38px; flex-basis:38px; }
}
/* Two tiles side by side leave a word like «документооборота» no room on a narrower screen: long words
   are hyphenated there, and only those. */
@media (max-width:359px) {
  .task { padding:14px; }
  .task-label { font-size:14px; hyphens:auto; hyphenate-limit-chars:10 4 4; text-wrap:wrap; }
}
@media print {
  .site-header, .site-footer, .hero-scene, .toast { display:none !important; }
  .task-panel { grid-template-rows:1fr; }
  .task-panel-body { opacity:1; translate:none; box-shadow:none; }
  a { text-decoration:underline; }
}

/* ---------------------------------------------------------------- the tile line
   In the brief text a tile has a bold title and a line under it, as the tiles of the client's file
   subscriber-id-guide-v6; the line keeps clear of the check in the corner. */
.task-description { display:block; max-width:min(205px,calc(100% - 28px)); margin-top:-4px; color:var(--text-soft); font-size:11px; font-weight:400; line-height:1.4; letter-spacing:0; }
@media (max-width:1100px) { .task-description { font-size:10px; } }
@media (max-width:680px) { .task-description { max-width:none; margin-top:-2px; line-height:1.45; } }