/* ============================================================================
* Property drawer (pt2) — the scoped stylesheet ported verbatim from the Lead
* Partner Workspace (Leadportal/partner.php), so the wizard looks identical in
* both systems. Every rule below is namespaced under .pt2-drawer or
* .drawer-panel / .drawer-backdrop and defines its own --pt2-* tokens, so it
* cannot reach into the portal's own design system (hifi.css) or be reached
* by it. The base drawer mechanics come from partner.php's shared drawer CSS.
* ========================================================================== */
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:900;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.drawer-backdrop.active{opacity:1;pointer-events:auto;}
.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:620px;background:rgba(255,255,255,.98);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-left:1px solid rgba(226,232,240,.8);box-shadow:-24px 0 48px -12px rgba(15,23,42,.25);z-index:950;transform:translateX(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;}
.drawer-panel.active{transform:translateX(0);}
/* Toasts — partner.php renders these from its own layout; the portal needs its
own host because the drawer calls showToast() for every save and warning. */
#pt2-toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.pt2-toast{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13.5px;font-weight:600;color:#fff;background:#0b1d2e;padding:10px 16px;border-radius:10px;box-shadow:0 10px 30px -8px rgba(15,23,42,.45);opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;max-width:min(460px,92vw);}
.pt2-toast.in{opacity:1;transform:none;}
.pt2-toast.success{background:#10b981;}
.pt2-toast.warning{background:#f59e0b;}
.pt2-toast.error{background:#e11d48;}
/* ─── Claude design tokens (scoped) ─── */
.pt2-drawer {
--pt2-bg:#f6f8fb;
--pt2-surface:#ffffff;
--pt2-ink:#0b1d2e;
--pt2-ink-2:#34506a;
--pt2-ink-3:#6a7f93;
--pt2-line:#e5ecf2;
--pt2-line-2:#eef2f6;
--pt2-brand:#613984;
--pt2-brand-deep:#4a2b66;
--pt2-brand-soft:#f3ecf8;
--pt2-teal:#0fb5a8;
--pt2-warn:#f59e0b;
--pt2-danger:#e11d48;
--pt2-success:#10b981;
--pt2-purple:#8b5cf6;
--pt2-purple-soft:#f5f0ff;
--pt2-purple-deep:#6d3fb5;
font-family:"Plus Jakarta Sans","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--pt2-ink);
background:#fff;
-webkit-font-smoothing:antialiased;
}
.pt2-drawer * { box-sizing:border-box; }
/* ─── Head ─── */
.pt2-head { padding:18px 22px; border-bottom:1px solid var(--pt2-line-2); display:flex; justify-content:space-between; align-items:center; background:#fff; }
.pt2-eyebrow { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pt2-ink-3); }
.pt2-title { font-size:19px; font-weight:700; letter-spacing:-.02em; margin-top:2px; }
.pt2-x { width:32px; height:32px; border-radius:8px; border:1px solid var(--pt2-line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--pt2-ink-2); transition:all .15s; }
.pt2-x:hover { background:#f6f8fb; color:var(--pt2-ink); }
/* ─── Horizontal stepper ───
Sized so the 4 pills + 3 connector lines always fit inside
the 620px drawer without clipping the last step. Each
pill can shrink (min-width:0 + flex:1 1 auto on the text
block) and the title + sub truncate with ellipsis instead
of overflowing horizontally. */
.pt2-stepper { background:#fafcfe; border-bottom:1px solid var(--pt2-line-2); padding:8px 12px; display:flex; align-items:center; gap:0; flex-shrink:0; overflow:hidden; }
.pt2-step { display:flex; align-items:center; gap:6px; padding:4px 4px; background:transparent; border:none; border-radius:6px; text-align:left; cursor:default; font-family:inherit; flex:0 1 auto; min-width:0; }
.pt2-step > div { min-width:0; flex:1 1 auto; overflow:hidden; }
.pt2-step.done { cursor:pointer; }
.pt2-step.done:hover { background:rgba(255,255,255,.8); }
.pt2-step-dot { width:20px; height:20px; border-radius:50%; background:#eef2f6; color:var(--pt2-ink-3); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10.5px; flex-shrink:0; transition:all .25s; }
.pt2-step.active .pt2-step-dot { background:var(--pt2-brand); color:#fff; box-shadow:0 0 0 3px var(--pt2-brand-soft); }
.pt2-step.done .pt2-step-dot { background:var(--pt2-brand); color:#fff; }
.pt2-step-title { font-size:11.5px; font-weight:600; color:var(--pt2-ink); letter-spacing:-.01em; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt2-step.todo .pt2-step-title { color:var(--pt2-ink-3); }
.pt2-step-sub { font-size:10.5px; color:var(--pt2-ink-3); line-height:1.2; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Narrow drawer (≤ 540px): drop the sub-text entirely — the
title alone conveys the step. Saves ~80px of horizontal
space so the 4 pills don't fight for room. */
@media (max-width:540px) {
.pt2-step-sub { display:none; }
}
/* Step-pill missing-fields badge — small amber dot with count. */
.pt2-step { position:relative; }
.pt2-step-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 5px; border-radius:999px; background:#f59e0b; color:#fff; font-size:9.5px; font-weight:700; line-height:1; margin-left:6px; box-shadow:0 1px 2px rgba(245,158,11,.35); flex-shrink:0; }
.pt2-step.pt2-step-clean.done .pt2-step-dot { background:#10b981; }
.pt2-step.pt2-step-clean .pt2-step-title { color:var(--pt2-ink); }
/* Next-button "X fields left" state — amber-tinted to read as
"not blocked, but you have work to do" rather than disabled. */
.pt2-btn-primary.pt2-next-incomplete { background:#f59e0b !important; box-shadow:0 4px 10px rgba(245,158,11,.25) !important; }
.pt2-btn-primary.pt2-next-incomplete:hover { background:#d97706 !important; }
.pt2-line { flex:1; height:1.5px; background:#e5ecf2; border-radius:1px; margin:0 6px; min-width:12px; transition:background .3s; }
.pt2-line.done { background:var(--pt2-brand); }
/* ─── Body ─── */
.pt2-body { flex:1; overflow-y:auto; padding:22px 26px 28px; min-height:0; }
.pt2-wstep { display:none; flex-direction:column; gap:26px; }
.pt2-wstep.active { display:flex; animation:pt2fade .3s ease; }
@keyframes pt2fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
/* ─── Foot ─── */
.pt2-foot { padding:14px 22px; background:#fafcfe; border-top:1px solid var(--pt2-line-2); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; gap:8px; flex-wrap:wrap; }
.pt2-foot-meta { font-size:12px; color:var(--pt2-ink-3); display:flex; align-items:center; gap:6px; }
/* Footer helper chip: tells the user what's missing next so the
Next button's "X fields left" label has a plain-English
counterpart they can click to be taken to the field. */
.pt2-foot-hint { display:none; align-items:center; gap:6px; appearance:none; border:1px solid #fed7aa; background:#fff7ed; color:#9a3412; padding:5px 10px; border-radius:999px; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; transition:all .15s; line-height:1; flex:0 1 auto; max-width:100%; }
.pt2-foot-hint:hover { background:#ffedd5; border-color:#fdba74; transform:translateY(-1px); box-shadow:0 2px 6px rgba(234,88,12,.15); }
.pt2-foot-hint svg { color:#ea580c; flex-shrink:0; }
.pt2-foot-hint span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
.pt2-foot-actions { display:flex; gap:8px; }
.pt2-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:8px 14px; border:1px solid transparent; cursor:pointer; transition:transform .08s, background .15s, border-color .15s, box-shadow .15s, color .15s; white-space:nowrap; user-select:none; letter-spacing:-.01em; }
.pt2-btn:active { transform:translateY(1px); }
.pt2-btn:disabled { opacity:.5; cursor:not-allowed; }
.pt2-btn-primary { background:var(--pt2-brand); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px -4px rgba(97,57,132,.5); }
.pt2-btn-primary:hover:not(:disabled) { background:var(--pt2-brand-deep); }
.pt2-btn-secondary { background:#fff; color:var(--pt2-ink); border-color:var(--pt2-line); }
.pt2-btn-secondary:hover:not(:disabled) { border-color:#cfdae4; background:#fafcfe; }
.pt2-btn-ghost { background:transparent; color:var(--pt2-ink-2); }
.pt2-btn-ghost:hover:not(:disabled) { background:#eef2f6; color:var(--pt2-ink); }
/* ─── Field primitives ─── */
.pt2-field { display:flex; flex-direction:column; gap:6px; }
.pt2-label { font-size:12px; font-weight:600; color:var(--pt2-ink-2); letter-spacing:-.01em; }
.pt2-label .req { color:var(--pt2-danger); margin-left:2px; }
.pt2-hint { font-size:11.5px; color:var(--pt2-ink-3); padding-left:2px; }
.pt2-err-text { font-size:11.5px; color:var(--pt2-danger); padding-left:2px; }
.pt2-input, .pt2-select, .pt2-textarea {
font-family:inherit; font-size:13.5px; font-weight:500; line-height:1.4;
color:var(--pt2-ink); background:#fff;
border:1px solid var(--pt2-line); border-radius:9px;
padding:10px 12px; width:100%;
transition:border-color .18s, box-shadow .18s, background .18s;
outline:none; letter-spacing:-.005em;
}
.pt2-input::placeholder, .pt2-textarea::placeholder { color:#aabacb; font-weight:400; }
.pt2-input:hover, .pt2-select:hover, .pt2-textarea:hover { border-color:#b3c5d6; background:#fafcfe; }
.pt2-input:focus, .pt2-select:focus, .pt2-textarea:focus { border-color:var(--pt2-brand); background:#fff; box-shadow:0 0 0 4px rgba(97,57,132,.14); }
.pt2-input.error, .pt2-select.error, .pt2-textarea.error { border-color:var(--pt2-danger); box-shadow:0 0 0 4px rgba(225,29,72,.10); }
.pt2-textarea { resize:vertical; min-height:90px; line-height:1.5; }
/* Auto-write button — soft gradient pill that hints at the
sparkle treatment without being a giant CTA. */
/* Description block lives at the bottom of the unit form now,
so we give it a soft separator above + a little extra space
so it reads as the "finishing touch" step. */
.pt2-desc-bottom { margin-top:8px; padding-top:18px; border-top:1px dashed var(--pt2-line); }
.pt2-desc-bottom .pt2-label { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Inline "we'll write this for you" hint next to the Description
label so users see the auto-write affordance before even
tapping into the field. */
.pt2-desc-autohint {
display:inline-flex; align-items:center; gap:5px;
font-size:10.5px; font-weight:600;
color:var(--pt2-brand);
background:linear-gradient(135deg,#f7f5fa,#efe9f5);
border:1px solid #e5dcf1;
padding:3px 9px; border-radius:999px;
text-transform:none; letter-spacing:0;
line-height:1;
}
.pt2-desc-autohint .pt2-autowrite-sparkle { display:inline-flex; }
.pt2-autowrite-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.pt2-autowrite-btn { appearance:none; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; border:1px solid #e5dcf1; background:linear-gradient(135deg, #f7f5fa, #efe9f5); color:#613984; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; line-height:1; }
.pt2-autowrite-btn:hover { background:linear-gradient(135deg, #efe9f5, #e5dcf1); border-color:#d3c0e8; transform:translateY(-1px); box-shadow:0 4px 10px rgba(97,57,132,.12); }
.pt2-autowrite-btn:active { transform:translateY(0); box-shadow:none; }
.pt2-autowrite-sparkle { display:inline-flex; animation:pt2sparkle 2.2s ease-in-out infinite; }
@keyframes pt2sparkle {
0%, 100% { opacity:1; transform:rotate(0deg) scale(1); }
50% { opacity:0.65; transform:rotate(8deg) scale(1.12); }
}
.pt2-autowrite-redo { appearance:none; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; border:1px solid var(--pt2-line); background:#fff; color:var(--pt2-ink-3); font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; }
.pt2-autowrite-redo:hover { background:#f8fafc; border-color:#cbd5e1; color:var(--pt2-ink); }
/* While the typewriter is filling, show a subtle caret blink
at the end of the textarea so the user understands text is
appearing automatically. */
.pt2-textarea.pt2-autowrite-active { background-image:linear-gradient(135deg, rgba(97,57,132,.02), rgba(155,115,199,.04)); animation:pt2autowritePulse 1.4s ease-in-out infinite; }
@keyframes pt2autowritePulse {
0%, 100% { box-shadow:0 0 0 2px rgba(97,57,132,.04); }
50% { box-shadow:0 0 0 4px rgba(97,57,132,.10); }
}
.pt2-input-grp { position:relative; }
.pt2-input-grp .pfx, .pt2-input-grp .sfx { position:absolute; top:0; bottom:0; display:flex; align-items:center; color:#6f8398; font-size:13px; pointer-events:none; }
.pt2-input-grp .pfx { left:12px; }
.pt2-input-grp .sfx { right:12px; font-weight:500; }
.pt2-input.has-pfx { padding-left:34px; }
.pt2-input.has-sfx { padding-right:54px; }
.pt2-select { appearance:none; padding-right:36px; cursor:pointer; }
.pt2-select-wrap { position:relative; }
.pt2-select-chev { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--pt2-ink-3); }
/* ─── Section headings (s2-head equivalent) ─── */
.pt2-h { font-size:11px; font-weight:700; color:var(--pt2-ink-3); text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px; }
/* ─── Step 1: section labels w/ numbered chip ─── */
.pt2-s1-section { display:flex; flex-direction:column; gap:12px; }
.pt2-s1-section + .pt2-s1-section { margin-top:6px; }
.pt2-s1-secl { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--pt2-ink); letter-spacing:-.01em; }
.pt2-s1-num { width:22px; height:22px; border-radius:50%; background:var(--pt2-brand-soft); color:var(--pt2-brand); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; flex-shrink:0; }
/* ─── Property type tiles (Step 1) ─── */
.pt2-type-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pt2-type-card {
background:#fff; border:1.5px solid var(--pt2-line);
border-radius:11px; padding:12px 13px;
text-align:left; cursor:pointer; font-family:inherit;
display:flex; align-items:center; gap:11px;
transition:all .15s;
}
.pt2-type-card:hover { border-color:#b9cfe6; }
.pt2-type-card input { display:none; }
.pt2-type-card.active { border-color:var(--pt2-brand); background:var(--pt2-brand-soft); box-shadow:0 0 0 1px var(--pt2-brand) inset; }
.pt2-type-icon { width:36px; height:36px; border-radius:9px; background:#f3f6fa; color:var(--pt2-ink-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.pt2-type-card.active .pt2-type-icon { background:var(--pt2-brand); color:#fff; }
.pt2-type-text { min-width:0; }
.pt2-type-title { font-size:13.5px; font-weight:700; color:var(--pt2-ink); }
.pt2-type-sub { font-size:11.5px; color:var(--pt2-ink-3); margin-top:2px; }
/* ─── Address chip (Step 1) ─── */
.pt2-addr-chip { background:var(--pt2-brand-soft); border:1px solid rgba(97,57,132,.18); border-radius:12px; padding:12px 14px; display:flex; align-items:flex-start; gap:12px; }
.pt2-addr-chip-icon { width:32px; height:32px; border-radius:8px; background:var(--pt2-brand); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.pt2-addr-chip-text { flex:1; min-width:0; }
.pt2-addr-chip-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pt2-brand); }
.pt2-addr-chip-value { font-size:14px; font-weight:600; color:var(--pt2-ink); margin-top:2px; }
.pt2-addr-chip-btn { background:transparent; border:1px solid rgba(97,57,132,.25); border-radius:8px; padding:5px 10px; font-size:12px; font-weight:600; color:var(--pt2-brand); cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:4px; flex-shrink:0; }
.pt2-addr-chip-btn:hover { background:rgba(97,57,132,.08); }
/* ─── Address suggestions menu ─── */
.pt2-suggest { position:absolute; top:100%; left:0; right:0; margin-top:4px; background:#fff; border:1px solid var(--pt2-line); border-radius:10px; box-shadow:0 24px 60px -20px rgba(11,29,46,.18), 0 8px 20px -8px rgba(11,29,46,.10); z-index:20; overflow:hidden; }
.pt2-suggest-row { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border:none; background:transparent; text-align:left; cursor:pointer; font-family:inherit; font-size:13px; transition:background .12s; border-bottom:1px solid var(--pt2-line-2); }
.pt2-suggest-row:last-child { border-bottom:none; }
.pt2-suggest-row:hover { background:#f6f8fb; }
.pt2-suggest-row svg { color:var(--pt2-ink-3); flex-shrink:0; }
.pt2-suggest-line1 { font-weight:500; color:var(--pt2-ink); }
.pt2-suggest-line2 { font-size:12px; color:var(--pt2-ink-3); margin-top:1px; }
/* ─── Step 2: role tiles ─── */
.pt2-role-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.pt2-role-card {
position:relative;
background:#fff; border:1.5px solid var(--pt2-line);
border-radius:12px; padding:14px 10px;
text-align:center; cursor:pointer; font-family:inherit;
transition:all .15s;
display:flex; flex-direction:column; align-items:center; gap:8px;
}
.pt2-role-card input { display:none; }
.pt2-role-card:hover { border-color:#b9cfe6; }
.pt2-role-card.active { border-color:var(--pt2-brand); background:var(--pt2-brand-soft); box-shadow:0 0 0 3px rgba(97,57,132,.08); }
.pt2-role-icon { width:36px; height:36px; border-radius:50%; background:#f0f5fb; color:var(--pt2-brand); display:flex; align-items:center; justify-content:center; }
.pt2-role-card.active .pt2-role-icon { background:var(--pt2-brand); color:#fff; }
.pt2-role-title { font-size:13.5px; font-weight:700; color:var(--pt2-ink); }
.pt2-role-tick { position:absolute; top:8px; right:8px; width:16px; height:16px; border-radius:50%; background:var(--pt2-brand); color:#fff; display:none; align-items:center; justify-content:center; }
.pt2-role-card.active .pt2-role-tick { display:flex; }
/* ─── Segmented control (Step 2 ownerType) ─── */
.pt2-seg { display:inline-flex; background:#eef2f6; border-radius:10px; padding:3px; gap:2px; }
.pt2-seg.full { display:flex; width:100%; }
.pt2-seg button { border:none; background:transparent; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--pt2-ink-2); padding:6px 12px; border-radius:7px; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.pt2-seg.full button { flex:1; }
.pt2-seg button:hover { color:var(--pt2-ink); }
.pt2-seg button.active { background:#fff; color:var(--pt2-ink); box-shadow:0 1px 2px rgba(11,29,46,.08), 0 0 0 1px rgba(11,29,46,.04); }
/* ─── Step 3: Unit switcher ─── */
.pt2-uswitch { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:4px 2px; }
.pt2-uswitch-label { display:flex; align-items:baseline; gap:5px; font-size:11px; color:var(--pt2-ink-3); }
.pt2-uswitch-label strong { font-size:12.5px; color:var(--pt2-ink); font-weight:700; }
.pt2-uswitch-tabs { display:flex; gap:5px; flex:1; flex-wrap:wrap; }
.pt2-utab { position:relative; width:26px; height:26px; border-radius:7px; background:#fff; border:1.5px solid var(--pt2-line); color:var(--pt2-ink-2); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease; flex-shrink:0; }
/* Intent indicator dot below each tab — color matches the unit's intent so a
multi-unit listing visually shows mixed intents at a glance. */
.pt2-utab::after { content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); width:14px; height:2px; border-radius:999px; background:var(--intent-c, #cfdae4); transition:background .25s ease, opacity .2s ease; opacity:.85; }
.pt2-utab.active::after { opacity:1; height:2.5px; }
.pt2-utab:hover { border-color:#b9cfe6; }
.pt2-utab.active { background:var(--pt2-brand); border-color:var(--pt2-brand); color:#fff; box-shadow:0 0 0 3px rgba(97,57,132,.16); }
.pt2-utab.done { background:#d1fadf; border-color:#5fd498; color:#0a8a4a; }
.pt2-utab.active.done { background:#0fb558; border-color:#0fb558; color:#fff; }
.pt2-uadd { width:26px; height:26px; border-radius:7px; background:var(--pt2-brand-soft); border:1.5px dashed rgba(97,57,132,.3); color:var(--pt2-brand); font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; }
.pt2-uadd:hover { background:var(--pt2-brand); color:#fff; border-style:solid; }
/* ─── Step 3: Editor card ─── */
.pt2-editor { background:#fff; border:1px solid var(--pt2-line); border-radius:14px; overflow:hidden; }
.pt2-editor-bar { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; background:linear-gradient(180deg, var(--pt2-brand-soft) 0%, #fafcfe 100%); border-bottom:1px solid var(--pt2-line-2); }
.pt2-editor-name { font-size:12px; font-weight:700; color:var(--pt2-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%; display:inline-flex; align-items:center; min-width:0; }
/* Inline-editable unit name — quiet until hovered/focused so it
reads as a label, but clicking turns it into a real text box
for renaming "Unit 1" to anything the user wants. */
.pt2-unit-name-input { appearance:none; background:transparent; border:1px solid transparent; padding:3px 8px; border-radius:6px; font:inherit; font-size:12px; font-weight:700; color:var(--pt2-ink); min-width:0; flex:1; max-width:240px; outline:none; transition:background .15s, border-color .15s, box-shadow .15s; cursor:text; }
.pt2-unit-name-input::placeholder { color:var(--pt2-ink-3); font-weight:600; }
.pt2-unit-name-input:hover { background:rgba(255,255,255,.65); border-color:var(--pt2-line); }
.pt2-unit-name-input:focus { background:#fff; border-color:var(--pt2-brand); box-shadow:0 0 0 3px var(--pt2-brand-soft); cursor:text; }
/* Soft hint that nudges users to rename "Unit N" to something
meaningful. Auto-hides as soon as the input has a value
(via :placeholder-shown sibling) so it never gets in the way. */
.pt2-unit-name-hint { display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:2px 7px; border-radius:999px; background:#eef3f8; color:var(--pt2-ink-3); font-size:10.5px; font-weight:600; letter-spacing:.1px; white-space:nowrap; pointer-events:none; transition:opacity .15s ease; }
.pt2-unit-name-input:not(:placeholder-shown) + .pt2-unit-name-hint,
.pt2-unit-name-input:focus + .pt2-unit-name-hint { opacity:0; }
.pt2-unit-name-hint svg { flex-shrink:0; }
.pt2-editor-rm { display:inline-flex; align-items:center; gap:4px; background:transparent; border:1px solid transparent; color:var(--pt2-ink-3); padding:3px 7px; border-radius:6px; font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; }
.pt2-editor-rm:hover { color:var(--pt2-danger); background:rgba(225,29,72,.07); border-color:rgba(225,29,72,.2); }
.pt2-editor-body { padding:16px 14px; display:flex; flex-direction:column; gap:20px; }
/* ─── Step 3: Listing purpose intent cards (4 cards) ─── */
.pt2-intent-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.pt2-intent-card {
background:#fff; border:1.5px solid var(--pt2-line);
border-radius:11px; padding:12px 6px;
cursor:pointer; font-family:inherit;
display:flex; flex-direction:column; align-items:center; gap:8px;
transition:all .15s;
}
.pt2-intent-card input { display:none; }
.pt2-intent-card:hover { border-color:#b9cfe6; }
.pt2-intent-card.active { border-color:var(--c); background:color-mix(in srgb, var(--c) 8%, transparent); }
.pt2-intent-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .15s; background:color-mix(in srgb, var(--c) 12%, transparent); color:var(--c); }
.pt2-intent-card.active .pt2-intent-icon { background:var(--c); color:#fff; }
.pt2-intent-label { font-size:12.5px; font-weight:700; color:var(--pt2-ink-2); }
.pt2-intent-card.active .pt2-intent-label { color:var(--c); }
/* ─── Step 3: Specs (beds/baths/sqft) ─── */
.pt2-spec-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.pt2-spec { display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--pt2-line); border-radius:10px; padding:10px 11px; transition:border-color .15s, box-shadow .15s; }
.pt2-spec:focus-within { border-color:var(--pt2-brand); box-shadow:0 0 0 4px rgba(97,57,132,.12); }
.pt2-spec svg { color:var(--pt2-ink-3); flex-shrink:0; }
.pt2-spec input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:inherit; font-size:14px; font-weight:600; color:var(--pt2-ink); width:30px; }
.pt2-spec span { font-size:12px; color:var(--pt2-ink-3); }
/* ─── Step 3: Amenities grid (12 chips) ─── */
.pt2-amen-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.pt2-amen-chip {
position:relative;
display:flex; align-items:center; gap:6px;
padding:9px 10px;
background:#fff; border:1px solid var(--pt2-line);
border-radius:9px;
color:var(--pt2-ink-2);
cursor:pointer; font-family:inherit;
font-size:12px; font-weight:500;
transition:all .15s;
text-align:left;
}
.pt2-amen-chip svg { color:var(--pt2-ink-3); flex-shrink:0; }
.pt2-amen-chip:hover { border-color:#b9cfe6; }
.pt2-amen-chip.active { background:var(--pt2-brand-soft); border-color:var(--pt2-brand); color:var(--pt2-brand); font-weight:600; }
.pt2-amen-chip.active svg { color:var(--pt2-brand); }
.pt2-amen-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt2-amen-tick { position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:50%; background:var(--pt2-brand); color:#fff; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; }
/* ─── Step 3: Trades grid (Project intent — 12 trades, purple accent) ─── */
.pt2-trade-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.pt2-trade-chip {
position:relative;
display:flex; align-items:center; gap:6px;
padding:9px 10px;
background:#fff; border:1px solid var(--pt2-line);
border-radius:9px;
color:var(--pt2-ink-2);
cursor:pointer; font-family:inherit;
font-size:12px; font-weight:500;
transition:all .15s;
text-align:left;
}
.pt2-trade-chip svg { color:var(--pt2-ink-3); flex-shrink:0; }
.pt2-trade-chip:hover { border-color:#c4b8e8; }
.pt2-trade-chip.active { background:var(--pt2-purple-soft); border-color:var(--pt2-purple); color:var(--pt2-purple-deep); font-weight:600; }
.pt2-trade-chip.active svg { color:var(--pt2-purple); }
.pt2-trade-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt2-trade-tick { position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:50%; background:var(--pt2-purple); color:#fff; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; }
/* ─── Step 3: Budget readout pill ─── */
.pt2-budget-readout { margin-top:8px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:var(--pt2-purple-soft); color:var(--pt2-purple-deep); border:1px solid rgba(139,92,246,.2); border-radius:999px; font-size:12px; }
.pt2-budget-readout strong { font-weight:700; }
/* ─── Step 3: Photo grid ─── */
.pt2-photo-empty {
width:100%;
padding:36px 20px;
background:#fafbfd;
border:1.5px dashed #c5d4e3;
border-radius:14px;
display:flex; flex-direction:column; align-items:center; gap:6px;
cursor:pointer; font-family:inherit;
transition:all .15s;
}
.pt2-photo-empty:hover { background:var(--pt2-brand-soft); border-color:var(--pt2-brand); }
.pt2-photo-empty-icon { width:48px; height:48px; border-radius:50%; background:#fff; color:var(--pt2-brand); display:flex; align-items:center; justify-content:center; margin-bottom:4px; box-shadow:0 1px 3px rgba(11,29,46,.06); }
.pt2-photo-empty-title { font-size:14px; font-weight:600; color:var(--pt2-ink); }
.pt2-photo-empty-sub { font-size:12.5px; color:var(--pt2-ink-3); }
.pt2-photo-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.pt2-photo-tile { aspect-ratio:1; border-radius:10px; position:relative; overflow:visible; transition:transform .15s; }
.pt2-photo-tile:hover { transform:scale(1.02); }
.pt2-photo-tile:hover .pt2-photo-rm { opacity:1; }
.pt2-photo-bg { position:absolute; inset:0; border-radius:10px; overflow:hidden; }
/* Skeleton wash shown under the ![]()
while bytes are
downloading/decoding. The img's onload removes it the moment
the picture is ready, so users see a smooth shimmer → photo
transition instead of an empty grey box. */
.pt2-photo-skel { position:absolute; inset:0; border-radius:10px; overflow:hidden; background:linear-gradient(90deg,#eef2f7 0%,#dfe7f0 50%,#eef2f7 100%); background-size:200% 100%; animation:pt2photoSkel 1.2s ease-in-out infinite; z-index:0; }
.pt2-photo-skel::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:2px solid rgba(97,57,132,.15); border-top-color:var(--pt2-brand); animation:pt2photoSpin .8s linear infinite; }
@keyframes pt2photoSkel { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes pt2photoSpin { to { transform:rotate(360deg); } }
/* onerror flips the skeleton into a failed state — neutral grey
with a broken-image glyph so users on slow/flaky links can
tell the tile gave up rather than leaving the shimmer
spinning forever. */
.pt2-photo-skel.is-failed { animation:none; background:#f3f6fa; }
.pt2-photo-skel.is-failed::after { content:"\f127"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:900; border:none; color:var(--pt2-ink-3); width:auto; height:auto; margin:-7px 0 0 -7px; font-size:14px; animation:none; }
@media (prefers-reduced-motion: reduce) {
.pt2-photo-skel { animation:none; opacity:.7; }
.pt2-photo-skel::after { animation:none; }
}
.pt2-photo-rm { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:rgba(11,29,46,.78); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; backdrop-filter:blur(8px); transition:opacity .15s, background .15s; z-index:3; }
.pt2-photo-rm:hover { background:var(--pt2-danger); opacity:1; }
.pt2-photo-rot { position:absolute; top:6px; right:32px; width:22px; height:22px; border-radius:50%; background:rgba(11,29,46,.78); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; backdrop-filter:blur(8px); transition:opacity .15s, background .15s; z-index:3; }
.pt2-photo-tile:hover .pt2-photo-rot { opacity:1; }
.pt2-photo-rot:hover { background:var(--pt2-brand); opacity:1; }
.pt2-photo-rot.busy { opacity:1; }
.pt2-photo-rot.busy svg { animation:pt2spin .8s linear infinite; }
/* Touch devices have no hover — keep the per-tile actions visible. */
@media (hover:none) { .pt2-photo-rm, .pt2-photo-rot { opacity:.9; } }
.pt2-photo-tag-pill { position:absolute; left:6px; bottom:6px; z-index:2; display:inline-flex; align-items:center; height:20px; padding:0 8px; border:none; border-radius:999px; background:rgba(11,29,46,.72); color:#fff; font-family:inherit; font-size:10.5px; font-weight:600; cursor:pointer; backdrop-filter:blur(6px); transition:background .15s; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt2-photo-tag-pill:hover { background:rgba(11,29,46,.88); }
.pt2-photo-tag-pill.tagged { background:var(--pt2-brand); color:#fff; }
.pt2-photo-add { aspect-ratio:1; border-radius:10px; border:1.5px dashed #c5d4e3; background:#fafbfd; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--pt2-ink-3); font-family:inherit; transition:all .15s; }
.pt2-photo-add:hover { background:var(--pt2-brand-soft); border-color:var(--pt2-brand); color:var(--pt2-brand); }
.pt2-photo-tag-overlay { position:fixed; inset:0; z-index:5; }
.pt2-photo-tag-menu { position:absolute; left:6px; bottom:30px; z-index:100; background:#fff; border:1px solid var(--pt2-line); border-radius:10px; padding:4px; box-shadow:0 8px 24px rgba(11,29,46,.18), 0 2px 6px rgba(11,29,46,.08); min-width:130px; display:flex; flex-direction:column; gap:1px; }
.pt2-photo-tag-opt { appearance:none; border:none; background:transparent; text-align:left; padding:7px 10px; border-radius:7px; font-family:inherit; font-size:12px; font-weight:500; color:var(--pt2-ink); cursor:pointer; transition:background .12s, color .12s; }
.pt2-photo-tag-opt:hover { background:var(--pt2-brand-soft); color:var(--pt2-brand); }
.pt2-photo-tag-opt.active { background:var(--pt2-brand); color:#fff; }
.pt2-photo-tag-clear { appearance:none; border:none; background:transparent; text-align:left; padding:7px 10px; border-radius:7px; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--pt2-ink-3); cursor:pointer; margin-top:2px; border-top:1px solid var(--pt2-line); padding-top:8px; }
.pt2-photo-tag-clear:hover { color:var(--pt2-danger); }
.pt2-photo-tag-custom { padding:4px 4px 2px; display:flex; flex-direction:column; gap:6px; }
.pt2-photo-tag-custom input { width:100%; box-sizing:border-box; height:30px; padding:0 8px; border:1px solid var(--pt2-line); border-radius:6px; font-family:inherit; font-size:12px; color:var(--pt2-ink); outline:none; background:#fff; transition:border-color .12s, box-shadow .12s; }
.pt2-photo-tag-custom input:focus { border-color:var(--pt2-brand); box-shadow:0 0 0 3px var(--pt2-brand-soft); }
.pt2-photo-tag-custom-row { display:flex; justify-content:flex-end; gap:6px; padding:0 2px 2px; }
.pt2-photo-tag-custom-cancel, .pt2-photo-tag-custom-save { appearance:none; border:none; padding:5px 10px; border-radius:6px; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; transition:all .12s; }
.pt2-photo-tag-custom-cancel { background:transparent; color:var(--pt2-ink-3); }
.pt2-photo-tag-custom-cancel:hover { color:var(--pt2-ink); background:#f3f6fa; }
.pt2-photo-tag-custom-save { background:var(--pt2-brand); color:#fff; }
.pt2-photo-tag-custom-save:disabled { opacity:.4; cursor:not-allowed; }
/* Upload status overlay on each photo tile. */
.pt2-photo-status { position:absolute; inset:0; z-index:2; border-radius:10px; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.pt2-photo-status.uploading { background:linear-gradient(to top, rgba(11,29,46,.55), rgba(11,29,46,0) 55%); }
.pt2-photo-status.failed { background:rgba(11,29,46,.55); align-items:center; pointer-events:auto; }
.pt2-photo-status-spinner { position:absolute; top:50%; left:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:pt2spin .8s linear infinite; }
@keyframes pt2spin { to { transform:rotate(360deg); } }
.pt2-photo-status-bar { position:absolute; left:8px; right:8px; bottom:8px; height:3px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden; }
.pt2-photo-status-bar span { display:block; height:100%; background:#fff; border-radius:999px; transition:width .2s ease-out; }
.pt2-photo-status-label { position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#fff; font-size:11px; font-weight:600; letter-spacing:.1px; text-shadow:0 1px 2px rgba(11,29,46,.55); }
/* "Saved N%" pill that flashes for ~2.5s after each photo is
optimized server-side. Sits top-left so it doesn't fight the
remove (×) button on the top-right. Fade in + out via anim. */
.pt2-photo-saved-pill { position:absolute; top:8px; left:8px; z-index:3; background:rgba(16,185,129,.95); color:#fff; padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; gap:4px; box-shadow:0 2px 6px rgba(11,29,46,.2); animation:pt2savedPill 2.5s ease-out forwards; pointer-events:none; }
.pt2-photo-saved-pill svg { width:11px; height:11px; }
@keyframes pt2savedPill { 0%{ opacity:0; transform:translateY(-4px); } 12%{ opacity:1; transform:translateY(0); } 80%{ opacity:1; } 100%{ opacity:0; transform:translateY(-2px); } }
.pt2-photo-retry { appearance:none; border:none; background:rgba(255,255,255,.95); color:var(--pt2-danger); padding:6px 11px; border-radius:999px; font-family:inherit; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px; cursor:pointer; box-shadow:0 2px 6px rgba(11,29,46,.25); transition:all .12s; pointer-events:auto; }
.pt2-photo-retry:hover { background:#fff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(11,29,46,.3); }
.pt2-photo-retry svg { width:13px; height:13px; }
/* Drag-to-reorder: tiles are draggable; image area shows a grab cursor.
The dragged tile fades, the drop target shows a brand-coloured ring. */
.pt2-photo-tile { cursor:grab; }
.pt2-photo-tile:active { cursor:grabbing; }
.pt2-photo-tile.dragging { opacity:.35; }
.pt2-photo-tile.drag-over { outline:2px solid var(--pt2-brand); outline-offset:2px; }
.pt2-photo-hint-row { display:flex; align-items:center; gap:6px; margin:-2px 0 6px; font-size:11.5px; color:var(--pt2-ink-3); }
.pt2-photo-hint-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; background:#f3f6fa; color:var(--pt2-ink-2); font-weight:600; font-size:10.5px; }
/* ─── Photo preview lightbox ─── */
.pt2-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(7,15,26,.92); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.pt2-lightbox.open { opacity:1; pointer-events:auto; }
.pt2-lightbox-img { max-width:92vw; max-height:84vh; border-radius:10px; box-shadow:0 12px 48px rgba(0,0,0,.55); object-fit:contain; background:#0b1d2e; }
.pt2-lightbox-close { position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.pt2-lightbox-close:hover { background:rgba(255,255,255,.22); }
.pt2-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.pt2-lightbox-nav:hover { background:rgba(255,255,255,.22); }
.pt2-lightbox-nav.prev { left:18px; }
.pt2-lightbox-nav.next { right:18px; }
.pt2-lightbox-caption { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; background:rgba(0,0,0,.45); padding:7px 14px; border-radius:999px; font-weight:600; max-width:80vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt2-lightbox-img.is-loading { opacity:0; }
.pt2-lightbox-img { transition:opacity .18s ease, transform .18s ease; }
.pt2-lightbox-rotate { position:absolute; top:18px; right:64px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.pt2-lightbox-rotate:hover { background:rgba(255,255,255,.24); }
.pt2-lightbox-rotate.busy svg { animation:pt2spin .8s linear infinite; }
.pt2-lightbox-spinner { position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; }
.pt2-lightbox-spinner.show { display:flex; }
.pt2-lightbox-spinner-ring { width:48px; height:48px; border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:#fff; animation:pt2LightboxSpin .8s linear infinite; }
.pt2-lightbox-spinner-label { position:absolute; top:calc(50% + 38px); left:50%; transform:translateX(-50%); color:rgba(255,255,255,.78); font-size:12px; font-weight:600; letter-spacing:.2px; }
@keyframes pt2LightboxSpin { to { transform:rotate(360deg); } }
/* ─── Step 3: Add another unit CTA ─── */
.pt2-add-unit { display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; background:#fff; border:1.5px dashed #c5d4e3; border-radius:12px; cursor:pointer; text-align:left; font-family:inherit; transition:all .15s; }
.pt2-add-unit:hover { border-color:var(--pt2-brand); background:var(--pt2-brand-soft); }
.pt2-add-unit-icon { width:36px; height:36px; border-radius:50%; background:var(--pt2-brand-soft); color:var(--pt2-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.pt2-add-unit:hover .pt2-add-unit-icon { background:var(--pt2-brand); color:#fff; }
.pt2-add-unit-title { font-size:13.5px; font-weight:700; color:var(--pt2-ink); }
/* ─── Step 3: More details collapsible ─── */
.pt2-more { margin-top:4px; border-top:1px dashed var(--pt2-line); padding-top:16px; }
.pt2-more-toggle { display:flex; align-items:center; gap:8px; width:100%; background:transparent; border:none; padding:8px 4px; font-family:inherit; cursor:pointer; color:var(--pt2-ink-2); text-align:left; }
.pt2-more-text { font-size:13px; font-weight:700; color:var(--pt2-ink); }
.pt2-more-hint { font-size:12px; color:var(--pt2-ink-3); flex:1; }
.pt2-more.open .pt2-more-toggle svg { transform:rotate(180deg); }
.pt2-more-toggle svg { transition:transform .2s; color:var(--pt2-ink-3); }
.pt2-more-body { display:none; margin-top:14px; flex-direction:column; gap:18px; padding-top:4px; }
.pt2-more.open .pt2-more-body { display:flex; }
/* ─── Step 3: publish toggle row (what shows on the public page) ─── */
.pt2-pubrow {
display:flex; align-items:center; gap:14px;
margin-top:12px; padding:11px 13px;
background:#fbfcfe; border:1px solid var(--pt2-line); border-radius:11px;
}
.pt2-pubrow-txt { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pt2-pubrow-title { font-size:12.5px; font-weight:600; color:var(--pt2-ink); letter-spacing:-.005em; }
.pt2-pubrow-sub { font-size:11.5px; color:var(--pt2-ink-3); line-height:1.45; }
.pt2-switch {
position:relative; flex:none; width:42px; height:24px; padding:0;
border:none; border-radius:999px; background:#d3dbe4; cursor:pointer;
transition:background .18s ease;
}
.pt2-switch.is-on { background:var(--pt2-brand); }
.pt2-switch-dot {
position:absolute; top:3px; left:3px; width:18px; height:18px;
border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(11,29,46,.25);
transition:transform .18s cubic-bezier(.32,.72,.35,1);
}
.pt2-switch.is-on .pt2-switch-dot { transform:translateX(18px); }
.pt2-switch:focus-visible { outline:2px solid var(--pt2-brand); outline-offset:2px; }
/* Muted state — the fields above are still saved, just not published. */
.pt2-pubrow.is-off { background:#fafbfc; }
.pt2-pubrow.is-off .pt2-pubrow-title { color:var(--pt2-ink-2); }
/* ─── Step 3: Utilities row ─── */
.pt2-util-row { display:flex; flex-wrap:wrap; gap:6px; }
.pt2-util-chip { background:#fff; border:1px solid var(--pt2-line); border-radius:999px; padding:6px 12px; font-family:inherit; font-size:12px; font-weight:500; color:var(--pt2-ink-2); cursor:pointer; transition:all .15s; }
.pt2-util-chip:hover { border-color:#b9cfe6; }
.pt2-util-chip.active { background:var(--pt2-brand-soft); border-color:var(--pt2-brand); color:var(--pt2-brand); font-weight:600; }
/* ─── Step 4: Review ─── */
#pt2-review-area { display:flex; flex-direction:column; gap:12px; }
.pt2-rev-hero { background:linear-gradient(135deg, var(--pt2-brand-soft) 0%, #fff 100%); border:1px solid var(--pt2-line); border-radius:14px; padding:18px 18px 16px; }
.pt2-rev-hero-eyebrow { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--pt2-brand); }
.pt2-rev-hero-title { font-size:18px; font-weight:700; color:var(--pt2-ink); margin-top:4px; line-height:1.25; }
.pt2-rev-hero-sub { font-size:12.5px; color:var(--pt2-ink-3); margin-top:3px; }
.pt2-rev-hero-stats { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--pt2-ink-2); }
.pt2-rev-hero-stats strong { color:var(--pt2-ink); font-weight:700; }
.pt2-rev-hero-dot { width:3px; height:3px; border-radius:50%; background:var(--pt2-ink-3); opacity:.5; }
.pt2-rev-card { background:#fff; border:1px solid var(--pt2-line); border-radius:12px; overflow:hidden; }
.pt2-rev-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--pt2-line); background:#fafbfd; min-width:0; }
.pt2-rev-title-row { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.pt2-rev-title { font-size:12.5px; font-weight:700; color:var(--pt2-ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt2-rev-chip { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px; border:1px solid; flex-shrink:0; white-space:nowrap; }
.pt2-rev-edit { appearance:none; border:1px solid var(--pt2-line); background:#fff; color:var(--pt2-ink-2); padding:4px 9px; border-radius:6px; font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; flex-shrink:0; transition:all .12s; }
.pt2-rev-edit:hover { border-color:var(--pt2-brand); color:var(--pt2-brand); }
.pt2-rev-body { padding:12px 14px 14px; }
.pt2-rev-line { font-size:13px; color:var(--pt2-ink); line-height:1.5; }
.pt2-rev-muted { color:var(--pt2-ink-3); }
.pt2-rev-desc { font-size:12.5px; color:var(--pt2-ink-2); line-height:1.55; margin-bottom:10px; }
.pt2-rev-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.pt2-rev-kv-label { font-size:10.5px; font-weight:700; color:var(--pt2-ink-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.pt2-rev-kv-val { font-size:12.5px; color:var(--pt2-ink); font-weight:500; }
.pt2-rev-section { margin-top:12px; }
.pt2-rev-section-label { font-size:10.5px; font-weight:700; color:var(--pt2-ink-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.pt2-rev-chips { display:flex; flex-wrap:wrap; gap:5px; }
.pt2-rev-chip-soft { background:var(--pt2-brand-soft); color:var(--pt2-brand); padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; }
.pt2-rev-chip-project { background:var(--pt2-purple-soft) !important; color:var(--pt2-purple-deep) !important; }
.pt2-rev-photos { display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.pt2-rev-photo { aspect-ratio:1; border-radius:6px; position:relative; overflow:hidden; }
.pt2-rev-photo-tag { position:absolute; left:2px; bottom:2px; background:rgba(11,29,46,.78); color:#fff; font-size:8.5px; font-weight:600; padding:1px 5px; border-radius:999px; max-width:calc(100% - 4px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt2-rev-photo-more { background:#f0f3f8 !important; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--pt2-ink-3); }
.pt2-rev-publish { background:#fff; border:1px solid var(--pt2-line); border-radius:14px; overflow:hidden; }
.pt2-rev-publish-head { display:flex; gap:10px; align-items:flex-start; padding:14px 16px; background:linear-gradient(180deg, #f0f8f3 0%, #f7fcfa 100%); border-bottom:1px solid #d6ebe0; }
.pt2-rev-publish-icon { width:26px; height:26px; border-radius:7px; background:#d1fadf; color:#1a6e3a; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 1px rgba(26,110,58,.12) inset; }
.pt2-rev-publish-title { font-size:13px; font-weight:700; color:#0d4427; }
.pt2-rev-publish-sub { font-size:11.5px; line-height:1.5; color:#2a6a47; margin-top:2px; }
/* ─── Step 4: Upsell card (real-estate plan recommended) ───
Brand-purple monochrome gradient — same family used by the
primary CTA and lead-manager bridge card so the upsell reads
as part of the system, not a hot-glued promo. The mesh layer
adds two same-family radials for depth without introducing
off-brand accents. A diagonal `::before` sheen sweeps across
the surface every 5s for a subtle "premium" shine. */
.pt2-rev-upsell {
position:relative; isolation:isolate; overflow:hidden;
background:
linear-gradient(135deg,
#361f52 0%,
var(--pt2-brand-deep) 35%,
var(--pt2-brand) 78%,
#7a4ca8 100%
);
color:#fff;
/* margin keeps the dark gradient from slamming flush against
the green ".pt2-rev-publish-head" strip above it — the parent
card has overflow:hidden so we can't rely on border-radius
alone for separation. */
margin:12px;
padding:18px 18px 16px;
border-radius:14px;
display:flex; gap:14px; align-items:center; flex-wrap:wrap;
box-shadow:
0 14px 36px -12px rgba(74,43,102,0.55),
0 4px 12px -4px rgba(11,29,46,0.18),
inset 0 1px 0 rgba(255,255,255,0.14);
}
.pt2-rev-upsell::before {
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(115deg,
transparent 30%,
rgba(255,255,255,.20) 48%,
rgba(255,255,255,.32) 50%,
rgba(255,255,255,.20) 52%,
transparent 70%
);
transform:translateX(-100%);
animation:pt2upsellShine 5s ease-in-out 1.2s infinite;
}
@keyframes pt2upsellShine {
0% { transform:translateX(-100%); }
55% { transform:translateX(100%); }
100% { transform:translateX(100%); }
}
@media (prefers-reduced-motion:reduce) {
.pt2-rev-upsell::before { animation:none; display:none; }
}
.pt2-rev-upsell-mesh {
position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(circle at 88% -15%, rgba(192,132,252,.32) 0%, transparent 50%),
radial-gradient(circle at 5% 115%, rgba(155,115,199,.28) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0%, transparent 60%);
}
.pt2-rev-upsell-body { flex:1 1 230px; min-width:0; z-index:1; position:relative; }
.pt2-rev-upsell-flag {
display:inline-flex; align-items:center; gap:4px;
font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
background:rgba(255,255,255,.18);
padding:3px 9px; border-radius:999px;
box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
}
.pt2-rev-upsell-title { font-size:14px; font-weight:700; margin-top:7px; letter-spacing:-.01em; line-height:1.3; }
.pt2-rev-upsell-tagline { font-size:11.5px; color:rgba(255,255,255,.85); margin-top:3px; font-weight:500; line-height:1.4; }
.pt2-rev-upsell-price { display:inline-flex; align-items:baseline; gap:5px; margin-top:7px; padding:3px 9px; background:rgba(255,255,255,.12); border-radius:7px; box-shadow:0 0 0 1px rgba(255,255,255,.18) inset; }
.pt2-rev-upsell-price-from { font-size:9.5px; font-weight:600; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.08em; }
.pt2-rev-upsell-price-amt { font-size:13px; font-weight:800; color:#fff; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.pt2-rev-upsell-price-unit { font-size:10px; font-weight:500; color:rgba(255,255,255,.7); }
.pt2-rev-upsell-feats { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:4px; }
.pt2-rev-upsell-feats li { display:flex; align-items:center; gap:6px; font-size:11.5px; opacity:.92; font-weight:500; line-height:1.4; }
.pt2-rev-upsell-feats li svg { color:#fff; background:rgba(255,255,255,.22); border-radius:50%; padding:2px; box-sizing:content-box; flex-shrink:0; }
.pt2-rev-upsell-actions { flex:0 1 auto; display:flex; flex-direction:column; gap:6px; align-items:stretch; z-index:3; position:relative; min-width:180px; }
.pt2-rev-upsell-btn {
position:relative; overflow:hidden;
appearance:none; border:none;
padding:11px 16px; border-radius:10px;
font-family:inherit; font-size:12.5px; font-weight:700;
cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:6px;
transition:transform .15s, box-shadow .15s;
background:#fff; color:var(--pt2-brand-deep);
text-decoration:none;
box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 14px rgba(0,0,0,.18);
}
.pt2-rev-upsell-btn::after {
content:""; position:absolute; inset:0;
background:linear-gradient(115deg, transparent 30%, rgba(97,57,132,.18) 50%, transparent 70%);
transform:translateX(-100%);
animation:pt2upsellShine 5s ease-in-out 1.6s infinite;
pointer-events:none;
}
.pt2-rev-upsell-btn:hover { transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px rgba(0,0,0,.22); }
.pt2-rev-upsell-btn:active { transform:translateY(0); }
.pt2-rev-upsell-foot { font-size:10px; color:rgba(255,255,255,.7); text-align:center; font-weight:500; }
/* ─── Responsive ─── */
@media (max-width:540px) {
.pt2-role-row { grid-template-columns:1fr; }
.pt2-type-row { grid-template-columns:1fr; }
.pt2-intent-row { grid-template-columns:repeat(2, 1fr); }
.pt2-amen-grid, .pt2-trade-grid { grid-template-columns:1fr 1fr; }
.pt2-rev-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
.pt2-body { padding:16px 16px 24px; }
.pt2-foot { padding:12px 14px; }
.pt2-foot-meta { display:none; }
.pt2-photo-grid { grid-template-columns:repeat(3, 1fr); }
}
/* ─── Inline validation: field error line + section ring + section banner ─── */
/* Err-line floats absolutely below the field so appearing/disappearing
doesn't shift the surrounding form layout. The fixed 18px height
plus pointer-events:none keeps it readable without trapping clicks
into the next field. .pt2-field / .pt2-input-grp / .pt2-spec are
set to position:relative so the absolute box anchors to the field
it's reporting on, not some farther ancestor. */
.pt2-field, .pt2-spec, .pt2-spec-row { position:relative; }
.pt2-err-line {
position:absolute; top:calc(100% + 3px); left:2px; right:0;
display:flex; align-items:center; gap:5px;
font-size:11.5px; font-weight:500; color:var(--pt2-danger);
line-height:1.3; pointer-events:none; z-index:2;
animation:pt2errslide .2s ease;
}
.pt2-err-line svg { flex-shrink:0; width:11px; height:11px; }
@keyframes pt2errslide { from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:translateY(0); } }
.pt2-section-ring { outline:1.5px dashed var(--pt2-danger); outline-offset:6px; border-radius:4px; }
.pt2-section-banner { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--pt2-danger); margin-bottom:8px; padding:6px 10px; background:rgba(225,29,72,.07); border-radius:7px; border:1px solid rgba(225,29,72,.2); animation:pt2errslide .2s ease; }
/* SVG icon inside the section banner — pin its size so the icon
never reflows when text length changes around it. */
.pt2-section-banner svg { flex-shrink:0; width:11px; height:11px; }
.pt2-input.error, .pt2-select.error, .pt2-textarea.error,
.pt2-spec.error, .pt2-photo-empty.error,
.pt2-role-card.error, .pt2-type-card.error, .pt2-intent-card.error,
.pt2-input-grp.error .pt2-input { border-color:var(--pt2-danger) !important; box-shadow:0 0 0 4px rgba(225,29,72,.10) !important; }
/* Failing-unit marker on the unit switcher tab */
.pt2-utab.failed { background:#fef2f2; border-color:var(--pt2-danger); color:var(--pt2-danger); position:relative; }
.pt2-utab.failed::after { content:""; position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%; background:var(--pt2-danger); border:1.5px solid #fff; }
/* ─── In-drawer progress UI (replaces footer during save) ─── */
.pt2-progress { display:flex; flex-direction:column; gap:6px; flex:1; padding:2px 4px; animation:pt2errslide .2s ease; }
/* ─── Saving / progress UX (footer) ───
Animations use transform (GPU-accelerated) instead of left/width
so motion stays smooth even on lower-end machines. The indeterminate
bar uses two overlapping waves (Material-style) for a more polished
"we're working" feel than a single sliding block. */
.pt2-progress-row { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--pt2-ink); letter-spacing:-.005em; }
.pt2-progress-row .pt2-progress-spin {
width:16px; height:16px; border-radius:50%;
border:2.25px solid rgba(97,57,132,.15);
border-top-color:var(--pt2-brand);
border-right-color:color-mix(in srgb, var(--pt2-brand) 55%, transparent);
animation:pt2spin .85s cubic-bezier(.55,.25,.45,.75) infinite;
flex-shrink:0;
will-change:transform;
}
@keyframes pt2spin { to { transform:rotate(360deg); } }
.pt2-progress-row .pt2-progress-check {
width:16px; height:16px; border-radius:50%;
background:linear-gradient(135deg, var(--pt2-success), #059669);
color:#fff;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
box-shadow:0 2px 8px -2px rgba(16,185,129,.55);
animation:pt2pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pt2pop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); opacity:1; } }
.pt2-progress-bar {
height:5px;
background:#eef2f6;
border-radius:999px;
overflow:hidden;
position:relative;
box-shadow:inset 0 1px 1px rgba(11,29,46,.04);
}
.pt2-progress-fill {
position:absolute; top:0; bottom:0; left:0;
width:0%;
background:linear-gradient(90deg, var(--pt2-brand), color-mix(in srgb, var(--pt2-brand) 70%, var(--pt2-teal) 30%));
border-radius:999px;
transition:width .5s cubic-bezier(.22,.61,.36,1), background .25s ease;
will-change:width;
}
/* Indeterminate: two staggered waves slide via transform — smoother than left:-35%→100%. */
.pt2-progress-bar.indeterminate .pt2-progress-fill { display:none; }
.pt2-progress-bar.indeterminate::before,
.pt2-progress-bar.indeterminate::after {
content:''; position:absolute; top:0; bottom:0;
width:50%;
background:linear-gradient(90deg, transparent, var(--pt2-brand), color-mix(in srgb, var(--pt2-brand) 70%, var(--pt2-teal) 30%), transparent);
border-radius:999px;
will-change:transform;
}
.pt2-progress-bar.indeterminate::before {
animation:pt2indet1 1.8s cubic-bezier(.65,.815,.735,.395) infinite;
}
.pt2-progress-bar.indeterminate::after {
animation:pt2indet2 1.8s cubic-bezier(.165,.84,.44,1) infinite;
animation-delay:.65s;
}
@keyframes pt2indet1 {
0% { transform:translateX(-100%) scaleX(.4); }
60% { transform:translateX(110%) scaleX(.6); }
100% { transform:translateX(110%) scaleX(.6); }
}
@keyframes pt2indet2 {
0% { transform:translateX(-100%) scaleX(.5); }
100% { transform:translateX(110%) scaleX(.5); }
}
.pt2-progress-bar.success .pt2-progress-fill { background:linear-gradient(90deg, var(--pt2-success), #059669); width:100% !important; box-shadow:0 0 12px -2px rgba(16,185,129,.5); }
.pt2-progress-bar.success::before, .pt2-progress-bar.success::after { display:none; }
/* Block-level fade-in so the whole progress region appears smoothly. */
.pt2-progress { animation:pt2progressIn .25s cubic-bezier(.22,.61,.36,1); }
@keyframes pt2progressIn { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
.pt2-progress-error { display:flex; flex-direction:column; gap:8px; padding:10px 12px; background:rgba(225,29,72,.06); border:1px solid rgba(225,29,72,.25); border-radius:9px; flex:1; animation:pt2errslide .2s ease; }
.pt2-progress-error-msg { display:flex; align-items:flex-start; gap:6px; font-size:12px; color:#7f1d1d; font-weight:600; line-height:1.45; }
.pt2-progress-error-msg svg { flex-shrink:0; color:var(--pt2-danger); margin-top:1px; }
.pt2-progress-error-actions { display:flex; gap:6px; }
.pt2-progress-error-actions button { font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:7px; cursor:pointer; border:1px solid; transition:all .15s; }
.pt2-progress-error-retry { background:var(--pt2-danger); color:#fff; border-color:var(--pt2-danger); }
.pt2-progress-error-retry:hover { filter:brightness(.95); }
.pt2-progress-error-cancel { background:#fff; color:var(--pt2-ink-2); border-color:var(--pt2-line); }
.pt2-progress-error-cancel:hover { border-color:#cfdae4; }
/* ─── Center-of-form Save Overlay ─── */
/* Replaces the footer progress strip during save with a friendly,
front-and-center "Hold on, we're checking your info…" card so
the user can't miss what's happening. Lives inside .pt2-drawer
(position:absolute) so it overlays only the drawer, not the page. */
.pt2-save-ovl { position:absolute; inset:0; z-index:35; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; animation:pt2ovlIn .25s cubic-bezier(.22,.61,.36,1); }
.pt2-save-ovl.pt2-save-ovl-out { animation:pt2ovlOut .2s ease forwards; }
@keyframes pt2ovlIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes pt2ovlOut { to { opacity:0; transform:translateY(-2px); } }
.pt2-save-ovl-card { background:#fff; border:1px solid var(--pt2-line); border-radius:18px; box-shadow:0 32px 80px -24px rgba(11,29,46,.28), 0 12px 28px -8px rgba(11,29,46,.16); padding:30px 26px 24px; max-width:400px; width:100%; text-align:center; }
.pt2-save-ovl-icon { width:64px; height:64px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:var(--pt2-brand-soft); color:var(--pt2-brand); position:relative; }
.pt2-save-ovl-icon::before {
content:''; position:absolute; inset:0; border-radius:50%;
border:3px solid rgba(97,57,132,.18);
border-top-color:var(--pt2-brand);
border-right-color:color-mix(in srgb, var(--pt2-brand) 55%, transparent);
animation:pt2spin .9s cubic-bezier(.55,.25,.45,.75) infinite;
will-change:transform;
}
.pt2-save-ovl.is-success .pt2-save-ovl-icon { background:#d1fadf; color:#0a8a4a; }
.pt2-save-ovl.is-success .pt2-save-ovl-icon::before { animation:none; border:none; background:linear-gradient(135deg, var(--pt2-success), #059669); opacity:0; }
.pt2-save-ovl.is-error .pt2-save-ovl-icon { background:rgba(225,29,72,.10); color:var(--pt2-danger); }
.pt2-save-ovl.is-error .pt2-save-ovl-icon::before { animation:none; border:3px solid rgba(225,29,72,.30); border-top-color:transparent; }
.pt2-save-ovl-title { font-size:16px; font-weight:700; color:var(--pt2-ink); letter-spacing:-.01em; margin-bottom:4px; }
.pt2-save-ovl-msg { font-size:13px; color:var(--pt2-ink-2); line-height:1.5; }
.pt2-save-ovl-bar { height:5px; background:#eef2f6; border-radius:999px; overflow:hidden; position:relative; margin:16px auto 0; max-width:240px; }
.pt2-save-ovl-bar.indet::before, .pt2-save-ovl-bar.indet::after {
content:''; position:absolute; top:0; bottom:0; width:50%;
background:linear-gradient(90deg, transparent, var(--pt2-brand), color-mix(in srgb, var(--pt2-brand) 70%, var(--pt2-teal) 30%), transparent);
border-radius:999px; will-change:transform;
}
.pt2-save-ovl-bar.indet::before { animation:pt2indet1 1.8s cubic-bezier(.65,.815,.735,.395) infinite; }
.pt2-save-ovl-bar.indet::after { animation:pt2indet2 1.8s cubic-bezier(.165,.84,.44,1) infinite; animation-delay:.65s; }
.pt2-save-ovl-bar-fill { position:absolute; top:0; bottom:0; left:0; width:0%; background:linear-gradient(90deg, var(--pt2-brand), color-mix(in srgb, var(--pt2-brand) 70%, var(--pt2-teal) 30%)); border-radius:999px; transition:width .5s cubic-bezier(.22,.61,.36,1); }
.pt2-save-ovl.is-success .pt2-save-ovl-bar-fill { width:100%; background:linear-gradient(90deg, var(--pt2-success), #059669); }
.pt2-save-ovl.is-success .pt2-save-ovl-bar.indet::before, .pt2-save-ovl.is-success .pt2-save-ovl-bar.indet::after { display:none; }
.pt2-save-ovl-sub { font-size:11.5px; color:var(--pt2-ink-3); margin-top:12px; }
.pt2-save-ovl-actions { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.pt2-save-ovl-actions button { font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:8px; cursor:pointer; border:1px solid; transition:all .15s; }
.pt2-save-ovl-retry { background:var(--pt2-brand); color:#fff; border-color:var(--pt2-brand); }
.pt2-save-ovl-retry:hover { background:var(--pt2-brand-deep); }
.pt2-save-ovl-close { background:#fff; color:var(--pt2-ink-2); border-color:var(--pt2-line); }
.pt2-save-ovl-close:hover { border-color:#cfdae4; background:#fafcfe; }
/* Issue list (when validation finds problems) */
.pt2-save-ovl-issues { text-align:left; background:rgba(225,29,72,.05); border:1px solid rgba(225,29,72,.18); border-radius:10px; padding:10px 12px; margin-top:12px; max-height:140px; overflow-y:auto; }
.pt2-save-ovl-issues li { font-size:11.5px; color:#7f1d1d; line-height:1.5; padding-left:14px; position:relative; }
.pt2-save-ovl-issues li + li { margin-top:3px; }
.pt2-save-ovl-issues li::before { content:'•'; position:absolute; left:4px; color:var(--pt2-danger); font-weight:700; }
/* ─── Mini-modal (replaces native confirm()) ─── */
.pt2-mini-modal { position:absolute; inset:0; z-index:30; background:rgba(255,255,255,.78); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:24px; animation:pt2errslide .18s ease; }
.pt2-mini-modal-card { background:#fff; border:1px solid var(--pt2-line); border-radius:14px; box-shadow:0 24px 60px -20px rgba(11,29,46,.22), 0 8px 20px -8px rgba(11,29,46,.12); padding:18px 20px 16px; max-width:380px; width:100%; }
.pt2-mini-modal-title { font-size:14px; font-weight:700; color:var(--pt2-ink); letter-spacing:-.01em; }
.pt2-mini-modal-body { font-size:12.5px; color:var(--pt2-ink-2); margin-top:6px; line-height:1.5; }
.pt2-mini-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.pt2-mini-modal-actions button { font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer; border:1px solid; transition:all .15s; }
.pt2-mini-modal-cancel { background:#fff; color:var(--pt2-ink-2); border-color:var(--pt2-line); }
.pt2-mini-modal-cancel:hover { border-color:#cfdae4; background:#fafcfe; }
.pt2-mini-modal-confirm { background:var(--pt2-brand); color:#fff; border-color:var(--pt2-brand); }
.pt2-mini-modal-confirm:hover { background:var(--pt2-brand-deep); }
.pt2-mini-modal-danger { background:var(--pt2-danger); color:#fff; border-color:var(--pt2-danger); }
.pt2-mini-modal-danger:hover { filter:brightness(.95); }
/* Compact variant — single horizontal line: title (left) + buttons (right).
Used for the unsaved-changes close prompt where a full card is too heavy. */
.pt2-mini-modal.is-compact { align-items:center; padding:24px; }
.pt2-mini-modal.is-compact .pt2-mini-modal-card {
max-width:560px; padding:10px 10px 10px 16px;
display:flex; align-items:center; gap:12px;
border-radius:12px;
}
.pt2-mini-modal.is-compact .pt2-mini-modal-title {
font-size:12.5px; font-weight:600;
color:var(--pt2-ink); flex:1; min-width:0; margin:0;
}
.pt2-mini-modal.is-compact .pt2-mini-modal-body { display:none; }
.pt2-mini-modal.is-compact .pt2-mini-modal-actions {
margin-top:0; gap:5px; flex-shrink:0;
}
.pt2-mini-modal.is-compact .pt2-mini-modal-actions button {
padding:6px 10px; font-size:11.5px; border-radius:7px;
}
/* Per-button color variants (override default cancel/confirm look) */
.pt2-mini-modal-actions button.is-ghost { background:transparent; color:var(--pt2-ink-3); border-color:transparent; }
.pt2-mini-modal-actions button.is-ghost:hover { background:#f3f6fa; color:var(--pt2-ink); }
.pt2-mini-modal-actions button.is-primary { background:var(--pt2-brand); color:#fff; border-color:var(--pt2-brand); }
.pt2-mini-modal-actions button.is-primary:hover { background:var(--pt2-brand-deep); }
.pt2-mini-modal-actions button.is-danger { background:var(--pt2-danger); color:#fff; border-color:var(--pt2-danger); }
.pt2-mini-modal-actions button.is-danger:hover { filter:brightness(.95); }
/* ─── Resume-draft chip (top of Step 1 when localStorage stash exists) ─── */
.pt2-resume-chip { display:flex; align-items:center; gap:10px; padding:10px 13px; background:linear-gradient(135deg, rgba(254,243,199,.6), #fff); border:1px solid rgba(245,158,11,.32); border-radius:11px; font-size:12.5px; color:#78350f; margin-bottom:14px; }
.pt2-resume-chip-icon { width:24px; height:24px; border-radius:7px; background:#f59e0b; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pt2-resume-chip-text { flex:1; line-height:1.4; }
.pt2-resume-chip-text strong { color:#5b2207; font-weight:700; }
.pt2-resume-chip-actions { display:flex; gap:6px; flex-shrink:0; }
.pt2-resume-chip-actions button { font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:6px; cursor:pointer; border:1px solid; transition:all .15s; }
.pt2-resume-chip-resume { background:#f59e0b; color:#fff; border-color:#f59e0b; }
.pt2-resume-chip-resume:hover { filter:brightness(.95); }
.pt2-resume-chip-fresh { background:transparent; color:#78350f; border-color:rgba(120,53,15,.3); }
.pt2-resume-chip-fresh:hover { background:#fff; }
/* ─── Edit-mode header tweaks ─── */
.pt2-drawer.is-editing .pt2-eyebrow::before { content:"Editing"; }
.pt2-drawer.is-editing .pt2-eyebrow > span { display:none; }
.pt2-drawer.is-editing #pt2-uswitch,
.pt2-drawer.is-editing #pt2-add-unit { display:none !important; }
/* ===== Portal-side fixes ====================================================
* Appended AFTER the verbatim port so the ported block above stays re-syncable
* from partner.php. Nothing here edits ported rules — it only overrides them.
*
* The address suggestion list is position:absolute inside .pt2-body, which is
* the drawer's scroll container (overflow-y:auto). An absolutely positioned
* child cannot escape a scrolling ancestor, so whenever the address field sits
* near the bottom of the viewport the list was clipped at the body's edge —
* i.e. hidden behind the footer bar. Lifting it to position:fixed takes it out
* of that clip; pt2.js keeps its coordinates pinned to the input.
* ========================================================================== */
.pt2-drawer .pt2-suggest.pt2-suggest-float{
position:fixed;
top:auto;left:auto;right:auto;
margin-top:0;
max-height:min(300px,42vh);
overflow-y:auto;
z-index:1000;
}
/* The wizard's