/* Phone layer (<=640px). The single owner of shared phone rules: main.css has no <=640 shared block.
   Page stylesheets load after this file and may refine their own page.
   Rules: text >= 12px (11px only inside calendar/roster grid cells), every control >= 44px tall,
   :root tokens only (no hex, no gradients). Loaded with media="screen and (max-width: 640px)". */
@media screen and (max-width: 640px) {
  body {
    --fs-xs: 12px;   /* labels, badges, kickers, meta */
    --fs-sm: 13px;   /* secondary text, descriptions */
    --fs-btn: 14px;  /* buttons, tabs */
    --fs-body: 15px; /* body copy, list values */
    --fs-h2: 17px;   /* section titles */
    --fs-h1: 22px;   /* page titles */
    --fs-num: 28px;  /* headline numbers */
    --phone-gap: 12px;
    --phone-gutter: 16px;
    --phone-header: 56px;
    --phone-nav: 72px;
    font-size: var(--fs-body);
    line-height: 1.5;
  }

  /* ---- shell ---- */
  .mobile-header {
    grid-template-columns: 48px 1fr auto;
    height: calc(var(--phone-header) + env(safe-area-inset-top, 0px));
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
    box-shadow: none;
  }
  .mobile-nav-toggle, .mobile-search, .mobile-notifications { width: 44px; height: 44px; min-height: 44px; }
  .mobile-brand { align-items: center; min-height: 44px; }
  .mobile-brand strong { font-size: var(--fs-h2); }
  .mobile-brand span { display: none; }
  .mobile-notifications span { top: 2px; right: 0; min-width: 20px; height: 20px; font-size: var(--fs-xs); }
  .rail nav a.rail-notifications { display: none; }
  .mobile-bottom-nav {
    height: calc(var(--phone-nav) + env(safe-area-inset-bottom, 0px));
    gap: 2px;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  }
  .mobile-bottom-nav::before { inset: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-height: 52px; gap: 3px; padding: 4px 2px; font-size: var(--fs-xs); }
  .mobile-bottom-nav .nav-icon { flex-basis: 22px; width: 22px; height: 22px; }
  main {
    padding: calc(var(--phone-header) + var(--phone-gap) + env(safe-area-inset-top, 0px)) max(var(--phone-gutter), env(safe-area-inset-right, 0px)) 28px max(var(--phone-gutter), env(safe-area-inset-left, 0px));
  }
  body:has(.mobile-bottom-nav) main { padding-bottom: calc(var(--phone-nav) + 24px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-top: calc(var(--phone-header) + 12px + env(safe-area-inset-top, 0px)); scroll-padding-bottom: calc(var(--phone-nav) + 12px + env(safe-area-inset-bottom, 0px)); }
  /* External customers have a static slim header instead of the fixed one. */
  body:has(.external-header) main { padding-top: var(--phone-gap); }
  .external-header { padding-inline: var(--phone-gutter); }
  .external-brand strong { font-size: var(--fs-h2); }
  /* Top of the screen so a toast never covers the submit button. */
  .toast-container { top: calc(var(--phone-header) + 8px + env(safe-area-inset-top, 0px)); right: 12px; bottom: auto; width: calc(100vw - 24px); }
  .flash { font-size: var(--fs-sm); }

  /* ---- type ---- */
  h1, .work-hero h1, .simple-tasks .tasks-header h1, .recipes .recipe-header h1 { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -.02em; }
  .app-content > .panel:not(.panel ~ .panel):not(.page-header ~ .panel):not(h1 ~ .panel) > h2,
  .app-content > .panel:not(.panel ~ .panel):not(.page-header ~ .panel):not(h1 ~ .panel) > .row-between > h2,
  .app-content > h2.page-title { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -.02em; }
  h2, .panel h2, .bento-panel-title, .work-section-heading h2 { font-size: var(--fs-h2); line-height: 1.3; }
  h3 { font-size: var(--fs-body); line-height: 1.35; }
  .muted, label, .field-hint, .timeline-item { font-size: var(--fs-sm); }
  main small { font-size: var(--fs-xs); }
  /* desktop sizes these at .68-.74rem; `main` outranks the page stylesheets that load after this file */
  main .data-table:not(.sheet) th, main .approval-row-copy small, main .task-card-top, main .task-overdue-pill, main .task-progress, main .column-heading span { font-size: var(--fs-xs); }
  .eyebrow, .work-eyebrow, .section-kicker { font-size: var(--fs-xs); }
  .section-kicker { display: block; }
  .status-badge, .priority-pill, .scope-badge, .late-tag, .doc-type, .tag { min-height: 24px; font-size: var(--fs-xs); }
  .text-link, .work-section-heading > a, .bento-head-link { font-size: var(--fs-sm); }

  /* ---- controls ---- */
  button, .btn { min-height: 44px; padding: 10px 14px; border-radius: var(--radius); font-size: var(--fs-btn); box-shadow: none; }
  button.secondary, .btn.secondary { box-shadow: none; }
  .compact-btn { min-height: 44px; padding: 8px 12px; font-size: var(--fs-sm); }
  main .task-filter-select, main #task-priority-filter { min-height: 44px; font-size: var(--fs-sm); }
  /* Native fields stay at 16px so focusing one never zooms an iPhone. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; padding: 8px 12px; border-radius: var(--radius); font-size: 16px; }
  label { margin-top: 12px; }
  .inline-form { gap: 8px; width: 100%; margin-top: 8px; }
  .inline-form label.inline { width: 100%; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--fs-sm); }
  .inline-form label.inline select, .inline-form label.inline input { flex: 1; width: 0; min-width: 0; }
  .work-list-toggle { min-height: 44px; padding: 0 4px; font-size: var(--fs-sm); }
  .time-choice-actions button, .time-choice-select { min-height: 44px; }
  .table-builder-coltype select, .table-builder-coltype input:not([type=checkbox]) { min-height: 44px; }
  .slot-remove, .table-builder-heading .table-builder-remove { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
  .table-builder-heading .table-builder-grip { width: 32px; height: 44px; flex-basis: 32px; }

  /* ---- page header: title, one-line description, actions that fill the row ---- */
  /* Photo hero: a plain dark band; only the Foods hub still shows a dimmed photo. */
  .photo-hero { padding: 22px 18px; border-radius: var(--radius-lg); }
  .photo-hero.photo-hero-band { flex-direction: column; align-items: stretch; min-height: 0; gap: 12px; padding: 18px 16px; border-radius: var(--radius-lg); }
  .photo-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .photo-hero-stats li { min-width: 0; padding: 10px 12px; gap: 10px; }
  .photo-hero-stats .nav-icon { flex-basis: 24px; width: 24px; height: 24px; }
  .empty-art { width: min(160px, 100%); }
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: var(--phone-gap); padding: 16px; box-shadow: none; }
  .page-header p { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.45; }
  .page-header .actions, .row-between > .actions { display: flex; flex-wrap: wrap; justify-content: stretch; gap: 8px; width: 100%; }
  .page-header .actions > *, .page-header > .btn, .row-between > .actions > * { flex: 1 1 auto; margin: 0; }
  .page-header .actions > form > button, .row-between > .actions > form > button { width: 100%; margin: 0; }
  .page-header .btn, .row-between > .actions .btn { min-height: 44px; margin: 0; padding: 10px 14px; font-size: var(--fs-btn); text-align: center; box-shadow: none; }
  /* Hierarchy: the red primary stays filled; secondary header actions are navigation, shown as quiet outlines. */
  .page-header .btn.secondary, .page-header button.secondary, .row-between > .actions .btn.secondary { border-color: var(--line-strong); background: var(--surface); color: var(--accent); }
  .page-header .btn.secondary:hover, .page-header button.secondary:hover, .row-between > .actions .btn.secondary:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--accent); }
  .row-between { align-items: flex-start; gap: 8px; }
  .row-between > h2 { margin-bottom: 4px; }
  .actions > button, .actions > .btn { margin: 0; }

  /* ---- containers ---- */
  .panel, .bento-panel, .my-work-page .panel, .request-group, .board-toolbar, .shift-board-section {
    margin-bottom: var(--phone-gap);
    padding: 16px;
    border-radius: var(--radius-lg);
    box-shadow: none;
  }
  .panel h2 { margin-bottom: 10px; }
  .panel > h2 + p.muted, .panel > .row-between + p.muted { margin: 0 0 12px; }
  .two-col { grid-template-columns: 1fr; gap: var(--phone-gap); }
  .empty { padding: 12px 0; text-align: center; font-size: var(--fs-sm); }
  .empty strong, .empty-state strong { display: block; margin-bottom: 4px; font-size: var(--fs-body); }
  .empty-state { padding: 24px 16px; border-radius: var(--radius-lg); box-shadow: none; text-align: center; font-size: var(--fs-sm); }
  /* Notices written into the page (not the floating toasts) sit in the flow. */
  .app-content .flash { box-shadow: none; animation: none; }

  /* ---- forms ---- */
  .form-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .form-actions .actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .form-actions button, .form-actions .btn, .decision-actions button, .decision-actions .btn { width: 100%; min-height: 48px; margin: 0; text-align: center; }
  .decision-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .form-grid, .setup-grid, .permission-grid { grid-template-columns: 1fr; }
  .field-support { grid-template-columns: 1fr; padding: 12px; }
  .danger-zone { flex-direction: column; align-items: stretch; }
  .danger-zone button { width: 100%; }
  main.auth-main { padding: 24px 16px; }
  form.login-form { padding: 24px 20px; }

  /* ---- toolbars & filters: search spans the row, filters share it ---- */
  .list-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; margin: 0 0 var(--phone-gap); padding: 12px; border-radius: var(--radius-lg); box-shadow: none; }
  .list-toolbar > input[type=search], .list-toolbar > input[type=text], .list-toolbar > label:has(input[type=search]), .list-toolbar > label:has(input[type=text]), .list-toolbar > .toolbar-actions, .list-toolbar > button { grid-column: 1 / -1; }
  .list-toolbar > :last-child:nth-child(2) { grid-column: 1 / -1; }
  .list-toolbar label, .list-toolbar select, .list-toolbar input { width: 100%; min-width: 0; margin: 0; }
  .list-toolbar button { margin: 0; }
  .search-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .search-toolbar label { min-width: 0; }

  /* ---- tabs: one scrollable pill strip for every tab pattern ---- */
  .view-toggle, .task-tabs-bar, .tasks-filter, .backup-tabs, .notification-tabs {
    display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .view-toggle::-webkit-scrollbar, .task-tabs-bar::-webkit-scrollbar, .tasks-filter::-webkit-scrollbar, .backup-tabs::-webkit-scrollbar, .notification-tabs::-webkit-scrollbar { display: none; }
  .view-toggle a, .view-toggle button, .task-tab-btn, .tasks-filter a, .backup-tabs a, .notification-tabs a {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
    min-height: 44px; margin: 0; padding: 8px 14px; font-size: var(--fs-btn); white-space: nowrap; scroll-snap-align: start;
  }

  /* ---- pagination ---- */
  .pagination { flex-direction: column; align-items: stretch; gap: 8px; }
  .pagination-summary { font-size: var(--fs-xs); }
  .pagination-links { max-width: 100%; overflow-x: auto; }
  .pagination-links a, .pagination-links .current { flex: 0 0 auto; min-width: 44px; height: 44px; font-size: var(--fs-sm); }

  /* ---- dialogs: bottom sheets within thumb reach ---- */
  /* The signature dialog keeps its own turned, full-screen pad (invoice.css). */
  :is(.sched-dialog, .sc-dialog, .nb-dialog, .app-install-dialog, .device-settings-dialog)[open] {
    width: 100%; max-width: 100%; max-height: 88dvh; margin: auto 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .doc-viewer[open] { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }

  /* ---- tables: phone record cards (base.html adds .responsive-table + data-label) ---- */
  .table-wrap { margin-inline: 0; }
  .table-wrap .data-table:not(.responsive-table) { min-width: 620px; }
  .data-table th, .data-table td { padding: 10px; }
  .table-wrap:has(> .responsive-table) { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .responsive-table { display: block; min-width: 0 !important; font-size: var(--fs-body); }
  .responsive-table thead { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .responsive-table thead th { font-size: var(--fs-xs); }  /* clipped on phones, but never under 12px */
  .responsive-table tbody { display: grid; gap: 10px; }
  .responsive-table tr { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .responsive-table td { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .responsive-table td:last-child { border-bottom: 0; }
  .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; }
  .responsive-table td > * { grid-column: 2; }
  .responsive-table td > br { display: none; }
  .responsive-table td > .status-badge { justify-self: start; }
  .responsive-table td:empty { display: none; }
  /* The first cell names the record: it is the card's title, not a labelled row. */
  .responsive-table:not(.doc-table) td:first-child { display: block; padding-top: 12px; background: var(--surface-2); font-weight: 700; }
  .responsive-table:not(.doc-table) td:first-child::before { content: none; }
  .responsive-table:not(.doc-table) td:first-child a { color: var(--ink); }
  /* A cell of actions spans the card with full-size buttons. */
  .responsive-table td:has(> form, > .btn, > button, > .actions):not(:first-child) { display: flex; flex-wrap: wrap; gap: 8px; }
  .responsive-table td:has(> form, > .btn, > button, > .actions):not(:first-child)::before { content: none; }
  .responsive-table td:has(> form, > .btn, > button, > .actions):not(:first-child) > * { flex: 1 1 auto; margin: 0; }
  .responsive-table td[colspan] { display: block; padding: 16px; color: var(--muted); text-align: center; }
  .responsive-table td[colspan]::before { content: none; }
  .responsive-table td[colspan] > * { grid-column: auto; }
  .responsive-table .employee-list-identity, .responsive-table .employee-list-identity span { min-width: 0; }
  .key-value-table { display: table; min-width: 0 !important; table-layout: fixed; }
  .key-value-table th { width: 42%; padding-right: 12px; overflow-wrap: anywhere; }
  .key-value-table td { width: 58%; overflow-wrap: anywhere; }

  /* ---- cards & hubs: one row, icon + title + meta + chevron, whole card tappable ---- */
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { min-height: 84px; padding: 12px; border-radius: var(--radius); box-shadow: none; }
  .metric-card::after { display: none; }
  .metric-card .label { font-size: var(--fs-xs); line-height: 1.35; }
  .metric-card .value { margin-top: 6px; font-size: var(--fs-num); line-height: 1.1; }
  .hub-grid, .request-launch-grid, .task-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hub-card { grid-template-columns: 36px minmax(0, 1fr) 16px; min-height: 64px; gap: 12px; padding: 12px 14px; border-radius: var(--radius); }
  .hub-card-icon { width: 36px; height: 36px; border-radius: var(--radius); }
  .request-launch-card { grid-template-columns: 32px minmax(0, 1fr) 16px; min-height: 64px; padding: 12px; border-radius: var(--radius); }
  .request-launch-copy strong, .request-launch-copy small { white-space: normal; }
  .task-card { min-height: 64px; padding: 12px; border-radius: var(--radius); box-shadow: none; }
  .task-card-icon { width: 36px; height: 36px; border-radius: var(--radius); }
  .task-card-icon .nav-icon { width: 18px; height: 18px; }
  .arrow-flow { flex-direction: column; align-items: stretch; }
  .arrow-flow .step { width: 100%; padding: 10px 12px; }
  .arrow-flow .arrow { height: 14px; text-align: center; transform: rotate(90deg); }
  .approval-row-card { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 12px; }
  .approval-row-actions { grid-column: 2; justify-self: start; }
  .profile-hero, .profile-heading { flex-wrap: wrap; align-items: flex-start; }
  .profile-hero > div, .profile-heading > div { min-width: 0; }
  .app-install-banner { flex-wrap: nowrap; gap: 8px; margin-bottom: var(--phone-gap); padding: 10px 12px; border-radius: var(--radius-lg); font-size: var(--fs-sm); }
  .app-install-banner > div { flex: 1 1 auto; min-width: 0; }
  .app-install-banner p { display: none; }
  .app-install-banner > button { flex: 0 0 auto; margin: 0; }
  .app-install-banner #app-install-dismiss { border-color: transparent; background: transparent; color: var(--ink-2); box-shadow: none; }

  /* ---- calendars (7 columns: the only place text may drop to 11px) ---- */
  .calendar-panel { padding: 10px 8px; overflow: visible; }
  .cal-grid, .week-strip { width: 100%; min-width: 0; gap: 3px; }
  .cal-day { min-width: 0; min-height: 70px; gap: 3px; padding: 7px 4px; overflow: hidden; border-radius: var(--radius-sm); }
  .cal-day.is-today { padding: 7px 4px; }
  .cal-day-num { font-size: var(--fs-sm); }
  .cal-pct, .cal-pct-detail, .cal-shift-chip, .week-day-name { font-size: 11px; }
  .cal-shift-chip { width: 100%; padding: 2px 3px; overflow-wrap: anywhere; }
  .week-day { min-width: 0; min-height: 60px; padding: 7px 2px; border-radius: var(--radius-sm); }
  .week-day-num { font-size: var(--fs-xs); white-space: nowrap; }
  .slot-board { grid-template-columns: 1fr; }
  .shift-board-heading { padding: 14px; }

  /* ---- checklist fill & builder ---- */
  .execution-panel { padding: 0 16px; }
  .execution-panel .field-block { padding: 16px 0; }
  body:has(.execution-panel) main { padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px)); }
  .execution-header { padding-inline: 6px; }
  .panel.execution-panel { padding: 10px 6px; border-radius: var(--radius); }
  .panel.execution-panel .checklist-table-wrap.sheet-wrap { margin: 10px -6px; border-left: 0; border-right: 0; border-radius: 0; }
  .panel.execution-panel .form-actions { padding: 12px 4px 6px; }
  .table-builder-settings { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cell-panel { padding: 12px; gap: 10px; }

  /* ---- roster: names stay in view while the week scrolls inside the sheet ---- */
  .roster-page .roster-toolbar, .roster-page .roster-toolbar form { gap: 8px; }
  .roster-page .roster-toolbar form { width: 100%; }
  .roster-page .roster-toolbar label.inline { display: grid; grid-template-columns: 68px minmax(0, 1fr); }
  .roster-page .roster-toolbar label.inline select { width: 100%; margin: 0; }
  .roster-page .roster-sheet { min-width: 0; padding: 12px; border-radius: var(--radius-lg); border-color: var(--line); box-shadow: none; }
  .roster-page .roster-heading { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 8px; }
  .roster-page .roster-heading h2 { font-size: var(--fs-h2); line-height: 1.25; text-wrap: initial; }
  .roster-page .roster-heading p { margin-top: 2px; font-size: var(--fs-sm); }
  .roster-page .roster-heading-right { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .roster-page .roster-heading-right > strong { min-width: 0; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .roster-page .roster-week-nav { flex: none; flex-wrap: nowrap; gap: 4px; }
  .roster-page .roster-week-nav .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; margin: 0; padding: 8px; }
  .roster-page .roster-scroll-hint { display: block; margin: 0 0 8px; color: var(--muted); font-size: var(--fs-xs); }
  .roster-page .roster-wrap { border-radius: var(--radius); scrollbar-width: thin; overscroll-behavior-x: contain; }
  .roster-page .roster-table { width: 932px; min-width: 932px; font-size: var(--fs-xs); }
  .roster-page .roster-table .rc-name { width: 112px; padding: 6px 8px; }
  .roster-page .roster-table .rc-name strong { font-size: var(--fs-xs); }
  .roster-page .roster-table .rc-name span { font-size: 11px; }
  .roster-page .roster-table .rc-total { width: 64px; }
  .roster-page .roster-table th, .roster-page .roster-table td { height: 48px; }
  .roster-page .roster-table thead th { padding: 6px 4px; font-size: var(--fs-xs); }
  .roster-page .rc-btn { min-height: 48px; }
  .roster-page .rc-hours { display: inline-block; padding: 4px; white-space: normal; font-size: var(--fs-xs); line-height: 1.3; }
  .roster-page .rc-off { color: var(--muted); font-size: var(--fs-xs); }
  .roster-page .roster-editor {
    top: auto !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--phone-nav) + 12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: calc(100dvh - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-lg);
  }
  .roster-page .roster-editor label, .roster-page .roster-editor select { margin: 0; }
  .roster-page .roster-editor-actions { gap: 8px; }
  .roster-page .roster-editor-actions button { flex: 1; margin: 0; }

  /* ---- tasks board ---- */
  .simple-tasks .tasks-header { margin-bottom: 12px; }
  .simple-tasks .tasks-header h1 { margin: 2px 0; }
  .simple-tasks .tasks-kicker { font-size: var(--fs-xs); }
  .simple-tasks .tasks-actions { gap: 8px; margin-top: 10px; }
  .simple-tasks .tasks-actions > .btn { flex: 1 1 auto; margin: 0; }
  .simple-tasks .tasks-actions > .btn.secondary { border-color: var(--line-strong); background: var(--surface); color: var(--accent); }
  .simple-tasks .tasks-filter { gap: 6px; margin-bottom: 12px; }
  .simple-tasks .task-board { grid-template-columns: repeat(4, minmax(240px, 82vw)); gap: 10px; scroll-snap-type: x proximity; }
  .simple-tasks .task-column { min-height: 180px; padding: 10px; border-radius: var(--radius-lg); scroll-snap-align: start; }
  .simple-tasks .column-heading { padding: 2px 2px 10px; }
  .simple-tasks .column-heading h2 { font-size: var(--fs-body); }
  .simple-tasks .simple-task-card { margin-bottom: 8px; padding: 12px; }
  .simple-tasks .simple-task-card strong { margin: 6px 0 10px; font-size: var(--fs-body); }
  .simple-tasks .task-progress { margin-top: 8px; padding-top: 8px; }
  .simple-tasks .task-calendar { padding: 10px; }
  .simple-tasks .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; }
  .simple-tasks .calendar-day { min-height: 76px; padding: 3px; }
  .simple-tasks .calendar-weekday { padding: 6px 0; font-size: 11px; }
  .simple-tasks .calendar-task { padding: 3px; font-size: 11px; }
  .simple-tasks .calendar-type-filter { gap: 6px; margin-bottom: 10px; }
  .simple-tasks .calendar-type-filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; font-size: var(--fs-sm); }
  .simple-tasks .calendar-day.today .day-number { background: var(--accent-fill); }
  .task-modal-backdrop .task-modal { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(var(--phone-nav) + 24px + env(safe-area-inset-bottom, 0px)); }
  .task-modal-backdrop .task-modal h2 { font-size: 20px; }
  .task-modal-backdrop .task-modal input:not([type=checkbox]), .task-modal-backdrop .task-modal select, .task-modal-backdrop .task-modal textarea { font-size: 16px; }
  .task-modal-backdrop .task-modal-section { padding: 12px 0; }
  .task-modal-backdrop .modal-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }

  /* ---- recipes ---- */
  .recipes .recipe-header { gap: 10px; margin: 0 0 12px; }
  .recipes .recipe-header h1 { margin: 4px 0; }
  .recipes .recipe-header p { margin: 4px 0; font-size: var(--fs-sm); }
  .recipes .recipe-header > .btn { margin: 0; }
  .recipes .recipe-starters, .recipes .recipe-panel { gap: 10px; margin-bottom: 12px; padding: 12px; border-radius: var(--radius-lg); }
  .recipes .recipe-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; }
  .recipes .recipe-filters input, .recipes .recipe-filters select { flex: 1 1 140px; min-width: 0; max-width: none; margin: 0; }
  .recipes .recipe-filters input { grid-column: 1 / -1; }
  .recipes .recipe-filters button { width: auto; margin: 0; }
  .recipes .recipe-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .recipes .tile-copy { padding: 12px; }
  .recipes .tile-copy h2 { font-size: 18px; }
  .recipes .recipe-art.mini { height: 200px; padding: 12px; }
  .recipes .recipe-tile-actions { padding: 0 12px 12px; }
  .recipes .recipe-empty { padding: 24px 12px; }

  /* ---- For Me: work first. The columns flatten (display: contents) so sections order by urgency. ---- */
  .my-work-page { display: flex; flex-direction: column; gap: var(--phone-gap); }
  .my-work-page .bento-main-col { display: contents; }
  .my-work-page > *, .my-work-page .bento-panel { margin: 0; }
  .my-work-page .hero-banner { order: 0; }
  .my-work-page .kpi-strip-4 { order: 1; }
  .my-work-page .work-empty, .my-work-page .work-overdue { order: 2; }
  .my-work-page .work-today, .my-work-page .work-earlier { order: 3; }
  .my-work-page .work-approvals { order: 4; }
  .my-work-page .work-sops { order: 5; }
  .my-work-page .work-stock { order: 6; }
  .my-work-page .work-kpis { order: 8; }
  .my-work-page .work-favs { order: 9; }
  .my-work-page .work-upcoming { order: 10; }
  .my-work-page .work-tasks { order: 11; }
  .my-work-page .work-bottom-split { order: 13; }
  .my-work-page .kpi-strip-4 .kpi-summary-extra { display: none; }

  /* Hero: a plain band, no photo (the <picture> serves phones a 1x1 placeholder). */
  .hero-banner { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding: 16px; border-radius: var(--radius-lg); background: var(--hero-photo-bg); box-shadow: none; }
  .hero-banner-bg, .hero-banner::after, .hero-banner-art { display: none; }
  .hero-banner-copy h1 { font-size: 20px; line-height: 1.25; text-shadow: none; }
  .hero-banner-copy h1 .hero-name { white-space: nowrap; }
  .hero-banner-copy .work-eyebrow { margin-bottom: 2px; font-size: var(--fs-xs); }
  .hero-meta-bar { gap: 4px 12px; margin-top: 6px; font-size: var(--fs-sm); }
  .hero-meta-sep { display: none; }
  .hero-meta-item .nav-icon { width: 14px; height: 14px; }
  .hero-banner-actions { flex-wrap: nowrap; width: 100%; margin: 0; gap: 8px; }
  .shift-status { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; font-size: var(--fs-sm); box-shadow: none; }
  .shift-status.is-off .shift-status-dot { background: var(--muted); }
  .shift-link { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 2px 6px; min-width: 0; min-height: 44px; padding: 6px 12px; box-shadow: none; }
  .shift-link span { font-size: var(--fs-xs); }
  .shift-link strong { font-size: var(--fs-btn); }

  /* Today: open / overdue / awaiting approval in one compact row. */
  .kpi-strip-4 { gap: 8px; }
  .kpi-summary-card { min-height: 84px; padding: 12px; border-radius: var(--radius); box-shadow: none; }
  .kpi-summary-art, .kpi-ring-wrap { display: none; }  /* ring repeats the value and starved the copy column to ~20px */
  .kpi-summary-card { gap: 8px; }
  .kpi-summary-left { gap: 8px; }
  .kpi-summary-icon { flex: 0 0 auto; }
  .my-work-page .kpi-strip-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .my-work-page .kpi-summary-card { display: block; min-height: 0; padding: 10px 12px; }
  .my-work-page .kpi-summary-left { display: block; }
  .my-work-page :is(.kpi-summary-icon, .kpi-summary-pill, .kpi-summary-sub, .kpi-ring-wrap) { display: none; }
  .my-work-page .kpi-summary-copy { display: flex; flex-direction: column-reverse; }
  .my-work-page .kpi-summary-label { margin-top: 2px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
  .my-work-page .kpi-summary-value { margin: 0; font-size: var(--fs-num); line-height: 1.1; }
  .kpi-summary-label, .kpi-summary-pill, .kpi-summary-sub, .kpi-ring-label { font-size: var(--fs-xs); }
  .kpi-summary-value { font-size: var(--fs-num); }

  /* Sections */
  .my-work-page .bento-panel { padding: 14px; }
  .work-section-heading, .bento-panel-head { flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; }
  .work-section-heading h2 { margin: 0; }
  .work-heading-links { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .bento-title-icon { display: none; }
  .bento-head-btn { min-height: 44px; padding: 0 4px; border: 0; background: transparent; }
  .my-work-page .task-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .my-work-page .task-card { grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 64px; gap: 10px; padding: 10px 12px; box-shadow: none; }
  .my-work-page .task-card-title { font-size: var(--fs-body); font-weight: 600; white-space: normal; }
  .my-work-page .task-card-meta { font-size: var(--fs-sm); }
  .my-work-page .task-card-action { grid-column: auto; align-self: center; max-width: 112px; padding: 8px 10px; font-size: var(--fs-sm); text-align: center; white-space: normal; }
  .fav-card-grid { grid-template-columns: minmax(0, 1fr); }

  /* Compact list rows (For Me tasks + history): title, then the other cells on one line. */
  .compact-rows.responsive-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px; }
  .compact-rows.responsive-table tr[hidden] { display: none; }
  .compact-rows.responsive-table td { display: block; padding: 0; border: 0; background: transparent; }
  .compact-rows.responsive-table td::before { content: none; }
  .compact-rows.responsive-table td:first-child { flex: 1 0 100%; padding: 0; background: transparent; font-size: var(--fs-body); }
  .compact-rows.responsive-table td:nth-child(2) { display: none; }
  .compact-rows.responsive-table td[colspan] { flex: 1 0 100%; text-align: center; }
  .task-row-icon { display: none; }

  /* Hand-off sheets and Branch Orders */
  .handoff-step { flex: 1 1 100%; }
  .handoff-row { flex-wrap: wrap; }
  .hb-name { grid-template-columns: 1fr; }
  .hb-step { flex: 1 1 100%; flex-wrap: wrap; }
  .hb-step select { flex: 1; min-width: 0; }
  .hb-approval { flex-wrap: wrap; }
  .hb-approval select { width: 100%; }
}