/* ==========================================================================
   mQuickCalc — UI-FIX 2026-11-10 (shared design-system repair layer)
   --------------------------------------------------------------------------
   Truth source: packages/brand-kit/css/ui-fix.css
   build.mjs copies it into every site package and injects the <link> into
   every HTML page. It loads AFTER site.css on purpose: rules below are
   deliberate overrides, not a fork of the original 53 KB stylesheet.

   Covers: P0-1 mobile nav / P0-3 cookie bar / P1-3 contrast /
           P1-4 ad-slot reservation / P2-2 mode chips / P2-4 FAQ + result /
           P2-6 touch targets / P2-7 misc polish.
   ========================================================================== */

/* ---------- 1. Semantic tokens (single source for contrast fixes) -------- */
:root{
  --tap-min:44px;
  --text-on-brand:#ffffff;
  --success-ink:#047857;   /* was #059669 = 3.77:1 on white; now ~5.3:1 */
  --text-dim:#475569;      /* was #5b6b82; now >= 7:1 on white */
  --danger-ink:#b91c1c;    /* was #dc2626; now >= 5.9:1 on white */
  --ad-h-header:90px;
  --ad-h-incontent:250px;
  --ad-h-mobile:50px;
  --uifix-surface:var(--bg);
  --uifix-line:var(--line);
  --uifix-ink:var(--ink);
}
:root[data-theme="dark"]{
  --success-ink:#6ee7b7;
  --text-dim:#cbd5e1;
  --danger-ink:#fca5a5;
  --uifix-surface:#1e293b;
  --uifix-line:#334155;
  --uifix-ink:#f1f5f9;
}

/* ---------- 2. Hard stop for horizontal page scroll (P0-1) --------------- */
html,body{overflow-x:clip}
.site-header,.header-inner{max-width:100vw}
main,.wrap{max-width:100%}
.conv-table,.result table,table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.conv-table:focus-visible,table:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* long unbreakable strings (share links, hashes, JWTs) */
pre,code,.output-text{overflow-wrap:anywhere;word-break:break-word}

/* ---------- 3. Mobile navigation: hamburger + drawer (P0-1) ------------- */
.mq-burger{display:none}
.mq-drawer{display:none}
/* The header creates a stacking context (z-index:100). The in-flow cookie
   strip has the same z-index and comes later in the DOM, so without raising
   the header the open drawer's first link would sit under the notice. */
.site-header{z-index:101}
@media (max-width:768px){
  .header-inner{position:relative;height:56px;min-height:56px;gap:10px;padding:0 14px;flex-wrap:nowrap;overflow:visible}
  .brand{font-size:16px;flex-shrink:1;min-width:0}
  .site-tag{display:none}
  /* the desktop row of links is replaced by the drawer */
  .site-header nav:not(.breadcrumb):not(.mq-drawer){display:none !important}
  .mq-burger{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;flex:0 0 var(--tap-min);
    width:var(--tap-min);height:var(--tap-min);
    border:1px solid var(--uifix-line);border-radius:var(--radius-md);
    background:var(--uifix-surface);color:var(--uifix-ink);
    font-size:20px;line-height:1;cursor:pointer;padding:0;
  }
  .mq-burger:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
  .mq-burger[aria-expanded="true"]{border-color:var(--brand);background:var(--brand-bg)}
  /* NOTE: .site-header nav{display:flex} in site.css has specificity (0,1,1).
     A bare .mq-drawer loses that cascade and would stay permanently open on
     mobile, covering the hero. These selectors deliberately outrank it. */
  .site-header .mq-drawer{
    position:absolute;top:56px;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    margin-left:0;max-height:calc(100vh - 56px);overflow-y:auto;
    padding:12px 14px 18px;
    background:var(--uifix-surface);color:var(--uifix-ink);
    border-bottom:1px solid var(--uifix-line);
    box-shadow:0 18px 32px -14px rgba(15,23,42,.28);
    z-index:99;
  }
  .site-header .mq-drawer.is-open{display:flex}
  .site-header .mq-drawer a{
    display:flex;align-items:center;justify-content:flex-start;text-align:left;
    min-height:var(--tap-min);margin:0;
    padding:10px 12px;border-radius:var(--radius-md);
    color:var(--uifix-ink);font-size:var(--fs-base);font-weight:var(--fw-semibold);
    border:1px solid transparent;
  }
  .site-header .mq-drawer a:hover,.site-header .mq-drawer a:focus-visible{background:var(--brand-bg);color:var(--brand-ink);border-color:var(--brand-pill)}
  .site-header .mq-drawer .mq-drawer__tools{border-top:1px solid var(--uifix-line);margin-top:8px;padding-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  /* the runtime-injected theme toggle lives in the drawer on small screens */
  .mq-drawer .theme-toggle{margin:0;flex:0 0 var(--tap-min);width:var(--tap-min);height:var(--tap-min)}
  .site-header .header-inner > .theme-toggle{display:none}
}
@media (min-width:769px){
  .site-header .header-inner > .theme-toggle{margin-left:8px}
  .site-header nav{flex-wrap:nowrap}
}

/* ---------- 4. Cookie notice: slim bottom bar (P0-3) -------------------- */
/* A full-width, in-flow strip directly under the header. Unlike a fixed
   bottom bar it never overlaps any H1/H2/result rectangle, stays visible on
   the first screen, and costs a predictable ~54px instead of the old
   600x184 overlay sitting on top of content. */
#cookiebar.cookiebar{
  position:relative;left:auto;right:auto;bottom:auto;
  width:100%;max-width:none;margin:0;
  border-radius:0;border:1px solid var(--uifix-line);
  border-left:none;border-right:none;border-top:none;
  background:var(--uifix-surface);color:var(--uifix-ink);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
  padding:9px 20px;font-size:13px;z-index:100;
}
#cookiebar.cookiebar.show{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;min-height:0;max-height:64px}
#cookiebar .mq-cookie-text{flex:0 1 auto;margin:0;line-height:1.35;font-size:13px;color:var(--uifix-ink);white-space:nowrap}
#cookiebar .mq-cookie-links{flex:0 0 auto;font-size:12.5px;color:var(--text-dim);white-space:nowrap}
#cookiebar a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
#cookiebar .mq-cookie-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
#cookiebar .mq-cookie-privacy{display:none;font-size:12.5px}
#cookiebar .btn{padding:7px 15px;min-height:36px;font-size:13px;flex-shrink:0}
#cookiebar .mq-trust{
  font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.04em;
  color:var(--success-ink);background:var(--ok-bg);
  border:1px solid currentColor;border-radius:var(--radius-pill);padding:4px 10px;white-space:nowrap;
}
:root[data-theme="dark"] #cookiebar .mq-trust{background:rgba(52,211,153,.12)}
@media (max-width:640px){
  #cookiebar.cookiebar{padding:8px 12px}
  #cookiebar.cookiebar.show{max-height:64px;gap:8px}
  #cookiebar .mq-cookie-text{flex:1 1 auto;font-size:12px;overflow:hidden;text-overflow:ellipsis}
  #cookiebar .mq-cookie-links{display:none}
  #cookiebar .mq-trust{display:none}
  #cookiebar .mq-cookie-privacy{display:inline}
  #cookiebar .mq-cookie-actions{gap:8px}
}

/* ---------- 5. Ad slots: reserved geometry, zero CLS (P1-4) ------------- */
/* Empty containers stay invisible (no dead whitespace). As soon as a real
   ad is pasted in, :not(:empty) locks the exact size so the layout never
   jumps. Skeleton + contain-intrinsic-size keep CLS < 0.1.               */
.ad-slot{contain:layout style}
.ad-header:not(:empty),.ad-incontent:not(:empty){
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:728px;margin:20px auto;
  background:linear-gradient(110deg,var(--bg-soft) 8%,var(--bg-muted) 18%,var(--bg-soft) 33%);
  background-size:220% 100%;animation:uifix-shimmer 1.6s linear infinite;
  border:1px dashed var(--uifix-line);border-radius:var(--radius-md);
  contain-intrinsic-size:auto var(--ad-h-incontent);
}
.ad-header:not(:empty){height:var(--ad-h-header);min-height:var(--ad-h-header);aspect-ratio:728/90}
.ad-incontent:not(:empty){height:var(--ad-h-incontent);min-height:var(--ad-h-incontent);aspect-ratio:728/250}
.ad-slot:not(:empty)::before{content:"Advertisement";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.ad-sticky-mobile:not(:empty){
  height:var(--ad-h-mobile);min-height:var(--ad-h-mobile);
  display:flex;align-items:center;justify-content:center;
}
@keyframes uifix-shimmer{to{background-position-x:-220%}}
@media (max-width:768px){
  .ad-header:not(:empty),.ad-incontent:not(:empty){height:auto;min-height:var(--ad-h-mobile);aspect-ratio:auto}
}
@media (prefers-reduced-motion:reduce){.ad-header:not(:empty),.ad-incontent:not(:empty){animation:none}}

/* ---------- 6. Contrast tokens applied globally (P1-3) ------------------ */
.yes,.ok,.success,.success-pill{color:var(--success-ink)}
.no,.error,.field-error{color:var(--danger-ink)}
.result .dim,.result .cell .lbl,.lede,.tc-desc,.text-dim{color:var(--text-dim)}
[data-site="finance"] .btn:not(.ghost){background:#047857;color:#fff}
[data-site="finance"] .btn:not(.ghost):hover{background:#065f46;color:#fff}
[data-site="finance"] .cta,[data-site="finance"] .badge{background:#047857;color:#fff}
[data-site="health"] .btn:not(.ghost){background:#b91c1c;color:#fff}
[data-site="health"] .btn:not(.ghost):hover{background:#991b1b;color:#fff}
/* the "All converters" style links on category pages */
main a:not(.btn):not(.tool-card):not(.sister-card):not(.chip){color:var(--brand-ink)}
:root[data-theme="dark"] main a:not(.btn):not(.tool-card):not(.sister-card):not(.chip){color:#a5b4fc}
:root[data-theme="dark"] .result .dim,:root[data-theme="dark"] .result .cell .lbl,:root[data-theme="dark"] .lede{color:#cbd5e1}
:root[data-theme="dark"] .site-footer a{color:#cbd5e1}
.mq-drawer a{color:var(--uifix-ink)}

/* ---------- 7. Touch targets >= 44px (P2-6) ----------------------------- */
@media (max-width:768px){
  .hero-chips a,.chip,.site-header nav a,.site-footer li a,.breadcrumb a,
  .mq-drawer a,.tool-pager a,.theme-toggle{
    min-height:var(--tap-min);display:inline-flex;align-items:center;
  }
  .hero-chips a{padding:10px 16px}
  .site-footer li a{padding:8px 0}
  .breadcrumb a{padding:8px 2px}
}

/* ---------- 8. Result emphasis, FAQ accordion, mode chips (P1-2/P2-2/P2-4) */
.result.show{outline:2px solid transparent;transition:outline-color .2s,box-shadow .2s}
.result.is-flashing{outline-color:var(--brand);box-shadow:0 0 0 6px var(--brand-bg)}
.result .big{font-size:clamp(38px,6vw,58px);color:var(--brand-ink);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .result .big{color:#a5b4fc}
.uifix-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* FAQ converted to <details> at runtime */
details.mq-faq{background:var(--uifix-surface);border:1px solid var(--uifix-line);border-radius:var(--radius-md);margin:10px 0;overflow:hidden}
details.mq-faq > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  min-height:var(--tap-min);padding:12px 16px;
  font-weight:var(--fw-semibold);font-size:var(--fs-base);color:var(--uifix-ink);
}
details.mq-faq > summary::-webkit-details-marker{display:none}
details.mq-faq > summary::before{content:"+";font-weight:var(--fw-bold);color:var(--brand-ink);font-size:18px;flex:0 0 18px;text-align:center}
details.mq-faq[open] > summary::before{content:"−"}
details.mq-faq > summary:hover{background:var(--brand-bg)}
details.mq-faq > .mq-faq-body{padding:0 16px 16px 44px;color:var(--text-dim);line-height:1.65}
:root[data-theme="dark"] details.mq-faq > .mq-faq-body{color:#cbd5e1}
/* visible mode chips replace the hidden <select> */
.mq-modes{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.mq-modes button{
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  min-height:var(--tap-min);padding:9px 14px;cursor:pointer;
  border:1px solid var(--uifix-line);border-radius:var(--radius-pill);
  background:var(--uifix-surface);color:var(--uifix-ink);
}
.mq-modes button:hover{border-color:var(--brand);background:var(--brand-bg)}
.mq-modes button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.mq-modes button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
select.mq-mode-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- 9. Homepage instant converter (P2-1) ------------------------ */
.mq-quick{
  max-width:640px;margin:26px auto 0;padding:18px 20px;
  background:var(--uifix-surface);border:1px solid var(--uifix-line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:left;
}
.mq-quick h2{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);margin:0 0 10px;font-weight:var(--fw-bold)}
.mq-quick__row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mq-quick__row input,.mq-quick__row select{
  font-family:inherit;font-size:var(--fs-base);min-height:var(--tap-min);
  padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);
  background:var(--bg);color:var(--ink);
}
.mq-quick__row input{flex:1 1 140px;min-width:0;font-variant-numeric:tabular-nums}
.mq-quick__row select{flex:0 1 150px}
.mq-quick__row input:focus,.mq-quick__row select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-pill)}
.mq-quick__out{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:14px}
.mq-quick__cell{background:var(--bg-soft);border:1px solid var(--uifix-line);border-radius:var(--radius-md);padding:9px 11px;min-width:0}
.mq-quick__cell b{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-weight:var(--fw-semibold)}
.mq-quick__cell span{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--uifix-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:root[data-theme="dark"] .mq-quick__row input,:root[data-theme="dark"] .mq-quick__row select{background:#0f172a;color:#f1f5f9;border-color:#475569}
:root[data-theme="dark"] .mq-quick__cell{background:#0f172a}
@media (max-width:480px){.mq-quick{padding:14px}.mq-quick__row input{flex-basis:100%}.mq-quick__row select{flex:1 1 100%}}

/* ---------- 10. Misc polish (P2-7) -------------------------------------- */
.page-hero-emoji{font-size:40px;line-height:1;min-height:44px}
.badge,.kicker{display:inline-flex;align-items:center;align-self:flex-start;width:auto;max-width:100%}
.mq-scroll-hint{position:relative}
.mq-scroll-hint::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--uifix-surface));
}
.mq-scroll-hint.is-end::after{display:none}
.mq-scroll-btns{display:flex;gap:8px;justify-content:flex-end;margin:4px 0 10px}
.mq-scroll-btns button{min-width:var(--tap-min);min-height:36px;border:1px solid var(--uifix-line);background:var(--uifix-surface);color:var(--uifix-ink);border-radius:var(--radius-md);cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .result.is-flashing{transition:none}
  .ad-header:not(:empty),.ad-incontent:not(:empty){animation:none}
}