/* Страницы «Красивого резюме» в языке J «Apple с иконками» (ТЗ docs/platform/ki-ri/tasks/2026-10-16-site-apple-redesign.md,
   фаза 2; макеты diag/design/previews/site-apple-redesign-{landing,form,list,state,legal}.html). Компоненты — pf-* из
   platform.css (копия platform-ui): капсулы pf-cap, списки pf-grp/pf-row, плашки pf-alert/pf-flash, пейволл pf-pw,
   ошибка pf-err, лист pf-sheet, сегмент pf-seg, тумблер pf-tog, значки pf-icon. Здесь — только раскладка страниц и то,
   чего в platform.css нет. Старых .btn/.card/.pill нет. Инлайн-стилей нет (CSP style-src 'self'). */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/Onest-cyrillic-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/Onest-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#f6f9f7;--warn-bg:#fff4ea;--work-tint:#eef0fe}
.page-top{margin-top:var(--pf-gap-page)}  /* margin: медиазапрос .pf-wrap{padding:0 16px} не должен его обнулять */.page-top>:first-child{margin-top:0}
.inline-form{display:inline}
summary:focus-visible,a:focus-visible,input:focus-visible,label:focus-visible,button:focus-visible{outline:2px solid var(--g);outline-offset:2px}
/* типографика: H1 — Onest 800 одним цветом (docs/conventions.md, «Единая сетка») */
h1{font-size:46px;line-height:1.08;letter-spacing:-.03em;font-weight:800}
.pf-app-head h1,.pf-pw h1,.pf-sheet h1{font-weight:800}
h2{font-size:24px;letter-spacing:-.02em;margin-bottom:14px}
h3{font-size:18px;margin:18px 0 8px}
.mut{color:var(--mut)}.note{font-size:13px;color:var(--mut)}
.note b,.note strong{color:var(--ink)}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt18{margin-top:18px}.mt22{margin-top:22px}.mt36{margin-top:36px}
.mt72{margin-top:72px}.mb12{margin-bottom:12px}
[hidden]{display:none !important}
.okc{color:var(--g);display:inline-flex;align-items:center;gap:4px}
.ok-ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pf-gl{background:var(--work-tint)}  /* светлый тон раздела «Работа» под глифом */
/* подполоса меню сервиса (часть шапки): «Новое резюме», «Мои резюме» — капсулы, как меню раздела */
.subnav{background:#fff;background:var(--mat-regular);border-bottom:1px solid var(--hair)}
.subnav .pf-wrap{display:flex;gap:4px;height:42px;align-items:center;font-size:14px;color:var(--ink-2);font-weight:500}
.subnav a{padding:4px 12px;border-radius:999px}
.subnav a:hover{color:var(--ink);background:rgba(255,255,255,.7)}
/* баннер пробного периода — плашка над страницей, по левому краю сетки */
.trial-banner{margin-top:16px;border-radius:var(--r-m);background:#e3f3ec;color:var(--g);padding:10px 16px;font-weight:600;font-size:14px}
.trial-banner.warn{background:var(--warn-bg);color:var(--pf-amber);box-shadow:inset 0 0 0 1px rgba(180,83,9,.2)}
/* лендинг (обои — body.pf-wall): значок сервиса над заголовком, капсула цвета раздела, два примера оформления */
.hero-imgs{display:flex;gap:16px}
.hero-imgs img{width:48%;height:auto;border-radius:14px;box-shadow:0 30px 60px -30px rgba(24,35,31,.45),0 0 0 1px var(--hair)}
.hero-imgs img:first-child{transform:rotate(-3deg)}
.hero-imgs img:last-child{transform:rotate(3deg);margin-top:30px}
.trio{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.trio>div{padding:22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-content:start}
.trio>div+div{box-shadow:inset 1px 0 0 var(--hair)}
.trio .pf-gl{grid-row:1/span 2}.trio b{font-size:16px}.trio p{font-size:14px;line-height:1.4}
/* загрузка: зона — толстый материал с обводкой цвета раздела, согласие и инструкция — сгруппированные списки */
.dropzone{display:grid;justify-items:center;gap:8px;text-align:center;padding:40px 24px;border-radius:var(--r-l);background:#fff;background:var(--mat-thick);
  box-shadow:inset 0 0 0 2px rgba(79,70,229,.3),inset 0 1px 0 var(--edge)}
.dropzone.drag{background:var(--work-tint);box-shadow:inset 0 0 0 2px var(--c)}
.dropzone .pf-icon{margin-bottom:6px}
.dropzone b.big{font-size:20px;letter-spacing:-.01em;display:block}
.dropzone .pf-cap{margin-top:8px}
.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.consent-box{margin-top:18px}
.consent-box .note{font-size:14px}
.chk{align-items:flex-start;cursor:pointer}
.chk input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--c)}
.chk span{font-size:15px;line-height:1.4}.chk a{color:var(--c);font-weight:600}
.consent-box details>summary{list-style:none;cursor:pointer}
.consent-box details>summary::-webkit-details-marker{display:none}
.consent-box summary.pf-row::before{content:'';position:absolute;top:0;left:18px;right:0;height:1px;background:var(--hair)}
.consent-box details[open] .pf-chev-r{transform:rotate(90deg)}
.legal-text{margin:0 18px 16px;max-height:260px;overflow:auto;font-size:13px;color:var(--mut);padding:12px;background:var(--bg);border-radius:10px}
.legal-text p{margin:0 0 8px}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.spin{display:none;align-items:center;gap:8px;font-size:14px}
.busy-on .spin,.busy-on+.spin{display:flex}
.spinner{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(79,70,229,.25);border-top-color:var(--c);animation:pf-spin .8s linear infinite}
@keyframes pf-spin{to{transform:rotate(360deg)}}
ol.how{list-style:none;counter-reset:s}ol.how li{counter-increment:s}
ol.how .n::before{content:counter(s)}
.how .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--c);background:var(--work-tint);flex:none}
.pf-cap[disabled],.pf-cap.busy{opacity:.6;cursor:progress}
.pf-cap.block{display:flex;width:100%}
/* таблица сравнения оформлений — внутри сгруппированного списка */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:12px 14px;border-bottom:1px solid var(--hair)}
td{padding:14px;border-bottom:1px solid var(--hair);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.tbl-card{overflow-x:auto;padding:4px 4px 0}  /* таблица не расширяет страницу на телефоне */
.tbl-card table{font-size:13px}
/* палитры (цвета — /resume/palettes.css) */
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{display:inline-block;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);cursor:pointer}
.sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.sw.static{cursor:default;display:inline-block;vertical-align:middle;width:18px;height:18px;flex:none}
.thumb{width:44px;display:block;border-radius:6px;box-shadow:0 0 0 1px var(--hair);flex:none}
/* выбор оформления */
.designs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dcard{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:22px;box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 2px transparent}
.dcard.on{background:#f3f2fe;box-shadow:inset 0 0 0 2px var(--c)}
.dcard .title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dcard .title-row b{font-size:20px}
.dcard ul{padding-left:18px;margin-top:8px}
.pv-thumb{position:relative;width:150px;aspect-ratio:794/1123;overflow:hidden;border-radius:8px;box-shadow:0 0 0 1px var(--hair);background:#e7e9ee}
.pv-frame{border:0;transform-origin:0 0;display:block;background:#fff}
.pv-thumb .pv-frame{width:794px;height:1123px;pointer-events:none}
.pv-big{background:#e9efeb;border-radius:var(--r-s);padding:10px;overflow:hidden}
.pv-big .pv-box{position:relative;overflow:hidden;border-radius:4px}
.pv-big .pv-frame{width:794px}
.pv-big[hidden],.pv-box[hidden]{display:none}
.step2{display:grid;grid-template-columns:420px 1fr;gap:32px;align-items:start}
.preview-card{border-radius:var(--r-l);padding:16px;box-shadow:inset 0 1px 0 var(--edge),0 1px 2px rgba(24,35,31,.04)}
.explain{margin:6px 14px 14px;background:var(--work-tint);border-radius:var(--r-s);padding:12px 14px}
.help-q{cursor:help}
.done,.pad-card{padding:16px 18px}
.dcard.on .pick-btn,.dcard:not(.on) .pill-sel{display:none}
.step2>*,.mine>*,.designs>*{min-width:0}  /* колонка с превью (iframe 794 px) не раздвигает сетку */
.pv-big,.preview-card{max-width:100%}
/* мои резюме */
.mine{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:start}
.sticky{position:sticky;top:calc(var(--pf-header-h) + 16px)}  /* под липкой шапкой платформы */
/* Правая панель «Моих резюме»: управление (оформление, цвет, фото, кнопки) всегда сверху и на виду, а полотно резюме
   прокручивается внутри своей области — иначе кнопки уезжали на несколько экранов вниз, под всё полотно.
   Без backdrop-filter: он сделал бы панель контейнером для position:fixed и сломал «Открыть крупно». */
.mine-side{display:flex;flex-direction:column;max-height:calc(100vh - var(--pf-header-h) - 32px);padding:20px;border-radius:var(--r-l);box-shadow:inset 0 1px 0 var(--edge),0 1px 2px rgba(24,35,31,.04)}
.side-controls{flex:none}
.side-preview{flex:1;min-height:220px;overflow-y:auto;margin-top:14px;border-radius:var(--r-m);background:#e9efeb}
.side-preview .pv-big{border-radius:var(--r-m)}
.side-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.side-title b{font-size:17px}
.side-link{font-size:14px;font-weight:600;color:var(--c)}
.seg{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.side-bar{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.side-zoom{border:0;background:none;color:var(--c);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:4px 0}
.side-bar+.side-preview{margin-top:6px}
.mine-side.is-zoom{z-index:1000}  /* sticky создаёт свой слой: поднимаем его целиком над шапкой */
.mine-side.is-zoom .side-bar{position:fixed;top:calc(4vh + 10px);right:calc(6vw + 24px);z-index:1001}
.mine-side.is-zoom .side-bar .note{display:none}
.mine-side.is-zoom .side-zoom{background:#fff;padding:8px 16px;border-radius:999px;box-shadow:0 2px 10px rgba(19,23,33,.25);font-weight:700}
.mine-side.is-zoom .side-preview{position:fixed;inset:4vh 6vw;z-index:1000;margin:0;max-height:none;box-shadow:0 0 0 100vmax rgba(19,23,33,.45),0 20px 60px rgba(19,23,33,.35);padding:12px}
.photo-toggle{margin:0 0 12px}
.photo-toggle .tog-t{display:grid;gap:1px}
.photo-toggle.off{cursor:default;color:var(--mut)}
.photo-toggle input:disabled+i{opacity:.45}
.row-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.source-row .k small,.ver .k small{font-size:13px}
.ver.sel{background:var(--work-tint)}
.ver .k a:hover b{color:var(--c)}
.acts{display:flex;align-items:center;gap:8px;flex:none}
.versions .pf-row,.source-row{flex-wrap:nowrap}
.mine-empty{justify-items:center;margin-top:0}
.mine-empty b{font-size:20px}
.msg{margin-bottom:16px}
/* двухкликовое подтверждение без JS */
details.confirm{display:inline-block;position:relative}
details.confirm>summary{list-style:none}
details.confirm>summary::-webkit-details-marker{display:none}
details.confirm[open]>summary{background:var(--warn-bg)}
.confirm-box{position:absolute;right:0;top:100%;margin-top:6px;z-index:5;min-width:240px;box-shadow:0 10px 30px rgba(24,35,31,.16),inset 0 0 0 1px rgba(192,57,43,.2);background:#fff;border-radius:var(--r-s);padding:10px 12px;text-align:left;white-space:normal}
.confirm-box p{font-size:13px;margin-bottom:8px}
/* .pf-grp платформы обрезает содержимое (overflow:hidden ради скруглений) — открытое подтверждение выпускаем наружу */
.pf-grp:has(details.confirm[open]){overflow:visible}
.removed-list{margin-top:8px;padding-left:18px;font-size:13px;color:var(--mut);max-height:200px;overflow:auto}
.removed-list li{margin-bottom:3px;word-break:break-word}
/* пейволл — pf-pw (макет site-apple-redesign-state): здесь только вторичные ссылки и нижняя полоса */
.pw-page .pf-pw .pf-icon svg{width:30px;height:30px}
.pw-page .pf-pw p{max-width:40ch}
.pf-pw.is-off p{margin-bottom:4px}
.pw-form{margin:0}
.pw-quiet{font-size:15px;font-weight:600;color:var(--c);padding:4px 2px}
.pw-fine{font-size:13px;color:var(--mut)}
.pw-contact{margin-top:10px;font-size:13px;line-height:1.5}
.pw-contact a{color:var(--c);font-weight:600}
.pw-bottom{width:100%;margin-top:14px;padding-top:16px;box-shadow:inset 0 1px 0 var(--hair);display:grid;gap:8px;justify-items:center}
.pw-page .pf-pw .pw-note{font-size:13px;max-width:none}
.pw-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 18px}
.pw-links form{margin:0}
.pw-link{background:none;border:0;padding:4px 2px;font:600 14px 'Onest',sans-serif;color:var(--ink);cursor:pointer}
.pw-link:hover{color:var(--c)}
.pw-link.danger{color:var(--pf-danger)}
.pw-home{margin-top:16px}
/* страница ошибки — pf-err; юридические тексты — лист pf-sheet (первый заголовок файла — заголовок листа) */
.pf-err h1{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:700;margin:0}
.legal-page .pf-sheet>h2:first-child{font-size:34px;line-height:1.12;letter-spacing:-.025em;margin:0 0 14px;font-weight:800}
.legal-page .pf-sheet h3{font-size:17px;margin:22px 0 8px}
.legal-page .pf-sheet ul{margin:0 0 10px 20px}
.legal-page .pf-sheet blockquote{border-left:3px solid var(--hair);padding-left:12px;color:var(--mut);margin-bottom:10px}
.legal-page .pf-sheet .tbl{overflow-x:auto;margin-bottom:12px}
.legal-page .pf-sheet code{background:rgba(24,35,31,.06);border-radius:6px;padding:0 4px;font-size:.92em}
.pf-sheet{overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
@media (prefers-reduced-transparency:reduce){.subnav,.dropzone,.preview-card,.mine-side{background:#fff}}
@media (max-width:860px){
  h1{font-size:36px}
  .designs,.step2,.mine,.trio{grid-template-columns:minmax(0,1fr)}
  .trio>div+div{box-shadow:inset 0 1px 0 var(--hair)}
  .dcard{grid-template-columns:110px minmax(0,1fr)}
  .pv-thumb{width:110px}
  .sticky{position:static}
  .mine-side{max-height:none;order:-1}  /* на телефоне оформление и кнопки — первыми, список версий ниже */
  .side-preview{max-height:70vh}
  .mine-side.is-zoom .side-preview{inset:2vh 2vw}
}
@media (max-width:520px){
  .pf-app-head h1{font-size:28px}
  .row-actions{grid-template-columns:1fr}
  .mine-side{padding:16px}
  .side-title{flex-wrap:wrap;gap:4px 12px}
  .versions .pf-row{flex-wrap:wrap;padding:12px 14px}
  .versions .k{flex:1 1 calc(100% - 100px)}
  .versions .acts{margin-left:58px}
  .source-row{flex-wrap:wrap}.source-row .acts{margin-left:54px}
  .confirm-box{right:auto;left:0}
  .pf-sheet{padding:24px 18px}
}