:root {
  color-scheme: light;
  --ink: #242933;
  --muted: #606b7b;
  --line: #d9dfe6;
  --faint: #edf0f4;
  --accent: #455a7d;
  --tint: #edf2f9;
  --sans: "Yu Gothic UI", Meiryo, sans-serif;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: #fff; color: var(--ink); font: 14px/1.45 var(--sans); }
button, input, select { font: inherit; color: inherit }
button { border: 0; background: transparent; cursor: pointer }
button:hover { background: #f4f6f9 }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h2, h3, p { margin: 0 }
h2 { font: 500 22px/1.35 var(--serif); letter-spacing: .035em }
.shell { width: min(1200px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 22px }
.top-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 16px }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background:#fff }
.month-panel,.todo-panel { padding: 14px 20px }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px }
.caption { font-size:12px; color:var(--muted) }
nav { display:flex; align-items:center; gap:4px }
nav button { border:1px solid var(--line); border-radius: 999px; min-width:28px; height:26px; line-height:1; font-size:18px }
nav .today { font-size:12px; padding:0 10px }
#month { font-size:23px }
#month span { font: 12px var(--sans); color:var(--muted); margin-right:8px }
.month-header { margin-bottom:8px }
.weekday-head,.month-grid { display:grid; grid-template-columns: repeat(7,minmax(0,1fr)); text-align:center }
.weekday-head { color:var(--muted); font-size:11px; margin:5px 0 }
.day { min-height:30px; display:grid; place-content:center; border-top:1px solid var(--faint); position:relative; padding:3px 0; font:13px "Segoe UI",sans-serif }
.day .date { display:grid; place-content:center; padding:3px; min-width:23px; border-radius:50% }
.day.out { color:#929ba7 }
.day[aria-pressed=true] .date { background:var(--accent); color:white }
.day.isToday:not([aria-pressed=true]) .date { box-shadow:0 0 0 1px var(--accent) }
.day .dot { position:absolute; left:calc(50% + 14px); top:48%; width:3px; height:3px; border-radius:50%; background:#8596b1 }
.todo-panel { display:flex; flex-direction:column }
.todo-header { flex-wrap:wrap; gap:4px 10px; margin-bottom:8px }
.tasks { border-top:1px solid var(--faint) }
.task { display:flex; align-items:center; gap:10px; min-height:36px; padding:5px 0; border-bottom:1px solid var(--faint) }
.check { width:17px; height:17px; flex-shrink:0; padding:0; font-size:11px; border:1px solid #a4aebb; border-radius:50% }
.check[aria-pressed=true] { color:var(--accent); background:var(--tint) }
.tasktext { flex:1; overflow-wrap:anywhere }
.task-card { display:flex; align-items:flex-start; gap:7px; min-width:0; line-height:1.5 }
.task-card .task-copy { flex:1; min-width:0 }
.task-card .promote { flex:0 0 auto; margin-inline-start:auto; font-size:11px; font-weight:500; line-height:1.5; padding:0 3px; color:var(--accent); background:transparent; border:none; text-decoration:underline; text-underline-offset:2px }
.task-card.done .task-preview { color:var(--muted); text-decoration:line-through }
.done .task-preview { text-decoration:line-through; color:var(--muted) }
#addForm { display:flex; gap:10px; align-items:center; margin-top:auto; padding-top:8px }
#newTask { border:0; border-bottom:1px solid var(--line); padding:5px 2px; font-size:13px; min-width:0; flex:1 }
#addForm button { border-radius:5px; padding:4px 8px; background:var(--tint); color:var(--accent); font-size:12px }
.strip-panel { display:grid; grid-template-columns:128px minmax(0,1fr); align-items:stretch; gap:14px; margin:14px 0; padding:12px 16px }
.strip-nav { display:flex; flex-direction:column; gap:3px; justify-content:center }
.strip-name { font-weight:600; font-size:13px }
.strip-nav nav button { height:22px; min-width:25px; font-size:16px }
.strip-dates { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; align-items:stretch }
.week-date { text-align:left; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"day num" "sum sum"; align-content:center; justify-content:start; align-items:baseline; gap:3px 6px; min-width:0; border:1px solid transparent; border-radius:8px; padding:6px 8px }
.week-date[aria-pressed=true] { background:var(--tint); border-color:#d3dce9 }
.week-date .weekday { grid-area:day; color:var(--muted); font-size:11px }
.week-date .date-number { grid-area:num; font:500 18px/1.2 "Segoe UI",sans-serif }
.week-summary { grid-area:sum; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.week-date[aria-pressed=true] .week-summary { color:var(--accent) }
.plan-panel { padding:16px 20px; width:50% }
.plan-panel[data-mode="week"] { width:100% }
.plan-header { margin-bottom:14px }
.plan-label { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap }
.segmented { display:flex; background:#f4f5f7; border:1px solid var(--line); border-radius:8px; padding:2px; flex-shrink:0 }
.segmented button { padding:4px 13px; border-radius:5px; color:var(--muted); font-size:13px }
.segmented button[aria-pressed=true] { background:white; color:var(--accent); box-shadow:0 1px 3px #25334922 }
.plan-content { display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:18px }
.plan-main { min-width:0 }
.hour-grid { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(32px,auto) }
.hour-cell { display:flex; gap:9px; align-items:center; text-align:left; border-top:1px solid var(--faint); padding:4px 3px; min-width:0 }
.hour-label { font:12px "Segoe UI",sans-serif; font-variant-numeric:tabular-nums; color:var(--muted) }
.slot-content { font-size:12px; min-width:0; color:var(--accent); overflow-wrap:anywhere }
.queue { border-left:1px solid var(--line); padding:3px 0 0 16px; min-width:0 }
.queue h3 { font-size:13px; margin-bottom:10px }
.unplanned { display:block; text-align:left; width:100%; padding:7px 8px; margin:5px 0; border:1px solid var(--line); border-radius:6px; font-size:12px; overflow-wrap:anywhere }
.queue p,.emptylist,.week-empty { color:var(--muted); font-size:12px }
.week-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-height:170px; border-block:1px solid var(--line) }
.week-column { min-width:0; padding:6px; border-right:1px solid var(--faint) }
.week-column:last-child { border-right:none }
.week-day-name { width:100%; text-align:left; font-weight:650; font-size:13px; padding:5px 0 8px; color:var(--accent); border-bottom:1px solid var(--faint) }
.week-event { text-align:left; display:flex; align-items:start; flex-direction:column; margin:8px 0; gap:2px; padding:4px 6px; border-left:2px solid #99aac3; background:var(--tint); font-size:12px; overflow-wrap:anywhere }
.week-event time { color:var(--muted); font:11px "Segoe UI",sans-serif }
.week-empty { display:block; padding:8px 0 }
.week-pending { display:block; margin:8px 0; color:var(--muted); font-size:12px }
.week-column.selected { background:#f8fafd }
.plan-content:has(#weekView:not([hidden])) { grid-template-columns:1fr }
.plan-content:has(#weekView:not([hidden])) .queue { display:none }
.hour-cell.elapsed { cursor:default; background:#f3f4f5 }
.hour-cell:not(.occupied) .slot-content { color:#9aa5b1 }
.hour-cell.occupied .slot-content { border-left:2px solid #94a5bf; border-radius:0 4px 4px 0; padding:3px 7px; background:var(--tint) }
.tasktext, .slot-task, .unplanned { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere }
.tasktext { flex:1 }
.check,.hour-label { flex-shrink:0 }
.slot-body { flex:1; min-width:0; display:grid; gap:4px }
.slot-task { display:flex; line-height:1.5 }
.week-date.done .week-summary { text-decoration:line-through; color:var(--muted) }
.task-copy, .task-preview { min-width:0; max-width:100%; overflow-wrap:anywhere }
.task-preview { display:block; white-space:pre-wrap }
.task-copy.is-long:not(.is-open) .task-preview { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.task-expand { padding:1px 3px; font-size:11px; font-weight:500; color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.pending-task { display:flex; align-items:center; gap:5px }
.pending-task .task-copy { flex:1; min-width:0 }
.pending-assign { flex-shrink:0; color:var(--accent); padding:2px 4px }
.slot-add { display:block; width:100%; min-height:19px; text-align:left; padding:0; color:var(--muted); font-size:12px }
.slot-add:hover { color:var(--accent) }
[data-task-id] { cursor:grab }
[data-task-id]:active,body.dragging-task,body.dragging-task * { cursor:grabbing }
[data-task-id].is-dragging { opacity:.65 }
.slot-blank { color:#95a0ae; font-size:12px }
.slot-add:only-child { width:100%; text-align:left }
.task-drag-ghost {
  position:fixed; left:0; top:0; z-index:1000; pointer-events:none; user-select:none;
  padding:5px 10px; max-width:min(260px,75vw); overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; font:13px/1.5 var(--sans);
  color:var(--ink); background:white; border-radius:6px;
  box-shadow:0 3px 14px rgb(27 34 46 / 16%);
}
.task-drag-ghost.done { text-decoration:line-through }
body.dragging-task, body.dragging-task * { user-select:none }
.slot-editor { position:relative; width:100%; min-width:0; margin:9px 0 3px; padding-top:9px; display:grid; border:1px solid var(--line); border-radius:6px; background:white }
.slot-editor:focus-within { border-color:#8899b3 }
.slot-close { position:absolute; z-index:2; top:-6px; left:-6px; width:20px; height:20px; padding:0; border:1px solid var(--line); background:white; border-radius:50%; font-size:14px; line-height:1; color:var(--muted) }
.slot-text { display:block; width:100%; min-width:0; min-height:56px; padding:2px 8px 8px; border:0; border-radius:0 0 6px 6px; resize:vertical; font:inherit; color:var(--ink); background:transparent }
.slot-text:focus-visible { outline:none }
dialog { width:min(370px,90vw); padding:20px; border:1px solid var(--line); border-radius:12px; color:var(--ink) }
dialog::backdrop { background:#18213636 }
dialog h2 { font:600 18px var(--sans); margin-bottom:12px }
dialog select { width:100%; padding:8px; border:1px solid var(--line); border-radius:6px }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:15px }
.actions button { border:1px solid var(--line); border-radius:6px; padding:5px 12px }
#apply { background:var(--accent); color:white }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%) }
@media (min-width:900px) and (max-height:790px) {
  .shell { padding-bottom:10px }
  .strip-panel { margin:10px 0; padding-block:8px }
  .plan-panel { padding-block:12px }
  .plan-header { margin-bottom:10px }
  .hour-grid { grid-auto-rows:minmax(29px,auto) }
}
@media(max-width:1000px) {
  .shell { width:calc(100% - 34px) }
  .strip-panel { grid-template-columns:100px minmax(0,1fr); gap:8px }
  .plan-content { grid-template-columns:minmax(0,1fr) 140px; gap:12px }
}
@media(max-width:760px) {
  .plan-panel { padding:12px }
  .plan-header { flex-wrap:wrap }
  .top-grid { grid-template-columns:1fr }
  .strip-panel { grid-template-columns:1fr }
  .strip-nav { flex-direction:row; align-items:center; justify-content:space-between }
  .strip-dates { gap:0 }.week-date { padding:4px }
  .plan-content { grid-template-columns:1fr }
  .queue { border-left:0; border-top:1px solid var(--line); padding:10px 0 0 }
  .week-grid { grid-template-columns:1fr; min-height:0 }
  .week-column { border-right:0; border-bottom:1px solid var(--line) }
  .week-day-name { width:auto; border:0 }.week-event { display:inline-flex; margin:3px 6px }
}
.local-info { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted) }
.local-info span:last-child { font-size:11px }
.rename-task { max-width:100%; flex:0 1 auto; overflow-wrap:anywhere; font-size:11px; line-height:1.3; color:var(--muted); border-radius:5px; padding:3px 5px }
.rename-task:hover,.rename-task:focus-visible { color:var(--ink); background:var(--faint) }
.rename-entry { display:block; width:100%; min-height:4em; margin:4px 0 8px; padding:8px; resize:vertical; border:1px solid var(--line); border-radius:6px; font:inherit }