/* Daymark: a classic, table-and-toolbar office portal. */
:root {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #222;
  background: #8b9db0;
  --ink: #17365b;
  --muted: #515b67;
  --line: #a4b1c0;
  --surface: #fff;
  --navy: #153c70;
  --silver: #e3e3df;
  --blue-light: #eaf0f7;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: repeating-linear-gradient(135deg, #8b9db0 0, #8b9db0 2px, #8e9fb2 2px, #8e9fb2 4px);
}
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: #003a94; text-decoration: underline; }
a:hover { color: #a32316; }
button:focus-visible, a:focus-visible {
  outline: 2px dotted #111;
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #366ca4;
  outline-offset: 1px;
}
svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: bold; }
h1 { font-size: 22px; color: var(--navy); line-height: 1.3; }
h2 { font-size: 13px; }
h3 { font-size: 12px; }
p { line-height: 1.5; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.eyebrow { font-size: 11px; font-weight: bold; }

/* Fixed-width portal frame, expanding down the page as needed. */
.shell {
  display: grid;
  grid-template-columns: 179px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  width: calc(100% - 40px);
  max-width: 1120px;
  min-height: calc(100dvh - 48px);
  margin: 24px auto;
  border: 1px solid #3b506b;
  outline: 1px solid #c6d0db;
  background: #fff;
  box-shadow: 4px 4px 0 #435b754d;
}
.site-masthead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
  padding: 15px 21px;
  color: #fff;
  border-top: 1px solid #88a7cc;
  border-bottom: 4px solid #a9b8c9;
  background: linear-gradient(100deg, #102e57, #2d6098);
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand:focus-visible { outline-color: #fff; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  color: #163d6c;
  background: #e3e9ee;
  border: 2px solid;
  border-color: #fff #667888 #667888 #fff;
  box-shadow: 1px 1px 0 #0a2643;
}
.brand-mark svg { width: 34px; height: 34px; stroke-width: 1.8; }
.brand-name {
  display: block;
  font: bold italic 31px/1 "Trebuchet MS", Arial, sans-serif;
  letter-spacing: -.7px;
  text-shadow: 1px 2px #0b284c;
}
.brand-copy { min-width: 0; }
.brand-tagline { display: block; margin-top: 5px; color: #e1eaf3; font-size: 11px; letter-spacing: .4px; }
.masthead-meta { text-align: right; font-size: 10px; line-height: 1.8; letter-spacing: 1px; color: #d8e5f3; }
.masthead-meta strong { display: block; color: #fff; }
.masthead-meta span { display: block; }
.sidebar {
  min-width: 0;
  padding: 11px 10px;
  background: #e8edf3;
  border-right: 1px solid #8b9fb6;
}
.nav-label {
  margin: 0;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .5px;
  color: #fff;
  border: 1px solid #23476d;
  background: linear-gradient(#4b709b, #305680);
}
.nav-group { display: grid; border: 1px solid #a4b3c6; border-top: 0; }
.nav {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 35px;
  padding: 8px;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid #d1dae5;
  color: #003a94;
  background: #f6f8fb;
  font-size: 11px;
  text-align: left;
}
.nav::before { content: "\00bb"; font-weight: bold; color: #587899; }
.nav:last-child { border-bottom: 0; }
.nav span { text-decoration: underline; }
.nav svg { display: none; }
.nav:hover { color: #a32316; background: #fff; }
.nav.active { background: #fff5cd; color: #182e49; font-weight: bold; }
.nav.active span { text-decoration: none; }
.nav.active::before { color: #182e49; }
.nav-divider { border: 0; margin: 14px 0 0; }
.sidebar > .nav { border: 1px solid #a4b3c6; border-top: 0; }
.sidebar-bottom { margin-top: 22px; }
.sidebar-note {
  padding: 10px 8px;
  border: 1px solid #aebdcb;
  background: #f5f7fa;
  font-size: 11px;
  line-height: 1.6;
  color: #394e65;
}
.sidebar-note svg { float: left; margin: 1px 6px 4px 0; }
.sidebar-note strong { display: block; margin-bottom: 5px; color: #17365b; }
.profile { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #a8b7c7; }
.profile-copy { flex: 1; min-width: 0; }
.profile-copy strong { display: block; font-size: 11px; overflow-wrap: anywhere; }
.profile-copy span { display: block; color: #536273; font-size: 10px; margin-top: 4px; }
.avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #8ba0b8;
  background: #dce5f0;
  color: #254363;
  font: bold 10px Tahoma, sans-serif;
}
.workspace { min-width: 0; display: flex; flex-direction: column; padding: 0 16px 12px; background: #fff; }
.topbar {
  min-height: 32px;
  margin: 0 -16px;
  padding: 6px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #e6e9ed;
  border-bottom: 1px solid #a3b0bf;
  box-shadow: inset 0 1px #fff;
}
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #45576b; }
.breadcrumb svg { width: 12px; height: 12px; }
.breadcrumb strong { color: #243c58; }
.slash { color: #7c8997; }
.topbar-right { display: flex; align-items: center; gap: 13px; }
.live-label, .today-label { display: inline-flex; align-items: center; gap: 5px; color: #344c34; font-size: 10px; }
.today-label { color: #475b72; }
.today-label svg { width: 12px; height: 12px; }
.live-dot { width: 7px; height: 7px; display: inline-block; background: #38842c; border: 1px solid #255a1e; box-shadow: inset 1px 1px #b3d4ac; }
#main { flex: 1; min-width: 0; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 0 14px; }
.heading p { margin-top: 5px; font-size: 11px; color: #515b67; }
.date-pill { display: inline-flex; gap: 5px; align-items: center; padding: 5px 7px; border: 1px solid #b2bdca; background: #f1f4f8; color: #4d6077; font-size: 10px; white-space: nowrap; }
.date-pill svg { width: 12px; height: 12px; }
.grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(255px, 1fr); gap: 13px; }
.stack { display: grid; align-content: start; gap: 13px; min-width: 0; }
.panel { border: 1px solid #8ba0b9; background: #fff; min-width: 0; }
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #8ba0b9;
  background: linear-gradient(#edf3fa, #cbd9e9);
  box-shadow: inset 0 1px #fff;
  color: #1d3f67;
}
.panel-subtitle { font-size: 10px; font-weight: normal; color: #435971; margin-top: 4px; }
.panel-body { padding: 0 13px 13px; }
.section-icon { display: grid; place-items: center; color: #3e6289; }
.section-icon svg { width: 20px; height: 20px; }

/* Clock display and timecard. */
.clock-hero { border: 1px solid #7e91a8; background: #e6e7e4; box-shadow: inset 1px 1px #fff; }
.clock-hero > .eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: linear-gradient(90deg, #244d7d, #6085ad);
  border-bottom: 1px solid #264a70;
  color: #fff;
  font-size: 11px;
}
.clock-hero > .eyebrow svg { width: 13px; height: 13px; }
.clock-face {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  margin: 13px 13px 8px;
  padding: 11px 5px 7px;
  border: 2px solid;
  border-color: #838e79 #fff #fff #838e79;
  background: #edf1e5;
  color: #213029;
  font-family: "Courier New", Courier, monospace;
  white-space: nowrap;
}
.clock-time { font-size: 51px; font-weight: bold; line-height: 1.1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.clock-seconds { font-size: 31px; font-weight: bold; letter-spacing: -1px; }
.clock-ampm { padding-left: 8px; font-size: 14px; font-weight: bold; }
.clock-caption { text-align: center; color: #333c46; font-size: 11px; margin: 0 10px 12px; }
.clock-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid #a8adaf; background: #f2f2ef; color: #45535e; font-size: 9px; }
.clock-footer span { display: inline-flex; align-items: center; gap: 4px; }
.clock-footer svg { width: 11px; height: 11px; }
.clock-live::before { content: ""; width: 6px; height: 6px; background: #3e792c; border: 1px solid #255221; }
.today-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; margin-top: 9px; border-top: 1px solid #bec9d5; }
.duration-label { font-size: 10px; font-weight: bold; color: #4e5b6a; margin-bottom: 3px; }
.duration { font: bold 28px "Courier New", monospace; color: #203c60; }
.shift-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shift-actions .full { grid-column: 1 / -1; }
.timeline { list-style: none; margin: 0; padding: 0; border: 1px solid #b9c5d3; }
.timeline li { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-bottom: 1px solid #d9e0e8; font-size: 11px; }
.timeline li:nth-child(even) { background: #f1f5fa; }
.timeline li:last-child { border-bottom: 0; }
.timeline .event-icon { display: inline-grid; place-items: center; color: #55708c; }
.timeline .event-icon svg { width: 13px; height: 13px; }
.timeline time { margin-left: auto; white-space: nowrap; color: #475c72; font-family: "Courier New", monospace; }
.timeline .tag { color: #745624; font-size: 10px; }

/* Browser-era form controls and beveled action buttons. */
.form { display: grid; gap: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label, .field-label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 5px; color: #253c55; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 6px 7px;
  border: 2px solid;
  border-color: #7b8795 #d7dfe7 #d7dfe7 #7b8795;
  border-radius: 0;
  background: #fff;
  color: #111;
  font-size: 12px;
}
input::placeholder, textarea::placeholder { color: #6b7380; opacity: 1; }
input.code-input { height: 43px; font: bold 24px "Courier New", monospace; letter-spacing: 9px; padding-left: 12px; }
input.code-input::placeholder { font-size: 21px; letter-spacing: 5px; }
input[readonly] { background: #eff0ee; }
textarea { resize: vertical; min-height: 78px; }
.field-hint, .form-note { font-size: 10px; line-height: 1.6; color: #4f5c6c; }
.field-hint { margin-top: 5px; }
.form-note { font-size: 11px; }
.button, .icon-button, .filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 13px;
  border: 2px solid;
  border-color: #fff #65758b #65758b #fff;
  outline: 1px solid #9aa9bb;
  border-radius: 0;
  background: linear-gradient(#f5f6f7, #d7dfe9);
  color: #173a64;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
}
.button:hover, .icon-button:hover, .filter-button:hover { background: #e5edf8; color: #092a55; }
.button:active, .icon-button:active, .filter-button:active {
  border-color: #65758b #fff #fff #65758b;
  background: #d7dfe9;
}
.button:focus-visible, .icon-button:focus-visible, .filter-button:focus-visible { outline: 2px dotted #111; outline-offset: 2px; }
.button:disabled, .icon-button:disabled, .filter-button:disabled { color: #72777d; background: #e1e3e5; text-shadow: 1px 1px #fff; }
.button svg { width: 14px; height: 14px; }
.button.secondary { background: linear-gradient(#f6f6f3, #dddfda); color: #353c43; }
.button.lime { background: #e3ecd9; color: #29491b; }
.button.danger { background: #efdfdc; color: #8c1a13; }
.button.full { width: 100%; }
.button.compact { min-height: 27px; padding: 4px 9px; font-size: 10px; }
.icon-button { width: 27px; min-width: 27px; height: 27px; min-height: 27px; padding: 3px; }
.icon-button svg { width: 14px; height: 14px; }
.text-button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; color: #003a94; text-decoration: underline; font-size: 11px; }
.text-button:hover { color: #a32316; }
.text-button svg { width: 12px; height: 12px; }
.password-toggle { position: relative; }
.password-toggle input { padding-right: 36px; }
.password-toggle button { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 24px; height: 23px; border: 1px solid #bec8d3; background: #e9edf2; color: #3b5675; }
.password-toggle svg { width: 14px; height: 14px; }
.signin-foot { display: flex; align-items: flex-start; gap: 5px; margin-top: 14px; padding-top: 9px; border-top: 1px dotted #a5b2c1; color: #57616c; font-size: 10px; line-height: 1.5; }
.signin-foot svg { width: 12px; height: 12px; margin-top: 1px; }
.error { padding: 8px; border: 1px solid #b77c73; background: #fff0ec; color: #8c2117; font-size: 11px; line-height: 1.5; }
.error:empty { display: none; }

/* Employee board: compact, table-like rows and clear status labels. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 10px 10px; border: 1px solid #a7b7c8; background: #f3f6fa; }
.stat { padding: 9px 5px 7px; border-right: 1px solid #b8c6d7; text-align: center; }
.stat:last-child { border-right: 0; }
.stat-number { display: block; color: #2a5826; font: bold 24px "Courier New", monospace; }
.stat:nth-child(2) .stat-number { color: #8a5d0c; }
.stat:nth-child(3) .stat-number { color: #5c6876; }
.stat-label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; font-size: 10px; color: #3f4e60; white-space: nowrap; }
.dot { display: inline-block; width: 6px; height: 6px; background: currentColor; flex-shrink: 0; }
.status-list { border-top: 1px solid #b7c5d4; }
.person-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #d2dce7; }
.person-row:nth-child(even) { background: #f0f4f9; }
.person-row:last-child { border-bottom: 0; }
.person-info { flex: 1; min-width: 0; }
.person-info strong { display: block; font-size: 11px; overflow-wrap: anywhere; }
.person-info small { display: block; margin-top: 4px; color: #55667b; font-size: 10px; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; border: 1px solid #92af87; background: #eef5e9; color: #2b5923; font-size: 10px; font-weight: bold; white-space: nowrap; }
.status-badge.out { color: #505b68; background: #eff1f3; border-color: #acb5c0; }
.status-badge.lunch { color: #7c540b; background: #fff6d7; border-color: #c8b16e; }
.panel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 10px; background: #f0f3f7; border-top: 1px solid #b0bfd0; }
.empty-state { padding: 24px 13px; text-align: center; color: #4d6074; }
.empty-icon { display: inline-grid; place-items: center; width: 35px; height: 32px; border: 1px solid #b7c3d1; background: #e9eff6; color: #536f90; margin-bottom: 9px; }
.empty-state h3 { color: #2b476b; margin-bottom: 7px; }
.empty-state p { font-size: 11px; line-height: 1.6; max-width: 290px; margin: 0 auto; }
.empty-state .button { margin-top: 14px; }
.note-card { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #bcb17b; background: #fffbdc; color: #4c482e; }
.note-card > svg { width: 18px; height: 18px; color: #877127; }
.note-card h3 { margin-bottom: 5px; color: #66551f; font-size: 11px; }
.note-card p { font-size: 10px; line-height: 1.6; }
.workday-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 13px; padding: 12px; background: #f0f3f7; }
.workday-strip .intro { padding-right: 13px; border-right: 1px solid #aebdcd; min-width: 130px; }
.workday-strip h3 { color: #284666; font-size: 11px; }
.workday-strip p { font-size: 10px; color: #516174; margin-top: 3px; }
.day-step { display: flex; flex: 1; align-items: center; gap: 7px; }
.step-number { display: inline-grid; place-items: center; width: 23px; height: 23px; flex-shrink: 0; background: #d3deec; border: 1px solid #8ba2bc; color: #244768; font-size: 10px; font-weight: bold; }
.step-chevron { color: #879cb4; width: 10px; height: 10px; }
.board-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.overview-card { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; background: #eff4ea; border-color: #9daf93; }
.overview-card .eyebrow { color: #314e2b; font-size: 11px; }
.overview-card .stat-number { margin-top: 5px; font-size: 28px; }
.overview-card .section-icon { color: #57734b; }
.overview-card.amber { background: #fff7dc; border-color: #c2b282; }
.overview-card.amber .eyebrow, .overview-card.amber .stat-number, .overview-card.amber .section-icon { color: #75561a; }
.overview-card.gray { background: #eef0f3; border-color: #a3adbb; }
.overview-card.gray .eyebrow, .overview-card.gray .stat-number, .overview-card.gray .section-icon { color: #4f5e72; }
.board-grid { display: block; }
.employee-card { display: grid; grid-template-columns: 29px minmax(100px, 1fr) 115px 102px; gap: 4px 11px; padding: 11px 13px; border-bottom: 1px solid #c4cfdc; }
.employee-card:nth-child(even) { background: #edf3fa; }
.employee-card:last-child { border-bottom: 0; }
.employee-card-top { display: contents; }
.employee-card .avatar { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.employee-card h3 { grid-column: 2; grid-row: 1; font-size: 12px; overflow-wrap: anywhere; }
.employee-card > .small { grid-column: 2; grid-row: 2; font-size: 10px; }
.employee-hours { grid-column: 3; grid-row: 1 / 3; align-self: center; color: #344d68; font-size: 11px; text-align: right; }
.employee-card .status-badge { grid-column: 4; grid-row: 1 / 3; align-self: center; }

/* Administrative tables. */
.table-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; background: #e9edf2; border-bottom: 1px solid #8fa3bb; box-shadow: inset 0 1px #fff; }
.search-field { flex: 1; position: relative; min-width: 160px; max-width: 285px; }
.search-field svg { position: absolute; left: 8px; top: 8px; width: 14px; height: 14px; color: #607793; }
.search-field input { padding-left: 28px; font-size: 11px; }
.filter-group { display: flex; gap: 5px; padding: 0; }
.filter-button { padding: 5px 9px; min-height: 27px; font-size: 10px; font-weight: normal; }
.filter-button.active { border-color: #63778d #fff #fff #63778d; background: #cddbeb; color: #163659; font-weight: bold; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { padding: 8px 10px; font-size: 10px; font-weight: bold; color: #fff; background: #385e87; border-right: 1px solid #6d8bad; border-bottom: 1px solid #204168; }
th:last-child { border-right: 0; }
td { padding: 9px 10px; border-bottom: 1px solid #c4cfdb; border-right: 1px solid #dce3ec; font-size: 11px; color: #273d57; }
td:last-child { border-right: 0; }
tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #edf3fa; }
td .person-row { padding: 0; border: 0; background: transparent; }
td.code { font: bold 15px "Courier New", monospace; letter-spacing: 2px; }
td > svg { width: 13px; height: 13px; }
.table-footer { padding: 8px 10px; font-size: 10px; color: #465b74; border-top: 1px solid #a6b6c8; background: #eef2f7; }
.pill { padding: 4px 7px; border: 1px solid #a8b9cd; background: #fff; color: #425b77; font-size: 10px; }
.action-cell, .action-heading { display: flex; align-items: center; gap: 8px; }
.local-date { max-width: 160px; }
.entry-date-group { display: flex; align-items: center; gap: 8px; }
.entry-date-label { margin: 0; font-size: 11px; }
.audit-row td { white-space: normal; background: #fffce7; font-size: 11px; line-height: 1.6; }
.audit-entry { padding: 5px 9px; margin: 6px 0; border-left: 3px solid #b8a958; }
.employee-metadata { margin-top: 5px; font-size: 11px; color: #4f6177; }
.admin-welcome { padding: 14px; }
.admin-welcome h2 { color: #173e6d; }
.admin-welcome p { margin: 9px 0 16px; font-size: 11px; color: #4f5c6b; }
.welcome-icon { display: inline-grid; place-items: center; width: 33px; height: 33px; border: 1px solid #a3b4c9; background: #e2eaf4; color: #375e87; margin-bottom: 10px; }

/* Dialogs follow the same title-bar and inset-control conventions. */
dialog {
  width: min(450px, calc(100% - 28px));
  max-height: calc(100dvh - 34px);
  padding: 17px;
  border: 2px solid;
  border-color: #fff #4d5b6b #4d5b6b #fff;
  outline: 1px solid #284462;
  border-radius: 0;
  background: #e9ecf0;
  color: #253b55;
  box-shadow: 5px 5px 0 #182c4a55;
}
dialog::backdrop { background: #11294566; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: -14px -14px 16px; padding: 8px 9px 10px; color: #fff; background: linear-gradient(90deg, #153c70, #6089b4); border-bottom: 1px solid #203e63; }
.modal-head h2 { margin: 1px 0 5px; font-size: 14px; color: #fff; }
.modal-head p { color: #eef3f9; font-size: 11px; line-height: 1.5; }
.modal-head .icon-button { width: 23px; height: 23px; min-width: 23px; min-height: 23px; flex-shrink: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 15px; }
.setup-intro { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #a4b6ca; background: #edf2f8; }
.setup-intro p { font-size: 10px; color: #4e6580; margin-top: 3px; }
.setup-intro .text-button { margin-left: auto; }
.setup-intro > div, .modal-head > div { min-width: 0; overflow-wrap: anywhere; }
.setup-alert { font-size: 11px; color: #4f6177; line-height: 1.6; }
.success-code { padding: 18px; margin: 17px 0; text-align: center; border: 2px solid; border-color: #8999ab #fff #fff #8999ab; background: #f8fafc; }
.success-code .eyebrow { color: #49627f; font-size: 10px; }
.success-code strong { display: block; margin: 8px 0; padding-left: 9px; color: #1f3e65; font: bold 42px "Courier New", monospace; letter-spacing: 9px; }
.success-code p { color: #52677e; font-size: 11px; }
.inline-link { color: #003a94; text-decoration: underline; }
.required { color: #8b2419; }
.connection-banner { margin-top: 10px; padding: 8px 10px; border: 1px solid #b8a75e; background: #fff8d2; color: #67571e; font-size: 11px; }
.connection-banner:empty { display: none; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 11px 16px; max-width: calc(100% - 28px); z-index: 10; border: 2px solid; border-color: #fff #68798e #68798e #fff; outline: 1px solid #7b8ca2; background: #fffbd5; color: #233e61; box-shadow: 3px 3px #172c4255; font-size: 12px; opacity: 0; pointer-events: none; }
.toast.visible { opacity: 1; }
.toast.error-toast { color: #8b2319; background: #ffebe5; }
.footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 23px; padding: 8px 0 0; border-top: 1px solid #8ba0b9; font-size: 9px; color: #50647e; }
.footer span { display: inline-flex; align-items: center; gap: 5px; }
.footer svg { width: 11px; height: 11px; }
.skip-link { position: fixed; top: -100px; left: 15px; z-index: 20; padding: 9px; background: #fff; border: 1px solid #173d6a; }
.skip-link:focus { top: 10px; }
.initial-load { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 14px; color: #17395f; background: #e6ecf3; }
.loading-mark { display: grid; place-items: center; padding: 12px 16px; border: 2px outset #dee7f1; background: #254c7a; color: #fff; font: bold italic 26px "Trebuchet MS", sans-serif; }
.loading-mark svg { width: 30px; height: 30px; }
.loading-text { padding: 25px 12px; color: #4a627f; text-align: center; font-size: 11px; }
.mobile-nav, .mobile-logo, .mobile-profile { display: none; }

/* Keep the period styling usable on contemporary phones. */
@media (max-width: 1000px) {
  .shell { width: calc(100% - 24px); margin: 12px auto; grid-template-columns: 161px minmax(0, 1fr); min-height: calc(100dvh - 24px); }
  .workspace { padding-left: 12px; padding-right: 12px; }
  .topbar { margin-left: -12px; margin-right: -12px; }
  .grid { grid-template-columns: minmax(0, 1.1fr) minmax(238px, 1fr); gap: 10px; }
  .clock-time { font-size: 43px; }
  .clock-seconds { font-size: 27px; }
  .clock-ampm { font-size: 12px; padding-left: 5px; }
  .heading > .date-pill { display: none; }
  .workday-strip .intro { display: none; }
  .workday-strip { gap: 9px; }
  .today-label { display: none; }
  .filter-button { padding-left: 6px; padding-right: 6px; }
  .employee-card { grid-template-columns: 29px minmax(100px, 1fr) 93px 95px; gap: 4px 8px; }
}
@media (max-width: 820px) and (min-width: 681px) {
  .grid { grid-template-columns: 1fr; }
  .clock-time { font-size: 54px; }
  .clock-seconds { font-size: 33px; }
  .clock-ampm { font-size: 16px; }
}
@media (max-width: 680px) {
  .shell { display: block; width: calc(100% - 14px); margin: 7px auto 78px; min-height: calc(100dvh - 85px); box-shadow: 2px 2px 0 #435b754d; }
  .site-masthead { min-height: 77px; padding: 13px; gap: 10px; }
  .brand { gap: 9px; }
  .brand-mark { width: 37px; height: 37px; }
  .brand-mark svg { width: 27px; height: 27px; }
  .brand-name { font-size: 27px; }
  .brand-tagline { font-size: 9px; letter-spacing: 0; }
  .masthead-meta { font-size: 8px; letter-spacing: 0; }
  .sidebar { display: none; }
  .workspace { padding: 0 11px 10px; }
  .topbar { min-height: 35px; margin: 0 -11px; padding: 5px 9px; gap: 6px; flex-wrap: wrap; }
  .breadcrumb { gap: 5px; font-size: 9px; }
  .breadcrumb > svg, .breadcrumb > span:first-of-type, .breadcrumb .slash { display: none; }
  .topbar-right { gap: 9px; margin-left: auto; }
  .live-label { font-size: 9px; }
  .mobile-profile { display: block; }
  .mobile-profile .profile { margin: 0; padding: 0; border: 0; }
  .mobile-profile .avatar, .mobile-profile .profile-copy span { display: none; }
  .mobile-profile .profile-copy { display: block; max-width: 120px; }
  .mobile-profile .profile-copy strong { font-size: 10px; }
  .mobile-profile .icon-button { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }
  .heading { padding: 16px 0 12px; gap: 10px; }
  h1 { font-size: 19px; }
  .heading p { font-size: 11px; }
  .heading > .button { white-space: nowrap; min-height: 32px; padding: 6px 8px; }
  .heading > .button .long-label { display: none; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .stack { gap: 12px; }
  .clock-time { font-size: 53px; }
  .clock-seconds { font-size: 32px; }
  .clock-ampm { font-size: 15px; padding-left: 7px; }
  .clock-face { padding: 11px 6px; }
  .clock-footer { font-size: 10px; }
  .panel-body { padding: 0 13px 14px; }
  input, select, textarea { min-height: 38px; font-size: 16px; }
  input[type="date"], input[type="datetime-local"] { font-size: 13px; }
  .button { min-height: 36px; font-size: 12px; }
  .button.compact { min-height: 32px; font-size: 11px; }
  .icon-button { min-height: 32px; height: 32px; min-width: 32px; width: 32px; }
  .password-toggle button { top: 5px; height: 28px; width: 28px; }
  .password-toggle input { padding-right: 41px; }
  .person-row { padding: 10px; }
  .person-info strong { font-size: 12px; }
  .stat { padding: 11px 6px; }
  .stat-label { font-size: 11px; }
  .workday-strip { gap: 5px; padding: 11px 8px; }
  .day-step { align-items: flex-start; gap: 6px; }
  .day-step h3 { font-size: 10px; }
  .day-step p { font-size: 9px; }
  .step-number { width: 20px; height: 20px; font-size: 9px; }
  .step-chevron { width: 8px; height: 8px; }
  .board-overview { gap: 7px; margin-bottom: 12px; }
  .overview-card { padding: 9px; }
  .overview-card .eyebrow { font-size: 10px; }
  .overview-card .section-icon { display: none; }
  .employee-card { grid-template-columns: 28px minmax(0, 1fr) 97px; gap: 4px 8px; padding: 10px; }
  .employee-card .avatar { grid-row: 1 / 4; }
  .employee-hours { grid-column: 2; grid-row: 3; font-size: 10px; text-align: left; }
  .employee-card .status-badge { grid-column: 3; grid-row: 1 / 4; }
  .table-toolbar { gap: 9px; padding: 9px; }
  .search-field { max-width: none; }
  .search-field input { font-size: 16px; }
  .search-field svg { top: 11px; }
  .filter-group { width: 100%; }
  .filter-button { flex: 1; min-height: 33px; padding: 5px 4px; font-size: 10px; }
  .form-row { grid-template-columns: 1fr; }
  .entry-date-group { width: 100%; justify-content: space-between; }
  .footer { align-items: flex-start; font-size: 9px; line-height: 1.5; }
  .footer span { max-width: 55%; }
  .footer span svg { display: none; }
  .mobile-nav { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; display: flex; align-items: stretch; gap: 5px; padding: 7px 7px calc(7px + env(safe-area-inset-bottom)); background: #d8dee7; border-top: 2px solid #fff; outline: 1px solid #627790; }
  .mobile-nav .nav { width: auto; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 3px; min-height: 47px; border: 2px solid; border-color: #fff #7e90a5 #7e90a5 #fff; background: #e9eef5; font-size: 10px; text-align: center; }
  .mobile-nav .nav::before { display: none; }
  .mobile-nav .nav svg { display: block; width: 15px; height: 15px; }
  .mobile-nav .nav.active { border-color: #6b7f96 #fff #fff #6b7f96; background: #ccdcee; }
  .toast { bottom: 79px; }
  .modal-head { padding: 9px; }
  .modal-head h2 { font-size: 14px; }
  .modal-actions { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .masthead-meta { display: none; }
  .clock-time { font-size: 47px; }
  .clock-seconds { font-size: 29px; }
  .clock-ampm { font-size: 13px; }
  .workday-strip .step-chevron { display: none; }
  .day-step { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}