/* ------------------------------------------------------------------
   BRAND TOKENS: sampled from poppinspayroll.com and app.poppinspayroll.com
   screenshots (Oct 2026). Hex values are eyeballed, not from source CSS.
------------------------------------------------------------------- */
:root {
  --orange: #CF5A3A;        /* logo badge, marketing CTA */
  --orange-cta: #B84F33;    /* slightly deeper orange so white button text meets WCAG AA */
  --orange-soft: #FBEAE3;
  --orange-ink: #A8432A;
  --navy: #141B4D;          /* headings, nav text, icons */
  --teal: #3E7368;          /* app links ("Edit rates") */
  --sage: #6BA594;          /* "Sign out", secondary buttons */
  --sage-soft: #E4F0EC;
  --nav-active: #EAF2F2;
  --nav-active-ink: #17403A;

  --bg: #FCF9F6;            /* app cream */
  --panel: #FBF6F1;         /* expanded day panel */
  --surface: #FFFFFF;
  --ink: var(--navy);
  --ink-2: #4E5478;
  --ink-3: #666A86;
  --line: #ECE6DF;

  --ok: #276B54;
  --ok-soft: #E3F1EB;
  --warn: #9A5B00;
  --warn-soft: #FFF2DA;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 27, 77, .04);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; color: var(--navy); }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
.muted { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 13px; }
.tnum { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

.demo-ribbon { background: var(--navy); color: #fff; font-size: 12px; text-align: center; padding: 6px 16px; }

/* ---------------- Logo ---------------- */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.logo svg { width: 46px; height: 46px; flex: none; }
.wordmark { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; line-height: 1.35; }

/* ---------------- Shell ---------------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 30px); background: linear-gradient(to right, var(--surface) 264px, transparent 264px); }
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 18px; }
.nav-close { display: none; border: 0; background: none; font-size: 34px; line-height: 1; color: var(--sage); }
.nav-links { display: grid; gap: 2px; }
.nav-links a {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px;
  text-decoration: none;
  color: var(--navy);
  font-size: 16px;
}
.nav-links a:hover { background: var(--bg); }
.nav-links a.active { background: var(--nav-active); color: var(--nav-active-ink); font-weight: 700; }
.nav-links svg { width: 24px; height: 24px; flex: none; }
.pill-new {
  margin-left: auto;
  background: var(--orange-ink); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.sidebar-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 18px; }
.btn-signout { border: 0; background: var(--sage); color: #fff; font-weight: 700; font-size: 16px; padding: 12px; border-radius: 8px; }
.support { display: grid; gap: 6px; padding: 0 10px; color: var(--navy); font-size: 14px; }
.support svg { width: 34px; height: 34px; color: var(--orange); margin-bottom: 4px; }
.support b { font-size: 16px; }

.content { min-width: 0; display: flex; flex-direction: column; }
.utilitybar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: var(--surface); }
.view-toggle { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.view-toggle a { text-decoration: none; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.view-toggle a.active { background: var(--navy); color: #fff; }
.account { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-ink);
  font-weight: 700; font-size: 12px; flex: none;
}

main { padding: 28px 32px 130px; max-width: 1120px; width: 100%; outline: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); }

.mobilebar { display: none; }

/* ---------------- Primitives ---------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card + .card { margin-top: 16px; }
.grid > .card + .card, .stack > .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: grid; gap: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--sage); background: var(--surface); color: var(--teal);
  padding: 9px 18px; border-radius: 10px;
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--sage-soft); }
.btn:disabled { opacity: .45; cursor: default; background: var(--surface); }
.btn-primary { background: var(--orange-cta); border-color: var(--orange-cta); color: #fff; border-radius: 999px; }
.btn-primary:hover { background: var(--orange-ink); border-color: var(--orange-ink); }
.btn-sage { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-sage:hover { background: #335F56; }
.btn-link { border: 0; background: none; color: var(--teal); padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; text-decoration: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn svg, .btn-link svg { width: 17px; height: 17px; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #F3EFEA; color: var(--ink-2); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-new { background: var(--orange-soft); color: var(--orange-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot-live { background: var(--ok); box-shadow: 0 0 0 0 rgba(47, 125, 98, .5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(47, 125, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 125, 98, 0); } }
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }

.stat { display: grid; gap: 2px; }
.stat .label { font-size: 13px; color: var(--ink-2); }
.stat .value { font-size: 24px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 12.5px; color: var(--ink-3); }

.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.banner svg { width: 18px; height: 18px; flex: none; }
.banner .grow { flex: 1; }
.banner-ok { background: var(--ok-soft); color: #1F5A45; }
.banner-warn { background: var(--warn-soft); color: #6A4000; }
.banner-info { background: var(--nav-active); color: var(--nav-active-ink); }

.ico-circle { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ico-circle svg { width: 17px; height: 17px; }

/* ---------------- Home ---------------- */
.hero { background: var(--surface); border: 1px solid #EBC9BC; border-radius: 22px; padding: 28px; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; letter-spacing: -.015em; }
.hero-row { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 22px; }
.hero-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.todo-list li:last-child { border-bottom: 0; }
.todo-list .grow { flex: 1; min-width: 0; }

/* ---------------- Enter-hours tabs (mirrors Edit payroll) ---------------- */
.enter-by { display: flex; align-items: center; gap: 22px; margin: 4px 0 18px; flex-wrap: wrap; }
.enter-by > span { font-size: 16px; color: var(--navy); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.tabs button {
  border: 0; background: none; padding: 8px 14px 10px; font-size: 17px; color: var(--navy);
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px;
}
.tabs button.active { font-weight: 700; border-bottom-color: var(--navy); }
.tabs .pill-new { margin-left: 0; }

.emp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.emp-tab { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; }
.emp-tab .avatar { width: 28px; height: 28px; font-size: 11px; }
.emp-tab.active { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.flag-count { background: var(--warn-soft); color: var(--warn); border-radius: 999px; font-size: 11px; padding: 1px 7px; }

.period-card { padding: 26px 30px 8px; }
.period-title { font-size: 20px; font-weight: 700; }
.period-sub { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 6px; font-size: 16px; flex-wrap: wrap; }

.day-row { border-top: 1px solid var(--line); }
.day-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  border: 0; background: none; padding: 20px 0; text-align: left; font-size: 17px; color: var(--navy);
}
.day-head .day-name { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.day-head .times { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.day-head .hrs { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-head .chev { width: 20px; height: 20px; color: var(--teal); transition: transform .15s; flex: none; }
.day-row.open .chev { transform: rotate(180deg); }
.day-panel { background: var(--panel); border-radius: 12px; padding: 20px 22px; margin: 0 -10px 18px; }
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rate-grid b { font-size: 17px; display: block; }
.rate-grid .rate { color: var(--ink-2); margin: 4px 0 12px; display: block; }
.hrs-input { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.hrs-input input, .hrs-input .ro {
  width: 120px; text-align: right; font: inherit; font-size: 17px; color: var(--navy);
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.hrs-input .ro { background: transparent; border-style: dashed; }
.punches { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); align-items: center; }
.punches b { color: var(--navy); font-weight: 600; }
.punches .btn-link { margin-left: auto; }
.src { font-size: 12px; font-weight: 600; color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
.src svg { width: 12px; height: 12px; }
.src.edited { color: var(--teal); }

.week-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 18px 0 22px; border-top: 1px solid var(--line); }

.sticky-foot {
  position: sticky; bottom: 0; margin: 16px -32px -130px; padding: 16px 32px 84px;
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; z-index: 5;
}
.sticky-foot .totals-text { font-size: 17px; line-height: 1.7; }
.sticky-foot .totals-text b { font-weight: 700; }
.sticky-foot .btn { font-size: 17px; padding: 12px 22px; }
.foot-note { display: flex; align-items: center; gap: 6px; }

/* ---------------- Timecard ---------------- */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.how div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; font-size: 13.5px; color: var(--ink-2); }
.how b { display: block; color: var(--navy); font-size: 14px; margin-bottom: 3px; }
.how .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-ink); font-size: 11px; font-weight: 700; margin-right: 6px; }
.live-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.live-card .grow { flex: 1; min-width: 200px; }
.live-timer { font-size: 30px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.week-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.week-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 0 10px 10px; border-bottom: 1px solid var(--line); }
.week-table td { padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.week-table tr:last-child td { border-bottom: 0; }
.week-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.week-table th.num { text-align: right; }
.week-table tr.row-warn td { background: #FFFAF0; }
.week-table tr.row-live td { background: #F3FAF6; }
.week-table tr.row-future td { color: var(--ink-3); }
.day-cell b { display: block; }
.day-cell span { font-size: 12.5px; color: var(--ink-3); }
.note-line { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.note-line svg { width: 12px; height: 12px; flex: none; }
.edit-mark { display: block; font-size: 11.5px; color: var(--teal); margin-top: 3px; }
.row-actions { text-align: right; white-space: nowrap; }
.icon-btn { border: 0; background: transparent; color: var(--teal); padding: 6px; border-radius: 8px; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--bg); }
.icon-btn svg { width: 17px; height: 17px; }
.totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line); }
.table-wrap { overflow-x: auto; position: relative; }

/* ---------------- Placeholder ---------------- */
.placeholder { text-align: center; padding: 56px 24px; }
.placeholder .ico-circle { width: 54px; height: 54px; margin: 0 auto 14px; background: var(--nav-active); color: var(--nav-active-ink); }
.placeholder .ico-circle svg { width: 24px; height: 24px; }
.placeholder p { max-width: 460px; margin: 8px auto 0; }
.skeleton { display: grid; gap: 10px; max-width: 520px; margin: 28px auto 0; }
.skeleton div { height: 14px; border-radius: 6px; background: #F3EFEA; }

/* ---------------- Nanny phone ---------------- */
.phone-stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.phone-copy h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; margin: 10px 0; }
.phone-copy ul { padding-left: 18px; color: var(--ink-2); display: grid; gap: 8px; }
.phone { width: 340px; max-width: 100%; margin: 0 auto; border-radius: 44px; background: #14152A; padding: 12px; box-shadow: 0 30px 60px rgba(20, 27, 77, .18); }
.phone-screen { background: var(--bg); border-radius: 34px; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; }
.phone-notch { width: 96px; height: 24px; background: #14152A; border-radius: 0 0 16px 16px; margin: 0 auto; }
.phone-status { display: flex; justify-content: space-between; padding: 0 24px 4px; margin-top: -18px; font-size: 12px; font-weight: 600; }
.phone-brand { display: flex; align-items: center; gap: 10px; background: var(--orange); color: #fff; margin: 12px 14px 0; padding: 7px 14px 7px 8px; border-radius: 999px; }
.phone-brand svg { width: 30px; height: 30px; }
.phone-brand span { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.phone-body { padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.phone-hello b { font-family: var(--serif); font-weight: 500; font-size: 24px; display: block; }
.phone-big { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px 18px; text-align: center; }
.phone-big .live-timer { font-size: 40px; margin: 6px 0 2px; }
.shift-btn { width: 100%; border: 0; border-radius: 999px; padding: 17px; font-size: 18px; font-weight: 600; margin-top: 16px; }
.shift-btn.start { background: var(--teal); color: #fff; }
.shift-btn.end { background: var(--orange-cta); color: #fff; }
.shift-btn.secondary { background: var(--surface); border: 1.5px solid var(--sage); color: var(--teal); font-size: 15px; padding: 12px; margin-top: 10px; }
.phone-week { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.mini-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; text-align: center; font-size: 11px; color: var(--ink-3); }
.mini-days .bar { height: 46px; background: #F3EFEA; border-radius: 6px; position: relative; overflow: hidden; margin-bottom: 4px; }
.mini-days .bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--navy); border-radius: 6px; }
.mini-days .bar.live i { background: var(--sage); }
.mini-days .bar.warn i { background: #E2A740; }
.phone-pay { font-size: 13px; color: var(--ink-2); text-align: center; }

/* ---------------- Modal & toast ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 27, 77, .4); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 440px; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.modal h2 { margin-bottom: 6px; }
.modal p { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field textarea { font: inherit; font-size: 15px; color: var(--navy); font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.field input:focus, .field textarea:focus, .hrs-input input:focus { outline: 2px solid var(--sage); outline-offset: 0; border-color: var(--sage); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

#toast { position: fixed; left: 50%; top: 84px; transform: translate(-50%, -12px); background: var(--navy); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- Demo controls ---------------- */
.demo-controls { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 14px; box-shadow: 0 4px 16px rgba(20, 27, 77, .1); font-size: 13px; }
.dc-label { font-weight: 700; color: var(--orange-ink); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.dc-clock { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.demo-controls button { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }


/* ---------------- Approvals ---------------- */
.ico-12 { width: 12px; height: 12px; }
.badge .ico-12 { margin-right: -2px; }
.badge-pending { background: #EEF0FA; color: #3A4170; }
.banner-pending { background: #EEF0FA; color: #2A3060; }
.sync-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--ok-soft); color: #1F5A45; font-size: 14px; margin: 10px 0 12px; flex-wrap: wrap; }
.sync-bar.is-off { background: var(--nav-active); color: var(--nav-active-ink); }
.sync-bar svg { width: 18px; height: 18px; flex: none; }
.sync-bar .grow { flex: 1; min-width: 200px; }
.sync-bar .btn svg { width: 15px; height: 15px; }

.guide { border-color: #EBC9BC; margin-bottom: 16px; }
.guide .card-head { margin-bottom: 10px; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide-steps a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; text-decoration: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); height: 100%; }
.guide-steps a:hover { border-color: var(--sage); background: var(--bg); }
.guide-steps .n { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-cta); color: #fff; font-weight: 700; font-size: 13px; }
.guide-steps span:not(.n) { font-size: 13.5px; color: var(--ink-2); }
.guide-steps em { font-style: normal; font-weight: 600; color: var(--navy); }

.approve-group + .approve-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.approve-head { display: flex; align-items: center; gap: 12px; }
.approve-row { gap: 12px; }
.approve-row .grow b { font-weight: 600; }
.empty { display: flex; align-items: center; gap: 12px; color: var(--ok); }
.empty svg { width: 28px; height: 28px; flex: none; }
.empty p { margin: 0; color: var(--ink-2); }

.review-card .card-head { margin-bottom: 8px; }
.review-card .btn svg { width: 16px; height: 16px; }
.live-card + .review-card, .live-card + .banner { margin-top: 16px; }
.live-card + .banner { margin-bottom: 16px; }

.shift-list { list-style: none; margin: 0; padding: 0; }
.shift-item {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) 90px 130px 210px; align-items: center; gap: 12px;
  padding: 14px 10px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.shift-item:last-child { border-bottom: 0; }
.shift-item.is-warn { background: #FFFAF0; }
.shift-item.is-live { background: #F3FAF6; }
.shift-item.is-pending { background: #F7F8FD; }
.shift-item.is-future { color: var(--ink-3); }
.si-day b { display: block; }
.si-day span { font-size: 12.5px; color: var(--ink-3); }
.si-hrs { text-align: right; font-weight: 600; }
.si-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Employee phone: shift list */
.pw-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pw-top > div { display: grid; }
.pw-total { font-size: 22px; }
.pw-split { display: flex; gap: 12px; flex-wrap: wrap; color: var(--ink-2); margin: 8px 0 4px; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.sw.ok { background: var(--ok); }
.sw.pend { background: #8C92C4; }
.ps-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ps-list li + li { border-top: 1px solid var(--line); }
.ps-row { width: 100%; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; padding: 10px 2px; border: 0; background: none; text-align: left; font-size: 13.5px; color: var(--navy); }
button.ps-row:hover { background: var(--bg); }
.ps-row.today { font-weight: 600; }
.ps-day { color: var(--ink-2); font-size: 12.5px; }
.ps-day b { color: var(--navy); display: block; font-size: 13.5px; }
.ps-main { display: grid; gap: 3px; justify-items: start; }
.ps-hrs { font-weight: 600; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #F3EFEA; color: var(--ink-2); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.pend { background: #EEF0FA; color: #3A4170; }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip .dot { width: 6px; height: 6px; }

@media (max-width: 980px) {
  .shift-item { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "day main hrs" "day status actions"; row-gap: 8px; }
  .si-day { grid-area: day; align-self: start; }
  .si-main { grid-area: main; }
  .si-hrs { grid-area: hrs; }
  .si-status { grid-area: status; }
  .si-actions { grid-area: actions; }
  .guide-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .how { display: none; }
  /* On a phone the employee view is the real screen, not a phone mockup. */
  .phone-stage { display: flex; flex-direction: column-reverse; gap: 24px; }
  .phone-wrap .phone { width: 100%; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .phone-wrap .phone-screen { min-height: 0; border-radius: 22px; border: 1px solid var(--line); }
  .phone-wrap .phone-notch, .phone-wrap .phone-status, .phone-wrap .phone-brand { display: none; }
  .phone-copy h1 { font-size: 26px; }
  .dc-long { display: none; }
}

@media (max-width: 560px) {
  .shift-item { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "day main hrs" "day status status" "day actions actions"; padding: 12px 4px; column-gap: 10px; row-gap: 6px; }
  .si-actions { justify-content: flex-start; }
  .si-actions:empty { display: none; }
  .si-main .tnum { line-height: 1.4; }
  .sticky-foot { padding: 10px 16px 74px; gap: 4px; }
  .sticky-foot .totals-text { font-size: 15px; line-height: 1.45; display: flex; gap: 4px 16px; flex-wrap: wrap; }
  .sticky-foot .foot-note { display: none; }
  .sticky-foot .btn { font-size: 15px; padding: 9px 16px; }
}
/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .phone-stage { grid-template-columns: minmax(0, 1fr); }
  .totals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .mobilebar {
    display: flex; align-items: center; justify-content: space-between;
    margin: 10px 12px 0; padding: 8px 18px 8px 10px;
    background: var(--orange); border-radius: 999px; position: sticky; top: 8px; z-index: 25;
  }
  .mobilebar .logo { color: #fff; gap: 10px; }
  .mobilebar .logo svg { width: 38px; height: 38px; }
  .mobilebar .wordmark { font-weight: 500; letter-spacing: .16em; font-size: 15px; }
  .hamburger { border: 0; background: none; display: grid; gap: 7px; padding: 6px; }
  .hamburger span { display: block; width: 30px; height: 2.5px; background: #fff; border-radius: 2px; }
  .sidebar { position: fixed; inset: 0; z-index: 40; height: 100%; transform: translateX(-100%); transition: transform .2s; border-right: 0; }
  body.nav-open .sidebar { transform: none; }
  .nav-close { display: block; }
  .utilitybar { padding: 12px 16px; border-bottom: 0; background: transparent; justify-content: space-between; }
  .account-name { display: none; }
  main { padding: 8px 16px 130px; }
  .sticky-foot { margin: 16px -16px -130px; padding: 14px 16px 84px; }
  .how, .grid-2, .week-inputs { grid-template-columns: minmax(0, 1fr); }
  .period-card { padding: 20px 18px 4px; }
  .day-panel { margin: 0 -6px 16px; padding: 16px; }
  .rate-grid { gap: 12px; }
  .hrs-input input, .hrs-input .ro { width: 92px; padding: 10px 12px; }
}
@media (max-width: 560px) {
  .demo-controls { left: 12px; right: 12px; justify-content: space-between; }
  .dc-clock { display: none; }
  .hero h1, .phone-copy h1 { font-size: 28px; }
  .tabs button { padding: 8px 10px 10px; font-size: 16px; }
}