/* Shared, compact page controls. Data stays immediately below the toolbar. */
:root{--control-height:44px}
.shell{padding-top:24px}
.shell>.hero,.page-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-bottom:16px}
.shell>.hero h1,.page-toolbar h1{font-size:clamp(1.4rem,2.8vw,1.9rem);line-height:1.15;letter-spacing:-.025em;margin:0}
.page-toolbar h2,.page-toolbar h3{margin:0}
.page-toolbar .eyebrow{margin-bottom:4px}
.page-toolbar>div:first-child{min-width:0}
.page-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-left:auto}
.page-actions>form{margin:0}
.page-actions :is(button,a.button){min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;line-height:1.2;font-family:inherit;font-size:.9rem;white-space:normal}
.page-actions>label{margin:0}
.page-actions>p{margin:0}
.filter-bar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px 12px;margin:12px 0}
.filter-bar>label{flex:0 1 auto;min-width:120px}
.formrow,.profile-period{align-items:flex-end}
:is(.filter-bar,.formrow,.profile-period)>label{margin-bottom:0}
:is(.filter-bar,.formrow,.profile-period)>:is(button,a.button){flex:0 0 auto;align-self:flex-end;width:auto;min-width:0;min-height:var(--control-height);margin-bottom:0;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;line-height:1.25}
:is(.filter-bar,.formrow,.profile-period)>:is(input,select),:is(.filter-bar,.formrow,.profile-period)>label>:is(input:not([type=checkbox]):not([type=radio]),select){height:var(--control-height);min-height:var(--control-height);font-family:inherit;font-size:inherit;line-height:1.25;box-sizing:border-box;margin-bottom:0}
.page-toolbar>.filter-bar{margin:0}
.filter-bar>.page-actions{align-self:flex-end}
.filter-bar .page-actions>button{margin-bottom:0}

/* Linked names look like their surrounding data; focus stays visible. */
.shell a:not(.button):not([role=button]),dialog a:not(.button):not([role=button]){color:inherit;text-decoration:none}
a[data-entity-profile],a[data-training-summary],.weekly-profile-name{color:inherit!important;text-decoration:none!important}
.shell a:not(.button):visited,dialog a:not(.button):visited{color:inherit}
.shell a:not(.button):hover,dialog a:not(.button):hover{text-decoration:none}
.shell nav.subtabs>a.active{color:var(--green,#2d6a63)}
.shell a:focus-visible,dialog a:focus-visible{outline:2px solid var(--green,#2d6a63);outline-offset:3px;border-radius:3px}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.employee-directory-toolbar{align-items:center}
.employee-directory-count{display:inline-block;vertical-align:middle;margin-left:5px;padding:4px 8px;border-radius:12px;background:#e7eee8;color:#52695b;font-size:.8rem;font-weight:600;letter-spacing:0}
.employee-directory-toolbar .employee-directory-search{flex:1 1 240px;max-width:350px;margin:0}
.employee-directory-search input{height:var(--control-height);width:100%;font:inherit}
.employee-directory-toolbar>.page-actions{flex:0 1 auto}
.view-switch{display:inline-flex;align-items:center;gap:7px;color:var(--muted,#6d787d);font-size:12px;white-space:nowrap}
.view-switch[data-view=list]>span:first-child,.view-switch[data-view=cards]>span:last-child{color:var(--ink,#182128)}
.view-switch button[role=switch]{position:relative;display:block;flex:none;width:42px;min-width:42px;min-height:44px;height:44px;padding:0;background:transparent;border:0;border-radius:20px;cursor:pointer}
.view-switch button[role=switch]::before{content:"";position:absolute;left:0;top:11px;width:42px;height:22px;border-radius:12px;background:#dce6e1;box-shadow:inset 0 0 0 1px #c6d3cc}
.view-switch button[role=switch]>span{position:absolute;left:3px;top:14px;width:16px;height:16px;border-radius:50%;background:#456c5f;transition:transform .15s ease}
.view-switch button[aria-checked=true]>span{transform:translateX(20px)}
.view-switch button:hover::before{background:#cfddd5}
.view-switch button:focus-visible{outline:2px solid var(--green,#2d6a63);outline-offset:2px}
.view-switch button:disabled{opacity:.55;cursor:wait}
@media(max-width:640px){
  .shell>.hero,.page-toolbar{gap:10px;margin-bottom:12px}
  .page-toolbar>.page-actions{max-width:100%;gap:6px}
  .page-actions :is(button,a.button){font-size:.85rem;padding:10px 12px}
  .filter-bar{gap:8px}
  .filter-bar>label,.profile-period>label{flex:1 1 8.5rem;min-width:0;max-width:none}
  .filter-bar>label :is(input,select){width:100%;min-width:0;font-size:16px}
  .filter-bar>:is(button,a.button){margin-left:auto}
  .employee-directory-toolbar .employee-directory-search{order:3;flex-basis:100%;max-width:none}
  .employee-directory-toolbar>.page-actions{gap:6px}
  .employee-directory-toolbar h1{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.view-switch button[role=switch]>span{transition:none}}
