/* ui.css — shared across all pages. Loaded AFTER each page's inline <style> so it can reinforce.
   Concerns: (0) typography, (1) deter casual copying, (2) responsive chrome (header/nav/content/filters).
   Page-specific layout classes (.hero, .grid, .cards, .modecards) keep their own per-page breakpoints. */

/* ---- (0) typography: self-hosted Inter (SIL OFL, no external requests). Loading after each page's
   inline <style> lets this one rule restyle the whole project's body font. Falls back to the native
   UI font if the woff2 fails to load. ---- */
@font-face{
  font-family:'Inter var';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('vendor/fonts/Inter-var.woff2') format('woff2');
}
body{
  font-family:'Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv05' 1;
  letter-spacing:-0.006em;
}

/* clickable logo */
.header .brand{ text-decoration:none; color:inherit; display:inline-block; cursor:pointer; }

/* ---- (1) anti-copy: rendered content isn't text-selectable; inputs/textareas stay fully usable ---- */
body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-touch-callout:default;
}
img{ -webkit-user-drag:none; user-drag:none; }

/* ---- (2) responsive chrome ---- */
.nav{ flex-wrap:wrap; }

.header{ justify-content:flex-start; flex-wrap:wrap; }
.header > .nav{ order:1; margin-left:auto; }
.header > .auth-bar{ order:2; }

/* tablet */
@media (max-width:820px){
  .wrap{ padding-left:18px; padding-right:18px; }
}

/* small tablet / large phone */
@media (max-width:680px){
  .header{ padding:13px 16px; }
  .nav{ gap:4px; }
  .nav a{ font-size:11.5px; padding:5px 9px; }
  .filters{ padding:10px 14px; }
}

/* auth bar */
.auth-bar{display:flex;align-items:center;gap:8px;flex-shrink:0}
.auth-bar .auth-btn{font-size:12px;font-weight:700;padding:7px 16px;border-radius:20px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap;transition:.15s}
.auth-bar .auth-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6)}
.auth-bar .auth-btn.gold{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:800}
.auth-bar .auth-btn.gold:hover{opacity:.9}
.auth-bar .auth-email{font-size:11.5px;color:rgba(255,255,255,.7);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-bar .auth-btn.logout{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55);font-size:11px;padding:5px 11px}
.paywall-banner{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:var(--radius,12px);padding:20px 24px;margin:16px 0;text-align:center}
.paywall-banner h3{font-size:18px;font-weight:800;margin:0 0 6px}
.paywall-banner p{font-size:13px;color:rgba(255,255,255,.7);margin:0 0 14px}
.paywall-banner .pw-btn{display:inline-block;padding:10px 22px;border-radius:9px;font-size:14px;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--gold-d,#B8922A));color:var(--navy);text-decoration:none;cursor:pointer;border:none}
.locked-tag{display:inline-block;font-size:10px;font-weight:700;background:rgba(212,168,67,.15);color:var(--gold-d,#B8922A);padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle}

/* promo banner */
.promo-banner{margin-bottom:16px}
.promo-inner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--navy,#16223E),var(--navy2,#1E3358));color:#fff;border-radius:10px;padding:14px 18px;position:relative}
.promo-text{flex:1;line-height:1.5}
.promo-text strong{display:block;font-size:15px;font-weight:800;margin-bottom:2px}
.promo-text span{font-size:12.5px;color:rgba(255,255,255,.7)}
.promo-btn{padding:10px 20px;border:none;border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--gold,#D4A843),var(--gold-d,#B8922A));color:var(--navy,#16223E);white-space:nowrap;flex-shrink:0}
.promo-btn:hover{opacity:.9}
.promo-close{position:absolute;top:6px;right:8px;background:none;border:none;color:rgba(255,255,255,.4);font-size:14px;cursor:pointer;padding:4px}
.promo-close:hover{color:rgba(255,255,255,.8)}

/* locked year in msel dropdown */
.msel-opt.locked{opacity:.5;cursor:pointer!important;position:relative}
.msel-opt.locked span::after{content:" 🔒";font-size:10px}
.msel-opt.locked input{display:none!important}

/* locked year pill in filter bar */
.yr-locked{opacity:.45;cursor:pointer!important;position:relative}
.yr-locked::after{content:"🔒";font-size:9px;margin-left:3px}

/* paywall overlay */
.paywall-overlay{background:var(--card,#fff);border:1.5px solid var(--border,#E5DECF);border-radius:10px;padding:40px 24px;text-align:center;margin:20px 0}
.paywall-overlay h3{font-size:20px;font-weight:800;color:var(--navy,#16223E);margin:0 0 8px}
.paywall-overlay p{font-size:14px;color:var(--muted,#7A7A8A);margin:0 0 18px;max-width:480px;display:inline-block;line-height:1.5}
.paywall-overlay .pw-btn{display:inline-block;padding:12px 28px;border-radius:9px;font-size:15px;font-weight:800;background:linear-gradient(135deg,var(--gold,#D4A843),var(--gold-d,#B8922A));color:var(--navy,#16223E);text-decoration:none;cursor:pointer;border:none}
.paywall-overlay .pw-btn:hover{opacity:.9}
.paywall-overlay .pw-sub{font-size:12px;color:var(--muted,#7A7A8A);margin-top:10px}

@media (max-width:600px){
  .promo-inner{flex-direction:column;text-align:center;gap:10px;padding:14px}
  .auth-bar{flex-wrap:wrap;justify-content:center;margin:6px 0 0}
}

/* phone */
@media (max-width:480px){
  .header{ padding:11px 13px; gap:10px; }
  .header h1{ font-size:18px; }
  .header .tag{ display:none; }
  .nav{ flex:1 1 100%; min-width:0; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ white-space:nowrap; }
  .wrap{ padding:14px 13px; }
  .filters{ padding:10px 13px; gap:8px; }
  .filters input, .filters select{ font-size:16px; padding:8px 10px; }
}

/* prevent iOS Safari auto-zoom on focus */
@media (max-width:820px){
  input, select, textarea{ font-size:16px !important; }
}

/* pricing plan grid */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 12px;text-align:center}
.plan-card{background:var(--card,#fff);border:2px solid var(--border,#E5DECF);border-radius:10px;padding:22px 16px;cursor:pointer;transition:.15s;position:relative}
.plan-card:hover{border-color:var(--gold,#D4A843);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.plan-card.plan-best{border-color:var(--gold,#D4A843);background:linear-gradient(180deg,rgba(212,168,67,.06),rgba(212,168,67,.02))}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold,#D4A843);color:var(--navy,#16223E);font-size:10px;font-weight:800;padding:3px 12px;border-radius:10px;white-space:nowrap;letter-spacing:.03em}
.plan-name{font-size:14px;font-weight:700;color:var(--navy,#16223E);margin-bottom:8px}
.plan-price{font-size:26px;font-weight:800;color:var(--navy,#16223E);line-height:1.2}
.plan-price span{font-size:13px;font-weight:500;color:var(--muted,#7A7A8A)}
.plan-save{font-size:11px;font-weight:700;color:#1A8040;margin-top:4px}
.plan-detail{font-size:12px;color:var(--muted,#7A7A8A);margin-top:6px}
.plan-btn{display:inline-block;margin-top:14px;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:700;border:2px solid var(--navy,#16223E);background:transparent;color:var(--navy,#16223E);cursor:pointer;transition:.15s}
.plan-card:hover .plan-btn,.plan-card.plan-best .plan-btn{background:var(--navy,#16223E);color:#fff}
.plan-btn:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:600px){
  .plan-grid{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto}
  .plan-price{font-size:22px}
}

/* paywall modal */
.paywall-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.paywall-modal-backdrop .paywall-overlay{position:relative;max-width:680px;width:100%;max-height:90vh;overflow-y:auto;margin:0;animation:pw-in .2s ease}
.paywall-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:24px;color:var(--muted,#7A7A8A);cursor:pointer;padding:4px 8px;line-height:1}
.paywall-close:hover{color:var(--navy,#16223E)}
@keyframes pw-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* active-tab nav marker */
.header .nav a.active,
.lh nav a.active{ background:var(--gold,#D4A843); color:var(--navy,#16223E); border-color:var(--gold,#D4A843); }