/* Rexall #7161 — palette and type pulled directly from rexall.ca: brand teal, tagline red, Open Sans. */
:root {
  --counter: #F2F9F8;
  --label: #ffffff;
  --ink: #2b2f33;
  --ink-2: #5b6b70;
  --rule: #cddbda;
  --rule-soft: #e3eeed;

  --teal-deep: #006C68;
  --teal: #147B74;
  --teal-light: #1DB1A8;
  --teal-pale: #E5F5F4;
  --red: #EC1E24;
  --red-soft: #FCE4E5;
  --ok: #2F8F52;
  --ok-soft: #E3F3E8;
  --pending: #C77F1A;
  --pending-soft: #FBEEDD;

  --t-ops: #147B74;  --t-pack: #6B4FA0; --t-batch: #B23A6B; --t-narc: #EC1E24;
  --t-rts: #A65A2E;  --t-btc: #6B7A2F;  --t-exp: #C77F1A;   --t-ss: #2E5FA3;

  --display: "Open Sans", Arial, sans-serif;
  --body: "Open Sans", Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Open Sans", Arial, ui-sans-serif, system-ui, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--counter); color: var(--ink); font: 400 15px/1.5 var(--body); }
a { color: var(--teal-deep); text-decoration-color: var(--teal-light); text-underline-offset: 3px; }
a:hover { color: var(--teal); }
:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
tr.dim td, tr.dim th { opacity: .55; }
.coming { list-style: none; margin: 0; padding: 0; }
.coming li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.coming li:first-child { border-top: 0; }
.coming .mono { color: var(--ink-2); white-space: nowrap; }
.decide { display: grid; gap: 6px; min-width: 180px; }
.decide input { min-height: 32px; padding: 5px 8px; font-size: 13px; }

/* ---------- top bar ---------- */
.topbar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 24px; padding: 0 24px; min-height: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 10px 0; }
.brand:hover { color: var(--ink); }
.brand-mark { flex: none; font-family: "Pinyon Script", cursive; line-height: .8; font-size: 46px; color: var(--teal); padding-bottom: 4px; }
.brand-name { font: 700 17px/1.1 var(--display); letter-spacing: -.005em; color: var(--teal-deep); }
.mainnav { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: wrap; }
.mainnav a { color: var(--ink-2); text-decoration: none; padding: 19px 10px 17px; font-weight: 600; border-bottom: 3px solid transparent; }
.mainnav a:hover { color: var(--teal-deep); }
.mainnav a[aria-current="page"] { color: var(--teal-deep); border-bottom-color: var(--teal); }
.mainnav .muted { color: var(--ink-2); }
.nav-user { margin-left: auto; display: flex; gap: 2px; }
.pip { display: inline-block; background: var(--red); color: #fff; font: 700 11px/18px var(--mono); min-width: 18px; text-align: center; border-radius: 9px; padding: 0 5px; margin-left: 2px; }
.nav-toggle { display: none; margin-left: auto; background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); font: 600 14px var(--body); padding: 7px 12px; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .mainnav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: 10px; }
  .mainnav.open { display: flex; }
  .mainnav a { padding: 10px 4px; border-bottom: 0; border-left: 3px solid transparent; padding-left: 10px; }
  .mainnav a[aria-current="page"] { border-left-color: var(--teal); }
  .nav-user { margin-left: 0; flex-direction: column; border-top: 1px solid var(--rule-soft); margin-top: 6px; padding-top: 6px; }
}

/* ---------- page ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 24px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.15; color: var(--ink); }
h1 { font-size: 29px; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 15px; font-weight: 700; }
.lede { color: var(--ink-2); margin: 6px 0 0; max-width: 62ch; }
.eyebrow { font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 0 0 8px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: .88em; font-variant-numeric: tabular-nums; }

.panel { background: var(--label); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.panel > h2:first-child { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- flashes & notices ---------- */
.flash { border-radius: var(--radius); padding: 11px 14px; margin-bottom: 16px; border: 1px solid; font-weight: 500; }
.flash-ok { background: var(--ok-soft); border-color: #b9d6c3; color: var(--ok); }
.flash-err { background: var(--red-soft); border-color: #f3b7ba; color: var(--red); }
.flash-info { background: var(--teal-pale); border-color: #b9dedb; color: var(--teal-deep); }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { padding: 8px 0 8px 26px; border-top: 1px solid var(--rule-soft); position: relative; font-size: 14px; }
.checks li:first-child { border-top: 0; }
.checks li::before { position: absolute; left: 0; top: 8px; font: 700 12px/20px var(--mono); width: 18px; text-align: center; border-radius: 3px; }
.checks .warn::before { content: "!"; background: var(--red); color: #fff; }
.checks .info::before { content: "i"; background: var(--rule); color: var(--ink); }
.checks-ok { color: var(--ok); font-weight: 600; margin: 0; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.hint { font-size: 12.5px; color: var(--ink-2); font-weight: 400; margin-top: 4px; }
input[type=text], input[type=url], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email], select, textarea {
  width: 100%; font: 400 15px/1.3 var(--body); color: var(--ink); background: #fff;
  border: 1px solid #b9c6c5; border-radius: var(--radius); padding: 9px 10px; min-height: 40px;
}
input[type=time], input[type=date] { font-variant-numeric: tabular-nums; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 2px solid var(--teal-pale); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--teal); }
.inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.rph-cal { display: grid; grid-template-columns: 130px 1fr 80px; gap: 0 12px; align-items: end; }
.rph-cal .rph-rm { margin-bottom: 24px; white-space: nowrap; }
@media (max-width: 560px) { .rph-cal { grid-template-columns: 1fr; border-bottom: 1px solid var(--rule-soft); margin-bottom: 12px; } .rph-cal .rph-rm { margin-bottom: 12px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 14px/1 var(--body); border-radius: 999px;
  padding: 11px 18px; border: 1px solid var(--teal); background: var(--teal); color: #fff; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.btn-amber { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-amber:hover { background: #004b48; border-color: #004b48; }
.btn-ghost { background: transparent; color: var(--teal-deep); border-color: var(--rule); }
.btn-ghost:hover { background: var(--teal-pale); color: var(--teal-deep); border-color: var(--teal-light); }
.btn-danger { background: transparent; color: var(--red); border-color: #f3b7ba; }
.btn-danger:hover { background: var(--red-soft); color: var(--red); }
.btn-sm { padding: 7px 12px; min-height: 32px; font-size: 13px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--label); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th { font: 700 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--teal-pale); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
tr.is-me td { background: var(--teal-pale); }

/* ---------- stamps ---------- */
.stamp { display: inline-block; font: 700 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; padding: 5px 8px 4px; border: 1.5px solid; border-radius: 999px; white-space: nowrap; }
.stamp-pending, .stamp-draft { color: var(--pending); border-color: #e7be82; background: var(--pending-soft); }
.stamp-approved, .stamp-published { color: var(--ok); border-color: #8fbfa0; background: var(--ok-soft); }
.stamp-denied { color: var(--red); border-color: #f3b7ba; background: var(--red-soft); }
.stamp-cancelled { color: var(--ink-2); border-color: var(--rule); background: #f5f7f9; }
.tag { display: inline-block; font: 600 11px/1 var(--mono); padding: 4px 7px 3px; border-radius: 999px; background: var(--teal-pale); color: var(--teal-deep); border: 1px solid #cfe8e5; white-space: nowrap; }
.tag-late { background: var(--red-soft); color: var(--red); border-color: #f3b7ba; }

/* ---------- Rx label (signature) ---------- */
.rx { --band: var(--t-ops); background: var(--label); border: 1px solid var(--rule); border-top: 5px solid var(--band); border-radius: 8px;
  padding: 8px 10px 7px; font-size: 12px; line-height: 1.35; position: relative; min-width: 0; }
.task-ops { --band: var(--t-ops); } .task-pack { --band: var(--t-pack); } .task-batch { --band: var(--t-batch); } .task-narc { --band: var(--t-narc); }
.task-rts { --band: var(--t-rts); } .task-btc { --band: var(--t-btc); } .task-exp { --band: var(--t-exp); } .task-ss { --band: var(--t-ss); }
.rx-head { display: flex; justify-content: space-between; gap: 8px; font: 600 10px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.rx-drug { margin: 3px 0 2px; font: 700 12.5px/1.2 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--band); }
.rx-sig { margin: 0; font: 500 11px/1.4 var(--mono); }
.rx-foot span:first-child { font-weight: 700; }
.rx-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--rule); font: 400 10.5px/1.3 var(--mono); color: var(--ink-2); }
.rx-note { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-big { padding: 16px 20px 14px; border-top-width: 6px; border-radius: 12px; font-size: 15px; }
.rx-big .rx-head { font-size: 12px; }
.rx-big .rx-drug { font-size: clamp(22px, 4vw, 30px); margin: 8px 0 6px; }
.rx-big .rx-sig { font-size: 15px; }
.rx-big .rx-foot { font-size: 13px; margin-top: 12px; padding-top: 8px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 11px/1 var(--mono); color: var(--ink-2); margin: 10px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--band); display: inline-block; }

/* ---------- week grid ---------- */
.weekbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.weekbar .week-name { font: 700 17px/1 var(--display); min-width: 200px; text-align: center; color: var(--teal-deep); }
.sched { table-layout: fixed; min-width: 1060px; }
.sched th:first-child, .sched td:first-child { width: 132px; position: sticky; left: 0; background: var(--label); z-index: 1; border-right: 1px solid var(--rule-soft); }
.sched thead th:first-child { background: var(--teal-pale); }
.sched td { padding: 3px; }
.sched .who { font-weight: 700; font-size: 13px; padding: 5px 12px; }
.sched .who small { display: block; font: 500 10.5px/1.4 var(--mono); color: var(--ink-2); }
.sched tr.is-me td:first-child { background: var(--teal-pale); box-shadow: inset 4px 0 0 var(--teal); }
.sched tfoot td { background: var(--teal-pale); font: 600 12px/1.4 var(--mono); border-top: 1px solid var(--rule); padding: 6px; }
.cov-short { color: var(--red); font-weight: 700; }
.cov-ok { color: var(--ok); }
.sched .today-col { background: #fbfffe; }
.sched thead .hol { display: block; margin-top: 3px; font: 700 9.5px/1.25 var(--mono); letter-spacing: 0; text-transform: none; color: var(--red); white-space: normal; }
thead th.today-col { background: #d8f0ee; color: var(--teal-deep); }

/* Dense grid bars — one solid colour block per shift, N/A greyed out (per design ref) */
.bar-stack { display: grid; gap: 2px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 38px; border-radius: 6px; padding: 4px; font: 700 11.5px/1.1 var(--mono); color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.bar-work { font-size: 10.5px; letter-spacing: .02em; }
.bar-time { font-weight: 500; font-size: 10.5px; opacity: .92; }
.bar-na { background: repeating-linear-gradient(135deg, #f1f4f4 0 6px, #e8eded 6px 12px); color: #9aa8a7; border: 1px dashed #d3dcdb; text-transform: uppercase; letter-spacing: .05em; font-size: 9.5px; font-weight: 600; min-height: 30px; }
.bar-timeoff { background: var(--red-soft); color: var(--red); border: 1px solid #f3b7ba; text-transform: uppercase; letter-spacing: .03em; font-size: 9px; font-weight: 700; min-height: 24px; padding: 2px 4px; }
.bar-statpay { background: #FFF3D1; color: #7A5200; border: 1px solid #EBCF85; min-height: 30px; padding: 3px 4px; }
.bar-statpay .bar-work { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
.tag-stat { background: #FFF3D1; color: #7A5200; border-color: #EBCF85; }
.legend .lg-na i { background: repeating-linear-gradient(135deg, #f1f4f4 0 3px, #dfe6e6 3px 6px); border: 1px dashed #c3cfce; }
.legend .lg-off i { background: var(--red-soft); border: 1px solid #f3b7ba; }
.legend .lg-stat i { background: #FFF3D1; border: 1px solid #EBCF85; }
/* pharmacist shifts (from Google Calendar, read-only) */
.bar-rph { width: 100%; min-height: 22px; padding: 2px 4px; background: #fff; color: var(--teal-deep); border: 1.5px solid var(--teal-deep); cursor: pointer; } /* name only; tap for the hours */
.bar-rph:hover, .bar-rph:focus-visible { background: #D4EEEB; }
.bar-rph .bar-work { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .lg-rph i { background: #fff; border: 1.5px solid var(--teal-deep); }
.sched .rph-rows th, .sched .rph-rows td { background: var(--teal-pale); }
.sched .rph-rows .who { color: var(--teal-deep); }
.sched .rph-rows tr:last-child th, .sched .rph-rows tr:last-child td { border-bottom: 2px solid #9FD3CF; }
/* a shift on a day the person has approved time off: flag it in the cell, not just in the checks */
.off-flag { font: 700 8.5px/1.15 var(--mono); color: var(--red); background: var(--red-soft); border-radius: 4px; padding: 2px 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.has-clash { box-shadow: inset 0 0 0 1px var(--red); }
.bar.task-ops   { background: var(--t-ops); }
.bar.task-pack  { background: var(--t-pack); }
.bar.task-batch { background: var(--t-batch); }
.bar.task-narc  { background: var(--t-narc); }
.bar.task-rts   { background: var(--t-rts); }
.bar.task-btc   { background: var(--t-btc); }
.bar.task-exp   { background: var(--t-exp); }
.bar.task-ss    { background: var(--t-ss); }
.bar-btn { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 6px; }
.bar-btn:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 1px; }
.bar-btn:hover .bar { filter: brightness(1.1); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.add-shift { display: block; width: 100%; font: 600 10px/1 var(--mono); color: #8b9a99; background: transparent; border: 1px dashed var(--rule); border-radius: 6px; padding: 5px; cursor: pointer; margin-top: 2px; opacity: 0; transition: opacity .1s; }
td:hover .add-shift, .add-shift:focus-visible { opacity: 1; }
.paste-shift { display: block; width: 100%; font: 700 10px/1 var(--mono); color: var(--teal-deep); background: transparent; border: 1px solid var(--teal-deep); border-radius: 6px; padding: 5px; cursor: pointer; margin-top: 2px; }
.paste-shift[hidden] { display: none; }
.paste-shift:hover { background: rgba(0,0,0,.05); }
.bar-btn.is-selected { outline: 2px solid var(--teal-deep); outline-offset: 1px; }
button.rx-btn { all: unset; display: block; cursor: pointer; border-radius: 8px; }
button.rx-btn:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 1px; }
button.rx-btn:hover .rx { border-color: var(--teal-light); }

/* ---------- availability chart ---------- */
.av { font: 600 12px/1.2 var(--mono); text-align: center; border-radius: 6px; padding: 7px 4px; }
.av-full { background: var(--ok-soft); color: var(--ok); }
.av-na { background: #eef2f2; color: #8a9a99; }
.av-part { background: var(--pending-soft); color: var(--pending); }
.av-table td { vertical-align: middle; }
.av-edit td { padding: 6px 8px; }
.avail-now li { align-items: center; padding: 6px 0; }
.avail-now .av { min-width: 118px; padding: 6px 10px; }
.avail-next { margin: 10px 0 0; }
.tag-wait { background: var(--pending-soft); color: var(--pending); border-color: transparent; }
.part-times { display: flex; gap: 4px; margin-top: 4px; }
.part-times input { min-height: 32px; padding: 4px 6px; font-size: 12px; }

/* ---------- posted schedule grid (sched-fit): the whole week, no sideways scrolling ---------- */
.bar-time-short { display: none; }
.sched-fit { min-width: 0; }
.sched-fit thead th { text-align: center; }
.sched-fit thead th:first-child { text-align: left; }
.sched-fit .bar { min-height: 34px; }
.sched .bar.bar-rph { min-height: 22px; }
.sched-fit td { vertical-align: top; }

/* ---------- my shifts (mobile list) ---------- */
.my-shifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.empty { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--ink-2); background: rgba(255,255,255,.5); }

/* ---------- dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--label); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; display: block; }
.stat b { display: block; font: 800 26px/1 var(--display); margin-bottom: 6px; color: var(--teal-deep); }
.stat span { font-size: 13px; color: var(--ink-2); }
a.stat:hover { border-color: var(--teal-light); color: var(--ink); }

/* ---------- dialog ---------- */
dialog { border: 1px solid var(--rule); border-radius: 14px; padding: 0; width: min(480px, 94vw); color: var(--ink); }
dialog::backdrop { background: rgba(20, 40, 40, .45); }
dialog form { padding: 20px; }
.task-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 14px; }

/* ---------- pop-up message ---------- */
dialog.popup { width: min(380px, 92vw); text-align: center; }
dialog.popup p { margin: 0; padding: 22px 22px 4px; font-size: 16px; line-height: 1.45; }
dialog.popup form { padding: 16px 22px 20px; }
dialog.popup .btn { min-width: 120px; }

/* ---------- reset codes (hidden until asked) ---------- */
.reveal summary { cursor: pointer; color: var(--teal-deep); font: 600 12px/1 var(--sans, inherit); list-style: none; }
.reveal summary::-webkit-details-marker { display: none; }
.reveal[open] summary { display: none; }

/* hints that differ for mouse and touch */
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }

/* ---------- login ---------- */
.auth { max-width: 400px; margin: 40px auto; }
.auth .rx-big { margin-bottom: 18px; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filters .field { margin: 0; min-width: 150px; }

@media (max-width: 700px) {
  /* the Build page grid — tighter so more of the week fits (it scrolls sideways) */
  .sched { min-width: 760px; }
  .sched th:first-child, .sched td:first-child { width: 92px; }
  .sched .who { padding: 5px 8px; font-size: 12px; }
  th, td { padding: 9px 10px; }
  .btn-sm { min-height: 36px; }
  /* posted schedule: all 7 days on one phone screen — short times ("9–5:30"), first names, no sideways swipe */
  .sched.sched-fit { min-width: 0; }
  .sched.sched-fit th:first-child, .sched.sched-fit td:first-child { width: 64px; }
  .sched.sched-fit thead th { padding: 6px 1px; font-size: 9.5px; letter-spacing: 0; line-height: 1.15; }
  .sched.sched-fit thead th:first-child { padding-left: 6px; }
  .sched.sched-fit .dow, .sched.sched-fit .dnum { display: block; }
  .sched.sched-fit .dnum { font-size: 13px; font-weight: 800; }
  .sched.sched-fit .hol { font-size: 8px; margin-top: 1px; }
  .sched.sched-fit .hol-name { display: none; }
  .sched.sched-fit td { padding: 2px 1px; overflow: hidden; } /* nothing in a day can push the table wider (iPhone Safari) */
  .sched.sched-fit .who { padding: 5px 3px 5px 5px; font-size: 10.5px; line-height: 1.2; letter-spacing: -.01em; }
  .sched.sched-fit .who small { font-size: 9px; }
  .sched.sched-fit .bar { min-height: 32px; padding: 3px 1px; border-radius: 5px; gap: 1px; min-width: 0; overflow: hidden; }
  .sched.sched-fit .bar-work { font-size: 7.5px; letter-spacing: 0; }
  .sched.sched-fit .bar-time { display: none; }
  .sched.sched-fit .bar-time-short { display: block; font-size: 10px; font-weight: 700; letter-spacing: -.01em; }
  .sched.sched-fit .bar-timeoff { font-size: 7.5px; min-height: 32px; }
  .sched.sched-fit .bar-na { font-size: 7.5px; min-height: 32px; letter-spacing: 0; }
  .sched.sched-fit .bar-statpay { min-height: 32px; padding: 3px 1px; }
  .sched.sched-fit .bar-statpay .bar-work { font-size: 6.5px; letter-spacing: 0; }
  .sched.sched-fit .bar-rph { min-height: 20px; padding: 1px; }
  .sched.sched-fit .bar-rph .bar-work { font-size: 9.5px; letter-spacing: 0; }
  /* sign-in: skip the decorative label so the form is at the top */
  .auth > .rx-big { display: none; }
  .auth { margin-top: 12px; }
  /* tables marked stack-table become one card per row */
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table tr { border-top: 1px solid var(--rule); padding: 10px 14px; }
  .stack-table tr:first-child { border-top: 0; }
  .stack-table td { border: 0; padding: 3px 0; }
  .stack-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 64px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
  .stack-table td.stack-actions:empty { display: none; }
  .stack-table td.stack-actions { padding-top: 8px; }
}
/* touch screens have no hover, so the "+ shift" button must always be visible */
@media (hover: none) { .add-shift { opacity: 1; } }

@media (max-width: 640px) {
  .page { padding: 20px 14px 48px; }
  h1 { font-size: 24px; }
  .panel { padding: 16px; }
  .weekbar .week-name { min-width: 0; flex-basis: 100%; text-align: left; order: -1; }
}

@media print {
  .topbar, .weekbar .btn, .no-print, .add-shift, .paste-shift { display: none !important; }
  body { background: #fff; }
  .page { max-width: none; padding: 0; }
  .table-wrap { border: 0; overflow: visible; }
  .sched { min-width: 0; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }