/* TestLancer native buttons — presentation only.
   Additive overlay for existing .btn / .suite-btn / submit / filter / tab selectors.
   Does not change H Platinum, ID card chrome, or login Option A colors.
   Mobile (max-width 800px): 44/36/32 scale, compact bottom nav, light drawer contrast. */
:root{
  --tl-nb-primary:var(--sp-primary,#175cd3);
  --tl-nb-accent:var(--sp-accent,#175cd3);
  --tl-nb-surface:var(--sp-surface,#fff);
  --tl-nb-soft:var(--sp-soft,#eaf2ff);
  --tl-nb-text:var(--sp-text,#10233f);
  --tl-nb-muted:var(--sp-muted,#52647e);
  --tl-nb-line:var(--sp-line,#d6e2f1);
  --tl-nb-good:var(--sp-good,#067647);
  --tl-nb-bad:var(--sp-bad,#b42318);
  --tl-nb-warn:var(--sp-warn,#8a4b08);
  --tl-nb-tonal:var(--sp-soft,#eaf2ff);
  --tl-nb-tonal:color-mix(in srgb,var(--tl-nb-primary) 12%,var(--tl-nb-surface));
  --tl-nb-ripple:rgba(255,255,255,.42);
  --tl-nb-ripple-tonal:color-mix(in srgb,var(--tl-nb-accent) 28%,transparent);
  --tl-nb-shadow:0 4px 14px #175cd31a;
  --tl-nb-seg:var(--sp-surface,#fff);
  --tl-nb-seg-shadow:0 1px 3px #173c6a22;
}
:root[data-tl-theme="light"]{
  --tl-nb-primary:var(--sp-primary,#175cd3);
  --tl-nb-accent:var(--sp-accent,#175cd3);
  --tl-nb-surface:var(--sp-surface,#fff);
  --tl-nb-soft:var(--sp-soft,#eaf2ff);
  --tl-nb-text:var(--sp-text,#10233f);
  --tl-nb-muted:var(--sp-muted,#52647e);
  --tl-nb-line:var(--sp-line,#d6e2f1);
  --tl-nb-tonal:color-mix(in srgb,var(--tl-nb-primary) 12%,var(--tl-nb-surface));
  --tl-nb-ripple:rgba(255,255,255,.42);
  --tl-nb-seg:var(--sp-surface,#fff);
  --tl-nb-seg-shadow:0 1px 3px #173c6a22;
}
:root[data-tl-theme="dark"]{
  --tl-nb-primary:var(--sp-primary,#2469d9);
  --tl-nb-accent:var(--sp-accent,#8ec2ff);
  --tl-nb-surface:var(--sp-surface,#101f35);
  --tl-nb-soft:var(--sp-soft,#16335b);
  --tl-nb-text:var(--sp-text,#edf3ff);
  --tl-nb-muted:var(--sp-muted,#b4c6df);
  --tl-nb-line:var(--sp-line,#2b405e);
  --tl-nb-good:var(--sp-good,#8ee0bc);
  --tl-nb-bad:var(--sp-bad,#ffc0c8);
  --tl-nb-warn:var(--sp-warn,#f3d49a);
  --tl-nb-tonal:color-mix(in srgb,var(--tl-nb-primary) 12%,var(--tl-nb-surface));
  --tl-nb-ripple:rgba(255,255,255,.32);
  --tl-nb-ripple-tonal:color-mix(in srgb,var(--tl-nb-accent) 32%,transparent);
  --tl-nb-shadow:0 4px 14px #05101f66;
  --tl-nb-seg:var(--sp-raised,#142840);
  --tl-nb-seg-shadow:0 1px 3px #0006;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tl-theme]){
    --tl-nb-primary:#2469d9;--tl-nb-accent:#8ec2ff;--tl-nb-surface:#101f35;--tl-nb-soft:#16335b;
    --tl-nb-text:#edf3ff;--tl-nb-muted:#b4c6df;--tl-nb-line:#2b405e;--tl-nb-good:#8ee0bc;--tl-nb-bad:#ffc0c8;
    --tl-nb-tonal:color-mix(in srgb,#2469d9 12%,#101f35);--tl-nb-ripple:rgba(255,255,255,.32);
    --tl-nb-seg:#142840;--tl-nb-seg-shadow:0 1px 3px #0006;--tl-nb-shadow:0 4px 14px #05101f66;
  }
}

@keyframes tl-nb-ripple{from{transform:scale(.2);opacity:.65}to{transform:scale(1);opacity:0}}
@keyframes tl-nb-spin{to{transform:rotate(360deg)}}

/* Shared chrome for restyled controls (not login Option A, nav, ID card, platinum). */
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,button.suite-btn,.suite-btn,
  a.suite-row-action,.suite-row-action,
  button[type=submit],input[type=submit]
):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn):not(.saas-user):not(.sm-menu-close):not(.tl-native-menu-button):not(.tl-native-ai-button):not(.tl-native-ai-tab):not(.wa):not(.li),
:root[data-tl-theme] body form button:not([type]):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
  max-width:100%;
  border-radius:999px!important;
  border-style:solid;
  font-family:inherit;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .15s ease,filter .15s ease,opacity .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease;
}

/* 52px filled primary pill */
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  .suite-btn.primary,
  button[type=submit],input[type=submit]
):not(.ghost):not(.danger):not(.success):not(.warning):not(.small):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn):not(.saas-user):not(.sm-menu-close):not(.tl-native-menu-button):not(.tl-native-ai-button):not(.tl-native-ai-tab):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)),
:root[data-tl-theme] body form button:not([type]):not(.ghost):not(.danger):not(.small):not(.signin):not(.alt):not(.role-option):not(.btn):not(.suite-btn):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
  min-height:52px!important;
  padding:0 22px!important;
  background:var(--tl-nb-primary)!important;
  color:#fff!important;
  border-width:0!important;
  border-color:transparent!important;
  box-shadow:var(--tl-nb-shadow)!important;
  font-size:16px;
}
:root[data-tl-theme] body :is(.btn.small,.suite-row-action,a.suite-row-action):not(.ghost):not(.danger):not(.signin):not(.alt):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
  min-height:48px!important;
  padding:0 16px!important;
  background:var(--tl-nb-primary)!important;
  color:#fff!important;
  border-width:0!important;
  border-color:transparent!important;
  box-shadow:var(--tl-nb-shadow)!important;
  font-size:14px;
  border-radius:999px!important;
}

/* 48px tonal secondary */
:root[data-tl-theme] body :is(
  a.btn.ghost,button.btn.ghost,.btn.ghost,
  a.suite-btn:not(.primary),button.suite-btn:not(.primary),.suite-btn:not(.primary)
):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn):not(.tl-native-menu-button):not(.tl-native-ai-button):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
  min-height:48px!important;
  padding:0 18px!important;
  background:var(--tl-nb-tonal)!important;
  color:var(--tl-nb-accent)!important;
  border:0!important;
  box-shadow:none!important;
  font-size:14px;
}
:root[data-tl-theme] body :is(.btn.small.ghost):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
  min-height:48px!important;
  padding:0 14px!important;
  font-size:13px;
}

/* Semantic variants keep pill geometry */
:root[data-tl-theme] body :is(.btn.danger,button.btn.danger):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
  min-height:52px!important;
  padding:0 22px!important;
  background:#b42318!important;
  color:#fff!important;
  border:0!important;
  box-shadow:none!important;
}
:root[data-tl-theme="dark"] body :is(.btn.danger,button.btn.danger){
  background:#8f1d16!important;
  color:#fff!important;
}
:root[data-tl-theme] body :is(.btn.small.danger):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){min-height:48px!important;padding:0 16px!important;font-size:14px}
:root[data-tl-theme] body :is(.btn.success):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
  min-height:52px!important;padding:0 22px!important;
  background:#067647!important;color:#fff!important;border:0!important;box-shadow:none!important;
}
:root[data-tl-theme] body :is(.btn.warning):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
  min-height:52px!important;padding:0 22px!important;
  background:#dc6803!important;color:#fff!important;border:0!important;box-shadow:none!important;
}


/* Icon-only buttons: keep a 36x36 circle; 48px hit slop via ::after, not min-height. */
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,button.suite-btn,.suite-btn
):is(.icon-only,.icon-btn,:has(> [aria-hidden]:only-child)):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn):not(.tl-native-menu-button):not(.tl-native-ai-button){
  flex:none!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  padding:0!important;
  aspect-ratio:1!important;
  align-self:flex-start;
  box-sizing:border-box!important;
  overflow:visible!important;
  border-radius:999px!important;
}
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,button.suite-btn,.suite-btn
):is(.icon-only,.icon-btn,:has(> [aria-hidden]:only-child)):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn):not(.tl-native-menu-button):not(.tl-native-ai-button)::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  pointer-events:auto;
}

/* 36px filter chips + expanded 48px hit slop */
:root[data-tl-theme] body :is(.filter a,.ob-category-row a){
  position:relative;
  overflow:visible;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:36px;
  min-height:36px!important;
  min-width:48px;
  padding:0 14px 0 14px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--tl-nb-tonal)!important;
  color:var(--tl-nb-accent)!important;
  box-shadow:none!important;
  font-size:13px;
  font-weight:650;
  line-height:1;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
:root[data-tl-theme] body :is(.filter a,.ob-category-row a)::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:50%;
  height:48px;
  transform:translateY(-50%);
  pointer-events:auto;
}
:root[data-tl-theme] body :is(.filter a.active,.filter a[aria-current=page],.ob-category-row a.active){
  background:var(--tl-nb-primary)!important;
  color:#fff!important;
  padding-left:32px!important;
  box-shadow:var(--tl-nb-shadow)!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.3 6.4 11.2 12.5 4.8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:12px center;
  background-size:14px 14px;
}

/* Segmented look for existing tab groups */
:root[data-tl-theme] body :is(.tabs,.tl-quote-tabs){
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:3px;
  padding:3px;
  background:var(--tl-nb-soft)!important;
  border:1px solid var(--tl-nb-line)!important;
  border-radius:12px;
  box-shadow:none!important;
}
:root[data-tl-theme] body :is(.tabs a,.tl-quote-tabs a){
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px!important;
  min-width:48px;
  padding:8px 14px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--tl-nb-muted)!important;
  box-shadow:none!important;
  font-size:13px;
  font-weight:650;
  line-height:1.2;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
:root[data-tl-theme] body :is(.tabs a.active,.tabs a[aria-current=page],.tl-quote-tabs a.active){
  background:var(--tl-nb-seg)!important;
  color:var(--tl-nb-accent)!important;
  box-shadow:var(--tl-nb-seg-shadow)!important;
  font-weight:750;
}

/* Pressed scale */
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,button.suite-btn,.suite-btn,
  a.suite-row-action,.suite-row-action,
  button[type=submit],input[type=submit],
  .filter a,.ob-category-row a,.tabs a,.tl-quote-tabs a
):not(:disabled):not([aria-disabled=true]):not(.is-loading).is-pressed,
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,button.suite-btn,.suite-btn,
  a.suite-row-action,.suite-row-action,
  button[type=submit],input[type=submit],
  .filter a,.ob-category-row a,.tabs a,.tl-quote-tabs a
):not(:disabled):not([aria-disabled=true]):not(.is-loading):active,
:root[data-tl-theme] body form button:not([type]):not(:disabled):not(.is-loading):active,
:root[data-tl-theme] body form button:not([type]):not(:disabled):not(.is-loading).is-pressed{
  transform:scale(.97)!important;
  filter:none;
}

/* Login Option A: keep existing look; add native press only */
body.login-page button.signin:not(:disabled):active,
body.login-page button.signin:not(:disabled).is-pressed,
body.login-page button.alt:not(:disabled):active,
body.login-page button.alt:not(:disabled).is-pressed,
body.login-page a.signin-alt:active,
body.login-page a.signin-alt.is-pressed,
body.login-page .role-option:not(:disabled):active,
body.login-page .role-option:not(:disabled).is-pressed{
  transform:scale(.97)!important;
}
body.login-page button.signin,
body.login-page button.alt,
body.login-page a.signin-alt,
body.login-page .role-option{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Disabled / loading */
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,.suite-btn,
  button[type=submit],input[type=submit],
  form button:not([type])
):is(:disabled,[disabled],[aria-disabled=true]){
  opacity:.42!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
  pointer-events:none;
}

:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,.suite-btn,a.suite-row-action,.suite-row-action,
  button[type=submit],input[type=submit],
  form button:not([type])
).is-loading,
body.login-page button.signin.is-loading,
body.login-page button.alt.is-loading{
  color:transparent!important;
  pointer-events:none;
  box-shadow:none!important;
  transform:none!important;
}
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,.suite-btn,a.suite-row-action,.suite-row-action,
  button[type=submit],form button:not([type])
).is-loading>*:not(.tl-nb-ripple),
body.login-page button.signin.is-loading>*:not(.tl-nb-ripple),
body.login-page button.alt.is-loading>*:not(.tl-nb-ripple){
  visibility:hidden!important;
}
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,.suite-btn,a.suite-row-action,.suite-row-action,
  button[type=submit],form button:not([type])
).is-loading::after,
body.login-page button.signin.is-loading::after,
body.login-page button.alt.is-loading::after{
  content:""!important;
  position:absolute;
  left:50%;top:50%;
  width:22px;height:22px;
  margin:-11px 0 0 -11px;
  box-sizing:border-box;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  animation:tl-nb-spin .7s linear infinite;
  pointer-events:none;
  z-index:2;
}
:root[data-tl-theme] body :is(.btn.ghost,.suite-btn:not(.primary)).is-loading::after,
body.login-page button.alt.is-loading::after{
  border-color:color-mix(in srgb,var(--tl-nb-accent) 28%,transparent);
  border-top-color:var(--tl-nb-accent);
}

/* Focus ring */
:root[data-tl-theme] body :is(
  a.btn,button.btn,.btn,
  a.suite-btn,.suite-btn,a.suite-row-action,.suite-row-action,
  button[type=submit],input[type=submit],
  form button:not([type]),
  .filter a,.ob-category-row a,.tabs a,.tl-quote-tabs a
):focus-visible{
  outline:3px solid var(--tl-nb-accent)!important;
  outline-offset:3px!important;
}

/* Ripple ink */
.tl-nb-ripple{
  position:absolute;
  border-radius:50%;
  background:var(--tl-nb-ripple);
  pointer-events:none;
  z-index:1;
  animation:tl-nb-ripple .45s ease-out forwards;
}
:is(.btn.ghost,.suite-btn:not(.primary),.filter a,.tabs a,.tl-quote-tabs a,button.alt,a.signin-alt,.role-option) .tl-nb-ripple{
  background:var(--tl-nb-ripple-tonal);
}

/* No hover-only lift; fine pointers may brighten slightly */
@media (hover:hover) and (pointer:fine){
  :root[data-tl-theme] body :is(
    a.btn,button.btn,.btn,
    a.suite-btn,.suite-btn,a.suite-row-action,.suite-row-action,
    button[type=submit],input[type=submit]
  ):not(:disabled):not(.is-loading):hover{
    transform:none;
    filter:brightness(1.06);
  }
}

/* Full-width primary form actions on phones only */
@media (max-width:800px){
  :root[data-tl-theme] body form > :is(
    button[type=submit],
    button:not([type]),
    .btn:not(.small):not(.ghost)
  ):not(.signin):not(.alt):not(.role-option){
    width:100%;
  }
}


/* ==========================================================================
   final4 — mobile 44/36/32 scale (max-width 800px)
   Desktop sizes above stay 52/48. Login Option A colors unchanged; height 44px.
   ========================================================================== */
@media (max-width:800px){
  /* Standard / primary: 44px / 15px / 600 / padding 0 18px */
  :root[data-tl-theme] body :is(
    a.btn,button.btn,.btn,
    .suite-btn.primary,
    button[type=submit],input[type=submit]
  ):not(.ghost):not(.danger):not(.success):not(.warning):not(.small):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn):not(.saas-user):not(.sm-menu-close):not(.tl-native-menu-button):not(.tl-native-ai-button):not(.tl-native-ai-tab):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)),
  :root[data-tl-theme] body form button:not([type]):not(.ghost):not(.danger):not(.small):not(.signin):not(.alt):not(.role-option):not(.btn):not(.suite-btn):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
    min-height:44px!important;
    padding:0 18px!important;
    font-size:15px!important;
    font-weight:600!important;
    border-radius:999px!important;
  }
  :root[data-tl-theme] body :is(.btn.danger,button.btn.danger,.btn.success,.btn.warning):not(.small):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
    min-height:44px!important;
    padding:0 18px!important;
    font-size:15px!important;
    font-weight:600!important;
  }

  /* Small / card: 36px / 13–14px / padding 0 14px; wrap if needed, never clip */
  :root[data-tl-theme] body :is(.btn.small,.suite-row-action,a.suite-row-action):not(.ghost):not(.danger):not(.signin):not(.alt):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
    min-height:36px!important;
    padding:0 14px!important;
    font-size:14px!important;
    font-weight:600!important;
    white-space:normal!important;
    overflow:hidden;
    text-overflow:clip;
  }
  :root[data-tl-theme] body :is(.btn.small.danger):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
    min-height:36px!important;padding:0 14px!important;font-size:14px!important
  }

  /* Tonal / ghost: 44px standard, 36px small */
  :root[data-tl-theme] body :is(
    a.btn.ghost,button.btn.ghost,.btn.ghost,
    a.suite-btn:not(.primary),button.suite-btn:not(.primary),.suite-btn:not(.primary)
  ):not(.small):not(.signin):not(.alt):not(.role-option):not(.saas-menu-btn):not(.tl-native-menu-button):not(.tl-native-ai-button):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
    min-height:44px!important;
    padding:0 18px!important;
    font-size:15px!important;
    font-weight:600!important;
  }
  :root[data-tl-theme] body :is(.btn.small.ghost):not(.tl24-open-link):not(.icon-only):not(.icon-btn):not(:has(> [aria-hidden]:only-child)){
    min-height:36px!important;
    padding:0 14px!important;
    font-size:13px!important;
    font-weight:600!important;
    white-space:normal!important;
  }

  /* Filter chips: 32px; existing 48px ::after keeps a ≥44px hit target */
  :root[data-tl-theme] body :is(.filter a,.ob-category-row a){
    height:32px;
    min-height:32px!important;
    padding:0 12px!important;
    font-size:13px;
  }

  /* Login Option A: 44px height only — colors, borders, radii stay */
  body.login-page button.signin,
  html[data-tl-theme] body.login-page button.signin,
  html[data-tl-theme] body.login-page button.signin[type=submit],
  body.login-page button.alt,
  html[data-tl-theme] body.login-page button.alt,
  html[data-tl-theme] body.login-page button.alt[type=submit],
  body.login-page a.signin-alt,
  html[data-tl-theme] body.login-page a.signin-alt{
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }
}

/* Icon-only stays 36×36 circle (rules above). 48px ::after already provides ≥44px slop. */

/* ==========================================================================
   final4 — light drawer contrast (dark theme left as-is aside from readable icons)
   ========================================================================== */
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a span{
  color:#111827!important;
}
html[data-tl-theme="light"] body .saas-sidebar .saas-nav-label{
  color:#475569!important;
}
html[data-tl-theme="light"] body .saas-sidebar .nav-ico,
html[data-tl-theme="light"] body .saas-sidebar .nav-ico svg,
html[data-tl-theme="light"] body .saas-sidebar .nav-ico svg use,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a .nav-ico,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a .nav-ico svg,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a .nav-ico svg use{
  color:#111827!important;
  opacity:1!important;
  filter:none!important;
  stroke:currentColor;
}
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a.active,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a.active span,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a:is(:hover,:focus-visible){
  color:var(--sp-accent,#175cd3)!important;
}
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a.active .nav-ico,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a.active .nav-ico svg,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a.active .nav-ico svg use,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a:is(:hover,:focus-visible) .nav-ico,
html[data-tl-theme="light"] body .saas-sidebar .saas-nav a:is(:hover,:focus-visible) .nav-ico svg{
  color:var(--sp-accent,#175cd3)!important;
  opacity:1!important;
}
html[data-tl-theme="light"] body .saas-sidebar .saas-sidebar-user-copy strong{
  color:#0f172a!important;
}
html[data-tl-theme="light"] body .saas-sidebar .saas-sidebar-user-copy span,
html[data-tl-theme="light"] body .saas-sidebar .saas-role{
  color:#475569!important;
}
html[data-tl-theme="light"] body .saas-sidebar .sm-menu-close{
  color:#111827!important;
  border-color:#111827!important;
}
/* Support / sign-out keep their own filled colors; force their icons visible */
html[data-tl-theme="light"] body .saas-sidebar .saas-support :is(span,.nav-ico,svg,use),
html[data-tl-theme="light"] body .saas-sidebar .saas-signout :is(span,.nav-ico,svg,use){
  opacity:1!important;
  filter:none!important;
}

/* Dark drawer: keep icons light */
html[data-tl-theme="dark"] body .saas-sidebar .nav-ico,
html[data-tl-theme="dark"] body .saas-sidebar .nav-ico svg,
html[data-tl-theme="dark"] body .saas-sidebar .nav-ico svg use,
html[data-tl-theme="dark"] body .saas-sidebar .saas-nav a .nav-ico{
  color:#e5e7eb!important;
  opacity:1!important;
  filter:none!important;
}
html[data-tl-theme="dark"] body .saas-sidebar .saas-nav a.active .nav-ico,
html[data-tl-theme="dark"] body .saas-sidebar .saas-nav a.active .nav-ico svg{
  color:var(--sp-accent,#8ec2ff)!important;
}

/* Logo: never clip; contain inside the drawer; no negative margin */
html[data-tl-theme] body .saas-sidebar .saas-brand{
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
html[data-tl-theme] body .saas-sidebar .saas-brand img{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:58px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
  box-sizing:border-box!important;
  background:transparent!important;
  filter:none!important;
  border-radius:0!important;
}
html[data-tl-theme="light"] body .saas-sidebar .saas-brand img{
  content:url("/assets/testlancer-logo-light.png?v=2");
}

/* ==========================================================================
   final5 — cap WebView safe-area so the bar cannot become ~130px.
   Cause (verified against live CSS after the final4 upload): this file set
   height:calc(62px + env(safe-area-inset-bottom)) and
   padding-bottom:env(safe-area-inset-bottom). Android APK WebViews often
   report the full system navigation bar (~68px) as safe-area-inset-bottom
   even when the WebView is already laid out above it, producing
   62+68≈130px with icons/labels in the top 62px and an empty band below.
   style.css still has height:calc(70px + env(safe-area-inset-bottom))
   (no !important; we override it). Cap the inset at 16px and size the
   nav to its 62px items plus that padding (height:auto).
   ========================================================================== */
@media (max-width:800px){
  html body:is(.role-tester,.role-developer),
  html[data-tl-theme] body:is(.role-tester,.role-developer){
    --tl-tab-row:62px;
    --tl-tab-safe:min(env(safe-area-inset-bottom,0px),16px);
    --tl-tab-height:calc(var(--tl-tab-row) + var(--tl-tab-safe));
    padding-bottom:var(--tl-tab-height)!important;
    scroll-padding-bottom:var(--tl-tab-height);
  }
  html body:is(.role-tester,.role-developer).tl-keyboard-open,
  html[data-tl-theme] body:is(.role-tester,.role-developer).tl-keyboard-open{
    padding-bottom:0!important;
  }
  html body:is(.role-tester,.role-developer) .saas-content,
  html[data-tl-theme] body:is(.role-tester,.role-developer) .saas-content{
    padding-bottom:12px!important;
  }
  html body .saas-mobile-nav.tl-native-tabs,
  html[data-tl-theme] body .saas-mobile-nav.tl-native-tabs,
  html body:is(.role-tester,.role-developer) .saas-mobile-nav.tl-native-tabs,
  html[data-tl-theme] body:is(.role-tester,.role-developer) .saas-mobile-nav.tl-native-tabs{
    box-sizing:border-box!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding-top:0!important;
    padding-left:6px!important;
    padding-right:6px!important;
    padding-bottom:min(env(safe-area-inset-bottom,0px),16px)!important;
    grid-template-rows:62px!important;
    align-items:start!important;
    align-content:start!important;
    row-gap:0!important;
  }
  html body .saas-mobile-nav.tl-native-tabs>a,
  html body .saas-mobile-nav.tl-native-tabs>button,
  html[data-tl-theme] body .saas-mobile-nav.tl-native-tabs>a,
  html[data-tl-theme] body .saas-mobile-nav.tl-native-tabs>button,
  html body:is(.role-tester,.role-developer) .saas-mobile-nav.tl-native-tabs>a,
  html body:is(.role-tester,.role-developer) .saas-mobile-nav.tl-native-tabs>button{
    box-sizing:border-box!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    align-self:start!important;
    padding:6px 2px 4px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
  }
  html body .saas-mobile-nav.tl-native-tabs small,
  html[data-tl-theme] body .saas-mobile-nav.tl-native-tabs small{
    line-height:1.1!important;
  }
}

/* ============================================================
   Share-your-verified-ID row (final5 / btn5)
   Pages: dashboard.php (.dash-id-shares), tester-profile.php
   (.tl-id-shares), id.php (#idCard .shares). CSS-only: do not
   change share JS, URLs, or visible DOM text (tester-id.js
   reads/restores button.textContent).
   ============================================================ */
html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares),
html body .dash-id :is(.tl-id-shares, .dash-id-shares){
  display:flex;
  flex-wrap:nowrap;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}
html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares)::-webkit-scrollbar,
html body .dash-id :is(.tl-id-shares, .dash-id-shares)::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > *,
html body .dash-id :is(.tl-id-shares, .dash-id-shares) > *{
  flex:0 0 auto;
  scroll-snap-align:start;
}

@media (max-width: 800px){
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares),
  html body .dash-id :is(.tl-id-shares, .dash-id-shares),
  html body .dash-id-copy :is(.tl-id-shares, .dash-id-shares){
    display:flex !important;
    flex-wrap:nowrap !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:safe center !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  /* Social networks: 32px icon-only circles. Labels stay in the
     DOM for a11y and for tester-id.js original-text restore. */
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(-n+5),
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(-n+5){
    box-sizing:border-box !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 32px !important;
    border-radius:999px !important;
    font-size:0 !important;
    line-height:0 !important;
    letter-spacing:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    appearance:none;
    -webkit-appearance:none;
  }
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(-n+5)::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(-n+5)::before{
    display:block !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    pointer-events:none;
  }
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(1)::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(1)::before{ content:"WA"; }
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(2)::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(2)::before{ content:"in"; }
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(3)::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(3)::before{ content:"IG"; }
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(4)::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(4)::before{ content:"f"; }
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(5)::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(5)::before{ content:"X"; }

  /* Share image / Open ID / Download card stay short readable chips. */
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > :nth-child(n+6),
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > :nth-child(n+6){
    box-sizing:border-box !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    padding:0 8px !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
  }

  /* While sharing, tester-id.js writes a status string onto the
     button and sets disabled. Reveal that text instead of the glyph. */
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > button:disabled,
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > button[disabled],
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > button:disabled,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > button[disabled]{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    padding:0 10px !important;
    font-size:12px !important;
    line-height:32px !important;
  }
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > button:disabled::before,
  html body :is(.tl-id-shares, .dash-id-shares, #idCard .shares, main .shares) > button[disabled]::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > button:disabled::before,
  html body .dash-id :is(.tl-id-shares, .dash-id-shares) > button[disabled]::before{
    content:none !important;
    display:none !important;
  }
}

/* ==========================================================================
   final6 / btn6 — developer Track Order hero contrast + mobile detail grids
   Cause: style.css still paints .track-hero-copy / .track-progress-ring in
   white for the original navy gradient. Midnight Sapphire and theme-mode
   only restyle the panel background (light glass + sapphire-prism.webp),
   and the light-theme h1/h2/p override list omits .track-hero-panel.
   ========================================================================== */

/* Light theme: dark readable text on the glass card */
html[data-tl-theme="light"] body .track-hero-panel,
html[data-tl-theme="light"] body .track-hero-panel .track-hero-copy,
html[data-tl-theme="light"] body .track-hero-panel .track-hero-copy :is(h1,h2),
html[data-tl-theme="light"] body.role-developer .suite-hero :is(h1,h2),
html[data-tl-theme="light"] body.role-developer .suite-hero h1 span{
  color:#0f172a!important;
}
html[data-tl-theme="light"] body .track-hero-panel .track-hero-copy p,
html[data-tl-theme="light"] body.role-developer .suite-hero p{
  color:#334155!important;
}
html[data-tl-theme="light"] body .track-hero-panel .track-hero-copy .order-number{
  color:#0f172a!important;
  background:rgba(15,23,42,.08)!important;
  border:1px solid rgba(15,23,42,.16)!important;
}
html[data-tl-theme="light"] body .track-hero-panel .track-progress-ring{
  background:conic-gradient(#2563eb calc(var(--p)*1%),rgba(15,23,42,.12) 0)!important;
}
html[data-tl-theme="light"] body .track-hero-panel .track-progress-ring:before{
  background:#fff!important;
}
html[data-tl-theme="light"] body .track-hero-panel .track-progress-ring b{
  color:#0f172a!important;
}
html[data-tl-theme="light"] body .track-hero-panel .track-progress-ring span{
  color:#334155!important;
}
html[data-tl-theme="light"] body.role-developer .suite-hero .suite-kicker{
  color:#175cd3!important;
}

/* Dark theme: white text on the dark glass / prism card */
html[data-tl-theme="dark"] body .track-hero-panel,
html[data-tl-theme="dark"] body .track-hero-panel .track-hero-copy,
html[data-tl-theme="dark"] body .track-hero-panel .track-hero-copy :is(h1,h2),
html[data-tl-theme="dark"] body .track-hero-panel .track-hero-copy .order-number,
html[data-tl-theme="dark"] body .track-hero-panel .track-progress-ring b,
html[data-tl-theme="dark"] body.role-developer .suite-hero :is(h1,h2),
html[data-tl-theme="dark"] body.role-developer .suite-hero h1 span{
  color:#fff!important;
}
html[data-tl-theme="dark"] body .track-hero-panel .track-hero-copy p,
html[data-tl-theme="dark"] body .track-hero-panel .track-progress-ring span,
html[data-tl-theme="dark"] body.role-developer .suite-hero p{
  color:#e2e8f0!important;
}
html[data-tl-theme="dark"] body .track-hero-panel .track-hero-copy .order-number{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.22)!important;
}
html[data-tl-theme="dark"] body .track-hero-panel .track-progress-ring{
  background:conic-gradient(#68e4ff calc(var(--p)*1%),rgba(255,255,255,.18) 0)!important;
}
html[data-tl-theme="dark"] body .track-hero-panel .track-progress-ring:before{
  background:#102b50!important;
}
html[data-tl-theme="dark"] body.role-developer .suite-hero .suite-kicker{
  color:#8ec2ff!important;
}

/* Unclip the ring label: wrap "approved work" inside the circle */
html body .track-hero-panel .track-progress-ring{
  overflow:visible;
  flex:0 0 auto;
}
html body .track-hero-panel .track-progress-ring b,
html body .track-hero-panel .track-progress-ring span{
  left:50%;
  max-width:76%;
  text-align:center;
}
html body .track-hero-panel .track-progress-ring b{
  transform:translateX(-50%);
  margin-top:-14px;
  white-space:nowrap;
}
html body .track-hero-panel .track-progress-ring span{
  transform:translateX(-50%);
  width:76%;
  margin-top:16px;
  font-size:8px!important;
  letter-spacing:.04em!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow:visible;
  text-wrap:balance;
}

/* 2) Mobile detail lists: keep 2 columns (style.css forces 1fr below 500px) */
@media (max-width:800px){
  html body .order-summary-grid,
  html body .order-meta-grid,
  html body .order-grid,
  html body .campaign-track-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html body .order-summary-grid>div,
  html body .order-meta-grid>div,
  html body .order-grid>div,
  html body .campaign-track-stats>div{
    min-width:0!important;
    padding:8px 10px!important;
    box-sizing:border-box!important;
  }
  html body .order-summary-grid b,
  html body .order-meta-grid b,
  html body .order-grid b{
    display:block;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
    line-height:1.35;
  }
  /* A long platform-style value can take the full row instead of overflowing */
  html body .order-summary-grid>div:has(b),
  html body .order-meta-grid>div:has(b),
  html body .order-grid>div:has(b){
    overflow:hidden;
  }
}