/* Daybook — time blocking for Notion tasks */

:root {
  --bg: #17161a;
  --bg-2: #1e1d22;
  --bg-3: #26252b;
  --line: #322f38;
  --line-soft: #272530;
  --ink: #efedf1;
  --ink-2: #a8a3b0;
  --ink-3: #6f6a7a;
  --accent: #e8763a;
  --danger: #d9534f;
  --now: #e8763a;
  --radius: 10px;
  --hour: 60px;
  --gutter-w: 56px;
  --rail-w: 340px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);

  --c-default: #7c7791;
  --c-gray: #7a7684;
  --c-brown: #9b7357;
  --c-orange: #d9803f;
  --c-yellow: #c9a63a;
  --c-green: #4f9d6a;
  --c-blue: #4a83c4;
  --c-purple: #8a6fc4;
  --c-pink: #c46f9e;
  --c-red: #cc5a52;
}

html[data-theme="light"] {
  --bg: #faf9f7;
  --bg-2: #ffffff;
  --bg-3: #f1efec;
  --line: #ded9d2;
  --line-soft: #eae6e0;
  --ink: #211f22;
  --ink-2: #5d5862;
  --ink-3: #918b98;
  --shadow: 0 10px 30px rgba(30, 25, 20, .16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ gate */

.gate {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: var(--bg);
  padding: 24px;
}
.gate-card {
  width: min(340px, 100%);
  display: flex; flex-direction: column; gap: 12px;
}
.gate-card h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.gate-card p { margin: 0 0 4px; color: var(--ink-2); }
.gate-card input, .gate-card button {
  font: inherit; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
}
.gate-card button { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.gate-error { color: var(--danger); min-height: 18px; font-size: 13px; }

/* ---------------------------------------------------------------- layout */

.app { display: flex; flex-direction: column; height: 100%; }
.app[hidden] { display: none; }

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex: none;
}
.spacer { flex: 1; }
.nav { display: flex; align-items: center; gap: 4px; flex: none; }

.title-wrap { display: flex; flex-direction: column; margin-left: 6px; min-width: 0; }
.title-wrap h1 {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subtitle { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

.icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-3); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }

.pill {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
}
.pill:hover { background: var(--bg-3); }

.segmented { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button {
  font: inherit; font-size: 12px; padding: 6px 11px; border: 0; background: transparent;
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.segmented button.on { background: var(--bg-3); color: var(--ink); }

.zoom {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 104px; height: 28px; background: transparent; cursor: pointer;
}
@media (max-width: 560px) and (pointer: fine) { .zoom { width: 64px; } }

/* Touch needs a longer track and a thumb you can actually catch. */
@media (pointer: coarse) {
  .zoom { width: 190px; height: 34px; }
  .zoom::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; }
  .zoom::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .zoom::-moz-range-thumb { width: 26px; height: 26px; }
}
.zoom::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
.zoom::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--ink-2); border: 0;
}
.zoom:hover::-webkit-slider-thumb, .zoom:active::-webkit-slider-thumb { background: var(--accent); }
.zoom::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.zoom::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); border: 0; }
.zoom:hover::-moz-range-thumb { background: var(--accent); }

.status-dot {
  cursor: pointer; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; margin-left: 2px;
  transition: background .2s;
}
.status-dot[data-state="busy"] { background: var(--accent); animation: pulse 1s infinite; }
.status-dot[data-state="ok"] { background: var(--c-green); }
.status-dot[data-state="error"] { background: var(--danger); }
@keyframes pulse { 50% { opacity: .3; } }

.body { flex: 1; display: flex; min-height: 0; }

/* ------------------------------------------------------------------ rail */

.rail {
  width: var(--rail-w); flex: none;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; flex-direction: column; min-height: 0;
  padding-left: max(0px, env(safe-area-inset-left));
}
.rail[hidden] { display: none; }
.rail-head { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.rail-head input, .rail-composer input {
  width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.rail-mode { width: 100%; }
.rail-mode button { flex: 1; padding: 7px 4px; }
.rail-pick {
  display: block; width: 100%; margin-top: 7px; font: inherit; font-size: 13px;
  padding: 7px 28px 7px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a3b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  color: var(--ink); appearance: none; -webkit-appearance: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-pick[hidden] { display: none; }
.rail-search { display: flex; gap: 6px; margin-top: 7px; }
.rail-search input { flex: 1; min-width: 0; }
.rail-search .toggle { width: 34px; padding: 0; font-size: 16px; line-height: 1; }
.rail-options { margin-top: 2px; padding-top: 5px; border-top: 1px dashed var(--line-soft); }
.opt-label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); align-self: center; margin-right: auto; }
.rail-filters { display: flex; gap: 5px; margin-top: 7px; }
.rail-filters select {
  flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 5px 7px;
  border-radius: 7px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); appearance: none;
}
.toggle {
  flex: none; font: inherit; font-size: 11px; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer;
}
.toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Pinned above the list: a dashed slot with a + until it is tapped, then a field. */
.rail-composer { padding: 8px 8px 0; }
.composer-plus {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px;
  font: inherit; font-size: 22px; line-height: 1; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: 8px; background: transparent; cursor: pointer;
}
.composer-plus:hover, .composer-plus:active { background: var(--bg-3); color: var(--ink); border-color: var(--ink-3); }
.rail-composer.open .composer-plus { display: none; }
.rail-composer input { border-style: dashed; padding: 12px 10px; }
.rail-composer input:focus { outline: none; border-color: var(--accent); }
.rail-list { flex: 1; overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.rail-item.selected { border-color: var(--ink-3); background: var(--bg-2); }
/* The editor docks under the tapped row instead of floating over the calendar. */
.editor.inline {
  position: static; width: auto; max-height: none; margin: -2px 0 8px;
  border-radius: 8px; box-shadow: none;
}
.editor.inline .chips { display: none; }
.editor.inline .editor-body { overflow: visible; }
.rail-foot { padding: 8px 12px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--line-soft); }

.rail-row { position: relative; margin-bottom: 6px; border-radius: 8px; overflow: hidden; }
.rail-row .rail-item { margin-bottom: 0; position: relative; transition: transform .18s ease; will-change: transform; }
.rail-row.swiping .rail-item { transition: none; }
.swipe-bg {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.rail-row[data-dir] .swipe-bg { display: flex; }
.rail-row[data-dir="right"] .swipe-bg { background: var(--c-green); }
.rail-row[data-dir="left"] .swipe-bg { background: var(--danger); }
.rail-row[data-dir="right"] .sr, .rail-row[data-dir="left"] .sl { visibility: hidden; }
.rail-row.armed .swipe-bg { filter: brightness(1.18); }

.rail-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-left: 3px solid var(--c-default);
  border-radius: 8px; background: var(--bg);
  cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.rail-item:active { cursor: grabbing; }
.rail-item.lifted { opacity: .4; }
.rail-item .t { flex: 1; min-width: 0; font-size: 13px; }
.rail-item .meta { display: block; font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.rail-item .go {
  flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-3); cursor: pointer; font-size: 14px;
}
.rail-item .go:hover { background: var(--bg-3); color: var(--ink); }
.rail-empty { padding: 24px 12px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* -------------------------------------------------------------- calendar */

.calendar { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.cal-head {
  display: flex; flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding-right: max(0px, env(safe-area-inset-right));
}
/* Matches the hour gutter so the dates line up with their columns. */
.head-spacer { width: var(--gutter-w); flex: none; }
/* Clips the track, which is slid sideways to follow the grid's scroll. */
.head-clip { flex: 1; min-width: 0; overflow: hidden; }
.head-track { display: flex; will-change: transform; }
.day-head {
  flex: 0 0 var(--col-w, 100%); min-width: 0; padding: 7px 8px; text-align: center;
  border-left: 1px solid var(--line-soft);
}
.day-head:first-child { border-left: 0; }
.day-head .dow { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.day-head .num { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.day-head.today .num { color: var(--accent); }
.day-head .total { font-size: 10px; color: var(--ink-3); }

.allday { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.allday-chip {
  font-size: 10px; line-height: 1.5; padding: 1px 6px; border-radius: 4px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.allday-chip:active { cursor: grabbing; }
.allday-chip.lifted { opacity: .4; }
.allday-more {
  font-size: 9px; color: var(--ink-3); text-align: left; padding-left: 2px; cursor: pointer;
}
.allday-more:hover { color: var(--ink); }

/* Scrolls both ways: down through the day, sideways through the days. A real
   horizontal scroll area is also what makes a sideways swipe land here rather
   than being taken by the browser as a back gesture. */
.cal-scroll {
  flex: 1; overflow: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* -webkit-overflow-scrolling: touch breaks position:sticky on iOS,
     and momentum scrolling has been the default since iOS 13. */
  overscroll-behavior: contain;
  overscroll-behavior-x: none;          /* no browser back on a sideways swipe */
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
/* Must span the whole scrollable width, not just the viewport: a sticky child
   can only stick within its containing block, so a viewport-wide grid lets the
   hour gutter slide away as soon as you scroll past the first screen. */
.cal-grid { display: flex; position: relative; width: max-content; }

/* The hours live outside the horizontal scroller, so they cannot travel
   sideways at all. position:sticky was doing this job and does not hold up on
   iPadOS. The column is scrolled vertically by transform instead. */
.cal-body { flex: 1; display: flex; min-height: 0; }
.gutter-rail {
  width: var(--gutter-w); flex: none; position: relative; overflow: hidden;
  background: var(--bg); z-index: 5;
}
.gutter { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.gutter .hr {
  position: absolute; right: 8px; transform: translateY(-50%);
  font-size: 10px; color: var(--ink-3); letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.columns { flex: none; display: flex; position: relative; }

.col {
  flex: 0 0 var(--col-w, 100%); min-width: 0; position: relative;
  border-left: 1px solid var(--line-soft);
  touch-action: pan-x pan-y;
}
.col:first-child { border-left: 0; }
.col.snap { scroll-snap-align: start; }   /* a page at a time, not a day */
.col.weekend { background: rgba(255, 255, 255, .012); }
html[data-theme="light"] .col.weekend { background: rgba(0, 0, 0, .015); }

.hline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); pointer-events: none; }
.hline.half { border-top-style: dotted; opacity: .5; }

.nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--now); pointer-events: none; z-index: 5; }
.nowline::before {
  content: ''; position: absolute; left: -4px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--now);
}

.block {
  position: absolute;
  /* Visible, so a short block's grips can sit outside it. The inner .body does
     the clipping that overflow:hidden used to do here. */
  overflow: visible;
  border-radius: 7px;
  background: var(--blk, var(--c-default));
  color: #fff;
  border: 1px solid rgba(0, 0, 0, .22);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  touch-action: pan-x pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-size: 12px; line-height: 1.25;
  z-index: 2;
}
.block:active { cursor: grabbing; }
.block .blk-body {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; gap: 5px; align-items: flex-start;
  border-radius: inherit; padding: 4px 6px;
}
.block .blk-text { flex: 1; min-width: 0; }
.block .bt {
  font-weight: 600; font-size: var(--blk-font, 12px); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.block .bm {
  font-size: calc(var(--blk-font, 12px) - 2px); opacity: .82; margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.block.tiny .blk-body { padding: 0 6px; }
.block.tiny .bt { -webkit-line-clamp: 1; }
.block.tiny .bm { display: none; }
.block.done { opacity: .5; filter: grayscale(.75); }
.block.done .bt, .block.done .bm { text-decoration: line-through; }

/* In the text flow, and nudged so it centres on the title's first line. */
.block .check {
  flex: none; z-index: 18; padding: 0;
  width: var(--check-size, 15px); height: var(--check-size, 15px);
  margin-top: calc((var(--blk-font, 12px) * 1.25 - var(--check-size, 15px)) / 2);
  border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 4px;
  background: rgba(0, 0, 0, .2); color: #fff;
  font: inherit; font-size: calc(var(--check-size, 15px) * .7); line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.block .check:hover { background: rgba(0, 0, 0, .45); border-color: #fff; }
.block.done .check { background: #fff; color: #1b1a1f; border-color: #fff; }
.block.dragging { opacity: .9; z-index: 40; box-shadow: var(--shadow); cursor: grabbing; }
.block.selected { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 30; }
.block.ghost { opacity: .45; border-style: dashed; }

/* Calendar events: reference by default, so they read as background, not work. */
.block.event {
  background: var(--bg-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-blue);
  box-shadow: none;
  cursor: default;
  touch-action: pan-x pan-y;
}
.block.event .bt { color: var(--ink); font-weight: 500; }
.block.event.free { border-left-style: dashed; opacity: .7; }
.block.event.editable { cursor: grab; }
.block.event.editable:active { cursor: grabbing; }
.block.event.selected { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 30; }

.new-kind { align-items: center; gap: 8px; }
.new-kind span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.new-kind .segmented { flex: 1; }
.new-kind .segmented button { flex: 1; }

.event-note {
  font-size: 11px; color: var(--ink-3); padding-top: 2px;
}
.event-note:empty { display: none; }
.allday-chip.event {
  background: var(--bg-3); color: var(--ink-2);
  border: 1px solid var(--line); border-left: 3px solid var(--c-blue);
}

/* --grip-out is how far the grip hangs past the edge: half its height on a tall
   block, all of it on a short one so the body stays entirely grabbable. */
.handle { position: absolute; left: 0; right: 0; height: var(--grip-h, 12px); touch-action: none; }
.handle.top { top: calc(-1 * var(--grip-out, 6px)); cursor: ns-resize; }
.handle.bottom { bottom: calc(-1 * var(--grip-out, 6px)); cursor: ns-resize; }
.handle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .12s;
}
.block.selected .handle::after, .block:hover .handle::after { opacity: 1; }

/* Vertically centred so the buttons sit in the move band, not over a grip. */
.block-actions {
  position: absolute; top: 50%; transform: translateY(-50%); right: 3px;
  display: none; gap: 3px; z-index: 16;
}
.block.selected .block-actions { display: flex; }
.block.tiny .block-actions { display: none; }   /* no room; use the editor */
.block-actions button {
  width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: rgba(0, 0, 0, .38); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
}
.block-actions button:hover { background: rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- editor */

.editor {
  position: fixed; z-index: 40;
  right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  width: min(330px, calc(100vw - 28px));
  max-height: min(76vh, 620px);
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
}
.editor[hidden] { display: none; }
.editor-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 12px; border-bottom: 1px solid var(--line-soft); }
.ed-title {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; font-weight: 600;
  border: 0; background: transparent; color: var(--ink); padding: 4px 0;
}
.ed-title:focus { outline: none; }
.editor-body { padding: 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.row { display: flex; flex-direction: column; gap: 4px; }
.row.two { flex-direction: row; gap: 8px; }
.row.two > div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row label, .row.two label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.row input, .row select {
  font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%;
  appearance: none;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button {
  font: inherit; font-size: 11px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer;
}
.chips button:hover { background: var(--bg-3); color: var(--ink); }
.editor-foot { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.btn {
  flex: 1; font: inherit; font-size: 12px; padding: 8px 6px; border-radius: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  cursor: pointer; text-align: center; text-decoration: none;
}
.btn:hover { background: var(--bg-3); color: var(--ink); }
.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.link { line-height: 1.9; }

/* ----------------------------------------------------------------- misc */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
  z-index: 50; padding: 9px 15px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--ink);
  font-size: 13px; box-shadow: var(--shadow); pointer-events: none;
}
.toast[hidden] { display: none; }
.toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding-right: 12px; }
.toast-act {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  background: transparent; border: 0; padding: 4px 6px; cursor: pointer;
}

.drag-ghost {
  position: fixed; z-index: 45; pointer-events: none;
  padding: 6px 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: #fff; background: var(--c-default); box-shadow: var(--shadow);
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drag-ghost[hidden] { display: none; }

/* While a drag is engaged nothing anywhere may start a text selection. Dragging
   across a neighbouring block would otherwise highlight its text in Safari. */
html.dragging *, html.dragging {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
html.dragging { cursor: grabbing; }

.fatal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px; text-align: center; background: var(--bg);
}
.fatal h2 { margin: 0; font-size: 18px; font-weight: 600; }
.fatal p { margin: 0; max-width: 420px; color: var(--ink-2); font-size: 13px; word-break: break-word; }
.fatal .fatal-note { color: var(--ink-3); font-size: 12px; }
.fatal button {
  font: inherit; font-size: 13px; padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-weight: 600; cursor: pointer;
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 820px) {
  :root { --rail-w: 100%; }
  .rail {
    position: fixed; z-index: 30; inset: 0; top: auto; height: 62%;
    border-right: 0; border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0; box-shadow: var(--shadow);
  }
  .title-wrap h1 { font-size: 14px; }
  .segmented button { padding: 6px 8px; }
}

@media (max-width: 560px) {
  .subtitle { display: none; }
  .editor { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto; }
}

.cal-scroll::-webkit-scrollbar { width: 0; height: 0; }