/* Page tips (pages/tips.js). Colours use tokens only (--card, --off, --border, --text,
   --muted, --navy, --navy-ink, --gold, --gold-text, --lav), which dark.css already
   redefines, so no dark-mode copy of these rules is needed. The two white-on-purple
   buttons keep literal white on purpose. */
.tip-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1.5px solid var(--gold);border-radius:20px;background:transparent;color:var(--navy-ink,var(--navy));font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.tip-btn svg{width:16px;height:16px;color:var(--gold-text);}
.tip-btn:hover{background:var(--off);}

#tipModal{position:fixed;inset:0;z-index:700;background:rgba(20,20,40,.55);display:flex;align-items:center;justify-content:center;padding:18px;}
.tip-card{position:relative;background:var(--card,#fff);color:var(--text);border-radius:16px;border-top:5px solid var(--gold);width:480px;max-width:100%;max-height:92vh;overflow:auto;padding:22px 24px 18px;box-shadow:0 24px 70px rgba(0,0,0,.35);}
.tip-card.wide{width:620px;display:flex;flex-direction:column;overflow:hidden;}
.tip-x{position:absolute;top:14px;right:14px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:var(--muted);cursor:pointer;}
.tip-x:hover{background:var(--off);color:var(--text);}
.tip-x svg{width:18px;height:18px;}
.tip-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-text);}
.tip-card h2{font-size:21px;font-weight:800;color:var(--navy-ink,var(--navy));margin:3px 34px 4px 0;line-height:1.2;}
.tip-why{font-size:14.5px;line-height:1.45;color:var(--muted);margin:0 0 14px;}
.tip-card h3{font-size:13px;font-weight:800;color:var(--text);margin:0 0 9px;}
.tip-list{list-style:none;margin:0;padding:0;}
.tip-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;margin-bottom:10px;}
.tip-list b{color:var(--navy-ink,var(--navy));}
.tip-n{flex:0 0 24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.tip-dot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--gold);margin:8px 3px 0;}
.tip-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.tip-all{background:none;border:0;padding:4px 0;color:var(--muted);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;}
.tip-count{font-size:12.5px;font-weight:700;color:var(--muted);}
.tip-btns{display:flex;gap:8px;margin-left:auto;}
.tip-main{background:var(--navy);color:#fff;border:0;border-radius:10px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;}
.tip-main:hover{background:var(--navy-dark);}
.tip-back{background:var(--off);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;}

.tip-scroll{overflow:auto;flex:1;min-height:0;margin-right:-8px;padding-right:8px;}
.tip-scroll h3{margin:14px 0 7px;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-text);}
.tip-scroll h3:first-child{margin-top:0;}
.tip-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tip-row{text-align:left;background:var(--off);border:1px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--text);}
.tip-row:hover{border-color:var(--gold);}
.tip-row b{display:block;font-size:13.5px;color:var(--navy-ink,var(--navy));}
.tip-row span{display:block;font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px;}
.tip-offer-opt{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;cursor:pointer;}

.tip-offer{position:fixed;right:20px;bottom:20px;z-index:560;width:340px;max-width:calc(100vw - 32px);background:var(--card,#fff);color:var(--text);border:1px solid var(--border);border-left:5px solid var(--gold);border-radius:12px;padding:13px 15px;box-shadow:0 12px 36px rgba(0,0,0,.22);}
.tip-offer-q{font-size:14px;line-height:1.4;margin-bottom:10px;}
.tip-offer-q b{color:var(--navy-ink,var(--navy));}
.tip-offer-btns{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.tip-offer .tip-main,.tip-offer .tip-back{padding:7px 13px;font-size:13px;}
.tip-off{background:none;border:0;padding:4px 2px;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;margin-left:auto;}

/* The Need Help band */
.tip-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card,#fff);border:1px solid var(--border);border-left:5px solid var(--gold);border-radius:14px;padding:14px 18px;margin-bottom:22px;}
.tip-band>div{flex:1;min-width:220px;}
.tip-band b{display:block;font-size:15px;color:var(--navy-ink,var(--navy));}
.tip-band span{font-size:13.5px;color:var(--muted);}

@media(max-width:700px){
  .tip-btn{padding:6px 8px;}
  .tip-btn span{display:none;}
  .tip-rows{grid-template-columns:1fr;}
  .tip-card{padding:18px 16px 14px;}
  .tip-offer{right:16px;left:16px;bottom:16px;width:auto;}
}
/* The button is one more thing in the phone's top bar. Without this the bar is 18px too
   wide at 375px, and the whole page scrolls sideways. */
@media(max-width:600px){
  .topnav-right{gap:8px;}
  .topnav-right .topnav-divider,.user-chip .uid{display:none;}
}
@media(max-width:350px){
  .user-chip .un{display:none;}
}
@media(pointer:coarse){
  .tip-btn{min-width:40px;min-height:40px;justify-content:center;}
  .tip-main,.tip-back{min-height:44px;}
}