/* Shared density tokens. 125% is the original 16px root; 100% is 12.8px.
   Breakpoints, structural widths, hairlines and minimum touch areas stay physical. */
:root {
  --ui-scale: .8;
  --ui-font-xs: max(11px, .9375rem);
  --ui-font-sm: max(12px, 1.0625rem);
  --ui-font-md: max(13px, 1.1875rem);
  --ui-font-lg: max(16px, 1.625rem);
  --ui-space-1: .3125rem;
  --ui-space-2: .75rem;
  --ui-space-3: 1.25rem;
  --ui-space-4: 1.25rem;
  --ui-control-height: max(36px, 3.125rem);
  --ui-radius: .9375rem;
  --ui-card-padding: 1.25rem;
}
html[data-ui-scale] { font-size: calc(16px * var(--ui-scale)); }
html[data-ui-scale] body { font-size: max(12px, 1rem); }
:where(button, .btn, summary, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .checkbox-label) { min-height: 36px; }
html[data-ui-scale] :is(.icon-btn, .help-topic-btn, .theme-toggle) { min-width: 36px; min-height: 36px; }
html[data-ui-scale] :is(.btn, .icon-btn, .button, button, summary, a, input, select, textarea):focus-visible { outline: 2px solid #287dcb; outline-offset: 2px; }
#employeeView #addEventBtn { min-height:40px; width:auto; }
.entry-time { font-size:max(12px,1.09375rem); line-height:1.4; margin-top:.25rem; }
.add-day-short { display: none; }
/* Keep the scale control itself legible even at 50%, so users can recover easily. */
.ui-scale-controls { padding: 12px 0; margin: 4px 0 8px; border: 0; border-bottom: 1px solid var(--line); min-width: 0; font-size: 13px; }
.ui-scale-controls legend { padding: 0; font-size: 13px; font-weight: 650; }
.ui-scale-controls>label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 12px; }
.ui-scale-controls output { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 650; }
.ui-scale-stepper { display: grid; grid-template-columns: 36px minmax(0,1fr) 36px; gap: 8px; align-items: center; }
.ui-scale-stepper input { width: 100%; min-width: 0; height: 36px; padding: 0; accent-color: #278650; border: 0; box-shadow: none; }
.ui-scale-controls button { min-width: 36px; min-height: 36px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-solid,#fff); color: var(--text); font-size: 12px; }
.ui-scale-stepper button { font-size: 20px; }
.ui-scale-controls button:disabled { opacity: .45; cursor: default; }
.ui-scale-presets { display: flex; gap: 4px; margin-top: 8px; }
.ui-scale-presets button { flex: 1; }
.ui-scale-controls button[aria-pressed=true] { color: #fff; background: #237744; border-color: #237744; }
.ui-scale-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ui-scale-bottom span { font-size: 11px; color: var(--muted); }
.employee-menu-items { width: max(280px,17.5rem); max-width: calc(100vw - 24px); max-height: calc(100dvh - 90px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; }
.employee-menu-items>a { text-decoration: none; }
#employeeView .date-filter-controls { display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; }
#employeeView .date-range-inputs label { display: grid; gap: max(5px,.4375rem); }
#employeeView .date-shortcuts .btn[aria-pressed=true] { background: #d9ecdf; border-color: #6aab80; color: #174c2a; box-shadow: none; }
#employeeView .employee-date-filter { flex-wrap: wrap; }
#employeeView #employeeDateStatus { flex-basis: 100%; line-height: 1.4; }
#employeeView #employeeDateStatus.visually-hidden { margin: 0; }
#employeeView .report-list-heading { flex-wrap: wrap; }
#employeeView .entry-card, #employeeView .entry-top>div, #employeeView .report-view-actions { min-width: 0; }
#employeeView .entry-date, #employeeView .entry-type { overflow-wrap: anywhere; }
#employeeView .finance-item>strong { font-variant-numeric: tabular-nums; }
/* Contrast belongs to the theme; size changes never change the selected theme. */

html:not([data-theme=dark]) #employeeView { --text:#161b22; --muted:#667085; --line:#b9c2cf; --line-strong:#aab6c5; color:var(--text); }
html:not([data-theme=dark]) #employeeView :is(input,select) { background:linear-gradient(145deg,#edf0f4,#dce2e9); border-color:var(--line-strong); color:var(--text); }
html:not([data-theme=dark]) #employeeView .employee-finances { background:linear-gradient(140deg,#edf0f4,#dce2e9); border-color:var(--line); }
html[data-theme=dark] #employeeView .date-shortcuts .btn[aria-pressed=true] { box-shadow:inset 0 0 0 2px #61ba82; }
/* Compact phone composition, using the same shared rem sizes as dialogs and desktop. */
@media screen and (max-width: 760px) {
  #employeeView, #adminView { width: calc(100% - 24px); padding-top: max(.3125rem,env(safe-area-inset-top)); font-size: var(--ui-font-md); }
  #employeeView .btn, #adminView .btn { min-height:var(--ui-control-height); padding:.625rem .875rem; font-size:var(--ui-font-sm); border-radius:var(--ui-radius); }
  #employeeView .card, #adminView .card { padding:var(--ui-space-3); border-radius:1.25rem; }
  #employeeView h2, #adminView h2 { font-size:max(16px,1.375rem); line-height:1.3; }
  #employeeView .section-heading, #adminView .section-heading { gap:var(--ui-space-2); margin-bottom:var(--ui-space-2); }
  #employeeView .employee-header { padding:.5rem 0; gap:var(--ui-space-2); min-height:max(56px,4.375rem); }
  #employeeView .employee-header h1 { font-size:var(--ui-font-lg); line-height:1.2; }
  #employeeView .employee-header .brand-heading { min-width:0; }
  #employeeView .employee-header .header-logo-mobile { width:1.875rem; height:1.875rem; flex-basis:1.875rem; }
  #employeeIdentity { font-size:var(--ui-font-xs); margin:.1875rem 0 0; max-width:40ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #employeeView .employee-menu summary { min-height:40px; padding:.5rem; font-size:var(--ui-font-md); }
  #employeeView .employee-menu-icon { width:max(16px,1.5rem); height:max(16px,1.5rem); }
  #employeeView .report-period { margin:0 0 var(--ui-space-3); padding:0; border-radius:var(--ui-radius); max-width:100%; }
  #employeeView .report-period select { min-height:var(--ui-control-height); padding:.5rem .875rem; font-size:var(--ui-font-md); border:0; }
  #employeeView .employee-date-filter { display:grid; padding:0; gap:.625rem; margin:0 0 var(--ui-space-3); background:transparent; border:0; }
  #employeeView .date-range-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ui-space-2); }
  #employeeView .date-range-inputs label { min-width:0; font-size:max(12px,.975rem); color:var(--muted); }
  #employeeView .date-range-inputs input { width:100%; min-width:0; min-height:var(--ui-control-height); padding:.625rem .8125rem; font-size:max(13px,1.125rem); border:1px solid var(--line-strong); border-radius:var(--ui-radius); }
  #employeeView #applyEmployeeDates { width:auto; flex:0 0 auto; padding:.625rem .75rem; font-size:max(12px,1rem); }
  #employeeView .date-filter-controls { gap:.625rem; }
  #employeeView .date-shortcuts { display:flex; flex-wrap:nowrap; gap:2px; padding:2px; background:var(--surface-solid,#fff); border:1px solid var(--line); border-radius:var(--ui-radius); }
  #employeeView .date-shortcuts .btn { flex:0 1 auto; width:auto; min-height:36px; padding:.3125rem .5rem; font-size:max(11px,1rem); border-radius:.625rem; box-shadow:none; white-space:nowrap; border:1px solid transparent; }
  #employeeView #employeeDateStatus { margin:0; font-size:var(--ui-font-xs); }
  #employeeView .employee-finances { padding:var(--ui-card-padding); gap:.625rem; border-radius:1.25rem; }
  #employeeView .finance-payable { gap:.3125rem; padding-bottom:.75rem; }
  #employeeView .finance-payable>strong { font-size:max(22px,2.375rem); line-height:1.1; }
  #employeeView .finance-payable>span, #employeeView .finance-payable>small { font-size:var(--ui-font-xs); }
  #employeeView .finance-item { padding:.375rem; gap:var(--ui-space-2); }
  #employeeView .finance-item>span { font-size:var(--ui-font-xs); white-space:normal; }
  #employeeView .finance-item>strong { font-size:max(13px,1.375rem); line-height:1.25; }
  #employeeView .employee-days { margin-top:var(--ui-space-3); padding:var(--ui-card-padding); }
  #employeeView .report-list-heading { gap:.625rem; margin-bottom:0; }
  #employeeView .report-list-heading h2 { margin:0; font-size:max(15px,1.375rem); line-height:1.4; }
  #employeeView .report-view-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; }
  #employeeView .context-help-actions { display:flex; width:auto; min-width:0; flex:0 0 auto; gap:.5rem; }
  #employeeView .context-help-actions>.help-topic-btn { width:36px; height:36px; flex-basis:36px; margin:0; font-size:max(13px,1rem); }
  #employeeView #addEventBtn { flex:0 0 auto; min-height:max(40px,3.125rem); font-size:var(--ui-font-sm); padding:.5rem .8125rem; }
  #employeeView .add-day-full { display:none; }
  #employeeView .add-day-short { display:inline; }
  #employeeView .view-toggle { align-self:center; padding:0; border:1px solid var(--line-strong); }
  #employeeView .view-toggle-btn { min-height:36px; padding:.3125rem .625rem; font-size:max(11px,1rem); line-height:1.4; }
  #employeeView .entries-list { gap:.625rem; margin-top:var(--ui-space-3); }
  #employeeView .entry-card { padding:1rem; border-radius:var(--ui-radius); background:var(--surface-solid,#fff); }
  #employeeView .entry-top { flex-direction:row; gap:.5rem; margin-bottom:.375rem; }
  #employeeView .entry-date { font-size:max(13px,1.25rem); line-height:1.35; font-weight:600; }
  #employeeView .entry-type { font-size:max(12px,1.0625rem); margin-top:.3125rem; line-height:1.4; }
  #employeeView .entry-edit { width:auto; flex-shrink:0; min-height:36px; padding:.375rem .5rem; font-size:var(--ui-font-xs); }
  #employeeView .venue-summary { padding:.5rem; margin:.375rem 0; }
  #employeeView .entry-meta { margin-top:.5rem; gap:.3125rem; }
  #employeeView .task-chip, #employeeView .badge { padding:.3125rem .5rem; font-size:max(11px,.9375rem); line-height:1.4; white-space:normal; }
  #employeeView .disclosure { margin:.625rem 0; border-radius:var(--ui-radius); }
  #employeeView .disclosure>summary { min-height:40px; padding:.75rem; font-size:var(--ui-font-sm); }
  #employeeView .footer-actions { padding:.625rem; margin-top:.625rem; bottom:max(.625rem,env(safe-area-inset-bottom)); }
  #adminView .topbar { gap:0.5rem; padding:0.5rem 0 !important; }
  #adminView .topbar h1 { font-size:max(11px,1.1875rem)!important; line-height:1.2; }
  #adminView .topbar .muted { font-size:max(11px,0.6875rem); margin:0.1875rem 0 0; }
  #adminView .topbar-actions { display: flex !important; flex-wrap: wrap; gap:0.25rem !important; }
  #adminView .topbar-actions .btn { flex: 0 1 auto; width: auto; padding:0.375rem 0.5625rem; min-height:max(36px,2.5rem); font-size:max(11px,0.75rem); }
  #adminView #adminNav { display: flex; flex-wrap: nowrap; overflow-x: auto; position: static; gap:0.25rem; padding:0.25rem; margin:0.5rem 0; border-radius:0.75rem; }
  #adminView .admin-nav-btn { flex: 0 0 auto; min-height:max(36px,2.5rem); padding:0.5rem 0.625rem; font-size:max(11px,0.75rem); white-space: nowrap; }
  #adminView .admin-summary-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:0.5rem; }
  #adminView .admin-summary-filters .field { min-width: 0; width: auto; }
  #adminView .admin-summary-filters .filter-grow { grid-column: 1 / -1; }
  #adminView .field label { font-size:max(11px,0.6875rem); }
  #adminView input:not([type=checkbox]):not([type=radio]), #adminView select {
    min-width: 0; max-width: 100%; min-height:max(36px,2.5rem); padding:0.4375rem 0.5rem; font-size:max(11px,1rem);
  }
  #adminView .entry-card { padding:0.625rem; border-radius:0.75rem; }
  #adminView .entry-date { font-size:max(11px,0.8125rem); }
  #adminView .entry-meta { gap:0.25rem; margin-top:0.375rem; }

  #eventForm, #profileForm { padding:0 0.625rem; }
  #eventForm > .dialog-header, #profileForm > .dialog-header { padding:0.5rem 0; gap:0.375rem; }
  #eventForm > .dialog-header h2, #profileForm > .dialog-header h2 { font-size:max(11px,1rem); }
  #eventForm > .workday-fields { padding:0.625rem 0; gap:0.5rem; }
  #eventForm .field, #profileForm .field { gap:0.25rem; min-width: 0; }
  #eventForm label, #profileForm label { font-size:max(11px,0.75rem); }
  #eventForm input:not([type=checkbox]):not([type=radio]), #eventForm select,
  #profileForm input:not([type=checkbox]):not([type=radio]), #profileForm select {
    min-height:max(36px,2.5rem); padding:0.4375rem 0.5rem; font-size:max(11px,1rem); border-radius:0.625rem;
  }
  #eventForm .manual-time-part { padding:0.4375rem 0.25rem; }
  #eventForm .day-venue-block, #eventForm .task-row { padding:0.5rem; border-radius:0.625rem; gap:0.375rem; }
  #eventForm .workday-extras { margin-top:0.25rem; padding-top:0.625rem; }
  #eventForm .workday-extras > .form-grid { gap:0.5rem; }
  #eventForm .workday-extras h3 { font-size:max(11px,0.875rem); margin-bottom:0.5rem; }
  #eventForm .taxi-section, #eventForm .expense-section { padding:0.5rem 0; }
  #eventForm > .dialog-actions, #profileForm > .dialog-actions { padding:0.5rem 0 max(0.5rem, env(safe-area-inset-bottom)); gap:0.375rem; }
  #profileForm .profile-section { padding:0.625rem 0; }
  #helpCenterDialog .help-center-card { padding:0.625rem; }
  #helpCenterDialog h2 { font-size:max(11px,1.125rem); }

  .training-header { padding:0.75rem; gap:0.625rem; }
  .training-brand img { width: 112px; }
  .training-header .header-label { display: none; }
  .training-header .button { min-height:max(36px,2.5rem); padding:0.5rem 0.625rem; font-size:max(11px,0.75rem); }
  #trainingMain { padding:0 0.75rem; }
  #trainingMain .training-intro { grid-template-columns: 1fr; padding:1.25rem 0; gap:0.875rem; }
  #trainingMain .training-intro h1 { font-size:max(11px,1.75rem); margin-bottom:0.75rem; }
  #trainingMain .eyebrow { margin-bottom:0.625rem; }
  #trainingMain .intro-copy { font-size:max(11px,0.875rem); line-height:1.5; }
  #trainingMain .start-card { padding:0.875rem; gap:0.5rem; border-radius:0.75rem; }
  #trainingMain .start-card strong { font-size:max(11px,1.1875rem); }
  #trainingMain .search-row input { padding:0.625rem; font-size:max(11px,1rem); }
  #trainingMain .training-tabs { margin-top:0.625rem; gap:1.125rem; }
  #trainingMain .training-tabs a { padding:0.75rem 0; font-size:max(11px,0.8125rem); }
  #trainingMain .category-filters { margin-top:0.75rem; gap:0.25rem; }
  #trainingMain .category-filters button { min-height:max(36px,2.5rem); padding:0.4375rem 0.625rem; }
  #trainingMain .collection { margin:1.25rem 0; }
  #trainingMain .collection-heading { margin-bottom:0.625rem; }
  #trainingMain .collection-heading h2 { font-size:max(11px,1.125rem); }
  #trainingMain .material-grid { gap:0.5rem; }
  #trainingMain .material-card { padding:0.75rem; border-radius:0.75rem; }
  #trainingMain .card-meta { margin-bottom:0.375rem; }
  #trainingMain .material-card h3 { font-size:max(11px,1.0625rem); margin-bottom:0.5rem; }
  #trainingMain .material-card p { line-height:1.5; margin-bottom:0.625rem; }
  #trainingMain .card-bottom { padding-top:0.5rem; }
  #trainingMain .equipment-card img { height: 160px; }
  #trainingMain .lesson-heading { padding-bottom:1rem; margin-bottom:1rem; }
  #trainingMain .lesson-heading h1 { font-size:max(11px,1.5625rem); }
  #trainingMain .lesson-body { font-size:max(11px,0.9375rem); line-height:1.65; }
  #trainingMain .lesson-body h2 { font-size:max(11px,1.25rem); }
}

/* Space gray surfaces and one rhythm for controls, cards and sections. */
#employeeView { --panel:linear-gradient(145deg,#eef1f5,#dfe5ec); --control:linear-gradient(145deg,#e9edf2,#d9e0e8); --panel-shadow:0 8px 24px rgba(34,45,61,.07); --payable-bg:linear-gradient(125deg,#e0eee8,#cbded5); --payable-border:#91b3a3; --payable-text:#234c3a; --payable-amount:#12663f; }
html[data-theme=dark] #employeeView { --panel:linear-gradient(145deg,#252c37,#1b212b); --control:#2a3340; --panel-shadow:0 8px 24px rgba(0,0,0,.14); --payable-bg:linear-gradient(125deg,#364355,#202a38); --payable-border:#4c5c71; --payable-text:#c4cfdd; --payable-amount:#6be0ab; }
#employeeView .employee-header { margin-bottom:0; }
#employeeView .report-period { gap:0; background:var(--control); border:1px solid var(--line-strong); box-shadow:none; padding:0; overflow:hidden; }
#employeeView .report-period select { background:transparent; border-radius:0; margin:0; }
#employeeView #reportYear { border-left:1px solid var(--line-strong); }
#employeeView .employee-days { --surface:transparent; --shadow-soft:none; background:transparent; padding:0; border:0; box-shadow:none; backdrop-filter:none; }
#employeeView .report-list-heading { padding:0; gap:var(--ui-space-2); }
#employeeView .report-view-actions { width:100%; gap:var(--ui-space-2); }
#employeeView .entries-list { gap:var(--ui-space-3); }
#employeeView .entry-card { background:var(--panel); border:1px solid var(--line); box-shadow:var(--panel-shadow); padding:var(--ui-card-padding); }
#employeeView .entry-top { margin-bottom:var(--ui-space-2); }
#employeeView .entry-date { letter-spacing:-.025em; }
#employeeView .venue-summary { border:1px solid var(--line-strong); background:rgba(111,130,155,.08); padding:.625rem .75rem; margin:var(--ui-space-2) 0; border-radius:var(--ui-radius); }
#employeeView .entry-meta { gap:var(--ui-space-2); }
#employeeView .entry-comment { margin:var(--ui-space-2) 0 0; line-height:1.55; }
#employeeView :is(.btn,.view-toggle-btn,.date-shortcuts .btn,.report-period select,.date-range-inputs input) { min-height:var(--ui-control-height); height:var(--ui-control-height); display:inline-flex; align-items:center; justify-content:center; padding-block:0; box-sizing:border-box; }
#employeeView .date-shortcuts { padding:0; gap:0; background:var(--control); border:0; overflow:hidden; }
#employeeView .date-shortcuts .btn { border-radius:0; border:0; padding-inline:.625rem; }
#employeeView .view-toggle { padding:0; border:0; background:var(--control); box-shadow:inset 0 0 0 1px var(--line); }
#employeeView .view-toggle-btn { border-radius:.75rem; }
#employeeView #addEventBtn { min-height:var(--ui-control-height); white-space:nowrap; font-size:var(--ui-font-sm); padding-inline:.875rem; box-shadow:0 3px 8px rgba(23,109,74,.08); }
#employeeView .employee-finances { box-shadow:var(--panel-shadow); gap:var(--ui-space-2); }
#employeeView .finance-payable { background:var(--payable-bg); border:1px solid var(--payable-border); border-radius:var(--ui-radius); padding:var(--ui-card-padding); margin:0; color:var(--payable-text); }
#employeeView .finance-payable>span,#employeeView .finance-payable>small { color:var(--payable-text); }
#employeeView .finance-payable>strong { color:var(--payable-amount); letter-spacing:-.04em; }
#employeeView .finance-item { padding:.625rem; border:1px solid transparent; border-radius:.75rem; }
#employeeView .finance-item>strong { white-space:nowrap; }
@media(max-width:360px){
  #employeeView .finance-item { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
}
#employeeView .employee-menu-items { padding:var(--ui-space-2); gap:var(--ui-space-2); border:1px solid var(--line-strong); background:#e7ecf2; box-shadow:0 18px 48px rgba(25,36,51,.2); }
#employeeView .employee-menu-items>.btn,.interface-settings>summary { justify-content:flex-start; text-align:left; min-height:40px; height:auto; border:0; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500; background:rgba(115,133,158,.09); box-shadow:none; }
.interface-settings { border-radius:10px; }
#employeeView .interface-settings>summary { display:flex; justify-content:space-between; gap:8px; cursor:pointer; list-style:none; }
.interface-settings>summary::-webkit-details-marker { display:none; }

.ui-scale-controls { border:0; padding:12px 6px 4px; margin:0; }
.ui-scale-controls legend { display:none; }
html:not([data-theme=dark]) #profileForm,html:not([data-theme=dark]) #eventForm { background:linear-gradient(145deg,#e8edf3,#d9e1ea); color:#202b3a; }
html:not([data-theme=dark]) :is(#profileForm,#eventForm)>.dialog-actions { background:#dce3ec; }
#profileForm .profile-section { padding-block:var(--ui-space-3); }
@media(max-width:760px){
 #employeeView .employee-header { padding:0; }
 #employeeView .report-period { margin-top:0; }
 #employeeView .report-view-actions { flex-wrap:wrap; }
 #employeeView .context-help-actions { margin:0; }
 #employeeView .employee-menu-items { margin-top:var(--ui-space-2); }
}

html:not([data-theme=dark]) #employeeView .finance-item:has(#mealTotal) { background:#eadcd5; border:1px solid #b9907e; color:#743e2b; }
html:not([data-theme=dark]) #employeeView .finance-item:has(#taxiTotal) { background:#d6e3f1; border:1px solid #8ba7c7; color:#2c527c; }
html:not([data-theme=dark]) :is(#eventForm,#profileForm)>.dialog-header { background:#e3e9f0; }
@media(min-width:761px){
 #eventDialog,#profileDialog,#helpCenterDialog { border-radius:max(16px,1.5rem); overflow:hidden; }
 #eventForm,#profileForm,#helpCenterDialog .help-center-card { border-radius:inherit; }
 html[data-theme=dark] #employeeView .employee-date-filter { background:#1b222c; border-color:var(--line-strong); }
}