/* ==========================================================================
   account.css — CityData Account page
   Builds on the site design system (main.css tokens): green palette,
   Roboto Serif / Roboto Mono, and the calm, spacious brand feel.
   ========================================================================== */
:root{
  --acct-green: var(--color-green, #62bb46);
  --acct-green-dark: var(--color-green-dark, #4ea437);
  --acct-green-soft: var(--color-green-soft, #8bd06c);
  --acct-ink: var(--color-heading, #2e4036);
  --acct-muted: var(--color-muted, #6d7d73);
  --acct-border: var(--color-border, #e3e8e2);
  --acct-bg: #f4f7f3;
  --acct-panel: #ffffff;
  --acct-serif: var(--font-serif, "Roboto Serif", Georgia, serif);
  --acct-mono: var(--font-mono, "Roboto Mono", ui-monospace, monospace);
  --acct-radius: 16px;
  --acct-shadow: 0 10px 34px rgba(46,64,54,.08);
  --acct-shadow-sm: 0 4px 16px rgba(46,64,54,.06);
  --acct-max: 1200px;
}

.acct-body{ background: var(--acct-bg); color: var(--acct-ink); font-family: var(--acct-serif); margin:0; }
.acct-body a{ color: inherit; }
[hidden]{ display:none !important; }

/* ------------------------------- top bar -------------------------------- */
.acct-topbar{
  position: sticky; top:0; z-index: 60;
  display:flex; align-items:center; gap:20px;
  padding: 14px clamp(16px, 3vw, 40px);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--acct-border);
}
.acct-brand{ flex:none; display:flex; align-items:center; }
.acct-brand img{ height: 40px; width:auto; display:block; }
.acct-topbar-org{ flex:1; text-align:center; min-width:0; }
.acct-org-name{
  font-family: var(--acct-mono); font-size: clamp(12px, 1vw, 15px); font-weight:500;
  letter-spacing:1.2px; text-transform:uppercase; color: var(--acct-green-dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:100%;
}
.acct-topbar-user{ flex:none; display:flex; align-items:center; gap:12px; }
.acct-hello{ font-size:15px; color: var(--acct-ink); }
.acct-logout{
  font-family: var(--acct-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  text-decoration:none; color: var(--acct-muted); border:1px solid var(--acct-border);
  padding:.5em .9em; border-radius:8px; transition: all .15s ease;
}
.acct-logout:hover{ color:#fff; background: var(--acct-green-dark); border-color: var(--acct-green-dark); }

/* -------------------------------- avatar -------------------------------- */
.acct-avatar{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--acct-green), var(--acct-green-dark));
  color:#fff; font-family:var(--acct-mono); font-weight:700; font-size:13px; letter-spacing:.5px;
}
.acct-avatar.lg{ width:60px; height:60px; font-size:20px; }

/* ------------------------------ gate/states ----------------------------- */
.acct-gate, .acct-denied{ min-height: 70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:40px; }
.acct-gate p{ font-family:var(--acct-mono); letter-spacing:1px; color:var(--acct-muted); text-transform:uppercase; font-size:13px; }
.acct-spinner{ width:44px; height:44px; border-radius:50%; border:3px solid var(--acct-border); border-top-color: var(--acct-green); animation: acct-spin .8s linear infinite; }
@keyframes acct-spin{ to{ transform: rotate(360deg); } }
.acct-denied h2{ font-size: clamp(24px,2.4vw,34px); margin:0; }
.acct-denied p{ color: var(--acct-muted); margin:.4em 0 1em; }

/* -------------------------------- layout -------------------------------- */
.acct-main{ max-width: var(--acct-max); margin:0 auto; padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px) 80px; }

/* --------------------------------- hero --------------------------------- */
.acct-hero{
  position:relative; overflow:hidden;
  border-radius: var(--acct-radius);
  background: linear-gradient(135deg, #2e4036 0%, var(--acct-green-dark) 55%, var(--acct-green) 100%);
  color:#fff; padding: clamp(20px, 2.1vw, 32px) clamp(24px, 3vw, 44px);
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
  box-shadow: var(--acct-shadow);
}
.acct-hero::after{
  content:""; position:absolute; right:-90px; top:-110px; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  pointer-events:none;
}
.acct-eyebrow{ font-family:var(--acct-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.85; margin:0 0 .4em; }
.acct-hero h1{ font-size: clamp(23px, 2.3vw, 36px); font-weight:600; margin:0; line-height:1.12; color:#fff; }
.acct-hero h1 .wave{ display:inline-block; -webkit-text-fill-color: initial; }
.acct-hero-sub{ margin:.45em 0 0; font-size: clamp(14px,1.1vw,18px); opacity:.9; max-width:32em; color:#fff; }
.acct-hero-stats{ display:flex; gap: clamp(16px, 2vw, 34px); }
.acct-stat{ display:flex; flex-direction:column; }
.acct-stat-num{ font-size: clamp(28px, 2.6vw, 40px); font-weight:600; line-height:1; }
.acct-stat-label{ font-family:var(--acct-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; opacity:.85; margin-top:.5em; }

/* --------------------------------- chips -------------------------------- */
.acct-chips{
  position: sticky; top: 62px; z-index:50;
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 22px 0 8px; padding: 10px 0;
  background: rgba(244,247,243,.92); backdrop-filter: blur(8px);
}
/* Chips use the site button paradigm (.btn.btn-outline); tighten for a tab row */
.acct-chips .btn{ font-size:12px; padding:.6em 1.25em; text-decoration:none; white-space:nowrap; background:#fff; }
.acct-chips .btn:hover{ background:#fff; }

/* ------------------------------- sections ------------------------------- */
.acct-section{ scroll-margin-top: 120px; margin-top: clamp(34px, 4vw, 56px); }
.acct-section-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.acct-section-icon{
  flex:none; width:40px; height:40px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background: #e9f4e4; color: var(--acct-green-dark);
}
.acct-section-icon svg{ width:22px; height:22px; }
.acct-section-head h2{ font-size: clamp(22px, 2vw, 32px); font-weight:600; margin:0; }
.acct-count, .acct-legend{ font-family:var(--acct-mono); font-size:12px; letter-spacing:.5px; color: var(--acct-muted); margin-left:auto; }
.acct-legend{ display:flex; align-items:center; gap:4px; }
.acct-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; }
.acct-dot.on{ background: var(--acct-green); } .acct-dot.off{ background:#c7d0c9; }
.acct-subhead{ font-size: clamp(16px,1.3vw,20px); font-weight:500; margin: 26px 0 14px; color: var(--acct-ink); }

/* --------------------------------- cards -------------------------------- */
.acct-card{
  background: var(--acct-panel); border:1px solid var(--acct-border); border-radius: var(--acct-radius);
  padding: clamp(20px, 2.2vw, 32px); box-shadow: var(--acct-shadow-sm);
}
.acct-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--acct-border); }
.acct-card-head h3{ font-size: clamp(19px,1.6vw,26px); font-weight:600; margin:0; }
.acct-card-sub{ display:block; font-family:var(--acct-mono); font-size:13px; color: var(--acct-muted); margin-top:.3em; text-decoration:none; }
a.acct-card-sub:hover{ color: var(--acct-green-dark); }
.acct-id{ display:flex; align-items:center; gap:14px; }

.acct-rows{ margin:0; display:grid; grid-template-columns: 1fr 1fr; gap: 2px 34px; }
.acct-row{ display:flex; flex-direction:column; padding:12px 0; border-bottom:1px dashed var(--acct-border); }
.acct-row dt{ font-family:var(--acct-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color: var(--acct-muted); margin-bottom:5px; }
.acct-row dd{ margin:0; font-size:16px; }
.acct-row dd a{ color: var(--acct-green-dark); text-decoration:none; }
.acct-row dd a:hover{ text-decoration:underline; }
.acct-note{ margin: 18px 0 0; font-size:14px; color: var(--acct-muted); }

/* -------------------------------- badges -------------------------------- */
.acct-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.acct-badge{ font-family:var(--acct-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; padding:.4em .8em; border-radius:999px; }
.acct-badge.on{ background:#e6f5df; color: var(--acct-green-dark); }
.acct-badge.off{ background:#fbe9e7; color:#c0392b; }
.acct-badge.plain{ background:#eef1ee; color: var(--acct-muted); }

/* --------------------------------- team --------------------------------- */
.acct-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.acct-member{ display:flex; align-items:center; gap:14px; background: var(--acct-panel); border:1px solid var(--acct-border); border-radius:14px; padding:16px 18px; box-shadow: var(--acct-shadow-sm); }
.acct-member-body{ flex:1; min-width:0; }
.acct-member-body h4{ margin:0 0 3px; font-size:16px; font-weight:600; }
.acct-you{ font-family:var(--acct-mono); font-size:10px; letter-spacing:.5px; background:#e6f5df; color:var(--acct-green-dark); padding:.2em .5em; border-radius:6px; vertical-align:middle; }
.acct-member-email{ display:block; font-size:13px; color: var(--acct-green-dark); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-member-loc{ display:block; font-size:12px; color: var(--acct-muted); margin-top:2px; }

/* ------------------------------- products ------------------------------- */
.acct-products{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.acct-product{ position:relative; border-radius:14px; padding:15px 18px; box-shadow: var(--acct-shadow-sm); display:flex; flex-direction:column; }
/* Active product (has a live dashboard) — elevated, green-tinted, distinct */
.acct-product.active{ background: linear-gradient(150deg,#f1f9ec 0%, #e7f5e0 100%); border:1px solid #cbe6bd; border-left:5px solid var(--acct-green); box-shadow: 0 8px 24px rgba(78,164,55,.14); }
/* Inactive product — plain, quieter, no green accent */
.acct-product.inactive{ background: var(--acct-panel); border:1px solid var(--acct-border); border-left:4px solid #d7ded8; }
.acct-product.inactive h4{ color: var(--acct-ink); }
.acct-product.inactive p{ color: var(--acct-muted); }
.acct-product-top{ display:flex; align-items:center; gap:12px; }
.acct-product-top h4{ margin:0; font-size:18px; font-weight:600; flex:1; min-width:0; }
.acct-product-top .acct-mini-btn{ flex:none; }
.acct-product p{ margin:8px 0 0; font-size:14px; color: var(--acct-muted); }
.acct-product .acct-video-link{ margin-top:10px; }
.acct-mini-btn{ font-family:var(--acct-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; padding:.6em 1.1em; border-radius:8px; border:1px solid var(--acct-green-dark); cursor:pointer; transition: all .15s ease; white-space:nowrap; }
/* Open dashboard — solid green, bold white text */
.acct-mini-btn.primary{ background: var(--acct-green-dark); color:#fff; font-weight:700; }
.acct-mini-btn.primary:hover{ background:#3d8a2b; }
/* Request access — outline, quieter */
.acct-mini-btn.request{ background: transparent; color: var(--acct-green-dark); border-color: var(--acct-green-soft); }
.acct-mini-btn.request:hover{ background: var(--acct-green-dark); color:#fff; border-color: var(--acct-green-dark); }
/* Watch-the-overview-video link with green circle play button */
.acct-video-link{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:13px; color: var(--acct-ink); transition: color .15s ease; }
.acct-video-link:hover{ color: var(--acct-green-dark); }
.acct-play{ flex:none; width:34px; height:34px; border-radius:50%; background: var(--acct-green-dark); color:#fff; display:inline-flex; align-items:center; justify-content:center; transition: transform .15s ease; }
.acct-play svg{ width:14px; height:14px; }
.acct-play.sm{ width:28px; height:28px; }
.acct-play.sm svg{ width:12px; height:12px; }
.acct-video-link:hover .acct-play{ transform: scale(1.1); }

/* -------------------------------- support ------------------------------- */
.acct-support-row{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.acct-support-card{ background: var(--acct-panel); border:1px solid var(--acct-border); border-radius:14px; padding:22px; text-decoration:none; box-shadow: var(--acct-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; }
.acct-support-card:hover{ transform: translateY(-3px); box-shadow: var(--acct-shadow); }
.acct-support-card.feature-faq{ background: linear-gradient(135deg,#eef8e9,#e0f1d8); border-color:#d3e9c9; }
.acct-support-tag{ font-family:var(--acct-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color: var(--acct-green-dark); margin-bottom:10px; }
.acct-support-card h4{ margin:0 0 8px; font-size:18px; font-weight:600; }
.acct-support-card p{ margin:0 0 14px; font-size:14px; color: var(--acct-muted); flex:1; }
.acct-support-more{ font-family:var(--acct-mono); font-size:12px; color: var(--acct-green-dark); }

.acct-blog-card{ background: var(--acct-panel); border:1px solid var(--acct-border); border-radius:14px; overflow:hidden; text-decoration:none; box-shadow: var(--acct-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; }
.acct-blog-card:hover{ transform: translateY(-3px); box-shadow: var(--acct-shadow); }
.acct-blog-img{ height:130px; background-size:cover; background-position:center; background-color:#dfe7da; }
.acct-blog-body{ padding:16px 18px; }
.acct-blog-body h4{ margin:6px 0 0; font-size:15px; font-weight:500; line-height:1.35; }

.acct-video-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.acct-video-card{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; background: var(--acct-panel); border:1px solid var(--acct-border); border-radius:12px; padding:16px 18px; text-decoration:none; box-shadow: var(--acct-shadow-sm); transition: all .18s ease; }
.acct-video-card:hover{ border-color: var(--acct-green); transform: translateY(-2px); }
.acct-play{ width:34px; height:34px; border-radius:50%; background: var(--acct-green-dark); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.acct-play svg{ width:14px; height:14px; }
.acct-video-name{ font-weight:600; font-size:16px; }
.acct-video-sub{ font-family:var(--acct-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color: var(--acct-muted); }

/* --------------------------------- chat --------------------------------- */
.acct-chat-intro{ color: var(--acct-muted); margin:0 0 16px; font-size:15px; max-width:none; }
@media (min-width: 820px){ .acct-chat-intro{ white-space:nowrap; } }
.acct-chat-frame{ background: var(--acct-panel); border:1px solid var(--acct-border); border-radius: var(--acct-radius); overflow:hidden; box-shadow: var(--acct-shadow); height: min(72vh, 720px); }
.acct-chat-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ------------------------------- skeleton ------------------------------- */
.acct-skeleton{ height:120px; border-radius:12px; background: linear-gradient(90deg,#eef1ee 25%,#f6f8f5 37%,#eef1ee 63%); background-size:400% 100%; animation: acct-sh 1.3s ease infinite; }
@keyframes acct-sh{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
.acct-empty{ color: var(--acct-muted); font-size:15px; padding:8px 0; }

/* -------------------------------- footer -------------------------------- */
.acct-foot{ margin-top: clamp(48px, 6vw, 90px); padding-top:28px; border-top:1px solid var(--acct-border); text-align:center; color: var(--acct-muted); }
.acct-foot-logo{ height:30px; opacity:.7; margin-bottom:10px; }
.acct-foot p{ font-size:13px; margin:0; } .acct-foot a{ color: var(--acct-green-dark); text-decoration:none; }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 720px){
  .acct-topbar-org{ display:none; }
  .acct-hello{ display:none; }
  .acct-hero{ flex-direction:column; align-items:flex-start; }
  .acct-hero-stats{ width:100%; justify-content:space-between; }
  .acct-rows{ grid-template-columns: 1fr; }
  .acct-chips{ top: 62px; overflow-x:auto; flex-wrap:nowrap; }
}