/* Surety 2.8.3 — focus control visibility repair and layout stabilization */
:root{
  --ux300-content:1280px;
  --ux300-reading:760px;
  --ux300-page-x:clamp(16px,2.2vw,32px);
  --ux300-section-gap:clamp(14px,1.5vw,20px);
  --ux300-panel-pad:clamp(16px,1.8vw,24px);
  --ux300-radius:16px;
  --ux300-shadow:0 8px 24px rgba(18,25,48,.055);
}

/* Shell and content containment */
body.ux300-ready[data-layout="workspace"]{background:var(--background,#f4f6fa)}
body.ux300-ready[data-layout="workspace"] :where(.main,.employee-main,.admin-main,.case-main){min-width:0}
body.ux300-ready[data-layout="workspace"] :where(.main>.page,.employee-main,.admin-main>.page,.case-main>.page){width:min(100%,var(--ux300-content));margin-inline:auto}
body.ux300-ready[data-layout="workspace"] .page{padding-inline:var(--ux300-page-x);padding-top:clamp(16px,2vw,26px)}
body.ux300-ready .panel-workspace{gap:var(--ux300-section-gap)}
body.ux300-ready .panel-workspace>*+*{margin-top:0}
body.ux300-ready .skip-link:not(:focus):not(:focus-visible){transform:translateY(-220%);pointer-events:none}

/* Topbar: preserve context and stop icon crowding */
body.ux300-ready .private-topbar{gap:12px;padding-inline:clamp(12px,2vw,22px)}
body.ux300-ready .topbar-context{min-width:150px}
body.ux300-ready .topbar-context span{font-size:.68rem;letter-spacing:.08em}
body.ux300-ready .topbar-context strong{font-size:.92rem;line-height:1.2}
body.ux300-ready .global-search-wrap{max-width:620px}
body.ux300-ready .global-search{min-height:42px}
body.ux300-ready .topbar-actions{flex:0 0 auto;margin-left:0}

/* Compact, readable page headers */
body.ux300-ready :where(.workspace-hero,.panel-hero,.page-heading,.admin-heading,.case-heading){
  min-height:0!important;
  margin:0 0 var(--ux300-section-gap);
  padding:clamp(20px,2.4vw,32px)!important;
  align-items:flex-start;
  border-radius:var(--ux300-radius);
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 42%,var(--surface)) 0%,var(--surface) 68%);
  box-shadow:var(--ux300-shadow);
}
body.ux300-ready :where(.workspace-hero,.panel-hero,.page-heading,.admin-heading,.case-heading)::before,
body.ux300-ready :where(.workspace-hero,.panel-hero,.page-heading,.admin-heading,.case-heading)::after{display:none!important}
body.ux300-ready :where(.workspace-hero,.panel-hero,.page-heading,.admin-heading,.case-heading) h1{
  margin:.25rem 0 .55rem;
  font-size:clamp(1.85rem,2.7vw,2.75rem);
  line-height:1.08;
  letter-spacing:-.035em;
}
body.ux300-ready :where(.workspace-hero,.panel-hero,.page-heading,.admin-heading,.case-heading) p{
  max-width:72ch;
  font-size:clamp(.9rem,.25vw + .84rem,1rem);
  line-height:1.55;
}
body.ux300-ready :where(.page-actions,.heading-actions,.employee-hero-actions){gap:8px}

/* One panel rhythm; remove double containers and tinted card noise */
body.ux300-ready :where(.panel,.employee-work-card,.employee-context-card,.admin-section,.case-card,.transaction-workspace){
  margin:0 0 var(--ux300-section-gap);
  padding:var(--ux300-panel-pad);
  border:1px solid var(--line,var(--border));
  border-radius:var(--ux300-radius);
  background:var(--surface,#fff);
  box-shadow:var(--ux300-shadow);
}
body.ux300-ready :where(.panel,.employee-work-card,.employee-context-card,.admin-section,.case-card,.transaction-workspace)>.panel-header,
body.ux300-ready :where(.panel,.employee-work-card,.employee-context-card,.admin-section,.case-card,.transaction-workspace)>.section-head{
  min-height:0;
  margin:0 0 16px;
  padding:0 0 14px;
  gap:12px;
  border-bottom:1px solid var(--line,var(--border));
  background:none;
}
body.ux300-ready .panel-header>div:first-child{flex:1 1 auto!important;min-width:0}
body.ux300-ready :where(.panel-header,.section-head) h2{margin:.15rem 0 .3rem;font-size:clamp(1.15rem,.4vw + 1rem,1.42rem);line-height:1.2}
body.ux300-ready :where(.panel-header,.section-head) p{margin:0;max-width:72ch;font-size:.88rem;line-height:1.5}
body.ux300-ready .section-label,
body.ux300-ready .eyebrow{font-size:.69rem;letter-spacing:.095em}

/* Journey pages */
body.ux300-ready .journey-command-bar{
  margin:0 0 var(--ux300-section-gap);
  padding:clamp(18px,2vw,24px);
  gap:16px;
  border-radius:var(--ux300-radius);
  background:var(--surface,#fff);
  box-shadow:var(--ux300-shadow);
}
body.ux300-ready .journey-command-bar h2{font-size:1.25rem}
body.ux300-ready .journey-resume-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
body.ux300-ready .journey-resume-grid>a{min-height:72px;background:var(--surface,#fff)}
body.ux300-ready .journey-work-card{padding:16px;gap:14px;box-shadow:none}
body.ux300-ready .journey-work-heading{align-items:flex-start}
body.ux300-ready .journey-work-heading .status-badge{flex:0 0 auto}
body.ux300-ready .universal-readiness,
body.ux300-ready .universal-readiness-form{border-radius:12px}
body.ux300-ready .mobile-next-action{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));border-radius:14px}

/* Forms: actions stay after fields and validation stays inside the form hierarchy */
body.ux300-ready form.ux280-long-form{padding-bottom:0!important}
body.ux300-ready form.ux280-long-form>.form-actions:last-child,
body.ux300-ready form.ux280-long-form>:last-child.form-actions,
body.ux300-ready .form-actions.is-sticky{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  margin:20px 0 0!important;
  padding:16px 0 0!important;
  border:0!important;
  border-top:1px solid var(--line,var(--border))!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.ux300-ready .register-form{width:100%;max-width:960px;margin-inline:auto}
body.ux300-ready .register-form>label{font-size:.82rem}
body.ux300-ready :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){font-size:1rem}
body.ux300-ready .ux280-error-summary{margin:0 0 18px}
body.ux300-ready .universal-readiness-form{margin:16px 0 0}
body.ux300-ready .form-actions{gap:10px}

/* Billing: make one coherent surface and eliminate empty dead zones */
body.ux300-ready .billing-shell{
  gap:0!important;
  margin:0 0 var(--ux300-section-gap);
  overflow:hidden;
  border:1px solid var(--line,var(--border));
  border-radius:var(--ux300-radius);
  background:var(--surface,#fff);
  box-shadow:var(--ux300-shadow);
}
body.ux300-ready .billing-overview{
  min-height:0;
  padding:clamp(20px,2.3vw,30px);
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  gap:20px;
  align-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 36%,var(--surface)) 0%,var(--surface) 72%);
}
body.ux300-ready .billing-overview h2{font-size:clamp(1.35rem,1vw + 1rem,1.8rem)}
body.ux300-ready .billing-balance{min-height:0;padding:16px 18px;border-radius:14px}
body.ux300-ready .billing-summary-grid{padding:0 clamp(20px,2.3vw,30px) clamp(20px,2.3vw,30px);gap:12px}
body.ux300-ready .billing-summary-grid>article{min-height:90px;padding:16px;border-radius:13px}
body.ux300-ready .billing-section{padding:20px clamp(20px,2.3vw,30px);border-top:1px solid var(--line,var(--border))}
body.ux300-ready .billing-section:has(>.billing-section-head:only-child){display:none}
body.ux300-ready .customer-billing-more{margin:0!important;border-top:1px solid var(--line,var(--border));border-radius:0!important}
body.ux300-ready .customer-billing-more>summary{min-height:58px;padding:14px clamp(20px,2.3vw,30px)}
body.ux300-ready .customer-billing-more[open]{padding-bottom:20px}

/* Transaction and milestone density */
body.ux300-ready .milestone-list{gap:10px}
body.ux300-ready .milestone-list>article{padding:14px;gap:12px;border-radius:13px}
body.ux300-ready .customer-transaction-more{border-radius:13px}

/* Employee dashboard: balanced cards, less vertical padding, clearer task surface */
body.ux300-ready .employee-main{max-width:none;padding:clamp(16px,2vw,28px) var(--ux300-page-x) 72px}
body.ux300-ready .employee-hero{margin-bottom:var(--ux300-section-gap)}
body.ux300-ready .employee-profile-line{margin-top:12px}
body.ux300-ready .employee-today-grid{gap:14px;margin-bottom:var(--ux300-section-gap)}
body.ux300-ready :where(.employee-clock-card,.employee-summary-card){padding:18px;border-radius:var(--ux300-radius);box-shadow:var(--ux300-shadow)}
body.ux300-ready .employee-clock-time{padding:18px 0 12px}
body.ux300-ready .employee-clock-time strong{font-size:clamp(2.15rem,3.3vw,3.15rem)}
body.ux300-ready .employee-card-icon{width:40px;height:40px}
body.ux300-ready .employee-card-head h2{font-size:1.12rem}
body.ux300-ready .employee-summary-card{gap:13px}
body.ux300-ready .employee-tabs{margin:0 0 var(--ux300-section-gap);padding:5px;border-radius:13px;background:var(--surface,#fff);box-shadow:var(--ux300-shadow)}
body.ux300-ready .employee-tabs button{min-height:42px;padding:8px 13px}
body.ux300-ready .employee-section-grid{gap:14px}
body.ux300-ready .employee-task-list>article{padding:13px;gap:12px}
body.ux300-ready .employee-context-actions{gap:8px}
body.ux300-ready .table-toolbar{padding:12px;background:var(--surface-soft);border-radius:12px 12px 0 0}
body.ux300-ready .employee-work-card>.table-toolbar{margin-inline:0}
body.ux300-ready .saved-view-controls,
body.ux300-ready .density-controls{gap:6px}
body.ux300-ready .admin-table-wrap{border-radius:0 0 12px 12px}
body.ux300-ready .admin-table th{font-size:.72rem}
body.ux300-ready .admin-table td{font-size:.86rem}

/* Marketplace and review layouts */
body.ux300-ready .market-grid,
body.ux300-ready .marketplace-grid,
body.ux300-ready .market-listing-grid{gap:16px}
body.ux300-ready .market-card{overflow:hidden;border-radius:var(--ux300-radius);box-shadow:var(--ux300-shadow)}
body.ux300-ready .market-card-body{padding:18px}
body.ux300-ready .case-layout{gap:16px}
body.ux300-ready .case-summary,
body.ux300-ready .validator-review-controls{min-width:0}

/* Footer containment */
body.ux300-ready .site-footer[data-workspace-footer="true"]{width:auto;max-width:none;margin:24px var(--ux300-page-x) 0;padding:22px 0 30px}

@media (min-width:1101px){
  body.ux300-ready[data-layout="workspace"] :where(.main,.employee-main){width:calc(100% - var(--sidebar-w));margin-left:var(--sidebar-w);margin-right:0}
  body.ux300-ready .employee-today-grid{grid-template-columns:minmax(300px,1.18fr) repeat(3,minmax(190px,1fr))}
}

@media (max-width:1100px){
  body.ux300-ready[data-layout="workspace"] :where(.main,.employee-main){width:100%;margin:0}
  body.ux300-ready .private-topbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto}
  body.ux300-ready .topbar-context{display:grid!important;min-width:0}
  body.ux300-ready .topbar-context span{display:none}
  body.ux300-ready .topbar-context strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.ux300-ready .global-search-wrap{display:none!important}
  body.ux300-ready .topbar-actions{margin-left:0}
  body.ux300-ready .topbar-actions .topbar-workspace,
  body.ux300-ready .topbar-actions .private-theme-toggle,
  body.ux300-ready .topbar-actions .private-signout{display:none!important}
}

@media (max-width:760px){
  body.ux300-ready[data-layout="workspace"] .page{padding-inline:12px;padding-top:14px}
  body.ux300-ready :where(.workspace-hero,.panel-hero,.page-heading,.admin-heading,.case-heading){padding:18px!important;border-radius:14px}
  body.ux300-ready :where(.workspace-hero,.panel-hero,.page-heading,.admin-heading,.case-heading) h1{font-size:clamp(1.65rem,8vw,2.1rem)}
  body.ux300-ready :where(.panel,.employee-work-card,.employee-context-card,.admin-section,.case-card,.transaction-workspace){padding:15px;border-radius:14px}
  body.ux300-ready :where(.panel-header,.section-head){align-items:flex-start!important}
  body.ux300-ready .journey-command-bar{padding:16px;border-radius:14px}
  body.ux300-ready .journey-work-card{grid-template-columns:38px minmax(0,1fr)!important;padding:14px}
  body.ux300-ready .journey-work-card>.primary-button,
  body.ux300-ready .journey-work-card>.secondary-button{grid-column:1/-1}
  body.ux300-ready .journey-work-heading{display:grid}
  body.ux300-ready .journey-work-heading .status-badge{justify-self:start}
  body.ux300-ready .form-actions{flex-direction:column-reverse!important;align-items:stretch}
  body.ux300-ready .form-actions>*{width:100%;justify-content:center}
  body.ux300-ready .billing-overview{grid-template-columns:1fr;padding:18px}
  body.ux300-ready .billing-summary-grid{grid-template-columns:1fr;padding:0 18px 18px}
  body.ux300-ready .billing-summary-grid>article{min-height:0}
  body.ux300-ready .billing-section{padding:18px}
  body.ux300-ready .customer-billing-more>summary{padding:14px 18px}
  body.ux300-ready .employee-main{padding:14px 12px 72px}
  body.ux300-ready .employee-hero-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ux300-ready .employee-hero-actions>.primary-button{grid-column:1/-1}
  body.ux300-ready .employee-today-grid{grid-template-columns:1fr}
  body.ux300-ready :where(.employee-clock-card,.employee-summary-card){padding:16px}
  body.ux300-ready .employee-tabs{position:relative;top:auto;overflow-x:auto;justify-content:flex-start}
  body.ux300-ready .employee-tabs button{flex:0 0 auto}
  body.ux300-ready .employee-section-grid{grid-template-columns:1fr}
  body.ux300-ready .sticky-context{position:static}
  body.ux300-ready .table-toolbar{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  body.ux300-ready .table-toolbar>.table-search{grid-column:1/-1}
  body.ux300-ready .table-toolbar>.saved-view-controls{grid-column:1/-1}
  body.ux300-ready .table-toolbar>.density-controls{grid-column:1/-1;margin:0}
  body.ux300-ready .admin-table-wrap[data-mobile-cards="true"] tbody{gap:12px}
  body.ux300-ready .admin-table-wrap[data-mobile-cards="true"] tr{padding:14px;box-shadow:none}
  body.ux300-ready .admin-table-wrap[data-mobile-cards="true"] td{grid-template-columns:minmax(78px,.58fr) minmax(0,1.42fr);padding:7px 0;border-bottom:1px solid var(--line,var(--border))}
  body.ux300-ready .admin-table-wrap[data-mobile-cards="true"] td:last-child{padding-top:10px;border-bottom:0;border-top:0}
  body.ux300-ready .site-footer[data-workspace-footer="true"]{margin-inline:12px;padding-bottom:88px}
}

@media (max-width:430px){
  body.ux300-ready .private-topbar{padding-inline:10px;gap:8px}
  body.ux300-ready .topbar-actions>:not(:first-child){display:none!important}
  body.ux300-ready .employee-profile-line{display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
  body.ux300-ready .employee-profile-line code{grid-column:1/-1}
  body.ux300-ready .employee-hero-actions{grid-template-columns:1fr}
  body.ux300-ready .employee-hero-actions>.primary-button{grid-column:auto}
  body.ux300-ready .employee-clock-form{grid-template-columns:1fr}
  body.ux300-ready .employee-task-list>article{grid-template-columns:4px minmax(0,1fr)}
  body.ux300-ready .employee-task-list>article>:last-child{grid-column:2;width:100%}
  body.ux300-ready .employee-context-actions{grid-template-columns:1fr}
  body.ux300-ready .detail-list>div{grid-template-columns:1fr;gap:3px}
  body.ux300-ready .table-toolbar{grid-template-columns:1fr}
  body.ux300-ready .table-toolbar>*{grid-column:1!important}
  body.ux300-ready .admin-table-wrap[data-mobile-cards="true"] td{grid-template-columns:1fr;gap:3px}
  body.ux300-ready .admin-table-wrap[data-mobile-cards="true"] td::before{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}
}

@media (prefers-reduced-motion:reduce){
  body.ux300-ready *{scroll-behavior:auto!important}
}

/* Final targeted layout corrections discovered in production-like pages. */
body.ux300-ready .employee-main{
  padding-top:calc(var(--topbar-h) + clamp(16px,2vw,28px));
  padding-right:var(--ux300-page-x);
  padding-bottom:72px;
  padding-left:var(--ux300-page-x);
}
body.ux300-ready .billing-section-head:has(>h3:only-child){justify-content:flex-start}
body.ux300-ready .billing-section-head:has(>h3:only-child)>h3{margin-left:0!important}
body.ux300-ready .milestone-list>article>div strong,
body.ux300-ready .milestone-list>article>div small{display:block}
body.ux300-ready .milestone-list>article>div small{margin-top:3px;color:var(--muted)}
body.ux300-ready .admin-table-wrap[data-mobile-cards="true"]::after{display:none!important;content:none!important}

@media (min-width:761px){
  body.ux300-ready .table-toolbar{flex-wrap:nowrap}
  body.ux300-ready .table-toolbar>.table-search{flex:1 1 320px;max-width:none}
  body.ux300-ready .table-toolbar>select{width:180px;max-width:180px;flex:0 0 180px}
  body.ux300-ready .table-toolbar>.density-controls{margin-left:0;flex:0 0 auto;flex-wrap:nowrap}
  body.ux300-ready .table-toolbar>.saved-view-controls{margin-left:auto;flex:0 0 auto;flex-wrap:nowrap}
  body.ux300-ready .table-toolbar>.saved-view-controls select{width:150px;min-width:150px}
}
@media (max-width:760px){
  body.ux300-ready .employee-main{padding-top:calc(var(--topbar-h) + 14px);padding-right:12px;padding-left:12px}
  body.ux300-ready .density-controls{display:none!important}
  body.ux300-ready .admin-table-wrap[data-mobile-cards="true"] table{min-width:0!important}
}
@media (max-width:430px) and (min-width:361px){
  body.ux300-ready .employee-hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ux300-ready .employee-hero-actions>.primary-button{grid-column:1/-1}
}
@media (max-width:360px){
  body.ux300-ready .employee-hero-actions{grid-template-columns:1fr}
  body.ux300-ready .employee-hero-actions>.primary-button{grid-column:auto}
}

/* Workspace footer follows the same shell lane as the fixed topbar and main canvas. */
@media (min-width:1101px){
  body.ux300-ready[data-layout="workspace"] .site-footer[data-workspace-footer="true"]{
    width:auto;
    margin-left:var(--sidebar-w);
    margin-right:0;
    padding-left:var(--ux300-page-x);
    padding-right:var(--ux300-page-x);
    box-sizing:border-box;
  }
}