/* ============================================================
   TownSuite.com 2026 — V3 "Expanded" add-on styles
   Loaded ONLY by "index.html".
   Adds: Implementation chapter, Pricing chapter, Integrations
   strip (in Modules), national-footprint chips (final CTA).
   Delete this file + the V3 HTML to fully revert.
   ============================================================ */

/* ---------------- Implementation: phased flow with a build⇄test loop ---------------- */
.x-phases{display:flex;align-items:stretch;gap:0;margin-top:54px;}
.x-phase{
  flex:1 1 0;min-width:0;
  position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;
  padding:26px 24px;box-shadow:var(--shadow-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.x-phase:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));}
.x-phase__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;margin-bottom:18px;
  background:var(--accent-tint);color:var(--accent);
  font-size:14px;font-weight:900;letter-spacing:.06em;
}
.x-phase__t{font-weight:800;font-size:18.5px;margin:0 0 8px;letter-spacing:-.01em;}
.x-phase__d{font-size:14.5px;color:var(--ink2);margin:0;line-height:1.5;}
.x-phase__tag{
  display:block;margin-top:14px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);
}

/* plain chevron connector between phases */
.x-conn{flex:0 0 30px;display:flex;align-items:center;justify-content:center;align-self:center;}
.x-conn__chev{
  width:11px;height:11px;transform:rotate(45deg);
  border-top:2.5px solid color-mix(in srgb,var(--accent) 55%,var(--line2));
  border-right:2.5px solid color-mix(in srgb,var(--accent) 55%,var(--line2));
}

/* the Build ⇄ Test & sign-off loop gate (sits between Build and Go-live) */
.x-gate{
  flex:0 0 138px;align-self:center;position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 8px;
}
/* dashed loop-back arc, drawn above and curving left toward Build */
.x-gate__arc{
  position:absolute;top:-46px;right:50%;width:226px;height:48px;
  color:color-mix(in srgb,var(--accent) 70%,var(--line2));pointer-events:none;overflow:visible;
}
.x-gate__arclbl{
  position:absolute;top:-62px;right:50%;transform:translateX(-58%);
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
/* forward arc: once approved, flow continues right into Go-live */
.x-gate__fwd{
  position:absolute;bottom:-30px;left:50%;width:226px;height:46px;
  color:color-mix(in srgb,var(--accent) 70%,var(--line2));pointer-events:none;overflow:visible;
}
.x-gate__fwdlbl{
  position:absolute;bottom:-50px;left:50%;transform:translateX(58%);
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.x-gate__node{
  display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;
  padding:16px 12px;border-radius:16px;
  border:1.5px dashed color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent-tint) 60%,transparent);
}
.x-gate__ic{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--ts-blue);color:#fff;
}
[data-theme="dark"] .x-gate__ic{background:var(--accent);color:var(--accent-ink);}
.x-gate__ic svg{width:21px;height:21px;}
.x-gate__t{font-weight:800;font-size:14px;letter-spacing:-.01em;color:var(--ink);}
.x-gate__d{font-size:11.5px;color:var(--ink2);line-height:1.4;}
.x-phasenav{display:none;}/* mobile-only onboarding progress rail (shown via the ≤560px block) */

@media (max-width:980px){
  .x-phases{flex-wrap:wrap;gap:14px;justify-content:center;}
  .x-phase{flex:1 1 42%;}
  .x-conn{display:none;}
  .x-gate{flex:1 1 100%;padding:8px 0;}
  /* horizontal curves don't fit the stacked layout — swap for vertical arrows */
  .x-gate__arc,.x-gate__fwd{display:none;}
  .x-gate__arclbl,.x-gate__fwdlbl{
    position:static;transform:none;
    display:flex;align-items:center;justify-content:center;gap:7px;width:100%;text-align:center;
  }
  .x-gate__arclbl{margin-bottom:10px;}
  .x-gate__arclbl::before{content:"\2191";font-size:15px;font-weight:900;line-height:1;}
  .x-gate__fwdlbl{margin-top:10px;}
  .x-gate__fwdlbl::before{content:"\2193";font-size:15px;font-weight:900;line-height:1;}
}
@media (max-width:560px){
  /* no-JS / reduced-motion fallback: plain stacked cards */
  .x-phase{flex:1 1 100%;}

  /* JS-enhanced "player": once the walkthrough is live (data-focus on the row),
     collapse the tall stack into a single-card stage that swaps the focused
     phase/gate automatically — so the whole sequence plays inside one screen,
     no scrolling. */
  .x-phases[data-focus]{display:block;position:relative;flex-wrap:nowrap;min-height:300px;margin-top:30px;}
  .x-phases[data-focus] > .x-phase,
  .x-phases[data-focus] > .x-gate{
    position:absolute;left:0;right:0;top:0;width:100%;margin:0;flex:none;
    opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);
    transition:opacity .4s ease,transform .4s ease,visibility .4s;pointer-events:none;
  }
  .x-phases[data-focus] > .x-conn{display:none !important;}
  .x-phases[data-focus="assess"] > .x-phase[data-fkey="assess"],
  .x-phases[data-focus="build"]  > .x-phase[data-fkey="build"],
  .x-phases[data-focus="golive"] > .x-phase[data-fkey="golive"],
  .x-phases[data-focus="post"]   > .x-phase[data-fkey="post"],
  .x-phases[data-focus="gate"]   > .x-gate[data-fkey="gate"]{
    position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;
  }
  /* progress rail — only while the player is live */
  .x-phases[data-focus] + .x-phasenav{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;}
  .x-phasenav__seg{
    display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 9px;
    border-radius:100px;font-size:12px;font-weight:800;letter-spacing:.03em;
    color:var(--ink3);background:var(--surface2);border:1.5px solid var(--line);
    transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s ease;
  }
  .x-phasenav__seg--loop{font-size:16px;}
  .x-phasenav__seg.is-on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);transform:scale(1.06);}
}

/* ---------------- Onboarding phases: auto-playing walkthrough (1→2→loop→3→4) ---------------- */
.x-phase__n{position:relative;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s ease,color .3s ease;}
.x-phase__n::after{
  content:"";position:absolute;inset:-3px;border-radius:15px;padding:2px;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--accent) 80%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.x-phase__tag{transition:color .3s ease;white-space:nowrap;}

/* hover still works as a manual cue */
.x-phase:hover .x-phase__n{background:var(--accent);color:var(--accent-ink);transform:scale(1.08) rotate(-4deg);}
.x-phase:hover .x-phase__tag{color:var(--accent);}

/* --- the walkthrough: while playing, non-active steps recede; the active one leads --- */
.x-phases.is-playing .x-phase,
.x-phases.is-playing .x-gate{transition:opacity .45s ease,transform .45s ease,box-shadow .45s ease,border-color .45s ease;}
.x-phases.is-playing .x-phase{opacity:.5;}
.x-phases.is-playing .x-gate{opacity:.5;}

.x-phase.is-active{opacity:1 !important;transform:translateY(-7px);border-color:var(--accent) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent),var(--shadow-2) !important;}
.x-phase.is-active .x-phase__n{background:var(--accent);color:var(--accent-ink);transform:scale(1.1);}
.x-phase.is-active .x-phase__tag{color:var(--accent);}

.x-conn.is-active .x-conn__chev{border-color:var(--accent);}
.x-gate.is-active{opacity:1 !important;}
.x-gate.is-active .x-gate__node{border-style:solid;border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent),var(--shadow-2);}

@media (prefers-reduced-motion: no-preference){
  /* active badge: filled + a sweeping conic ring */
  .x-phase.is-active .x-phase__n::after,
  .x-phase:hover .x-phase__n::after{opacity:1;animation:x-ring 1.1s linear infinite;}
  /* active connector chevron nudges toward the next step */
  .x-conn.is-active .x-conn__chev{animation:x-chev .7s ease-in-out infinite;}
  /* gate: spinning refresh icon + flowing arcs to show the build⇄test cycle */
  .x-gate.is-active .x-gate__ic svg{animation:x-spin 1.15s linear infinite;}
  .x-gate.is-loop .x-gate__arc path:first-child,
  .x-gate.is-fwd  .x-gate__fwd path:first-child{animation:x-flow .8s linear infinite;}
  .x-gate.is-loop .x-gate__arclbl,
  .x-gate.is-fwd  .x-gate__fwdlbl{color:var(--accent);}
  /* mobile: the ↑/↓ flow labels pulse when the loop is active */
  .x-gate.is-loop .x-gate__arclbl::before,
  .x-gate.is-fwd  .x-gate__fwdlbl::before{animation:x-bob .7s ease-in-out infinite;}
}
@keyframes x-ring{to{transform:rotate(360deg);}}
@keyframes x-spin{to{transform:rotate(360deg);}}
@keyframes x-chev{0%,100%{transform:rotate(45deg) translate(0,0);}50%{transform:rotate(45deg) translate(3px,3px);}}
@keyframes x-flow{to{stroke-dashoffset:-26;}}
@keyframes x-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

/* environment promotion rail: TEST -> STAGING -> LIVE */
.x-envflow{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:26px;
  padding:18px 24px;border:1.5px dashed color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:16px;background:color-mix(in srgb,var(--accent-tint) 55%,transparent);
}
.x-env{display:inline-flex;align-items:baseline;gap:9px;font-size:14px;color:var(--ink2);}
.x-env strong{color:var(--ink);font-weight:800;font-size:14.5px;letter-spacing:-.01em;}
.x-env__arrow{color:color-mix(in srgb,var(--accent) 60%,var(--line2));font-weight:900;font-size:16px;}
.x-envflow__note{margin-left:auto;font-size:13px;color:var(--ink3);}

/* ---------------- Pricing ---------------- */
.x-price{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;align-items:start;}
.x-pcard{
  position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;
  padding:34px 32px;box-shadow:var(--shadow-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.x-pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));}
.x-pcard__tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.x-pcard__cadence{font-size:13.5px;font-weight:700;color:var(--ink3);}
.x-pcard__t{font-weight:800;font-size:23px;margin:14px 0 6px;letter-spacing:-.015em;}
.x-pcard__lede{font-size:15px;color:var(--ink2);margin:0 0 6px;line-height:1.55;}
.x-pcard .ts-ai__checks{margin-top:20px;}
.x-pcard .ts-ai__checks li{font-size:15px;}
.x-pcard--recurring{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}

.x-price__note{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;
}
.x-pnote{
  display:flex;gap:12px;align-items:flex-start;
  padding:18px 20px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);
}
.x-pnote svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:1px;}
.x-pnote b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:3px;}
.x-pnote span{font-size:13.5px;color:var(--ink2);line-height:1.5;}
.x-price__foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;
  font-size:14.5px;color:var(--ink2);
}
.x-price__foot .ts-maple{width:16px;height:16px;}
@media (max-width:820px){.x-price{grid-template-columns:1fr;}.x-price__note{grid-template-columns:1fr;}}

/* ---------------- Integrations strip (inside Modules) ---------------- */
.x-integ{
  margin-top:30px;padding:22px 26px;border:1.5px solid var(--line);border-radius:18px;
  background:var(--surface);display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.x-integ__lead{font-size:15px;color:var(--ink2);line-height:1.5;max-width:34ch;}
.x-integ__lead b{color:var(--ink);font-weight:800;}
.x-integ__names{display:flex;flex-wrap:wrap;gap:9px;flex:1;min-width:240px;}
.x-integ__chip{
  font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.01em;
  border:1.5px solid var(--line2);border-radius:100px;padding:6px 14px;background:var(--bg);
  white-space:nowrap;
}
[data-theme="dark"] .x-integ__chip{background:var(--surface2);}

/* ---------------- National footprint chips (final CTA) ---------------- */
.x-footprint{
  display:flex;align-items:center;justify-content:center;gap:10px 12px;flex-wrap:wrap;
  margin:30px auto 0;max-width:760px;
}
.x-footprint__lbl{
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  width:100%;text-align:center;margin-bottom:2px;
}
.x-footprint__prov{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--accent);
  border:1.5px solid color-mix(in srgb,var(--accent) 38%,var(--line2));border-radius:100px;
  padding:7px 16px;background:var(--accent-tint);
}
.x-footprint__prov .ts-maple{width:13px;height:13px;}

/* ---------------- Certifications row (Sovereign trust strip) ---------------- */
.x-certs{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;
}
.x-cert{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:12.5px;color:var(--sov-ink2);line-height:1.3;
  border:1.5px solid var(--sov-line);border-radius:100px;padding:6px 14px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}
.x-cert b{font-weight:800;color:var(--sov-hl);font-size:13px;letter-spacing:-.01em;}

/* Gartner recognition line (distinct from certifications) */
.x-gartner{
  display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 16px;
  border-radius:12px;border:1.5px solid color-mix(in srgb,var(--accent) 32%,var(--sov-line));
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.x-gartner__badge{
  flex:none;font-weight:900;font-size:13px;letter-spacing:.01em;color:var(--accent);
  border:1.5px solid color-mix(in srgb,var(--accent) 45%,var(--sov-line));border-radius:8px;
  padding:5px 11px;background:color-mix(in srgb,var(--accent) 12%,transparent);white-space:nowrap;
}
.x-gartner__txt{font-size:14px;line-height:1.5;color:var(--sov-hl);}
.x-gartner__txt b{font-weight:800;}
.x-trust__note{margin:14px 0 0;font-size:11px;line-height:1.45;color:var(--sov-ink2);opacity:.8;}

/* ---------------- Hero portal launcher (V3) ---------------- */
.x-portal-live{position:relative;cursor:pointer;}
.x-portal-hint{
  position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(7,20,32,.30),rgba(7,20,32,.50));
  opacity:0;transition:opacity .25s ease;
}
.x-portal-live:hover .x-portal-hint,
.x-portal-live:focus-visible .x-portal-hint{opacity:1;}
.x-portal-hint__pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ts-blue);color:#fff;font-weight:800;font-size:16px;letter-spacing:-.01em;
  padding:13px 24px;border-radius:100px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  transform:translateY(8px) scale(.97);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] .x-portal-hint__pill{background:var(--accent);color:var(--accent-ink);}
.x-portal-live:hover .x-portal-hint__pill,
.x-portal-live:focus-visible .x-portal-hint__pill{transform:none;}
@media (max-width:760px){
  .x-portal-hint__pill{font-size:22px;padding:16px 30px;gap:12px;}
  .x-portal-hint__pill svg{width:24px;height:24px;}
}
/* touch devices have no hover — show the hint by default so users know it's tappable */
@media (hover:none){
  .x-portal-hint{opacity:1;background:linear-gradient(180deg,rgba(7,20,32,.15),rgba(7,20,32,.35));}
  .x-portal-hint__pill{transform:none;}
}

/* full-screen demo stage (cloned hero mockup, scaled to fit) */
.x-portal-stage{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;opacity:0;transition:opacity .3s ease;
}
.x-portal-stage.is-open{opacity:1;}
.x-portal-bar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);
}
.x-portal-bar__label{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--ink2);}
.x-portal-bar__label .ts-maple{fill:var(--ts-red);}
.x-portal-zoom{display:inline-flex;align-items:center;gap:2px;margin-left:auto;margin-right:4px;background:var(--bg);border:1.5px solid var(--line2);border-radius:10px;padding:2px;}
.x-portal-zbtn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:18px;font-weight:700;line-height:1;color:var(--ink2);background:none;border:none;border-radius:8px;cursor:pointer;}
.x-portal-zbtn:hover{background:var(--surface2);color:var(--accent);}
.x-portal-zval{min-width:46px;height:30px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);background:none;border:none;border-radius:8px;cursor:pointer;}
.x-portal-zval:hover{background:var(--surface2);color:var(--accent);}
.x-portal-exit{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);
  font-weight:700;font-size:14px;border-radius:100px;padding:9px 18px;font-family:inherit;
  transition:border-color .18s,color .18s;
}
.x-portal-exit:hover{border-color:var(--accent);color:var(--accent);}
.x-portal-screen{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px;min-height:0;}
.x-portal-fit{position:relative;flex:none;}
.x-portal-clone{transform-origin:top left;position:absolute;top:0;left:0;width:760px;}
[data-theme="dark"] .x-portal-clone .tsapp{--surface:#13293E;--surface2:#0F2336;--line:#264764;--line2:#315677;}

/* --- drawn portal panel views (Account / eBills / Events) --- */
.x-pv-tag{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ts-orange);background:color-mix(in srgb,var(--ts-orange) 16%,transparent);border-radius:100px;padding:2px 7px;margin-left:6px;}
.x-pv-chev{margin-left:auto;width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(-45deg);flex:none;}
.x-pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 14px;}
.x-pv-stat{background:var(--surface2);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;}
.x-pv-statn{font-size:24px;font-weight:900;color:var(--accent);letter-spacing:-.02em;}
.x-pv-statl{font-size:12px;color:var(--ink3);margin-top:2px;}
.x-pv-acct .tsapp__appname{display:flex;align-items:center;}
/* eBills */
.x-pv-ebhero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 18%,var(--surface)),var(--surface));border:1.5px solid color-mix(in srgb,var(--accent) 30%,var(--line));}
.x-pv-eblbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);}
.x-pv-ebnum{font-size:34px;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin-top:2px;}
.x-pv-ebsub{font-size:13px;color:var(--ink2);margin-top:3px;}
.x-pv-ebrows{display:flex;flex-direction:column;}
.x-pv-ebrow{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--line);}
.x-pv-ebrow:first-child{border-top:none;}
.x-pv-ebmain{flex:1;min-width:0;}
.x-pv-ebtitle{font-weight:700;font-size:14.5px;color:var(--ink);}
.x-pv-ebdesc{font-size:12.5px;color:var(--ink3);margin-top:1px;}
.x-pv-ebamt{font-weight:900;font-size:15px;color:var(--ts-red-ink);}
.x-pv-ebamt.is-zero{color:var(--ts-green-ink);}
.tsapp__btn.is-done{background:color-mix(in srgb,var(--ts-green) 18%,transparent);color:var(--ts-green-ink);}
/* Events */
.x-pv-evgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.x-pv-event{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;}
.x-pv-evtop{display:flex;align-items:center;justify-content:space-between;}
.x-pv-evcat{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.x-pv-evclose{font-size:10.5px;font-weight:800;color:var(--ts-orange);}
.x-pv-evtitle{font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink);}
.x-pv-evmeta{font-size:12.5px;color:var(--ink3);}
.x-pv-evbtn{align-self:flex-start;margin-top:8px;}
/* Transactions feed */
.x-pv-txsub{display:block;font-size:11px;color:var(--ink3);margin-top:1px;}
.x-pv-txamt{font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap;}
.x-pv-txamt.is-due{color:var(--ts-red);}
/* Service requests */
.x-pv-srrows{display:flex;flex-direction:column;}
.x-pv-srrow{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--line);}
.x-pv-srrow:first-child{border-top:none;}
.x-pv-srmain{flex:1;min-width:0;}
.x-pv-srtitle{font-weight:700;font-size:14.5px;color:var(--ink);}
.x-pv-srchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;align-items:center;}
.x-pv-srstatus{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ts-green);background:color-mix(in srgb,var(--ts-green) 15%,transparent);border-radius:100px;padding:2px 9px;}
.x-pv-srstatus.is-closed{color:var(--ink3);background:color-mix(in srgb,var(--ink3) 14%,transparent);}
.x-pv-srtag{font-size:11px;color:var(--ink2);border:1px solid var(--line2);border-radius:100px;padding:2px 9px;}
.x-pv-srmeta{text-align:right;flex:none;}
.x-pv-srdate{font-size:12px;color:var(--ink2);}
.x-pv-srid{font-size:11px;color:var(--ink3);}
/* Employee */
.x-pv-bal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 14px;}
.x-pv-balc{background:var(--surface2);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;}
.x-pv-baln{font-size:22px;font-weight:900;color:var(--accent);letter-spacing:-.02em;}
.x-pv-ball{font-size:12px;color:var(--ink3);margin-top:2px;}
.x-pv-emprow{display:flex;align-items:center;gap:10px;padding:11px 4px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);}
.x-pv-emprow:first-child{border-top:none;}
.x-pv-empok{margin-left:auto;font-size:11px;font-weight:800;color:var(--ts-green);}
/* ---- Financial: full desktop mERP window ---- */
.x-portal-fit.is-finmode{box-shadow:0 30px 80px -20px rgba(0,0,0,.5);border-radius:12px;}
.x-mwin{position:absolute;top:0;left:0;transform-origin:top left;width:1180px;background:var(--bg);border:1px solid var(--line2);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;font-size:15px;}
.x-mwin-titlebar{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line);}
.x-mwin-temblem{display:flex;align-items:center;}
.x-mwin-titletext{font-size:14px;font-weight:600;color:var(--ink2);}
.x-mwin-wc{margin-left:auto;display:flex;align-items:center;gap:20px;color:var(--ink3);}
.x-mwin-wc .wc-min{width:13px;height:2px;background:currentColor;display:block;}
.x-mwin-wc .wc-max{width:12px;height:12px;border:2px solid currentColor;border-radius:2px;display:block;}
.x-mwin-wc .wc-close{font-size:16px;line-height:1;}
.x-mwin-menubar{display:flex;align-items:center;gap:26px;height:38px;padding:0 18px;background:var(--surface);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2);}
.x-mwin-body{display:flex;align-items:stretch;}
.x-mwin-rail{flex:none;width:96px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:20px;}
.x-mwin-railitem{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink2);width:100%;padding:4px 0;}
.x-mwin-railitem:hover{color:var(--accent);}
.x-mwin-railic{position:relative;display:flex;align-items:center;justify-content:center;}
.x-mwin-railbdg{position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;border-radius:9px;background:var(--ts-red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.x-mwin-railspacer{flex:1;}
.x-mwin-logout{color:var(--ink3);}
.x-mwin-main{flex:1;min-width:0;padding:26px 30px;}
.x-mwin-foot{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 16px;background:var(--surface);border-top:1px solid var(--line);font-size:12px;color:var(--ink3);}
.x-mwin-status{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink2);}
.x-mwin-statusdot{width:8px;height:8px;border-radius:50%;background:var(--ts-green);}
/* desktop module cards */
.x-mwin-card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:22px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s;}
.x-mwin-card:hover{border-color:var(--accent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 40%,transparent),var(--shadow-2);transform:translateY(-2px);}
.x-mwin-card.is-locked{opacity:.55;}
.x-mwin-card.is-locked .x-mwin-cardname{color:var(--ink3);}
.x-mwin-ic{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:13px;padding:6px;box-shadow:0 1px 4px rgba(0,0,0,.18);}
.x-mwin-card.is-locked .x-mwin-ic{filter:grayscale(1);}
.x-mwin-cardname{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.25;}
.x-mwin-lock{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--surface2);border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--ts-orange);}
/* the financial grid reuses .x-fin-grid/.x-fin-wrap/.x-fin-news/.x-fin-top from below */
/* Financial main menu (desktop refreshed grid) */
.x-fin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.x-fin-brand{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--accent);display:inline-flex;align-items:center;}
.x-fin-logo{height:34px;width:auto;color:var(--accent);}
.x-fin-search{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink3);border:1.5px solid var(--line2);border-radius:10px;padding:7px 12px;background:var(--surface2);}
.x-fin-wrap{display:flex;gap:16px;align-items:flex-start;}
.x-fin-grid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.x-fin-card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:20px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;transition:border-color .18s,transform .18s,box-shadow .18s;}
.x-fin-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-2);}
.x-fin-card.is-locked{opacity:.5;}
.x-fin-card.is-locked .x-fin-ic{filter:grayscale(1);}
.x-fin-lock{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--surface2);border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--ink3);}
.x-fin-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none;}
.x-fin-ic .d{width:18px;height:18px;border-radius:4px;transform:rotate(45deg);display:block;}
.x-fin-ic.is-blue{background:color-mix(in srgb,var(--ts-blue) 16%,transparent);}
.x-fin-ic.is-blue .d{background:var(--ts-blue);}
.x-fin-ic.is-green{background:color-mix(in srgb,var(--ts-green) 16%,transparent);}
.x-fin-ic.is-green .d{background:var(--ts-green);}
.x-fin-ic.is-red{background:color-mix(in srgb,var(--ts-red) 16%,transparent);}
.x-fin-ic.is-red .d{background:var(--ts-red);}
.x-fin-ic.is-orange{background:color-mix(in srgb,var(--ts-orange) 16%,transparent);}
.x-fin-ic.is-orange .d{background:var(--ts-orange);}
.x-fin-name{font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.25;}
.x-fin-news{flex:none;width:200px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px 16px;}
.x-fin-newshd{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:12px;}
.x-fin-newsitem{padding:10px 0;border-top:1px solid var(--line);}
.x-fin-newsitem:first-of-type{border-top:none;padding-top:0;}
.x-fin-newst{font-weight:700;font-size:13px;color:var(--ink);line-height:1.3;}
.x-fin-newsm{font-size:11.5px;color:var(--ink3);margin-top:3px;}
.x-fin-newslink{display:inline-block;margin-top:12px;font-weight:700;font-size:13px;color:var(--accent);cursor:pointer;}
@media (max-width:560px){.x-fin-grid{grid-template-columns:repeat(2,1fr);}.x-fin-news{display:none;}}
/* ---- Accounts Receivable module window ---- */
.x-arwin{width:1180px;}
.x-ar-menubar span{cursor:pointer;transition:color .15s;}
.x-ar-menubar span:hover{color:var(--accent);}
.x-ar-menubar .x-ar-menuclose{margin-left:6px;}
.x-ar-toolbar{display:flex;align-items:center;gap:14px;height:60px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line);}
.x-ar-applauncher{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1.5px solid var(--line2);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink2);}
.x-ar-applauncher:hover{border-color:var(--accent);color:var(--accent);}
.x-ar-search{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line2);border-radius:10px;padding:8px 12px;color:var(--ink3);}
.x-ar-searchbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#1f5b8f;border:none;border-radius:10px;color:#fff;cursor:pointer;transition:filter .15s;}
.x-ar-searchbtn:hover{filter:brightness(1.12);}
.x-ar-kbd{font-size:11px;font-weight:700;background:var(--surface2);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--ink3);}
.x-ar-tabs{display:inline-flex;align-items:center;gap:0;background:var(--surface);border:1.5px solid var(--line2);border-radius:12px;padding:3px;}
.x-ar-tab{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);background:none;border:none;border-radius:9px;padding:7px 13px;cursor:pointer;transition:background .15s,color .15s;}
.x-ar-tab:hover{color:var(--accent);}
.x-ar-tab.is-active{background:var(--accent);color:#fff;}
.x-ar-toolspacer{flex:1;}
.x-ar-tool{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink2);background:none;border:none;cursor:pointer;transition:color .15s;}
.x-ar-tool:hover{color:var(--accent);}
.x-ar-body{min-height:520px;background:var(--surface2);display:flex;}
.x-ar-body:has(.x-cd-detail){background:var(--bg);}
.x-cd-detail{flex:1;min-width:0;display:flex;flex-direction:column;}
/* empty state */
.x-ar-empty{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 20px;gap:0;}
.x-ar-emptyic{position:relative;width:62px;height:62px;border-radius:16px;background:color-mix(in srgb,var(--accent) 12%,transparent);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:22px;}
.x-ar-emptybadge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.x-ar-emptyh{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.x-ar-emptyp{font-size:14.5px;color:var(--ink2);line-height:1.55;margin:12px 0 26px;max-width:440px;}
.x-ar-emptybtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.x-ar-btn{font-family:inherit;font-weight:700;font-size:14px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);border-radius:10px;padding:11px 20px;cursor:pointer;transition:border-color .15s,color .15s,transform .15s;}
.x-ar-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.x-ar-btn--primary{background:var(--accent);color:#fff;border-color:transparent;}
.x-ar-btn--primary:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px);}
.x-ar-btn--receipt{margin-top:14px;}
/* records table view */
.x-ar-recview{flex:1;min-width:0;display:flex;flex-direction:column;}
.x-ar-rechead{display:flex;align-items:center;gap:14px;padding:16px 24px;background:var(--bg);border-bottom:1px solid var(--line);}
.x-ar-rectitle{font-size:17px;font-weight:800;color:var(--ink);}
.x-ar-recfind{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink3);background:var(--surface2);border:1.5px solid var(--line2);border-radius:9px;padding:7px 12px;}
.x-ar-recnew{margin-left:auto;font-family:inherit;font-weight:700;font-size:13.5px;color:#fff;background:var(--accent);border:none;border-radius:9px;padding:8px 16px;cursor:pointer;}
.x-ar-recnew:hover{filter:brightness(1.08);}
.x-ar-tablewrap{flex:1;overflow:auto;}
.x-ar-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.x-ar-table thead th{position:sticky;top:0;text-align:left;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);background:var(--surface);padding:12px 24px;border-bottom:1.5px solid var(--line);}
.x-ar-table tbody td{padding:13px 24px;border-bottom:1px solid var(--line);color:var(--ink);}
.x-ar-table tbody tr{cursor:pointer;transition:background .12s;}
.x-ar-table tbody tr:hover{background:var(--surface);}
.x-ar-table tbody tr.is-sel{background:color-mix(in srgb,var(--accent) 9%,transparent);}
.x-ar-status{font-weight:700;}
.x-ar-status--current,.x-ar-status--active{color:var(--ts-green-ink);}
.x-ar-status--due,.x-ar-status--estread{color:var(--ts-orange-ink);}
.x-ar-status--overdue{color:var(--ts-red-ink);}
.x-ar-statusdiamond{width:9px;height:9px;background:var(--ts-green);transform:rotate(45deg);display:inline-block;}
@media (max-width:760px){.x-ar-tool span{display:none;}.x-ar-tabs{flex-wrap:wrap;}}
/* ---- Maintain Customer detail ---- */
.x-cdwin{width:1180px;}
.x-cd-header{display:flex;align-items:center;gap:18px;padding:0 18px;height:64px;background:linear-gradient(180deg,#1f5b8f,#184a78);color:#fff;}
.x-cd-srch{display:inline-flex;align-items:center;gap:8px;}
.x-cd-srchin{font-family:inherit;font-size:14px;font-weight:600;width:150px;border:none;border-radius:7px;padding:9px 11px;background:#fff;color:#16324a;}
.x-cd-srchbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:7px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;}
.x-cd-srchbtn:hover{background:rgba(255,255,255,.26);}
.x-cd-go{font-family:inherit;font-weight:800;font-size:13.5px;border:none;border-radius:7px;padding:0 16px;height:36px;background:#e08a17;color:#fff;cursor:pointer;}
.x-cd-go:hover{filter:brightness(1.07);}
.x-cd-headtitle{display:flex;flex-direction:column;line-height:1.25;}
.x-cd-headtitle b{font-size:16px;font-weight:800;}
.x-cd-headtitle span{font-size:12.5px;color:rgba(255,255,255,.8);}
.x-cd-headbtns{margin-left:auto;display:flex;gap:10px;}
.x-cd-headbtn{font-family:inherit;font-weight:600;font-size:13px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 14px;cursor:pointer;}
.x-cd-headbtn:hover{background:rgba(255,255,255,.22);}
.x-cd-tabs{display:flex;align-items:center;gap:24px;height:46px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;}
.x-cd-tab{position:relative;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;padding:14px 0;transition:color .15s;}
.x-cd-tab:hover{color:var(--accent);}
.x-cd-tab.is-active{color:var(--accent);}
.x-cd-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--accent);border-radius:2px;}
.x-cd-body{display:flex;gap:26px;padding:26px 28px;background:var(--bg);min-height:472px;}
.x-cd-form{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px;max-width:760px;}
.x-cd-row{display:flex;align-items:center;gap:14px;}
.x-cd-lbl{flex:none;width:108px;text-align:right;font-size:13.5px;font-weight:600;color:var(--ink2);}
.x-cd-lbl2{font-size:13.5px;font-weight:600;color:var(--ink2);margin-left:6px;}
.x-cd-lbl3{font-size:13.5px;font-weight:600;color:var(--ink2);}
.x-cd-inwrap{flex:1;min-width:0;}
.x-cd-in{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);border-radius:9px;padding:10px 13px;}
.x-cd-in:focus{outline:none;border-color:var(--accent);}
.x-cd-in.is-ro{background:var(--surface2);color:var(--ink2);max-width:180px;}
.x-cd-addr{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
.x-cd-provrow{flex:1;display:flex;align-items:center;gap:10px;}
.x-cd-sel{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);border-radius:9px;padding:10px 12px;cursor:pointer;min-width:72px;justify-content:space-between;}
.x-cd-in--sm{max-width:140px;}
.x-cd-telrow{flex:1;display:flex;align-items:center;gap:10px;}
.x-cd-in--tel{max-width:200px;}
.x-cd-side{flex:none;width:300px;display:flex;flex-direction:column;gap:16px;}
.x-cd-card{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;}
.x-cd-cardh{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px;}
.x-cd-setrow{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14px;color:var(--ink);cursor:pointer;}
.x-cd-setrow.is-dis{color:var(--ink3);cursor:default;}
.x-cd-chk{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);background:var(--surface2);display:flex;align-items:center;justify-content:center;}
.x-cd-chk.is-on{background:var(--accent);border-color:transparent;}
.x-cd-chk.is-on.is-dis{background:color-mix(in srgb,var(--accent) 45%,var(--surface2));}
.x-cd-balcard{display:flex;align-items:center;justify-content:space-between;}
.x-cd-ballbl{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);}
.x-cd-balval{font-size:22px;font-weight:800;color:var(--ink);}
.x-cd-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--surface);border-top:1px solid var(--line);}
.x-cd-footspacer{flex:1;}
.x-cd-btn{font-family:inherit;font-weight:700;font-size:13.5px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);border-radius:9px;padding:9px 16px;cursor:pointer;transition:border-color .15s,color .15s;}
.x-cd-btn:hover{border-color:var(--accent);color:var(--accent);}
.x-cd-btn--primary{background:var(--accent);color:#fff;border-color:transparent;}
.x-cd-btn--primary:hover{color:#fff;filter:brightness(1.08);}
.x-cd-btn--ghost{color:var(--ink2);}
@media (max-width:900px){.x-cd-body{flex-direction:column;}.x-cd-side{width:100%;}}
/* AR detail tab panels */
.x-cd-panel{flex:1;min-width:0;}
.x-cd-twocol{display:flex;gap:26px;}
.x-cd-twocol .x-cd-form{flex:1;}
.x-cd-tablewrap{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);}
.x-cd-tablewrap .x-ar-table thead th{background:var(--surface2);padding:11px 18px;}
.x-cd-tablewrap .x-ar-table tbody td{padding:12px 18px;}
.x-cd-aging{display:flex;gap:12px;margin-bottom:18px;}
.x-cd-agecell{flex:1;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
.x-cd-agecell.is-total{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
.x-cd-agelbl{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);}
.x-cd-ageval{font-size:18px;font-weight:800;color:var(--ink);}
.x-cd-notes{display:flex;flex-direction:column;gap:12px;}
.x-cd-noteadd{display:flex;gap:10px;align-items:center;margin-bottom:4px;}
.x-cd-noteadd .x-cd-in{flex:1;}
.x-cd-note{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px 18px;}
.x-cd-notemeta{font-size:12px;font-weight:700;color:var(--ink3);margin-bottom:6px;}
.x-cd-notebody{font-size:14px;color:var(--ink);line-height:1.5;}
/* ---- AR Search Engine ---- */
.x-se{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);}
.x-se-bar{background:linear-gradient(180deg,#1f5b8f,#184a78);color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.03em;padding:11px 20px;}
.x-se-tablewrap{flex:1;overflow:auto;border-bottom:1px solid var(--line);}
.x-se-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.x-se-table thead th{position:sticky;top:0;text-align:left;font-weight:700;font-size:11.5px;letter-spacing:.04em;color:var(--ink3);background:var(--surface);padding:11px 18px;border-bottom:1.5px solid var(--line);white-space:nowrap;}
.x-se-table thead th.x-se-num{text-align:right;}
.x-se-funnel{color:var(--ink3);opacity:.55;vertical-align:middle;margin-left:3px;}
.x-se-table tbody td{padding:11px 18px;border-bottom:1px solid var(--line);color:var(--ink);}
.x-se-table tbody tr{cursor:pointer;transition:background .12s;}
.x-se-table tbody tr:hover{background:var(--surface);}
.x-se-table tbody tr.is-sel{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.x-se-code{font-weight:700;color:var(--accent);}
.x-se-num{text-align:right;font-variant-numeric:tabular-nums;}
.x-se-owing{color:var(--ts-orange);font-weight:700;}
.x-se-pager{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--line);}
.x-se-pagebtns{display:flex;gap:6px;}
.x-se-pg{min-width:34px;height:34px;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink2);background:var(--surface);border:1.5px solid var(--line2);border-radius:8px;cursor:pointer;}
.x-se-pg:hover{border-color:var(--accent);color:var(--accent);}
.x-se-pg.is-active{background:#e08a17;border-color:transparent;color:#fff;}
.x-se-pginfo{font-size:13px;color:var(--ink2);}
.x-se-filters{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:20px;}
.x-se-radios{display:flex;align-items:center;gap:20px;}
.x-se-radio{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;}
.x-se-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);display:inline-block;position:relative;}
.x-se-radio.is-on .x-se-dot{border-color:var(--accent);}
.x-se-radio.is-on .x-se-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);}
.x-se-fontsize{display:flex;align-items:center;gap:10px;}
.x-se-fa-sm{font-size:12px;font-weight:700;color:var(--ink3);}
.x-se-fa-lg{font-size:19px;font-weight:700;color:var(--ink3);}
.x-se-slider{position:relative;width:150px;height:18px;display:flex;align-items:center;}
.x-se-slidertrack{position:absolute;left:0;right:0;height:4px;background:var(--line2);border-radius:2px;}
.x-se-sliderknob{position:absolute;left:28%;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25);}
.x-se-searchpane{display:flex;align-items:flex-start;gap:22px;padding:6px 18px 16px;}
.x-se-searchmain{flex:1;min-width:0;}
.x-se-tabs{display:flex;gap:4px;}
.x-se-tab{font-size:13.5px;font-weight:600;color:var(--ink2);padding:9px 16px;border:1px solid var(--line2);border-bottom:none;border-radius:9px 9px 0 0;background:var(--surface2);cursor:pointer;}
.x-se-tab.is-active{background:var(--surface);color:var(--accent);border-color:var(--line);}
.x-se-searchbox{border:1.5px solid var(--line);border-radius:0 12px 12px 12px;padding:14px 16px;background:var(--surface);}
.x-se-searchlbl{font-size:13px;color:var(--ink2);margin-bottom:9px;}
.x-se-searchlbl b{color:var(--accent);}
.x-se-input{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:2px solid var(--accent);border-radius:9px;padding:11px 13px;}
.x-se-input:focus{outline:none;}
.x-se-searchbtns{flex:none;width:170px;display:flex;flex-direction:column;gap:10px;}
.x-se-btn{font-family:inherit;font-weight:700;font-size:13.5px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);border-radius:9px;padding:11px 16px;cursor:pointer;transition:border-color .15s,color .15s;}
.x-se-btn:hover{border-color:var(--accent);color:var(--accent);}
.x-se-btn--primary{background:#1f5b8f;border-color:transparent;color:#fff;font-size:14px;padding:13px;}
.x-se-btn--primary:hover{color:#fff;filter:brightness(1.1);}
.x-se-foot{display:flex;align-items:center;gap:18px;padding:14px 18px;background:var(--surface);border-top:1px solid var(--line);}
.x-se-splitlbl{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--ink3);}
.x-se-footspacer{flex:1;}
@media (max-width:760px){.x-se-searchpane{flex-direction:column;}.x-se-searchbtns{width:100%;flex-direction:row;flex-wrap:wrap;}}
.x-portal-disclaimer{position:fixed;right:18px;bottom:14px;z-index:5;font-size:11.5px;color:var(--ink3);opacity:.6;letter-spacing:.01em;pointer-events:none;}
/* ---- Super search command palette ---- */
.x-sup{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;}
.x-sup-backdrop{position:absolute;inset:0;background:rgba(8,16,28,.5);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s;}
.x-sup.is-open .x-sup-backdrop{opacity:1;}
.x-sup-panel{position:relative;margin-top:10vh;width:min(640px,92vw);max-height:74vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line2);border-radius:16px;box-shadow:0 40px 100px -24px rgba(0,0,0,.6);overflow:hidden;transform:translateY(-10px) scale(.98);opacity:0;transition:transform .2s,opacity .2s;}
.x-sup.is-open .x-sup-panel{transform:none;opacity:1;}
.x-sup-search{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--ink3);}
.x-sup-input{flex:1;min-width:0;font-family:inherit;font-size:16px;color:var(--ink);background:none;border:none;outline:none;}
.x-sup-input::placeholder{color:var(--ink3);}
.x-sup-esc{font-family:inherit;font-size:11px;font-weight:700;color:var(--ink3);background:var(--surface2);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;cursor:pointer;}
.x-sup-esc:hover{border-color:var(--accent);color:var(--accent);}
.x-sup-list{flex:1;overflow:auto;padding:8px;}
.x-sup-grouphd{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);padding:12px 12px 6px;}
.x-sup-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:inherit;background:none;border:none;border-radius:10px;padding:11px 12px;cursor:pointer;color:var(--ink);}
.x-sup-item.is-active{background:color-mix(in srgb,var(--accent) 10%,transparent);}
.x-sup-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink2);}
.x-sup-item.is-active .x-sup-ic{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.x-sup-label{flex:1;min-width:0;font-size:15px;font-weight:600;display:flex;flex-direction:column;gap:1px;}
.x-sup-sub{font-size:12.5px;font-weight:500;color:var(--ink3);}
.x-sup-run{flex:none;font-size:12.5px;color:var(--ink3);}
.x-sup-empty{padding:32px;text-align:center;color:var(--ink3);font-size:14px;}
.x-sup-foot{display:flex;gap:22px;padding:12px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink3);}
.x-sup-foot span{display:inline-flex;align-items:center;gap:7px;}
.x-sup-key{font-size:11px;font-weight:700;color:var(--ink2);background:var(--surface2);border:1px solid var(--line2);border-radius:5px;padding:2px 6px;min-width:18px;text-align:center;}
/* book-a-demo gate prompt */
.x-portal-prompt{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(7,20,32,.55);}
.x-portal-promptcard{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:28px;max-width:380px;text-align:center;box-shadow:var(--shadow-3);}
.x-portal-prompttitle{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.x-portal-promptsub{font-size:14px;color:var(--ink2);margin-top:8px;line-height:1.5;}
.x-portal-promptactions{display:flex;gap:10px;justify-content:center;margin-top:20px;}
.ts-btnish{font-family:inherit;font-weight:700;font-size:14px;border-radius:100px;padding:10px 20px;cursor:pointer;border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);transition:border-color .18s,color .18s;}
.ts-btnish:hover{border-color:var(--accent);color:var(--accent);}
.ts-btnish.is-primary{background:var(--ts-blue);color:#fff;border-color:transparent;}
.ts-btnish.is-primary:hover{background:var(--ts-blue-mid,var(--accent));color:#fff;}
[data-theme="dark"] .ts-btnish.is-primary{background:var(--accent);color:var(--accent-ink);}

/* desktop rail logo: let the animated wordmark fill the rail width (was capped small) */
.x-rail__logo{padding-left:6px;padding-right:6px;}
.x-rail__logo .ts-logo-anim{max-width:216px;}

/* ---------------- Sovereign jurisdiction switch: livelier & more interactive (V3) ---------------- */
/* segmented control micro-interactions */
.ts-juris__switch button{transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;}
.ts-juris__switch button:hover{transform:translateY(-1px);}
.ts-juris__switch button.is-on{transform:translateY(-1px);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);}

/* connector labels get a flowing line — data being pulled across the border in risk modes */
.ts-juris__link{position:relative;}
.ts-juris__link::after{
  content:"";display:block;height:2px;margin-top:7px;border-radius:2px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);
  background-size:200% 100%;opacity:.8;
}
.ts-juris--sealed .ts-juris__link::after{background:currentColor;opacity:.45;}

@media (prefers-reduced-motion: no-preference){
  /* the active mode's nodes & links animate in, lightly staggered by DOM order */
  .ts-juris--exposed .ts-juris__diagram > [data-when="exposed"],
  .ts-juris--layered .ts-juris__diagram > [data-when="layered"],
  .ts-juris--world   .ts-juris__diagram > [data-when="world"],
  .ts-juris--sealed  .ts-juris__diagram > [data-when="sealed"]{
    animation:x-juris-in .5s cubic-bezier(.22,1,.36,1) both;
  }
  .ts-juris__diagram > [data-when]:nth-child(2){animation-delay:.02s;}
  .ts-juris__diagram > [data-when]:nth-child(3){animation-delay:.06s;}
  .ts-juris__diagram > [data-when]:nth-child(4){animation-delay:.10s;}
  .ts-juris__diagram > [data-when]:nth-child(5){animation-delay:.10s;}
  .ts-juris__diagram > [data-when]:nth-child(6){animation-delay:.14s;}
  .ts-juris__diagram > [data-when]:nth-child(7){animation-delay:.18s;}
  .ts-juris__diagram > [data-when]:nth-child(8){animation-delay:.22s;}
  .ts-juris__diagram > [data-when]:nth-child(9){animation-delay:.14s;}
  .ts-juris__diagram > [data-when]:nth-child(10){animation-delay:.20s;}
  .ts-juris__diagram > [data-when]:nth-child(11){animation-delay:.26s;}
  .ts-juris__diagram > [data-when]:nth-child(12){animation-delay:.32s;}
  .ts-juris__diagram > [data-when]:nth-child(13){animation-delay:.14s;}
  .ts-juris__diagram > [data-when]:nth-child(14){animation-delay:.20s;}
  .ts-juris__diagram > [data-when]:nth-child(15){animation-delay:.26s;}
  /* flowing line in risk modes (data crossing); steady when sovereign */
  .ts-juris--exposed .ts-juris__link::after,
  .ts-juris--layered .ts-juris__link::after,
  .ts-juris--world   .ts-juris__link::after{animation:x-flowline 1.5s linear infinite;}
  /* status dots pulse — red alarm for risk, green heartbeat for safe, amber for warn */
  .ts-juris__node.risk .dotsq{animation:x-pulse-risk 1.8s ease-out infinite;}
  .ts-juris__node.safe .dotsq{animation:x-pulse-safe 1.8s ease-out infinite;}
  .ts-juris__node.warn .dotsq{animation:x-pulse-warn 1.8s ease-out infinite;}
}
@keyframes x-juris-in{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
/* pause a section's looping animations while it is fully scrolled off-screen
   (JS toggles .ts-anim-off via IntersectionObserver) — avoids off-screen motion
   distracting further down the page */
[data-pause-offscreen].ts-anim-off,
[data-pause-offscreen].ts-anim-off *,
[data-pause-offscreen].ts-anim-off *::before,
[data-pause-offscreen].ts-anim-off *::after{animation-play-state:paused !important;}
@keyframes x-flowline{to{background-position:-200% 0;}}
@keyframes x-pulse-risk{0%{box-shadow:0 0 0 0 rgba(224,58,62,.55);}70%{box-shadow:0 0 0 9px rgba(224,58,62,0);}100%{box-shadow:0 0 0 0 rgba(224,58,62,0);}}
@keyframes x-pulse-safe{0%{box-shadow:0 0 0 0 rgba(45,163,67,.55);}70%{box-shadow:0 0 0 9px rgba(45,163,67,0);}100%{box-shadow:0 0 0 0 rgba(45,163,67,0);}}
@keyframes x-pulse-warn{0%{box-shadow:0 0 0 0 rgba(228,141,26,.55);}70%{box-shadow:0 0 0 9px rgba(228,141,26,0);}100%{box-shadow:0 0 0 0 rgba(228,141,26,0);}}

/* the right-hand verdict reveals AFTER the left diagram has populated, badge → heading → body */
@media (prefers-reduced-motion: no-preference){
  .ts-juris--exposed .ts-juris__verdict > [data-when="exposed"] > *,
  .ts-juris--layered .ts-juris__verdict > [data-when="layered"] > *,
  .ts-juris--world   .ts-juris__verdict > [data-when="world"]   > *,
  .ts-juris--sealed  .ts-juris__verdict > [data-when="sealed"]  > *{
    animation:x-juris-in .5s cubic-bezier(.22,1,.36,1) both;
  }
  .ts-juris__verdict > [data-when] > *:nth-child(1){animation-delay:.5s;}
  .ts-juris__verdict > [data-when] > *:nth-child(2){animation-delay:.62s;}
  .ts-juris__verdict > [data-when] > *:nth-child(3){animation-delay:.74s;}
  .ts-juris__verdict > [data-when] > *:nth-child(n+4){animation-delay:.86s;}
}

/* ---------------- Triple-C hero chips: green "verified" checks (V3 only) ---------------- */
.ts-nots--yes span::before{color:var(--ts-green);}

/* ---------------- Rail: swap number → check on completion (V3 only) ---------------- */
.x-rail__ch .n{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:16px;transition:color .3s ease;
}
.x-rail__ch .n::after{
  content:"\2713";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.4);transform-origin:center;
  color:var(--ts-green);font-size:14px;font-weight:900;opacity:0;
  transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.x-rail__ch.is-done .n{color:transparent;}
.x-rail__ch.is-done .n::after{content:"\2713";opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------------- #1 keep the Ask FAB clear of the chapter dock on small screens ---------------- */
@media (max-width:1100px){
  .ts-chatfab{bottom:88px;}
  /* #4 anchors (Why sovereign, dock jumps) land clear of the fixed topbar */
  html{scroll-padding-top:80px;}
}

/* ---------------- Interactive module connection map ---------------- */
.x-modscroll{position:relative;}
.x-modscroll .ts-mod{position:relative;z-index:1;cursor:pointer;}
/* #3 click-to-trace affordance: faint accent outline on hover (when not already tracing) */
.x-modscroll:not(.is-tracing) .ts-mod:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 28%,transparent),var(--shadow-2)!important;
  transform:translateY(-3px);
}
/* ---------------- Intelligence carousel: swipe without selecting text ----------------
   Slides hold real (generated-on-the-fly) text; user-select:none stops the drag from
   highlighting it mid-swipe while keeping the content as live DOM text. */
.tsi-track,
.tsi-slide,
.tsi-track *{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  /* every slide descendant delegates panning to the carousel track (x) and the
     page (y) — without this, the overflow:hidden conversation window swallows
     swipes that start on it, blocking both the carousel and page scroll. */
  touch-action:pan-x pan-y;
}
.tsi-track{cursor:grab;}
.tsi-track:active{cursor:grabbing;}

/* ---------------- Consistent, interactive hover for EVERY module tile ----------------
   The trio (Work·People·Assets) shipped with a special 3D perspective "fan" + translateZ
   pop that the flat grid tiles didn't share. Flatten the trio and give all tiles the
   same lift so the whole map reacts identically. */
body[data-depth="on"] .x-modscroll .x-trio__cards{transform:none !important;perspective:none !important;}
body[data-depth="on"] .x-modscroll .x-trio__cards > .ts-mod:nth-child(1),
body[data-depth="on"] .x-modscroll .x-trio__cards > .ts-mod:nth-child(3),
body[data-depth="on"] .x-modscroll .x-trio__cards > .ts-mod:nth-child(5){transform:none !important;}
/* unified transition timing across all tiles */
.x-modscroll .ts-mod,
body[data-depth="on"] .x-modscroll .x-trio__cards > .ts-mod{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,opacity .3s ease !important;
}
/* unified hover (when not tracing) — flat grid tiles and trio tiles alike */
.x-modscroll:not(.is-tracing) .ts-mod:hover,
body[data-depth="on"] .x-modscroll:not(.is-tracing) .x-trio__cards > .ts-mod:hover,
.x-modscroll:not(.is-tracing) .ts-mod:focus-visible,
body[data-depth="on"] .x-modscroll:not(.is-tracing) .x-trio__cards > .ts-mod:focus-visible{
  transform:translateY(-6px) !important;
  border-color:var(--accent) !important;
  box-shadow:var(--shadow-2) !important;
}
/* keep behaviour consistent in tracing mode too (no rogue trio pop) */
.x-modscroll.is-tracing .x-trio__cards > .ts-mod:hover{transform:none !important;}

/* wire overlay — sits above cards so the flowing lines read clearly */
.x-modwire{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:6;overflow:visible;
}
.x-modwire path{
  fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:7 9;opacity:0;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 65%,transparent));
  transition:opacity .35s ease;
}
.x-modwire path.is-vis{opacity:.95;}
.x-modwire rect{fill:var(--accent);opacity:0;transition:opacity .3s ease;}
.x-modwire rect.is-vis{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .x-modwire path.is-vis{animation:x-modflow .9s linear infinite;}
}
@keyframes x-modflow{to{stroke-dashoffset:-16;}}

/* focus states once a module is selected */
.x-modscroll.is-tracing .ts-mod{opacity:.4;transition:opacity .3s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.x-modscroll.is-tracing .ts-mod.is-on,
.x-modscroll.is-tracing .ts-mod.is-link{opacity:1;}
.ts-mod.is-on{
  z-index:3;border-color:var(--accent)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent),var(--shadow-2)!important;
  transform:translateY(-4px);
}
.ts-mod.is-link{
  z-index:2;border-color:color-mix(in srgb,var(--accent) 60%,var(--line))!important;
  box-shadow:var(--shadow-2)!important;
}
.ts-mod--core.is-on{box-shadow:0 0 0 2px color-mix(in srgb,#fff 55%,transparent),var(--shadow-3)!important;}

/* caption / hint under the grid */
.x-modcap{
  display:flex;align-items:center;gap:10px;margin-top:18px;
  font-size:15px;color:var(--ink2);line-height:1.5;
}
.x-modcap--top{margin-top:30px;}
.x-modcap b{color:var(--accent);font-weight:800;}
.x-modcap__dot{
  flex:none;width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);
}
@media (prefers-reduced-motion: no-preference){
  .x-modcap__dot{animation:x-modpulse 2s ease-out infinite;}
}
@keyframes x-modpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);}
  70%{box-shadow:0 0 0 9px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}