/*
 * blocks.css — the Blocks page (blocks.php): weekly grid, carousel and the block edit form.
 * Loaded after base.css. Moved verbatim out of blocks.php's inline <style> (ROADMAP #32).
 */
:root {
  --hour-px: 48px;
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
}
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; margin: 0; }
a { color: var(--accent); text-decoration: none; }
.page-wrap { max-width: var(--page-max); margin: 0 auto; padding: 20px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.topbar-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.paused-note { font-size: 0.78rem; color: var(--muted); }

/* ---- History bar: what's running, Undo / Redo ---- */
.history-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-bottom: 12px; padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--panel-border); border-radius: 8px;
}
#runningLine { font-size: 0.85rem; }
#runningLine strong { font-family: 'Space Grotesk', sans-serif; }
.history-btns { margin-left: auto; display: flex; gap: 6px; }
.history-btns button { min-width: 72px; }

.blocks-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin-bottom: 16px; padding: 12px; background: var(--panel);
  border: 1px solid var(--panel-border); border-radius: 8px;
}
.blocks-controls select, .blocks-controls button, .history-bar button, .carousel-head button {
  font-family: inherit; font-size: 0.85rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--panel-border); border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
}
.blocks-controls button:hover:not([disabled]), .history-bar button:hover:not([disabled]) { border-color: var(--accent); }
button[disabled] { opacity: 0.4; cursor: not-allowed; }
button.primary-btn { background: var(--accent); color: #1A1400; border-color: var(--accent); font-weight: 600; }
.blocks-controls label, .carousel-head label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.tpl-menu { position: relative; }
.tpl-menu-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 170px; padding: 4px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}
.tpl-menu-list[hidden] { display: none; }
.blocks-controls .tpl-menu-list button { border: none; background: transparent; text-align: left; padding: 8px 10px; border-radius: 6px; }
.blocks-controls .tpl-menu-list button:hover:not([disabled]) { background: var(--bg); border: none; }
.blocks-controls .tpl-menu-list button.danger { color: var(--err); }
#weekRangeLabel { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin-left: auto; }

.blocks-grid-wrap { border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel); overflow-x: auto; }
/* The grid is ONE scroller in both directions (2026-09-27): the day header + all-day row stay pinned at its top
   (sticky), and head and body share one width, so they always line up and scroll sideways together. */
#gridWrap { overflow: auto; max-height: min(720px, 80vh); }
.blocks-grid-head, .blocks-grid-body { display: grid; grid-template-columns: 60px repeat(7, minmax(120px, 1fr)); min-width: 900px; }
.blocks-grid-head { position: sticky; top: 0; z-index: 70; background: var(--panel); }
.blocks-grid-body-scroll { min-width: 900px; }
.blocks-grid-wrap[hidden], .no-template-note[hidden] { display: none; }
.no-template-note { padding: 6px 12px; margin-bottom: 6px; border: 1px dashed var(--panel-border); border-radius: 8px; color: var(--muted); font-size: 0.9em; }
.blocks-grid-wrap.no-template .allday-axis-cell, .blocks-grid-wrap.no-template .blocks-grid-head .allday-cell { display: none; }
.no-template-note strong { color: var(--text); }
/* Custom all-day blocks: their own week row above the carousel, aligned with the grid's columns. It has no scrollbar
   of its own — it follows the grid's sideways scroll (blocks.js). */
.custom-allday-wrap { margin-top: 12px; }
.blocks-grid-wrap.custom-allday-wrap { overflow-x: hidden; }
.custom-allday-row { display: grid; grid-template-columns: 60px repeat(7, minmax(120px, 1fr)); min-width: 900px; }
.custom-allday-label { font-size: 0.68rem; color: var(--muted); padding: 6px 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.custom-allday-row .allday-cell { border-bottom: none; }
.day-col-head { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--panel-border); border-left: 1px solid var(--panel-border); }
.day-col-head .dow { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.day-col-head .dnum { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.axis-head { border-bottom: 1px solid var(--panel-border); }
/* Frozen hour column (2026-09-27): the hour labels, their corner cell and the all-day row's axis cell stay at the left
   edge while the days scroll sideways, with a solid background so chips slide under them. Above every chip (≤ 60),
   below nothing in the body; the sticky header (70) keeps its own copy of the corner above it. */
.axis-head, .allday-axis-cell, .axis-col, .custom-allday-label {
  position: sticky; left: 0; background: var(--panel); z-index: 65;
  box-shadow: 1px 0 0 var(--panel-border);
}
.axis-head, .allday-axis-cell { z-index: 2; }   /* inside the sticky header: only needs to beat the day heads */

.allday-axis-cell { border-bottom: 1px solid var(--panel-border); }
.allday-cell { min-height: 56px; padding: 4px; border-left: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 3px; }

.axis-label { position: absolute; right: 6px; transform: translateY(-50%); font-size: 0.7rem; color: var(--muted); }
.day-track { position: relative; border-left: 1px solid var(--panel-border); }
.hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--panel-border); opacity: 0.4; }
.quarter-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--panel-border); opacity: 0.15; }

/* Today's weekday is tinted in every week shown; today itself a little brighter. */
.day-track.is-weekday, .allday-cell.is-weekday { background: rgba(242, 183, 5, 0.05); }
.day-col-head.is-weekday { background: rgba(242, 183, 5, 0.08); }
.day-track.is-today, .allday-cell.is-today { background: rgba(242, 183, 5, 0.11); }
.day-col-head.is-today { background: rgba(242, 183, 5, 0.2); }
.day-col-head.is-today .dnum { color: var(--accent); }
/* The current time, across every column; full strength in today's weekday. */
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--err); opacity: 0.35; z-index: 3; pointer-events: none; }
/* Midnight (2026-09-30): where the calendar date changes inside a roll-over day — thin and dashed, with the new date. */
.midnight-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--muted); opacity: 0.7; z-index: 1; pointer-events: none; }
.midnight-label {
  position: absolute; right: 3px; top: -8px; padding: 0 4px; border-radius: 3px;
  background: var(--bg); color: var(--muted); font-size: 0.65rem; line-height: 14px; white-space: nowrap;
}
.is-weekday .now-line { opacity: 0.9; }
.is-today .now-line { opacity: 1; }
.is-today .now-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--err); }

.block-chip {
  position: absolute; left: 2px; right: 2px; border-radius: 4px; padding: 1px 4px;
  font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis;
  color: var(--text); display: flex; flex-direction: column; gap: 1px;
}
.allday-chip {
  min-height: 48px; border-radius: 4px; padding: 2px 6px; font-size: 0.72rem;
  display: flex; flex-direction: column; gap: 1px;
}
.block-chip, .allday-chip { cursor: pointer; }
.block-chip:hover, .allday-chip:hover { filter: brightness(1.25); }
/* Overlaps (cascade): each layer is indented (inline left); pointing at a chip's visible part / keyboard focus / a touch
   "raise" brings it to the top at full column width, sliding out over the ones it covered. */
.block-chip { transition: left 0.15s ease, box-shadow 0.15s ease; }
/* Raising is decided by blocks.js from the pointer position (not :hover) — see onGridPointerMove. */
.block-chip.is-overlapped:focus-visible, .block-chip.raised {
  z-index: 40 !important; left: 2px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); outline: none;
}
.block-chip.is-overlapped { box-shadow: -2px 0 4px rgba(0, 0, 0, 0.45); }
/* Blocks starting later inside a raised block stay on top of it (see raiseChip in blocks.js). */
.block-chip.above-raised { z-index: 41 !important; }

/* ---- Click-and-drag (blocks.js): draw on empty space, drag a chip's edges to resize, its body to move ---- */
.blocks-grid-body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.block-chip.dragging {
  z-index: 60 !important; left: 2px !important; opacity: 0.92; transition: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65); outline: 2px solid var(--accent);
}
.drag-preview {
  position: absolute; left: 2px; right: 2px; z-index: 60; border-radius: 4px; pointer-events: none;
  background: rgba(242, 183, 5, 0.22); border: 2px dashed var(--accent);
}
.drag-label {
  position: absolute; left: 4px; bottom: 2px; z-index: 3; padding: 1px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.7rem; font-weight: 600; white-space: nowrap;
  pointer-events: none;
}
/* Touch: a selected (raised) chip shows grips — top and bottom bars resize, the round one moves. */
.chip-grip { display: none; position: absolute; z-index: 4; touch-action: none; }
.touch-ui .block-chip.raised .chip-grip { display: block; }
.touch-ui .block-chip.raised { overflow: visible; }
.grip-start, .grip-end { left: 50%; width: 44px; height: 14px; margin-left: -22px; }
.grip-start { top: 0; }
.grip-end { bottom: 0; }
.grip-start::after, .grip-end::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 4px; border-radius: 2px; background: var(--accent);
}
.grip-start::after { top: 2px; }
.grip-end::after { bottom: 2px; }
.grip-move {
  right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: var(--accent); color: #1A1400; font-size: 14px; line-height: 26px; text-align: center;
}
.stack-badge {
  position: absolute; top: 3px; right: 4px; z-index: 2; min-width: 32px; height: 24px; padding: 0 8px;
  border-radius: 12px; border: 2px solid #1A1400; background: var(--accent); color: #1A1400;
  font: 700 0.85rem 'Inter', sans-serif; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.stack-badge:hover, .stack-badge:focus-visible { filter: brightness(1.15); outline: 2px solid #fff; outline-offset: 1px; }
/* Overlap picker: each entry is a small copy of its grid chip. */
.wn-modal-box.stack-box { max-width: 360px; }
.stack-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; }
.stack-sub { font-size: 0.8rem; color: var(--muted); margin: 2px 0 12px; }
/* Padding leaves room for an entry's hover outline, so it never forces a scrollbar. */
.stack-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-height: 60vh; overflow-y: auto; overflow-x: hidden; padding: 4px; }
.stack-item {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left;
  padding: 10px 12px 9px; border-radius: 8px; color: var(--text); cursor: pointer; font: inherit;
  transition: box-shadow 0.12s ease, filter 0.12s ease;
}
.stack-item:hover, .stack-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); filter: brightness(1.2); }
.stack-item.is-disabled { opacity: 0.55; }
.stack-item::before { border-radius: 8px 8px 0 0; }
.stack-name { position: relative; z-index: 1; font-weight: 600; font-size: 0.92rem; padding-right: 18px; }
.stack-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.75rem; }
.stack-time { color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.stack-pill { padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; border: 1px solid var(--panel-border); color: var(--muted); }
.stack-pill-custom { border-color: #5B8DEF; color: #8FB0F5; }
.stack-pill-override { border-color: var(--accent); color: var(--accent); }
.stack-pill-disabled { border-color: var(--err); color: var(--err); }
/* A disabled template block stays on the grid, greyed, so it can be switched back on. */
.block-chip.is-disabled, .allday-chip.is-disabled { opacity: 0.35; }
/* Very short chips (tiny/20-min blocks) get a smaller, tighter name so it isn't clipped. */
.chip-short .chip-name { font-size: 0.6rem; line-height: 1.15; }
/* Off/Break — red diagonal hazard stripes (thin, well-spaced) plus a small themed watermark
   icon, so "no schedule here" reads at a glance without needing to read the text. */
.chip-off {
  background-color: #1A1D24;
  background-image: repeating-linear-gradient(45deg, rgba(224,96,122,0.55) 0, rgba(224,96,122,0.55) 1.5px, transparent 1.5px, transparent 16px);
  border: 1px solid var(--err);
}
.allday-chip.chip-off { position: relative; }
/* The Break cup always sits in the top-right corner (clear of the name, and of a "+N" badge, which moves left of it). */
/* Cup size follows the chip's height (--chip-h, set by blocks.js): about 45% of it, 14-42 px. */
.chip-off { --cup: clamp(14px, calc(var(--chip-h, 32px) * 0.45), 42px); }
.chip-off::after {
  content: "☕"; position: absolute; top: 2px; right: 3px;
  font-size: var(--cup); opacity: 0.85; pointer-events: none; line-height: 1;
}
.chip-off .chip-name { padding-right: calc(var(--cup) + 4px); }
.chip-off .stack-badge { right: calc(var(--cup) + 8px); }
/* No explicit tag weight (effectively 100% Other) — grey, unchanged. */
.chip-notag { background: rgba(255, 255, 255, 0.08); border: 2px solid #E9ECF2; }
/* Tag-weighted — a thicker gradient bar along the top edge only (proportional to each tag's
   share of weight), not a full ring. Static, so the grid stays calm and scannable. */
.chip-rainbow { background: #000000; border: 1px solid #3A4150; }
.allday-chip.chip-rainbow { position: relative; }
.chip-rainbow::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--chip-colors));
}
.chip-name, .chip-tags { position: relative; z-index: 1; }
.is-override { outline: 2px dashed var(--accent); outline-offset: 1px; }
.chip-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: baseline; }
.chip-tag { font-weight: 600; line-height: 1; white-space: nowrap; }
.chip-tag-big { font-size: 0.88rem; }
.chip-tag-med { font-size: 0.74rem; }
.chip-tag-small { font-size: 0.63rem; }
.chip-overflow { color: var(--muted) !important; font-style: italic; font-weight: 400; }

/* ---- Custom Block carousel ---- */
.blocks-carousel { margin-top: 18px; }
.carousel-head { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; flex-wrap: wrap; }
.carousel-head h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; margin: 0; }
.carousel-head .off-note { font-size: 0.78rem; color: var(--accent); }
.carousel-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.carousel-item {
  flex: 0 0 auto; min-width: 170px; max-width: 240px; padding: 10px; border: 1px solid var(--panel-border);
  border-radius: 8px; background: var(--panel); cursor: pointer; text-align: left;
  font: inherit; color: var(--text);
}
.carousel-item:hover { border-color: var(--accent); }
.carousel-item.disabled { opacity: 0.45; }
.carousel-item .name { font-weight: 500; margin-bottom: 4px; }
.carousel-item .meta { font-size: 0.75rem; color: var(--muted); }
.carousel-item .meta.when { color: var(--text); margin-top: 2px; }   /* Next / Now / Last (2026-09-30) */
.carousel-add {
  display: flex; align-items: center; justify-content: center; min-width: 90px;
  font-size: 1.6rem; color: var(--muted); border-style: dashed;
}
.carousel-list-off .carousel-item:not(.carousel-add) { opacity: 0.45; }
/* In effect right now (2026-09-29): a green outline. */
.carousel-item.is-active, .carousel-item.is-active:hover { border-color: #49C08C; box-shadow: 0 0 0 2px #49C08C; }
/* Past blocks (never happen again): a collapsed section under the strip, most recent first. */
.carousel-past { margin-top: 10px; }
.carousel-past[hidden] { display: none; }
.carousel-past summary { cursor: pointer; font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }
.carousel-past .carousel-item { opacity: 0.7; }

/* ---- Block edit form (modal) ---- */
.wn-modal-box.bf-box { max-width: 580px; max-height: 92vh; overflow-y: auto; padding: 20px; }
.bf-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; margin: 0 0 2px; }
.bf-kind { font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; }
.bf-section { border-top: 1px solid var(--panel-border); padding-top: 12px; margin-top: 12px; }
.bf-section h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; }
.bf-box label { display: block; font-size: 0.8rem; color: var(--muted); margin: 8px 0 4px; }
.bf-box label.inline { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 0.85rem; margin: 6px 14px 0 0; cursor: pointer; }
.bf-box input[type="text"], .bf-box input[type="number"], .bf-box select, .bf-pick {
  background: var(--bg); border: 1px solid var(--panel-border); color: var(--text);
  padding: 7px 9px; border-radius: 6px; font: inherit; font-size: 0.88rem;
}
.bf-box input[type="text"] { width: 100%; }
.bf-box .row { display: flex; gap: 12px; flex-wrap: wrap; }
.bf-box .row > div { flex: 1; min-width: 140px; }
.bf-box .row select, .bf-box .row input { width: 100%; }
.bf-pick { cursor: pointer; min-width: 120px; text-align: left; }
.bf-pick:hover { border-color: var(--accent); }
/* Days: quick presets, Weekly / Bi-weekly, one row per week labelled with its dates. */
.bf-days-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.bf-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-presets button { background: transparent; border: 1px solid var(--panel-border); color: var(--muted); border-radius: 6px;
  padding: 4px 9px; font: inherit; font-size: 0.78rem; cursor: pointer; }
.bf-presets button:hover { color: var(--text); border-color: var(--accent); }
.bf-cadence { margin: 2px 0 4px; }
.bf-dayrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bf-week { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.82rem; min-width: 92px; }
.bf-days { display: flex; gap: 5px; flex-wrap: wrap; }
.bf-day { min-width: 42px; padding: 6px 7px; border: 1px solid var(--panel-border); border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 0.8rem; background: var(--bg); color: var(--muted); }
.bf-day.on { background: #2C4A85; border-color: #2C4A85; color: #fff; }
.bf-note { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }

/* Tags: a cloud of every tag (faint = in Other, solid = has a row), then one row per chosen tag. */
.bf-cloud { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-tag { border: 1px solid; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 0.8rem; cursor: pointer; color: var(--text); }
.bf-tag.on { font-weight: 600; }
.bf-tag.excluded { text-decoration: line-through; }
.bf-tag-untagged { border-style: dashed !important; font-style: italic; }
.bf-badge { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; opacity: 0.85; }
.bf-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
/* Fixed Exclude and ✕ columns, so every row's bar — Other's included — starts and ends in the same place. */
.bf-row { display: grid; grid-template-columns: minmax(0, 120px) 64px minmax(0, 1fr) 82px 32px; gap: 8px; align-items: center; }
.bf-row-name { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bf-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bf-row input[type="number"] { width: 100%; }
.bf-row input[disabled] { opacity: 0.4; }
.bf-bar { position: relative; height: 22px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.bf-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 4px; opacity: 0.85; transition: width 0.15s; }
.bf-bar-pct { position: relative; z-index: 1; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; line-height: 22px;
  padding-left: 6px; text-shadow: 0 0 3px rgba(0,0,0,0.9); }
.bf-excluded-label { font-size: 0.78rem; font-weight: 600; color: var(--err); }
.bf-row.excluded .bf-row-name { color: var(--err); }
.bf-row-other.excluded .bf-other-includes { color: var(--err); }
.bf-box label.bf-excl-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.bf-row-other { border-top: 1px dashed var(--panel-border); padding-top: 6px; }
.bf-other-includes { grid-column: 1 / -1; font-size: 0.72rem; color: var(--muted); margin-top: -2px; }
.bf-x { background: transparent; border: 1px solid var(--panel-border); color: var(--muted); border-radius: 6px; height: 32px; cursor: pointer; }
.bf-x:hover { color: var(--err); border-color: var(--err); }
.bf-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.bf-actions > div { display: flex; gap: 10px; }

@media (max-width: 600px) {
  .page-wrap { padding: 12px; }
  #weekRangeLabel { margin-left: 0; width: 100%; }
  .history-btns { margin-left: 0; }
  .bf-row { grid-template-columns: minmax(0, 84px) 54px minmax(0, 1fr) 74px 30px; gap: 6px; }
  .bf-week { min-width: 0; width: 100%; }
}

/* ---- Highlight + block menu (2026-09-30) ----
   Click a chip (or a carousel card) to highlight every chip of that block in the week; right-click / long-press for
   the menu. The highlight is an inner white ring so it never fights the Override outline or the raised shadow. */
.block-chip.is-highlight, .allday-chip.is-highlight {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--accent);
  filter: brightness(1.12);
}
/* A highlighted chip also comes to the surface, full column width — it stays there until the highlight is cleared.
   Hovering another chip still raises that one above it (.raised is z-index 40). */
.block-chip.is-highlight { z-index: 35 !important; left: 2px !important; }
.block-chip.is-flash, .allday-chip.is-flash { animation: blockFlash 0.4s ease-in-out 4 alternate; }
@keyframes blockFlash { from { filter: brightness(1.12); } to { filter: brightness(1.6); } }

.block-menu {
  position: fixed; z-index: 1200; min-width: 170px; padding: 4px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column;
}
.block-menu-title {
  padding: 6px 10px 5px; font-size: 0.72rem; color: var(--muted); max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--panel-border); margin-bottom: 3px;
}
.block-menu button {
  text-align: left; background: transparent; border: none; border-radius: 5px; color: var(--text);
  font: inherit; font-size: 0.85rem; padding: 8px 10px; cursor: pointer;
}
.block-menu button:hover, .block-menu button:focus-visible { background: var(--bg); outline: none; }
.block-menu button.danger { color: var(--err); }
@media (pointer: coarse) { .block-menu button { padding: 12px 14px; font-size: 0.95rem; } }