/* Jaystool unified tool UI — 2026-08-17
   Visual-only layer. Keeps individual tool logic intact. */
:root{
  --jt-ink:#102038;
  --jt-muted:#64748b;
  --jt-line:#dbe3ef;
  --jt-soft:#f7f9fc;
  --jt-primary:#183e72;
  --jt-primary-hover:#12345f;
  --jt-danger:#a63a3a;
  --jt-danger-soft:#fff3f3;
  --jt-radius:10px;
}
body.jaystool-unified-ui{
  color:var(--jt-ink);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.jaystool-unified-ui h1,
body.jaystool-unified-ui h2,
body.jaystool-unified-ui h3,
body.jaystool-unified-ui h4{
  color:var(--jt-ink);
  letter-spacing:-.015em;
}
body.jaystool-unified-ui .subpage-title{font-weight:800;letter-spacing:-.025em;}
body.jaystool-unified-ui .muted,
body.jaystool-unified-ui .sub,
body.jaystool-unified-ui .helper,
body.jaystool-unified-ui .hint{color:var(--jt-muted);}

/* Unified Home / Back navigation */
body.jaystool-unified-ui :is(.back-link,.back,.home,.tool-link,.jaystool-global-home),
body.jaystool-unified-ui header.top a[href="index.html"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--jt-line);
  border-radius:9px;
  background:#fff;
  color:#4b5d76;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
body.jaystool-unified-ui :is(.back-link,.back,.home,.tool-link,.jaystool-global-home):hover,
body.jaystool-unified-ui header.top a[href="index.html"]:hover{
  background:var(--jt-soft);
  border-color:#bcc9d9;
  color:var(--jt-ink);
  transform:translateY(-1px);
}
body.jaystool-unified-ui .jaystool-global-home{
  position:fixed;
  top:18px;
  right:20px;
  z-index:9000;
}

/* Button hierarchy — navy primary, white secondary, restrained danger */
body.jaystool-unified-ui :is(.btn,.primary,button.btn-dark){
  border-radius:8px;
  box-shadow:none;
}
body.jaystool-unified-ui :is(.btn.btn-dark,button.btn-dark,.btn:not(.secondary):not(.danger):not(.ghost):not(.btn-light),button.primary,.primary){
  background:var(--jt-primary);
  border-color:var(--jt-primary);
  color:#fff;
}
body.jaystool-unified-ui :is(.btn.btn-dark,button.btn-dark,.btn:not(.secondary):not(.danger):not(.ghost):not(.btn-light),button.primary,.primary):hover:not(:disabled){
  background:var(--jt-primary-hover);
  border-color:var(--jt-primary-hover);
}
body.jaystool-unified-ui :is(.btn-secondary,.btn.secondary,.secondary,.btn-light,.btn.ghost,button.ghost){
  background:#fff;
  color:#40516a;
  border-color:#cbd6e4;
}
body.jaystool-unified-ui :is(.btn-secondary,.btn.secondary,.secondary,.btn-light,.btn.ghost,button.ghost):hover:not(:disabled){
  background:var(--jt-soft);
  border-color:#afbed1;
  color:var(--jt-ink);
}
body.jaystool-unified-ui :is(.danger,.btn.danger,button.danger){
  background:#fff;
  color:var(--jt-danger);
  border-color:#e9c5c5;
}
body.jaystool-unified-ui :is(.danger,.btn.danger,button.danger):hover:not(:disabled){background:var(--jt-danger-soft);}
body.jaystool-unified-ui button:disabled{opacity:.45;cursor:not-allowed;}

/* Inputs and work surfaces */
body.jaystool-unified-ui :is(input[type="text"],input[type="password"],input[type="number"],input[type="date"],select,textarea){
  border-color:#cbd6e4;
  border-radius:8px;
  box-shadow:none;
}
body.jaystool-unified-ui :is(input,select,textarea):focus{
  outline:none;
  border-color:#7f9fc8;
  box-shadow:0 0 0 3px rgba(64,108,162,.10);
}
body.jaystool-unified-ui :is(.card,.panel,.box,.upload-card,.dropzone,.drop-zone){box-shadow:none;}
body.jaystool-unified-ui table{border-color:var(--jt-line);}
body.jaystool-unified-ui th{font-weight:700;}

/* Common compact header rhythm */
body.jaystool-unified-ui :is(.hero-inner,.subpage-header,.section-header,.topbar){
  border-color:var(--jt-line);
}

@media(max-width:800px){
  body.jaystool-unified-ui .jaystool-global-home{top:10px;right:10px;}
}

/* 2026-08-17 consistency refinement — stronger late-page overrides */
body.jaystool-unified-ui :is(.back-link,.back,.home,.jaystool-global-home),
body.jaystool-unified-ui header.top a[href="index.html"]{
  width:auto !important;
  min-width:132px !important;
  max-width:max-content !important;
  flex:0 0 auto !important;
  align-self:flex-start !important;
  padding:9px 14px !important;
  background:#fff !important;
  color:#43536b !important;
  border:1px solid #cfd8e5 !important;
  border-radius:9px !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
}
body.jaystool-unified-ui :is(.back-link,.back,.home,.jaystool-global-home):hover,
body.jaystool-unified-ui header.top a[href="index.html"]:hover{
  background:#f7f9fc !important;
  color:#102038 !important;
  border-color:#b7c4d5 !important;
}
body.jaystool-unified-ui :is(.hero-inner,.subpage-header,.topbar){
  align-items:center !important;
}
body.jaystool-unified-ui :is(.btn.btn-dark,button.btn-dark,button.primary,.primary){
  background:#183e72 !important;
  border-color:#183e72 !important;
  color:#fff !important;
  box-shadow:none !important;
}
body.jaystool-unified-ui :is(.btn-secondary,.btn.secondary,.secondary,.btn-light,.btn.ghost,button.ghost){
  background:#fff !important;
  color:#40516a !important;
  border-color:#cbd6e4 !important;
  box-shadow:none !important;
}
body.jaystool-unified-ui :is(.danger,.btn.danger,button.danger){
  background:#fff !important;
  color:#a63a3a !important;
  border-color:#e9c5c5 !important;
  box-shadow:none !important;
}

/* Shared page-title scale so legacy tools feel like one product */
body.jaystool-unified-ui :is(.hero h1,.hero-inner h1,.subpage-title,h1.page-title){
  font-size:clamp(30px,2.35vw,40px) !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
  margin-top:0 !important;
}
body.jaystool-unified-ui :is(.breadcrumb,.eyebrow,.kicker){
  font-size:11px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#748198 !important;
}

/* 2026-08-17 full product consistency pass */
:root{
  --jt-page-max:1480px;
  --jt-page-pad:28px;
  --jt-navy:#183e72;
  --jt-navy-hover:#12345f;
  --jt-navy-soft:#eef4fb;
}

/* One visual header system across legacy tool pages */
body.jaystool-unified-ui .subpage-hero,
body.jaystool-unified-ui > header.hero{
  background:#fff !important;
  color:var(--jt-ink) !important;
  border:0 !important;
  border-bottom:1px solid var(--jt-line) !important;
  box-shadow:none !important;
  padding:0 var(--jt-page-pad) !important;
}
body.jaystool-unified-ui .subpage-hero::before,
body.jaystool-unified-ui .subpage-hero::after,
body.jaystool-unified-ui > header.hero::before,
body.jaystool-unified-ui > header.hero::after{display:none !important;content:none !important;}
body.jaystool-unified-ui .subpage-inner,
body.jaystool-unified-ui > header.hero > .hero-inner{
  width:100% !important;
  max-width:var(--jt-page-max) !important;
  min-height:112px !important;
  margin:0 auto !important;
  padding:26px 0 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
  flex-wrap:nowrap !important;
}
body.jaystool-unified-ui .subpage-inner > div:first-child,
body.jaystool-unified-ui > header.hero > .hero-inner > div:first-child{min-width:0 !important;flex:1 1 auto !important;}
body.jaystool-unified-ui :is(.subpage-hero,.hero) :is(.breadcrumb,.eyebrow,.kicker){
  margin:0 0 7px !important;
  opacity:1 !important;
  color:#718099 !important;
  font-size:10.5px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}
body.jaystool-unified-ui :is(.subpage-hero,.hero) :is(.subpage-title,h1){
  margin:0 !important;
  max-width:900px !important;
  font-size:34px !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  letter-spacing:-.028em !important;
  color:#102038 !important;
}
body.jaystool-unified-ui :is(.subpage-hero,.hero) :is(.subpage-subtitle,.subtitle,p){
  color:#64748b !important;
}

/* Same compact Back to Home control everywhere */
body.jaystool-unified-ui :is(.back-link,.back,.home,.jaystool-global-home),
body.jaystool-unified-ui header.top a[href="index.html"]{
  min-width:0 !important;
  width:auto !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border:1px solid #d6deea !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#40516a !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
body.jaystool-unified-ui :is(.back-link,.back,.home,.jaystool-global-home):hover,
body.jaystool-unified-ui header.top a[href="index.html"]:hover{
  background:#f6f9fd !important;
  color:#102038 !important;
  border-color:#b9c7d8 !important;
  transform:none !important;
}

/* Nordstrom-style button system, including legacy plain buttons */
body.jaystool-unified-ui button:not(.danger):not(.secondary):not(.ghost):not(.btn-light):not(.mini-btn):not(.fold-toggle):not(.modal-close),
body.jaystool-unified-ui .btn:not(.danger):not(.secondary):not(.ghost):not(.btn-light),
body.jaystool-unified-ui .primary,
body.jaystool-unified-ui button.primary{
  background:var(--jt-navy) !important;
  color:#fff !important;
  border:1px solid var(--jt-navy) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease !important;
}
body.jaystool-unified-ui button:not(.danger):not(.secondary):not(.ghost):not(.btn-light):not(.mini-btn):not(.fold-toggle):not(.modal-close):hover:not(:disabled),
body.jaystool-unified-ui .btn:not(.danger):not(.secondary):not(.ghost):not(.btn-light):hover:not(:disabled),
body.jaystool-unified-ui .primary:hover:not(:disabled){
  background:var(--jt-navy-hover) !important;
  border-color:var(--jt-navy-hover) !important;
  transform:translateY(-1px) !important;
}
body.jaystool-unified-ui :is(button.secondary,.secondary,.btn.secondary,.btn-secondary,.btn-light,button.ghost,.btn.ghost){
  background:#fff !important;
  color:#40516a !important;
  border:1px solid #cbd6e4 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  font-weight:700 !important;
}
body.jaystool-unified-ui :is(button.secondary,.secondary,.btn.secondary,.btn-secondary,.btn-light,button.ghost,.btn.ghost):hover:not(:disabled){
  background:#f6f9fd !important;
  color:#102038 !important;
  border-color:#afbed1 !important;
}
body.jaystool-unified-ui :is(button.danger,.danger,.btn.danger){
  background:#fff !important;
  color:#a33a3a !important;
  border:1px solid #ebcaca !important;
  border-radius:8px !important;
  box-shadow:none !important;
  font-weight:700 !important;
}
body.jaystool-unified-ui :is(button.danger,.danger,.btn.danger):hover:not(:disabled){background:#fff5f5 !important;}

/* Reduce legacy oversized pill buttons */
body.jaystool-unified-ui button:not(.fold-toggle):not(.modal-close),
body.jaystool-unified-ui .btn{
  min-height:38px;
  padding:9px 14px;
  border-radius:8px !important;
}

/* Legacy work areas should start at a consistent distance below the header */
body.jaystool-unified-ui > .section,
body.jaystool-unified-ui > main,
body.jaystool-unified-ui .page.active > main{
  margin-top:0 !important;
}

/* Privy Line Sheet: perfectly centered pastel section labels */
body.jaystool-unified-ui .fold-toggle{
  grid-template-columns:40px minmax(0,1fr) 40px !important;
  min-height:76px !important;
  padding:10px 12px !important;
  align-items:center !important;
  text-align:center !important;
}
body.jaystool-unified-ui .fold-toggle::before{
  justify-self:center !important;
  align-self:center !important;
}
body.jaystool-unified-ui .fold-toggle .fold-meta{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:2px !important;
  margin:0 !important;
}
body.jaystool-unified-ui .fold-toggle .fold-meta > span:first-child{
  width:100% !important;
  text-align:center !important;
  line-height:1.15 !important;
}
body.jaystool-unified-ui .fold-toggle .fold-sub{
  width:100% !important;
  text-align:center !important;
  line-height:1.2 !important;
  margin:2px 0 0 !important;
}
body.jaystool-unified-ui .fold-toggle .fold-arrow{
  justify-self:center !important;
  align-self:center !important;
  width:20px !important;
  text-align:center !important;
}

@media(max-width:800px){
  :root{--jt-page-pad:18px;}
  body.jaystool-unified-ui .subpage-inner,
  body.jaystool-unified-ui > header.hero > .hero-inner{min-height:96px !important;padding:20px 0 !important;gap:14px !important;align-items:flex-start !important;}
  body.jaystool-unified-ui :is(.subpage-hero,.hero) :is(.subpage-title,h1){font-size:28px !important;}
}

/* ===== 2026-08-17 Soft workspace refinement =====
   Make every tool feel like the Nordstrom utilities: lighter controls,
   white workspaces, subtle separation, and no heavy black action blocks. */
:root{
  --jt-primary:#365f91;
  --jt-primary-hover:#2d527f;
  --jt-primary-soft:#eef4fb;
  --jt-border-soft:#e3e9f1;
  --jt-panel-line:#e6ebf2;
}

/* Remove the legacy "black slab" appearance from action buttons. */
body.jaystool-unified-ui button:not(.danger):not(.secondary):not(.ghost):not(.btn-light):not(.fold-toggle):not(.modal-close):not(.icon-btn),
body.jaystool-unified-ui .btn:not(.danger):not(.secondary):not(.ghost):not(.btn-light),
body.jaystool-unified-ui .primary,
body.jaystool-unified-ui button.primary,
body.jaystool-unified-ui .tab.active,
body.jaystool-unified-ui .tabs button.active,
body.jaystool-unified-ui .ep-mode button.active,
body.jaystool-unified-ui .pro-mode-toggle button.active,
body.jaystool-unified-ui .excel-sheet-chip.active,
body.jaystool-unified-ui .merge-chip{
  background:var(--jt-primary) !important;
  border-color:var(--jt-primary) !important;
  color:#fff !important;
  box-shadow:none !important;
}
body.jaystool-unified-ui button:not(.danger):not(.secondary):not(.ghost):not(.btn-light):not(.fold-toggle):not(.modal-close):not(.icon-btn):hover:not(:disabled),
body.jaystool-unified-ui .btn:not(.danger):not(.secondary):not(.ghost):not(.btn-light):hover:not(:disabled),
body.jaystool-unified-ui .primary:hover:not(:disabled),
body.jaystool-unified-ui .tab.active:hover{
  background:var(--jt-primary-hover) !important;
  border-color:var(--jt-primary-hover) !important;
}

/* Buttons should be compact actions rather than large dark panels. */
body.jaystool-unified-ui button:not(.fold-toggle):not(.modal-close):not(.icon-btn),
body.jaystool-unified-ui .btn{
  min-height:38px !important;
  padding:9px 15px !important;
  border-radius:9px !important;
}

/* Left-side work/control panes: white, subtle, and visually connected. */
body.jaystool-unified-ui aside.card,
body.jaystool-unified-ui .tool-controls,
body.jaystool-unified-ui .sidebar,
body.jaystool-unified-ui .left-panel,
body.jaystool-unified-ui .control-panel,
body.jaystool-unified-ui .controls-panel,
body.jaystool-unified-ui .excel-studio-controls,
body.jaystool-unified-ui .workspace-sidebar{
  background:#fff !important;
  background-image:none !important;
  border-color:var(--jt-panel-line) !important;
  box-shadow:none !important;
}

/* When an aside is the dedicated left workflow pane, reduce the card-within-card look. */
body.jaystool-unified-ui aside.card{
  border-radius:14px !important;
  padding:16px !important;
}
body.jaystool-unified-ui aside.card :is(.card,.panel,.download-zone,.merge-panel,.status){
  box-shadow:none !important;
}
body.jaystool-unified-ui aside.card .download-zone{
  background:#fff !important;
  background-image:none !important;
  border-top:1px solid var(--jt-border-soft) !important;
  padding-top:12px !important;
}

/* Beige/cream legacy workspace surfaces should read as white tools. */
body.jaystool-unified-ui :is(.tool-controls,.sidebar,aside.card) :is(.merge-panel,.status,.file-item,.upload-card),
body.jaystool-unified-ui :is(.tool-controls,.sidebar,aside.card) .card{
  background:#fff !important;
  background-image:none !important;
  border-color:var(--jt-border-soft) !important;
}

/* Softer separation between the left workflow and main workspace. */
body.jaystool-unified-ui :is(.grid,.tool-shell,.excel-studio-shell,.workspace-grid){
  column-gap:20px !important;
}

/* Homepage tool cards use the same calmer action style. */
body.jaystool-unified-ui .tool-card :is(a,button).btn,
body.jaystool-unified-ui .tool-card .tool-link,
body.jaystool-unified-ui .tools-grid :is(a,button).btn{
  background:var(--jt-primary) !important;
  border-color:var(--jt-primary) !important;
  color:#fff !important;
}

/* ===== 2026-08-17 White-control refinement =====
   Default tool actions are quiet white controls. Filled color is reserved for compact selected states only. */
:root{
  --jt-btn-bg:#ffffff;
  --jt-btn-border:#ccd7e5;
  --jt-btn-text:#28415f;
  --jt-btn-hover:#f7f9fc;
  --jt-btn-active:#edf3fa;
  --jt-btn-active-border:#adc0d8;
}
body.jaystool-unified-ui :is(button,.btn,.tool-link,.download-link,input[type=button],input[type=submit]):not(.danger):not(.modal-close):not(.icon-btn):not(.password-eye-btn){
  background:var(--jt-btn-bg) !important;
  color:var(--jt-btn-text) !important;
  border:1px solid var(--jt-btn-border) !important;
  box-shadow:none !important;
  font-weight:700 !important;
  border-radius:9px !important;
}
body.jaystool-unified-ui :is(button,.btn,.tool-link,.download-link,input[type=button],input[type=submit]):not(.danger):not(.modal-close):not(.icon-btn):not(.password-eye-btn):hover:not(:disabled){
  background:var(--jt-btn-hover) !important;
  border-color:#aebdd0 !important;
  color:#152c48 !important;
  transform:none !important;
}
/* Selected/toggled controls still need a visible state, but keep it pale. */
body.jaystool-unified-ui :is(.tab.active,.tabs button.active,.ep-mode button.active,.pro-mode-toggle button.active,.excel-sheet-chip.active,.merge-chip,.toggle.active,[aria-pressed="true"]){
  background:var(--jt-btn-active) !important;
  color:#234d7d !important;
  border-color:var(--jt-btn-active-border) !important;
  box-shadow:inset 0 0 0 1px rgba(54,95,145,.04) !important;
}
/* Universal white Home control. */
body.jaystool-unified-ui :is(a.home-button,a.home-btn,a.back-link,a.back,.home-button,.home-btn,#homeBtn,.top-home-button){
  background:#fff !important;
  color:#40536c !important;
  border:1px solid #d7e0eb !important;
  box-shadow:none !important;
  min-height:36px !important;
  padding:8px 13px !important;
  border-radius:9px !important;
}
body.jaystool-unified-ui :is(a.home-button,a.home-btn,a.back-link,a.back,.home-button,.home-btn,#homeBtn,.top-home-button):hover{
  background:#f8fafc !important;
  color:#152c48 !important;
  border-color:#b9c6d6 !important;
}
/* Homepage Open Tool actions should also stay white. */
body.jaystool-unified-ui .tool-card :is(a,button).btn,
body.jaystool-unified-ui .tool-card .tool-link,
body.jaystool-unified-ui .tools-grid :is(a,button).btn{
  background:#fff !important;
  color:#28415f !important;
  border:1px solid #cbd6e4 !important;
}
/* Side workspaces read as part of the page, not a separate colored application. */
body.jaystool-unified-ui :is(aside.card,.tool-controls,.sidebar,.left-panel,.control-panel,.controls-panel,.excel-studio-controls,.workspace-sidebar){
  background:#fff !important;
  border-color:#e5eaf1 !important;
  box-shadow:none !important;
}
body.jaystool-unified-ui :is(aside.card,.tool-controls,.sidebar,.left-panel,.control-panel,.controls-panel,.excel-studio-controls,.workspace-sidebar) :is(.card,.panel,.status,.download-zone,.upload-card,.merge-panel){
  background:#fff !important;
  box-shadow:none !important;
}


/* 2026-08-18 final soft-white action button pass */
body.jaystool-unified-ui :is(a.home-button,a.home-btn,a.back-link,a.back,.home-button,.home-btn,#homeBtn,.top-home-button,.tool-link[href="index.html"],a[href="index.html"].tool-link){
  background:#fff !important;
  color:#3e516a !important;
  border:1px solid #d6dee9 !important;
  box-shadow:none !important;
}
body.jaystool-unified-ui :is(a.home-button,a.home-btn,a.back-link,a.back,.home-button,.home-btn,#homeBtn,.top-home-button,.tool-link[href="index.html"],a[href="index.html"].tool-link):hover{
  background:#f8fafc !important;
  color:#172c45 !important;
  border-color:#c1ccda !important;
}
body.jaystool-unified-ui :is(button,.btn,.tool-link,input[type=button],input[type=submit]):not(.danger):not(.icon-btn):not(.password-eye-btn){
  background:#fff !important;
  color:#2e4563 !important;
  border:1px solid #d3dce8 !important;
  box-shadow:none !important;
}
body.jaystool-unified-ui :is(button,.btn,.tool-link,input[type=button],input[type=submit]):not(.danger):not(.icon-btn):not(.password-eye-btn):hover:not(:disabled){
  background:#f7fafc !important;
  color:#152c48 !important;
  border-color:#bcc9d8 !important;
}
body.jaystool-unified-ui :is(button:disabled,.btn:disabled,input[type=button]:disabled,input[type=submit]:disabled){
  background:#f6f8fb !important;
  color:#9aa6b6 !important;
  border-color:#e1e7ef !important;
}