/* A civil day is always 1440 local minutes. Drag coordinates use the measured
   lane rectangle, so the global desktop CSS zoom does not shift a drop. */
.planner-calendar-board {
  --planner-hour-height:72px;
  --planner-day-height:1728px;
  --planner-axis-width:54px;
  --planner-day-min-width:150px;
  min-width:0;
  display:grid;
  gap:12px;
  color:var(--ink);
}
.planner-calendar-extras { display:flex; align-items:flex-start; gap:8px 20px; flex-wrap:wrap; }
.planner-calendar-extras>details { min-width:0; color:var(--muted); }
.planner-calendar-extras>details[open] { flex-basis:100%; }
.planner-calendar-extras summary { width:fit-content; padding:7px 0; font-size:11px; cursor:pointer; }
.planner-calendar-help>p,.planner-calendar-help>.planner-calendar-legend { margin-block:8px; }
.planner-calendar-load-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; padding-block:8px; }
.planner-calendar-load-days>article { min-width:0; padding:10px; border-radius:8px; background:var(--surface); }
.planner-calendar-load-days strong,.planner-calendar-load-days small { display:block; font-size:11px; line-height:1.55; }
.planner-calendar-load-days strong { color:var(--ink); font-weight:600; }
.planner-calendar-help p,.planner-calendar-footnote,.planner-calendar-keyboard { margin:0; font-size:11px; line-height:1.65; color:var(--muted); }
.planner-calendar-help p { max-width:650px; }
.planner-calendar-legend { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:10px; color:var(--muted); }
.planner-calendar-legend>span { display:inline-flex; align-items:center; gap:6px; }
.planner-calendar-legend i { width:11px; height:11px; border:1px solid var(--line); border-radius:2px; }
.planner-calendar-legend .is-focus { background:var(--accent-soft); border-color:var(--accent); }
.planner-calendar-legend .is-light { background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px); }
.planner-calendar-legend .is-unavailable { background:var(--surface); }
.planner-calendar-legend .is-sport { background:var(--planner-sport-soft,var(--surface)); border-color:var(--planner-sport,var(--muted)); border-right-width:3px; }
.planner-hour-calendar {
  position:relative;
  height:660px;
  max-height:calc(82dvh / var(--interface-scale,1));
  min-height:320px;
  overflow:auto;
  overflow-anchor:none;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-solid,var(--surface));
  isolation:isolate;
}
.planner-hour-calendar:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.planner-hour-surface { min-width:calc(var(--planner-axis-width) + var(--planner-day-count,7) * var(--planner-day-min-width)); }
.planner-hour-header,.planner-hour-columns {
  display:grid;
  grid-template-columns:var(--planner-axis-width) repeat(var(--planner-day-count,7),minmax(var(--planner-day-min-width),1fr));
}
.planner-hour-header { position:sticky; top:0; z-index:8; align-items:stretch; background:var(--surface-solid,var(--surface)); border-bottom:1px solid var(--line); }
.planner-hour-corner { position:sticky; left:0; z-index:9; padding:17px 5px; font-size:9px; text-align:center; color:var(--muted); background:var(--surface-solid,var(--surface)); }
.planner-hour-day-heading { min-width:0; padding:12px 10px; border-left:1px solid var(--line); }
.planner-hour-day-heading>div:first-child { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.planner-hour-day-heading>div:first-child>span { font-size:11px; color:var(--muted); }
.planner-hour-day-heading time { display:grid; place-items:center; min-width:27px; height:27px; border-radius:50%; font-size:17px; font-weight:600; letter-spacing:-.03em; }
.planner-hour-day-heading>small { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.planner-hour-day-heading.is-today { background:var(--accent-soft); }
.planner-hour-day-heading.is-today time { background:var(--accent); color:var(--on-accent,#fff); }
.planner-hour-external { display:grid; gap:2px; margin-top:8px; font-size:9px; line-height:1.45; color:var(--muted); }
.planner-hour-axis,.planner-hour-lane { height:var(--planner-day-height); box-sizing:content-box; padding-block:0; border-block:0; }
.planner-hour-axis { position:sticky; left:0; z-index:5; background:var(--surface-solid,var(--surface)); }
.planner-hour-axis>span { position:absolute; right:8px; transform:translateY(-50%); font-size:10px; font-variant-numeric:tabular-nums; line-height:1.4; color:var(--muted); }
.planner-hour-axis>.is-first { transform:none; }
.planner-hour-axis>.is-last { transform:translateY(-100%); }
.planner-hour-calendar[data-planner-hour-step="2"] .planner-hour-axis>.is-odd { display:none; }
.planner-hour-lane { position:relative; min-width:0; border-left:1px solid var(--line); background:var(--surface); }
.planner-hour-window,.planner-hour-rule { position:absolute; left:0; right:0; pointer-events:none; }
.planner-hour-window { z-index:0; }
.planner-hour-window.is-focus { background:var(--accent-soft); opacity:.55; }
.planner-hour-window.is-light { background:repeating-linear-gradient(135deg,transparent 0 7px,var(--line) 7px 8px); opacity:.6; }
.planner-hour-window.is-sport { left:auto; width:5px; background:var(--planner-sport,var(--muted)); opacity:.4; }
.planner-hour-calendar[data-planner-filter="sport"] .planner-hour-window.is-sport { left:0; width:auto; background:var(--planner-sport-soft,var(--surface)); opacity:1; }
.planner-hour-rule { height:0; border-top:1px solid var(--line); z-index:1; opacity:.6; }
.planner-hour-rule[data-planner-hour="24"] { transform:translateY(-1px); }
.planner-hour-calendar[data-planner-hour-step="2"] .planner-hour-rule { opacity:.35; }
.planner-hour-calendar[data-planner-hour-step="2"] .planner-hour-rule.is-odd { opacity:.12; }
.planner-hour-calendar[data-planner-zoom="fit"] .planner-hour-window.is-focus { opacity:.4; }
.planner-hour-calendar[data-planner-zoom="fit"] .planner-hour-window.is-light { opacity:.4; }
.planner-hour-block { position:absolute; box-sizing:border-box; z-index:2; min-height:0; margin:0; padding:0; }
.planner-hour-block:focus-within,.planner-hour-block:hover { z-index:4; }
.planner-hour-calendar .planner-hour-block>.planner-session {
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:7px;
  overflow:hidden;
  gap:3px;
  border-radius:5px;
  background:var(--surface-solid,var(--surface));
}
.planner-hour-calendar .planner-hour-block.is-draggable>.planner-session { padding-right:43px; cursor:grab; }
.planner-hour-calendar .planner-session>strong { font-size:11px; line-height:1.35; font-weight:600; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.planner-hour-calendar .planner-session-top { font-size:8px; gap:4px; flex-wrap:wrap; line-height:1.3; }
.planner-hour-calendar .planner-session-top time { font-size:10px; line-height:1.3; }
.planner-hour-calendar .planner-session-top>span { display:none; }
.planner-hour-calendar .is-locked:is([data-planner-size="short"],[data-planner-size="full"]) .planner-session-top>span,
.planner-hour-calendar .planner-session:is(.is-done,.is-partial) .planner-session-top>span { display:inline; font-size:8px; }
.planner-hour-calendar [data-planner-size="compact"].is-locked .planner-session-top::after { content:'◆'; font-size:7px; color:var(--muted); }
.planner-hour-calendar .planner-session-work,.planner-hour-calendar .planner-session-project { font-size:9px; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.planner-hour-calendar .planner-session-bottom { font-size:8px; line-height:1.4; padding-top:4px; margin-top:3px; }
.planner-hour-calendar .planner-session-actual { font-size:9px; }
.planner-hour-calendar .planner-session.is-proposed { background:var(--surface-solid,var(--surface)); border-style:dashed; }
.planner-hour-calendar .planner-session.is-skipped,.planner-hour-calendar .planner-session.is-unavailable { opacity:.65; }
.planner-hour-calendar .planner-session.is-sport { border-left-color:var(--planner-sport,var(--muted)); }
.planner-hour-calendar .planner-session.is-canceled { opacity:.55; }
.planner-hour-calendar [data-planner-size="short"]>.planner-session>:is(.planner-session-project,.planner-session-bottom,.planner-session-actual,.planner-session-tasks),
.planner-hour-calendar :is([data-planner-size="tiny"],[data-planner-size="compact"])>.planner-session>:is(.planner-session-work,.planner-session-project,.planner-session-bottom,.planner-session-actual,.planner-session-tasks) { display:none; }
.planner-hour-calendar [data-planner-size="short"]>.planner-session { padding-block:2px; gap:1px; }
.planner-hour-calendar [data-planner-size="short"] .planner-session-top,
.planner-hour-calendar [data-planner-size="short"] .planner-session-top time { font-size:9px; line-height:10px; }
.planner-hour-calendar [data-planner-size="short"]>.planner-session>strong { -webkit-line-clamp:1; line-height:13px; flex-shrink:0; }
.planner-hour-calendar [data-planner-size="short"]>.planner-session>.planner-session-work { -webkit-line-clamp:1; line-height:11px; flex-shrink:0; }
.planner-hour-calendar .planner-hour-block:is([data-planner-size="tiny"],[data-planner-size="compact"])>.planner-session { flex-direction:row; align-items:center; padding:0 5px; gap:5px; }
.planner-hour-calendar :is([data-planner-size="tiny"],[data-planner-size="compact"])>.planner-session>strong { min-width:0; flex:1; font-size:10px; line-height:12px; white-space:nowrap; display:block; text-overflow:ellipsis; }
.planner-hour-calendar [data-planner-size="compact"] .planner-session-top { flex:0 0 auto; flex-wrap:nowrap; line-height:12px; }
.planner-hour-calendar [data-planner-size="compact"] .planner-session-top time { font-size:9px; line-height:12px; }
.planner-hour-calendar [data-planner-size="compact"] .planner-session-top>span,
.planner-hour-calendar [data-planner-size="tiny"] .planner-session-top { display:none; }
.planner-hour-calendar .planner-hour-block[data-planner-size="marker"]>.planner-session { padding:0; font-size:0; border-radius:3px; }
.planner-hour-calendar [data-planner-size="marker"]>.planner-session>* { opacity:0; }
.planner-hour-calendar .is-narrow[data-planner-size="full"]>.planner-session>strong { -webkit-line-clamp:2; font-size:10px; }
.planner-hour-drag {
  position:absolute;
  top:0;
  right:0;
  z-index:3;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  margin:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:21px;
  line-height:1;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.planner-hour-drag:hover,.planner-hour-drag:focus-visible { background:var(--accent-soft); color:var(--ink); }
.planner-hour-drag:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.planner-hour-resize {
  position:absolute;
  left:3px;
  right:3px;
  z-index:4;
  display:grid;
  place-items:center;
  width:calc(100% - 6px);
  height:10px;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--ink);
  opacity:0;
  cursor:ns-resize;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.planner-hour-resize.is-start { top:0; }
.planner-hour-resize.is-end { bottom:0; }
.planner-hour-resize>span { width:20px; max-width:60%; height:2px; border-radius:2px; background:currentColor; opacity:.55; }
.planner-hour-block:is(:hover,:focus-within)>.planner-hour-resize { opacity:1; }
.planner-hour-resize:focus-visible { opacity:1; background:var(--accent-soft); outline:2px solid var(--accent); outline-offset:-2px; }
.planner-hour-calendar :is([data-planner-size="tiny"],[data-planner-size="compact"])>.planner-hour-resize { height:6px; }
.planner-hour-calendar [data-planner-size="marker"]>.planner-hour-resize { height:100%; pointer-events:none; }
@media(hover:hover) and (pointer:fine) {
  .planner-hour-calendar .planner-hour-block.is-draggable>.planner-session { padding-right:8px; }
  .planner-hour-calendar .planner-hour-drag { width:24px; height:28px; min-width:0; min-height:0; top:7px; opacity:0; font-size:17px; }
  .planner-hour-calendar .planner-hour-block:is([data-planner-size="short"],[data-planner-size="full"]):is(:hover,:focus-within)>.planner-hour-drag { opacity:1; }
  .planner-hour-calendar .planner-hour-block:has(>.planner-hour-drag:focus-visible)>.planner-session { padding-right:28px; }
}
@media(hover:none) {
  .planner-hour-resize { height:12px; opacity:1; }
  .planner-hour-resize>span { opacity:.3; }
}
/* Small sessions remain exact to scale. Their separate keyboard handle stays
   focusable but never intercepts a click or covers a neighbouring session. */
.planner-hour-calendar :is([data-planner-size="marker"],[data-planner-size="tiny"],[data-planner-size="compact"])>.planner-hour-drag {
  width:22px;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  font-size:15px;
}
.planner-hour-calendar :is([data-planner-size="marker"],[data-planner-size="tiny"],[data-planner-size="compact"])>.planner-hour-drag:focus-visible {
  opacity:1;
  outline-offset:-2px;
}
.planner-hour-calendar :is([data-planner-size="tiny"],[data-planner-size="compact"]):has(>.planner-hour-drag:focus-visible)>.planner-session { padding-right:24px; }
.planner-hour-calendar .is-dragging { opacity:.35; pointer-events:none; }
.planner-hour-calendar.is-moving,.planner-hour-calendar.is-moving * { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.planner-hour-calendar.is-resizing,.planner-hour-calendar.is-resizing * { cursor:ns-resize; }
.planner-hour-calendar .planner-drag-preview {
  position:absolute;
  left:3px;
  right:3px;
  z-index:6;
  box-sizing:border-box;
  min-height:0;
  padding:5px 7px;
  border:2px solid var(--accent);
  border-radius:5px;
  background:var(--accent-soft);
  color:var(--ink);
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  pointer-events:none;
  overflow:visible;
}
.planner-hour-calendar .planner-drag-preview.is-invalid { border-color:var(--danger,var(--ink)); border-style:dashed; }
.planner-calendar-keyboard { font-size:10px; }
@media(max-width:700px) {
  .planner-calendar-board { --planner-axis-width:46px; --planner-day-min-width:160px; }
  .planner-hour-calendar { height:620px; max-height:78dvh; min-height:300px; }
  .planner-calendar-help { gap:9px; }
  .planner-calendar-help p { font-size:12px; }
  .planner-hour-day-heading { padding:11px 10px; }
  .planner-hour-day-heading>div:first-child>span { font-size:12px; }
  .planner-hour-external { font-size:10px; }
  .planner-hour-calendar .planner-session>strong { font-size:12px; }
  .planner-hour-calendar :is([data-planner-size="tiny"],[data-planner-size="compact"],.is-narrow)>.planner-session>strong { font-size:10px; }
}

/* A live civil-time marker in today's lane. Percent positioning follows zoom. */
.planner-now{position:absolute;left:0;right:0;height:0;border-top:1.5px solid var(--danger,#b34343);z-index:6;pointer-events:none}
.planner-now[hidden]{display:none}
.planner-now::before{content:"";position:absolute;left:-3px;top:-3.75px;width:6px;height:6px;border-radius:50%;background:var(--danger,#b34343)}
.planner-now time{position:absolute;right:4px;top:-.75px;transform:translateY(-50%);padding:1px 5px;border:1px solid var(--danger,#b34343);border-radius:4px;background:var(--surface-solid,var(--surface));color:var(--danger,#b34343);font-size:10px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.planner-now[data-planner-now-edge="start"] time{transform:translateY(2px)}
.planner-now[data-planner-now-edge="end"] time{transform:translateY(-110%)}

.planner-hour-calendar.is-creating,.planner-hour-calendar.is-creating *{cursor:crosshair;user-select:none;-webkit-user-select:none}
.planner-hour-calendar .planner-create-preview{z-index:7;box-shadow:0 2px 10px #0000000c;white-space:normal}