/* Employee-only surface. No manager grid, row, card or week-frame overrides. */
.employee-entry { color: var(--muted); font-size: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; }
.employee-entry:hover { color: var(--text); background: var(--panel-2); }
.employee-entry:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.employee-mobile[hidden] { display: none; }
body.mobile-employee-mode .app-shell { display: none; }
body.mobile-employee-mode { min-width: 0; background: #171917; overflow-wrap: break-word; }
.employee-mobile { min-height: 100svh; padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); color: #f3f1e9; }
.employee-mobile button, .employee-mobile select { font: inherit; }
.em-page { width: min(100%, 640px); margin-inline: auto; }
.em-topbar { height: 66px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #303430; }
.em-topbar .brand { font-size: 17px; }
.em-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #354138; color: #c7d8c8; font-size: 12px; font-weight: 700; }
a.em-avatar { position: relative; flex-shrink: 0; text-decoration: none; }
a.em-avatar::before { content: ""; position: absolute; inset: -5px; }
.ar-identity a.em-avatar::before { inset: -7px; }
a.em-avatar:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.em-prototype { margin: 0 20px; border-bottom: 1px solid #303430; font-size: 12px; color: #b2b8b1; }
.em-prototype summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.em-prototype summary::-webkit-details-marker { display: none; }
.em-prototype summary > span { margin-left: auto; color: #d0c6b0; }
.em-prototype svg { width: 16px; height: 16px; flex-shrink: 0; }
.em-prototype-content { padding: 4px 0 14px; }
.em-prototype label { display: grid; gap: 6px; }
.em-prototype select { width: 100%; min-height: 44px; padding: 8px; background: #292e30; color: var(--text); border: 1px solid #58615b; border-radius: 7px; font-size: 16px; }
.em-prototype p { line-height: 1.6; margin: 10px 0 2px; }
.em-prototype a { display: inline-flex; min-height: 44px; align-items: center; color: #ddbe85; text-underline-offset: 3px; }
/* Approved C treatment, reusable by headings on future employee screens.
   One rounded masked band only; no lighting, glow or content clipping. */
.employee-mobile .employee-heading-accent { position: relative; border-radius: 7px; }
.employee-mobile .employee-heading-accent::before { content: ""; position: absolute; pointer-events: none; inset: -8px -10px; box-sizing: border-box; border: 0 solid var(--brand); border-left-width: 3px; border-top-width: 2px; border-radius: inherit; opacity: .75; mask-image: linear-gradient(90deg, #000, #00000073 28%, transparent 58%); }
/* Decorative hierarchy only: amber page headings, slate-blue subsections.
   Status, selection and validation colors retain their existing semantics. */
.employee-mobile { --subsection-accent: #78919B; }
.employee-mobile .employee-subsection-accent { position: relative; border-radius: 9px; }
.employee-mobile .employee-subsection-accent::before { content: ""; position: absolute; pointer-events: none; inset: 0; box-sizing: border-box; border: 0 solid var(--subsection-accent); border-left-width: 2px; border-top-width: 2px; border-radius: inherit; opacity: .55; mask-image: linear-gradient(90deg, #000, #00000073 28%, transparent 58%); }
@supports (corner-shape: superellipse(1.5)) {
  .employee-mobile .employee-subsection-accent,
  .employee-mobile .employee-subsection-accent::before,
  .employee-mobile .employee-heading-accent,
  .employee-mobile .employee-heading-accent::before { corner-shape: superellipse(1.5); }
}
.em-content { padding: 20px 20px 0; }
.em-screen-heading h1 { margin: 0; font: 500 28px/1.2 Georgia, serif; letter-spacing: -.02em; }
.em-screen-heading p { margin: 8px 0 5px; font-size: 14px; color: #d6d8d1; }
.em-screen-heading > span { display: block; font-size: 12px; line-height: 1.5; color: #adb5ae; }
.em-next { margin-top: 24px; }
.em-more-group { margin-top: 18px; padding: 13px 14px 3px; background: #202320; }
.em-more-group:first-of-type { margin-top: 24px; }
.em-more-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 0; border: 0; background: none; color: #f3f1e9; text-align: left; font-size: 14px; }
.em-more-row > svg { width: 19px; height: 19px; flex: 0 0 auto; color: #b2b8b1; }
.em-more-row > span { flex: 1; min-width: 0; }
.em-more-row strong { display: block; font-weight: 550; }
.em-more-row { text-decoration: none; }
.em-more-row + .em-more-row { border-top: 1px solid #303430; }
.em-more-row > svg:last-child { width: 15px; }
.em-more-row:hover { color: #dfc38f; }
.em-back { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; margin-bottom: 14px; color: #dfc38f; text-decoration: none; font-size: 13px; }
.em-back svg { width: 16px; height: 16px; }
.em-shell-content { padding-bottom: 12px; }
.em-calendar-state { color: #D7A35D; font-size: 13px; }
.em-scheduler-return[hidden] { display: none; }
@media (max-width: 760px) {
  /* Return bridge only; the existing desktop Scheduler itself is unchanged. */
  .em-scheduler-return:not([hidden]) { position: fixed; z-index: 25; left: 16px; bottom: 16px; min-height: 44px; display: inline-flex; align-items: center; background: #202520; color: #dfc38f; }
}
.em-more-row small { display: block; margin-top: 3px; color: #b2b8b1; font-size: 12px; line-height: 1.5; }
.em-more-row:disabled { opacity: 1; cursor: not-allowed; }
.em-more-destination { border-top: 1px solid #303430; }
.em-more-group > h2 + .em-more-destination { border-top: 0; }
.em-more-destination > summary { list-style: none; cursor: pointer; }
.em-more-destination > summary::-webkit-details-marker { display: none; }
.em-more-destination > summary > svg:last-child { width: 15px; }
.em-more-destination[open] > summary > svg:last-child { transform: rotate(90deg); }
.em-more-destination > summary:hover { color: #dfc38f; }
.em-more-destination > summary:focus-visible { outline: 2px solid #D7A35D; outline-offset: 2px; border-radius: 4px; }
.em-more-detail { padding-bottom: 10px; }
.em-more-note { color: #b2b8b1; font-size: 13px; line-height: 1.6; margin: 8px 0 12px; }
.em-preference { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 10px 0; cursor: pointer; }
.em-preference + .em-preference { border-top: 1px solid #303430; }
.em-preference strong { display: block; font-size: 14px; font-weight: 600; }
.em-preference small { display: block; font-size: 12px; line-height: 1.5; color: #b2b8b1; margin-top: 4px; }
.em-preference input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0 4px; accent-color: #D7A35D; cursor: pointer; }
.em-preference input:focus-visible { outline: 2px solid #D7A35D; outline-offset: 4px; }
.em-preference:has(input:disabled) { opacity: .65; cursor: default; }
.em-preference-feedback { font-size: 12px; line-height: 1.5; color: #D7A35D; margin: 6px 0 0; }
.em-preference-feedback:empty { display: none; }
.em-account { margin: 12px 0 0; font-size: 13px; line-height: 1.6; }
.em-account > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.em-account dt { color: #b2b8b1; }
.em-account dd { margin: 0; }
.em-account dd span { display: block; }
.em-directory-search,.em-contact-form > label { display: grid; gap: 8px; font-size: 13px; font-weight: 550; }
.em-directory-search input,.em-contact-form input[type="tel"] { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #58615b; border-radius: 7px; background: #292e30; color: #f3f1e9; font: inherit; font-size: 16px; }
.em-directory-person + .em-directory-person { border-top: 1px solid #373c38; }
.em-directory-list { margin: 0; padding: 0; list-style: none; }
.em-directory-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 0; }
.em-directory-info { min-width: 0; overflow-wrap: anywhere; }
.em-directory-info strong { display: block; font-size: 14px; font-weight: 550; }
.em-directory-info small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: #b2b8b1; }
.em-directory-phone,.em-directory-email { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: #d6d8d1; }
.em-directory-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.em-directory-actions a { display: inline-flex; box-sizing: border-box; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #58615b; border-radius: 7px; color: #dfc38f; text-decoration: none; }
.em-directory-actions svg { width: 19px; height: 19px; }
.em-directory-actions a:hover { background: #ffffff06; }
.em-directory-actions a:focus-visible { outline: 2px solid #D7A35D; outline-offset: 3px; }
.em-contact-form { margin-top: 22px; }
.em-contact-form button { min-height: 44px; }
.em-contact-form .em-phone-sharing { display: flex; align-items: center; gap: 12px; margin-top: 18px; min-height: 54px; font-weight: 400; cursor: pointer; }
.em-phone-sharing input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: #D7A35D; }
.em-phone-sharing small { display: block; margin-top: 5px; color: #b2b8b1; font-size: 12px; line-height: 1.5; }
.em-contact-feedback { font-size: 13px; line-height: 1.5; color: #D7A35D; }
.employee-mobile :is(.em-directory-search input,.em-contact-form input):focus-visible { outline: 2px solid #D7A35D; outline-offset: 3px; }
.employee-mobile h2 { margin: 0; font: 650 15px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; color: #dedfd7; }
.em-next h2 { margin-bottom: 10px; }
.em-card { position: relative; isolation: isolate; display: block; width: 100%; min-width: 0; padding: 14px 30px 13px 17px; border: 1px solid #4b535a; border-radius: 9px; overflow: hidden; cursor: pointer; background: linear-gradient(180deg, #ffffff08, #ffffff01 40%, #0000000a), #30363b; box-shadow: inset 0 1px #ffffff12, inset 0 -1px #00000040, 0 1px 2px #00000040, 0 3px 5px #00000016; color: #f3f1e9; text-align: left; }
.em-card::before { content: ""; position: absolute; pointer-events: none; inset: 0; box-sizing: border-box; border: 0 solid var(--accent); border-left-width: 4px; border-top-width: 3px; border-radius: inherit; opacity: .9; mask-image: linear-gradient(90deg, #000, #00000073 28%, transparent 58%); }
.em-card:hover { border-color: #68727a; }
.em-card-date { display: block; color: #c8cdc8; font-size: 13px; margin-bottom: 8px; }
.em-card-label { display: block; font-size: 16px; font-weight: 650; line-height: 1.4; }
.em-times { display: block; margin-top: 4px; font-size: 18px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.em-time-dash { color: #b7c0c5; font-weight: 400; }
.em-card-meta { display: block; margin-top: 9px; color: #c4cbc8; font-size: 13px; line-height: 1.5; }
.em-card-meta > span { margin-inline: 3px; }
.em-card-venue { display: block; color: #b9c1bf; font-size: 12px; line-height: 1.5; }
.em-card-arrow { position: absolute; top: 16px; right: 10px; color: #b8bfbd; }
.em-card-arrow svg { width: 16px; height: 16px; }
.em-next-card { padding-block: 16px; }
/* Retain the former two-line metadata footprint without repeating venue/location. */
.em-next-card .em-card-meta { min-height: calc(1.5em + 18px); }
.em-next-card .em-card-label { font-size: 19px; }
.em-next-card .em-times { font-size: 22px; }
.em-overnight { display: block; margin-top: 3px; font-size: 12px; color: #dac69f; line-height: 1.5; }
.em-upcoming { margin-top: 18px; }
.em-section-heading { display: flex; align-items: center; justify-content: space-between; }
.em-this-week { min-height: 44px; padding: 8px 0 8px 14px; color: #dfc38f; background: none; border: 0; cursor: pointer; font-size: 13px !important; }
.em-week-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #373c38; border-bottom: 1px solid #373c38; }
.em-week-navigation button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #414842; border-radius: 7px; background: #252a26; color: #e0d9c9; cursor: pointer; }
.em-week-navigation button:hover { background: #303730; }
.em-week-navigation svg { display: block; width: 18px; height: 18px; margin: auto; }
.em-week-navigation > div { min-width: 0; text-align: center; }
.em-week-navigation strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 650; }
.em-week-navigation div > span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: #b9b49f; }
.em-week-summary { margin: 8px 0 12px; color: #abb4ac; font-size: 12px; }
.em-day + .em-day { margin-top: 10px; }
.em-day-shifts { display: grid; gap: 10px; }
.em-agenda .em-card { padding-block: 11px 10px; }
.em-agenda .em-times { margin-top: 2px; }
.em-event-tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 4px; background: var(--event-wash, #e0ba7210); color: #f3f1e9; font-size: 11px; line-height: 1.5; font-weight: 550; }
@supports (background: color-mix(in srgb, red 6%, transparent)) {
  .em-event-tag { background: color-mix(in srgb, var(--event-color, #c8a15f) 6%, transparent); color: color-mix(in srgb, var(--event-color, #c8a15f) 60%, #f3f1e9); }
}
.em-event-tag > span { font-size: 10px; font-weight: 400; }
/* Event-only date: one compact surface, never a heading/divider for later shifts. */
.em-annotation-row { display: grid; grid-template-columns: minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; background: #292D33; box-shadow: none; color: #c8cdc8; font-size: 13px; line-height: 1.5; }
.em-annotation-row + .em-day-shifts:not(:empty) { margin-top: 10px; }
.em-event-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.em-event-info > span:first-child { flex-shrink: 0; }
.em-annotation-row .em-date-events { min-width: 0; }
.em-annotation-row .em-event-tag { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.em-no-shifts { min-width: 0; text-align: center; color: #D7A35D; font-size: 11px; line-height: 1.5; white-space: nowrap; }
@media (max-width: 380px) {
  .em-annotation-row { gap: 6px; }
  .em-event-info { column-gap: 6px; }
  .em-no-shifts { font-size: 10px; }
}
.em-date-events { display: flex; flex-wrap: wrap; gap: 4px; }
.em-empty { padding: 19px 16px; background: #222722; border: 1px solid #394139; border-radius: 9px; }
.em-empty h3 { margin: 0; color: #e1e2da; font-size: 15px; }
.em-empty p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: #bac3ba; }
.em-published-note { margin: 25px 0 0; font-size: 12px; line-height: 1.7; color: #aeb7ae; }
.em-bottom-nav { position: fixed; z-index: 20; inset: auto 0 0; background: #202520; border-top: 1px solid #41473f; padding-bottom: env(safe-area-inset-bottom, 0px); }
.em-bottom-nav > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 640px); margin-inline: auto; }
.em-manager-nav > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.em-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 82px; padding: 9px 2px; background: none; border: 0; color: #afb7ae; font-size: 11px; line-height: 1.4; }
.em-bottom-nav button[aria-current] { color: #e4c17f; cursor: pointer; background: #c9a86a08; }
.em-bottom-nav button:disabled { opacity: 1; cursor: default; }
.em-bottom-nav svg { width: 21px; height: 21px; margin-bottom: 1px; }
.em-bottom-nav small { font-size: 9px; color: #b4bbb2; }
.employee-mobile :is(button, select, summary, a):focus-visible { outline: 2px solid #f0c67d; outline-offset: 3px; }
body.mobile-employee-mode #detailDialog { max-width: min(440px, calc(100% - 28px)); width: 440px; max-height: calc(100svh - 28px); overflow: auto; padding: 20px; }
body.mobile-employee-mode #detailDialog .dialog-head { align-items: center; }
body.mobile-employee-mode #detailDialog .icon-button { width: 44px; height: 44px; }
body.mobile-employee-mode #dialogCancel { min-height: 44px; font-size: 14px; }
.em-shift-detail h3 { overflow-wrap: anywhere; font-size: 24px; }
.em-shift-detail > p { font-size: 14px; line-height: 1.5; }
.em-detail-time { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.em-detail-overnight { color: #e0c18b !important; }
.em-shift-detail dl { margin: 22px 0 0; }
.em-shift-detail dl > div { display: flex; gap: 15px; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #3a413a; font-size: 14px; }
.em-shift-detail dt { color: #b8c0b7; }
.em-shift-detail dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.em-detail-note { color: #bac2b7; }
@supports (corner-shape: superellipse(1.5)) {
  .em-card, .em-card::before { corner-shape: superellipse(1.5); }
}
@media (min-width: 700px) {
  .em-content { padding-inline: 28px; }
  .em-topbar { padding-inline: 28px; }
  .em-prototype { margin-inline: 28px; }
}
.em-refined-date { display: block; white-space: nowrap; }
.em-refined-today { display: block; margin-bottom: 2px; color: #d7a35d; font-size: 12px; font-weight: 550; line-height: 1.4; }
.em-drop-status { display: block; margin-top: 4px; color: #d7a35d; font-size: 12px; font-weight: 500; line-height: 1.5; }
.em-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.em-detail-actions p { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: #c4cbc8; }
.em-detail-actions button, .em-drop-editor label { min-height: 44px; }
.em-detail-actions button { padding: 8px 12px; }
.em-detail-actions button:disabled { opacity: .55; cursor: default; }
.em-drop-editor > p { font-size: 14px; line-height: 1.5; }
.em-drop-responsibility { color: #d7a35d; }
.em-drop-options, .em-drop-recipients { margin: 16px 0 0; padding: 8px 12px; border: 1px solid #4b535a; border-radius: 7px; }
.em-drop-editor legend { padding: 0 4px; font-size: 13px; color: #c4cbc8; }
.em-drop-editor label { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.5; }
.em-drop-editor input { flex-shrink: 0; accent-color: #d7a35d; }
.em-drop-editor input:focus-visible { outline: 2px solid #f0c67d; outline-offset: 3px; }
.em-drop-recipients { max-height: 240px; overflow: auto; }
.em-drop-recipients label:has(input:disabled) { color: #aeb7ae; }
.em-drop-recipients small { display: block; color: #d7a35d; font-size: 12px; }
.em-drop-editor:not(:has(#dropSelected:checked)) .em-drop-recipients { display: none; }
.em-drop-feedback { color: #e5b8b7; font-size: 13px; line-height: 1.5; }
/* Shift swaps extend the existing employee dialogs without a new navigation route. */
.em-swap-inbox { margin: 20px 0; }
.em-swap-inbox h2 { margin-bottom: 8px; }
.em-swap-inbox > button { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 12px; text-align: left; white-space: normal; font-size: 13px; }
.em-swap-inbox > button span { display: block; margin-top: 4px; color: #c4cbc8; font-size: 12px; }
.em-swap-editor h3 { font-size: 24px; }
.em-swap-summary { display: grid; gap: 4px; margin: 14px 0; padding-bottom: 12px; border-bottom: 1px solid #4b535a; font-size: 13px; line-height: 1.5; }
.em-swap-summary h4 { margin: 0; color: #d7a35d; font-size: 14px; }
.em-swap-summary strong { color: #f3f1e9; font-size: 14px; }
.em-swap-summary span { color: #c4cbc8; overflow-wrap: anywhere; }
.em-swap-choices { margin: 12px 0; padding: 4px 10px; border: 1px solid #4b535a; border-radius: 7px; }
.em-swap-choice-list { max-height: 220px; overflow: auto; }
.em-swap-choices legend { padding: 0 4px; font-size: 13px; }
.em-swap-choices label { display: flex; gap: 9px; align-items: start; min-height: 44px; padding: 10px 0; font-size: 13px; line-height: 1.5; scroll-margin-block: 4px; }
.em-swap-choices label > span { min-width: 0; }
.em-swap-choices label span span { display: block; color: #c4cbc8; }
.em-swap-choices label:has(input:disabled) { color: #aeb7ae; }
.em-swap-choices small { display: block; color: #d7a35d; font-size: 12px; }
.em-swap-choices input { flex-shrink: 0; margin-top: 4px; accent-color: #d7a35d; }
.em-swap-choices input:focus-visible { outline: 2px solid #f0c67d; outline-offset: 3px; }
.em-swap-editor > p { font-size: 13px; line-height: 1.5; }
.em-swap-decline { min-height: 44px; padding: 8px 12px; }
/* Employee action feedback must clear the fixed bottom navigation. */
body.mobile-employee-mode .toast { bottom: calc(108px + env(safe-area-inset-bottom,0px)); max-width: calc(100vw - 44px); }
/* Full Schedule only. */
.em-full-heading p { font-size: 15px; font-weight: 500; color: #e3e5dd; }
.em-full-selection { display: block; margin-bottom: 13px; font-size: 13px; color: #b8c0b7; }
.em-full-selection select { display: block; width: 100%; min-height: 44px; margin-top: 18px; padding: 8px 12px; border: 1px solid #4b5350; border-radius: 7px; background: #292d33; color: #f3f1e9; font: inherit; font-size: 15px; }
.em-full-agenda { display: grid; gap: 23px; }
.em-full-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 9px; }
.em-full-date h3 { flex-shrink: 0; margin: 0; font-size: 15px; font-weight: 650; color: #f3f1e9; }
.em-full-date h3 small { margin-left: 8px; color: #d7a35d; font-size: 12px; font-weight: 500; }
.em-full-events { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.em-full-events .em-event-tag { max-width: 100%; overflow-wrap: anywhere; }
.em-full-shifts { display: grid; gap: 10px; }
.em-own-shift { border-color: #858b80; }
/* Approved shared compact employee cards. Next Shift stays untouched. */
.em-agenda .em-shared-card, .em-full-shifts .em-shared-card, .em-open-list .em-shared-card { display: grid; gap: 5px; padding: 11px 30px 10px 17px; }
.em-shared-top { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 8px; }
.em-shared-leading { min-width: 0; overflow-wrap: anywhere; color: #f3f1e9; font-size: 15px; font-weight: 650; line-height: 1.4; }
.em-shared-leading .em-card-date { margin: 0; color: inherit; font: inherit; }
.em-shared-top .em-times { margin: 0; white-space: nowrap; color: #d3dad7; font-size: 15px; font-weight: 500; line-height: 1.4; }
/* Full Schedule: wrap the time as a unit before compressing an employee name.
   The desktop overview and other shared-card uses retain their existing grid. */
@media (max-width: 1099px) {
  .em-full-shifts .em-shared-top { display: flex; flex-wrap: wrap; gap: 2px 8px; }
  .em-full-shifts .em-shared-leading { flex: 1 0 auto; max-width: 100%; overflow-wrap: break-word; }
  .em-full-shifts .em-shared-top .em-times { flex: 0 0 auto; }
}
.em-shared-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; }
/* Max-content groups wrap as units; only the annotation group's own line may wrap chips. */
.em-shared-metadata, .em-shared-annotations { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; flex: 0 1 auto; width: max-content; max-width: 100%; min-width: 0; }
.em-shared-title { min-width: 0; color: #d6dcd8; font-size: 14px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.em-shared-schedule { min-width: 0; color: #c4cbc8; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.em-shared-card .em-weekly-event { border: 1px solid var(--event-color); max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
/* Open-shift requests use ordinary buttons, never nested interactive cards. */
.em-open-list { display: grid; gap: 10px; }
.em-open-card { cursor: default; }
.em-open-card:hover { border-color: #4b535a; }
.em-open-list .em-open-card { padding-right: 17px; }
.em-open-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 3px; }
.em-open-actions button { min-height: 44px; padding: 8px 12px; font-size: 13px; color: #e4c17f; }
.em-requested { margin-right: auto; color: #d7a35d; font-size: 12px; }
.em-open-feedback { min-height: 18px; margin: 12px 0 8px; color: #d7a35d; font-size: 12px; }
@supports (color: color-mix(in srgb, red, white)) {
  .em-shared-card .em-weekly-event { border-color: color-mix(in srgb,var(--event-color) 80%,#f3f1e9); }
}
/* Staff management: the shared employee record editor, not a separate roster. */
.sm-toolbar,.sm-profile-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.sm-toolbar h2,.sm-profile-title h2{margin:0;font-size:18px}
.sm-profile-title{flex-wrap:wrap;margin-top:18px}
.sm-profile-title>span,.sm-optional{color:#b8bdb9;font-size:12px}
.sm-filters,.sm-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sm-filters{margin-bottom:18px}
.sm-filters label,.sm-form label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:#e4e6df;min-width:0}
.sm-filters input,.sm-filters select,.sm-form input:not([type=checkbox]),.sm-form select{width:100%;box-sizing:border-box;min-height:44px;font:inherit;font-size:16px;color:#e9e9e3;background:#292d33;border:1px solid #555c60;border-radius:6px;padding:9px 10px}
.sm-form>fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}
.sm-form fieldset:disabled{opacity:.8}
.sm-form .em-more-note{margin:0}
.sm-form .sm-memberships{border:1px solid #454b4b;border-radius:8px;padding:14px;min-width:0}
.sm-memberships legend{font-size:14px;padding:0 5px}
.sm-schedule{padding:12px 0;border-bottom:1px solid #353b3c}
.sm-schedule:last-child{border:0;padding-bottom:0}
.sm-form .sm-check{flex-direction:row;align-items:center;gap:9px;min-height:44px;flex-wrap:wrap;font-size:14px}
.sm-check input{width:18px;height:18px;accent-color:#d7a35d;margin:0;flex:none}
.sm-check small{color:#b8bdb9}
.sm-role-options{display:none;padding:7px 0 0 27px;gap:5px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.sm-schedule:has([data-staff-schedule]:checked) .sm-role-options{display:grid}
.sm-person{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;border-bottom:1px solid #3d4442;border-radius:0;text-align:left;padding:15px 0;color:#e8e8df;cursor:pointer}
.sm-person:hover{background:#252a29}
.sm-person>span{min-width:0}
.sm-person strong{font-size:15px;display:block;overflow-wrap:anywhere}
.sm-person small{display:block;font-size:12px;line-height:1.5;color:#b8bdb9;margin-top:5px}
.sm-person-status{text-align:right;flex:none;font-size:12px}
.sm-person-status small{color:#d7a35d}
.sm-account-actions{margin-top:26px;padding-top:18px;border-top:1px solid #454b4b}
.sm-account-actions h3{font-size:16px;margin:0 0 10px}
.sm-account-actions button{margin:8px 0}
.sm-danger{color:#e4a39c!important}
.sm-feedback{font-size:14px;line-height:1.5;color:#e1b77e;overflow-wrap:anywhere}
.sm-dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}
.sm-toolbar button,.sm-form button,.sm-back,.sm-account-actions button,.sm-dialog-actions button{min-height:44px}
.sm-filters input::placeholder,.sm-form input::placeholder{color:#a7adae;opacity:1}
#staffDeactivate{box-sizing:border-box;width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;background:#202622;color:#e8e8df;border:1px solid #59605c;border-radius:12px;padding:22px;line-height:1.6}
#staffDeactivate::backdrop{background:#0009}
#staffDeactivate h2{font-size:21px;margin:0 0 14px}
.sm-form :focus-visible,.sm-filters :focus-visible,.sm-person:focus-visible,#staffDeactivate :focus-visible{outline:2px solid #d7a35d;outline-offset:3px}
.sm-sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
@media(max-width:480px){.sm-fields{grid-template-columns:1fr}.sm-filters{grid-template-columns:minmax(0,1fr)}.sm-role-options{grid-template-columns:1fr}.sm-toolbar{align-items:flex-start}.sm-person{gap:8px}.sm-person-status{max-width:104px}}
/* Manager oversight reuses the compact employee surfaces and native forms. */
.sa-filter { display: flex; gap: 8px; }
.sa-filter button { min-height: 44px; }
.sa-filter [aria-pressed="true"] { border-color: #D7A35D; color: #D7A35D; }
.sa-list { display: grid; gap: 14px; }
.sa-item { padding: 12px; border: 1px solid #373c38; border-radius: 7px; background: #202320; min-width: 0; }
.sa-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sa-heading h2 { margin: 0; font-size: 15px; }
.sa-heading > span { color: #D7A35D; font-size: 12px; }
.sa-shift { display: grid; gap: 4px; text-align: left; width: 100%; min-height: 44px; margin-top: 10px; padding: 10px; color: var(--text); background: #292D33; border: 1px solid #4b535a; border-radius: 7px; overflow-wrap: anywhere; }
.sa-shift span, .sa-shift small { font-size: 12px; }
.sa-shift small { color: #c1c6c0; }
.sa-requests { padding-left: 20px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.sa-settle { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sa-settle label { display: grid; gap: 6px; flex: 1 1 160px; min-width: 0; font-size: 13px; }
.sa-settle select { width: 100%; min-height: 44px; }
.sa-settle button { min-height: 44px; }