/* Phone pass (28 Oct 2026).
 *
 * The app forces 16px text in every box on phones so iOS doesn't zoom in
 * (solui2.css), but many boxes kept widths sized for 11px desktop text,
 * which is why times read "10:0(". This file gives those places a real
 * phone layout. Loaded after menus.css; rules use html:not(#rd):not(#rp)
 * so they outrank the older Sol layers that put one id in their selectors.
 */

.sf-req-dlab { display: none; }

@media (max-width: 700px) {
  /* ── Shifts window: each template is a card. Name and times on top,
     then the seven days in a row, so nothing scrolls sideways. ── */
  html:not(#rd):not(#rp) #m-req #req-body > div[style*='overflow-x'] {
    margin: 0;
    padding: 0;
    overflow: visible !important;
  }
  html:not(#rd):not(#rp) #m-req .sf-req-table,
  html:not(#rd):not(#rp) #m-req .sf-req-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
  }
  html:not(#rd):not(#rp) #m-req .sf-req-table thead { display: none; }
  html:not(#rd):not(#rp) #m-req .sf-tmpl-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px 5px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  html:not(#rd):not(#rp) #m-req .sf-tmpl-row > td { border: 0; }
  html:not(#rd):not(#rp) #m-req .sf-tmpl-row > td.sf-tmpl-cell {
    grid-column: 1 / -1;
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    white-space: normal;
  }
  html:not(#rd):not(#rp) #m-req .sf-tmpl-name { font-size: 15px; font-weight: 600; color: var(--text); }
  html:not(#rd):not(#rp) #m-req .sf-tmpl-role { font-size: 13px !important; font-weight: 400; }
  html:not(#rd):not(#rp) #m-req .sf-tmpl-times { margin-left: auto; gap: 6px; }
  html:not(#rd):not(#rp) #m-req .sf-tmpl-time-inp {
    width: 70px;
    min-height: 40px;
    padding: 0 6px;
    border-radius: 10px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
  }
  html:not(#rd):not(#rp) #m-req .sf-req-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0 !important;
  }
  html:not(#rd):not(#rp) #m-req .sf-req-dlab {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
  }
  html:not(#rd):not(#rp) #m-req .sf-req-input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    border-radius: 10px;
    -moz-appearance: textfield;
  }
  html:not(#rd):not(#rp) #m-req .sf-req-input::-webkit-inner-spin-button,
  html:not(#rd):not(#rp) #m-req .sf-req-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
}

@media (max-width: 700px) {
  /* The window header grew in the menus pass, so the old fixed body height
     (96dvh - 54px) ran 30px off the bottom and hid the Done button. */
  html:not(#rd):not(#rp) #m-req .modal { display: flex; flex-direction: column; }
  html:not(#rd):not(#rp) #m-req #req-body { flex: 1 1 auto; height: auto; min-height: 0; }
  html:not(#rd):not(#rp) #m-req :is(.fhint, .sf-section-sub) { font-size: 13px !important; line-height: 1.45; }
  html:not(#rd):not(#rp) #m-req .sf-section-h { font-size: 15px; }
  html:not(#rd):not(#rp) #m-req .sf-slot-label { font-size: 14px; }
  html:not(#rd):not(#rp) #m-req .sf-slot-meta { font-size: 13px; font-family: inherit; }
  html:not(#rd):not(#rp) #m-req .sf-add-tab { font-size: 14px; }
}

/* ── Labour on phones ─────────────────────────────────────────────────
 * Collapsed: a strip above the dock. Open: a real sheet with rounded top,
 * a grabber, its own scroll, and the baseline row pinned at the foot. The
 * old open animated max-height (.35s) and a keyframe at once, so it grew
 * in steps; phone.js now springs it up and down instead. Revenue and By
 * role open at the top of the sheet, where the tap was, instead of under
 * the bars out of sight.
 */
@media (max-width: 700px), (max-height: 520px) and (pointer: coarse) {
  html:not(#rd):not(#rp) #bot { transition: none; }
  /* Below the dock, so the sheet slides away behind it, not over it. */
  html:not(#rd):not(#rp) #bot:not(.collapsed) { z-index: 79; }
  html:not(#rd):not(#rp) .sol2-mobile-labour-shade { z-index: 78; }
  html:not(#rd):not(#rp) .sol2-mobile-dock { position: relative; }
  html:not(#rd):not(#rp) #bot:not(.collapsed) {
    top: auto;
    height: auto !important;
    min-height: 0;
    max-height: calc(100dvh - 64px - env(safe-area-inset-bottom) - 48px) !important;
    border-top: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,.28);
    animation: none;
    overflow: hidden;
  }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .bot-hdr {
    position: relative;
    flex: 0 0 auto;
    height: 56px;
    padding: 10px 16px 0;
    background: var(--surface);
    border-bottom: 0;
  }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .bot-hdr::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text) 22%, transparent);
  }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .bot-title { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
  html:not(#rd):not(#rp) #bot .bot-arrow { display: none; }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .bot-hdr-extras {
    flex: 0 0 auto;
    padding: 4px 12px 10px !important;
    scrollbar-width: none;
  }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .bot-hdr-extras::-webkit-scrollbar { display: none; }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .bot-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    align-content: start;
  }
  html:not(#rd):not(#rp) #bot:not(.collapsed) :is(.rev-row.open, .lab-role-row.open) { order: -1; }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .day-bars { min-height: 112px; }
  html:not(#rd):not(#rp) #bot:not(.collapsed) .baseline-bar { flex: 0 0 auto; padding: 10px 16px; }

  /* Collapsed strip: hours, cost, and labour % once there's revenue to
     work it out from; until then the staff count, not a lone dash. */
  html:not(#rd):not(#rp) #bot.collapsed .bot-hdr { padding-inline: 16px; }
  html:not(#rd):not(#rp) #bot.collapsed .sol-labour-glance { justify-content: flex-start; gap: 18px; font-size: 13px; color: var(--muted); }
  html:not(#rd):not(#rp) #bot.collapsed .sol-labour-glance b { font-size: 14px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
  html:not(#rd):not(#rp) #bot.collapsed .sol-labour-glance span[data-empty] { display: none; }
  html:not(#rd):not(#rp) #bot.collapsed .sol-labour-glance span:nth-child(3)[data-empty] ~ span:nth-child(4) { display: inline; }
  html:not(#rd):not(#rp) #bot.collapsed .sol-labour-glance::after {
    content: '';
    width: 8px;
    height: 8px;
    margin: 2px 2px 0 auto;
    border-left: 1.75px solid var(--muted);
    border-top: 1.75px solid var(--muted);
    transform: rotate(45deg);
  }

  /* The editor's notes sat over the dock, half off-centre. They now rise
     just above the labour strip, full width. */
  html:not(#rd):not(#rp) #toasts {
    left: 12px;
    right: 12px;
    bottom: calc(64px + 42px + 10px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  html:not(#rd):not(#rp) body.sol2-mobile-labour-open #toasts { bottom: calc(64px + 10px + env(safe-area-inset-bottom)); }
  html:not(#rd):not(#rp) #toasts > * { max-width: none; width: 100%; margin: 0; }
}
@media (max-width: 700px) {
  html:not(#rd):not(#rp) #toasts .toast2 { animation-name: phone-toast-in; border-radius: 12px; }
  @keyframes phone-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ── Editor, portrait phone: one scroll for the whole day ────────────
 * The list used to be its own 251px scroll box under five pinned bars
 * (top bar, week, banner, day title, labour strip) on a 664px screen.
 * Now .main scrolls: the week and day strip stay pinned at the top, the
 * labour strip at the bottom, and the banner and day title scroll away
 * with the shifts. phone.js puts the scroll back to the top on a new day.
 */
@media (max-width: 700px) {
  html:not(#rd):not(#rp).sol2-daylist:not(.sol2-landscape) .main {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* No -webkit-overflow-scrolling here: Safari makes it a layer of its
       own, the open labour sheet inside it drops under the dimmed backdrop,
       and every tap on the sheet closed it. */
  }
  html:not(#rd):not(#rp).sol2-daylist:not(.sol2-landscape) .main > * { flex-shrink: 0; }
  html:not(#rd):not(#rp).sol2-daylist:not(.sol2-landscape) .sol2-mobile-day-head {
    position: sticky;
    top: 0;
    z-index: 6;
  }
  html:not(#rd):not(#rp).sol2-daylist:not(.sol2-landscape) .sol2-agenda { flex: 1 0 auto; min-height: auto; }
  html:not(#rd):not(#rp).sol2-daylist:not(.sol2-landscape) .sol2-agenda-list {
    flex: 1 0 auto;
    overflow: visible;
    padding-bottom: 12px;
  }
  html:not(#rd):not(#rp).sol2-daylist:not(.sol2-landscape) #bot.collapsed {
    position: sticky;
    bottom: 0;
    z-index: 6;
  }
}
@media (max-width: 700px), (max-height: 520px) and (pointer: coarse) {
  /* The count on the picked day was grey on black until coverage arrived. */
  html:not(#rd):not(#rp) .sol2-mobile-day.active i { color: var(--surface); }
}

.abs-th-short { display: none; }
@media (max-width: 700px) {
  /* ── Time off: the whole week fits across a phone ── */
  html:not(#rd):not(#rp) .abs-grid-wrap { max-height: none; margin: 0; overflow: visible; }
  html:not(#rd):not(#rp) .abs-grid { table-layout: fixed; width: 100%; }
  html:not(#rd):not(#rp) .abs-grid .abs-th-full { display: none; }
  html:not(#rd):not(#rp) .abs-grid .abs-th-short { display: inline; }
  html:not(#rd):not(#rp) .abs-grid th { padding: 6px 0; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; white-space: normal; line-height: 1.15; }
  html:not(#rd):not(#rp) .abs-grid th b { display: block; font-size: 14px; font-weight: 650; color: var(--text); }
  html:not(#rd):not(#rp) .abs-grid th:first-child { width: 84px; min-width: 0; vertical-align: bottom; }
  html:not(#rd):not(#rp) .abs-grid td { height: 46px; padding: 0; font-size: 11px; }
  html:not(#rd):not(#rp) .abs-grid td:first-child { padding: 6px 8px 6px 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
}
@media (max-width: 700px) {
  /* ── Covers forecast: the week fits across; figures in one row ── */
  html:not(#rd):not(#rp) .cv-scroll { overflow: visible; }
  html:not(#rd):not(#rp) .cv-table { table-layout: fixed; width: 100%; }
  html:not(#rd):not(#rp) .cv-table :is(th, td) { padding: 6px 2px; white-space: normal; }
  html:not(#rd):not(#rp) .cv-table thead th { font-size: 11px; letter-spacing: 0; text-transform: none; }
  html:not(#rd):not(#rp) .cv-table .cv-rowh { width: 66px; min-width: 0; padding-left: 8px; font-size: 12.5px; line-height: 1.2; overflow-wrap: anywhere; }
  html:not(#rd):not(#rp) .cv-inp { width: 100%; min-width: 0; padding: 8px 0; border-radius: 8px; -moz-appearance: textfield; }
  html:not(#rd):not(#rp) .cv-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
  html:not(#rd):not(#rp) .cv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:not(#rd):not(#rp) .cv-stat { padding: 10px; }
  html:not(#rd):not(#rp) .cv-stat b { font-size: 18px; }
  html:not(#rd):not(#rp) .cv-stat span { font-size: 11px; letter-spacing: 0; text-transform: none; line-height: 1.25; display: block; }
}
@media (max-width: 700px) {
  /* ── Publish history: one card per publish ── */
  html:not(#rd):not(#rp) .pub-hist-tbl thead { display: none; }
  html:not(#rd):not(#rp) .pub-hist-tbl :is(tbody, tr, td) { display: block; }
  html:not(#rd):not(#rp) .pub-hist-tbl tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "wc act" "at act" "by act";
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  html:not(#rd):not(#rp) .pub-hist-tbl td { padding: 0; border: 0; font-family: inherit; font-size: 13px; color: var(--muted); }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-wc { grid-area: wc; font-size: 15px; font-weight: 600; color: var(--text); }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-at { grid-area: at; }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-at::before { content: 'Published '; }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-n { display: none; }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-by { grid-area: by; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-by::before { content: attr(data-n) ' told · by '; }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-act { grid-area: act; align-self: center; }
  html:not(#rd):not(#rp) .pub-hist-tbl .ph-act button { min-height: 36px; padding: 0 14px !important; font-size: 14px !important; border-radius: 999px; }
}
@media (max-width: 760px) {
  /* ── HR records: people as a row of pills you swipe through, not a
     160px list with three and a half names in it ── */
  html:not(#rd):not(#rp) .hre-sidebar {
    flex-direction: row;
    gap: 6px;
    max-height: none;
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: transparent;
    scrollbar-width: none;
  }
  html:not(#rd):not(#rp) .hre-sidebar::-webkit-scrollbar { display: none; }
  html:not(#rd):not(#rp) .hre-sidebar-h { display: none; }
  html:not(#rd):not(#rp) #hr-staff-list { display: flex; gap: 6px; }
  html:not(#rd):not(#rp) .hre-staff-btn {
    flex: 0 0 auto;
    width: auto;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border: 0;
    border-radius: 999px;
    background: var(--surface2);
    box-shadow: inset 0 0 0 1px var(--border);
  }
  html:not(#rd):not(#rp) .hre-staff-btn.active { background: var(--text); box-shadow: none; }
  html:not(#rd):not(#rp) .hre-staff-btn.active .hre-staff-name { color: var(--surface) !important; }
  html:not(#rd):not(#rp) .hre-staff-btn .hre-av { width: 30px; height: 30px; font-size: 11px; }
  html:not(#rd):not(#rp) .hre-av-count:not(.has) { display: none; }
  html:not(#rd):not(#rp) .hre-staff-btn :is(.hre-staff-role, small) { display: none; }
}

/* The task list inside the Tasks window was caught by the old "panels
   float with a big shadow" rule meant for whole windows (solui2.css), so
   it sat in the window as a second floating card. It's just the list. */
html:not(#rd):not(#rp) .mbg .tkp-body { box-shadow: none; border: 0; border-radius: 0; background: transparent; }
@media (max-width: 700px) {
  html:not(#rd):not(#rp) .mbg .tkp-body { max-height: none; }
  html:not(#rd):not(#rp) .tkp-add-toggle { min-height: 52px; padding-inline: 24px; font-size: 15px; }
}
@media (max-width: 760px) {
  /* Team page, Roles and Shift types: the second line wraps instead of
     ending in "0 on this r…". */
  html:not(#rd):not(#rp) .tp-setup .tp-rt .tp-row-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
  html:not(#rd):not(#rp) .tp .tp-setup .tp-rt-side select { width: 118px; }
}
@media (max-width: 760px) {
  /* Settings: the sections are one row of pills you can swipe, not a
     wrapped list of dotted links. */
  html:not(#rd):not(#rp) .st-nav {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -16px;
    padding: 0 16px 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html:not(#rd):not(#rp) .st-nav::-webkit-scrollbar { display: none; }
  html:not(#rd):not(#rp) .st-nav a {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
  }
  html:not(#rd):not(#rp) .st-nav a.active { background: var(--text); color: var(--surface); box-shadow: none; }
  html:not(#rd):not(#rp) .st-nav-dot { display: none; }
}

@media (max-width: 700px) {
  /* Payroll timesheet: the time boxes read "09:00 AI" at 96px with 16px
     phone text. */
  html:not(#rd):not(#rp) .tb input.cell[type=time] { width: 128px; min-height: 40px; }
  html:not(#rd):not(#rp) .tb input.cell { min-height: 40px; }
  /* The day's total goes on its own line instead of floating into the
     "from an unpublished rota week" note. */
  html:not(#rd):not(#rp) .tb.cards tr.grp .gt { float: none; display: block; margin-top: 2px; color: var(--muted); font-weight: 500; }
  html:not(#rd):not(#rp) .tb.cards tr.grp .unpub { display: block; margin: 2px 0 0; }

  /* The light/dark button floated over figures and form boxes on every
     page that has one. On a phone it sits at the end of the page. */
  html:not(#rd):not(#rp) body > .site-theme-toggle {
    position: static;
    margin: 8px auto calc(28px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 700px), (max-height: 520px) and (pointer: coarse) {
  /* More (the action list): a bottom sheet like every other one, edge to
     edge, rather than a card floating 16px in from each side. */
  html:not(#rd):not(#rp) .sol-command { padding: 0; place-items: end center; }
  html:not(#rd):not(#rp) .sol-command-panel {
    width: 100%;
    max-height: 86dvh;
    padding-top: 14px;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 18px 18px 0 0;
  }
  html:not(#rd):not(#rp) .sol-command-panel::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text) 22%, transparent);
  }
  html:not(#rd):not(#rp) .sol-command.open .sol-command-panel { animation: phone-sheet-up .34s cubic-bezier(.32, .72, 0, 1) both; }
  @keyframes phone-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#rd):not(#rp) .sol-command.open .sol-command-panel { animation: none; }
}
@media (max-width: 420px) {
  /* Invite window on small phones: the manager email gets the full width,
     the button goes under it; a connected email and its Make manager
     button stack too, so the address isn't cut to "✓ test-sta…". */
  html:not(#rd):not(#rp) .it-mgr-row { flex-direction: column; }
  html:not(#rd):not(#rp) .it-mgr-row :is(input, button) { width: 100%; min-height: 44px; }
  html:not(#rd):not(#rp) .it-joined { flex-direction: column; align-items: flex-start; gap: 6px; }
  html:not(#rd):not(#rp) .it-joined .it-done { max-width: 100%; }
  html:not(#rd):not(#rp) .cv-table thead th { font-size: 10px; }
}
@media (max-width: 700px) {
  /* After a part-filled Solve: one swipeable row of what's left, not a
     wall of 14 chips that pushed the day off the screen. */
  html:not(#rd):not(#rp) .prob-bay .prob-chips {
    flex-wrap: nowrap;
    margin: 0 -16px 0 -14px;
    padding: 2px 16px 4px 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html:not(#rd):not(#rp) .prob-bay .prob-chips::-webkit-scrollbar { display: none; }
  html:not(#rd):not(#rp) .prob-bay .prob-chip { flex: 0 0 auto; min-height: 32px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
  html:not(#rd):not(#rp) .prob-bay-close { width: 36px; height: 36px; margin: -8px -10px -8px 0; font-size: 20px; }
  html:not(#rd):not(#rp) .prob-bay-title { font-size: 13px; }
  /* Ken's line after Solve sat on the labour strip. */
  html:not(#rd):not(#rp) body.sol2-phone #ken-says { bottom: calc(64px + 42px + 10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  /* Team page, a person: the back bar let the page show through it. */
  html:not(#rd):not(#rp) .tp-back { background: color-mix(in srgb, var(--bg) 95%, transparent); }
}
@media (max-width: 760px) {
  /* Start and End stay side by side in the shift windows: two short boxes,
     not two full-width rows with a gap between. */
  html:not(#rd):not(#rp) .mbg .frow:has(input[onblur*="normaliseTimeInput"]) { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-height: 520px) and (pointer: coarse) and (min-width: 701px) {
  /* Phone on its side: the table fits, the time boxes didn't. */
  html:not(#rd):not(#rp) #m-req .sf-tmpl-time-inp { width: 66px; font-family: inherit; font-variant-numeric: tabular-nums; }
  html:not(#rd):not(#rp) #m-req .sf-req-table th:first-child,
  html:not(#rd):not(#rp) #m-req .sf-req-table td:first-child { min-width: 260px; }
}