/* ===========================================================================
   Shared chrome for trends.dooralysis.com.

   The header here is a copy of Rent Advisor's brandbar, deliberately: logo and
   product nav on the LEFT, About/Contact and the account block on the RIGHT,
   30px logo, 1100px container. The first version of this page invented its own
   header — smaller logo, products on the right, no About/Contact — and it was
   immediately obvious as the odd one out.
   =========================================================================== */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font)}
a{color:var(--green-deep)}

.brandbar{background:var(--ink);border-bottom:1px solid rgba(234,246,250,.14);
  padding:14px 24px;color:var(--on-ink)}
.brandbar .in{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap}
.brand-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brandbar a{text-decoration:none}
.brandbar .logo{display:inline-flex;align-items:center;height:30px}
.brandbar .logo img{display:block;height:30px;width:auto}
.product-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.product-nav a,.product-nav span{font-size:13px;color:var(--ink-soft);text-decoration:none}
.product-nav a:hover{color:var(--on-ink)}
.product-nav .active{color:var(--on-ink);font-weight:700;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--green)}
.header-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.site-nav a,.site-nav span{font-size:13px;color:var(--ink-soft);text-decoration:none}
.site-nav a:hover{color:var(--on-ink)}
.header-right .account-nav{padding-left:16px;border-left:1px solid rgba(234,246,250,.18)}
@media(max-width:640px){.header-right .account-nav{padding-left:0;border-left:0}}
.account-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;
  color:var(--ink-soft)}
.account-nav b{display:inline-flex;align-items:center;border-radius:999px;
  background:var(--amber-tint);color:var(--ink);padding:3px 8px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:var(--green);cursor:pointer;font-weight:700}
.linkbtn:hover{text-decoration:underline}

header{background:var(--ink);color:var(--on-ink);padding:34px 24px 38px}
header .in{max-width:1100px;margin:0 auto}
header h1{margin:0 0 8px;font-size:30px}
header p{margin:0;font-size:16px;color:var(--ink-soft);max-width:720px;line-height:1.55}

main{max-width:1100px;margin:0 auto;padding:26px 24px 70px}

/* ---- sign-in panel: collapsed strip under the header ---- */
.signin-panel{display:none;background:var(--ink-tile);color:var(--on-ink);padding:16px 24px}
.signin-panel.open{display:block}
.signin-panel .in{max-width:1100px;margin:0 auto;display:flex;gap:12px;align-items:flex-end;
  flex-wrap:wrap}
.signin-panel label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);margin-bottom:5px}
.signin-panel input{padding:9px 11px;border:1px solid rgba(234,246,250,.25);border-radius:8px;
  font:inherit;font-size:14.5px;background:var(--ink);color:var(--on-ink);min-width:260px}
.signin-panel button{background:var(--green-deep);color:var(--surface);border:0;border-radius:8px;
  font:inherit;font-size:14.5px;font-weight:700;padding:10px 18px;cursor:pointer}
.signin-panel button[disabled]{opacity:.6;cursor:not-allowed}
.signin-msg{margin:0;font-size:12.5px;color:var(--ink-soft);flex-basis:100%}
.signin-msg.ok{color:var(--green)}
.signin-msg.err{color:var(--amber)}

/* ---- add balance ---- */
.gate{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:18px}
.gate h2{margin:0 0 6px;font-size:22px}
.gate p{margin:0 0 14px;font-size:13.5px;color:var(--body)}
.topups{display:grid;gap:10px;max-width:420px}
.topup-btn{background:var(--green-deep);color:var(--surface);border:0;border-radius:10px;
  font:inherit;font-size:15.5px;font-weight:700;padding:13px 20px;cursor:pointer;width:100%}
.topup-btn:hover{filter:brightness(1.06)}

footer{max-width:1100px;margin:0 auto;padding:0 24px 50px;font-size:12.5px;color:var(--body)}
footer a{color:var(--body)}

/* ---- tier picker + monthly/quarterly toggle (trends-core.js controlsHtml) ----
   Sits at the top of the results, not in the search form: the counts it shows
   only exist once the pull has come back, and switching is free because every
   tier is drawn from the same pull. */
.ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:0 0 16px}
.ctl label.q{flex-basis:100%;margin-bottom:-4px}
.ctl select{flex:1 1 420px;min-width:0;width:auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{background:var(--surface);border:0;font:inherit;font-size:14px;font-weight:700;
  color:var(--body);padding:10px 16px;cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--green-deep);color:var(--surface)}
.tiernote{font-size:12.5px;color:var(--body);margin:-8px 0 14px;line-height:1.55}