.sample .staff-hub-main:has(#hub:not([hidden]) #timesheets:not([hidden])) {
  width: calc(100% - clamp(24px, 5vw, 80px));
  max-width: none;
}
.sample .week-nav { justify-content: space-between; margin-block: 12px; }
.sample .week-nav .button { min-height: 38px; padding-inline: 9px; }
.sample .weekly-timesheet { display: grid; gap: 12px; }
.sample .week-day { border: 1px solid var(--line); border-radius: 8px; padding: 11px; }
.sample .week-entries { display: grid; gap: 9px; margin-block: 7px; }
.sample .week-entry { display: grid; grid-template-columns: minmax(145px, 1.2fr) repeat(2, minmax(116px, .55fr)) minmax(77px, .35fr) minmax(110px, 1.3fr) auto; gap: 8px; align-items: end; }
.sample .week-entry input { min-width: 0; }
.sample .week-remove, .sample .week-add { min-height: 37px; padding-inline: 8px; }
.sample .schedule-scroll { width: 100%; overflow-x: auto; }
.sample .schedule-table { border-collapse: collapse; min-width: 550px; width: 100%; }
.sample .schedule-table :is(th,td) { text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sample .schedule-table th { background: #eef3eb; }
.sample .timeline { min-width: 530px; }
.sample .timeline-row { display: grid; grid-template-columns: minmax(140px, 2.5fr) repeat(7, minmax(42px, 1fr)); align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); gap: 3px; font-size: 13px; }
.sample .timeline-row strong { padding: 6px 8px; }
.sample .timeline-row small { display: block; color: var(--muted); font-weight: 400; }
.sample .timeline-header { background: #eef3eb; font-weight: 650; }
.sample .timeline-header span { text-align: center; }
.sample .timeline-bar { padding: 5px 6px; border-radius: 6px; background: #dcead5; color: #24472e; font-weight: 650; text-align: center; }
.sample .schedule-output .muted { margin-top: 7px; }
.sample #schedule > .surface { min-width: 0; }
.sample #schedule-records { margin-top: 12px; }
@media (min-width: 850px) {
  .sample #schedule { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
@media (max-width: 840px) {
  .sample .week-entry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sample .week-entry label:has(select) { grid-column: 1 / -1; }
  .sample .week-entry label:has([name=notes]) { grid-column: span 2; }
  .sample .week-remove { justify-self: start; }
}
@media (max-width: 520px) {
  .sample .week-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample .week-entry label:has([name=notes]) { grid-column: 1 / -1; }
}