/* PWA install/update UI, iOS safe-area helpers, and fixed mobile viewport scale. */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --mobile-tabbar-base:58px;
}

html,body{
  -webkit-text-size-adjust:100%;
  touch-action:pan-x pan-y;
}

.pwa-toast{
  position:fixed;
  top:max(12px,var(--safe-top));
  right:max(12px,var(--safe-right));
  z-index:220;
  display:flex;
  align-items:center;
  gap:12px;
  width:min(360px,calc(100vw - 24px - var(--safe-left) - var(--safe-right)));
  max-width:360px;
  margin:0;
  padding:12px 12px 12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--material);
  color:var(--fg);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  transform:translateY(calc(-120% - var(--safe-top)));
  opacity:0;
  pointer-events:none;
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.pwa-toast.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.pwa-toast b{display:block;font-size:13.5px;letter-spacing:-.01em;}
.pwa-toast span{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.pwa-toast .pwa-version{display:block;margin-top:5px;color:var(--muted);font-size:10.5px;line-height:1.3;letter-spacing:.01em;}
.pwa-toast .pwa-version code{display:inline-block;color:inherit;font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.pwa-toast .pwa-copy{min-width:0;flex:1;}
.pwa-toast button{
  min-height:44px;
  border-radius:9px;
  padding:0 12px;
  font-size:12.5px;
  font-weight:650;
}
.pwa-toast .pwa-primary{background:var(--accent-action);color:#fff;}
.pwa-toast .pwa-primary:hover{background:var(--accent-action-hover);}
.pwa-toast button:disabled{opacity:.4;cursor:not-allowed;}
.pwa-toast .pwa-secondary{background:var(--hairline);color:var(--muted);}
.pwa-toast button:focus-visible{
  outline:2px solid var(--accent-action);
  outline-offset:2px;
}

/* Localized from the Vanilla HTML Loader Wave Bars and Shimmer Progress
   patterns. Keeping the tiny visual here means the static build has no
   runtime dependency on the showcase site while the database is opening. */
#bootLoadingView .auth-panel{gap:18px;}
.demo-boot-visual{display:grid;place-items:center;padding:12px 0 0;}
.demo-boot-visual .vl-wave{height:48px;display:flex;align-items:center;justify-content:center;gap:5px;}
.demo-boot-visual .vl-wave span{display:block;width:7px;height:22px;border-radius:999px;background:var(--accent);box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 24%,transparent);animation:erp-demo-wave 1s ease-in-out infinite;}
.demo-boot-visual .vl-wave span:nth-child(2){animation-delay:.12s;}
.demo-boot-visual .vl-wave span:nth-child(3){animation-delay:.24s;}
.demo-boot-visual .vl-wave span:nth-child(4){animation-delay:.36s;}
.demo-boot-visual .vl-wave span:nth-child(5){animation-delay:.48s;}
@keyframes erp-demo-wave{0%,100%{height:18px;opacity:.48;transform:translateY(6px);}50%{height:42px;opacity:1;transform:translateY(0);}}
.demo-boot-copy{display:grid;gap:10px;}
.demo-boot-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.demo-boot-heading strong{font-size:13px;letter-spacing:-.01em;}
.demo-boot-heading span{color:var(--accent);font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;}
.demo-boot-progress{height:8px;overflow:hidden;border-radius:999px;background:var(--accent-tint);}
.demo-boot-progress span{position:relative;display:block;width:0;height:100%;overflow:hidden;border-radius:inherit;background:var(--accent);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%,transparent);transition:width .28s ease;}
.demo-boot-progress span::after{position:absolute;inset:0;content:"";background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 76%);animation:erp-demo-shimmer 1.35s linear infinite;}
@keyframes erp-demo-shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.demo-boot-copy .wiz-p{margin:0;}
.demo-boot-copy small{display:block;color:var(--muted);font-size:11px;line-height:1.45;}
.auth-demo-actions{display:grid;gap:7px;margin-top:2px;padding-top:4px;border-top:1px solid var(--hairline);}
.auth-demo-actions .btn{width:100%;justify-content:center;}
.auth-demo-actions small{color:var(--muted);font-size:11px;line-height:1.4;text-align:center;}

@media (prefers-reduced-motion:reduce){
  .demo-boot-visual .vl-wave span,.demo-boot-progress span::after{animation:none;}
  .demo-boot-progress span{transition:none;}
}

/* Keep the shell header to one row before the full mobile layout kicks in.
   At tablet widths the sidebar can still be open, leaving the main column
   narrower than the viewport breakpoint suggests. */
@media (max-width:1180px){
  .topbar{
    min-width:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .topbar::-webkit-scrollbar{display:none;}
  .topbar>*{flex:0 0 auto;}
  .topbar .search{min-width:0;flex:1 1 auto;}
  .topbar .ctxbtn,.topbar .env{display:none;}
}

@media (max-width:980px){
  body{padding-left:var(--safe-left);padding-right:var(--safe-right);}
  .main{padding-bottom:calc(var(--mobile-tabbar-base) + var(--safe-bottom));}
  .topbar{padding-top:calc(10px + var(--safe-top));padding-left:max(14px,var(--safe-left));padding-right:max(14px,var(--safe-right));}
  /* Touch controls keep a practical 44px target on narrow layouts. The
     desktop density remains unchanged, while mobile row actions stay
     discoverable without relying on hover. */
  .topbar .iconbtn,
  .topbar .avatar{width:44px;height:44px;min-width:44px;min-height:44px;}
  .topbar .avatar svg{width:22px;height:22px;}
  [data-list-filters] .chip,
  .toolbar .btn,
  .case-detail-actions .btn,
  .modal-foot .btn{min-height:44px;}
  [data-list-filters] .chip{padding:10px 12px;}
  .rowact{opacity:1;}
  .rowact .transaction-row-menu{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:10px;}
  .tabbar{
    min-height:calc(var(--mobile-tabbar-base) + var(--safe-bottom));
    padding:6px max(8px,var(--safe-right)) var(--safe-bottom) max(8px,var(--safe-left));
    align-items:stretch;
  }
  .tabbar button{
    min-height:var(--mobile-tabbar-base);
    padding:6px 8px;
    justify-content:center;
  }
  .detail{padding-bottom:var(--safe-bottom);}
  .palette{padding-bottom:var(--safe-bottom);}
}

/* At phone widths the search trigger is a secondary surface, not a persistent
   form. Keep it as one compact touch target so the shell stays one row high;
   the existing command palette owns the actual search input after activation. */
@media (max-width:560px){
  .topbar{
    flex-wrap:nowrap;
    justify-content:flex-start;
    column-gap:clamp(4px,2vw,10px);
    padding-top:calc(6px + var(--safe-top));
    padding-bottom:6px;
    overflow:hidden;
  }
  .topbar .spacer{display:none;}
  .topbar .search,
  .topbar .iconbtn,
  .topbar .popwrap{flex:0 0 44px;width:44px;max-width:none;}
  .topbar .iconbtn,
  .topbar .popwrap{
    min-width:44px;
  }
  .topbar .iconbtn{
    height:44px;
    border:1px solid var(--hairline);
    border-radius:50%;
    background:var(--surface-2);
  }
  .topbar .popwrap{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:0;
  }
  /* Keep the search trigger on the left and dock the action group to the
     right edge. Quick Create can be present on other mobile surfaces, so it
     owns the group spacer when visible; otherwise notifications own it. */
  .topbar #bellBtn{margin-left:auto;}
  .topbar #qcBtn:not([hidden]){margin-left:auto;}
  .topbar #qcBtn:not([hidden]) ~ #bellBtn{margin-left:0;}
  .topbar .search{
    flex:1 1 auto;
    width:auto;
    min-width:44px;
    max-width:none;
    height:44px;
    padding:0 12px;
    gap:8px;
    border-radius:999px;
    border:1px solid var(--hairline);
    background:var(--surface-2);
    justify-content:flex-start;
    text-align:left;
  }
  .topbar .search svg{width:21px;height:21px;}
  .topbar .search-label{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar .search .kbd{display:none;}
  .topbar .popwrap .avatar{
    flex:0 0 44px;
    width:44px;
    height:44px;
    max-width:none;
  }
}

@media (max-width:360px){
  /* Preserve seven 44px touch targets at normal phone widths. At the
     narrowest supported layout, Quick Create remains available in the
     command palette and can yield its slot to the primary navigation. */
  .topbar #qcBtn{display:none;}
  .topbar{column-gap:4px;}
  .topbar .search{
    flex:0 0 44px;
    width:44px;
    padding:0;
    gap:0;
    border-radius:50%;
    justify-content:center;
    text-align:center;
  }
  .topbar .search-label{display:none;}
}

@media (max-width:520px){
  .pwa-toast{align-items:stretch;flex-direction:column;}
  .pwa-toast .pwa-actions{width:100%;}
  .pwa-toast .pwa-actions button{flex:1;}
}
@media (max-width:640px){
  .pwa-toast{
    top:max(12px,var(--safe-top));
    right:calc(12px + var(--safe-right));
    left:calc(12px + var(--safe-left));
    width:auto;
    max-width:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .pwa-toast{transition:none;}
}

/* iOS standalone mode extends the viewport under the status bar and home
   indicator. Keep every full-screen entry point inside those insets. */
@media (max-width:980px){
  .auth-view{
    padding-top:calc(28px + var(--safe-top));
    padding-right:max(28px,var(--safe-right));
    padding-bottom:calc(28px + var(--safe-bottom));
    padding-left:max(28px,var(--safe-left));
  }
  #setupWizardView.auth-view{
    /* The fixed-height wizard exactly fills this view's padded content box.
       Centering it in Grid can place the header above the viewport in embedded
       browser panes, so anchor the shell to the safe top edge. */
    align-items:start;
    padding-top:calc(20px + var(--safe-top));
    padding-right:max(20px,var(--safe-right));
    padding-bottom:calc(20px + var(--safe-bottom));
    padding-left:max(20px,var(--safe-left));
  }
  #setupWizardView .wizard-panel{
    height:calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
    min-height:calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
  }
  /* The wizard content scrolls vertically on touch layouts. Keep its decorative
     header shape inside the panel so it cannot create a horizontal swipe area. */
  #setupWizardView .wizard-panel::before{left:0;width:100%;}
  .detail{
    padding-top:var(--safe-top);
  }
  .palette{
    max-height:100dvh;
  }
}

@media (max-width:560px){
  #bootLoadingView.auth-view{align-items:flex-start;}
  #bootLoadingView .auth-panel{align-self:start;height:auto;min-height:0;justify-content:flex-start;padding:28px 22px;}
  .auth-view{
    padding-top:calc(18px + var(--safe-top));
    padding-right:max(18px,var(--safe-right));
    padding-bottom:calc(18px + var(--safe-bottom));
    padding-left:max(18px,var(--safe-left));
  }
  .auth-view .auth-panel{
    min-height:calc(100dvh - 36px - var(--safe-top) - var(--safe-bottom));
  }
  #setupWizardView.auth-view{
    padding-top:calc(16px + var(--safe-top));
    padding-right:max(16px,var(--safe-right));
    padding-bottom:calc(16px + var(--safe-bottom));
    padding-left:max(16px,var(--safe-left));
  }
  #setupWizardView .wizard-panel{
    height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
    min-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
  }
}

/* iOS Safari zooms focused controls below 16px even when the viewport is
   locked. Keep control text at the platform threshold on touch layouts. */
@media (max-width:980px){
  input,select,textarea{font-size:16px !important;}
}

/* Keep the desktop first-run wizard visually complete inside its fixed 80vh
   card. The mobile rules above retain the existing safe-area treatment. */
@media (min-width:981px){
  #setupWizardView.auth-view{padding:12px 20px;}
  #setupWizardView .wizard-panel{
    width:min(680px,100%);
    height:80vh;
    min-height:80vh;
    max-height:80vh;
    padding:24px 32px 16px;
    overflow:hidden;
  }
  #setupWizardView .wizard-brandbar{align-items:center;gap:12px;}
  #setupWizardView .wizard-brandbar .auth-brand{gap:12px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark{width:56px;height:56px;border-radius:16px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark .ico{width:28px;height:28px;}
  #setupWizardView .wizard-brandbar .auth-brand b{font-size:calc(22px * var(--fs,1));}
  #setupWizardView .wizard-brandbar .auth-brand small{font-size:calc(12px * var(--fs,1));margin-top:2px;}
  #setupWizardView .stepper{margin:24px 0 0;}
  #setupWizardView .step{gap:4px;font-size:calc(10px * var(--fs,1));}
  #setupWizardView .step .sdot{width:28px;height:28px;font-size:calc(12px * var(--fs,1));}
  #setupWizardView .step .sdot span{font-size:12px !important;}
  #setupWizardView .step.current .sdot{box-shadow:0 0 0 4px var(--accent-tint);}
  #setupWizardView .stepline{min-width:8px;margin:0 5px;}
  #setupWizardView .wizard-step-body{margin-top:18px;}
  #setupWizardView .wizard-step-body .wiz-h{font-size:calc(24px * var(--fs,1));line-height:1.15;}
  #setupWizardView .wizard-step-body .wiz-p{margin-top:6px;font-size:calc(13px * var(--fs,1));line-height:1.35;}
  .wiz-language-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;}
  .wiz-language-card,.wiz-language-card.is-wide{grid-column:auto;min-height:64px;padding:10px;gap:9px;border-radius:12px;}
  .wiz-language-badge{width:34px;height:34px;font-size:11px;}
  .wiz-language-badge .ico{width:18px;height:18px;}
  .wiz-language-copy{gap:1px;padding-right:16px;}
  .wiz-language-copy b{font-size:calc(13.5px * var(--fs,1));}
  .wiz-language-copy small{font-size:calc(11.5px * var(--fs,1));}
  .wiz-language-check{top:8px;right:8px;width:20px;height:20px;}
  .wiz-language-check .ico{width:12px;height:12px;}
  .wiz-language-note{margin-top:10px;padding:9px 11px;font-size:calc(11.5px * var(--fs,1));line-height:1.3;}
  .wiz-language-note>.ico{width:16px;height:16px;}
  #setupWizardView .wiz-background-picker{margin-top:12px;padding-top:12px;}
  #setupWizardView .wiz-background-copy h3{font-size:calc(13px * var(--fs,1));}
  #setupWizardView .wiz-background-copy p{margin-top:2px;font-size:calc(10.5px * var(--fs,1));line-height:1.25;}
  #setupWizardView .wiz-background-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px;}
  #setupWizardView .wiz-background-option{min-height:48px;padding:6px;gap:6px;border-radius:9px;}
  #setupWizardView .wiz-background-swatch{width:25px;height:25px;border-radius:7px;}
  #setupWizardView .wiz-background-option-copy{padding-right:10px;}
  #setupWizardView .wiz-background-option-copy b{font-size:calc(10px * var(--fs,1));}
  #setupWizardView .wiz-background-option-copy small{display:none;}
  #setupWizardView .wiz-background-check{top:4px;right:4px;width:13px;height:13px;}
  #setupWizardView .wiz-background-check .ico{width:8px;height:8px;}
  #setupWizardView .wiz-color-picker{margin-top:10px;padding-top:10px;}
  #setupWizardView .wiz-color-copy h3{font-size:calc(13px * var(--fs,1));}
  #setupWizardView .wiz-color-copy p{margin-top:2px;font-size:calc(10.5px * var(--fs,1));line-height:1.25;}
  #setupWizardView .wiz-color-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:6px;}
  #setupWizardView .wiz-color-option{min-height:42px;padding:5px 3px;gap:4px;border-radius:8px;}
  #setupWizardView .wiz-color-swatches{width:32px;height:9px;border-radius:4px;}
  #setupWizardView .wiz-color-option b{font-size:calc(8.5px * var(--fs,1));}
  #setupWizardView .wiz-color-check{top:3px;right:3px;width:12px;height:12px;}
  #setupWizardView .wiz-color-check .ico{width:7px;height:7px;}
  #setupWizardView .wizard-savebar{padding-top:12px;gap:10px;}
  #setupWizardView .wizard-primary,#setupWizardView #wizBack{min-height:44px;border-radius:11px;}
  #setupWizardView .wizard-primary{font-size:calc(14px * var(--fs,1));}
  #setupWizardView .wizard-primary .ico{right:15px;width:18px;height:18px;}
}

/* A narrow wizard keeps all seven stage markers in one calm, scanable rail.
   Keep the current step and the final Finish destination named in the visual
   rail, so the last marker does not look like an unnamed extra step. */
@media (max-width:980px){
  #setupWizardView .stepper{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    width:100%;
    margin:28px 0 0;
    min-width:0;
  }
  #setupWizardView .stepper .step{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    min-width:0;
    gap:0;
    white-space:nowrap;
    font-size:0;
    line-height:1.2;
  }
  #setupWizardView .stepper .step-label{display:none;}
  #setupWizardView .stepper .step.current{gap:5px;}
  #setupWizardView .stepper .step.current .step-label{
    display:block;
    max-width:92px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:clamp(calc(10px * var(--fs,1)),calc(1.45vw * var(--fs,1)),calc(11px * var(--fs,1)));
  }
  #setupWizardView .stepper .step:last-child{gap:4px;}
  #setupWizardView .stepper .step:last-child .step-label{
    display:block;
    max-width:44px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:clamp(calc(9px * var(--fs,1)),calc(1.25vw * var(--fs,1)),calc(10.5px * var(--fs,1)));
  }
  #setupWizardView .stepper .step .sdot{
    width:24px;
    height:24px;
    font-size:calc(10px * var(--fs,1));
  }
  #setupWizardView .stepper .step .sdot span{font-size:10px !important;}
  #setupWizardView .stepper .step.current .sdot{box-shadow:0 0 0 3px var(--accent-tint);}
  #setupWizardView .stepper .stepline{display:block;flex:1 1 8px;min-width:4px;margin:0 3px;}
}

/* The initial language choice is a short decision, not a scrolling form.
   These scoped reductions retain 44px touch targets and leave the longer
   data-entry steps free to use the content area's vertical scrolling. */
@media (max-width:980px){
  #setupWizardView .wizard-panel{padding:24px 28px 18px;}
  #setupWizardView .wizard-brandbar{align-items:center;gap:12px;}
  #setupWizardView .wizard-brandbar .auth-brand{gap:12px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark{width:52px;height:52px;border-radius:16px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark .ico{width:26px;height:26px;}
  #setupWizardView .wizard-brandbar .auth-brand b{font-size:calc(21px * var(--fs,1));}
  #setupWizardView .wizard-brandbar .auth-brand small{margin-top:2px;font-size:calc(11px * var(--fs,1));}
  #setupWizardView .stepper{margin-top:20px;}
  #setupWizardView .wizard-step-body{margin-top:16px;}
  #setupWizardView .wizard-step-body .wiz-h{font-size:calc(23px * var(--fs,1));line-height:1.18;}
  #setupWizardView .wizard-step-body .wiz-p{margin-top:5px;font-size:calc(12.5px * var(--fs,1));line-height:1.35;}
  #setupWizardView .wiz-language-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;}
  #setupWizardView .wiz-language-card,
  #setupWizardView .wiz-language-card.is-wide{grid-column:auto;min-height:60px;padding:8px 9px;gap:8px;border-radius:12px;}
  #setupWizardView .wiz-language-badge{width:30px;height:30px;font-size:10px;}
  #setupWizardView .wiz-language-badge .ico{width:16px;height:16px;}
  #setupWizardView .wiz-language-copy{gap:1px;padding-right:14px;}
  #setupWizardView .wiz-language-copy b{font-size:calc(13px * var(--fs,1));}
  #setupWizardView .wiz-language-copy small{font-size:calc(10.5px * var(--fs,1));line-height:1.2;}
  #setupWizardView .wiz-language-check{top:7px;right:7px;width:18px;height:18px;}
  #setupWizardView .wiz-language-check .ico{width:11px;height:11px;}
  #setupWizardView .wiz-language-note{gap:8px;margin-top:8px;padding:8px 10px;border-radius:10px;font-size:calc(11px * var(--fs,1));line-height:1.3;}
  #setupWizardView .wiz-language-note>.ico{width:15px;height:15px;}
  #setupWizardView .wizard-savebar{padding-top:10px;gap:8px;}
  #setupWizardView .wizard-primary,
  #setupWizardView #wizBack{min-height:44px;border-radius:11px;}
  #setupWizardView .wizard-primary{font-size:calc(14px * var(--fs,1));}
  #setupWizardView .wizard-primary .ico{right:15px;width:18px;height:18px;}
}

@media (min-width:680px) and (max-width:980px){
  #setupWizardView .wiz-language-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:560px){
  #setupWizardView .wizard-panel{padding:22px 20px 16px;}
  #setupWizardView .wizard-brandbar .auth-brand{gap:10px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark{width:48px;height:48px;border-radius:14px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark .ico{width:24px;height:24px;}
  #setupWizardView .wizard-brandbar .auth-brand b{font-size:calc(19px * var(--fs,1));}
  #setupWizardView .wizard-brandbar .auth-brand small{font-size:calc(10.5px * var(--fs,1));}
  #setupWizardView .stepper{margin-top:18px;}
  #setupWizardView .stepper .stepline{min-width:2px;margin:0 2px;}
  #setupWizardView .stepper .step.current .step-label{max-width:56px;}
  #setupWizardView .stepper .step:last-child{gap:3px;}
  #setupWizardView .stepper .step:last-child .step-label{max-width:34px;font-size:calc(9px * var(--fs,1));}
  #setupWizardView .wizard-step-body{margin-top:14px;}
  #setupWizardView .wizard-step-body .wiz-h{font-size:calc(22px * var(--fs,1));}
  #setupWizardView .wiz-language-grid{margin-top:10px;}
  #setupWizardView .wiz-language-card,
  #setupWizardView .wiz-language-card.is-wide{min-height:56px;padding:7px;gap:6px;}
  #setupWizardView .wiz-language-badge{width:28px;height:28px;}
  #setupWizardView .wiz-language-copy{padding-right:12px;}
  #setupWizardView .wiz-language-copy b{font-size:calc(12.5px * var(--fs,1));}
  #setupWizardView .wiz-language-copy small{font-size:calc(10px * var(--fs,1));}
  #setupWizardView .wiz-language-note{margin-top:8px;padding:8px;font-size:calc(10.5px * var(--fs,1));}
  /* Keep the setup choices readable on narrow phones. Four background cards
     and six palette cards in one compressed row turn labels into ellipses;
     two columns preserve the copy, touch targets, and selection affordance. */
  #setupWizardView .wiz-background-picker,
  #setupWizardView .wiz-color-picker{margin-top:16px;padding-top:14px;}
  #setupWizardView .wiz-background-copy h3,
  #setupWizardView .wiz-color-copy h3{font-size:calc(14px * var(--fs,1));}
  #setupWizardView .wiz-background-copy p,
  #setupWizardView .wiz-color-copy p{margin-top:4px;display:block;font-size:calc(11px * var(--fs,1));line-height:1.35;}
  #setupWizardView .wiz-background-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
  #setupWizardView .wiz-background-option{min-height:68px;padding:9px;gap:8px;border-radius:12px;align-items:flex-start;}
  #setupWizardView .wiz-background-swatch{width:28px;height:28px;border-radius:8px;margin-top:1px;}
  #setupWizardView .wiz-background-option-copy{gap:2px;padding-right:8px;}
  #setupWizardView .wiz-background-option-copy b{font-size:calc(11.5px * var(--fs,1));line-height:1.2;white-space:normal;overflow:visible;text-overflow:clip;}
  #setupWizardView .wiz-background-option-copy small{font-size:calc(10px * var(--fs,1));line-height:1.25;-webkit-line-clamp:2;}
  #setupWizardView .wiz-background-check{top:7px;right:7px;width:16px;height:16px;}
  #setupWizardView .wiz-background-check .ico{width:10px;height:10px;}
  #setupWizardView .wiz-color-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
  #setupWizardView .wiz-color-option{min-height:56px;padding:8px 10px;gap:6px;border-radius:11px;}
  #setupWizardView .wiz-color-swatches{width:42px;height:11px;border-radius:5px;}
  #setupWizardView .wiz-color-option b{font-size:calc(11.5px * var(--fs,1));line-height:1.15;white-space:normal;text-align:center;overflow:visible;text-overflow:clip;}
  #setupWizardView .wiz-color-check{top:6px;right:6px;width:16px;height:16px;}
  #setupWizardView .wiz-color-check .ico{width:9px;height:9px;}
}

/* Portrait phones and split panes have enough height for the compact language
   chooser. Very short landscape windows retain scrolling instead of clipping
   localized copy or controls. */
@media (max-width:980px) and (min-height:680px){
  #setupWizardView .wizard-panel.wizard-language-panel{overflow:hidden;scrollbar-width:none;}
}

/* Module activation is deliberately a readable checklist: it can use the
   wizard content area's vertical scroll without reintroducing horizontal
   overflow or shrinking checkbox targets below touch size. */
#setupWizardView .wiz-module-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(92px,auto);
  gap:10px;
  margin-top:16px;
}
#setupWizardView .wiz-module-card{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  grid-template-areas:
    'check copy state'
    'check details state';
  align-items:start;
  gap:10px;
  min-width:0;
  min-height:92px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--panel);
  cursor:pointer;
}
#setupWizardView .wiz-module-card:hover{border-color:var(--accent);}
#setupWizardView .wiz-module-card.is-selected{border-color:var(--accent);background:var(--accent-tint);}
#setupWizardView .wiz-module-card input{
  grid-area:check;
  width:20px;
  height:20px;
  margin:1px 0 0;
  accent-color:var(--accent);
}
#setupWizardView .wiz-module-copy{grid-area:copy;display:grid;gap:5px;min-width:0;cursor:pointer;}
#setupWizardView .wiz-module-copy>span{display:flex;align-items:center;gap:7px;min-width:0;}
#setupWizardView .wiz-module-icon{
  display:grid;
  flex:0 0 auto;
  width:26px;
  height:26px;
  place-items:center;
  border-radius:8px;
  background:var(--accent-tint);
  color:var(--accent);
}
#setupWizardView .wiz-module-icon .ico{width:15px;height:15px;}
#setupWizardView .wiz-module-copy b{font-size:calc(13px * var(--fs,1));line-height:1.25;}
#setupWizardView .wiz-module-details{grid-area:details;min-width:0;}
#setupWizardView .wiz-module-details summary{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  gap:5px;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  font-size:calc(11.5px * var(--fs,1));
  line-height:1.35;
  cursor:pointer;
  list-style:none;
}
#setupWizardView .wiz-module-details summary::-webkit-details-marker{display:none;}
#setupWizardView .wiz-module-details summary:hover,
#setupWizardView .wiz-module-details[open] summary{border-color:var(--accent);color:var(--accent);}
#setupWizardView .wiz-module-details-icon .ico,
#setupWizardView .wiz-module-details-chevron .ico{display:block;width:13px;height:13px;}
#setupWizardView .wiz-module-details-chevron{margin-left:1px;transition:transform .16s ease;}
#setupWizardView .wiz-module-details[open] .wiz-module-details-chevron{transform:rotate(180deg);}
#setupWizardView .wiz-module-details small,
#setupWizardView .wiz-module-plan small{display:block;margin-top:5px;color:var(--muted);font-size:calc(11.5px * var(--fs,1));line-height:1.35;}
#setupWizardView .wiz-module-state em{
  display:inline-block;
  flex:0 0 auto;
  padding:2px 6px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:calc(9.5px * var(--fs,1));
  font-style:normal;
  font-weight:700;
}
#setupWizardView .wiz-module-state{grid-area:state;min-width:84px;color:var(--accent);font-size:calc(10px * var(--fs,1));font-weight:700;line-height:1.6;text-align:right;white-space:nowrap;}
#setupWizardView .wiz-module-note{margin:12px 0 0;color:var(--muted);font-size:calc(12px * var(--fs,1));line-height:1.4;}
#setupWizardView .wiz-module-plan{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:12px;
  padding:11px 12px;
  border:1px dashed var(--border-strong,var(--border));
  border-radius:12px;
  color:var(--muted);
}
#setupWizardView .wiz-module-plan>.ico{flex:0 0 auto;width:18px;height:18px;margin-top:1px;}
#setupWizardView .wiz-module-plan div{display:grid;gap:3px;min-width:0;}
#setupWizardView .wiz-module-plan b{font-size:calc(12px * var(--fs,1));color:var(--text);}
#setupWizardView .wiz-admin-fields{display:grid;gap:10px;margin-top:10px;}
#setupWizardView .wiz-admin-fields .fld{margin-top:0;}
#setupWizardView .wiz-admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
#setupWizardView .wiz-admin-actions .btn{min-height:36px;justify-content:center;}
#setupWizardView .wiz-admin-credential-note{margin:8px 0 0;color:var(--muted);font-size:calc(11px * var(--fs,1));line-height:1.4;}
#setupWizardView .wiz-provider-fields{display:grid;gap:18px;margin-top:18px;}
#setupWizardView .wiz-provider-note{margin:0;}
#setupWizardView .wiz-provider-actions{display:flex;align-items:center;gap:10px;margin-top:16px;}
#setupWizardView .wiz-provider-actions .btn{min-height:38px;justify-content:center;}
#setupWizardView .wiz-provider-status{min-height:20px;margin:8px 0 0;}
#setupWizardView .wiz-summary-row{display:grid;grid-template-columns:minmax(112px,28%) minmax(0,1fr);align-items:start;gap:12px;min-width:0;}
#setupWizardView .wiz-summary-key{min-width:0;color:var(--muted);line-height:1.35;}
#setupWizardView .wiz-summary-value{min-width:0;text-align:right;line-height:1.35;overflow-wrap:anywhere;}
#setupWizardView .wiz-summary-module-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0;}
#setupWizardView .wiz-summary-module{display:inline-flex;align-items:center;max-width:100%;padding:3px 8px;border-radius:999px;background:var(--accent-tint);color:var(--text);font-weight:600;line-height:1.3;white-space:nowrap;}
@media (max-width:560px){
  #setupWizardView .wiz-summary-row{grid-template-columns:1fr;gap:4px;}
  #setupWizardView .wiz-summary-value{text-align:left;}
  #setupWizardView .wiz-summary-module-list{justify-content:flex-start;}
}
@media (max-width:560px){
  #setupWizardView .wiz-module-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(92px,auto);gap:8px;margin-top:12px;}
  #setupWizardView .wiz-module-card{min-height:92px;padding:11px;gap:9px;}
}

/* The card stays compact at every viewport width. Showing every localized
   label cannot fit inside the 680px wizard panel, so retain the active step
   and the Finish destination while every numbered marker remains visible. */
#setupWizardView .stepper .step:not(.current):not(:last-child) .step-label{display:none;}