/**
 * Signed-in account dropdown (avatar/name trigger + panel) plus the
 * Edit Profile / Settings / Unfollow / Delete-account modals it opens —
 * see includes/account-dropdown.php.
 *
 * This does NOT enqueue floor-plans.css: that file opens with a global
 * reset (`*{margin:0;padding:0}`, `body{...}`, `a{...}`, `h1,h2,h3{...}`)
 * meant for its own standalone floor-plans page template, which would
 * strip the homepage's actual theme styling if loaded there. Every
 * class below (.modal-backdrop, .account-modal, .field-group,
 * .toggle-switch, .followed-dev-row, .status-*, etc.) is instead
 * copied out of floor-plans.css as-is — same declarations, same visual
 * result — just without that file's blast radius. Keep both in sync by
 * hand if the platform header's version of these ever changes.
 */

:root{
	--wpc-acct-ink:#2A2828;
	--wpc-acct-gold:#DDB890; --wpc-acct-gold-dark:#A67C4A;
	--wpc-acct-paper:#F4F2F0; --wpc-acct-paper-dim:#E9E5E1; --wpc-acct-sand:#D4CBC4;
	--wpc-acct-stone:#937E6C; --wpc-acct-stone-dark:#59504B; --wpc-acct-text:#1D1916; --wpc-acct-white:#ffffff;
	--wpc-acct-radius:2px;
}

/* --- Trigger + dropdown panel (new — not in floor-plans.css, whose
   platform header uses a simpler icon-only dropdown) --- */
.wpc-account-wrap{position:relative;}

.wpc-account-trigger{
	display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
	padding:6px 4px; font-family:inherit;
}
.wpc-account-avatar{
	width:30px; height:30px; border-radius:50%; background:var(--wpc-acct-gold); color:var(--wpc-acct-ink);
	display:flex; align-items:center; justify-content:center; font-family:"Cormorant","Iowan Old Style",serif;
	font-weight:700; font-size:.9rem; flex:none;
}
.wpc-account-avatar--lg{width:44px; height:44px; font-size:1.2rem;}
.wpc-account-name{color:#ffffff; font-size:.82rem;}
.wpc-account-chev{color:rgba(255,255,255,.7); transition:transform .2s ease; flex:none;}
.wpc-account-trigger[aria-expanded="true"] .wpc-account-chev{transform:rotate(180deg);}

.wpc-account-dropdown{
	/* Flush with the trigger's right edge — tried centering it under the
	   trigger (both true left:50%/translateX(-50%) and an approximate
	   right:90px offset), but neither looked right in practice: at 360px
	   wide against a trigger near the nav's edge, shifting it toward
	   center just made it drift into the page content instead of
	   reading as "attached to" the trigger. right:0 is what looked
	   natural, and it's also the only option with zero overflow risk at
	   any width, since the trigger's own right edge is always inside
	   the viewport by definition. */
	position:absolute; top:calc(100% + 14px); right:0; width:360px; max-width:88vw; max-height:80vh; overflow-y:auto;
	background:var(--wpc-acct-white); border-radius:14px; box-shadow:0 18px 50px rgba(20,17,15,.28); border:1px solid var(--wpc-acct-sand);
	padding:22px; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .18s ease, transform .18s ease;
	z-index:200; color:var(--wpc-acct-text);
}
.wpc-account-dropdown.open{opacity:1; transform:translateY(0); pointer-events:auto;}

.wpc-account-dropdown-header{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.wpc-account-dropdown-name{font-family:"Cormorant","Iowan Old Style",serif; font-size:1.15rem; font-weight:700; color:var(--wpc-acct-text); line-height:1.2;}
.wpc-account-dropdown-email{font-size:.74rem; color:var(--wpc-acct-stone-dark); margin-top:1px;}

.wpc-account-shortlist-group{margin-bottom:10px;}
.wpc-account-shortlist-group-name{font-size:.7rem; font-weight:600; color:var(--wpc-acct-stone-dark); margin-bottom:6px;}
.wpc-account-unit-row{display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:9px; transition:background .15s ease; color:var(--wpc-acct-text); text-decoration:none;}
.wpc-account-unit-row:hover{background:var(--wpc-acct-paper);}
.wpc-account-unit-row .unit-ref{font-family:"Cormorant","Iowan Old Style",serif; font-weight:700; font-size:.92rem; flex:none; width:48px;}
.wpc-account-unit-row .unit-meta{font-size:.74rem; color:var(--wpc-acct-stone-dark); flex:1;}
.wpc-account-unit-row .unit-status{font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; padding:3px 8px; border-radius:20px; flex:none;}
.wpc-account-view-all{display:block; font-size:.76rem; color:var(--wpc-acct-gold-dark); font-weight:600; margin-top:6px; padding:4px 9px; text-decoration:none;}
.wpc-account-view-all:hover{text-decoration:underline;}

.wpc-account-divider{height:1px; background:var(--wpc-acct-sand); margin:14px 0;}
.wpc-account-link{display:flex; align-items:center; gap:9px; padding:9px; border-radius:9px; font-size:.82rem; color:var(--wpc-acct-text); transition:background .15s ease; text-decoration:none;}
.wpc-account-link svg{flex-shrink:0;}
.wpc-account-link:hover{background:var(--wpc-acct-paper);}
.wpc-account-link--muted{color:var(--wpc-acct-stone-dark);}

/* Invisible on desktop — the dropdown stays a plain popover there, no
   dark overlay. At the mobile breakpoint below it becomes a real
   modal-backdrop (same treatment as the Edit Profile/Settings modals
   further down this file), since a small popover card is too cramped
   for the full account menu on a phone screen. */
.wpc-account-dropdown-backdrop{display:contents;}
.wpc-account-dropdown-close{display:none;}

@media (max-width:480px){
	.wpc-account-dropdown-backdrop{
		display:flex; position:fixed; inset:0; background:rgba(29,25,22,.72); z-index:999999;
		align-items:center; justify-content:center; opacity:0; pointer-events:none;
		transition:opacity .25s ease; padding:24px;
	}
	.wpc-account-dropdown-backdrop.open{opacity:1; pointer-events:auto;}
	/* Visibility is driven by the backdrop above now, not this panel's own
	   .open state (that's still used on desktop for the popover fade) —
	   so this stays fully visible/positioned whenever its backdrop shows it. */
	.wpc-account-dropdown{
		position:relative; top:auto; right:auto; width:100%; max-width:420px; max-height:86vh;
		opacity:1; transform:none; pointer-events:auto; box-shadow:none; border:none;
	}
	.wpc-account-dropdown-close{
		display:flex; position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
		border:none; background:var(--wpc-acct-paper); color:var(--wpc-acct-text); align-items:center;
		justify-content:center; cursor:pointer; z-index:5;
	}
	.wpc-account-dropdown-close:hover{background:var(--wpc-acct-paper-dim);}
	.wpc-account-dropdown-name{font-size:1.3rem;}
	.wpc-account-dropdown-email{font-size:.86rem;}
}

/* --- Status pills (copied from floor-plans.css) --- */
.status-available{background:#E4F0E8; color:#3E7050;}
.status-optioned{background:#F3E7D6; color:#8A5A22;}
.status-reserved{background:#F5E1DE; color:#A8382D;}

/* --- Modals (copied from floor-plans.css) --- */
.modal-backdrop{position:fixed; inset:0; background:rgba(29,25,22,.72); z-index:999999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; padding:24px;}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
.modal-backdrop-nested{z-index:1000000;}
.modal-close{position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:none; background:var(--wpc-acct-paper); color:var(--wpc-acct-text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.modal-close:hover{background:var(--wpc-acct-paper-dim);}

.account-modal{background:var(--wpc-acct-white); width:100%; max-width:640px; max-height:86vh; overflow-y:auto; border-radius:var(--wpc-acct-radius); position:relative; padding:28px;}
.account-modal-small{max-width:420px;}
.account-modal h2{font-size:1.5em; margin:0 0 4px; font-family:"Cormorant","Iowan Old Style",serif; padding-right:52px;}
.account-modal-intro{font-size:.88rem; color:var(--wpc-acct-stone); margin-bottom:24px;}
.account-section{margin-bottom:16px;}
.account-section:last-of-type{margin-bottom:6px;}
.account-section-title{text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; font-weight:700; color:var(--wpc-acct-gold-dark); margin-bottom:2px; display:block;}
.account-section-desc{font-size:.8rem; color:var(--wpc-acct-stone); margin-top:8px; margin-bottom:0;}
.field-group{margin-bottom:14px;}
.field-group label{display:block; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--wpc-acct-stone); margin-bottom:6px;}
.field-group input[type="text"], .field-group input[type="email"], .field-group input[type="tel"]{width:100%; padding:.7em .85em; border:1px solid var(--wpc-acct-sand); border-radius:var(--wpc-acct-radius); font-family:inherit; font-size:.88rem; color:var(--wpc-acct-text); background:var(--wpc-acct-paper); box-sizing:border-box;}
.field-group input:focus{border-color:var(--wpc-acct-gold-dark); outline:none;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.phone-field{display:flex; gap:8px;}
.phone-field input[type="tel"]{flex:1; min-width:0;}
.phone-code-select{flex:none; width:104px; padding:.7em .5em; border:1px solid var(--wpc-acct-sand); border-radius:var(--wpc-acct-radius); font-family:inherit; font-size:.88rem; color:var(--wpc-acct-text); background:var(--wpc-acct-paper); box-sizing:border-box; cursor:pointer;}
.text-link{font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--wpc-acct-gold-dark); white-space:nowrap; text-decoration:none;}
.text-link:hover{text-decoration:underline;}
.account-link-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--wpc-acct-paper-dim); gap:12px;}
.account-link-row:last-child{border-bottom:none;}
.account-link-row-danger{width:100%; background:none; border:none; text-align:left; cursor:pointer;}
.account-link-row-danger:hover .account-link-row-text, .account-link-row-danger:hover .account-link-row-sub{color:#A6382E;}
.account-link-row-text{font-size:.86rem; color:var(--wpc-acct-text);}
.account-link-row-sub{font-size:.72rem; color:var(--wpc-acct-stone); margin-top:2px;}
.followed-dev-row{display:flex; align-items:center; justify-content:space-between; padding:11px 12px; background:var(--wpc-acct-paper); border-radius:var(--wpc-acct-radius); margin-bottom:8px; text-decoration:none; transition:background .15s ease;}
.followed-dev-row:hover{background:var(--wpc-acct-paper-dim);}
.followed-dev-row .followed-dev-name{font-size:.86rem; font-weight:600; color:var(--wpc-acct-text); text-decoration:none;}
.followed-dev-row .followed-dev-arrow{color:var(--wpc-acct-gold-dark); flex:none;}
.unfollow-btn{background:none; border:none; padding:4px 2px; cursor:pointer; color:#A6382E; font-size:.76rem; font-weight:600; text-decoration:underline; text-underline-offset:2px; flex:none;}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--wpc-acct-paper-dim); gap:12px;}
.toggle-row:last-child{border-bottom:none;}
.toggle-row-confirm{color:#4C8562; font-size:.76rem; margin-top:4px;}
.toggle-switch{position:relative; width:42px; height:24px; flex:none; display:inline-block;}
.toggle-switch input{opacity:0; width:0; height:0; position:absolute;}
.toggle-slider{position:absolute; inset:0; background:var(--wpc-acct-sand); border-radius:24px; cursor:pointer; transition:background .2s ease;}
.toggle-slider::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--wpc-acct-white); border-radius:50%; transition:transform .2s ease;}
.toggle-switch input:checked + .toggle-slider{background:var(--wpc-acct-gold-dark);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);}
.account-form-msg{font-size:.8rem; margin:14px 0 0; min-height:1.2em;}
.account-form-msg.is-error{color:#A6382E;}
.account-form-msg.is-success{color:#4C8562;}
.account-save-btn{margin-top:8px; width:100%; padding:.9em; border:none; border-radius:var(--wpc-acct-radius); font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; background:var(--wpc-acct-gold); color:var(--wpc-acct-ink);}
.account-save-btn:hover{background:var(--wpc-acct-gold-dark); color:var(--wpc-acct-white);}
.account-modal-actions{display:flex; gap:10px; margin-top:22px;}
.account-btn-outline, .account-btn-danger, .account-btn-primary{flex:1; padding:.75em 1em; border-radius:var(--wpc-acct-radius); font-size:.82rem; font-weight:700; letter-spacing:.03em; cursor:pointer; border:none;}
.account-btn-outline{background:none; border:1px solid var(--wpc-acct-sand); color:var(--wpc-acct-text);}
.account-btn-danger{background:#A6382E; border:none; color:var(--wpc-acct-white);}
.account-btn-danger[disabled]{opacity:.4; cursor:not-allowed;}
.account-btn-danger:not([disabled]):hover{background:#8C2E26;}
.account-btn-primary{background:var(--wpc-acct-stone-dark); border:none; color:var(--wpc-acct-white);}
.account-btn-primary:hover{background:var(--wpc-acct-ink);}

/* Edit Profile / Settings / Unfollow / Delete-account modals — full
   viewport takeover instead of a padded centered card on mobile, same
   reasoning as the account dropdown panel's own mobile treatment above
   (more room for the actual form on a phone screen). .modal-close's
   existing top:18px; right:18px positioning already works unchanged
   here. Placed after the base .modal-backdrop/.account-modal rules
   further up this file — same-specificity selectors cascade by source
   order, so this has to come later to actually win at this width. */
@media (max-width:520px){
	.modal-backdrop{padding:0;}
	.account-modal{
		width:100%; height:100%; max-width:none; max-height:none;
		border-radius:0; padding:28px 20px;
	}
}