/* =====================================================================
   2026-09 polish: hover lift, smooth transitions, toasts, dialogs
   ===================================================================== */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body.modal-open{overflow:hidden;}
button, .btn-cta, a.btn-cta, .chip, select{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

/* Buttons grow slightly on hover and press down on click. */
button, .btn-cta, .btn-primary, .btn-secondary, .account-btn, .chip, .billing-opt,
.plan-pick-card, .navtabs button, .composer button, .discuss-open, .reset-progress,
.btn-approve, .btn-reject, .btn-mini, .btn-google, .reply-link, .back-link,
.submit-fix-btn, .settings-upload-btn, .fav-btn, .account-avatar, .dotnav button,
.step-nav button, .site-header-actions a, .pricing-card .btn-cta{
  transition: transform .16s cubic-bezier(.2,.8,.3,1.2), box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease, opacity .18s ease, filter .18s ease;
  will-change: transform;
}
@media (hover:hover) and (pointer:fine){
  button:not(:disabled):not(.modal-close):not(.pw-toggle):not(.report-link):not(.link-btn):not(.search-clear):hover,
  .btn-cta:hover, .account-btn:hover, .settings-upload-btn:hover, .site-header-actions a:hover{
    transform: scale(1.045);
  }
  .btn-primary:not(:disabled):hover, .btn-cta.primary:hover, .account-btn-primary:hover,
  .composer button:not(:disabled):hover, .navtabs button.active:hover, .submit-fix-btn:hover{
    box-shadow:0 6px 20px rgba(var(--accent-rgb),.38);filter:brightness(1.06);
  }
  .btn-secondary:hover, .btn-cta.secondary:hover, .account-btn:not(.account-btn-primary):hover{border-color:var(--accent);}
  .plan-pick-card:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow);}
  .pricing-card:not(.featured):hover{transform:translateY(-3px);}
  .pricing-card.featured:hover{transform:scale(1.08);}
  .feature-card, .help-card, .step-card{transition:transform .2s ease, box-shadow .2s ease;}
  .feature-card:hover, .help-card:hover, .step-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .card{transition:border-color .18s ease, box-shadow .2s ease, transform .2s ease;}
  .card:not(.open):hover{transform:translateY(-1px);box-shadow:var(--shadow);}
  .topic-row, .chan-item{transition:border-color .18s ease, background-color .18s ease, transform .18s ease;}
  .topic-row:hover{transform:translateX(3px);}
  .modal-close:hover, .pw-toggle:hover{color:var(--ink);transform:scale(1.15);}
  .fav-btn:hover{transform:scale(1.18);}
  .dotnav button:not(:disabled):hover{transform:scale(1.12);}
}
button:not(:disabled):active, .btn-cta:active, .chip:active{transform:scale(.97);transition-duration:.06s;}
.pricing-card.featured:active{transform:scale(1.06);}
button:disabled{cursor:not-allowed;opacity:.55;}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}

/* Busy buttons show a small spinner */
.is-busy{position:relative;color:transparent !important;pointer-events:none;}
.is-busy::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--accent-ink);border-right-color:transparent;animation:gl-spin .7s linear infinite;
}
.btn-secondary.is-busy::after{border-color:var(--ink);border-right-color:transparent;}
@keyframes gl-spin{to{transform:rotate(360deg);}}

/* Modals fade + rise in */
.modal-overlay:not([hidden]){animation:gl-fade .16s ease-out;}
.modal-overlay:not([hidden]) .modal-panel{animation:gl-rise .2s cubic-bezier(.2,.8,.3,1);}
@keyframes gl-fade{from{opacity:0;}to{opacity:1;}}
@keyframes gl-rise{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.dialog-overlay{z-index:70;}
.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.btn-danger{background:var(--crit);box-shadow:0 4px 14px color-mix(in srgb, var(--crit) 30%, transparent);}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d96a3' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.field select:disabled{opacity:.6;cursor:not-allowed;}
.field-hint{font-size:13px;color:var(--ink-dim);font-weight:400;margin:0 0 8px;}
.link-btn{background:none;border:none;color:var(--accent);font-size:14px;cursor:pointer;padding:6px 0 0;text-decoration:underline;text-underline-offset:2px;}
.link-btn:hover{color:var(--accent-2);}

/* Card body opens smoothly */
.card-body:not([hidden]){animation:gl-fade .18s ease-out;}
.card.open{box-shadow:var(--shadow);}

/* Toasts */
.toast-host{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,440px);}
.toast{pointer-events:auto;cursor:pointer;background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:var(--radius-md);
  font-size:15px;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;max-width:100%;text-align:center;}
.toast.show{opacity:1;transform:none;}
.toast-success{background:var(--good);color:#fff;}
.toast-error{background:var(--crit);color:#fff;}

/* Search clear button */
.searchwrap{position:relative;}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--surface-2);border:none;color:var(--ink-dim);
  width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;}
.searchwrap.has-value .search-clear{display:flex;}
.search-clear:hover{color:var(--ink);background:var(--line);}
.searchwrap input[type=search]::-webkit-search-cancel-button{display:none;}
.searchwrap input{padding-right:34px !important;}

/* Nav: admin counter */
.nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;
  border-radius:99px;background:var(--crit);color:#fff;font-size:11px;font-weight:800;line-height:1;}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}

/* Shop Talk polish */
.bubble{animation:gl-fade .2s ease-out;}
.bubble.mine .text{background:color-mix(in srgb, var(--accent) 14%, var(--surface-2));}
.you-tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:99px;padding:0 6px;}
.post.mine{border-color:color-mix(in srgb, var(--accent) 35%, var(--line));}
.msg-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:2px;}
.msg-actions .reply-link{align-self:center;}
.bubble .msg-actions{opacity:.0;transition:opacity .15s ease;}
.bubble:hover .msg-actions, .bubble:focus-within .msg-actions{opacity:1;}
@media (hover:none){.bubble .msg-actions{opacity:1;}}
.composer-who, .composer-hint{font-size:12.5px;color:var(--ink-dim);}
.composer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.composer-row textarea{max-height:160px;}
.reply-children.flat{margin-left:0;padding-left:0;border-left:none;}
.topic-closed-note{font-size:14px;color:var(--ink-dim);font-style:italic;margin-top:6px;}
.chan-item[aria-current="true"]{font-weight:700;}
.loading-dots::after{content:"…";display:inline-block;animation:gl-dots 1.2s steps(4,end) infinite;width:1.2em;text-align:left;overflow:hidden;vertical-align:bottom;}
@keyframes gl-dots{0%{width:0;}100%{width:1.2em;}}

/* Admin reports */
.report-tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px;}
.badge.report-cat{background:color-mix(in srgb, var(--crit) 18%, transparent);color:var(--crit);}
.report-card.urgent{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit) inset;}
.mute-select{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:5px 8px;font-size:13px;font-weight:600;cursor:pointer;}


/* overrides of base styles */
.composer textarea{font-size:16px;min-height:42px;line-height:1.4;}
.field select{border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 34px 9px 11px;font-size:16px;background-color:var(--surface-2);color:var(--ink);font-family:inherit;}
.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
  button:hover, .btn-cta:hover, .card:hover, .plan-pick-card:hover{transform:none !important;}
}

/* ---- Marketing header: Home / About / FAQ / Pricing / Help centered on the screen ---- */
@media (min-width:1024px){
  .site-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
  .site-header-inner .site-logo{justify-self:start;}
  .site-header-inner .site-nav{flex:none;justify-content:center;}
  .site-header-inner .site-header-actions{justify-self:end;}
}
@media (max-width:1023px){
  .site-header-inner{justify-content:space-between;row-gap:12px;}
  .site-header-inner .site-nav{order:3;flex:1 1 100%;justify-content:center;gap:8px 22px;}
}
@media (max-width:600px){
  .site-header-inner{justify-content:center;padding:14px 16px;}
  .site-header-inner .site-logo{flex:1 1 100%;justify-content:center;}
  .site-header-inner .site-nav{gap:6px 18px;}
}

/* ---------- Appearance picker (Account settings) ---------- */
.settings-section{margin:0 0 18px;padding:14px 0 0;border-top:1px solid var(--line);}
.settings-section-label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 8px;}
.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);margin:0 0 8px;}
.theme-picker button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-dim);font-weight:700;font-size:14.5px;cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease;}
.theme-picker button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.theme-picker button:hover{color:var(--ink);}
.theme-picker button.active{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.55),0 1px 3px rgba(0,0,0,.12);}
.theme-picker button.active svg{stroke:var(--accent);}
.theme-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
@media (max-width:420px){.theme-picker button{flex-direction:column;gap:3px;font-size:13px;}}