/* ==========================================================================
   Arabtec Recruitment Hub — phone presentation
   --------------------------------------------------------------------------
   The styles for the dedicated phone shell (`MobileAppBar`, `MobileTabBar`,
   `MobileDrawer`). It is a separate presentation, not a reflowed desktop one,
   and `Shell` renders it INSTEAD of the desktop chrome — so none of these
   classes exist in the DOM on desktop.

   That is why almost nothing here is inside a media query: the selectors are
   scoped to classes only the phone shell emits. A media query would give us a
   second breakpoint that could drift out of step with `useIsPhone()`; keying on
   the class means the CSS and the JS can never disagree about which
   presentation is on screen.

   Loads after arabtec-responsive.css, which keeps doing what it is good at —
   reflowing page CONTENT (tables into cards at 640px). This file owns the
   CHROME.
   ========================================================================== */

:root {
  --ats-mtop-h: 56px;                 /* app bar */
  --ats-mtab-h: 62px;                 /* tab bar, excluding the safe area */
  --ats-msafe: env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------------ shell */
.shell-phone {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;                 /* survives the URL bar collapsing */
  background: var(--app-bg, #F4F5F7);
}

/* The page scrolls; the two bars do not. Top padding clears the app bar,
   bottom padding clears the tab bar, the FAB and the home indicator, so the
   last row of every list stays reachable. */
.shell-phone .content,
.shell-phone .content.content-phone {
  margin-left: 0;
  padding: 14px 14px calc(var(--ats-mtab-h) + var(--ats-msafe) + var(--ats-fab-size, 52px) + 22px);
  padding-top: calc(var(--ats-mtop-h) + 14px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;                 /* fallback for engines without clip */
  overflow-x: clip;                   /* clip cannot be scrolled by focus; a wide table scrolls in its own wrap */
}

/* -------------------------------------------------------------- app bar */
.mtopbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 72;
  height: var(--ats-mtop-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
}
.mtopbar-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;                       /* full tap target, not the icon's size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.mtopbar-btn:active { background: var(--surface-3, #ECEEF0); }
.mtopbar-btn:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.mtopbar-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 2px;
}
/* The bell is a shared component; give it the same 44px target here, and let
   its panel use the screen width instead of hanging off the right edge. */
.mtopbar .icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.mtopbar .notif { flex: 0 0 auto; }
.mtopbar .notif-panel {
  position: fixed;
  top: calc(var(--ats-mtop-h) + 6px);
  left: 8px;
  right: 8px;
  width: auto;
  max-width: none;
  max-height: 70vh;
  overflow-y: auto;
}

/* -------------------------------------------------------------- tab bar */
.mtabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;             /* 4 or 6 tabs share the width evenly */
  align-items: stretch;
  height: calc(var(--ats-mtab-h) + var(--ats-msafe));
  padding-bottom: var(--ats-msafe);
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.mtab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  line-height: 1.15;
  cursor: pointer;
}
.mtab-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* A dot, not a number: five counts across 360px cannot be read anyway, and the
   drawer shows the real figures. */
.mtab-dot {
  position: absolute;
  top: -1px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px #fff;
}
.mtab-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mtab.active { color: var(--green-700); font-weight: 700; }
.mtab.active .mtab-ico { color: var(--green-700); }
.mtab:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; border-radius: 10px; }

/* --------------------------------------------------------------- drawer */
.mdrawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;                        /* above both bars */
  background: rgba(20, 22, 24, .44);
  display: flex;
}
.mdrawer {
  width: min(84vw, 320px);
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-right: 1px solid var(--line);
  box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  animation: mdrawer-in .18s ease-out;
}
@keyframes mdrawer-in { from { transform: translateX(-14px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mdrawer { animation: none; } }

.mdrawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 10px 12px 14px;
  border-bottom: 1px solid var(--line);
}
.mdrawer-head .side-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mdrawer-head .side-txt strong { font-size: 14px; color: var(--ink); }
.mdrawer-head .side-txt span { font-size: 11.5px; color: var(--muted); }
.mdrawer-close { margin-left: auto; width: 40px; height: 40px; }

.mdrawer-who {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2, #F4F5F7);
}
.mdrawer-who-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mdrawer-who-txt strong { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdrawer-who-txt span { font-size: 11.5px; color: var(--muted); }

.mdrawer-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 14px;
}
.mdrawer-section {
  padding: 14px 8px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
.mdrawer-item {
  width: 100%;
  min-height: 46px;                   /* comfortable one-handed target */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.mdrawer-item + .mdrawer-item { margin-top: 2px; }
.mdrawer-ico { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.mdrawer-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdrawer-item .nav-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.mdrawer-item:active { background: var(--surface-3, #ECEEF0); }
.mdrawer-item.active { background: var(--green-50); color: var(--green-700); font-weight: 700; }
.mdrawer-item.active .mdrawer-ico { color: var(--green-700); }
.mdrawer-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.mdrawer-foot {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
  padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 12px);
  border-top: 1px solid var(--line);
}
.mdrawer-foot-btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft, #4A4641);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.mdrawer-foot-btn:active { background: var(--surface-3, #ECEEF0); }
.mdrawer-foot-btn:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* ------------------------------------------------- floating help launcher */
/* Sits above the tab bar at every phone width. The reflow layer already does
   this below 640px; this keeps it true in the 641-900px band, where the phone
   chrome is on screen but that media query is not. */
.shell-phone .anyhelp-fab {
  right: var(--ats-fab-gutter, 12px);
  bottom: calc(var(--ats-mtab-h) + var(--ats-msafe) + var(--ats-fab-gutter, 12px));
}
.shell-phone .anyhelp-dock {
  bottom: calc(var(--ats-mtab-h) + var(--ats-msafe) + var(--ats-fab-size, 52px) + 18px);
}

/* A dialog covers the chrome rather than competing with it. */
body:has(.modal-overlay) .mtabbar,
body:has(.intake-modal-backdrop) .mtabbar,
body:has(.mdrawer-scrim) .mtabbar { display: none; }

/* =========================================================================
   THE PHONE PAGE TEMPLATE
   -------------------------------------------------------------------------
   One template for every page's phone view, instead of each page being its
   own desktop layout squeezed down a different way. It works because UI
   Coherence Phase 1 gave every page the same vocabulary — measured 23 Sep:

     page header  (.page-head, .page-title, .breadcrumb, .page-sub)   8 pages
     action row   (.page-head-actions)                               6 pages
     filter bar   (.filter-toolbar)                                  4 pages
     view toggle  (.view-toggle)  ·  stage tabs (.seg-tabs)  ·  Ask bar

   Five patterns, keyed on those shared classes, so each rule below lands on
   every page that uses the pattern and a new page inherits it for free. The
   visual reference is Preline's mobile page pattern: title, one tight action
   row, one-line filters, tabs that scroll rather than wrap.

   Why it mattered: on the Talent Pool the chrome stacked to ~730px, so the
   first candidate started at y=799, behind the tab bar at y=782. A recruiter
   opening the main screen on a phone saw no candidates at all.
   ========================================================================= */

/* ---- 1. Page header: the title, and nothing the app bar already says ---- */
.shell-phone .page-head,
.shell-phone .dash-head {
  display: block;
  margin-bottom: 12px;
}
/* The app bar already names the page, and every subtitle is orientation copy
   for a desktop visitor — checked on all eight pages, none carries live data
   or a control. On a phone both cost a screen's worth of scrolling. */
.shell-phone .page-head .breadcrumb,
.shell-phone .page-head .page-sub,
.shell-phone .dash-head .breadcrumb,
.shell-phone .dash-head .page-sub {
  display: none;
}
.shell-phone .page-title {
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}

/* ---- 2. Action row: a two-column grid, never a ragged wrap -------------- */
.shell-phone .page-head-actions,
.shell-phone .dash-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}
/* Things that are not buttons take their own full row and keep their natural
   width — a scope chip ("Read-only list", "Org-wide") or the view switcher. */
.shell-phone .page-head-actions > .badge,
.shell-phone .page-head-actions > .status-chip {
  grid-column: 1 / -1;
  justify-self: start;
}
/* The view switcher spans the row with equal segments, the phone convention. */
.shell-phone .page-head-actions > .view-toggle {
  grid-column: 1 / -1;
  display: flex;
}
.shell-phone .page-head-actions > .view-toggle > * {
  flex: 1 1 0;
  min-height: 44px;
}
/* A page with a single action gives it the whole row rather than half of it
   (Requests: Create Request; Reports: Export CSV). */
.shell-phone .page-head-actions > .btn:only-of-type,
.shell-phone .dash-actions > .btn:only-of-type {
  grid-column: 1 / -1;
}
/* 44px — the touch floor the app bar, tab bar and drawer rows already hold.
   These page actions were the 40px exception. */
.shell-phone .page-head-actions > .btn,
.shell-phone .dash-actions > .btn,
.shell-phone .page-head-actions > .upload-cta,
.shell-phone .page-head-actions > .upload-cta > .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
.shell-phone .page-head-actions > .upload-cta {
  display: block;
}
/* "Max 20 MB per file · PDF, DOC…" is desktop upload guidance; the file picker
   itself enforces it on a phone. */
.shell-phone .upload-cta-hint {
  display: none;
}

/* ---- 3. Filter bar: search and Filters share one line ------------------ */
.shell-phone .filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.shell-phone .filter-toolbar > .toolbar-search {
  flex: 1 1 0;
  min-width: 0;
}
.shell-phone .filter-toolbar > .filter-toggle {
  flex: 0 0 auto;
  min-height: 44px;
}
.shell-phone .filter-toolbar > .toolbar-count {
  flex: 1 0 100%;
}

/* ---- 4. Stage tabs: one row that scrolls, never two that wrap ---------- */
.shell-phone .seg-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shell-phone .seg-tabs::-webkit-scrollbar { display: none; }
.shell-phone .seg-tabs > .seg-tab {
  flex: 0 0 auto;
  min-height: 44px;
}

/* ---- 5. Ask bar: the question and its button on one line --------------- */
/* `.toolbar.ask-bar`, not `.ask-bar`: the Ask bar is also a `.toolbar`, and the
   generic phone toolbar rule below sets flex-wrap: wrap at the same specificity
   and later in the file — it would silently put the button back underneath. */
.shell-phone .toolbar.ask-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}
.shell-phone .ask-bar > .ask-input {
  flex: 1 1 0;
  min-width: 0;
}
.shell-phone .ask-bar > .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 64px;
  min-height: 44px;
}
.shell-phone .ask-input::placeholder {
  text-overflow: ellipsis;
}

/* ---- 6. List card: say what is known, keep the action clear ----------- */
/* Empty education and a missing graduation year are absence, not information.
   On a phone they took two rows of every auto-ingested card to say so. The
   desktop grid keeps them — there they hold card heights level. */
.shell-phone .cand-card .cc-uni.is-empty,
.shell-phone .cand-card .cc-uni-major.is-empty,
.shell-phone .cand-card .cc-grad.missing {
  display: none;
}
/* The floating help button sits over the bottom-right of whichever card
   scrolls beneath it — which is exactly where a card keeps its Actions menu.
   Reserve that corner in the footer only, so the menu is never covered while
   the rest of the card keeps its full width. (Removing the lane from the whole
   card on 23 Sep fixed the dead strip but uncovered this.) */
.shell-phone .cand-card .cc-foot {
  padding-right: calc(var(--ats-fab-size, 52px) - 4px);
}

/* 7. Stacked table row — a table that reflows into cards (Talent Pool
   "Table"). Selection is a corner control, not a row of its own; every field
   starts on the same edge; an empty trailing cell is not drawn; the request
   control reads at body size. */
.shell-phone .responsive-table > tbody > tr { position: relative; }
.shell-phone .responsive-table > tbody > tr > td.th-sel {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 0;
  border: 0;
  width: auto;
}
.shell-phone .responsive-table td.th-sel + td { padding-right: 48px; }
.shell-phone .sel-hit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.shell-phone .sel-hit input { width: 20px; height: 20px; margin: 0; }
.shell-phone .responsive-table > tbody > tr > td,
.shell-phone .responsive-table > tbody > tr > td[data-priority="secondary"] {
  padding-left: 12px;
  padding-right: 12px;
}
.shell-phone .responsive-table td.cell-actions:has(> .muted:only-child) { display: none; }
/* A standalone link (not one inside a sentence) is a control, and gets a
   control's height. */
.shell-phone .email-settings-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Dividers separate fields; the card's own edge closes the last one. */
.shell-phone .responsive-table > tbody > tr > td:last-child,
.shell-phone .responsive-table > tbody > tr > td:has(+ td.cell-actions:last-child > .muted:only-child) {
  border-bottom: 0;
}
.shell-phone .rq-link-btn,
.shell-phone .rq-link-chip {
  font-size: 13px;
  min-height: 44px;
  padding: 6px 12px;
  white-space: nowrap;
}
.shell-phone .rq-link-sub { font-size: 12px; max-width: 100%; }
.shell-phone .rq-link-btn.rq-link-btn-icon { min-width: 44px; justify-content: center; }
.shell-phone .idcell-av { font-size: 12px; }

/* ---- small print that has to stay readable on a phone -------------------
   Ticket codes (RQ-26-002, OFR-2026-00002), count pills and tab counts were
   10.5px: fine on a 1440px desktop at arm's length, too small to read on a
   phone held in one hand. 12px is the smallest size used anywhere else in the
   phone shell. Size only — colour, weight and shape stay as designed. */
.shell-phone .fine-key,
.shell-phone .intake-state,
.shell-phone .preview-status-badge,
.shell-phone .intake-list-copy small,
.shell-phone .kan-count,
.shell-phone .pipe-count em,
.shell-phone .pcard-facts,
.shell-phone .pcard-facts .fact,
.shell-phone .pcard-match,
.shell-phone .pcard-request,
.shell-phone .pcard-residual,
.shell-phone .code-pill,
.shell-phone .count-pill,
.shell-phone .count-pill em,
.shell-phone .seg-tab .seg-count {
  font-size: 12px;
}
/* Field labels on the request cards (Dept, Project / Site, Headcount,
   Pipeline) were 10–10.5px. They are uppercase with tracking, which reads at a
   slightly smaller size than body text — 11.5px, not 12. */
.shell-phone .funnel-mini .fm-leg,
.shell-phone .fine-label,
.shell-phone .cvi-status-k,
.shell-phone .content dt,
.shell-phone .fm-label {
  font-size: 11.5px;
}
/* Any other toolbar wraps instead of scrolling sideways. */
.shell-phone .toolbar,
.shell-phone .filters,
.shell-phone .filter-row {
  flex-wrap: wrap;
  gap: 8px;
}
.shell-phone .toolbar > *,
.shell-phone .filters > * { min-width: 0; }
/* Modals become near-full-screen sheets: a centred 640px dialog on a 360px
   screen leaves no room for its own content. Scoped to the phone shell, so a
   desktop dialog keeps the width it was designed at. */
.shell-phone .modal-overlay { padding: 10px; align-items: flex-end; }
.shell-phone .modal-overlay .modal {
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 20px);
  margin: 0;
}


/* ==========================================================================
   PHONE COMPOSITION SYSTEM — one deliberate mobile layout, not a shrunk desktop
   ----------------------------------------------------------------------------
   Measured at 390×844 before this block: the first content row began at
   y=259–713 because the head stacked a 20px title, then a 2-column grid of
   44px buttons (up to three rows), the Ask bar, a two-row filter bar and a pill
   tab track. The system below is shared by every page:
     head     title + status on one line; actions in one scrolling row (40px)
     filters  search + Filters on one row; the count hides (tabs carry counts)
     tabs     an underline row that scrolls sideways
     tiles    two per row, 76px
     board    one stage per screen, snap-scrolled sideways
     profile  identity, current application and stage in the first 200px
   ========================================================================= */
.shell-phone .content, .shell-phone .content.content-phone { padding: 12px 16px calc(var(--ats-mtab-h) + var(--ats-msafe) + var(--ats-fab-size, 52px) + 16px); padding-top: calc(var(--ats-mtop-h) + 12px); }
.shell-phone .page-head, .shell-phone .dash-head { margin-bottom: 10px; }
.shell-phone .page-title { font-size: 19px; line-height: 1.2; }
/* Action row: owned by section 2 above (view switch on its own row, actions
   in a two-column grid). The horizontally scrolling strip that used to be
   here hid actions off-screen with no affordance and has been removed. */

.shell-phone .toolbar, .shell-phone .toolbar.ask-bar { margin-bottom: 10px; }
.shell-phone .filter-toolbar > .toolbar-count { display: none; }
.shell-phone .seg-tabs { gap: 18px; margin: 0 -16px 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.shell-phone .seg-tabs > .seg-tab { min-height: 42px; border-radius: 0; }

/* Two tiles per row (R14). The ≤640px rule in arabtec-design-system.css turns
   this row into a sideways scroller with 238px tiles, which cut the second
   tile at the screen edge; the phone shell restores the 2×2 grid. */
.shell-phone .dash-kpi-row { display: grid; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.shell-phone .dash-kpi-row > .dash-kpi { min-width: 0; }
.shell-phone .dash-kpi { padding: 12px 12px 10px; min-height: 0; }
.shell-phone .dash-kpi-val { font-size: 22px; }
.shell-phone .dash-kpi-label { font-size: 10px; letter-spacing: .1em; }
.shell-phone .dash-kpi-hint { font-size: 11.5px; }
.shell-phone .hint { margin: 12px 0 0; padding: 10px 12px; }
.shell-phone .card-head { min-height: 40px; padding: 10px 14px; }
.shell-phone .card-pad, .shell-phone .card > .card-pad { padding: 14px; }
.shell-phone .dash-grid-2, .shell-phone .ats-card-grid, .shell-phone .report-grid { gap: 12px; }

/* Board: one stage per screen, snap-scrolled. The stage strip shows where you are. */
.shell-phone .kanban {
  display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding: 0 0 12px;
  margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none;
}
.shell-phone .kanban::-webkit-scrollbar { display: none; }
.shell-phone .kan-col { flex: 0 0 84%; scroll-snap-align: start; max-height: none; }

/* Candidate profile: identity, application and stage first. */
.shell-phone .profile-header { padding: 0 0 10px; gap: 12px; }
.shell-phone .ph-avatar { width: 40px; height: 40px; font-size: 14px; }
.shell-phone .ph-name { font-size: 20px; }
.shell-phone .ph-meta { gap: 6px; }
.shell-phone .profile-header > :last-child { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.shell-phone .profile-header > :last-child .btn { flex: 0 0 auto; width: auto; min-height: 40px; }
.shell-phone .app-context { padding: 8px 0; font-size: 12.5px; gap: 6px 10px; }
.shell-phone .profile-tabs { overflow-x: auto; scrollbar-width: none; gap: 18px; margin: 0 -16px; padding: 0 16px; }
.shell-phone .profile-tabs::-webkit-scrollbar { display: none; }
.shell-phone .profile-tab { flex: 0 0 auto; white-space: nowrap; }
.shell-phone .profile-overview .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.shell-phone .ticket-header-card { padding: 0 0 10px; margin-bottom: 10px; }

/* Empty states stay short on a phone. */
.shell-phone .empty { padding: 24px 16px; }
.shell-phone .empty .ico, .shell-phone .empty .ico svg { width: 96px; height: 96px; }

/* Interview calendar on a phone: one day, a narrower time rail, and the hour
   is taller (set inline) so every half-hour slot is a 44px target. */
.shell-phone .cal-head, .shell-phone .cal-body { grid-template-columns: 44px repeat(var(--cal-cols), minmax(0, 1fr)); }
.shell-phone .cal-toolbar { padding: var(--sp-2) var(--sp-3); }

/* ---- Dashboard on a phone: decisions first, charts on request ---------- */
/* The chart sections (.dash-figure) fold behind one "Show hiring figures"
   button; the headline tiles, "Waiting on your decision" and the role list
   stay. Measured before: 3,700px of scroll for a director. */
.shell-phone .btn.dash-figures-toggle { display: flex; width: 100%; justify-content: space-between; margin: 0 0 12px; }
.shell-phone .dash-root.figures-open .dash-figures-toggle svg { transform: rotate(180deg); }
.shell-phone .dash-root:not(.figures-open) .dash-figure { display: none; }
/* A role row is one tap target on a phone, two lines tall: the title and
   code, then status · seats · days open on one wrapping line. No progress
   bar and no button — the whole row opens the request. */
.shell-phone .role-row .progress { display: none; }
.shell-phone .role-row-end .btn { display: none; }
.shell-phone .role-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.shell-phone .role-row > :first-child { flex: 1 0 100%; }
.shell-phone .role-row > :not(:first-child) { flex: 0 1 auto; }
.shell-phone .role-row > .role-row-end { flex-direction: row; margin-inline-start: auto; }
/* An empty dashboard card is a sentence on a phone, not a picture:
   "Nothing is scheduled for today" took a 200px illustration. */
.shell-phone .dash-root .empty .ico { display: none; }
.shell-phone .dash-root .empty { padding-top: 16px; padding-bottom: 16px; }


/* Interviews: the candidate's-answer picker wraps instead of scrolling, so all
   four answers are visible on a phone. */
.shell-phone .seg-tabs.resp-picker { flex-wrap: wrap; overflow-x: visible; }