/* ============================================================
   Responsive pass (2026-09-21) — admin SPA, all modules.
   Linked late in templates/index.html so it wins over the inline
   blocks at equal specificity. Breakpoints follow the SPA's own:
   768 (phone: sidebar overlays), 1024 (tablet / small laptop with
   the 240px sidebar open), 1440+ (wide).
   Audited with a Playwright sweep at 360/390/768/1024/1280/1440/1920.
   ============================================================ */

/* ---------- Top bar ---------- */
@media (max-width: 768px) {
    #appHeader > div { padding-left: 10px; padding-right: 10px; }
    #appHeader > div > div:first-child { gap: 6px; margin-right: 6px; }
    #appHeader > div > div:last-child { gap: 6px; }
    /* the hover tip has no hover on a phone, and its one-off nudge ran off the left edge */
    .am-btn-tip { display: none; }
    /* search collapses to its icon; tapping it opens the box across the bar */
    .gs { flex: 0 0 36px; width: 36px; }
    .gs-box { padding: 0; justify-content: center; }
    .gs-box input { position: absolute; opacity: 0; width: 1px; pointer-events: none; }
    .gs.open, .gs:focus-within {
        position: fixed; top: 14px; left: 10px; right: 10px; width: auto; z-index: 61;
    }
    .gs.open .gs-box, .gs:focus-within .gs-box { padding: 0 10px 0 12px; justify-content: flex-start; background: #fff; }
    .gs.open .gs-box input, .gs:focus-within .gs-box input { position: static; opacity: 1; width: auto; pointer-events: auto; font-size: 16px; }
}
/* Below 1280 the search box reaches the head buttons: Arturo's tip drops under his button instead of covering it */
@media (min-width: 769px) and (max-width: 1279px) {
    .am-btn-tip { right: -8px; top: calc(100% + 12px); transform: translateY(-6px); }
    .am-btn:hover .am-btn-tip, .am-btn.nudge .am-btn-tip { transform: translateY(0); }
    .am-btn-tip::after { right: 20px; top: -6px; margin-top: 0; transform: rotate(-45deg); }
}
@media (max-width: 420px) {
    /* "View as" is an admin testing tool: leave the room to the everyday buttons */
    #roleViewSwitcher { display: none !important; }
    #appHeader > div > div:last-child { gap: 4px; }
}

/* ---------- Shell, Home, Projects, Clients, TODOs, Budget codes, Connect LLM, Handbook ---------- */
/* Chrome: the "+ New" menu scrolls inside itself on short screens */
.gn-menu { max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 420px) {
    /* Ask Arturo: the starter cards go one per line instead of two squeezed ones */
    .am-starts { grid-template-columns: minmax(0, 1fr); }
}

/* Card grids (projects, clients, a client's projects): two columns as soon as
   two ~300px cards fit — 1024 with the sidebar open showed one stretched card */
@media (min-width: 769px) {
    #projectsGrid, #clientProjectsGrid, #clientsGrid { --ag-min: max(290px, min(380px, calc(50% - 8px))); }
}

/* Home: the side column stacks as one column on phones (its 50% flex-basis
   wrapped Next up / Start something into a second, clipped column) */
@media (max-width: 820px) {
    #view-home .hm-side { flex-wrap: nowrap; }
    #view-home .hm-side > * { flex: 0 0 auto; }
    /* edit mode widens the zone gaps by 18px: on the 12-column board that is 11
       column gaps, wider than a phone — keep the columns tight (blocks span 12 here) */
    #view-home .hm-editing .hm-board { column-gap: 4px; }
    /* edit bar: icons + Page / Reset / Done; the title does not fit next to them */
    .hm-edbar .hm-edbar-t { display: none; }
    /* the loading skeleton's 7 + 5 columns, stacked too */
    #view-home .hm-grid > .hm-card[style*="grid-column"] { grid-column: span 12 !important; height: 180px !important; }
}
@media (max-width: 560px) {
    /* module instruments one per row: two 150px cards were too tight */
    #view-home .hm-board > .hm-b[data-span] { grid-column: span 12 !important; }
}

/* Projects › Overview: on phones the label sits above its bar, full width */
@media (max-width: 640px) {
    #overviewChart .overview-grid { --ov-pad: 12px; }
    #overviewChart .overview-axis,
    #overviewChart .overview-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
    #overviewChart .overview-axis-label { display: none; }
    #overviewChart .overview-row-project { padding-top: 10px; padding-bottom: 12px; }
    #overviewChart .overview-row-phase { padding-top: 4px; padding-bottom: 6px; }
    #overviewChart .overview-canvas { left: var(--ov-pad); }
}

/* QA check: the tables scroll inside their card instead of losing columns */
#view-projects-qa .overflow-hidden:has(> table) { overflow-x: auto; }
@media (max-width: 1279px) {
    #view-projects-qa .overflow-hidden > table, #closingOverviewList table { min-width: 980px; }
}
@media (max-width: 768px) {
    #view-projects-qa .overflow-hidden > table, #closingOverviewList table { display: table; white-space: normal; }
    #qaTab-quality > .flex.justify-between, #qaTab-closing > .flex.justify-between { flex-wrap: wrap; row-gap: 4px; }
    #qaCheckSummary, #closingOverviewSummary { flex-shrink: 1; min-width: 0; }
    #qaTab-quality > .flex.items-center.gap-3 { flex-wrap: wrap; row-gap: 8px; }
    #qaTab-quality > .flex.items-center.gap-3 > .relative { flex: 1 1 100%; }
}

/* Resource allocation: a narrower sticky name column so the weeks get room;
   on phones the grid scrolls sideways inside its card */
@media (max-width: 768px) {
    #view-resource-allocation { --sa-name-w: 168px; }
    #view-resource-allocation #saProjectTable { display: table; white-space: normal; min-width: calc(var(--sa-name-w) + 12px + 7 * 56px); }
    #view-resource-allocation .heat-tbl td:first-child { padding-left: 12px; }
    #view-resource-allocation .heat-tbl th.mc { padding-left: 12px; }
    /* the budget meter goes under the project code; the contract type is left out */
    #saProjectTable .sa-project-hdr td:first-child { white-space: normal; }
    #saProjectTable .sa-bud { display: flex; margin: 3px 0 0 52px; }
    #saProjectTable .sa-bud-none { display: block; margin: 3px 0 0 52px; }
    #saProjectTable .sa-hdr-phase { margin-left: 52px; }
    #saProjectTable .sa-hdr-phase em, #saProjectTable .phase-meta { display: none; }
}
@media (min-width: 641px) and (max-width: 768px) {
    #view-resource-allocation { --sa-name-w: 230px; }
}
@media (min-width: 769px) and (max-width: 1023px) {
    #view-resource-allocation { --sa-name-w: 280px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    #appContent.sidebar-open #view-resource-allocation { --sa-name-w: 280px; }
}

/* People view: the person list sits above the card when the content is narrow */
@media (max-width: 1023px) {
    #view-resource-allocation .sa-pv { grid-template-columns: minmax(0, 1fr); }
    #view-resource-allocation .sa-pv-list { position: static; }
    #view-resource-allocation .sa-pv-scroll { max-height: min(340px, 45vh); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    #appContent.sidebar-open #view-resource-allocation .sa-pv { grid-template-columns: minmax(0, 1fr); }
    #appContent.sidebar-open #view-resource-allocation .sa-pv-list { position: static; }
    #appContent.sidebar-open #view-resource-allocation .sa-pv-scroll { max-height: min(340px, 45vh); }
}
@media (max-width: 768px) {
    #view-resource-allocation .sa-pc-hd { flex-wrap: wrap; gap: 12px 14px; padding: 16px 14px 14px; }
    #view-resource-allocation .sa-pc-id { flex: 1 1 calc(100% - 140px); }
    #view-resource-allocation .sa-pc-id h3 { font-size: 19px; }
    #view-resource-allocation .sa-pc-grid { display: table; white-space: normal; min-width: calc(150px + 60px + 7 * 52px); }
    #view-resource-allocation .sa-pc-grid th.sa-pc-l, #view-resource-allocation .sa-pc-grid td.sa-pc-l { width: 150px; padding-left: 14px; }
    #view-resource-allocation .sa-pc-grid th.sa-pc-tot, #view-resource-allocation .sa-pc-grid td.sa-pc-tot { width: 60px; padding-right: 12px; }
    #view-resource-allocation .sa-pc-grid th.sa-pc-l, #view-resource-allocation .sa-pc-grid td.sa-pc-l { position: sticky; left: 0; z-index: 1; background: #fff; }
}

/* Project page: the tab strip wraps instead of pushing the page sideways */
@media (min-width: 769px) {
    #projectTabBar { flex-wrap: wrap; }
    #projectTabBar .tab-btn { white-space: nowrap; }
}
/* narrow content (769–1023, or up to 1279 with the sidebar open): the info card
   goes above the tabs, folded like on phones, so the tab content keeps its width */
@media (min-width: 769px) and (max-width: 1023px) {
    #view-project-detail .max-w-screen-xl > .flex.gap-6 { flex-direction: column; gap: 1rem; }
    #view-project-detail .max-w-screen-xl > .flex.gap-6 > .w-72 { width: 100%; }
    #view-project-detail #projectDetailCard { position: static; }
    #view-project-detail #projectDetailCard.details-collapsed > *:nth-child(n+4) { display: none; }
    #view-project-detail #detailPanelToggle { display: flex; }
    #view-project-detail #projectDetailCard.details-collapsed #detailPanelToggle i { transform: rotate(-90deg); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    #appContent.sidebar-open #view-project-detail .max-w-screen-xl > .flex.gap-6 { flex-direction: column; gap: 1rem; }
    #appContent.sidebar-open #view-project-detail .max-w-screen-xl > .flex.gap-6 > .w-72 { width: 100%; }
    #appContent.sidebar-open #view-project-detail #projectDetailCard { position: static; }
    #appContent.sidebar-open #view-project-detail #projectDetailCard.details-collapsed > *:nth-child(n+4) { display: none; }
    #appContent.sidebar-open #view-project-detail #detailPanelToggle { display: flex; }
    #appContent.sidebar-open #view-project-detail #projectDetailCard.details-collapsed #detailPanelToggle i { transform: rotate(-90deg); }
}
@media (max-width: 768px) {
    #projectTabContent { padding: 16px 14px; }
    /* header rows (month card, section titles, toolbars) wrap instead of squeezing */
    #projectTabContent .justify-between { flex-wrap: wrap; row-gap: 8px; }
    #projectTabContent .justify-between > .flex.items-center.gap-2 { flex-wrap: wrap; }
    #pttContent .min-w-\[140px\] { min-width: 0; padding: 0 2px; }
    #projectTabContent .bg-blue-600, #projectTabContent .bg-green-600 { white-space: nowrap; }
    #projectTabContent .border.rounded-xl > .flex.justify-between.px-5 { padding-left: 14px; padding-right: 14px; }
    /* Servers tab: a real table inside its scroller (actions column stays pinned) */
    #projectTabContent .overflow-x-auto > table[class*="min-w-"] { display: table; white-space: normal; }
}

/* Servers and IT services: on phones the table keeps its layout inside its
   scroller (the generic phone rule made it one 3800px no-wrap block) */
@media (max-width: 768px) {
    #view-project-servers .overflow-x-auto > table { display: table; white-space: normal; }
    #view-project-servers #psTableBody td:first-child { min-width: 150px; }
}

/* Client page: on phones the header stacks — actions on top, then logo + name */
@media (max-width: 640px) {
    #view-client-detail .bg-white.rounded-xl.border.p-6 { padding: 16px; }
    #view-client-detail .bg-white.rounded-xl.border.p-6 > .flex.justify-between { flex-direction: column; align-items: stretch; gap: 10px; }
    #view-client-detail #clientDetailActions { order: -1; align-self: flex-end; }
    #view-client-detail .bg-white.rounded-xl.border.p-6 > .flex.justify-between > .flex.items-center { align-items: flex-start; }
    #clientDetailMeta { gap: 6px 14px; }
}

/* TODOs: the status and entity filters wrap to two rows on narrow screens */
#view-todos .flex.items-center.gap-4.mb-4 { flex-wrap: wrap; row-gap: 8px; }
#view-todos .flex.items-center.gap-4.mb-4 > .flex { min-width: 0; max-width: 100%; }

/* Budget codes: descriptions wrap on phones instead of a 1000px line */
@media (max-width: 768px) {
    #view-budget-codes table td { white-space: normal; }
    #view-budget-codes table td:nth-child(2) { min-width: 200px; }
}
/* @@end shell@@ */

/* ---------- Dashboard, HR, Settings ---------- */
/* people_select.js parks the hidden native <select> absolutely at its static spot; inside a
   horizontally scrolling table that spot is far right and widened the page (Bonus: 1422px) */
#view-dashboard .ps-native, #view-hr .ps-native, #view-settings .ps-native, #view-database .ps-native { left: 0; top: 0; }
/* Toolbars that ran off the right edge: wrap instead (all widths — 1024 + sidebar too) */
#dashTab-bonus > .flex.items-center.gap-2.mb-4,
#dashTab-bonus > .flex.items-center.gap-3.mb-3,
#dashTab-days > .flex.items-center.justify-between.mb-4,
#dashTab-expenses > .flex.items-center.justify-between.mb-4 { flex-wrap: wrap; row-gap: 8px; }
#bonusTotalSummary, #bonusValidateBtn { white-space: nowrap; }
/* Leave / Payments / Expense reports: the month strip and the status tabs scroll inside themselves */
#view-hr .lv-tbar-l { min-width: 0; max-width: 100%; }
#view-hr .lv-tbar-l > .lv-months, #view-hr .lv-tbar-l > .ex-seg { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#view-hr .lv-tbar-l > .ex-seg::-webkit-scrollbar { display: none; }
#view-hr .lv-months .lv-m, #view-hr .ex-seg button { flex-shrink: 0; white-space: nowrap; }

/* 1024 with the 240px sidebar open (content ≈ 784px): the 2-up / 6-up grids are too tight */
@media (min-width: 769px) and (max-width: 1279px) {
    #appContent.sidebar-open #dashTab-revenue > .grid.lg\:grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
    #appContent.sidebar-open #expenseMonthGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Org chart: the 340px side panel sits under the canvas when the content is narrow */
@media (max-width: 768px) {
    #hrOrgStage > .flex.items-start { flex-direction: column; align-items: stretch; }
    #hrOrgStage > .flex.items-start > .flex-1 { width: 100%; }
    #hrOrgSide.org-side { width: auto; flex: none; max-height: none; }
}
@media (min-width: 769px) and (max-width: 1199px) {
    #appContent.sidebar-open #hrOrgStage > .flex.items-start { flex-direction: column; align-items: stretch; }
    #appContent.sidebar-open #hrOrgStage > .flex.items-start > .flex-1 { width: 100%; }
    #appContent.sidebar-open #hrOrgSide.org-side { width: auto; flex: none; max-height: none; }
}

@media (max-width: 768px) {
    /* phone tables are their own scroll boxes (display:block): keep absolutely-positioned bits
       inside them (the people picker's hidden native <select> pushed the page to 1422px) */
    #view-dashboard table, #view-hr table, #view-settings table, #view-database table { position: relative; }

    /* Income KPI tiles: one compact row each instead of three tall cards */
    #dashTab-revenue > .grid.md\:grid-cols-3 { gap: 10px; margin-bottom: 20px; }
    #dashTab-revenue > .grid.md\:grid-cols-3 > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
    #dashTab-revenue > .grid.md\:grid-cols-3 > div > .flex { margin-bottom: 0; min-width: 0; }
    #dashTab-revenue > .grid.md\:grid-cols-3 > div > p { font-size: 1.5rem; line-height: 2rem; }

    /* Tracking: status filter + search share the row, search takes what's left */
    #dashTab-days > .flex.items-center.justify-between.mb-4 { gap: 8px; }
    #dashTab-days > .flex.items-center.justify-between.mb-4 > .relative { flex: 1 1 160px; min-width: 0; }
    #consumptionSearch { width: 100%; }

    /* Bonus: month strip scrolls on its own line */
    #bonusMonthButtons { flex: 1 1 100%; order: 5; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
    #bonusMonthButtons > * { flex-shrink: 0; }
    #bonusTotalSummary { margin-left: auto; }

    /* Expenses: year stepper and the import buttons wrap cleanly */
    #dashTab-expenses > .flex.items-center.justify-between.mb-4 > .flex { flex-wrap: wrap; }
    #dashTab-expenses > .flex.items-center.justify-between.mb-4 button { white-space: nowrap; }

    /* HR search boxes (Task orders, Contracts) get their own full row instead of a 60px stub */
    #view-hr .tox-search { flex: 1 1 100%; }
    #view-hr .tox-search input { width: 100%; }
    #view-hr .lv-tbar-r .ex-search { flex: 1 1 100%; }
    #view-hr .lv-tbar-r .ex-search input { width: 100%; }

    /* Admin › Invoices: search on its own row, action buttons keep one line */
    #globalInvoicesContainer .relative:has(> #globalInvSearchInput) { flex: 1 1 100%; }
    #globalInvoicesContainer .flex.items-center.gap-2:has(> button[onclick^="addGlobalInvoice"]) { flex-wrap: wrap; }
    #globalInvoicesContainer .flex.items-center.gap-2:has(> button[onclick^="addGlobalInvoice"]) button { white-space: nowrap; }

    /* Tech doc: long paths / e-mails in <code> wrap inside their card */
    #settingsContent-tech-doc code { overflow-wrap: anywhere; word-break: break-word; }
    #settingsContent-tech-doc .flex.items-start.gap-2 > span { min-width: 0; overflow-wrap: anywhere; }
}
/* @@end people@@ */

/* ---------- Biz Dev: Company, Policies, Portfolio, Roster, Radar, Proposals host ---------- */
/* Company info: the tab already gets the 32px inset from the view; drop the
   second 32px of its .rec-wrap so it lines up with the other Biz Dev pages. */
@media (min-width: 769px) {
    #bizdevContent-company > .rec-wrap { padding-left: 0; padding-right: 0; }
}
/* CRM — same shell as the radar: the tabs scroll in their strip, the filter
   row wraps, the board scrolls sideways; the list drops its last columns
   under 900px (static/crm.css) and the insights go single-column. */
#bizdevContent-crm #crmTabs { max-width: 100%; overflow-x: auto; }
#bizdevContent-crm #crmTabs .rec-tab { flex: 0 0 auto; }
@media (max-width: 768px) {
    #bizdevContent-crm > .rec-wrap { padding: 12px 0 50px; }
    #bizdevContent-crm .rec-topbar { gap: 10px; }
    #bizdevContent-crm #crmTabs { order: 5; flex: 1 1 100%; display: flex; }
    #bizdevContent-crm #crmTabs .rec-tab { padding: 7px 10px; }
    #bizdevContent-crm .rec-filters input { flex: 1 1 100%; min-width: 0; }
    #bizdevContent-crm .rec-filters select { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: 100%; }
    #bizdevContent-crm .crm-cap { flex: 1 1 calc(50% - 5px); min-width: 0; }
    #bizdevContent-crm .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #bizdevContent-crm .crm-logf { grid-template-columns: 1fr 1fr; }
    #bizdevContent-crm .crm-nsrow { grid-template-columns: 1fr; }
}
/* Tender Radar — the view tabs scroll inside their own strip; single-column
   Insights never grow wider than the screen (1fr = min-content otherwise). */
#bizdevContent-radar #rdrTabs { max-width: 100%; overflow-x: auto; }
#bizdevContent-radar #rdrTabs .rec-tab { flex: 0 0 auto; }
@media (max-width: 1100px) {
    #bizdevContent-radar .rdr-ins { grid-template-columns: minmax(0, 1fr); }
    #bizdevContent-radar .rdr-ins > * { min-width: 0; }
}
@media (max-width: 768px) {
    /* the view already has the 16px phone gutter — no second 32px inset */
    #bizdevContent-radar > .rec-wrap { padding: 12px 0 50px; }
    #bizdevContent-radar .rec-topbar { gap: 10px; }
    #bizdevContent-radar #rdrTabs { order: 5; flex: 1 1 100%; display: flex; }
    #bizdevContent-radar #rdrTabs .rec-tab { padding: 7px 10px; }
    #bizdevContent-radar #rdrFilterBar input { flex: 1 1 100%; min-width: 0; }
    #bizdevContent-radar #rdrFilterBar select { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: 100%; }
    /* Insights */
    #bizdevContent-radar .rdr-inshead { flex-wrap: wrap; }
    #bizdevContent-radar .rdr-instabs { max-width: 100%; overflow-x: auto; }
    #bizdevContent-radar .rdr-instabs button { flex: 0 0 auto; padding: 7px 10px; }
    #bizdevContent-radar .rdr-cover { padding: 18px 16px; gap: 16px; }
    #bizdevContent-radar .rdr-ins .box { padding: 14px 14px 15px; }
    #bizdevContent-radar .rdr-ins .box.wide .rdr-brow,
    #bizdevContent-radar .rdr-brow { grid-template-columns: minmax(64px, 1fr) 28px minmax(60px, 1.4fr) 46px; }
    #bizdevContent-radar .rdr-ins .box.wide .rdr-fstep,
    #bizdevContent-radar .rdr-fstep { grid-template-columns: minmax(80px, 1fr) minmax(60px, 1.4fr) 40px 46px; }
    #bizdevContent-radar .rdr-ins .box { overflow-x: auto; }
    /* Deadlines › Schedule: a narrower sticky lead column leaves room for the weeks */
    #bizdevContent-radar .rdr-sch-grid { grid-template-columns: 132px 1fr; }
    #bizdevContent-radar .rdr-sch-lead { padding: 6px 8px; gap: 6px; }
    #bizdevContent-radar .rdr-sch-lead img,
    #bizdevContent-radar .rdr-sch-lead .rdr-sch-radarmark { width: 24px; height: 24px; }
    #bizdevContent-radar .rdr-sch-top { padding: 10px 12px; }
}
/* notif_admin.css styles the bare .nm class (grid, min-height 520px, height
   calc(100vh-260px)); Biz Dev uses .nm as a plain "name" cell — undo it here. */
.rdr-rvc .nm, .rdr-stbl .nm, .rdr-doc .nm, .pfst-as .nm, .pfwb-lib .nm, .pfwc-lr .nm {
    height: auto; min-height: 0; grid-template-columns: none; gap: normal;
}
.rdr-doc .nm, .pfst-as .nm, .pfwb-lib .nm, .pfwc-lr .nm { display: block; }
.rdr-stbl .nm { gap: 7px; }
@media (max-width: 768px) {
    /* Insights cover: the four figures go 2 x 2 instead of running off the card */
    #bizdevContent-radar .rdr-cvrail { flex-wrap: wrap; row-gap: 14px; }
    #bizdevContent-radar .rdr-cvstat { flex: 1 1 40%; padding: 2px 12px; }
    #bizdevContent-radar .rdr-cvstat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
    /* Opportunity panel (full screen on phones): controls on their own row,
       title gets the full width; the tall header no longer sticks over the body */
    #rdrPanel .rec-drhead { position: static; padding: 12px 16px 12px; }
    #rdrPanel .rec-drhead > .flex.items-start { flex-wrap: wrap; row-gap: 8px; }
    #rdrPanel .rec-drhead > .flex.items-start > .flex-shrink-0 { order: -1; margin-left: auto; }
    #rdrPanel .rec-drhead > .flex.items-start > .min-w-0 { flex: 1 1 100%; }
    #rdrPanel .rec-drname { font-size: 17px; }
}
/* Portfolio card editor (#pfEditModal): full screen on phones, form and
   preview stacked in one scroll instead of a 400px side column. */
@media (max-width: 768px) {
    #pfEditModal { padding: 0 !important; }
    #pfEditModal .pf-modal { max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    #pfEditModal .pf-modal > div:first-child { flex-wrap: wrap; padding: 12px 16px 10px; row-gap: 8px; }
    #pfEditModal .pf-modal > div:first-child > div:last-child { flex-wrap: wrap; gap: 8px; margin-left: auto; }
    #pfEditModal .pf-modal-body { display: block; overflow-y: auto; }
    #pfEditModal .pf-form, #pfEditModal .pf-side { overflow: visible; padding: 14px 16px 18px; }
    #pfEditModal .pf-side { border-left: 0; border-top: 1px solid var(--rstroke); }
    #pfEditModal .pf-modal > div:last-child { flex-wrap: wrap; padding: 10px 16px; row-gap: 6px; }
    #pfEditModal .pf-modal > div:last-child > div:first-child { flex: 1 1 100%; min-width: 0; }
    #pfEditModal .pf-modal > div:last-child > div:last-child { flex-wrap: wrap; margin-left: auto; }
}
@media (max-width: 640px) {
    #pfEditModal .pf-modal > div:first-child p { display: none; }
    #pfEditModal .pf-grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    #pfEditModal .pf-grid2, #pfEditModal .pf-grid3 { grid-template-columns: minmax(0, 1fr); }
}
/* Visual studio / website editor / composer (.pfst shells): the three panes
   stack in one scroll on phones — canvas first, rails below. */
@media (max-width: 768px) {
    .pfst .pfst-body, .pfwb .pfwb-body { display: flex; flex-direction: column; overflow-y: auto; }
    .pfst .pfst-stage { flex: 0 0 58vh; order: -1; }
    .pfst .pfst-rail { overflow: visible; flex: 0 0 auto; }
    .pfst .pfst-rail.left { border-right: 0; border-bottom: 1px solid var(--rstroke); }
    .pfst .pfst-rail.right { border-left: 0; border-top: 1px solid var(--rstroke); }
    /* website editor: the page list becomes a sideways strip above the page */
    .pfwb .pfwb-left { order: -2; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px 12px; }
    .pfwb .pfwb-left .q { position: static; flex: 0 0 160px; align-self: flex-start; }
    .pfwb .pfwb-left .pfwb-li { flex: 0 0 150px; width: 150px; }
    .pfwb .pfwb-stage { order: -1; flex: 0 0 auto; min-height: 60vh; padding: 16px 12px 40px; overflow: visible; }
    .pfwb .pfwb-stage.mobile { padding: 16px 0 40px; }
    .pfwb .pfwb-page { padding: 24px 18px 36px; }
    .pfst-bar { padding: 8px 10px; }
    .pfst-name small { max-width: 150px; }
    /* the floating Save / Push dock: its status line goes on top, full width */
    .pfwb-dock { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
    .pfwb-dock .pfwb-dockmsg { flex: 1 1 100%; max-width: none; border-right: 0; margin: 0; padding: 0 4px 6px; justify-content: center; text-align: center; }
}
/* Core documents: on phones each policy is a stacked row (title + summary on
   top, category and actions underneath) instead of a table wider than the card. */
@media (max-width: 640px) {
    #bizdevContent-policies > .bg-white { padding: 14px 12px; }
    #bizdevContent-policies #policySearchInput { width: auto; flex: 1 1 180px; min-width: 0; }
    #policiesTableContainer table, #policiesTableContainer tbody { display: block; width: 100%; }
    #policiesTableContainer thead { display: none; }
    #policiesTableContainer tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 0; }
    #policiesTableContainer td { display: block; padding: 2px 4px; }
    #policiesTableContainer td.hidden { display: none; }
    #policiesTableContainer td:first-child { flex: 1 1 100%; min-width: 0; white-space: normal; }
    #policiesTableContainer td:last-child { margin-left: auto; }
}
/* @@end bizdev@@ */

/* ---------- Recruitment, Skills ---------- */
/* Onboarding people list: the name span is .nm, which static/notif_admin.css
   styles globally as a 520px-tall two-column grid — every row ballooned. */
#view-recruitment .ob-person .nm { display: block; height: auto; min-height: 0; grid-template-columns: none; gap: 0; }

/* Grids never force a column wider than the screen (1fr = min-content otherwise). */
#view-recruitment .rec-oplist { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }
#view-recruitment .rec-opcard { min-width: 0; }
#view-skills .skl-cgrid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
#view-skills .skl-igrid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
#view-skills .skl-grid { grid-template-columns: repeat(auto-fill, minmax(min(286px, 100%), 1fr)); }
#view-skills .skl-cgrid > *, #view-skills .skl-igrid > * { min-width: 0; }

/* Skills tabs (5) scroll inside their own strip instead of running off the page. */
#view-skills #sklTabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#view-skills #sklTabs::-webkit-scrollbar { display: none; }
#view-skills #sklTabs .rec-tab { flex: 0 0 auto; }

/* Signatures: list | panel side by side needs ~800px; below that the panel
   sits under a list that scrolls in its own box, so it is reachable. */
@media (max-width: 900px) {
    #view-recruitment .sg-board { grid-template-columns: minmax(0, 1fr); }
    #view-recruitment .sg-board > .ob-list { max-height: min(420px, 55vh); overflow-y: auto; }
    #view-recruitment .sg-board > .ob-panel { scroll-margin-top: 76px; }
}
@media (max-width: 1100px) {
    /* Onboarding stacks here (rec_onboarding.css) */
    #view-recruitment .ob-board:not(.sg-board) > .ob-list { max-height: min(420px, 55vh); overflow-y: auto; }
    #view-recruitment .ob-board:not(.sg-board) > .ob-panel { scroll-margin-top: 76px; }
}

/* Review mode: the keyboard legend only fits a wide top bar (and needs a keyboard). */
@media (max-width: 1000px) {
    #recReview .rec-rvkeys { display: none; }
}

/* Interview worksheet with the CV docked beside it: the worksheet column is only
   ~54% wide, so its header puts the controls on a second line (all widths)… */
#recAssess.rec-as-split div:has(> button.rec-rvx) { flex-wrap: wrap; row-gap: 10px; }
#recAssess.rec-as-split div:has(> button.rec-rvx) > div:nth-child(2) { flex: 1 1 calc(100% - 100px) !important; }
#recAssess.rec-as-split div:has(> button.rec-rvx) > :is(.rec-ivdate, .rec-ascvtog, .rec-tabs) { order: 2; }
/* …and below ~1300px its footer puts the verdicts under "Recommendation … Done". */
@media (max-width: 1300px) {
    #recAssess.rec-as-split div:has(> .rec-verdicts) { flex-wrap: wrap; row-gap: 8px; }
    #recAssess.rec-as-split div:has(> .rec-verdicts) > span:first-child { flex: 1 1 auto; }
    #recAssess.rec-as-split div:has(> .rec-verdicts) > span[style*="flex:1"] { display: none; }
    #recAssess.rec-as-split .rec-verdicts { order: 2; flex: 1 1 100%; flex-wrap: wrap; gap: 5px; }
}

@media (max-width: 768px) {
    /* the view already has the 16px phone gutter — no second 32px inset */
    #view-recruitment > .rec-wrap, #view-skills > .rec-wrap { padding: 12px 0 50px; }
    #view-recruitment .rec-topbar, #view-skills .rec-topbar { gap: 10px; }
    #view-skills #sklTabs { order: 5; flex: 1 1 100%; display: flex; }
    #view-skills #sklTabs .rec-tab { padding: 7px 10px; }

    /* Review mode top bar: close + counter on the first line, candidate + verdicts below */
    #recReview .rec-rvtop { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
    #recReview .rec-rvnav { margin-left: auto; }
    #recReview .rec-rvwho { order: 3; flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; }
    #recReview .rec-rvwho .rec-rvacts { margin-left: auto; }

    /* Skills: review rows put their buttons under the text; tiles two by two */
    #view-skills .skl-vrow { flex-wrap: wrap; }
    #view-skills .skl-vrow .c { flex: 1 1 calc(100% - 50px); }
    #view-skills .skl-vrow .a { flex: 1 1 100%; justify-content: flex-start; }
    #view-skills .skl-sec { flex-wrap: wrap; row-gap: 4px; }
    #view-skills .skl-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #view-skills .skl-hero > .skl-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    /* Openings cards: lead + pipeline on one line, the four actions under it */
    #view-recruitment .rec-oprow2 { flex-wrap: wrap; row-gap: 10px; }
    #view-recruitment .rec-oppipe { flex: 1 1 calc(100% - 45px); min-width: 0; }
    #view-recruitment .rec-opacts { flex: 1 1 100%; justify-content: flex-end; }
    #view-recruitment .rec-opcard { padding: 14px 14px; }
}

@media (max-width: 640px) {
    /* Candidate panel is full-screen here: its header scrolls away with the
       page instead of pinning a third of the screen, and the tools sit on
       their own line so the name gets the full width. */
    #recDrawer .rec-drhead { position: static; padding: 12px 16px 12px; }
    #recDrawer .rec-drhead > div:first-child { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    #recDrawer .rec-drhead > div:first-child > div:last-child { justify-content: flex-end; }
    /* floating action bar: tighter, so more of the stage moves show before it scrolls */
    #recDrawer .rec-actbar { bottom: 10px; max-width: calc(100% - 20px); }
    #recDrawer .rec-barpill { padding: 10px 8px 11px; gap: 2px; }
    #recDrawer .rec-actw { width: 62px; }

    /* Interview / assessment worksheet */
    /* header scrolls away (sticky header + sticky footer left no room to work) */
    #recAssess div:has(> button.rec-rvx) { flex-wrap: wrap; row-gap: 10px; padding: 12px 14px !important; position: static !important; }
    #recAssess div:has(> button.rec-rvx) > div:nth-child(2) { flex: 1 1 calc(100% - 100px) !important; }
    #recAssess div:has(> button.rec-rvx) > :is(.rec-ivdate, .rec-ascvtog, .rec-tabs) { order: 2; }
    #recAssess .rec-asbar, #recAssess .rec-astiles { margin-left: 14px; margin-right: 14px; }
    #recAssess .rec-astiles { flex-wrap: wrap; }
    #recAssess .rec-astile { flex: 1 1 calc(50% - 5px); }
    #recAssess .rec-astiles > span[style*="flex:1"] { display: none; }
    #recAssess .rec-astiles > .rec-asoverall { flex: 1 1 100%; text-align: right; }
    /* footer: "Recommendation … Done" on one line, the four verdicts under it */
    #recAssess div:has(> .rec-verdicts) { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px !important; }
    #recAssess div:has(> .rec-verdicts) > span:first-child { flex: 1 1 auto; }
    #recAssess div:has(> .rec-verdicts) > span[style*="flex:1"] { display: none; }
    #recAssess div:has(> .rec-verdicts) > .rec-btnp { padding-top: 7px; padding-bottom: 7px; }
    #recAssess .rec-verdicts { order: 2; flex: 1 1 100%; gap: 5px; }
    #recAssess .rec-vbtn { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
}
/* @@end recruitment@@ */

/* ---------- Calendar (#view-calendar, static/calendar.css) ---------- */
/* 1024 with the 240px sidebar open (content ≈ 784px): the rail eats a third of the grid */
@media (min-width: 769px) and (max-width: 1279px) {
    #appContent.sidebar-open .cal-rail { width: 208px; padding-right: 12px; }
    #appContent.sidebar-open .cal-root { padding: 10px 14px 24px; }
    #appContent.sidebar-open .cal-grid .fc-timegrid-slot { height: 2.3em; }
}
@media (max-width: 768px) {
    .cal-root { min-height: calc(100vh - 90px); }
    .cal-grid { height: auto; }
    .cal-modal { width: calc(100vw - 16px); padding: 16px 14px 14px; border-radius: 14px; }
    .cal-pop { left: 8px !important; right: 8px; width: auto; }
    .cal-frow { gap: 8px; }
    .cal-set-tabs button { padding: 8px 6px; font-size: 12px; }
    .cal-hol-form .cal-in, .cal-hol-form .cal-sel { width: 100%; }
    .cal-modal.cal-editor.is-fat { flex-direction: column; }
    .cal-modal.cal-editor.is-fat .cal-editor-form { flex: none; }
    .cal-fat { border-left: 0; border-top: 1px solid var(--rstroke); padding: 10px 0 0; max-height: 50vh; }
}
/* @@end calendar@@ */

/* ---------- Drive (#view-drive, static/drive.css) ---------- */
/* SPEC §D.10. Sizes travel as custom properties on .dv-root so drive.css / drive.js read one
   source: --dv-rail-w, --dv-tile, --dv-insp-w, --dv-col-w, --dv-prev-w. Under 1024 the rail is
   an overlay sheet (.dv-root.rail-open) and a chips row (.dv-chips: Team · My · Shared · Recent
   · Starred · Trash) stands in for it; the inspector becomes a right sheet; Columns falls back
   to List (drive.js renders .dv-list below 1024 too; the rule here is the safety net). */
#view-drive .dv-root, #view-drive .dv-main, #view-drive .dv-body { min-width: 0; max-width: 100%; }
#view-drive .dv-cols { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
#view-drive .dv-list, #view-drive .dv-results { overflow-x: auto; }
@media (min-width: 1440px) {
    #view-drive .dv-root { --dv-rail-w: 232px; --dv-tile: 184px; --dv-insp-w: 320px; --dv-col-w: 260px; --dv-prev-w: 340px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    #view-drive .dv-root { --dv-rail-w: 232px; --dv-tile: 168px; --dv-insp-w: 320px; --dv-col-w: 240px; --dv-prev-w: 320px; }
}
@media (min-width: 1024px) {
    #view-drive .dv-chips { display: none; }
    #view-drive .dv-rail { width: var(--dv-rail-w, 232px); flex: 0 0 var(--dv-rail-w, 232px); }
    #view-drive .dv-insp { width: var(--dv-insp-w, 320px); flex: 0 0 var(--dv-insp-w, 320px); }
}
/* 1024–1279 (784px of content with the 240px sidebar open) */
@media (min-width: 1024px) and (max-width: 1279px) {
    #view-drive .dv-root { --dv-rail-w: 208px; --dv-tile: 160px; --dv-insp-w: 296px; --dv-col-w: 220px; --dv-prev-w: 300px; }
    #appContent.sidebar-open #view-drive .dv-root { padding: 10px 14px 24px; }
    /* the rail folds by itself while the inspector is open; › (.dv-railbtn) brings it back */
    #appContent.sidebar-open #view-drive .dv-root.insp-open:not(.rail-open) .dv-rail { display: none; }
    #appContent.sidebar-open #view-drive .dv-root.insp-open:not(.rail-open) .dv-railbtn { display: inline-flex; }
}
/* 769–1023 and phones: rail = overlay sheet, inspector = right sheet, List instead of Columns */
@media (max-width: 1023px) {
    #view-drive .dv-root { --dv-tile: 148px; padding: 10px 14px 24px; }
    #view-drive .dv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
    #view-drive .dv-railbtn { display: inline-flex; }
    #view-drive .dv-rail {
        position: fixed; z-index: 62; top: 70px; left: 8px; bottom: 8px; width: min(280px, calc(100vw - 16px));
        max-height: none; background: #fff; border-radius: 16px; box-shadow: var(--rsh-lg);
        padding: 14px 12px; overflow-y: auto; transform: translateX(calc(-100% - 16px));
        transition: transform 200ms var(--dv-ease, ease); visibility: hidden;
    }
    #view-drive .dv-root.rail-open .dv-rail { transform: none; visibility: visible; }
    #view-drive .dv-insp {
        position: fixed; z-index: 62; top: 70px; right: 8px; bottom: 8px; width: min(360px, calc(100vw - 16px));
        background: #fff; border-radius: 16px; border-left: 0; box-shadow: var(--rsh-lg);
        padding: 16px; overflow-y: auto;
    }
    #view-drive .dv-cols { display: none !important; }
    #view-drive .dv-list { display: block; }
    #view-drive #dvViewToggle [data-view="columns"], #view-drive #dvViewToggle [data-v="columns"] { display: none; }
    #view-drive .ph .dv-search { width: auto; flex: 1 1 220px; min-width: 0; }
}
@media (max-width: 768px) {
    #view-drive .dv-root { --dv-tile: 140px; padding: 8px 10px 20px; }
    #view-drive .dv-icons { gap: 12px; }
    #view-drive .dv-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px 10px; padding: 0 10px; }
    #view-drive .dv-chips::-webkit-scrollbar { display: none; }
    #view-drive .dv-chips > * { flex: 0 0 auto; }
    #view-drive .ph { flex-wrap: wrap; row-gap: 8px; }
    #view-drive .ph .dv-search { flex: 1 1 100%; order: 10; width: 100%; }
    #view-drive .dv-bar { flex-wrap: wrap; height: auto; min-height: 52px; padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }
    /* the path keeps its last two folders (segment · › · segment) */
    #view-drive .dv-path { min-width: 0; max-width: 100%; overflow: hidden; }
    #view-drive .dv-path > :nth-last-child(n+4) { display: none; }
    #view-drive .dv-insp { left: 8px; right: 8px; width: auto; top: 64px; }
    #view-drive .dv-rail { width: calc(100vw - 16px); top: 64px; }
    #view-drive .dv-row { min-height: 44px; height: 44px; }
    #view-drive .dv-rail a, #view-drive .dv-rail [role="treeitem"], #view-drive .dv-rail button { min-height: 40px; }
    .rec-selbar.dv-selbar { left: 8px !important; right: 8px; width: auto; transform: none !important; bottom: 12px; overflow-x: auto; }
    .dv-tray { left: 8px; right: 8px; width: auto; bottom: 8px; max-height: 60vh; }
    .dv-sheet { width: calc(100vw - 16px) !important; max-width: none; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 16px; }
    .dv-ql > * { max-width: calc(100vw - 16px); }
    .rec-menu.dv-menu { max-width: calc(100vw - 16px); }
}
/* touch: bigger rows, no drag handles */
@media (pointer: coarse) {
    #view-drive .dv-row { min-height: 44px; }
}
/* Drive v1.2: share-sheet rows, pins, AI, settings tabs and the adoption charts on small widths */
@media (max-width: 768px) {
  #view-drive .dv-ad-kpis, .dv-ad-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dv-ad-ringw { flex-direction:column; align-items:stretch; gap:14px; }
  .dv-ad-ring { align-self:center; }
  .dv-sh-lrow .dv-sh-lab { min-width:0; flex:1 1 100%; }
  .dv-sh-lhint { margin-left:0; }
  .rec-tabs.dv-sh-gate { width:100%; }
  .rec-tabs.dv-sh-gate .rec-tab { flex:1; justify-content:center; }
  .dv-sh-slackf { flex-wrap:wrap; }
  .dv-sh-slackf .dv-input:first-child { flex:1 1 100%; }
  .dv-sh-slackf .dv-sh-sll { flex:1 1 0; }
  .rec-tabs.dv-set-tabs { align-self:stretch; overflow-x:auto; scrollbar-width:none; }
  .rec-tabs.dv-set-tabs .rec-tab { flex:1 0 auto; justify-content:center; padding-left:8px; padding-right:8px; font-size:12.5px; }
  .rec-tabs.dv-set-tabs .rec-tab svg { display:none !important; }
  .dv-lvr { flex-wrap:wrap; padding:10px 0; }
  .dv-lvr .dv-sh-who { flex:1 1 calc(100% - 50px); }
  .dv-lvsz { align-items:flex-start; margin-left:46px; margin-right:auto; }
  .dv-pinbox { width:min(260px, 70vw); }
  .dv-pinbox.dv-pinbox-l { margin-left:calc(-1 * min(260px, 70vw) - 20px); }
  .dv-optab td:nth-child(2) { white-space:normal; }
  .dv-ql-pillbtn { padding:0 9px; }
  .dv-ql-lock { display:none; }
}
/* Drive v1.3: Leavers rows (Restore · Transfer to… · delete on one line under the name), the importer card */
@media (max-width: 768px) {
  .dv-lvsz { flex-direction:row; align-items:baseline; gap:6px; flex:1 1 calc(100% - 46px); margin-left:46px; }
  .dv-lvact { flex:1 1 calc(100% - 46px); margin-left:46px; justify-content:flex-start; }
  .dv-lvr .rec-btn { padding:6px 10px; }
  .dv-lvr { position:relative; }
  .dv-lvr .dv-sh-who { padding-right:36px; }
  .dv-lvr .rec-btnq.dv-lvdel { width:32px; height:32px; position:absolute; top:10px; right:0; }
  .dv-set-imp .dv-input { flex:1 1 100%; }
  .dv-set-imp .rec-tabs { flex:1 1 auto; }
  .dv-set-imp .rec-tabs .rec-tab { flex:1; justify-content:center; }
  .dv-imp-card { padding:12px; }
  .dv-imp-list li { flex-wrap:wrap; }
  .dv-imp-lt { flex:1 1 calc(100% - 120px); }
}
/* Drive v1.4: the Google Drive card (Sync | Import once), the connect form, connected-folder rows, sync sheets.
   The form itself folds to one column by container width (drive.css, @container dvgd), so 1024 + sidebar is covered there. */
@media (max-width: 768px) {
  .dv-sy-form { grid-template-columns:minmax(0,1fr); }
  .dv-sy-go { flex-direction:column; align-items:stretch; }
  .dv-sy-go .rec-btn1 { margin-left:0; justify-content:center; }
  .dv-sy-go .dv-sy-note { flex:none; }
  .dv-sy-guard { grid-template-columns:auto minmax(0,1fr); }
  .dv-sy-guard .dv-in-a { grid-column:2; justify-self:start; }
  .dv-sy-runs li.dv-sy-run { grid-template-columns:minmax(0,1fr) auto; }
  .dv-sy-runs .dv-sy-rc { grid-column:1 / -1; grid-row:2; }
  .dv-syr { grid-template-columns:34px minmax(0,1fr) 32px; gap:0 10px; }
  .dv-syr-ic > svg { width:26px; height:26px; }
  .dv-syr-more.rec-btnq { width:32px; height:32px; }
  .dv-syr-n small { white-space:normal; }
  .dv-sy-ck { flex:1 1 100%; margin-left:40px; }
  .dv-sy-gsheet .dv-sh-foot, .dv-sy-csheet .dv-sh-foot { flex-wrap:wrap; }
  .dv-sy-gsheet .dv-sh-foot .rec-btn { flex:1 1 auto; justify-content:center; }
  .dv-set-gd .dv-gd-h .rec-tabs { flex:1 1 100%; }
  .dv-set-gd .dv-gd-h .rec-tab { flex:1; justify-content:center; }
}
/* phones: a connected-folder row is one column (the ⋯ floats top-right), so the guard note and the
   attention line span the full width */
@media (max-width: 480px) {
  .dv-syr { position:relative; grid-template-columns:minmax(0,1fr); }
  .dv-syr-ic { display:none; }
  .dv-syr-n { padding-right:36px; }
  .dv-syr-more.rec-btnq { position:absolute; top:8px; right:0; }
  .dv-sheet .dv-syr-more.rec-btnq { top:0; }
  .dv-sy-guard { grid-template-columns:auto minmax(0,1fr); }
  .dv-sy-errl { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .dv-sy-errl .dv-sy-again { grid-column:2; justify-self:start; margin:2px 0 0; }
  .dv-sy-ck { margin-left:0; flex:1 1 100%; }
  .dv-sy-ck .rec-btn { flex:1 1 0; justify-content:center; }
}
/* @@end drive@@ */

/* ---------- Marketing host, Team photos host ---------- */
/* @@end marketing@@ */