/* Brief P3: Montserrat, self hosted (variable woff2, SIL Open Font Licence in fonts/OFL.txt). No requests to Google. */
@font-face { font-family: Montserrat; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/montserrat-latin-wght-normal.woff2) format('woff2-variations'), url(/fonts/montserrat-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Rota Brief R3: the staff phone page. Always light, on brand: navy, red, ivory, white. */
:root { color-scheme: light only; --navy: #002c41; --red: #e4022e; --ivory: #f6f5ee; --ink: #16232b; --muted: #5d5a4d; --line: #e4e1d6;
  --head: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; --body: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--body); font-size: 17px; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
.ph-top { position: sticky; top: 0; z-index: 5; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left)); }
.ph-who { font-family: var(--head); font-weight: 700; }
.ph-main { padding: 16px calc(16px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); max-width: 560px; margin: 0 auto; }
h1 { font-family: var(--head); font-weight: 800; color: var(--navy); font-size: 1.6rem; margin: 6px 0 6px; }
h2 { font-family: var(--head); font-weight: 700; color: var(--navy); font-size: 1.15rem; margin: 18px 0 8px; }
.ph-sub { color: var(--muted); margin: 4px 0 12px; }
.ph-strong { font-weight: 700; }
.ph-names { display: grid; gap: 10px; }
.ph-name { min-height: 60px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: var(--navy); }
.ph-dots { display: flex; justify-content: center; gap: 18px; margin: 18px 0; }
.ph-dots span { width: 18px; height: 18px; border-radius: 99px; border: 2px solid var(--navy); }
.ph-dots span.on { background: var(--navy); }
.ph-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ph-pad button { min-height: 66px; border-radius: 16px; border: 0; background: #e6edf1; color: var(--navy); font-family: var(--head); font-weight: 700; font-size: 1.6rem; }
.ph-pad .ph-del { font-size: 1rem; background: none; }
.ph-error { color: #b0001f; font-weight: 600; }
.ph-link { background: none; border: 0; color: var(--navy); text-decoration: underline; font-size: 1rem; padding: 12px 0; min-height: 44px; cursor: pointer; }
.ph-btn { width: 100%; min-height: 52px; border-radius: 12px; border: 0; background: var(--red); color: #fff; font-family: var(--head); font-weight: 800; font-size: 1.05rem; margin-top: 10px; }
.ph-btn:disabled { opacity: .45; }
.ph-code { width: 100%; font-size: 1.6rem; letter-spacing: .4em; text-align: center; min-height: 58px; border: 2px solid var(--line); border-radius: 12px; margin: 10px 0; }
.ph-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ph-day { background: #fff; border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line); }
.ph-day.today { border: 2px solid var(--red); }
.ph-day.off-holiday { background: #f3f1d6; } .ph-day.off-sick { background: #fbe0c6; } .ph-day.off-training { background: #dcefd6; }
.ph-day.off-unavailable, .ph-day.off-personal { background: #e6e6e3; }
.ph-day-name { font-family: var(--head); font-weight: 700; color: var(--navy); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-today { background: var(--red); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: .8rem; }
.ph-shift { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 1.05rem; }
.ph-shift.done { color: var(--muted); }
.ph-hours { color: var(--muted); }
.ph-none { margin-top: 6px; color: var(--muted); }
.ph-card { background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); margin-bottom: 12px; }
.ph-card h2 { margin-top: 0; }
.ph-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 10px 0; }
.ph-card input { font-size: 17px; min-height: 48px; padding: 8px 12px; border: 1px solid #c9c4b4; border-radius: 10px; background: #fff; }
.ph-req-link { margin: 18px 0 8px; }
.ph-preview { background: #eaf2f7; border-radius: 10px; padding: 8px 12px; }
.ph-signout { margin-top: 20px; }
.ph-toast { position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 12px; z-index: 7; text-align: center; }
.ph-label { display: block; font-weight: 700; color: var(--navy); margin: 8px 0 6px; }
.ph-name-box { width: 100%; font-size: 1.2rem; min-height: 56px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }

/* Brief T2.2: pinch zoom stays on the staff phone page, but fast taps on the PIN pad and buttons never zoom. */
button, a, [role="button"], label, input, select, textarea { touch-action: manipulation; }

/* Brief P3: headings 800, buttons 700. */
h1, h2, h3 { font-weight: 800; }
button, .ph-btn { font-weight: 700; }

/* Brief P7: requests waiting for James, one short line each, and Ask to cancel on an approved holiday day. */
.ph-waiting { list-style: none; margin: 4px 0 0; padding: 0; }
.ph-wait, .ph-upcoming { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--ink); border-top: 1px solid var(--line); }
.ph-wait .ph-link, .ph-ask-cancel { min-height: 44px; margin: 0; }
.ph-off { margin-top: 6px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph-ask-cancel { font-weight: 600; font-size: .95rem; }
/* Brief Q3: the rota a day at a time, like Findmyshift. */
.dv-month { margin: 4px 0 10px; font-size: 1.35rem; }
.dv-strip-wrap { display: flex; align-items: center; gap: 4px; margin: 0 -6px 14px; }
.dv-arrow { flex: 0 0 32px; height: 56px; border: 0; background: none; color: #002c41; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0; }
.dv-strip { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; touch-action: pan-y; }
.dv-dayb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; color: #002c41; font: inherit; cursor: pointer; border-radius: 12px; }
.dv-two { font-size: .8rem; font-weight: 700; color: #5d6b72; }
.dv-num { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; font-size: 1.05rem; }
.dv-dayb.today .dv-num { color: #e4022e; }
.dv-dayb.today .dv-two { color: #e4022e; }
.dv-dayb.on .dv-num { background: #002c41; color: #fff; }
.dv-day-title { margin: 0 0 10px; font-size: 1.05rem; color: #002c41; }
.dv-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.dv-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 44, 65, .06), 0 4px 14px rgba(0, 44, 65, .06); }
.dv-row.you { outline: 2px solid #002c41; }
.dv-dot { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: .02em; }
.dv-words { display: grid; gap: 2px; min-width: 0; }
.dv-words b { overflow-wrap: anywhere; }
.dv-you { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #002c41; color: #fff; font-size: .75rem; vertical-align: middle; }
.dv-times { color: #3c4a51; }
.dv-none { padding: 14px; color: #5d6b72; background: #fff; border-radius: 12px; }
/* Brief BK6: their own clock-ins. A small green clock (on time) or red clock with the minutes late, on their own shifts; the summary at the
   top with an "i" that explains on time and late. */
.ck { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 600; }
.dv-words > .ck { margin-top: 2px; }
.ck-ic { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ck-ok { color: #1d7a45; }
.ck-late { color: #b0001f; }
.ck-sum { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 4px 0 10px; }
.ck-head { display: flex; align-items: flex-start; gap: 10px; }
.ck-lines { flex: 1 1 auto; display: grid; gap: 6px; }
.ck-title { font-family: var(--head); font-weight: 800; color: var(--navy); font-size: .95rem; }
.ck-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ck-when { min-width: 92px; font-family: var(--head); font-weight: 700; color: var(--navy); font-size: .9rem; }
.ck-i { position: relative; flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 15px; color: var(--navy); }
.ck-i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 2px solid var(--navy); border-radius: 50%; box-sizing: border-box; }
.ck-info { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; font-size: .9rem; color: var(--ink); }
.ck-info p { margin: 6px 0; }
/* Brief BK6: James's View as on the phone page. */
.ph-view { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));
  background: var(--navy); color: #fff; font-family: var(--head); font-weight: 700; font-size: .95rem; border-top: 1px solid rgba(255, 255, 255, .25); }
.ph-view > span { flex: 1 1 auto; }
.ph-view-exit { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 2px solid #fff; background: none; color: #fff; font-family: var(--head); font-weight: 700; font-size: .95rem; }
.ph-viewing #ph-req-link, .ph-viewing #ph-req-form, .ph-viewing #ph-signout, .ph-viewing #ph-req-list button { display: none; }