/* =====================================================================================
   Agent B - DISPATCH and TECHOS in Liquid Glass.
   DispatchOS's own personality on top of the shared glass system: the violet module accent
   (data-module="dispatch"), quiet information-dense job cards with a status edge (DispatchOS
   dispatchos.css .jobcard), job-type washes from the sheet legend, pill toolbar, a glass board
   frame, and the job sheet as a floating glass side sheet. TechOS is a phone app: navy glass
   header, big touch targets, one lit step, a glass dock at the bottom.
   Only dispatch / field selectors live here.
   ===================================================================================== */

/* ---------------------------------------------------------------- page + module header */
main[data-module="dispatch"] .dx { background: transparent; }
.dx-tabsrow, .dxp-head { min-height: 52px; gap: 12px; padding: 6px 16px; border-bottom: 0;
  background: rgb(255 255 255 / .52); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 -1px 0 var(--line), 0 1px 0 rgb(255 255 255 / .6); }
.dxp-head { margin-bottom: 18px; }
.dx-tabswrap { gap: 10px; }
.dx-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-right: 6px; font-size: 15px; letter-spacing: -.02em; color: var(--ink); }
.dx-brand .mod-tile { width: 28px; height: 28px; border-radius: 8px; }
.dx-tabs { gap: 2px; padding: 3px; border-radius: 999px; background: rgb(var(--sg-blue-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); flex: none; }
.dx-tabs a { height: 30px; padding: 0 14px; border-radius: 999px; border-bottom: 0; color: var(--muted); font-size: 13px; transition: background .18s, color .18s, box-shadow .18s; }
.dx-tabs a:hover { color: var(--ink); background: rgb(255 255 255 / .5); }
.dx-tabs a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(var(--sg-blue-rgb) / .12), 0 4px 10px rgb(var(--sg-blue-rgb) / .1); }
.dx-tabs a.on .ico { color: var(--mod); }
.dx-tooltab > button { height: 34px; padding: 0 14px; border-radius: 999px; border-bottom: 0; background: #fff; color: var(--ink); font-size: 13px;
  box-shadow: 0 1px 2px rgb(var(--sg-blue-rgb) / .12), 0 4px 10px rgb(var(--sg-blue-rgb) / .1), inset 0 0 0 1px rgb(var(--mod-rgb) / .25); }
.dx-tooltab > button .ico:first-child { color: var(--mod); }
.dx-tooltab > button:active { transform: scale(.97); }

/* banners (SolarGrade nudge, close-out, pick mode) */
.dx-pickbar { border: 0; border-radius: 14px; padding: 8px 14px; gap: 8px; background: rgb(var(--mod-rgb) / .09); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .2); color: var(--ink); }
.dx-pickbar > .ico:first-child { color: var(--mod); flex: none; }
.dx-pickbar.warn { background: rgb(var(--sg-gold-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--sg-gold-rgb) / .4); }
.dx-pickbar.warn > .ico:first-child { color: var(--sg-gold-deep); }
.dx > .dx-pickbar { margin: 10px 16px 0; }
.dx-pickbar .icon-btn { border-radius: 999px; }

/* ---------------------------------------------------------------- toolbar: pills and a segmented view switch */
.dx-head { background: transparent; padding: 12px 16px 10px; gap: 10px; }
.dx-nav { gap: 10px; flex-wrap: wrap; }
.dx-stepper { display: inline-flex; align-items: center; padding: 3px; gap: 1px; border-radius: 999px; background: rgb(255 255 255 / .74); box-shadow: var(--glass-edge), var(--sh-1); }
.dx-stepper .ibtn, .dx-stepper .btn { border: 0; background: transparent; height: 30px; border-radius: 999px; box-shadow: none; }
.dx-stepper .ibtn { width: 30px; } .dx-stepper .btn { padding: 0 14px; font-size: 13px; }
.dx-stepper .ibtn:hover, .dx-stepper .btn:hover { background: rgb(var(--sg-blue-rgb) / .07); }
.dx-head input[type=date] { height: 36px; min-height: 36px; border: 0; border-radius: 999px; padding: 0 14px; font-size: 13px; background: rgb(255 255 255 / .74); box-shadow: var(--glass-edge), var(--sh-1); font-variant-numeric: tabular-nums; }
.dx-range { font-size: 15px; font-weight: 650; letter-spacing: -.015em; margin-left: 2px; font-variant-numeric: tabular-nums; }
.dx-kpi { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgb(var(--mod-rgb) / .1); color: var(--mod); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .18); font-variant-numeric: tabular-nums; }
.dx-kpi b { font-weight: 750; } .dx-kpi.all { background: #EAF8EE; color: #15803d; box-shadow: inset 0 0 0 1px rgb(22 163 74 / .25); }
main[data-module="dispatch"] .seg { border: 0; overflow: visible; padding: 3px; gap: 2px; border-radius: 999px; background: rgb(var(--sg-blue-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
main[data-module="dispatch"] .seg button { height: 30px; padding: 0 15px; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; transition: background .18s, color .18s, box-shadow .18s; }
main[data-module="dispatch"] .seg button:hover { color: var(--ink); }
main[data-module="dispatch"] .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(var(--sg-blue-rgb) / .14), 0 4px 10px rgb(var(--sg-blue-rgb) / .1); }
.dx-chip { height: 32px; padding: 0 13px; border-radius: 999px; gap: 7px; cursor: pointer; background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-weight: 500; user-select: none; transition: background .18s, box-shadow .18s, color .18s; }
.dx-chip input { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: var(--mod); }
.dx-chip:hover { background: rgb(255 255 255 / .85); }
.dx-chip.on { background: rgb(var(--mod-rgb) / .1); color: var(--mod); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .35); }
.dx-chip:active { transform: scale(.97); }
.dx-head > div > .btn { height: 36px; border: 0; padding: 0 16px; background: rgb(255 255 255 / .74); box-shadow: var(--glass-edge), var(--sh-1); }
.dx-head > div > .btn .ico:first-child { color: var(--mod); }

/* ---------------------------------------------------------------- body: queue rail | board | job sheet */
.dx-body { gap: 14px; padding: 0 16px 14px; grid-template-columns: 318px minmax(0, 1fr) auto; }
.dx-queue { grid-template-rows: auto auto minmax(0, 1fr); border-right: 0; border-radius: var(--r-card); overflow: hidden;
  background: rgb(255 255 255 / .62); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--glass-edge), var(--sh-1); }
.dx-qtabs { margin: 12px 12px 0; padding: 3px; gap: 2px; border-radius: 999px; background: rgb(var(--sg-blue-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
.dx-qtabs .tab { flex: 1; justify-content: center; height: 30px; border: 0; border-radius: 999px; font-size: 11px; transition: background .18s, color .18s, box-shadow .18s; }
.dx-qtabs .tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(var(--sg-blue-rgb) / .12), 0 4px 10px rgb(var(--sg-blue-rgb) / .08); }
.dx-qtabs .tab span:first-child { font-variant-numeric: tabular-nums; }
.dx-qtools { padding: 10px 12px 6px; }
.dx-qtools input, .dx-qtools select { height: 32px; min-height: 32px; border: 0; border-radius: 999px; padding: 0 14px; background: rgb(255 255 255 / .78); box-shadow: inset 0 0 0 1px var(--line-2); }
.dx-qtools select { width: 128px; padding-right: 8px; }
.dx-qlist { padding: 0 12px 14px; }
.dx-qhd { padding: 12px 4px 6px; letter-spacing: .06em; }
.dx-fresh { padding: 0 4px 8px; }
.dx-q { border: 0; border-radius: 14px; padding: 10px 12px 10px 15px; margin-bottom: 8px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .07), 0 1px 2px rgb(var(--sg-blue-rgb) / .06), 0 4px 12px rgb(var(--sg-blue-rgb) / .05);
  transition: transform .14s cubic-bezier(.2, .7, .2, 1), box-shadow .14s; }
.dx-q::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #2f6fed; }
.dx-q.stale::before { background: #dc2626; } .dx-q.sched::before { background: #16a34a; }
.dx-q:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .09), 0 2px 6px rgb(var(--sg-blue-rgb) / .08), 0 12px 26px rgb(var(--sg-blue-rgb) / .1); }
.dx-q:active { transform: scale(.985); }
.dx-q.sel { box-shadow: 0 0 0 2px var(--mod), 0 10px 24px rgb(var(--mod-rgb) / .2); }
.dx-q .row1 b { font-size: 12px; font-variant-numeric: tabular-nums; }
.dx-q .who { font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; margin: 3px 0 2px; }
.dx-q .tag { height: 18px; display: inline-flex; align-items: center; border: 0; border-radius: 6px; padding: 0 6px; background: rgb(var(--sg-blue-rgb) / .06); font-weight: 600; }
.dx-q .tag.bad { background: #FCEBEC; color: #DC2626; }
.dx-q .miss { color: #B45309; }
.dx-q .dx-rm { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; }
.dx-q .dx-rm:hover { background: #FCEBEC; }
.dx-q .dx-qsched { right: 10px; bottom: 9px; height: 26px; padding: 0 11px; border: 0; border-radius: 999px; background: rgb(var(--mod-rgb) / .1); color: var(--mod); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .2); }
.dx-q .dx-qsched:hover { background: var(--mod); color: #fff; }
.dx-orphan { border-radius: 12px; padding: 8px 10px; }
.dx-next { border: 0; border-radius: 18px; padding: 12px 14px 12px; margin: 4px 0 6px;
  background: linear-gradient(135deg, rgb(var(--mod-rgb) / .13), rgb(255 255 255 / .82) 70%); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .22), 0 6px 18px rgb(var(--mod-rgb) / .1); }
.dx-next-hd { color: var(--mod); letter-spacing: .06em; }
.dx-next-t { font-size: 14px; letter-spacing: -.01em; margin: 6px 0 4px; }
.dx-next-fit ul { margin: 6px 0 10px; } .dx-next-fit li { padding: 1px 0; } .dx-next-fit .ok { color: #15803d; }
.dx-next .btn { height: 30px; font-size: 12.5px; }

/* ---------------------------------------------------------------- the board frame */
.dx-grid-wrap { padding: 0 2px 6px; }
.dx-grid { width: 100%; min-width: min-content; border: 0; border-radius: 20px; overflow: clip; background: rgb(255 255 255 / .56); box-shadow: var(--glass-edge), var(--sh-1); }
.dx-corner, .dx-day { background: rgb(248 249 253 / .9); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-right: 1px solid var(--line); box-shadow: inset 0 -1px 0 var(--line-2), 0 6px 10px -8px rgb(var(--sg-blue-rgb) / .2); padding: 9px 10px; }
.dx-corner { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: flex-start; }
.dx-day.we { background: rgb(242 243 248 / .92); }
.dx-day.today { background: linear-gradient(180deg, rgb(var(--mod-rgb) / .13), rgb(var(--mod-rgb) / .06)), rgb(250 249 255 / .94); box-shadow: inset 0 -2px 0 var(--mod), 0 6px 10px -8px rgb(var(--mod-rgb) / .3); }
.dx-daybtn { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.dx-daybtn:hover { color: var(--mod); }
main[data-module="dispatch"] .today-pill { background: var(--mod); color: #fff; font-weight: 700; padding: 1px 7px; vertical-align: 1px; }
.dx-day .cap { font-variant-numeric: tabular-nums; }
.dx-crew { background: rgb(252 252 254 / .95); padding: 10px 10px 9px; border-bottom: 1px solid var(--line); gap: 2px; justify-content: flex-start; }
.dx-crew.gone { background: #FFF7F7; }
.dx-crewbtn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 2px; margin: -2px; border: 0; background: none; border-radius: 10px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.dx-crewbtn:hover { background: rgb(var(--mod-rgb) / .07); }
.dx-crewbtn:active { transform: scale(.98); }
.dx-crewtx { display: flex; flex-direction: column; min-width: 0; }
.dx-crewtx b { font-size: 13px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-crewtx .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(145deg, hsl(var(--h, 260) 58% 64%), hsl(var(--h, 260) 52% 46%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 6px hsl(var(--h, 260) 50% 40% / .25); }
.dx-av.lg { width: 40px; height: 40px; font-size: 13px; }
.dx-load { height: 4px; border-radius: 3px; background: rgb(var(--sg-blue-rgb) / .08); overflow: hidden; margin-top: 8px; }
.dx-load i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--mod-rgb) / .7), var(--mod)); transition: width .3s; }
.dx-load.over i { background: #dc2626; }
.dx-loadtx { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.dx-cell { padding: 6px; gap: 6px; min-height: 84px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dx-cell.past { background: rgb(var(--sg-blue-rgb) / .028); }
.dx-cell.flagged { background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(var(--sg-blue-rgb) / .055) 6px 12px); }
.dx-cell.pickable:hover { outline: 2px dashed var(--mod); outline-offset: -4px; border-radius: 10px; }
.dx-cell.hint { outline: 2px dashed var(--mod); outline-offset: -4px; background: rgb(var(--mod-rgb) / .08); }
.dx-cellmenu { right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s; }
.dx-cell:hover .dx-cellmenu, .dx-cellmenu:focus-visible { opacity: 1; }
.dx-cellmenu:hover { background: rgb(var(--mod-rgb) / .12); color: var(--mod); }
@media (hover: none) { .dx-cellmenu { opacity: .45; } }
.dx-flag { border-radius: 999px; padding: 2px 9px; font-size: 11px; background: #FFF1D6; color: #8A5A00; box-shadow: inset 0 0 0 1px #F6D79A; }
button.dx-daycell, .dx-daycell { border: 0; border-radius: 999px; padding: 1px 8px; background: rgb(var(--sg-blue-rgb) / .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.dx-tgroup { background: rgb(var(--mod-rgb) / .06); border-bottom: 1px solid var(--line-2); padding: 7px 12px; }
.dx-tgroup b { color: var(--mod); }
.dx-idle { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin: 0 4px 10px; font-size: 12px; color: var(--muted); }
.dx-idle > .ico { color: var(--mod); margin-right: 2px; } .dx-idle .link { font-size: 12px; }

/* ---------------------------------------------------------------- job cards: crisp, status edge, job-type wash */
.dx-card { border: 0; border-radius: 10px; padding: 6px 8px 6px 11px; gap: 1px; overflow: hidden; background: linear-gradient(100deg, var(--jt, #fff) 0%, #fff 78%);
  box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .08), 0 1px 2px rgb(var(--sg-blue-rgb) / .06), 0 4px 12px rgb(var(--sg-blue-rgb) / .05);
  transition: transform .12s cubic-bezier(.2, .7, .2, 1), box-shadow .12s; }
.dx-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--st, #8e9aab); }
.dx-card:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .1), 0 2px 6px rgb(var(--sg-blue-rgb) / .08), 0 12px 26px rgb(var(--sg-blue-rgb) / .12); }
.dx-card:active { transform: scale(.985); }
.dx-card.confirmed { box-shadow: inset -3px 0 0 #16a34a, 0 0 0 1px rgb(var(--sg-blue-rgb) / .08), 0 1px 2px rgb(var(--sg-blue-rgb) / .06), 0 4px 12px rgb(var(--sg-blue-rgb) / .05); }
.dx-card.active { box-shadow: 0 0 0 2px var(--mod), 0 10px 24px rgb(var(--mod-rgb) / .25); outline: 0; }
.dx-card.bad { background: linear-gradient(100deg, #FCEBEC 0%, #fff 80%); box-shadow: 0 0 0 1.5px rgb(220 38 38 / .5), 0 4px 12px rgb(220 38 38 / .1); }
.dx-card.bad.active { box-shadow: 0 0 0 2px var(--mod), 0 0 0 4px rgb(220 38 38 / .35); }
.dx-card .t { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.dx-card .t .h { font-size: 11px; }
.dx-card .t .ico { width: 12px; height: 12px; } .dx-card.confirmed .t .ico:last-child { color: #16a34a; }
.dx-card .n { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.dx-card .s { font-size: 11px; color: var(--muted); }
.dx-card .dx-dot { width: 9px; height: 9px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(var(--sg-blue-rgb) / .1); transition: transform .12s; }
.dx-card .ft { gap: 4px; margin-top: 3px; }
.dx-card .seg, .dx-card .tag { height: 17px; display: inline-flex; align-items: center; padding: 0 6px; border: 0; border-radius: 6px; font-size: 10px; font-weight: 600; background: rgb(var(--sg-blue-rgb) / .065); color: var(--muted); overflow: visible; }
.dx-card .seg.heat { background: #FFF1D6; color: #8A5A00; }
.dx-card .tag.bad { background: #DC2626; color: #fff; }
.dx-card.s-Completed { opacity: .72; } .dx-card.s-Cancelled { opacity: .5; }
.dx-tbd { border-radius: 6px; padding: 1px 6px; font-size: 10px; background: #FFF1D6; color: #8A5A00; letter-spacing: .02em; }
.dx-dsp { height: 20px; padding: 0 9px; border: 0; border-radius: 999px; font-size: 10.5px; color: #fff; background: linear-gradient(180deg, rgb(var(--mod-rgb) / .9), var(--mod)); box-shadow: 0 2px 6px rgb(var(--mod-rgb) / .35); }
.dx-dsp:hover { background: var(--mod); filter: brightness(1.08); }
.dx-dsp.off { background: rgb(var(--sg-blue-rgb) / .06); color: var(--faint); box-shadow: none; filter: none; }
.dx-card.dx-flash::after { border-color: var(--mod); border-radius: 12px; }

/* drag: the ghost lifts, the target cell lights in the module color, the drop preview is a glass card */
body > .dx-ghost { border-radius: 10px; opacity: .96; background: linear-gradient(100deg, var(--jt, #fff) 0%, #fff 78%);
  box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .1), 0 4px 10px rgb(var(--sg-blue-rgb) / .12), 0 22px 44px rgb(var(--sg-blue-rgb) / .28); }
body > .dx-ghost.settling { box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .1), 0 4px 12px rgb(var(--sg-blue-rgb) / .14); }
.dx-cell.dx-over { outline: 2px solid var(--mod); outline-offset: -3px; background: rgb(var(--mod-rgb) / .1); border-radius: 0; }
.dx-cell.dx-copy { outline: 2px dashed #16a34a; background: rgb(22 163 74 / .08); }
.dx-cell.dx-over[data-flag] { outline-color: #dc2626; background: rgb(220 38 38 / .07); }
body.dx-dragging .dx-cell[data-flag] { background: repeating-linear-gradient(135deg, rgb(var(--sg-blue-rgb) / .03) 0 6px, rgb(var(--sg-blue-rgb) / .09) 6px 12px); opacity: .75; }
.dx-dropprev { border-top: 0; border-radius: 14px; padding: 12px 13px 10px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); box-shadow: var(--sh-pop); overflow: hidden; }
.dx-dropprev::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #16a34a; }
.dx-dropprev.warn::before { background: #f59e0b; } .dx-dropprev.no::before { background: #dc2626; }
.dx-dropprev .dp-hd { letter-spacing: -.01em; }

/* ---------------------------------------------------------------- popovers, hover card, crew card */
.dx-pop, .dx-hover, .jx-menu { border-radius: 16px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: var(--sh-pop); }
.dx-pop { padding: 6px; }
.dx-pop > button[role=menuitem] { height: 32px; border-radius: 10px; padding: 0 10px; }
.dx-pop > button[role=menuitem]:hover, .dx-pop > button[role=menuitem]:focus-visible { background: rgb(var(--mod-rgb) / .09); }
.dx-pop > button.cur { color: var(--mod); }
.dx-pop .pop-hd { padding: 4px 6px 8px; font-size: 12.5px; }
.dx-pop .pop-flags button { height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: rgb(var(--sg-blue-rgb) / .06); box-shadow: inset 0 0 0 1px var(--line-2); }
.dx-pop .pop-flags button.cur { background: #FFF1D6; box-shadow: inset 0 0 0 1px #F0C873; }
.dx-pop .pop-row input { border-radius: 999px; padding: 0 12px; }
.dx-pop .pop-row .btn { height: 28px; }
.dx-hover { padding: 12px 14px; }
.dx-hover .hv-hd b { letter-spacing: -.01em; }
.cp-hd { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; }
.cp-hd b { font-size: 14px; letter-spacing: -.01em; }
.cp-load { padding: 0 6px 10px; }
.cp-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.cp-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-load .dx-load { height: 6px; margin: 6px 0 6px; }
.cp-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--line); }
.cp-acts .btn { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.cp-acts .btn .ico { color: var(--mod); }

/* ---------------------------------------------------------------- Needs action strip */
.dx-attn { border: 0; border-radius: 16px; margin-bottom: 10px; overflow: hidden; background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--glass-edge), var(--sh-1); }
.dx-attn.bad { background: linear-gradient(90deg, rgb(252 235 236 / .9), rgb(255 255 255 / .72) 60%); }
.dx-attn.warn { background: linear-gradient(90deg, rgb(255 246 223 / .9), rgb(255 255 255 / .72) 60%); }
.dx-attn-hd { padding: 10px 14px; gap: 10px; font-size: 13.5px; }
.dx-attn-hd b { letter-spacing: -.01em; }
.dx-attn-hd .n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--ink); color: #fff; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dx-attn-hd .must { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; background: #FCEBEC; color: #DC2626; }
.dx-attn-hd .rev { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; background: #FFF6DF; color: #B45309; font-weight: 600; }
.dx-attn-list { border-top: 1px solid var(--line); max-height: 240px; padding: 4px 6px 6px; }
.dx-attn-row { border-left: 0; border-radius: 10px; padding: 7px 10px; gap: 10px; }
.dx-attn-row.bad, .dx-attn-row.warn { color: var(--ink-2); }
.dx-attn-row.bad .k { color: #DC2626; } .dx-attn-row.warn .k { color: #B45309; }
.dx-attn-row .k { font-weight: 650; }
.dx-attn-row::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex: none; }
.dx-attn-row.bad::before { background: #dc2626; }
.dx-attn-row:hover { background: rgb(255 255 255 / .85); }
.dx-attn-row .btn { height: 26px; padding: 0 11px; }

/* legend */
.dx-legend { margin: 12px 4px 0; gap: 6px 14px; }
.dx-legend .lg-k { display: inline-flex; align-items: center; gap: 5px; margin-right: 0; }
.lg-jt { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.dx-legend .dx-tbd { margin-right: 2px; }

/* ---------------------------------------------------------------- month */
.dx-month { border: 0; border-radius: 20px; overflow: clip; background: rgb(255 255 255 / .58); box-shadow: var(--glass-edge), var(--sh-1); }
.dx-month .mh { background: rgb(248 249 253 / .9); padding: 9px 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.dx-month .md { padding: 5px 6px 6px; gap: 3px; min-height: 104px; }
.dx-month .md.out { background: rgb(var(--sg-blue-rgb) / .025); } .dx-month .md.we { background: rgb(var(--sg-blue-rgb) / .02); }
.dx-month .md.today { background: rgb(var(--mod-rgb) / .07); }
.dx-month .md-n { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 2px 4px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.dx-month .md-n:hover { background: rgb(var(--mod-rgb) / .1); }
.dx-month .md.today .md-n { color: var(--mod); }
.dx-month .md-chip { border: 0; border-left: 3px solid #2f6fed; border-radius: 6px; padding: 2px 6px; background: #fff; box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .07); }
.dx-month .md-chip:hover { box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .12), 0 4px 10px rgb(var(--sg-blue-rgb) / .1); }
.dx-month .md-chip.s-New { border-left-color: #8e9aab; } .dx-month .md-chip.s-Dispatched { border-left-color: #7c3aed; } .dx-month .md-chip.s-In-Progress { border-left-color: #f59e0b; }
.dx-month .md-chip.s-Completed { border-left-color: #16a34a; } .dx-month .md-chip.s-Cannot-Complete { border-left-color: #dc2626; }
.dx-month .md-more { color: var(--mod); font-weight: 600; }

/* ---------------------------------------------------------------- undo bar: dark glass pill */
.dx .undo-bar { border-radius: 999px; padding: 8px 8px 8px 18px; gap: 10px; background: rgb(16 22 43 / .86); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 14px 36px rgb(16 22 43 / .32); font-size: 13px; }
.dx .undo-bar.warn { background: rgb(107 68 0 / .9); }
.dx .undo-bar .link { color: #FDC459; }
.dx .undo-bar .ub-chip { height: 26px; padding: 0 11px; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; font-weight: 600; }
.dx .undo-bar .ub-chip:hover { background: rgb(255 255 255 / .2); text-decoration: none; }
.dx .undo-bar .icon-btn { border-radius: 999px; width: 28px; height: 28px; }
.dx:has(.dx-jsheet) .undo-bar { right: calc(440px + var(--sp-4)); }

/* ---------------------------------------------------------------- job sheet: floating glass side sheet */
.dx-jsheet { width: 420px; max-width: 100%; position: relative; z-index: var(--z-sheet); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0;
  border-radius: 24px; overflow: hidden; background: rgb(244 246 252 / .86); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--glass-edge), 0 2px 6px rgb(var(--sg-blue-rgb) / .08), -16px 0 48px rgb(var(--sg-blue-rgb) / .16); will-change: transform; }
.dx-jsheet::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--st, var(--mod)); z-index: 3; }
.dx-jsheet.dragging { cursor: grabbing; user-select: none; }
.jx-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 4; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.jx-grip span { width: 4px; height: 40px; border-radius: 3px; background: rgb(var(--sg-blue-rgb) / .16); transition: background .15s, height .2s; }
.jx-grip:hover span { background: rgb(var(--sg-blue-rgb) / .32); height: 52px; }
.dx-jsheet .jx-head { background: transparent; padding: 18px 16px 12px 22px; touch-action: pan-y; }
.dx-jsheet .jx-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; margin: 4px 0 6px; }
.dx-jsheet .jx-ref { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.dx-jsheet .jx-meta { gap: 6px; align-items: center; }
.dx-jsheet .jx-meta > span:first-child { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.dx-jsheet .jx-status { height: 24px; padding: 0 10px 0 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; font-size: 12px; }
.dx-jsheet .jx-status i { width: 8px; height: 8px; box-shadow: 0 0 0 2px rgb(255 255 255), 0 0 0 3px rgb(var(--sg-blue-rgb) / .08); }
.dx-jsheet .jx-links { margin-top: 8px; font-size: 12.5px; }
.dx-jsheet .jx-head .ibtn { width: 34px; height: 34px; border: 0; border-radius: 999px; flex: none; background: rgb(255 255 255 / .8); box-shadow: var(--glass-edge), var(--sh-1); }
.dx-jsheet .jx-head .ibtn:hover { background: #fff; }
.dx-jsheet .dx-sheet-body { padding: 2px 14px 14px 16px; overscroll-behavior: contain; }
.dx-jsheet .dx-sheet-body section { background: #fff; border: 0; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 0 0 1px rgb(var(--sg-blue-rgb) / .06), 0 1px 2px rgb(var(--sg-blue-rgb) / .05); }
.dx-jsheet .dx-sheet-body h3 { font-size: 11px; letter-spacing: .07em; margin: 0 0 8px; }
.dx-jsheet .kv { gap: 6px 14px; margin-top: 8px; font-size: 13px; }
.dx-jsheet .jx-when { font-size: 15px; letter-spacing: -.01em; margin-bottom: 4px; }
.dx-jsheet .jx-win { font-variant-numeric: tabular-nums; }
.dx-jsheet .jx-crew { height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: rgb(var(--sg-blue-rgb) / .06); }
.dx-jsheet .jx-crew.me { background: rgb(var(--mod-rgb) / .12); color: var(--mod); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .3); }
.dx-jsheet .jx-alert { border: 0; border-radius: 10px; padding: 7px 10px; background: #FFF6DF; box-shadow: inset 0 0 0 1px rgb(217 119 6 / .2); }
.dx-jsheet .jx-alert.bad { background: #FCEBEC; box-shadow: inset 0 0 0 1px rgb(220 38 38 / .2); }
.dx-jsheet .jx-addr { margin: 8px 0 2px; }
.dx-jsheet .jx-addr .btn { height: 28px; padding: 0 11px; }
.dx-jsheet .jx-sum { border-radius: 12px; padding: 10px 12px; gap: 10px; background: #EAF8EE; color: #15803d; }
.dx-jsheet .jx-ready.st-warn .jx-sum { background: #FFF6DF; color: #B45309; }
.dx-jsheet .jx-ready.st-blocked .jx-sum { background: #FCEBEC; color: #DC2626; }
.dx-jsheet .jx-sum b { font-size: 13.5px; letter-spacing: -.01em; }
.dx-jsheet .jx-fold, .dx-jsheet .dx-sheet-body .jx-fold { border-top: 1px solid var(--line); padding: 2px 0; }
.dx-jsheet section > .jx-fold:first-of-type { margin-top: 4px; }
.jx-fold > summary, .ed-sec > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 0; border-radius: 8px; }
.jx-fold > summary::-webkit-details-marker, .ed-sec > summary::-webkit-details-marker { display: none; }
.jx-fold > summary::before, .ed-sec > summary::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 5px 0 3px; border-right: 1.75px solid var(--faint); border-bottom: 1.75px solid var(--faint); transform: rotate(-45deg); transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.jx-fold[open] > summary::before, .ed-sec[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.jx-fold > summary:hover::before { border-color: var(--mod); }
.jx-fold > summary .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dx-jsheet .jx-foot { background: rgb(255 255 255 / .8); border-top: 0; box-shadow: inset 0 1px 0 var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 18px; gap: 8px; }
.dx-jsheet .jx-scope { gap: 1px; font-size: 12px; } .dx-jsheet .jx-scope b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dx-jsheet .jx-acts { gap: 8px; }
.dx-jsheet .jx-acts .btn { height: 36px; padding: 0 16px; }
.dx-jsheet .jx-acts .btn-primary { height: 40px; padding: 0 20px; font-size: 14px; }
.jx-menu { padding: 6px; bottom: 42px; min-width: 270px; }
.jx-menu > a, .jx-menu > button { border-radius: 10px; padding: 7px 10px; }
.jx-menu > a:hover, .jx-menu > button:hover { background: rgb(var(--mod-rgb) / .08); }
.jx-confirm { border-radius: 14px; padding: 10px 12px; gap: 8px; background: rgb(var(--mod-rgb) / .09); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .22); }
@media (max-width: 1280px) {
  .dx-body { grid-template-columns: 286px minmax(0, 1fr); }
  .dx > .dx-body > .dx-jsheet { position: absolute; right: 16px; top: 0; bottom: 14px; z-index: var(--z-sheet); }
}
@media (max-width: 980px) {
  .dx-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0 12px 12px; gap: 12px; }
  .dx-queue { max-height: 340px; border-bottom: 0; }
  .dx-grid-wrap { min-height: 420px; }
  .dx > .dx-body > .dx-jsheet { position: fixed; right: 8px; top: calc(var(--topbar-h, 48px) + 8px); bottom: 8px; width: min(440px, calc(100vw - 16px)); }
  .dx:has(.dx-jsheet) .undo-bar { right: 0; }
}
@media (max-width: 700px) {
  .dx-tabsrow, .dxp-head { padding: 6px 12px; }
  .dx-brand b { display: none; }
  .dx-head { padding: 10px 12px 8px; gap: 8px; }
  .dx-head .dx-range { width: auto; order: 0; font-size: 14px; }
  .dx-head input[type=date] { width: 140px; }
  .dx > .dx-pickbar { margin: 8px 12px 0; }
  .dx > .dx-body > .dx-jsheet { inset: calc(var(--topbar-h, 48px) + 6px) 0 0 0; width: 100%; border-radius: 22px 22px 0 0; background: rgb(244 246 252 / .97); }
  .dx-attn-hd { flex-wrap: wrap; row-gap: 6px; } .dx-attn-hd b, .dx-attn-hd .must, .dx-attn-hd .rev { white-space: nowrap; }
  main[data-module="dispatch"] .seg button { padding: 0 12px; } .dx-chip { padding: 0 11px; height: 30px; }
  .dx-head > div > .btn { height: 32px; padding: 0 12px; }
  .dx-crew { padding: 8px 6px; } .dx-crewbtn { gap: 6px; } .dx-av { width: 22px; height: 22px; font-size: 9px; }
  .dx-crewtx .small, .dx-loadtx { display: none; }
  .dx .undo-bar { border-radius: 18px; max-width: calc(100vw - 24px); flex-wrap: wrap; }
}
@media (prefers-reduced-transparency: reduce) {
  .dx-tabsrow, .dxp-head, .dx-queue, .dx-corner, .dx-day, .dx-attn, .dx-pop, .dx-hover, .jx-menu, .dx-dropprev, .dx-jsheet, .dx .undo-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dx-jsheet { background: #F4F6FC; } .dx-queue, .dx-attn, .dx-pop, .dx-hover, .jx-menu, .dx-dropprev { background: #fff; } .dx .undo-bar { background: #10162B; }
}
@media (prefers-contrast: more) {
  .dx-card, .dx-q, .dx-jsheet .dx-sheet-body section { box-shadow: 0 0 0 1px var(--line-2); }
  .dx-card::before { width: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-card, .dx-q, .dx-chip, .dx-crewbtn, .dx-tabs a { transition: none; }
  .dx-card:hover, .dx-q:hover { transform: none; }
}

/* ---------------------------------------------------------------- edit visit (modal) */
.cd-cell { border-radius: 9px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: #fff; transition: transform .1s; }
.cd-cell.on { background: #EAF8EE; color: #15803d; box-shadow: inset 0 0 0 1px rgb(22 163 74 / .3); }
.cd-cell.add { background: var(--mod); color: #fff; box-shadow: 0 2px 6px rgb(var(--mod-rgb) / .35); }
.cd-cell.rem { background: #FCEBEC; color: #DC2626; box-shadow: inset 0 0 0 1px rgb(220 38 38 / .3); }
.cd-sum { border-radius: 10px; background: rgb(var(--mod-rgb) / .08); padding: 7px 10px; }
.ed-sec { border-top: 1px solid var(--line); padding: 10px 0; }

/* ---------------------------------------------------------------- tool pages: meeting, crew plan, routes, hours, close out */
main[data-module="dispatch"] .dxp { max-width: 1520px; }
.dxp-title, .dxp h2 { letter-spacing: -.02em; }
.meet { gap: 16px; }
.meet-agenda { border: 0; border-radius: var(--r-card); padding: 16px; background: rgb(255 255 255 / .66); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--glass-edge), var(--sh-1); }
.meet-agenda h3 { letter-spacing: -.01em; }
.meet-item { border-bottom: 1px solid var(--line); padding: 10px 2px; }
.meet-main > .row:first-child .btn { height: 28px; padding: 0 12px; font-size: 12px; }
.meet-main > .row:first-child .btn:not(.btn-primary) { border: 0; background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px var(--line-2); }
.plan-grid-wrap { border: 0; border-radius: 18px; overflow: auto; background: rgb(255 255 255 / .62); box-shadow: var(--glass-edge), var(--sh-1); margin: 10px 0; }
.plan-grid th { background: rgb(248 249 253 / .95); font-size: 12px; }
.plan-grid td { border-color: var(--line); }
.plan-grid td:first-child, .plan-grid th:first-child { background: rgb(248 249 253 / .95); }
.plan-cell:hover:not(:disabled) { background: rgb(var(--mod-rgb) / .07); }
.plan-cell .helper { color: var(--muted); font-size: 11.5px; }
.plan-email { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--glass-edge), var(--sh-1); padding: 18px; }
.wa-panel { border: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--glass-edge), var(--sh-1); }
.wa-head { padding: 8px 14px; }
.wa-chip { height: 30px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 0 12px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--line-2); }
.wa-chip.on { background: rgb(var(--mod-rgb) / .1); color: var(--mod); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .35); }
.plan-bar input, .plan-bar select, .wa-bar select { border: 0; border-radius: 999px; height: 34px; min-height: 34px; padding: 0 14px; background: rgb(255 255 255 / .78); box-shadow: inset 0 0 0 1px var(--line-2); }
.plan-bar .ibtn { width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .78); box-shadow: var(--glass-edge), var(--sh-1); }
.route-chips .chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.route-chips .chip.on { background: var(--mod); color: #fff; box-shadow: 0 4px 12px rgb(var(--mod-rgb) / .3); }
.route-svg { border: 0; border-radius: 20px; background: rgb(255 255 255 / .62); box-shadow: var(--glass-edge), var(--sh-1); }
.route-svg .bg { fill: transparent; }
.route-svg .leg { stroke: var(--mod); stroke-width: 2.5; stroke-linecap: round; }
.route-svg .stop { stroke: var(--mod); fill: #fff; }
.route-legs { background: rgb(255 255 255 / .66); border-radius: 20px; padding: 14px 16px; box-shadow: var(--glass-edge), var(--sh-1); }
.route-legs h3 { margin-top: 0; letter-spacing: -.01em; }
main[data-module="dispatch"] .dxp .table-wrap, main[data-module="dispatch"] .dxp > .table { border-radius: 18px; }
main[data-module="dispatch"] .dxp .table { border: 0; border-radius: 18px; overflow: hidden; background: rgb(255 255 255 / .72); box-shadow: var(--glass-edge), var(--sh-1); }
main[data-module="dispatch"] .dxp .table th { background: rgb(248 249 253 / .9); }
main[data-module="dispatch"] .dxp .table th.today, main[data-module="dispatch"] .dxp .table td.today { background: rgb(var(--mod-rgb) / .07); }
main[data-module="dispatch"] .dxp .notice { border-radius: 14px; }
main[data-module="dispatch"] .dxp > .row .ibtn, main[data-module="dispatch"] .dxp-head .ibtn { width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: var(--glass-edge), var(--sh-1); }
main[data-module="dispatch"] .dxp-head input[type=date] { border: 0; border-radius: 999px; height: 34px; min-height: 34px; padding: 0 14px; background: rgb(255 255 255 / .8); box-shadow: var(--glass-edge), var(--sh-1); }
@media (max-width: 760px) { .meet { grid-template-columns: minmax(0, 1fr); } .meet-agenda { position: static; max-height: none; } .route-body { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ TECHOS - the phone app (My day) */
body.fd-phone, .fd-app { --mod: #6D4ED8; --mod-rgb: 109 78 216; }
body.fd-phone { background-color: var(--mesh-base); background-image:
    radial-gradient(900px 520px at 0% -10%, rgb(var(--sg-gold-rgb) / .2), transparent 60%),
    radial-gradient(760px 520px at 100% 0%, rgb(var(--mod-rgb) / .2), transparent 58%),
    radial-gradient(700px 640px at 50% 120%, rgb(var(--sg-blue-rgb) / .12), transparent 62%);
  background-attachment: fixed; }
.fd-head { background: rgb(16 22 43 / .84); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06), 0 10px 30px rgb(16 22 43 / .22); padding: calc(env(safe-area-inset-top, 0px) + 6px) 16px 10px; }
.fd-brand img { width: 34px; height: 34px; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.fd-brand b { font-size: 13px; letter-spacing: .1em; } .fd-brand span span { color: rgb(255 255 255 / .62); font-size: 12.5px; }
.fd-head .fd-ibtn { border-radius: 999px; }
.fd-head .fd-ibtn:active { background: rgb(255 255 255 / .12); }
.fd-dayrow { margin-top: 6px; padding: 3px; gap: 2px; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.fd-dayrow .fd-ibtn { min-height: 40px; min-width: 48px; }
.fd-date { min-height: 40px; border-radius: 999px; background: rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); font-size: 16px; letter-spacing: -.01em; }
.fd-date:active { transform: scale(.98); }
.fd-cover { color: rgb(255 255 255 / .7); }
.fd-cover select { border: 0; border-radius: 999px; padding: 0 14px; background: rgb(255 255 255 / .92); }
.fd-cover.desk select { background: rgb(255 255 255 / .78); box-shadow: inset 0 0 0 1px var(--line-2); }
.fd-body { padding: 14px 16px 28px; }
.fd-body.with-dock { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
.fd-sync { border-radius: 999px; padding: 8px 14px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--line-2); }
.fd-sync.off { background: #FFF6DF; color: #B45309; box-shadow: inset 0 0 0 1px rgb(217 119 6 / .25); }
.fd-skel div { border-radius: 22px; }

/* greeting + clock */
.fd-greet { border: 0; border-radius: var(--r-card); padding: 16px 16px 14px 18px; margin-bottom: 12px; align-items: center;
  background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--glass-edge), var(--sh-1); }
.fd-hi b { font-size: 19px; letter-spacing: -.022em; line-height: 1.2; display: block; }
.fd-hi .muted { margin-top: 3px; font-size: 13px; }
.fd-clock { gap: 6px; }
.fd-go { width: 74px; height: 74px; font-size: 15px; letter-spacing: .08em; color: #fff;
  background: radial-gradient(circle at 32% 26%, #4ade80, #16a34a 58%, #15803d); box-shadow: 0 0 0 6px rgb(22 163 74 / .14), 0 10px 22px rgb(22 163 74 / .35), inset 0 1px 0 rgb(255 255 255 / .35); transition: transform .1s; }
.fd-go.stop { background: radial-gradient(circle at 32% 26%, #f87171, #dc2626 58%, #b91c1c); box-shadow: 0 0 0 6px rgb(220 38 38 / .14), 0 10px 22px rgb(220 38 38 / .35), inset 0 1px 0 rgb(255 255 255 / .3); }
.fd-clock-what.md-clock-face { font-size: 12px; line-height: 1.35; }
.fd-clock-what.md-clock-face.on { border-radius: 12px; padding: 5px 10px; background: #EAF8EE; color: #15803d; }
.fd-clock-what span { font-variant-numeric: tabular-nums; }
.fd-off { padding: 0 4px; }
.fd-daymsg { border: 0; border-radius: 18px; padding: 12px 14px; background: rgb(var(--sg-gold-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--sg-gold-rgb) / .4); }
.fd-allgood { border-radius: 18px; padding: 12px 14px; background: #EAF8EE; color: #15803d; }
.fd-lbl { letter-spacing: .07em; }

/* job rows and cards */
.fd-row-card, .fd-card { border: 0; border-radius: var(--r-card); margin-bottom: 12px; background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--glass-edge), var(--sh-1); }
.fd-row-card.next, .fd-card.next { box-shadow: 0 0 0 2px rgb(var(--mod-rgb) / .55), 0 10px 28px rgb(var(--mod-rgb) / .16); }
.fd-row-card.done, .fd-card.done { opacity: .78; }
.fd-row { min-height: 68px; padding: 12px 16px; border-radius: var(--r-card); }
.fd-row:active { transform: scale(.99); background: rgb(var(--sg-blue-rgb) / .03); }
.fd-row-t { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fd-row-n { letter-spacing: -.01em; }
.fd-next { background: var(--mod); color: #fff; border-radius: 999px; padding: 1px 7px; }
.fd-card { padding: 14px 16px 16px; }
.fd-card-hd .link { border-radius: 999px; padding: 0 12px; }
.fd-next-l { color: var(--mod); letter-spacing: .07em; }
.fd-title { font-size: 21px; letter-spacing: -.024em; line-height: 1.2; }
.fd-code { display: block; width: max-content; margin-bottom: 6px; font-size: 12px; color: var(--mod); background: rgb(var(--mod-rgb) / .1); border-radius: 999px; padding: 2px 9px; letter-spacing: .02em; }
.fd-meta { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fd-tel { min-height: 44px; padding: 0 16px; background: #EAF8EE; color: #15803d; box-shadow: inset 0 0 0 1px rgb(22 163 74 / .2); }
.fd-tel:active { transform: scale(.97); }
.fd-sec { line-height: 1.5; }
.fd-sec.find { border-radius: 14px; padding: 10px 12px; background: rgb(var(--sg-blue-rgb) / .045); }
.fd-note { border: 0; border-radius: 16px; padding: 12px 14px; background: rgb(var(--sg-blue-rgb) / .045); }
.fd-note.new { background: rgb(var(--sg-gold-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--sg-gold-rgb) / .45); }
.fd-got { border-radius: 999px; min-height: 48px; background: linear-gradient(180deg, var(--sg-blue-lift), var(--sg-blue)); box-shadow: 0 6px 16px rgb(var(--sg-blue-rgb) / .28); }
.fd-got:active { transform: scale(.98); }
.fd-chip { border: 0; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px var(--line-2); }
.fd-chip.hot { background: #FCEBEC; color: #DC2626; box-shadow: inset 0 0 0 1px rgb(220 38 38 / .25); }
.fd-chip.upd { background: rgb(var(--mod-rgb) / .1); color: var(--mod); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .3); }
.fd-chip.warn { background: #FFF6DF; color: #B45309; box-shadow: inset 0 0 0 1px rgb(217 119 6 / .25); }
.fd-chg { background: rgb(var(--mod-rgb) / .08); border-radius: 10px; }
.fd-chg-t, .fd-chg-line { color: var(--mod); }

/* steps: one lit step (the primary), the rest quiet; extras as tiles */
.fd-steps { gap: 8px; margin-top: 14px; }
.fd-step { min-height: 58px; padding: 8px 16px 8px 10px; gap: 12px; border: 0; border-radius: 18px; background: rgb(255 255 255 / .82); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 16px; letter-spacing: -.01em; transition: transform .1s, box-shadow .15s; }
.fd-step-n { width: 34px; height: 34px; border: 0; background: rgb(var(--sg-blue-rgb) / .07); color: var(--ink-2); font-size: 14px; }
.fd-step.cur { color: #fff; background: linear-gradient(180deg, var(--sg-blue-lift), var(--sg-blue)); box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 10px 24px rgb(var(--sg-blue-rgb) / .32); }
.fd-step.cur .fd-step-n { background: rgb(255 255 255 / .2); color: #fff; border: 0; }
.fd-step.cur .ico { color: #fff; }
.fd-step.did { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.fd-step.did .fd-step-n { background: #16a34a; color: #fff; }
.fd-step .ico { color: var(--mod); }
.fd-extras { gap: 8px; }
.fd-sb { border: 0; min-height: 64px; border-radius: 16px; background: rgb(var(--sg-blue-rgb) / .045); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); transition: transform .1s; }
.fd-sb .ico { color: var(--mod); }
.fd-sb:disabled { opacity: .5; }
.fd-big { border: 0; border-radius: 999px; min-height: 54px; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .1s; }
.fd-big.primary { color: #fff; background: linear-gradient(180deg, var(--sg-blue-lift), var(--sg-blue)); box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 8px 20px rgb(var(--sg-blue-rgb) / .3); }
.fd-big.go { color: #fff; background: linear-gradient(180deg, #22c55e, #16a34a); box-shadow: 0 8px 20px rgb(22 163 74 / .3); }
.fd-big.danger { color: #fff; background: linear-gradient(180deg, #ef4444, #dc2626); box-shadow: 0 8px 20px rgb(220 38 38 / .28); }
.fd-big.quiet { background: transparent; box-shadow: none; color: var(--muted); }

/* the dock: one big button for the next thing, on a glass bar */
.fd-dock { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgb(255 255 255 / .62); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 -1px 0 rgb(255 255 255 / .8), 0 -12px 32px rgb(var(--sg-blue-rgb) / .12); }
.fd-dock-btn { min-height: 58px; border-radius: 999px; font-size: 17px; letter-spacing: -.01em; background: linear-gradient(180deg, var(--sg-blue-lift), var(--sg-blue)); box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 10px 26px rgb(var(--sg-blue-rgb) / .38); transition: transform .1s; }

/* sheets and dialogs on the phone */
.fd-dlg-body { color: var(--ink-2); }
.fd-dlg .fd-big + .fd-big { margin-top: 8px; }
.fd-matcard { border-radius: 14px; padding: 10px 12px; background: rgb(var(--mod-rgb) / .07); }
.fd-box { border-radius: 9px; border-color: var(--line-3); }
.fd-mat li.on .fd-box { background: #16a34a; border-color: #16a34a; }
.fd-del.armed { border-radius: 999px; }
.fd-addrow input { border-radius: 999px; padding: 0 16px; }
.fd-addrow .btn { height: 44px; padding: 0 18px; }
.fd-ftile { border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.fd-ftile img { border-radius: 10px; }
.fd-tc-row.open { background: #EAF8EE; border-radius: 10px; }
@media (max-width: 700px) {
  body.fd-phone .modal { border-radius: 24px 24px 0 0; background: rgb(250 250 253 / .96); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
  body.fd-phone .modal-head { background: transparent; }
  body.fd-phone .modal::before { content: ''; display: block; width: 38px; height: 5px; border-radius: 3px; margin: 8px auto 0; background: rgb(var(--sg-blue-rgb) / .18); }
}
@media (prefers-reduced-transparency: reduce) {
  .fd-head { background: #10162B; } .fd-greet, .fd-row-card, .fd-card, .fd-dock { background: #fff; }
  .fd-head, .fd-greet, .fd-row-card, .fd-card, .fd-dock, body.fd-phone .modal { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .fd-step, .fd-sb, .fd-big, .fd-dock-btn, .fd-go { transition: none; } }

/* office My day inside the full app */
.fd-deskhead { gap: 8px; margin-bottom: 14px; }
.fd-deskhead h1 { letter-spacing: -.022em; }
.fd-deskhead .ibtn { width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: var(--glass-edge), var(--sh-1); }
.fd-deskhead input[type=date] { border: 0; border-radius: 999px; height: 34px; min-height: 34px; padding: 0 14px; background: rgb(255 255 255 / .8); box-shadow: var(--glass-edge), var(--sh-1); }
.myday .fd-body { max-width: none; padding-left: 0; padding-right: 0; }