*,*::before,*::after{box-sizing:border-box}

:root{
  --chs-font-size:15px;
  --surface:rgba(255,255,255,.78);
  --surface-strong:rgba(255,255,255,.92);
  --ring:rgba(31,111,74,.18);
}

body{
  max-width:100vw;
  overflow-x:hidden;
  font-size:var(--chs-font-size);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--moss) 24%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(255,255,255,.76), transparent 22rem),
    linear-gradient(135deg, color-mix(in srgb, var(--sage) 74%, white), color-mix(in srgb, var(--sand) 62%, white) 55%, #eef5f2)!important;
}

.shell{grid-template-columns:300px minmax(0,1fr)}
aside{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58))!important;
  box-shadow:18px 0 48px rgba(23,52,42,.08);
}

.mark{
  border-radius:18px!important;
  background:linear-gradient(135deg, var(--moss), var(--moss-2))!important;
}

nav button{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
nav button::before{
  content:'';
  width:9px;
  height:9px;
  border-radius:999px;
  background:color-mix(in srgb, var(--moss) 45%, white);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--moss) 10%, transparent);
}
nav button.active, nav button:hover{
  transform:translateX(2px);
  background:linear-gradient(135deg, color-mix(in srgb, var(--moss) 15%, white), rgba(255,255,255,.72))!important;
  box-shadow:0 14px 28px rgba(23,52,42,.1);
}

.topbar{
  padding:22px;
  border:1px solid color-mix(in srgb, var(--line) 74%, white);
  border-radius:30px;
  background:linear-gradient(135deg, var(--surface-strong), rgba(255,255,255,.62));
  box-shadow:0 24px 64px rgba(23,52,42,.1);
}

.eyebrow,.chip{background:color-mix(in srgb, var(--moss) 12%, white)!important;color:var(--moss)!important}
.status-pill{background:var(--surface-strong)!important;color:var(--ink)!important}

.stat,.panel,.item{
  border-color:color-mix(in srgb, var(--line) 72%, white)!important;
  background:var(--surface)!important;
  backdrop-filter:blur(18px);
}

.panel,.stat{
  box-shadow:0 22px 64px rgba(23,52,42,.12)!important;
  max-width:100%;
}

.section,.grid,.form-group,.panel{
  width:100%;
  max-width:100%;
}

main > *,
.shell > main > *{
  max-width:100%;
}

.item{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.item:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--moss) 30%, var(--line))!important;
  box-shadow:0 16px 38px rgba(23,52,42,.09);
}

input,textarea,select{
  background:var(--field)!important;
  color:var(--input-ink, var(--ink))!important;
  font-size:calc(var(--chs-font-size) + 0px)!important;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--moss)!important;
  box-shadow:0 0 0 4px var(--ring)!important;
}

.btn{background:linear-gradient(135deg, var(--moss), var(--moss-2))!important}
.btn.secondary{background:color-mix(in srgb, var(--sand) 75%, white)!important;color:var(--ink)!important}

.settings-grid,.directory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.settings-preview{
  margin-top:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--field);
}
.directory-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:10px 0 14px;
}
.directory-toolbar select{max-width:260px}
.directory-hint{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.45}
.directory-source{font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--moss)}

.messages-panel,.row-editor-panel{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(13,30,24,.38);
  backdrop-filter:blur(8px);
}
.messages-panel.is-hidden,.row-editor-panel.is-hidden,.is-hidden{display:none!important}
.messages-panel>.panel,.row-editor-panel>.panel{
  width:min(760px,100%);
  max-height:min(86vh,900px);
  overflow:auto;
}
.messages-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.generated-message-item textarea,#responseSuccessBody textarea{
  width:100%;
  min-height:140px;
  resize:vertical;
}
.detail-workspace-bar,.dashboard-workflow-panels{
  margin:18px 0;
}
.case-stage-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0;
}
.case-stage{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 11px;
  border:1px solid color-mix(in srgb, var(--line) 70%, white);
  border-radius:999px;
  background:var(--surface-strong);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.case-stage.is-active{
  color:var(--moss);
  border-color:color-mix(in srgb, var(--moss) 36%, var(--line));
  background:linear-gradient(135deg, color-mix(in srgb, var(--moss) 14%, white), rgba(255,255,255,.82));
  box-shadow:0 10px 28px rgba(23,52,42,.1);
}
.detail-print-summary textarea{
  width:100%;
  min-height:240px;
  resize:vertical;
}
.actions{
  gap:10px;
  flex-wrap:wrap;
}

/* Mobile hamburger button — hidden on desktop */
.mob-menu-btn{
  display:none;
  border:0;
  background:none;
  cursor:pointer;
  padding:8px 10px;
  border-radius:10px;
  color:var(--moss);
  font-size:24px;
  line-height:1;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
}
.mob-menu-btn:hover{background:color-mix(in srgb, var(--sage) 80%, white)}

/* Mobile dropdown menu — always hidden by default, shown via :not(.is-hidden) on mobile */
.mob-menu{display:none}

/* Global table scroll */
table{
  max-width:100%;
  border-collapse:collapse;
}
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.item h4,.panel h3,.notice,p,a,td,th,.chip{
  overflow-wrap:anywhere;
}
.item,.panel,.stat{min-width:0;}

/* Split layout: auto-wrap columns, never overflow */
.split{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))!important;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.split > *{min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;}

/* Main: always clip horizontal overflow at every viewport size */
main{overflow-x:hidden;max-width:100%;}

/* Global overflow guard — metric/stat cells must not exceed their grid column */
[class*="-metric"],[class*="-stat"],[class*="-card"],[class*="-cell"]{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
[class*="-metric"] strong,[class*="-stat"] strong,[class*="-cell"] strong{
  display:block;
  overflow-wrap:anywhere;
  min-width:0;
}
[class*="-metric"] span,[class*="-stat"] span,[class*="-cell"] span{
  overflow-wrap:anywhere;
  min-width:0;
}
/* Chips must never overflow their parent */
.chip,.meta{
  min-width:0;
  max-width:100%;
}
/* Tables must scroll horizontally, not overflow page */
[class*="-table-wrap"],[class*="table-wrap"]{
  overflow-x:auto;
  max-width:100%;
}
/* All grids: children must not exceed column width */
[class*="-metrics"],[class*="-grid"],[class*="-row"]{
  min-width:0;
}
[class*="-metrics"] > *,[class*="-grid"] > *,[class*="-row"] > *{
  min-width:0;
  overflow:hidden;
}
.actions{display:flex;}

.chs-toast-stack{
  position:fixed;
  top:18px;
  right:18px;
  z-index:1400;
  display:grid;
  gap:10px;
  width:min(380px,calc(100vw - 28px));
  pointer-events:none;
}
.chs-toast{
  pointer-events:auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid color-mix(in srgb, var(--line) 70%, white);
  border-left:5px solid var(--moss);
  border-radius:18px;
  background:var(--surface-strong);
  color:var(--ink);
  box-shadow:0 18px 48px rgba(23,52,42,.16);
  backdrop-filter:blur(18px);
}
.chs-toast-error{border-left-color:#b42318}
.chs-toast-success{border-left-color:var(--moss)}
.chs-toast button{
  border:0;
  border-radius:999px;
  width:28px;
  height:28px;
  cursor:pointer;
  background:color-mix(in srgb, var(--sand) 75%, white);
  color:var(--ink);
  font-size:18px;
  line-height:1;
}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  aside{position:relative;min-height:auto}
  nav{grid-template-columns:repeat(3,1fr)!important}
  main{padding:22px!important}
}

/* Mobile navigation drawer controls (hidden on desktop) */
.nav-hamburger{
  display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  width:44px; height:44px; flex:0 0 auto; padding:0;
  border-radius:13px; border:1px solid var(--line);
  background:var(--surface,var(--paper)); color:var(--ink); cursor:pointer;
}
.nav-hamburger span{ display:block; width:20px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
body.nav-open .nav-hamburger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2){ opacity:0; }
body.nav-open .nav-hamburger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav-backdrop{
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.45); opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }

@media (max-width:768px){
  :root{--chs-font-size:14px}
  body{min-width:0;overflow-x:hidden}
  .shell{display:block;max-width:100vw;overflow-x:hidden}
  main{overflow-x:hidden;max-width:100vw}
  /* Sidebar becomes an off-canvas drawer toggled by the hamburger */
  aside{
    position:fixed!important;
    top:0; left:0; z-index:1000!important;
    width:min(86vw,330px)!important;
    max-width:330px;
    height:100dvh!important;
    transform:translateX(-100%);
    transition:transform .28s ease;
    border-radius:0!important;
    overscroll-behavior:contain;
  }
  body.nav-open aside{ transform:translateX(0)!important; box-shadow:0 30px 90px rgba(0,0,0,.45); }
  .mobile-section-picker{ display:none!important; }
  /* Show the real nav inside the drawer (working-ui hides it for the old picker) */
  aside nav{ display:grid!important; grid-template-columns:1fr!important; gap:4px; }
  aside nav button{ width:100%!important; text-align:left; justify-content:flex-start; }
  .nav-hamburger{ display:inline-flex!important; position:relative; z-index:1001; }
  /* Mobile dashboard: hide case card panels, keep stat buttons only */
  #dashboardCasesPanel{display:none!important}
  #activeCaseOverview{display:none!important}
  /* Stat cards become tappable nav buttons on mobile */
  .stat-btn{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s}
  .stat-btn:active{transform:scale(.97);box-shadow:0 4px 16px rgba(23,52,42,.10)}
  .stat-btn strong{font-size:40px}
  .stat-mob-hidden{display:none!important}
  /* topbar-actions covers title column due to grid layout — make it click-transparent */
  .topbar-actions{pointer-events:none}
  .topbar-actions button,.topbar-actions a,.topbar-actions select,.topbar-actions input{pointer-events:auto}
  /* Tappable section title — back to dashboard */
  .section-title-back{cursor:pointer;user-select:none}
  .section-title-back::before{content:'← '}
  /* Mob-menu dropdown when open */
  .mob-menu:not(.is-hidden){
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 16px;
    background:var(--surface-strong);
    border-bottom:1px solid color-mix(in srgb, var(--line) 72%, white);
    box-shadow:0 8px 24px rgba(23,52,42,.10);
  }
  .mob-menu button{
    width:100%;
    text-align:left;
    min-height:44px;
    padding:10px 14px!important;
    border-radius:14px;
    font-size:14px!important;
    background:transparent;
  }
  .mob-menu button.active{
    background:linear-gradient(135deg, color-mix(in srgb, var(--moss) 15%, white), rgba(255,255,255,.72))!important;
    color:var(--moss);
  }
  main{padding:16px!important}
  .topbar{
    padding:16px;
    border-radius:22px;
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
  }
  /* hamburger + title share the first row, title left-aligned */
  .topbar > .topbar-heading,.topbar > div:not(.topbar-actions):not(.nav-hamburger){
    flex:1 1 auto; min-width:0; order:2;
  }
  .nav-hamburger{ order:1; }
  .topbar-actions{
    order:3; flex:1 1 100%;
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  }
  .topbar h2{font-size:22px!important;line-height:1.1;text-align:left}
  .topbar .eyebrow{text-align:left}
  .status-pill{display:inline-flex;max-width:100%;font-size:12px}
  .settings-grid,.settings-grid--wide,.directory-grid,.row,.appearance-scheme-grid{grid-template-columns:1fr!important}
  /* Compact 2-up stat cards on mobile instead of one giant card per row */
  .grid.stats{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .grid.stats .stat,.grid.stats .stat-btn{padding:14px 14px!important;border-radius:16px!important;min-height:0}
  .grid.stats .stat strong,.grid.stats .stat-btn strong{font-size:28px!important;line-height:1.1}
  .grid.stats .stat span,.grid.stats .stat-btn span{font-size:11px}
  .panel{padding:16px!important;border-radius:22px!important}
  .item{padding:14px!important;border-radius:18px!important}
  .actions{display:grid!important;grid-template-columns:1fr;align-items:stretch}
  .actions .btn,.actions a.btn,.btn{
    width:100%;
    min-height:46px;
    justify-content:center;
    text-align:center;
  }
  input,textarea,select{min-height:46px}
  textarea{min-height:112px}
  .messages-panel,.row-editor-panel{
    align-items:flex-end;
    padding:10px;
  }
  .messages-panel>.panel,.row-editor-panel>.panel{
    width:100%;
    max-height:88vh;
    border-radius:24px 24px 18px 18px!important;
    padding:16px!important;
  }
  .messages-panel-head{
    display:grid;
    grid-template-columns:1fr;
  }
  .case-stage-bar{display:grid;grid-template-columns:1fr}
  .case-stage{justify-content:center}
  .directory-toolbar{display:grid;grid-template-columns:1fr}
  .directory-toolbar select{max-width:none;width:100%}
  .chs-toast-stack{
    top:auto;
    right:10px;
    bottom:10px;
    width:calc(100vw - 20px);
  }
}

@media (max-width:420px){
  aside{padding:14px!important}
  nav{grid-template-columns:1fr!important}
  main{padding:12px!important}
  .topbar{border-radius:18px}
  .topbar-actions{
    gap:6px;
  }
  .panel{padding:14px!important}
  .chip{max-width:100%;white-space:normal}
}

/* CHS left navigation independent scroll fix */
@media (min-width:981px){
  html,
  body{
    height:100%;
    max-width:100%;
    overflow:hidden;
  }

  .shell{
    height:100vh;
    min-height:100vh;
    max-height:100vh;
    max-width:100vw;
    overflow:hidden;
    grid-template-columns:300px minmax(0,1fr);
  }

  aside{
    box-sizing:border-box;
    position:sticky;
    top:0;
    align-self:stretch;
    height:100vh;
    max-height:100vh;
    min-height:0;
    max-width:300px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    overscroll-behavior-x:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    scrollbar-gutter:stable;
  }

  aside nav{
    display:grid;
    grid-template-columns:1fr!important;
    min-height:0;
    overflow:visible;
    overflow-x:hidden;
    touch-action:pan-y;
  }

  aside nav button,
  aside nav button.active,
  aside nav button:hover{
    width:100%;
    max-width:100%;
    min-width:0;
    transform:none!important;
  }

  main{
    min-width:0;
    min-height:0;
    height:100vh;
    max-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    overscroll-behavior-x:none;
    -webkit-overflow-scrolling:touch;
  }
}

@supports (height:100dvh){
  @media (min-width:981px){
    .shell,
    aside,
    main{
      height:100dvh;
      max-height:100dvh;
    }
  }
}

@media (max-width:980px){
  html,
  body{
    height:auto;
    max-width:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }

  .shell{
    height:auto;
    min-height:100vh;
    max-height:none;
    max-width:100vw;
    overflow-x:hidden;
    overflow-y:visible;
  }

  aside{
    height:auto;
    max-height:none;
    max-width:none;
    overflow-x:hidden;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }

  aside nav{
    overflow-x:hidden;
    overflow-y:visible;
    touch-action:pan-y;
  }

  aside nav button,
  aside nav button.active,
  aside nav button:hover{
    transform:none!important;
  }

  main{
    height:auto;
    max-height:none;
    overflow-x:hidden;
    overflow-y:visible;
  }
}

/* ====================================================================
   CHS DIAGNOSTIC PANEL HIDE
   Hides developer/QA diagnostic, dry-run, write-gate and readiness
   panels that are not part of the coordinator workflow
   (case -> form -> schedule -> messages -> tracking).
   The scripts and their safety-contract markers remain intact; this is
   a presentation-only hide. Remove this block to restore visibility.
   ==================================================================== */
#actionPreviewEndpointWiringPanel,
#assignmentSuggestionPreviewPanel,
#assignmentSuggestionSampleActionPanel,
#assignmentSuggestionSampleActionButton,
#endpointPreviewOperatorVerificationPanel,
#formsDryRunStatusActionPanel,
#formsDryRunStatusActionButton,
#formsLiveAdapterAdminStatusPanel,
#intakeAcceptRejectOperatorReadinessPanel,
#intakeReadinessPanel,
#intakeDecisionContractReadinessPanel,
#intakeDryRunPreviewActionPanel,
#intakeDryRunPreviewActionButton,
#intakeDryRunPreviewPanel,
#intakeDuplicateProtectionReadinessPanel,
#intakeLiveReadinessPanel,
#intakeManualReviewReadinessPanel,
#liveActionReadinessChecklistPanel,
#roleCapabilityCurrentUserReportPanel,
#roleCapabilityCurrentUserReportButton,
#roleCapabilityReportPanel,
#writeGatePreflightReportPanel,
#writeGateRegistryStatusPanel {
  display: none !important;
}