/* ══════════════════════════════════════════════════════════════════════════
   canon-sched-dayof.css — day-of speed (feature_sched_dayof, js/scheduler/dayof.js).

   The length stepper and Running late button on the inspector's When row, and
   the Running late menu. Every rule is keyed on a class dayof.js only writes
   while the flag is on, so with it off not one rule matches. Canon tokens only:
   the hub look & feel rewrites them.
   ══════════════════════════════════════════════════════════════════════════ */
@layer components {
  .sched-app .sched-dayof-when {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1);
    margin-top: var(--sp-1);
  }
  .sched-app .sched-dayof-step,
  .sched-app .sched-dayof-late {
    font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
    min-height: 26px; padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--c-border); border-radius: var(--r-sm, 6px);
    background: var(--c-card); color: var(--c-text-2); cursor: pointer;
  }
  .sched-app .sched-dayof-step { font-variant-numeric: tabular-nums; min-width: 40px; }
  .sched-app .sched-dayof-step:hover,
  .sched-app .sched-dayof-late:hover { border-color: var(--c-accent); color: var(--c-text); }
  .sched-app .sched-dayof-late { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-warn); }
  .sched-app .sched-dayof-step:focus-visible,
  .sched-app .sched-dayof-late:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

  .sched-dayof-menu {
    position: fixed; z-index: 1200; width: 280px; max-width: calc(100vw - 16px);
    padding: var(--sp-3); display: grid; gap: var(--sp-2);
    background: var(--c-card); color: var(--c-text);
    border: 1px solid var(--c-border); border-radius: var(--r-md, 10px);
    box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--c-ink-deep) 55%, transparent);
  }
  .sched-dayof-menu-h { font-size: 12.5px; font-weight: 600; }
  .sched-dayof-menu-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
  .sched-dayof-menu-chk { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; color: var(--c-text-2); }
  .sched-dayof-menu-note { font-size: 12px; color: var(--c-muted); }
}