/* busy-drag.css: busy hours by drag on a week grid (spec/busy-hours-drag.md 10). Every selector is under a
   .bd- class or [data-bd], so Discover can mount the same module on its own week view. The hatch itself comes
   from the host (.wk-busy; Plan's --busy-stripe in css/page-plan.css). */

/* grid body: one tab stop; the slot cursor is its visible focus, so the body draws no ring of its own */
[data-bd-grid]:focus-visible { outline: none; }
@media (pointer: fine) {
  [data-bd-grid] .wk-busy { cursor: grab; }
  [data-bd-grid] .wk-busy.bd-edge-top, [data-bd-grid] .wk-busy.bd-edge-bottom { cursor: ns-resize; }
}
[data-bd-grid] .wk-col { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
body.is-dragging.bd-is-move, body.is-dragging.bd-is-move * { cursor: grabbing; }
body.is-dragging.bd-is-resize, body.is-dragging.bd-is-resize * { cursor: ns-resize; }
body.is-dragging.bd-is-create [data-bd-grid] .wk-col { cursor: crosshair; }

/* resize grips: 12 x 2 in --muted, 3 in from the edge, on hover and focus only (Cron C94 has no handle; a
   hatch gives no cue at the edge, so the grip is added) */
[data-bd-grid] .wk-busy::before, [data-bd-grid] .wk-busy::after {
  content: ''; position: absolute; left: 50%; width: 12px; height: 2px; margin-left: -6px;
  border-radius: 1px; background: var(--muted); display: none;
}
[data-bd-grid] .wk-busy::before { top: 3px; bottom: auto; }
[data-bd-grid] .wk-busy::after { bottom: 3px; }
@media (pointer: fine) {
  [data-bd-grid] .wk-busy:hover::before, [data-bd-grid] .wk-busy:hover::after { display: block; }
}
[data-bd-grid] .wk-busy:focus-visible::before, [data-bd-grid] .wk-busy:focus-visible::after { display: block; }
[data-bd-grid] .wk-busy.is-short::before, [data-bd-grid] .wk-busy.is-short::after { display: none; }

/* the block whose popover is open */
[data-bd-grid] .wk-busy.bd-active { box-shadow: inset 0 0 0 1px var(--muted); }

/* preview, lifted block and live siblings (Cron C26, C85): hatch, 1px border, radius 6, 2 px insets */
.bd-ghost { z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px var(--muted); }
.bd-ghost.bd-lifted { box-shadow: inset 0 0 0 1px var(--muted), var(--shadow-overlay); transition: box-shadow var(--dm-rail-ms, 206ms) var(--dm-rail-ease, linear); }
.bd-ghost.bd-blocked { opacity: .55; }
.bd-ghost .bd-range { color: var(--ink-2); font-weight: 500; font-size: 12px; }
/* the source spot of a moving block: a dashed outline until the drop (C85) */
[data-bd-grid] .wk-busy.bd-source, [data-bd-grid] .wk-busy.bd-source:hover { background: transparent; box-shadow: none; outline: 1px dashed var(--line-strong); outline-offset: -1px; }
[data-bd-grid] .wk-busy.bd-source > *, [data-bd-grid] .wk-busy.bd-source::before, [data-bd-grid] .wk-busy.bd-source::after { visibility: hidden; }
[data-bd-grid] .bd-hide { visibility: hidden; }

/* the range chip beside the pointer, only while the preview sits under a class */
.bd-chip {
  position: fixed; z-index: 60; padding: 4px 8px; border-radius: var(--r-control);
  background: var(--toast-bg); color: var(--toast-ink); box-shadow: var(--shadow-overlay);
  font: var(--t-small); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}

/* keyboard slot cursor: 1 hour, column width less 4, 2px focus outline, visible "+ Add busy time" (8.1) */
.bd-slot {
  position: absolute; left: 2px; right: 2px; z-index: 4;
  border-radius: var(--r-control); outline: 2px solid var(--focus); outline-offset: 0;
  display: flex; align-items: flex-start; padding: 4px 6px; cursor: pointer;
}
.bd-slot-add { padding: 0 4px; border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: 600 12px/16px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-slot.bd-slot-out .bd-slot-add { position: absolute; top: calc(100% + 4px); left: -2px; max-width: calc(100% + 4px); padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-overlay); }

/* the popover (6; Linear 0084): 280 wide, padding 12, radius 8, 1px --line, --surface, --shadow-overlay */
.bd-pop {
  position: fixed; z-index: 40; width: 280px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-overlay);
  color: var(--ink); font: var(--t-meta);
}
.bd-pop:focus-visible { outline: none; }
@media (max-width: 599px) { .bd-pop { width: calc(100vw - 32px); } }
.bd-line { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.bd-name { width: 100%; height: 32px; min-height: 32px; font-weight: 600; }
.bd-name::placeholder { font-weight: 400; }
.bd-time > .icon, .bd-times > .icon { flex: none; width: 16px; height: 16px; color: var(--muted); }
.bd-time-btn {
  min-height: 28px; padding: 3px 6px; margin-left: -2px; border-color: transparent; background: transparent;
  color: var(--ink); font: var(--t-control); font-variant-numeric: tabular-nums;
}
.bd-time-btn:hover { background: var(--surface-2); }
.bd-dur { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-times { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.bd-times :is(select, :where(.csel)) { width: auto; height: 32px; min-height: 32px; padding: 0 28px 0 8px; font-variant-numeric: tabular-nums; } /* room for the chevron */
.bd-to { color: var(--muted); }
.bd-repeat { flex-wrap: wrap; gap: 6px 8px; }
.bd-rl { flex: none; width: 100%; font: var(--t-small); color: var(--muted); }
.bd-days { display: flex; gap: 6px; }
/* round day toggles (Cron C35): off is 1px --line with --ink-2, on is --ink fill with --bg text */
.bd-day, .bd-day:hover {
  width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 12px/16px var(--font-ui);
}
.bd-pop .bd-day:hover { border-color: var(--line-strong); }
/* .bd-pop raises these above the shared button[aria-pressed="true"]:not(.primary) filter-toggle rule */
.bd-pop .bd-day[aria-pressed="true"], .bd-pop .bd-day[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.bd-day[aria-disabled="true"] { cursor: default; }
.bd-clash { align-items: flex-start; font: 400 13px/18px var(--font-ui); color: var(--danger); }
.bd-clash > .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.bd-clash[hidden] { display: none; }
/* footer under a divider, the destructive action apart on the left (Linear 0084) */
.bd-foot { display: flex; align-items: center; justify-content: space-between; margin: 4px -12px 0; padding: 12px 12px 0; border-top: 1px solid var(--line); }
.bd-btn { min-height: 28px; padding: 3px 10px; gap: 6px; }
.bd-del { margin-left: -6px; padding-left: 6px; color: var(--danger); }
.bd-del:hover { color: var(--danger); background: var(--danger-subtle); }
.bd-del .icon { width: 16px; height: 16px; }

/* touch: 44 targets, visual sizes kept */
@media (pointer: coarse) {
  .bd-day, .bd-btn, .bd-time-btn { position: relative; }
  .bd-day::before { content: ''; position: absolute; inset: -8px; }
  .bd-btn::before, .bd-time-btn::before { content: ''; position: absolute; inset: -8px 0; }
  .bd-days { gap: 16px; }
  .bd-times :is(select, :where(.csel)) { min-height: 44px; }
}

/* first-time hint: the toast-style chip at the bottom center of the main column (4.1) */
.bd-hint.paint-hint { position: fixed; bottom: 16px; z-index: 30; display: block; }


@media (prefers-reduced-motion: reduce) { .bd-ghost.bd-lifted { transition: none; } }