/* UI2 U7: day deep dives (#dd/...) and the Schedule & MTOs view. Scoped to html.ui2. No inline styles (CSP); bar widths arrive as
   --w / --x custom properties set through the CSSOM by deep-dives.js. Measure = charcoal, selected = blue, labor $ = plain yellow
   diamond, channels = one blue hue at three intensities (HOME_UI_GUIDE §11-13). */
html.ui2 .dd-page,html.ui2 .s2{--dd-ink:#23272B;--dd-sel:#1F6FEB;--dd-gold:#F5B700;--dd-ch1:#0B2E6B;--dd-ch2:#3D6FC4;--dd-ch3:#A9C4EE;--dd-gray:#9AA0A6;--dd-row:26px;--lane:96px;color:var(--ink)}
html.ui2 .dd-page{max-width:1100px;margin:0 auto;padding:16px 16px 96px}
html.ui2 .dd-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
html.ui2 .dd-crumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}
html.ui2 .dd-crumbs li+li::before{content:"/";color:#A8ABB0}
html.ui2 .dd-crumbs a{color:var(--muted)}
html.ui2 .dd-crumbs [aria-current]{color:var(--ink);font-weight:650}
/* LAB-21: same phone gutters as the report pages (8px + 4px), not 34px. */
@media (max-width:640px){html.ui2 main:has(#ui2-view .dd-page),html.ui2 main:has(#ui2-view .s2){padding-left:8px;padding-right:8px}html.ui2 .dd-page{padding:8px 4px 96px}}
html.ui2 .dd-titlerow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:8px 0 12px}
html.ui2 .dd-title{font-size:26px;line-height:1.2;margin:0;letter-spacing:-.01em;flex:1 1 260px}
html.ui2 .dd-daynav{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);padding:2px}
html.ui2 .dd-step{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;border-radius:999px;font-size:22px;line-height:1;color:var(--ink);text-decoration:none}
html.ui2 .dd-step:hover{background:var(--surface-2)}html.ui2 .dd-step.is-off{opacity:.3}
html.ui2 .dd-daynav-d{min-width:78px;text-align:center;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
html.ui2 .dd-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
html.ui2 .dd-field{display:block;margin-bottom:12px}
html.ui2 .dd-field select{background:var(--surface);max-width:320px}
html.ui2 .dd-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px}
html.ui2 .dd-cell{padding:10px 12px;border-left:1px solid var(--line);min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:2px}
html.ui2 .dd-cell:first-child{border-left:0}
html.ui2 .dd-k{display:block;font-size:13px;color:var(--muted)}
html.ui2 .dd-v{display:block;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ui2 .dd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:12px;min-width:0}
html.ui2 .dd-card h2{font-size:18px;margin:0 0 10px}
html.ui2 .dd-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
/* Obvious toggle switch (§13): pill, sliding knob, filled when on. */
html.ui2 .dd-switch{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:14px;font-weight:650}
html.ui2 .dd-switch .dd-knob{position:relative;width:34px;height:20px;border-radius:999px;background:#C9CDD2;transition:background .15s}
html.ui2 .dd-switch .dd-knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
html.ui2 .dd-switch[aria-checked="true"]{border-color:var(--dd-ch1);color:var(--dd-ch1)}
html.ui2 .dd-switch[aria-checked="true"] .dd-knob{background:var(--dd-ch1)}
html.ui2 .dd-switch[aria-checked="true"] .dd-knob::after{transform:translateX(14px)}
html.ui2 .dd-switch:disabled{opacity:.55;cursor:not-allowed}
html.ui2 .dd-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:2px;background:var(--surface-2)}
html.ui2 .dd-seg button{min-height:30px;padding:4px 12px;border:0;border-radius:999px;background:transparent;font-size:14px}
html.ui2 .dd-seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
html.ui2 .dd-note{font-size:13px;color:var(--muted);margin:4px 0 8px}
html.ui2 .dd-banner{font-size:14px;background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);padding:8px 10px;margin:8px 0}
html.ui2 .dd-empty{color:var(--muted);padding:16px 0}
html.ui2 .dd-muted{color:var(--muted);font-size:13px}
/* Hour chart: label | bar track | right lane. */
html.ui2 .dd-chart-head,html.ui2 .dd-row,html.ui2 .s2-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:8px}
html.ui2 .dd-chart.has-lane .dd-chart-head,html.ui2 .dd-chart.has-lane .dd-row,html.ui2 .dd-chart.has-lane .s2-row{grid-template-columns:44px minmax(0,1fr) var(--lane)}
html.ui2 .dd-chart-head{font-size:13px;font-weight:700;padding-bottom:4px}
html.ui2 .dd-chart-head .dd-col-h:first-child{grid-column:2}
html.ui2 .dd-lane-h{text-align:right}
html.ui2 .dd-col-sub{display:inline-flex;align-items:center;gap:4px;margin-left:10px;font-weight:500;font-size:12px;color:var(--muted)}
html.ui2 .dd-col-sub .dd-diamond-key{margin:0 3px 0 2px;top:auto;vertical-align:baseline}
html.ui2 .dd-empty p{margin:0 0 6px}html.ui2 .dd-empty-total strong{font-size:20px;color:var(--ink)}
html.ui2 .dd-chart.is-lines .dd-lane-h{text-align:center}
html.ui2 .dd-rows{position:relative}
html.ui2 .dd-row,html.ui2 .s2-row{height:var(--dd-row);min-height:0;width:100%;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;font-weight:400;text-align:left}
html.ui2 .dd-row:hover{background:var(--surface-2)}
html.ui2 .dd-row.is-selected{background:var(--info-bg)}
html.ui2 .dd-h{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
html.ui2 .dd-track{position:relative;height:16px;display:block}
html.ui2 .dd-bar{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w,0%) * .82);background:var(--dd-ink);border-radius:3px;display:flex;overflow:hidden}
html.ui2 .dd-row.is-selected .dd-bar:not(.dd-bar-split){background:var(--dd-sel)}
html.ui2 .dd-bar-gray{background:var(--dd-gray)}
html.ui2 .dd-bar-split{background:transparent;gap:1px}
html.ui2 .dd-part{display:block;height:100%;flex:0 0 auto;width:var(--w,0%)}
html.ui2 .dd-ch-mto{background:var(--dd-ch1)}html.ui2 .dd-ch-retail{background:var(--dd-ch2)}html.ui2 .dd-ch-third_party{background:var(--dd-ch3)}
html.ui2 .dd-val{position:absolute;top:50%;left:calc(var(--x,0%) * .82);transform:translate(6px,-50%);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
html.ui2 .dd-diamond{position:absolute;top:50%;left:calc(var(--x,0%) * .82);width:9px;height:9px;background:var(--dd-gold);transform:translate(-50%,-50%) rotate(45deg);z-index:1}
html.ui2 .dd-diamond-key{position:relative;display:inline-block;left:auto;top:auto;transform:rotate(45deg);margin:0 2px 0 3px;vertical-align:middle}
html.ui2 .dd-count{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
html.ui2 .dd-lines{position:absolute;top:0;right:0;bottom:0;height:100%;width:var(--lane);overflow:visible;pointer-events:none}
html.ui2 .dd-line{stroke-width:4px;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.ui2 .dd-line.is-draft{stroke-dasharray:4 3}
html.ui2 .dd-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin:10px 0 0}
html.ui2 .dd-legend span{display:inline-flex;align-items:center;gap:6px}
html.ui2 .dd-sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--role,var(--dd-gray))}
html.ui2 .dd-sw.dd-ch-mto{background:var(--dd-ch1)}html.ui2 .dd-sw.dd-ch-retail{background:var(--dd-ch2)}html.ui2 .dd-sw.dd-ch-third_party{background:var(--dd-ch3)}
html.ui2 .dd-detail{font-size:14px;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line)}
html.ui2 .dd-mix,html.ui2 .dd-shifts{list-style:none;margin:0;padding:0}
html.ui2 .dd-mix li{display:grid;grid-template-columns:16px 1fr auto 44px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
html.ui2 .dd-mix li:first-child{border-top:0}
html.ui2 .dd-mix .dd-muted{text-align:right}
html.ui2 .dd-shifts{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
html.ui2 .dd-card .dd-shifts{border:0}
html.ui2 .dd-shifts li{display:grid;grid-template-columns:4px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
html.ui2 .dd-shifts li:first-child{border-top:0}
html.ui2 .dd-shifts li span .dd-muted{display:block}
html.ui2 .dd-swbar{display:block;width:4px;height:22px;border-radius:2px;background:var(--role,var(--dd-gray))}
html.ui2 .dd-time{white-space:nowrap}
html.ui2 .dd-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
html.ui2 .dd-pill{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);text-decoration:none;font-weight:650;font-size:15px}
/* Desktop: mobile design widened, two columns from 1100px. */
@media (min-width:1100px){
 html.ui2 .dd-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:start}
 html.ui2 .dd-layout>.dd-side{grid-row:span 3}
 html.ui2 .dd-layout>.dd-card{grid-column:2}
 html.ui2 .dd-page,html.ui2 .s2{--dd-row:30px;--lane:140px}
}
/* Schedule & MTOs */
html.ui2 .s2{margin-bottom:16px}
html.ui2 .s2-title{font-size:26px;margin:0 0 12px}
html.ui2 .s2-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;max-width:640px}
html.ui2 .s2-controls select{max-width:none}
html.ui2 .s2-hint{margin:0 0 8px}
html.ui2 .s2-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:14px;max-width:760px}
html.ui2 .s2-day{display:flex;flex-direction:column;align-items:center;gap:0;min-height:0;padding:6px 2px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);font-weight:400;line-height:1.25}
html.ui2 .s2-day .s2-dow{font-weight:700;font-size:13px}
html.ui2 .s2-day .s2-md{font-size:11px;color:var(--muted)}
html.ui2 .s2-day .s2-total{font-size:14px}
html.ui2 .s2-day.is-selected{background:var(--ink);color:#fff;border-color:var(--ink)}
html.ui2 .s2-day.is-selected .s2-md{color:#ddd}
html.ui2 .s2-day-title{font-size:18px;margin:0}
html.ui2 .s2-card{margin-top:10px;max-width:760px}
html.ui2 .s2-bar{background:#0B4FBF}
html.ui2 .s2-bar.is-forecast{background:#9DB8E8}
html.ui2 .s2-sub{font-size:18px;margin:16px 0 8px}
html.ui2 .s2-chart .dd-lines{width:var(--lane)}
html.ui2 .s2 .dd-shifts{max-width:760px}
html.ui2 .s2-view-toggle{display:flex;gap:8px;margin:8px 0 12px}
html.ui2 .s2-view-toggle button{min-height:40px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}
html.ui2 .s2-view-toggle button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
html.ui2 .s2-view-toggle button:focus-visible{outline:2px solid #004AB5;outline-offset:2px}
html.ui2 .s2-week-tables{grid-template-columns:1fr;gap:16px}
html.ui2 .s2-week-grid{min-width:0}
html.ui2 .s2-week-grid h4{margin:8px 0 4px}
html.ui2 .s2-week-grid>p{margin:0 0 6px;font-size:12px}
html.ui2 .s2-week-grid .sm-table{display:block;width:100%;max-width:100%;max-height:65vh}
/* Phone: the legacy headcount and MTO heat tables are desktop-only (§8). */
@media (max-width:640px){
 html.ui2 [data-ui2-schedule]:not([hidden])~[data-schedule-mto]{display:none}
 html.ui2 .dd-title{font-size:24px}
 html.ui2 .dd-v{font-size:18px}
}

/* LAB-21/25: phone breadcrumb on a deep dive is "< back / here" like the report pages. */
@media (max-width:640px){
 html.ui2 .dd-crumbs ol{flex-wrap:nowrap;gap:4px;overflow:hidden}
 html.ui2 .dd-crumbs li:not(:nth-last-child(-n+2)){display:none}
 html.ui2 .dd-crumbs li:nth-last-child(2)::before{display:none}
 html.ui2 .dd-crumbs li:nth-last-child(2) a::before{content:"ƒ9";margin-right:6px;font-size:18px;line-height:1}
 html.ui2 .dd-crumbs a{display:inline-flex;align-items:center;min-height:40px}
}
@media (max-width:500px){
 html.ui2 .dd-page{--dd-row:40px}
 html.ui2 .dd-seg button{min-height:40px}
}
html.ui2 .dd-row:focus-visible,html.ui2 .dd-step:focus-visible,html.ui2 .dd-pill:focus-visible,html.ui2 .dd-seg button:focus-visible,html.ui2 .dd-switch:focus-visible,html.ui2 .dd-field select:focus-visible{outline:2px solid #004AB5;outline-offset:2px}
@media (prefers-reduced-motion:reduce){html.ui2 .dd-switch .dd-knob,html.ui2 .dd-switch .dd-knob::after{transition:none!important}}

/* FB6-SCHED: Schedule & MTOs shows up to 5 narrow day columns (2 on phone) beside one hour gutter, with arrows that page the group. */
html.ui2 .s2-card{max-width:none}
html.ui2 .s2-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
html.ui2 .s2-range{font-weight:650;font-size:14px;text-align:center;flex:1}
html.ui2 .s2-arrow{min-width:44px;min-height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:18px;line-height:1;font-weight:600;cursor:pointer;color:var(--ink)}
html.ui2 .s2-arrow:disabled{opacity:.35;cursor:default}
html.ui2 .s2-arrow:focus-visible{outline:2px solid #004AB5;outline-offset:2px}
html.ui2 .s2-day.is-in-view:not(.is-selected){box-shadow:inset 0 -3px 0 #0B4FBF}
html.ui2 .s2m{--lane:44px;--n:5;display:grid;grid-template-columns:36px repeat(var(--n),minmax(0,1fr));column-gap:6px}
html.ui2 .s2m[data-n="4"]{--n:4}html.ui2 .s2m[data-n="3"]{--n:3;--lane:52px}html.ui2 .s2m[data-n="2"]{--n:2;--lane:60px}html.ui2 .s2m[data-n="1"]{--n:1;--lane:72px}
html.ui2 .s2m-gutter,html.ui2 .s2m-col{min-width:0}
html.ui2 .s2m-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;height:42px;min-height:0;padding:2px;border:1px solid var(--line-2);border-radius:var(--r-sm,8px);background:var(--surface);font:inherit;line-height:1.15;cursor:pointer;color:var(--ink)}
html.ui2 .s2m-gutter .s2m-head{display:block;border:0;background:none;cursor:default}
html.ui2 .s2m-head strong{font-size:13px}
html.ui2 .s2m-head small{font-size:11px;color:var(--muted)}
html.ui2 .s2m-col.is-selected .s2m-head{background:var(--ink);color:#fff;border-color:var(--ink)}
html.ui2 .s2m-col.is-selected .s2m-head small{color:#ddd}
html.ui2 .s2m-head:focus-visible{outline:2px solid #004AB5;outline-offset:2px}
html.ui2 .s2m-rows{position:relative;margin-top:4px}
html.ui2 .s2m-row{display:block;position:relative;height:var(--dd-row);border-top:1px solid var(--line)}
html.ui2 .s2m-gutter .s2m-row{display:flex;align-items:center;justify-content:flex-end}
html.ui2 .s2m-col.has-lane .s2m-row{padding-right:calc(var(--lane) + 6px)}
html.ui2 .s2m-track{position:absolute;inset:0 auto 0 0;width:100%;height:auto}
html.ui2 .s2m-col.has-lane .s2m-track{width:calc(100% - var(--lane) - 6px)}
/* Bars hug the bottom of the row; the value sits ABOVE the bar end (house rule: labels above bars). */
html.ui2 .s2m .dd-bar{top:auto;bottom:3px;height:9px;left:0;border-radius:2px}
html.ui2 .s2m .dd-val{top:2px;left:max(1.6em,calc(var(--x,0%) * .82));transform:translateX(-100%);font-size:11px;line-height:1;color:var(--ink);padding-right:1px}
html.ui2 .s2m .dd-lines{top:0;right:0;height:100%;width:var(--lane)}
html.ui2 .s2m .dd-line{stroke-width:6px}
html.ui2 .s2m .dd-h{font-size:11px}
@media (min-width:1100px){html.ui2 .s2{--dd-row:32px}}
@media (max-width:640px){html.ui2 .s2{--dd-row:42px}html.ui2 .s2-controls{max-width:none}html.ui2 .s2-week-tables{grid-template-columns:1fr}html.ui2 .s2m[data-n="1"]{--lane:82px}}
/* Weekly Schedule needs the report content width so both seven-day matrices can be read without desktop inner scrolling. */
@media (min-width:700px){html.ui2 .u2r-host.ui2-sched-hub:has(.s2[data-s2-view="week"]) .s2-week-tables .sm-table table{width:100%;min-width:0}}
@media (min-width:1100px){html.ui2 .u2r-host.ui2-sched-hub:has(.s2[data-s2-view="week"]) .u2r-grid{display:flex;flex-direction:column}
 html.ui2 .s2-week-tables{grid-template-columns:repeat(2,minmax(0,1fr))}
 html.ui2 .u2r-host.ui2-sched-hub:has(.s2[data-s2-view="week"]) .u2r-main,html.ui2 .u2r-host.ui2-sched-hub:has(.s2[data-s2-view="week"]) .u2r-side{display:contents}
 html.ui2 .u2r-host.ui2-sched-hub:has(.s2[data-s2-view="week"]) .u2r-sections{order:1}
 html.ui2 .u2r-host.ui2-sched-hub:has(.s2[data-s2-view="week"]) .u2r-sum{order:2}}
/* FB6-SCHED: on the Schedule hub, Schedule & MTOs is the first card (desktop: top of the left column; phone: first, then the four numbers). */
@media (max-width:1099px){
 html.ui2 .u2r-host.ui2-sched-hub .u2r-sections{display:contents}
 html.ui2 .u2r-host.ui2-sched-hub .u2r-sections>.u2r-card:first-child{order:0}
 html.ui2 .u2r-host.ui2-sched-hub .u2r-sections>.u2r-card:not(:first-child){order:3}
}