/* IVRIS Photographer portal - shared styles.
 * Brand pinned to ivris-dollhouse-web/index.html: Barlow, green #6aad3f,
 * pill/card styling, 1.5px black header rule. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  /* ---- IVRIS brand tokens (source of truth: ivris-dollhouse-web styles) ---- */
  --ivris-green:#6aad3f; --ivris-green-600:#588F33; --ivris-green-050:#F0F7EA; --ivris-green-200:#CDE6BC;
  --ink-900:#111111; --ink-700:#2B2D29; --ink-500:#6B6E68; --ink-300:#B6B9B2;
  --paper:#FFFFFF; --paper-50:#F8F8F5; --paper-100:#F1F2EC; --line:#E4E6E1; --ink-band:#0E0F0D;
  --danger:#C4462E; --focus-ring:#6AAD3F;
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --shadow-sm:0 1px 2px rgba(17,17,17,.05);
  --shadow-md:0 4px 10px rgba(17,17,17,.05), 0 14px 34px rgba(17,17,17,.07);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms; --dur-base:250ms;
  /* ---- legacy aliases (existing rules keep working, now brand-mapped) ---- */
  --green:var(--ivris-green); --green-light:var(--ivris-green-050); --green-dark:var(--ivris-green-600);
  --black:var(--ink-900); --gray:var(--ink-500); --gray-light:var(--paper-100);
  --border:var(--line); --white:var(--paper); --warm-bg:var(--paper-50);
  --red:var(--danger);
}
html{scroll-behavior:smooth;}
body{background:var(--warm-bg); color:var(--black); font-family:'Barlow',sans-serif; min-height:100vh;}

/* ---------- header / persistent top bar (round 17) ----------
 * Fixed height (--topbar-h) so the Design tool pane can be exactly
 * calc(100vh - var(--topbar-h)) full-bleed below it. On narrow screens the
 * nav scrolls horizontally instead of wrapping (keeps the height honest). */
:root{--topbar-h:60px;}
.ivris-header{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 20px; height:var(--topbar-h); border-bottom:1.5px solid var(--black); position:sticky; top:0; background:var(--white); z-index:10;}
.ivris-wordmark{font-size:19px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:inherit; display:flex; align-items:center; flex-shrink:0;}
.ivris-wordmark span{color:var(--green);}
.ivris-header-sub{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gray);}
.ivris-header-user{display:flex; align-items:center; gap:12px; flex-shrink:0;}
/* Homes-left counter chip (filled from GET /api/me/quota). Depleted -> danger. */
.homes-left-chip{display:inline-block; background:var(--green-light); color:var(--green-dark); font-size:12px; font-weight:600; letter-spacing:.02em; padding:5px 11px; border-radius:20px; white-space:nowrap;}
.homes-left-chip.depleted{background:#FCF4F2; color:var(--danger);}
/* On narrow screens the user chip + homes chip can crowd the top bar; drop the
   verbose username first, keep the actionable controls. */
@media (max-width:640px){ .ivris-header-user #user-chip{display:none;} }

/* ---------- badges + pills ---------- */
.ivris-badge{display:inline-block; background:var(--green-light); color:var(--green-dark); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:20px;}
.ivris-badge.private{background:var(--gray-light); color:var(--gray);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:var(--radius-md); border:1.5px solid var(--green); background:var(--green); color:#fff; font:600 14px 'Barlow',sans-serif; cursor:pointer; text-decoration:none; transition:all var(--dur-fast) var(--ease-out);}
.btn:hover{background:var(--ivris-green-600); border-color:var(--ivris-green-600);}
.btn.ghost{background:transparent; color:var(--ivris-green-600);}
.btn.ghost:hover{background:var(--green); color:#fff;}
.btn.small{padding:8px 12px; font-size:13px; border-radius:var(--radius-sm);}
.btn.neutral{background:transparent; border-color:var(--border); color:var(--gray);}
.btn.neutral:hover{background:var(--gray-light); color:var(--black);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn:disabled:hover{background:transparent; color:var(--ivris-green-600);}
.btn.disabled-link{opacity:.45; cursor:not-allowed; pointer-events:auto;}

/* ---------- cards ---------- */
.card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px;}

/* ---------- auth screen ---------- */
.auth-wrap{min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center; padding:32px 16px;}
.auth-card{width:100%; max-width:400px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 28px; box-shadow:0 6px 30px rgba(0,0,0,.05);}
.auth-tabs{display:flex; gap:8px; margin-bottom:22px;}
.auth-tab{flex:1; padding:9px 0; border-radius:20px; border:1.5px solid var(--border); background:var(--white); font:600 13px 'Barlow',sans-serif; color:var(--gray); cursor:pointer; transition:all .18s;}
.auth-tab.active{background:var(--green); border-color:var(--green); color:#fff;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-bottom:5px;}
.field input{width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; font:400 15px 'Barlow',sans-serif; background:var(--white); color:var(--black); outline:none; transition:border-color .15s;}
.field input:focus{border-color:var(--green);}
/* Firebase-unconfigured banner (2026-07-11 auth switch): amber setup nudge on
   the sign-in card + the local-demo entry button. Shown by js/auth.js only
   while firebase-config.json has an empty apiKey. */
.fb-banner{margin-bottom:14px; padding:12px 14px; border-radius:10px; font-size:13px; line-height:1.5; background:#FFF7E6; border:1px solid #F0D9A8; color:#8A6116;}
.fb-banner code{font:600 12px ui-monospace,Menlo,monospace; background:#FBEFD3; padding:1px 5px; border-radius:5px;}
.fb-banner .btn{display:block; margin-top:10px;}
.auth-msg{display:none; margin-bottom:14px; padding:10px 14px; border-radius:10px; font-size:13px; line-height:1.45;}
.auth-msg.error{display:block; background:#FCF4F2; color:var(--danger);}
.auth-msg.ok{display:block; background:var(--green-light); color:var(--green-dark);}
.auth-alt{margin-top:14px; text-align:center; font-size:13px; color:var(--gray);}
.auth-alt a{color:var(--ivris-green-600); font-weight:600; text-decoration:none; cursor:pointer;}

/* ---------- dashboard shell ---------- */
.dash-main{max-width:1100px; margin:0 auto; padding:24px 20px 60px;}
/* Top-bar nav (round 17): lives INSIDE .ivris-header now. */
.tabbar{display:flex; gap:6px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none;}
.tabbar::-webkit-scrollbar{display:none;}
.tabbar .tab-btn{padding:8px 16px; border-radius:20px; border:1.5px solid transparent; background:transparent; font:600 14px 'Barlow',sans-serif; color:var(--gray); cursor:pointer; transition:all .18s; white-space:nowrap;}
.tabbar .tab-btn:hover{border-color:var(--border); color:var(--black);}
.tabbar .tab-btn.active{background:var(--green); border-color:var(--green); color:#fff;}
.pane{display:none;}
.pane.active{display:block;}
/* Design tool FULL-BLEED (round 17): when the Design tab is active the main
 * container drops its gutters entirely — the iframe is the whole viewport
 * below the top bar. Banners are hidden on this tab only. */
body.design-full .dash-main{max-width:none; margin:0; padding:0;}
body.design-full .lapse-banner{display:none !important;}
.section-label{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin:0 0 12px;}

/* ---------- project grid ---------- */
.project-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px;}
.project-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;}
.project-thumb{width:100%; aspect-ratio:4/3; background:var(--gray-light); display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:12px; overflow:hidden;}
.project-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.project-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.project-title-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.project-title{font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.project-date{font-size:12px; color:var(--gray);}
.project-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px;}
.grid-status{padding:36px 0; text-align:center; color:var(--gray); font-size:14px;}

/* ---------- new listing (no-LiDAR floor-plan flow) ---------- */
.newlisting-intro{font-size:15px; color:var(--gray); line-height:1.65; max-width:680px; margin:0 0 22px;}
.newlisting-paths{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;}
.newlisting-card{background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:24px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; transition:border-color var(--dur-fast) var(--ease-out);}
.newlisting-card:hover{border-color:var(--green);}
.newlisting-title{font-size:19px; font-weight:700;}
.newlisting-blurb{font-size:14px; color:var(--gray); line-height:1.6; flex:1;}
.newlisting-card .btn{margin-top:6px;}
.newlisting-status{display:block; margin-top:14px; font-size:13px; color:var(--gray); line-height:1.5;}

/* ---------- design tool (full-bleed, round 17) ---------- */
.design-pane-frame{display:block; width:100%; height:calc(100vh - var(--topbar-h)); min-height:480px; border:0; border-radius:0; background:#000;}
.design-hint{padding:36px 0; text-align:center; color:var(--gray); font-size:14px;}

/* ---------- account / tiers ---------- */
.tier-current{margin-bottom:24px;}
.tier-current .big{font-size:26px; font-weight:700; text-transform:capitalize;}
.tier-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.tier-card{background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:22px 20px; display:flex; flex-direction:column; gap:10px; position:relative;}
.tier-card.highlight{border-color:var(--green);}
/* "Most popular" flag on the highlighted tier — same treatment as landing.css. */
.tier-flag{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--ivris-green-600); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 12px; border-radius:20px; white-space:nowrap;}
.tier-card.current-tier{border-color:var(--green); box-shadow:0 0 0 3px var(--green-light);}
.tier-name{font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.tier-price{font-size:28px; font-weight:700;}
.tier-price small{font-size:13px; font-weight:500; color:var(--gray);}
.tier-feats{list-style:none; font-size:13px; color:var(--gray); line-height:1.9; flex:1;}
.tier-feats li::before{content:'✓  '; color:var(--green); font-weight:700;}

/* ---------- sample tour (onboarding) ---------- */
.ivris-badge.demo{background:#fdf3d7; color:#a07d1c;}
.sample-thumb{background:linear-gradient(135deg,var(--ivris-green-050),var(--ivris-green-200)); color:var(--ivris-green-600); font-weight:600; font-size:14px; text-align:center; padding:0 18px;}

/* ---------- AI photos (flat-staging perk) ---------- */
.aiphotos-note{margin:14px 0 18px; padding:10px 14px; border-radius:10px; background:var(--gray-light); font-size:13px; color:var(--gray);}
.aiphotos-note.included{background:var(--green-light); color:var(--green-dark);}

/* ---------- home pickers (AI photos + Analytics, round 17) ---------- */
.home-list{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px;}
.home-btn{padding:8px 14px; border-radius:20px; border:1.5px solid var(--border); background:var(--white); font:600 13px 'Barlow',sans-serif; color:var(--gray); cursor:pointer; transition:all .18s;}
.home-btn:hover{border-color:var(--green); color:var(--green-dark);}
.home-btn.selected{background:var(--green); border-color:var(--green); color:#fff;}
.home-list-empty{font-size:13px; color:var(--gray); padding:4px 0 12px;}
.ai-meter{margin:0 0 16px; font-size:14px; color:var(--black);}
.ai-meter .ai-meter-track{height:10px; background:var(--gray-light); border-radius:5px; overflow:hidden; margin-top:8px; max-width:420px;}
.ai-meter .ai-meter-fill{display:block; height:100%; background:var(--green); border-radius:5px;}
.ai-meter.capped{color:var(--danger);}
.ai-meter.capped .ai-meter-fill{background:var(--danger);}
/* round 18: low-remaining projection warning (amber, matches .quota-banner.warn) */
.ai-meter.warn .ai-meter-fill{background:#d9a520;}
.ai-meter .ai-meter-note{margin-top:8px; font-size:13px; line-height:1.5; max-width:520px;}
.ai-meter.warn .ai-meter-note{color:#7a5d12;}
.ai-meter.capped .ai-meter-note{color:var(--danger); font-weight:600;}

/* ---------- account info (round 17) ---------- */
.account-info{margin-bottom:24px;}
.account-row{display:flex; gap:14px; font-size:14px; padding:5px 0;}
.account-row-label{width:90px; flex-shrink:0; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); padding-top:2px;}
.account-actions{display:flex; align-items:center; gap:12px; margin-top:12px;}
.account-reset-msg{font-size:13px; color:var(--green-dark);}
.account-reset-msg.error{color:var(--danger);}

/* ---------- analytics ---------- */
.plan-chip{display:inline-block; margin-left:10px; background:var(--green-light); color:var(--green-dark); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:20px; vertical-align:middle;}
.an-controls{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.an-controls select,.an-controls input{padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font:400 14px 'Barlow',sans-serif; background:var(--white); color:var(--black); outline:none;}
.an-controls select:focus,.an-controls input:focus{border-color:var(--green);}
.an-controls input{flex:1; min-width:180px;}
.an-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin-bottom:20px;}
.an-stat{background:var(--gray-light); border-radius:12px; padding:14px 12px; text-align:center;}
.an-stat-val{font-size:22px; font-weight:700;}
.an-stat-label{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-top:2px;}
.an-bar-row{display:flex; align-items:center; gap:10px; padding:4px 0; font-size:13px;}
.an-bar-label{width:72px; color:var(--gray); flex-shrink:0;}
.an-bar-track{flex:1; height:10px; background:var(--gray-light); border-radius:5px; overflow:hidden;}
.an-bar-fill{display:block; height:100%; background:var(--green); border-radius:5px;}
.an-bar-fill.ai{background:#8e6fd8;}
.an-bar-count{width:36px; text-align:right; font-weight:600;}
.an-note{margin-top:16px; font-size:12px; color:var(--gray); line-height:1.6;}

/* ---------- subscription lapse banner (round 7; --danger per brand) ---------- */
.lapse-banner{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#FCF4F2; border:1.5px solid var(--danger); color:var(--danger); border-radius:var(--radius-md); padding:12px 16px; margin:0 0 20px; font-size:14px; line-height:1.5;}
.lapse-banner-text{flex:1; min-width:220px;}
.lapse-banner-dismiss{background:none; border:none; color:var(--danger); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px;}
.lapse-banner-dismiss:hover{background:rgba(196,70,46,.12);}

/* ---------- one-good-layout-first tip (round 9) ---------- */
.pro-tip{background:var(--green-light); border:1.5px solid var(--green); border-radius:12px; padding:12px 16px; margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--green-dark);}
.pro-tip.small{font-size:13px; padding:10px 14px; margin:0;}

/* ---------- manage subscription / retention (round 9) ---------- */
.manage-sub{margin-top:24px;}
.manage-sub .btn{margin-top:12px;}
.retention-label{font-size:13px; font-weight:600; margin-bottom:6px;}
.retention-list{list-style:none; font-size:13px; line-height:1.9; color:var(--gray);}
.retention.cancel .retention-list li::before{content:'✕  '; color:var(--red); font-weight:700;}
.retention.resubscribe .retention-list li::before{content:'✓  '; color:var(--green); font-weight:700;}
.retention-keep{margin-top:8px; font-size:13px; color:var(--green-dark); background:var(--green-light); border-radius:8px; padding:8px 10px; display:inline-block;}
.lapse-banner-detail{flex-basis:100%; font-size:13px;}
.lapse-banner-detail .retention-list{color:var(--ink-700);}
.lapse-banner-detail .retention-keep{background:rgba(255,255,255,.7); color:var(--ivris-green-600);}

/* ---------- AI Virtual Staging card (stage-1 pipeline integration) ---------- */
.staging-card{margin-top:26px;}
.staging-title{font-size:19px; font-weight:700; margin-bottom:8px;}
.staging-blurb{font-size:14px; color:var(--gray); line-height:1.65; max-width:640px; margin-bottom:16px;}
.staging-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.staging-status{font-size:13px; color:var(--gray); line-height:1.5;}
.staging-status.offline{color:var(--danger); background:#FCF4F2; border-radius:8px; padding:6px 10px;}
.staging-listings{display:flex; flex-direction:column; gap:8px;}
.staging-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--paper-50); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px;}
.staging-row-name{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px;}
.staging-row .btn{margin-left:auto;}

/* ---------- monthly-homes quota banner (round 7 stub) ---------- */
.quota-banner{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1.5px solid var(--border); border-radius:12px; background:var(--white); color:var(--gray); padding:12px 16px; margin:0 0 16px; font-size:14px; line-height:1.5;}
.quota-banner-msg{flex:1; min-width:220px;}
.quota-banner.warn{background:#fdf3d7; border-color:#ecd9a0; color:#7a5d12;}
.quota-banner.blocked{background:#FCF4F2; border-color:var(--danger); color:var(--danger);}

/* ---------- tutorial video modal ---------- */
.tut-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;}
.tut-modal[hidden]{display:none;}
.tut-backdrop{position:absolute; inset:0; background:rgba(14,15,13,.62); backdrop-filter:blur(2px);}
.tut-dialog{position:relative; width:100%; max-width:860px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:22px 22px 24px; max-height:calc(100vh - 48px); overflow-y:auto;}
.tut-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.tut-title{font:700 22px 'Barlow Semi Condensed','Barlow',sans-serif; letter-spacing:.01em;}
.tut-close{background:none; border:none; color:var(--gray); font-size:26px; line-height:1; cursor:pointer; padding:2px 8px; border-radius:8px;}
.tut-close:hover{background:var(--gray-light); color:var(--black);}
.tut-sub{margin:4px 0 16px; font-size:14px; color:var(--gray); line-height:1.55;}
.tut-video-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:#0E0F0D;}
.tut-video{position:absolute; inset:0; width:100%; height:100%; display:block; background:#0E0F0D;}
.tut-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; background:linear-gradient(135deg,#0E0F0D,#1c241a);}
.tut-fallback[hidden]{display:none;}
.tut-fallback-inner{max-width:440px;}
.tut-fallback-play{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--green); color:#fff; font-size:24px; margin-bottom:14px;}
.tut-fallback-title{font:700 20px 'Barlow',sans-serif; color:#fff; margin-bottom:8px;}
.tut-fallback-sub{font-size:14px; line-height:1.6; color:#B6B9B2;}
.tut-fallback-sub strong{color:#fff;}
body.tut-open{overflow:hidden;}