/* =====================================================================
   MX EMERALD — the one Mahoney Express web theme (picked: A, 28 Oct 2026).
   Every page links this file. To change the look everywhere, change the
   token block for :root below (B and C token sets are kept for a swap).
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   ===================================================================== */

/* ---------- A. Emerald (ACTIVE) ---------- */
:root{
  --lv-bg:#04201A; --lv-bg2:#072A21; --lv-ink:#F2F4F1; --lv-ink2:#9DBBAF; --lv-line:#1B4A3A; --lv-line2:rgba(255,255,255,.07);
  --lv-sky:radial-gradient(1100px 620px at 82% 0%,#127150 0%,transparent 62%),radial-gradient(900px 500px at 0% 100%,#4A3610 0%,transparent 60%),linear-gradient(160deg,#0A4A35,#04201A 70%);
  --lv-sky-ink:#F4F2EA; --lv-sky-ink2:#B9D3C7;
  --lv-pill:#D8A946; --lv-pill-ink:#241800; --lv-rule:rgba(216,169,70,.45);
  --lv-hot:#F1CF7A; --lv-hot-ink:#241800; --lv-ok:#6FE3A0; --lv-warn:#F1CF7A; --lv-bad:#F08A6E; --lv-cold:#8CC8F0;
  --lv-c0:linear-gradient(90deg,#B8862C,#F1CF7A); --lv-c1:#F1CF7A; --lv-c2:#E08B4F; --lv-c3:#2BB5A6; --lv-c4:#D06A8A; --lv-c5:#34C27A;
  /* complementary accents on emerald (Matt 10/28: "not all green… blend or complementary") */
  --lv-copper:#E08B4F; --lv-teal:#2BB5A6; --lv-rose:#D06A8A; --lv-jade:#34C27A; --lv-amber:#F2B544;
  --lv-btn:linear-gradient(180deg,#F1CF7A,#D8A946); --lv-btn-ink:#241800;
  --lv-field:#062A21; --lv-hover:rgba(241,207,122,.06);
  --lv-display:"Big Shoulders Display",Impact,sans-serif; --lv-body:"Instrument Sans",system-ui,sans-serif;
  --lv-display-w:800; --lv-speedlines:1;
  --lv-navy:#16305A; --lv-navy2:#0E1F3D; --lv-gold-hi:#F7D774; --lv-gold-lo:#B8862C; --lv-gold-edge:#8C6418;
  --lv-h1-size:clamp(64px,11vw,164px); --lv-fig-size:42px; --lv-amt-size:28px; --lv-h2-size:34px;
}
/* ---------- B. Daylight Dispatch (spare) ---------- */
:root[data-look="B"]{ font-stretch:100%;
  --lv-bg:#F3F6F4; --lv-bg2:#FFFFFF; --lv-ink:#0C1D2B; --lv-ink2:#56666F; --lv-line:#D8E0DC; --lv-line2:#E6ECE9;
  --lv-sky:radial-gradient(700px 500px at 92% 10%,rgba(244,169,32,.55),transparent 65%),linear-gradient(135deg,#12A84E 0%,#0A8447 40%,#06583A 100%);
  --lv-sky-ink:#fff; --lv-sky-ink2:#D6F3E2; --lv-pill:#0C1D2B; --lv-pill-ink:#fff; --lv-rule:rgba(255,255,255,.35);
  --lv-hot:#F4A920; --lv-hot-ink:#3A2400; --lv-ok:#0A8447; --lv-warn:#C77D00; --lv-bad:#D2452A; --lv-cold:#2B7FD0;
  --lv-c0:#0C1D2B; --lv-c1:#F4A920; --lv-c2:#2B7FD0; --lv-c3:#5FA3E6; --lv-c4:#93C2F0; --lv-c5:#C3DCF6;
  --lv-btn:#0C1D2B; --lv-btn-ink:#fff; --lv-field:#fff; --lv-hover:#F0F4F2;
  --lv-display:"Archivo",system-ui,sans-serif; --lv-body:"Archivo",system-ui,sans-serif; --lv-display-w:900; --lv-speedlines:0;
  --lv-h1-size:clamp(56px,9vw,132px); --lv-fig-size:32px; --lv-amt-size:19px; --lv-h2-size:28px;
}
/* ---------- C. Night Freight (spare) ---------- */
:root[data-look="C"]{
  --lv-bg:#0A0E24; --lv-bg2:#121838; --lv-ink:#F3F4FB; --lv-ink2:#A3A9CF; --lv-line:#232B57; --lv-line2:rgba(255,255,255,.05);
  --lv-sky:radial-gradient(700px 480px at 6% 18%,#14B05A 0%,transparent 70%),radial-gradient(640px 480px at 40% 105%,#14A7A2 0%,transparent 70%),radial-gradient(760px 520px at 78% 0%,#3E54E0 0%,transparent 70%),radial-gradient(620px 480px at 104% 80%,#8A46DB 0%,transparent 70%),#1A2050;
  --lv-sky-ink:#fff; --lv-sky-ink2:#DCE1FF; --lv-pill:rgba(255,255,255,.16); --lv-pill-ink:#fff; --lv-rule:rgba(255,255,255,.28);
  --lv-hot:#F7C948; --lv-hot-ink:#2B1700; --lv-ok:#7DEBB0; --lv-warn:#F7C948; --lv-bad:#F06A86; --lv-cold:#A9B6FF;
  --lv-c0:#F7C948; --lv-c1:#14B05A; --lv-c2:#14A7A2; --lv-c3:#3E54E0; --lv-c4:#6A4FE0; --lv-c5:#8A46DB;
  --lv-btn:linear-gradient(90deg,#14B05A,#14A7A2 50%,#3E54E0); --lv-btn-ink:#fff; --lv-field:#0E1330; --lv-hover:rgba(255,255,255,.04);
  --lv-display:"Unbounded",system-ui,sans-serif; --lv-body:"Sora",system-ui,sans-serif; --lv-display-w:700; --lv-speedlines:0;
  --lv-h1-size:clamp(48px,7.6vw,112px); --lv-fig-size:28px; --lv-amt-size:16px; --lv-h2-size:26px;
}

/* =====================================================================
   STRUCTURE (same for every look). No boxed cards: one field that flows
   from the sky band down into the page.
     .lv-sky  > .lv-page > .lv-bar + .lv-hero (+ .lv-figs)
     .lv-page > .lv-ribbon | .lv-band (sections) | .lv-table
     .lv-foot (logo every page)
   ===================================================================== */
.lv,.lv body{background:var(--lv-bg);color:var(--lv-ink);font:400 16px/1.55 var(--lv-body)}
.lv .num,.lv-num{font-variant-numeric:tabular-nums lining-nums}
.lv-page{max-width:1240px;margin:0 auto;padding:0 32px}
.lv-sky{position:relative;overflow:hidden;padding-bottom:120px;background:var(--lv-sky);color:var(--lv-sky-ink)}
.lv-sky.slim{padding-bottom:70px}
.lv-sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(180deg,transparent,var(--lv-bg));pointer-events:none}
.lv-sky::before{content:"";position:absolute;right:0;top:210px;width:50%;height:170px;opacity:calc(.45*var(--lv-speedlines));pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 15px,#C7CCD1 15px 18px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 75%);mask:linear-gradient(90deg,transparent,#000 75%)}
.lv-sky.slim::before{top:96px;height:100px}
.lv-sky>.lv-page{position:relative;z-index:1}

.lv-bar{display:flex;align-items:center;gap:36px;padding:20px 0}
.lv-bar .lv-logo{height:60px;width:auto;display:block}
.lv-bar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.lv-bar nav a{text-decoration:none;padding:9px 15px;border-radius:999px;color:var(--lv-sky-ink2);font-weight:500;transition:color .2s,background .2s}
.lv-bar nav a:hover{color:var(--lv-sky-ink)}
.lv-bar nav a[aria-current],.lv-bar nav a.on{color:var(--lv-pill-ink);background:var(--lv-pill)}
.lv-bar .lv-who{margin-left:auto;text-align:right;line-height:1.25;color:var(--lv-sky-ink)}
.lv-bar .lv-who small{display:block;color:var(--lv-sky-ink2)}

.lv-hero{padding:52px 0 0}
.lv-lead{font-size:19px;color:var(--lv-sky-ink2)}
.lv-h1{font:var(--lv-display-w) var(--lv-h1-size)/.88 var(--lv-display);margin:8px 0 14px -.04em;color:var(--lv-sky-ink)}
.lv-h1 .c{color:var(--lv-hot)}
.lv-title{font:var(--lv-display-w) clamp(44px,6vw,84px)/.92 var(--lv-display);margin:6px 0 10px -.02em;color:var(--lv-sky-ink)}
.lv-sub{font-size:17px;color:var(--lv-sky-ink2)}
.lv-figs{display:flex;flex-wrap:wrap;margin-top:48px}
.lv-figs>div{flex:1 1 200px;padding:4px 28px 4px 24px;border-left:2px solid var(--lv-rule)}
.lv-figs>div:first-child{padding-left:0;border-left:0}
.lv-figs dt{font-size:15px;color:var(--lv-sky-ink2)}
.lv-figs dd{margin:0}
.lv-figs dd.v{font:var(--lv-display-w) var(--lv-fig-size)/1.1 var(--lv-display);margin:4px 0 2px;color:var(--lv-sky-ink)}
.lv-figs .hot dd.v{color:var(--lv-hot)}
.lv-figs dd.d{font-size:14px;color:var(--lv-sky-ink2)}

/* ribbon: proportional segments that are also the list */
.lv-ribbon{position:relative;z-index:2;margin-top:-80px;display:grid;gap:4px}
.lv-seg{display:flex;flex-direction:column;gap:6px;min-width:0}
.lv-seg>i{display:block;height:18px;margin-bottom:14px;background:var(--c,var(--lv-c2));transform-origin:left;animation:lv-fill .9s cubic-bezier(.2,.8,.2,1) both}
.lv-seg:first-child>i{border-radius:9px 0 0 9px}.lv-seg:last-child>i{border-radius:0 9px 9px 0}
.lv-seg b{font-weight:600;font-size:15px;color:var(--lv-ink2)}
.lv-seg .amt{font:var(--lv-display-w) var(--lv-amt-size)/1.1 var(--lv-display);white-space:nowrap}
.lv-seg .st{font-size:14px;color:var(--lv-ink2)}
@keyframes lv-fill{from{transform:scaleX(0)}}

/* sections: open bands separated by space + a hairline, never boxes */
.lv-band{padding:44px 0;border-top:1px solid var(--lv-line)}
.lv-band:first-child{border-top:0}
.lv-h2{font:var(--lv-display-w) var(--lv-h2-size)/1 var(--lv-display);margin:0 0 18px;color:var(--lv-ink)}
.lv-muted{color:var(--lv-ink2)}

/* table */
.lv-table{width:100%;border-collapse:collapse}
.lv-table th{text-align:left;padding:10px 12px;font-weight:600;font-size:14px;color:var(--lv-ink2);border-bottom:1px solid var(--lv-line)}
.lv-table td{padding:14px 12px;border-bottom:1px solid var(--lv-line2)}
.lv-table tr:hover td{background:var(--lv-hover)}
.lv-table .r{text-align:right}
.lv-table td.money{font:700 21px var(--lv-display);text-align:right}

/* tags */
.lv-tag{display:inline-block;padding:3px 11px;border-radius:999px;font-size:13px;font-weight:600;background:var(--lv-line2);color:var(--lv-ink2)}
.lv-tag.ok{background:color-mix(in srgb,var(--lv-ok) 18%,transparent);color:var(--lv-ok)}
.lv-tag.hot{background:var(--lv-hot);color:var(--lv-hot-ink)}
.lv-tag.bad{background:color-mix(in srgb,var(--lv-bad) 20%,transparent);color:var(--lv-bad)}
.lv-tag.cold{background:color-mix(in srgb,var(--lv-cold) 18%,transparent);color:var(--lv-cold)}

/* controls */
.lv-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;border:0;text-decoration:none;cursor:pointer;font:600 15px var(--lv-body);background:var(--lv-btn);color:var(--lv-btn-ink)}
.lv-btn.ghost{background:transparent;color:var(--lv-ink);box-shadow:inset 0 0 0 1px var(--lv-line)}
.lv-field{padding:12px 14px;border-radius:10px;border:1px solid var(--lv-line);background:var(--lv-field);color:var(--lv-ink);font:400 16px var(--lv-body)}
.lv-field:focus{outline:none;border-color:var(--lv-hot);box-shadow:0 0 0 3px color-mix(in srgb,var(--lv-hot) 25%,transparent)}
.lv a:focus-visible,.lv button:focus-visible{outline:2px solid var(--lv-hot);outline-offset:3px}

/* footer: logo on every page */
.lv-foot{display:flex;align-items:center;gap:40px;flex-wrap:wrap;margin-top:90px;padding:36px 0 48px;border-top:1px solid var(--lv-line);color:var(--lv-ink2)}
.lv-foot .lv-logo{height:84px;width:auto;display:block}
.lv-foot .lv-btn{margin-left:auto}

@media (max-width:900px){
  .lv-page{padding:0 16px}
  .lv-bar{flex-wrap:wrap;gap:12px}.lv-bar .lv-logo{height:46px}
  .lv-bar nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}
  .lv-hero{padding-top:26px}.lv-figs{margin-top:30px;gap:18px}.lv-figs>div{padding-left:0;border-left:0;flex-basis:100%}
  .lv-sky{padding-bottom:80px}
  .lv-ribbon{margin-top:-36px;grid-template-columns:1fr!important;gap:0}
  .lv-seg{display:grid;grid-template-columns:8px 1fr auto;column-gap:14px;padding:12px 0}
  .lv-seg>i{grid-row:1/3;height:auto;margin:0;border-radius:4px!important}
  .lv-seg b{grid-column:2;grid-row:1}.lv-seg .amt{grid-column:3;grid-row:1;text-align:right}.lv-seg .st{grid-column:2/4;grid-row:2;justify-self:start}
  .lv-table td,.lv-table th{padding:10px 6px}
  .lv-foot{gap:20px}.lv-foot .lv-btn{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.lv-seg>i{animation:none}}

/* look switcher (mx-look.js): three swatches */
.lv-switch{display:inline-flex;gap:6px;padding:4px;border-radius:999px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lv-switch button{width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.lv-switch button[data-l=A]{background:linear-gradient(135deg,#0A4A35 50%,#D8A946 50%)}
.lv-switch button[data-l=B]{background:linear-gradient(135deg,#12A84E 50%,#F3F6F4 50%)}
.lv-switch button[data-l=C]{background:linear-gradient(135deg,#14B05A,#3E54E0 55%,#8A46DB)}
.lv-switch button[aria-pressed=true]{box-shadow:0 0 0 2px var(--lv-hot)}
.lv-switch button:focus-visible{outline:2px solid var(--lv-hot);outline-offset:2px}
.lv-foot .lv-switch{background:var(--lv-line2);box-shadow:none}
.lv-bar [data-lv-switch]{margin-left:auto;display:flex;align-items:center}
.lv-bar [data-lv-switch]+.lv-who{margin-left:0}

/* gold rule + framed page — Matt 10/28: gold sharp, bevelled; navy DROPPED ("drop it and stay with gold") */
.lv-rule2{display:block;height:4px;width:120px;background:linear-gradient(180deg,var(--lv-gold-hi),var(--lv-gold-lo) 60%,var(--lv-gold-edge));box-shadow:0 1px 0 rgba(0,0,0,.35)}
.lv-frame{position:fixed;inset:14px;pointer-events:none;z-index:60;border:2px solid var(--lv-gold-lo)}
/* double thin gold border (Matt 10/28): outer 2px, inner 1px, small gap */
.lv-frame::after{content:"";position:absolute;inset:3px;border:1px solid var(--lv-gold-hi);opacity:.85}
@media (max-width:900px){.lv-frame{inset:7px}}
/* variant B: white on the outer-outer edge (1px), slightly thicker gold inside (2px) */
.lv-frame.wg{border:1px solid rgba(255,255,255,.75)}
.lv-frame.wg::after{inset:3px;border:2px solid var(--lv-gold-lo);opacity:1}

/* accent tags: complementary colours for statuses/categories */
.lv-tag.copper{background:color-mix(in srgb,var(--lv-copper,#E08B4F) 20%,transparent);color:var(--lv-copper,#E08B4F)}
.lv-tag.teal{background:color-mix(in srgb,var(--lv-teal,#2BB5A6) 20%,transparent);color:var(--lv-teal,#2BB5A6)}
.lv-tag.rose{background:color-mix(in srgb,var(--lv-rose,#D06A8A) 20%,transparent);color:var(--lv-rose,#D06A8A)}
.lv-tag.jade{background:color-mix(in srgb,var(--lv-jade,#34C27A) 20%,transparent);color:var(--lv-jade,#34C27A)}
.lv-tag.amber{background:color-mix(in srgb,var(--lv-amber,#F2B544) 20%,transparent);color:var(--lv-amber,#F2B544)}