/* Profile as a living resume document. Scoped under .pdoc so the mock's generic class names (.pd-btn, .pd-hero, .pd-avatar, .pd-name) cannot collide with the site-wide styles.css. Theme variables ride on the same scope. */ .pdoc { --grad: linear-gradient(100deg, #6366f1, #a855f7); --accent:#6366f1; --accent-light:#818cf8; --accent-2:#a855f7; --bg:#f6f6fb; --surface:#ffffff; --surface-2:#fbfbfe; --border:rgba(15,15,25,0.08); --border-strong:rgba(15,15,25,0.14); --text:#0a0a14; --secondary:#52525b; --muted:#71717a; --green:#16a34a; --orange:#ea580c; --danger:#ef4444; --shadow:0 1px 2px rgba(15,15,25,.04), 0 8px 24px rgba(15,15,25,.06); --shadow-lg:0 4px 12px rgba(15,15,25,.06), 0 24px 60px rgba(15,15,25,.10); --hl:rgba(99,102,241,.06); --hl-ring:rgba(99,102,241,.28); --paper:#ffffff; --chip:rgba(99,102,241,.08); --chip-text:#4f46e5; --rule:rgba(15,15,25,.10); } [data-theme="dark"] .pdoc { --bg:#09090b; --surface:#18181b; --surface-2:#1e1e22; --border:rgba(255,255,255,0.06); --border-strong:rgba(255,255,255,0.12); --text:#fafafa; --secondary:#a1a1aa; --muted:#8a8a94; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 4px 12px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5); --hl:rgba(129,140,248,.10); --hl-ring:rgba(129,140,248,.35); --paper:#18181b; --chip:rgba(129,140,248,.14); --chip-text:#c7d2fe; --rule:rgba(255,255,255,.10); } .pdoc, .pdoc *::before, .pdoc *::after {box-sizing:border-box} /* clip, not hidden: overflow-x:hidden turns this into a scroll container and silently kills position:sticky on the rail inside it, so the panel stopped travelling with the page. clip contains the same overflow without creating that container. */ .pdoc {max-width:100%;overflow-x:clip} .pdoc { margin:0; /* No background here: this rule came from the mock's . Painting it drew an opaque square block behind the rounded document, over the app's own page background. The document itself carries the paper surface. */ color:var(--text); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease; } .pdoc button {font:inherit;color:inherit;cursor:pointer} .pdoc a {color:inherit} .pdoc /* ---------- top bar ---------- */ .pd-topbar { position:sticky;top:0;z-index:60; backdrop-filter:saturate(180%) blur(14px); background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--border); } .pdoc .pd-topbar-in { max-width:1400px;margin:0 auto;padding:12px 24px; display:flex;align-items:center;gap:16px; } .pdoc .pd-brand {display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em} .pdoc .pd-brand-mark { width:28px;height:28px;border-radius:9px;background:var(--grad); display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800; box-shadow:0 4px 12px rgba(99,102,241,.35); } .pdoc .pd-brand span {font-size:15px} .pdoc .pd-brand small {color:var(--muted);font-weight:500;font-size:13px} .pdoc .pd-topbar-spacer {flex:1} .pdoc .pd-tb-actions {display:flex;align-items:center;gap:8px} .pdoc .pd-btn { display:inline-flex;align-items:center;gap:7px; border:1px solid var(--border-strong);background:var(--surface); border-radius:11px;padding:8px 13px;font-size:13.5px;font-weight:600; transition:all .16s ease;white-space:nowrap; } .pdoc .pd-btn:hover {border-color:var(--accent-light);transform:translateY(-1px);box-shadow:0 6px 16px rgba(99,102,241,.14)} .pdoc .pd-btn:active {transform:translateY(0)} .pdoc .pd-btn-primary { background:var(--grad);color:#fff;border-color:transparent; box-shadow:0 4px 14px rgba(99,102,241,.32); } .pdoc .pd-btn-primary:hover {box-shadow:0 8px 22px rgba(99,102,241,.42)} .pdoc .pd-btn-ghost {background:transparent;border-color:transparent;color:var(--secondary)} .pdoc .pd-btn-ghost:hover {background:var(--hl);color:var(--text);box-shadow:none} .pdoc .pd-btn-icon {padding:8px;width:36px;height:36px;justify-content:center} .pdoc .pd-btn-sm {padding:5px 10px;font-size:12.5px;border-radius:9px} .pdoc /* ---------- layout ---------- */ .pd-wrap { max-width:1400px;margin:0 auto;padding:24px; display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start; } @media (max-width:1080px) { .pdoc .pd-wrap {grid-template-columns:minmax(0,1fr);} .pdoc .pd-rail {position:static !important;order:-1} } @media (max-width:560px) { .pdoc .pd-topbar-in {padding:10px 14px;gap:10px} .pdoc .pd-brand small {display:none} .pdoc .pd-wrap {padding:14px;gap:16px} } .pdoc /* ---------- the resume document ---------- */ .pd-doc { background:var(--paper); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; position:relative; } .pdoc .pd-doc-top {display:none} .pdoc .pd-doc-pad {padding:38px 44px 44px} @media (max-width:560px) { .pdoc .pd-doc-pad {padding:22px 18px 30px} } .pdoc /* header of the document */ .pd-hero {display:flex;gap:22px;align-items:flex-start} .pdoc .pd-avatar { width:78px;height:78px;border-radius:22px;flex:none; background:var(--grad);color:#fff; display:grid;place-items:center;font-size:28px;font-weight:800;letter-spacing:-.02em; box-shadow:0 10px 28px rgba(99,102,241,.34); } .pdoc .pd-hero-main {min-width:0;flex:1} .pdoc .pd-name { font-size:34px;font-weight:800;letter-spacing:-.028em;line-height:1.12;margin:0 0 4px; } .pdoc .pd-headline { font-size:17px;font-weight:600;color:var(--secondary);letter-spacing:-.01em;margin:0 0 10px; } .pdoc .pd-hero-meta { display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:13.5px; } .pdoc .pd-hero-meta b {color:var(--secondary);font-weight:600} @media (max-width:560px) { .pdoc .pd-hero {gap:14px} .pdoc .pd-avatar {width:56px;height:56px;border-radius:17px;font-size:21px} .pdoc .pd-name {font-size:25px} .pdoc .pd-headline {font-size:15px} } .pdoc .pd-doc-links {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .pdoc .pd-lnk { display:inline-flex;align-items:center;gap:7px; border:1px solid var(--border);background:var(--surface-2); padding:6px 11px;border-radius:10px;font-size:13px;font-weight:600; text-decoration:none;transition:all .16s ease; } .pdoc .pd-lnk:hover {border-color:var(--accent-light);color:var(--accent);transform:translateY(-1px)} .pdoc .pd-lnk .pd-dot {width:6px;height:6px;border-radius:50%;background:var(--green)} .pdoc .pd-lnk.pd-empty { border-style:dashed;color:var(--muted);background:transparent;font-weight:500; } .pdoc .pd-lnk.pd-empty:hover {color:var(--accent);border-color:var(--accent-light)} .pdoc hr.pd-rule {border:0;border-top:1px solid var(--rule);margin:30px 0} .pdoc /* section chrome inside document */ .pd-sec-head { display:flex;align-items:center;gap:10px;margin:0 0 14px; } .pdoc .pd-sec-title { font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:0; } .pdoc .pd-sec-line {flex:1;height:1px;background:var(--rule)} .pdoc .pd-badge-match { display:inline-flex;align-items:center;gap:5px; font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:none; color:var(--chip-text);background:var(--chip); border:1px solid rgba(99,102,241,.16); padding:3px 8px;border-radius:999px;white-space:nowrap; } .pdoc .pd-badge-match svg {width:11px;height:11px} @media (max-width:560px) { .pdoc .pd-badge-match span {display:none} .pdoc .pd-badge-match {padding:4px 6px} } .pdoc /* editable blocks */ .pd-ed { position:relative;border-radius:12px; padding:8px 12px;margin:-8px -12px; transition:background .15s ease, box-shadow .15s ease; cursor:text; } .pdoc .pd-ed::after { content:"";position:absolute;inset:0;border-radius:12px; box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s ease;pointer-events:none; } .pdoc .pd-ed:hover {background:var(--hl)} .pdoc .pd-ed:hover::after {box-shadow:inset 0 0 0 1px var(--hl-ring)} .pdoc .pd-ed:hover > .pd-pen {opacity:1;transform:translateY(0)} .pdoc .pd-pen { position:absolute;top:6px;right:8px;opacity:0;transform:translateY(-3px); transition:all .16s ease; background:var(--surface);border:1px solid var(--border-strong); border-radius:8px;width:26px;height:26px;display:grid;place-items:center; color:var(--muted);box-shadow:var(--shadow);z-index:3; } .pdoc .pd-pen:hover {color:var(--accent);border-color:var(--accent-light)} .pdoc .pd-pen svg {width:13px;height:13px} .pdoc .pd-ed.editing {background:var(--hl);cursor:auto} .pdoc .pd-ed.editing::after {box-shadow:inset 0 0 0 1.5px var(--accent)} .pdoc .pd-ed.editing > .pd-pen {display:none} .pdoc [contenteditable] {outline:none} .pdoc [contenteditable]:empty::before {content:attr(data-ph);color:var(--muted);font-style:italic} .pdoc .pd-ed-tools { display:flex;gap:6px;align-items:center;margin-top:10px; } .pdoc .pd-hint-key { font-size:11.5px;color:var(--muted);margin-left:4px; } .pdoc .pd-summary {font-size:15.5px;line-height:1.7;color:var(--secondary);margin:0} .pdoc /* experience */ .pd-job {position:relative;padding-left:26px;margin-bottom:26px} .pdoc .pd-job:last-child {margin-bottom:0} .pdoc .pd-job::before { content:"";position:absolute;left:5px;top:9px;width:9px;height:9px;border-radius:50%; background:var(--paper);border:2.5px solid var(--accent-light);z-index:2; } .pdoc .pd-job.now::before {background:var(--accent);border-color:var(--accent)} .pdoc .pd-job::after { content:"";position:absolute;left:9.2px;top:22px;bottom:-26px;width:1.5px; background:linear-gradient(var(--rule), transparent); } .pdoc .pd-job:last-child::after {display:none} .pdoc .pd-job-head {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} .pdoc .pd-job-role {font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin:0} .pdoc .pd-job-co {font-size:14.5px;font-weight:600;color:var(--accent);margin:0} .pdoc .pd-job-dates { margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums; white-space:nowrap; } @media (max-width:560px) { .pdoc .pd-job-dates {margin-left:0;flex-basis:100%} } .pdoc .pd-bul {list-style:none;padding:0;margin:9px 0 0} .pdoc .pd-bul li { position:relative;padding-left:17px;margin:5px 0;color:var(--secondary);font-size:14px;line-height:1.6; } .pdoc .pd-bul li::before { content:"";position:absolute;left:3px;top:9px;width:5px;height:5px;border-radius:50%; background:var(--accent-light);opacity:.75; } .pdoc .pd-bul li:focus {outline:none} .pdoc .pd-job-collapse { display:inline-flex;align-items:center;gap:5px;margin-top:8px; font-size:12.5px;font-weight:600;color:var(--accent); background:none;border:0;padding:4px 0; } .pdoc .pd-job-collapse svg {width:12px;height:12px;transition:transform .2s ease} .pdoc .pd-job.collapsed .pd-bul li:nth-child(n+3) {display:none} .pdoc .pd-job.collapsed .pd-job-collapse svg {transform:rotate(-90deg)} .pdoc /* skills */ .pd-skill-group {margin-bottom:16px} .pdoc .pd-skill-group:last-child {margin-bottom:0} .pdoc .pd-skill-label { font-size:12.5px;font-weight:700;color:var(--muted);margin:0 0 7px; letter-spacing:.01em; } .pdoc .pd-chips {display:flex;flex-wrap:wrap;gap:6px} .pdoc .pd-chip { display:inline-flex;align-items:center;gap:6px; background:var(--chip);color:var(--chip-text); border:1px solid rgba(99,102,241,.14); padding:4.5px 10px;border-radius:9px;font-size:13px;font-weight:600; transition:all .14s ease; } .pdoc .pd-chip .pd-x { width:13px;height:13px;display:none;place-items:center;border-radius:50%; background:rgba(0,0,0,.10);font-size:9px;line-height:1;color:inherit; border:0;padding:0; } [data-theme="dark"] .pdoc .pd-chip .pd-x {background:rgba(255,255,255,.14)} .pdoc .pd-skills-editing .pd-chip .pd-x {display:grid} .pdoc .pd-chip .pd-x:hover {background:var(--danger);color:#fff} .pdoc .pd-chip-add { background:transparent;border:1px dashed var(--border-strong);color:var(--muted); font-weight:500; } .pdoc .pd-chip-add:hover {color:var(--accent);border-color:var(--accent-light)} .pdoc .pd-chip-input { background:var(--surface);border:1px solid var(--accent);color:var(--text); padding:4.5px 10px;border-radius:9px;font-size:13px;font-weight:600; width:150px;outline:none;font-family:inherit; } .pdoc /* projects + certs cards */ .pd-cards {display:grid;gap:10px} .pdoc .pd-card-i { border:1px solid var(--border);background:var(--surface-2); border-radius:14px;padding:14px 16px;position:relative; transition:all .16s ease; } .pdoc .pd-card-i:hover {border-color:var(--hl-ring);background:var(--hl);transform:translateY(-1px)} .pdoc .pd-card-i:hover .pd-card-tools {opacity:1} .pdoc .pd-card-tools { position:absolute;top:10px;right:10px;display:flex;gap:5px;opacity:0;transition:opacity .16s ease; } .pdoc .pd-mini { width:27px;height:27px;border-radius:8px;display:grid;place-items:center; background:var(--surface);border:1px solid var(--border-strong);color:var(--muted); box-shadow:var(--shadow); } .pdoc .pd-mini svg {width:13px;height:13px} .pdoc .pd-mini:hover {color:var(--accent);border-color:var(--accent-light)} .pdoc .pd-mini.del:hover {color:var(--danger);border-color:var(--danger)} .pdoc .pd-card-title {font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;padding-right:64px} .pdoc .pd-card-desc {font-size:13.5px;color:var(--secondary);margin:0;line-height:1.55} .pdoc /* empty invitation */ .pd-invite { border:1px dashed var(--border-strong);border-radius:14px; padding:16px;display:flex;align-items:center;gap:13px; background:transparent;width:100%;text-align:left; transition:all .16s ease; } .pdoc .pd-invite:hover {border-color:var(--accent-light);background:var(--hl)} .pdoc .pd-invite-ic { width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center; background:var(--chip);color:var(--chip-text); } .pdoc .pd-invite-ic svg {width:16px;height:16px} .pdoc .pd-invite-t {font-size:13.5px;font-weight:650;margin:0} .pdoc .pd-invite-s {font-size:12.5px;color:var(--muted);margin:2px 0 0} .pdoc .pd-add-row { display:inline-flex;align-items:center;gap:6px;margin-top:10px; font-size:13px;font-weight:600;color:var(--accent);background:none;border:0;padding:5px 0; } .pdoc .pd-add-row:hover {text-decoration:underline} .pdoc /* ---------- right rail ---------- */ .pd-rail {position:sticky;top:16px;display:grid;gap:16px} /* top was 82px to clear the mock's own topbar. Inside the app there is no such bar, so it just pushed the rail down and left a gap beside the document. 16px keeps it off the viewport edge when it sticks. */ .pdoc .pd-panel { background:var(--surface);border:1px solid var(--border);border-radius:18px; box-shadow:var(--shadow);overflow:hidden; } .pdoc .pd-panel-head { padding:15px 18px 0; } .pdoc .pd-panel-title {font-size:14px;font-weight:700;letter-spacing:-.01em;margin:0} .pdoc .pd-panel-sub {font-size:12px;color:var(--muted);margin:3px 0 0;line-height:1.45} .pdoc .pd-panel-body {padding:14px 18px 18px} .pdoc /* completeness */ .pd-ring-row {display:flex;align-items:center;gap:15px} .pdoc .pd-ring {position:relative;width:66px;height:66px;flex:none} .pdoc .pd-ring svg {transform:rotate(-90deg);display:block} .pdoc .pd-ring-num { position:absolute;inset:0;display:grid;place-items:center; font-size:16px;font-weight:800;letter-spacing:-.02em; } .pdoc .pd-ring-txt h4 {margin:0;font-size:14px;font-weight:700} .pdoc .pd-ring-txt p {margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45} .pdoc .pd-todo {list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px} .pdoc .pd-todo button { width:100%;display:flex;align-items:center;gap:9px;text-align:left; background:var(--surface-2);border:1px solid var(--border);border-radius:11px; padding:9px 11px;font-size:13px;font-weight:600;transition:all .15s ease; } .pdoc .pd-todo button:hover {border-color:var(--accent-light);background:var(--hl);transform:translateX(2px)} .pdoc .pd-todo .pd-tick { width:17px;height:17px;border-radius:6px;border:1.5px dashed var(--border-strong);flex:none; } .pdoc .pd-todo .pd-plus {margin-left:auto;color:var(--accent);font-size:16px;line-height:1} .pdoc .pd-todo li.done button {color:var(--muted);font-weight:500} .pdoc .pd-todo li.done .pd-tick { border:0;background:var(--green);display:grid;place-items:center; } .pdoc .pd-todo li.done .pd-tick::after {content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)} .pdoc .pd-todo li.done .pd-plus {display:none} .pdoc /* search prefs panel */ .pd-prefs-note { display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:600;color:var(--muted); background:var(--surface-2);border:1px solid var(--border); padding:4px 8px;border-radius:999px;margin-top:8px; } .pdoc .pd-prefs-note svg {width:11px;height:11px;flex:none} .pdoc .pd-pf { display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 10px;margin:0 -10px;border-radius:11px; transition:background .14s ease;cursor:pointer;border:0;background:none;width:calc(100% + 20px); text-align:left; } .pdoc .pd-pf:hover {background:var(--hl)} .pdoc .pd-pf + .pd-pf {border-top:1px solid var(--rule)} .pdoc .pd-pf-k {font-size:12.5px;color:var(--muted);white-space:nowrap} .pdoc .pd-pf-v {font-size:13.5px;font-weight:650;text-align:right;letter-spacing:-.01em} .pdoc .pd-pf-v em {font-style:normal;color:var(--muted);font-weight:500} .pdoc .pd-pf-edit { font-size:13.5px;font-weight:650;text-align:right;background:var(--surface); border:1px solid var(--accent);border-radius:9px;padding:4px 8px;color:var(--text); font-family:inherit;outline:none;max-width:170px; } .pdoc select.pf-edit {font-weight:650} .pdoc .pd-locs {display:flex;flex-wrap:wrap;gap:5px;padding-top:10px;margin-top:4px;border-top:1px solid var(--rule)} .pdoc .pd-loc { display:inline-flex;align-items:center;gap:5px; background:var(--surface-2);border:1px solid var(--border); padding:3.5px 9px;border-radius:8px;font-size:12.5px;font-weight:600; } .pdoc .pd-loc .pd-x { border:0;background:none;padding:0;color:var(--muted);font-size:13px;line-height:1; } .pdoc .pd-loc .pd-x:hover {color:var(--danger)} .pdoc .pd-loc.pd-add, .pdoc .pd-chip.pd-add {border-style:dashed;color:var(--accent);font-weight:600;background:transparent} .pdoc .pd-status-dot {width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px;flex:none} .pdoc /* toast */ .pd-toast { position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px); background:var(--text);color:var(--bg); padding:10px 16px;border-radius:12px;font-size:13.5px;font-weight:600; box-shadow:var(--shadow-lg);opacity:0;pointer-events:none; transition:all .22s cubic-bezier(.2,.8,.3,1);z-index:200;max-width:88vw; } .pdoc .pd-toast.on {opacity:1;transform:translate(-50%,0)} .pdoc .pd-doc-foot { display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between; padding:16px 44px;border-top:1px solid var(--rule);background:var(--surface-2); font-size:12.5px;color:var(--muted); } @media (max-width:560px) { .pdoc .pd-doc-foot {padding:14px 18px} } .pdoc .pd-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── Additions for the live renderer ───────────────────────────────────── The mock was a static document; these cover the parts the real page adds: the two-column shell, the search-params rail, inline edit forms and the project/skill/certificate management the profile never had. */ .pdoc .pdoc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .pdoc .pd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; } .pdoc .pd-card-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pdoc .pd-tag-off { font-size: 10px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; text-transform: none; } .pdoc .pd-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; } .pdoc .pd-kv:last-child { border-bottom: 0; } .pdoc .pd-kv span { color: var(--muted); } .pdoc .pd-kv b { color: var(--text); font-weight: 600; text-align: right; } /* The edit pencil floats at the block's top-right. In these two-column rows the value is right-aligned too, so the pencil sat ON TOP of the first value ("Желаемая должность" was half-covered). Reserve its width on the first row only - every other row is clear of it, so the panel keeps its rhythm. */ .pdoc .pd-ed .pd-kv:first-of-type b { padding-right: 34px; } /* :first-of-type, not :first-child - the pencil button is itself the block's first child, so :first-child never matched the row. */ .pdoc .pd-todo { margin: 10px 0 0; padding-left: 18px; font-size: 12px; color: var(--secondary); line-height: 1.7; } .pdoc .pd-skill-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 10px; } .pdoc .pd-skill-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-top: 5px; } .pdoc .pd-chip-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; padding: 0 0 0 6px; } .pdoc .pd-chip-x:hover { color: var(--danger, #ef4444); } /* ── Education ─────────────────────────────────────────────────────────── Every class here is pd- prefixed on purpose: unprefixed names like .row or .empty match the site-wide styles.css and drag foreign chrome into the document (that is how a gradient banner once landed on this page). */ .pdoc .pd-edu { position: relative; margin-bottom: 4px; } /* The action gutter is reserved, never overlaid: the pen and the trash are absolutely placed inside this padding, so text cannot run under them no matter how long the degree name is. min-height keeps the stacked pair inside the row instead of spilling onto the next entry. */ .pdoc .pd-ed.pd-edu-row { padding-right: 46px; min-height: 74px; } .pdoc .pd-edu-degree { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: anywhere; } .pdoc .pd-edu-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; margin-top: 3px; font-size: 13.5px; color: var(--secondary); overflow-wrap: anywhere; } .pdoc .pd-edu-school { font-weight: 500; } .pdoc .pd-edu-sep { color: var(--border-strong); } .pdoc .pd-edu-dates { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .pdoc .pd-edu-del { position: absolute; top: 38px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); box-shadow: var(--shadow); opacity: 0; transform: translateY(-3px); transition: all 0.16s ease; z-index: 3; } .pdoc .pd-edu-del svg { width: 13px; height: 13px; display: block; } .pdoc .pd-edu-del:hover { color: var(--danger); border-color: var(--danger); } .pdoc .pd-edu-row:hover .pd-edu-del, .pdoc .pd-edu-row:focus-within .pd-edu-del, .pdoc .pd-edu-row:focus-within > .pd-pen { opacity: 1; transform: translateY(0); } .pdoc .pd-edu-empty { display: flex; gap: 14px; align-items: flex-start; border: 1px dashed var(--border-strong); border-radius: 14px; padding: 16px 18px; background: var(--hl); } .pdoc .pd-edu-empty-ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--chip); color: var(--chip-text); } .pdoc .pd-edu-empty-ic svg { width: 18px; height: 18px; display: block; } .pdoc .pd-edu-empty-txt { min-width: 0; } .pdoc .pd-edu-empty-txt h3 { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; margin: 0; } .pdoc .pd-edu-empty-txt p { margin: 4px 0 0; font-size: 13px; color: var(--secondary); line-height: 1.55; } /* German runs long ("Bildungseinrichtung", "Ausbildungszeitraum"): let the field caption wrap mid-word rather than widen the form past the document. */ .pdoc .pd-edform label span { overflow-wrap: anywhere; hyphens: auto; } @media (max-width: 560px) { /* Touch has no hover, so the gutter buttons stay visible. */ .pdoc .pd-edu-del, .pdoc .pd-edu-row > .pd-pen { opacity: 1; transform: none; } } .pdoc .pd-proj { position: relative; margin-bottom: 12px; } .pdoc .pd-proj-name { font-size: 14px; font-weight: 700; color: var(--text); } .pdoc .pd-proj-desc { font-size: 13px; color: var(--secondary); margin-top: 2px; } .pdoc .pd-del { position: absolute; top: 4px; right: 34px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; font-size: 11px; padding: 3px 9px; cursor: pointer; opacity: 0; transition: opacity 0.15s; } .pdoc .pd-proj:hover .pd-del { opacity: 1; } .pdoc .pd-del:hover { color: #ef4444; border-color: #ef4444; } .pdoc .pd-add-line { border: 1px dashed var(--border-strong); background: none; color: var(--accent); border-radius: 10px; padding: 7px 14px; font-size: 13px; cursor: pointer; margin-top: 6px; } .pdoc .pd-add-line:hover { background: var(--surface-2); } .pdoc .pd-hint { color: var(--muted); font-size: 13px; font-style: italic; } .pdoc .pd-edform { display: grid; gap: 10px; margin-top: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; } .pdoc .pd-edform label { display: grid; gap: 4px; } .pdoc .pd-edform label span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .pdoc .pd-edform input, .pdoc .pd-edform textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); box-sizing: border-box; } .pdoc .pd-edform textarea { resize: vertical; line-height: 1.5; } .pdoc .pd-edform-act { display: flex; gap: 8px; } .pdoc .pdoc-status { font-size: 12px; color: var(--muted); min-height: 16px; } .pdoc .pdoc-status--err { color: #ef4444; } @media (max-width: 1000px) { .pdoc .pdoc-grid { grid-template-columns: minmax(0, 1fr); } .pdoc .pd-skill-row { grid-template-columns: minmax(0, 1fr); } .pdoc .pd-skill-cat { padding-top: 0; } } /* The classic form stays reachable one click away while the document view beds in - it still owns resume upload and the fields the document does not surface yet. */ .pdoc-legacy { margin-top: 28px; border-top: 1px solid var(--border, rgba(15, 15, 25, 0.08)); padding-top: 14px; } .pdoc-legacy > summary { cursor: pointer; font-size: 13px; color: var(--text-muted, #71717a); list-style: none; padding: 6px 0; } .pdoc-legacy > summary::before { content: "▸ "; } .pdoc-legacy[open] > summary::before { content: "▾ "; } .pdoc-legacy > summary:hover { color: var(--accent, #6366f1); } .pdoc .pdoc-bar { display: flex; justify-content: flex-end; margin-bottom: 6px; } /* The live renderer draws the completeness ring with a conic gradient instead of the mock's inline SVG - no markup to keep in sync with the percentage. */ .pdoc .pd-ring--conic { border-radius: 50%; background: conic-gradient(var(--accent) var(--p, 0%), var(--border) 0); display: grid; place-items: center; } .pdoc .pd-ring--conic::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); } .pdoc .pd-ring--conic .pd-ring-num { z-index: 1; } /* Destructive, so it is deliberately quiet: text-only until hovered. */ .pdoc .pd-clear { margin: 4px 2px 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-size: 12.5px; text-align: left; } .pdoc .pd-clear:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); } .pdoc-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; } /* [hidden] is only display:none by UA default, which the rule above beats - so the hidden host of the download button stayed visible on the page. */ .pdoc-toolbar[hidden] { display: none; } .pdoc .pd-rail-acts { display: grid; gap: 2px; margin-top: 4px; } .pdoc .pd-clear--danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); } .pdoc .pd-clear:not(.pd-clear--danger):hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); } /* ── Optional steps ────────────────────────────────────────────────────── Visibly a second tier under the required list: dimmer text and a plain tag, so a missing certificate never reads like an unmet requirement. */ .pdoc .pd-opt-h { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .pdoc .pd-todo--opt { margin-top: 6px; color: var(--muted); } .pdoc .pd-todo--opt li { margin-bottom: 2px; } .pdoc .pd-opt-tag { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; } /* ── Per-block advice ────────────────────────────────────────────────────── Quiet at rest: an untouched block shows one small button and the price of pressing it. Advice, when it arrives, must read as a suggestion next to the text it is about - not as an error banner over the document. */ .pdoc .pd-adv-idle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .pdoc .pd-adv-btn { border: 1px dashed var(--border-strong); background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 8px; line-height: 1.3; } .pdoc .pd-adv-btn:hover { background: var(--chip); border-style: solid; } .pdoc .pd-adv-btn--off { color: var(--muted); border-color: var(--border); cursor: not-allowed; } .pdoc .pd-adv-btn--off:hover { background: transparent; border-style: dashed; } .pdoc .pd-adv-note { font-size: 11.5px; color: var(--muted); } .pdoc .pd-adv { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--chip); border-left: 3px solid var(--accent); } .pdoc .pd-adv-list { margin: 0; padding-left: 18px; } .pdoc .pd-adv-list li { font-size: 13.5px; line-height: 1.55; color: var(--text); margin-bottom: 6px; } .pdoc .pd-adv-list li:last-child { margin-bottom: 0; } .pdoc .pd-adv-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .pdoc .pd-adv--ok { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); font-size: 13.5px; color: var(--text); } /* Stale: the advice still shows - it may well be valid - but the user is told the block moved under it, instead of silently trusting stale guidance. */ .pdoc .pd-adv--stale { border-left-color: var(--orange); } .pdoc .pd-adv-stale { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--orange); } .pdoc .pd-adv--err { border-left-color: var(--danger); } .pdoc .pd-adv-msg { margin: 0; font-size: 13.5px; color: var(--text); } .pdoc .pd-adv--busy { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--secondary); } .pdoc .pd-adv-spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: pd-spin .7s linear infinite; } @keyframes pd-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pdoc .pd-adv-spin { animation-duration: 2.4s; } } /* Quota card: the price is stated where the user can see it before spending, not after. */ .pdoc .pd-quota-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--text); } .pdoc .pd-quota-tag { font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px; } .pdoc .pd-quota-n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-top: 8px; } .pdoc .pd-quota-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 8px; } .pdoc .pd-quota-bar i { display: block; height: 100%; background: var(--grad); } .pdoc .pd-quota-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; } /* Resume strength card: colour the ring and accent by tone (ok/mid/low). The * score is a real quality signal, so it earns a colour, unlike the neutral * completeness ring. */ .pd-str { position: relative; } .pd-str .pd-ring-num { font-size: 1.5rem; font-weight: 700; } .pd-ring--ok { --ring: #22c55e; } .pd-ring--mid { --ring: #f59e0b; } .pd-ring--low { --ring: #ef4444; } .pd-ring--conic.pd-ring--ok, .pd-ring--conic.pd-ring--mid, .pd-ring--conic.pd-ring--low { background: conic-gradient(var(--ring) calc(var(--p)), rgba(127,127,127,.15) 0); } .pd-str--ok .pd-card-h { color: #16a34a; } .pd-str--mid .pd-card-h { color: #d97706; } .pd-str--low .pd-card-h { color: #dc2626; } /* LLM strength: the model's assessment, its button and badge. */ .pd-str-badge { font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(100deg, #6366f1, #a855f7); padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px; } .pd-str-actions { margin-top: 12px; } .pd-str-btn { width: 100%; padding: 9px 14px; min-height: 40px; border-radius: 9px; cursor: pointer; font-size: .9rem; font-weight: 600; color: #fff; border: none; background: linear-gradient(100deg, #6366f1, #a855f7); transition: opacity .15s; touch-action: manipulation; } .pd-str-btn:hover { opacity: .93; } .pd-str-btn:disabled { opacity: .6; cursor: default; } .pd-str-note { display: block; margin-top: 7px; font-size: .76rem; color: var(--text-secondary); text-align: center; } .pd-str-points li { line-height: 1.45; } /* ============ Right rail V2 (bold hero) - pdr-* namespace ============ */ .pdoc .pdr-rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #cfcfe0 transparent; } /* Keep each card at its natural height. The rail is a flex column with a * capped height and its own scroll; without this the flex default (shrink: 1) * squished the tall strength card and its overflow:hidden clipped the reasons * and the button - "нельзя прочитать". Now the rail scrolls instead. */ .pdoc .pdr-rail > * { flex-shrink: 0; } .pdoc .pdr-rail::-webkit-scrollbar { width: 8px; } .pdoc .pdr-rail::-webkit-scrollbar-thumb { background: #cfcfe0; border-radius: 8px; border: 2px solid #f6f6fb; } .pdoc .pdr-rail::-webkit-scrollbar-track { background: transparent; } .pdoc .pdr-card { background: #fff; border: 1px solid #e8e8f0; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,16,32,.04), 0 8px 24px rgba(15,16,32,.06); padding: 18px; } .pdoc .pdr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .pdoc .pdr-title { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.01em; } .pdoc .pdr-pill { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; line-height: 1; white-space: nowrap; } .pdoc .pdr-pill-grad { background: linear-gradient(100deg,#6366f1,#a855f7); color: #fff; box-shadow: 0 2px 6px rgba(124,58,237,.28); } .pdoc .pdr-pill-ghost { background: #f0f0f8; color: #6b6e80; text-transform: none; letter-spacing: .01em; font-weight: 600; font-size: 10.5px; } /* hero strength card */ .pdoc .pdr-hero { /* Deliberately NOT sticky. A sticky card taller than the scroll container * gets its bottom clipped and unreachable - with a long model assessment the * button and last reason vanished. The rail itself scrolls; that is enough to * keep the bottom reachable. */ /* position:relative so the ::before gradient strip is contained by the card * (and clipped by overflow:hidden to the rounded corners). It was lost when * the sticky positioning context was removed, so the strip escaped upward. */ position: relative; border: 1px solid #e6e2f6; border-radius: 18px; padding: 20px 18px 18px; overflow: hidden; background: radial-gradient(120% 90% at 12% 0%, rgba(168,85,247,.12), transparent 58%), linear-gradient(180deg,#f1edff 0%,#fff 66%); box-shadow: 0 1px 2px rgba(80,50,180,.05), 0 10px 30px rgba(99,102,241,.12); } .pdoc .pdr-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(100deg,#6366f1,#a855f7); } .pdoc .pdr-hero .pdr-head { margin-bottom: 4px; } .pdoc .pdr-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 18px; } .pdoc .pdr-ring-hero { position: relative; width: 120px; height: 120px; } .pdoc .pdr-ring-hero svg { display: block; transform: rotate(-90deg); } .pdoc .pdr-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pdoc .pdr-ring-score { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #0f1020; } .pdoc .pdr-hero--ok .pdr-ring-score { color: #16a34a; } .pdoc .pdr-hero--mid .pdr-ring-score { color: #d97706; } .pdoc .pdr-hero--low .pdr-ring-score { color: #dc2626; } .pdoc .pdr-ring-outof { font-size: 10px; font-weight: 600; color: #6b6e80; margin-top: 3px; } .pdoc .pdr-verdict { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .pdoc .pdr-verdict--ok { color: #16a34a; } .pdoc .pdr-verdict--mid { color: #d97706; } .pdoc .pdr-verdict--low { color: #dc2626; } .pdoc .pdr-slabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b6e80; margin: 4px 0 10px; } .pdoc .pdr-reasons { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .pdoc .pdr-reasons li { position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.45; color: #33344a; } .pdoc .pdr-reasons li svg { position: absolute; left: 0; top: 1px; width: 15px; height: 15px; } .pdoc .pdr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; border-radius: 14px; height: 46px; letter-spacing: -.01em; transition: transform .12s, box-shadow .12s, filter .12s; } .pdoc .pdr-btn-primary { color: #fff; position: relative; background: linear-gradient(100deg,#6366f1,#a855f7); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(124,58,237,.36), 0 2px 6px rgba(99,102,241,.30); } .pdoc .pdr-btn-primary::after { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 45%; border-radius: 13px 13px 40px 40px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; } .pdoc .pdr-btn-primary:hover { transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 24px rgba(124,58,237,.44), 0 3px 8px rgba(99,102,241,.34); } .pdoc .pdr-btn-primary:active { transform: translateY(0); } .pdoc .pdr-btn-primary:disabled { opacity: .65; cursor: default; transform: none; } .pdoc .pdr-btn-primary svg { width: 17px; height: 17px; } .pdoc .pdr-btn-note { margin: 10px 2px 0; font-size: 11px; line-height: 1.4; color: #6b6e80; text-align: center; } /* readiness */ .pdoc .pdr-ready-row { display: flex; align-items: center; gap: 14px; } .pdoc .pdr-ring-sm { position: relative; width: 68px; height: 68px; flex-shrink: 0; } .pdoc .pdr-ring-sm svg { display: block; transform: rotate(-90deg); } .pdoc .pdr-ring-center-sm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #0f1020; } .pdoc .pdr-ring-center-sm small { font-size: 9px; font-weight: 700; color: #6b6e80; margin-left: 1px; align-self: flex-start; margin-top: 16px; } .pdoc .pdr-rt-main { font-size: 14px; font-weight: 700; } .pdoc .pdr-todo { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .pdoc .pdr-todo li { font-size: 12.5px; color: #33344a; padding-left: 16px; position: relative; } .pdoc .pdr-todo li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #c7c7d6; } .pdoc .pdr-booster { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e8e8f0; } .pdoc .pdr-booster-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; } .pdoc .pdr-booster-name { font-size: 13px; font-weight: 600; } /* search params */ .pdoc .pdr-param { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f0f6; } .pdoc .pdr-param:last-child { border-bottom: none; } .pdoc .pdr-pk { font-size: 12.5px; color: #6b6e80; flex-shrink: 0; } .pdoc .pdr-pv { font-size: 12.5px; font-weight: 600; text-align: right; color: #0f1020; } .pdoc .pdr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e8e8f0; } /* Work-authorization sub-section: its own quiet heading, chips tucked under it. */ .pdoc .pdr-subhead { display: flex; align-items: center; gap: 6px; margin-top: 16px; } .pdoc .pdr-subhead .pdr-slabel { margin: 0; } .pdoc .pdr-subhead .pd-hint { cursor: help; font-style: normal; font-weight: 700; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d7d7e2; border-radius: 50%; font-size: 10px; color: #6b6e80; } .pdoc .pdr-chips--tight { margin-top: 8px; padding-top: 0; border-top: 0; } /* footer */ .pdoc .pdr-footer { display: flex; flex-direction: column; gap: 10px; padding: 2px; } .pdoc .pdr-btn-ghost { height: 42px; background: #fff; border: 1px solid #e8e8f0; border-radius: 12px; color: #0f1020; font-weight: 600; box-shadow: 0 1px 2px rgba(15,16,32,.04); } .pdoc .pdr-btn-ghost:hover { border-color: #d3d3e2; background: #fbfbfe; } .pdoc .pdr-btn-ghost svg { width: 16px; height: 16px; color: #6b6e80; } .pdoc .pdr-btn-danger { height: 40px; background: transparent; border: none; color: #6b6e80; font-weight: 600; font-size: 13px; border-radius: 10px; } .pdoc .pdr-btn-danger:hover { color: #ef4444; background: rgba(239,68,68,.06); } .pdoc .pdr-analyses { text-align: center; font-size: 12px; color: #6b6e80; margin: 2px 0 0; } .pdoc .pdr-analyses b { color: #0f1020; font-weight: 700; } @media (max-width: 860px) { .pdoc .pdr-rail { position: static; max-height: none; overflow: visible; } } /* Collapsible model-assessment reasons - compact card by default, click to open */ /* De-weighted disclosure row, not a second button: transparent, a hairline top * rule to separate it from the ring, so the gradient CTA stays the only block. */ .pdoc .pdr-reasons-wrap { margin: 0 0 16px; } .pdoc .pdr-reasons-wrap > summary.pdr-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 2px 10px; border-top: 1px solid #eceaf4; user-select: none; border-radius: 0; transition: color .12s; } .pdoc .pdr-reasons-wrap > summary.pdr-summary::-webkit-details-marker { display: none; } .pdoc .pdr-reasons-wrap > summary.pdr-summary:hover .pdr-chev { color: #6b6e80; } .pdoc .pdr-summary-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b6e80; display: inline-flex; align-items: center; gap: 8px; } .pdoc .pdr-rcount { font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: #6366f1; background: #eef0ff; border-radius: 999px; padding: 1px 8px; text-transform: none; } .pdoc .pdr-chev { width: 16px; height: 16px; color: #a4a4b6; flex: none; transition: transform .18s, color .12s; } .pdoc .pdr-reasons-wrap[open] .pdr-chev { transform: rotate(180deg); } .pdoc .pdr-reasons-wrap[open] > .pdr-reasons { margin-top: 14px; }