/* "paper · blush" — warm light background, white cards, hairline rules,
   rose accent. Grid text stays monospace (layout.js clips labels by
   fixed char width); the chrome uses the sans stack. */
:root {
  --bg: #fbf5f4;
  --panel: #ffffff;
  --panel-2: #f5e8e6;
  --line: #ecd9d6;
  --line-soft: #f2e6e4;
  --ink: #33221f;
  --muted: #7d615d; /* dark enough to stay readable at 10–11px — 5.6:1 on white */
  --accent: #d6455d;
  --accent-soft: rgba(214, 69, 93, .07);
  /* bar fills deep enough to stand off the white card; labels keep >= 5:1 */
  --task: #f6c9d6;
  --task-ink: #6e1f31;
  --brk: #d4e6d9; /* sage — breaks no longer amber */
  --brk-ink: #33604a;
  --err: #d64545;
  --ok: #2c7a4b;
  --warn: #c07f1f;
  --shadow: 0 8px 30px rgba(51, 34, 31, .07);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.45 "Avenir Next", "Inter", system-ui, sans-serif;
  overflow: hidden;
}

/* generous margin between the timeline card and the page edge (design-2: 24px sides) */
#shell { display: flex; flex-direction: column; height: 100%; gap: 10px; padding: 18px 24px 20px; }

/* ---------------------------------------------------------------- top bar */

/* the top bar merges with the page background — no card.
   z-index layering (low → high): topbar (2) < prompt bar (3) < issues (4)
   < help overlay (5) */
#topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px 0;
}
.brand { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.spacer { flex: 1; }
.muted { color: var(--muted); font-size: 11px; }

button, #btn-svg {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(51, 34, 31, .08);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
button:hover, #btn-svg:hover {
  border-color: var(--accent);
  box-shadow: 0 3px 8px rgba(51, 34, 31, .13);
}
button:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(51, 34, 31, .08); }

/* the top-right action buttons sit "pressed into" the page: same bg as the
   paper, carved inward with an inner rose shadow (design 13) */
#btn-import, #btn-export, #btn-help {
  background: var(--bg); color: var(--muted); border-color: var(--line-soft);
  padding: 6px 15px;
  box-shadow: inset 0 2px 4px rgba(140, 80, 90, .10), inset 0 -1px 0 #ffffff;
}
#btn-import:hover, #btn-export:hover, #btn-help:hover {
  border-color: var(--line); color: var(--accent);
  box-shadow: inset 0 3px 7px rgba(214, 69, 93, .14), inset 0 -1px 0 #fff;
}
#btn-import:active, #btn-export:active, #btn-help:active {
  transform: none;
  box-shadow: inset 0 4px 10px rgba(214, 69, 93, .20);
}

/* the small circular icon buttons next to the plan chip — stroke icons
   inherit the button colour, so the hover tint (+ green, trash red) is free */
#btn-new-plan, #btn-delete-plan {
  width: 24px; height: 24px; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
#btn-new-plan svg, #btn-delete-plan svg { display: block; }
#btn-new-plan:hover { color: var(--ok); }
#btn-delete-plan:hover { color: var(--err); }

/* plan unit (design G) — chip + buttons merged into ONE track carved into
   the page: same bg as the paper, inner rose shadow, flat children */
.plan-group {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 12px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 999px;
  /* tight padding: the plan chip is a full-height segment hugging the
     track outline (segmented-control look), not a smaller box floating in
     the middle */
  padding: 3px;
  box-shadow: inset 0 2px 5px rgba(140, 80, 90, .10), inset 0 -1px 0 #fff;
}

/* plan switcher — the track's first segment: stretches to the track's full
   inner height with the same stadium radius, so it reads as a selected
   segment of one control, not a box nested in a box.
   `appearance: none` is the key: the native <select> otherwise draws its
   own box (with a capped corner radius), so it never renders as a true
   pill — the chevron is drawn back in as a background image. */
#plan-select {
  -webkit-appearance: none; appearance: none;
  background: var(--accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='12' viewBox='0 0 10 14' fill='none' stroke='%23d6455d' stroke-width='1.6' stroke-linecap='round'><path d='M2 5l3-3 3 3M2 9l3 3 3-3'/></svg>") no-repeat right 10px center;
  color: var(--accent); border: none;
  border-radius: 999px; align-self: stretch; padding: 0 26px 0 12px;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; max-width: 22ch; text-overflow: ellipsis;
  box-shadow: none;
  transition: background .12s ease;
}
/* background-COLOR, not the shorthand — the shorthand would wipe the
   chevron background-image set above */
#plan-select:hover { background-color: rgba(214, 69, 93, .12); }
#plan-select:active { background-color: rgba(214, 69, 93, .16); }
#plan-select:focus { outline: none; }

/* flat inside the track: no border/shadow of their own, blush hover circle
   (green/red hover tint above keeps working — stroke icons inherit colour) */
#btn-new-plan, #btn-delete-plan {
  background: transparent; border: none; color: var(--muted);
  box-shadow: none;
  transition: background .12s ease, color .12s ease;
}
#btn-new-plan:hover, #btn-delete-plan:hover { background: #f6e7e5; }
#btn-new-plan:active, #btn-delete-plan:active { background: #f0dcd9; transform: none; }

/* circular undo/redo icons after the plan group, carved into the page like
   the other action buttons (same inner rose shadow, stroke icons inherit the colour) */
#btn-undo, #btn-redo {
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--muted); border-color: var(--line-soft);
  box-shadow: inset 0 2px 4px rgba(140, 80, 90, .10), inset 0 -1px 0 #ffffff;
}
#btn-undo svg, #btn-redo svg { display: block; }
#btn-undo:hover, #btn-redo:hover {
  border-color: var(--line); color: var(--accent);
  box-shadow: inset 0 3px 7px rgba(214, 69, 93, .14), inset 0 -1px 0 #fff;
}
#btn-undo:active, #btn-redo:active {
  transform: none;
  box-shadow: inset 0 4px 10px rgba(214, 69, 93, .20);
}

/* ------------------------------------------------------------------- grid */

/* the timesheet is the hero card: a stronger, two-layer shadow lifts it off the page
   more than the flat --shadow used by the smaller panels */
#stage-wrap {
  flex: 1; min-height: 0; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 3px 8px rgba(51, 34, 31, .06), 0 14px 34px rgba(51, 34, 31, .12);
}
#stage { display: block; width: 100%; height: 100%; }

/* grid text stays monospace — layout.js clips labels at 6.2 px/char.
   Labels are not selectable and never intercept clicks: the bar/binding
   element underneath is what the mouse selects.
   NOTE: no `fill` here — an ID-scoped rule would outrank the per-class
   colours (.head-date.sel, text.task, …) and paint everything plain ink. */
#stage text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: none; }
#stage text.task, #stage text.break, #stage text.dur, #stage .bar-edge,
#stage .frame-label-bg, #stage .head-count-bg, #stage .binding-bg,
#stage .now-chip, #stage .now-chip-text, #stage .sel-tip-bg, #stage .sel-tip {
  pointer-events: none; /* the bar underneath stays the hit target */
}
.head { font-size: 13px; font-weight: 700; fill: var(--ink); } /* weekday, bold */
.head.sel { fill: var(--accent); } /* narrow-mode header */
.head-date { font-size: 10.5px; font-weight: 400; fill: var(--muted); }
.head-date.sel { fill: var(--accent); } /* the selected day's date is coloured */
.head-count { font-size: 10px; fill: var(--muted); }
.head-count-bg { fill: var(--panel-2); }
.gutter { font-size: 11px; fill: var(--muted); }
.hour { stroke: var(--line); stroke-width: 1; }
.hour.major { stroke: #e3c9c5; }
.vline { stroke: var(--line-soft); } /* column separator, through the header */
.grid30 { stroke: var(--line-soft); stroke-width: 1; } /* 30-min lines */
.grid15 { stroke: var(--line-soft); stroke-width: .5; } /* 15-min lines, only when zoomed in */
.col { fill: #fff; stroke: var(--line-soft); }
.col.sel { fill: var(--accent-soft); }
.frame { fill: none; stroke: var(--accent); stroke-width: 1.5; }
/* the uncapped side of a frame: a white mask line kills the solid rect edge,
   the accent dashes mark the side that has no binding */
.edge-mask { stroke: #fff; stroke-width: 3; }
.frame.open { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.frame-label { font-size: 10.5px; font-weight: 600; fill: var(--accent); }
.frame-label-bg { fill: #fff; stroke: var(--line); }

/* small curved-rectangle bars with a light outline so neighbours stay distinct;
   selection = a darker fill (no outline) */
.bar.task { fill: var(--task); stroke: #e8b4c7; }
.bar.break { fill: var(--brk); stroke: #bfd8cb; }
.bar.task.sel { fill: #efadbf; }
.bar.break.sel { fill: #c0dcc9; }
.bar-edge { fill: var(--accent); }
.bar.dim { fill-opacity: .3; stroke-dasharray: 2 2; }

text.task, text.break { font-size: 12.5px; }
text.task { fill: var(--task-ink); }
text.break { fill: var(--brk-ink); }
text.dim { fill-opacity: .55; }
/* selection is shown by the ring, never by a bold face —
   bold monospace at small sizes smears the text unreadable */
text.task.sel-text { fill: var(--task-ink); }
text.break.sel-text { fill: var(--brk-ink); }
.dur { font-size: 10px; fill: var(--task-ink); opacity: .8; }

.binding-bg { fill: #fff; stroke: var(--line); } /* keeps the label readable over bars */
.binding-bg.sel { fill: #f6d4dc; }
text.binding { font-size: 10px; fill: var(--muted); }
text.binding.sel { fill: var(--accent); }

.narrow.task, .narrow.break { font-size: 11px; }
/* selection popup: pill with the task name when the bar is too small to label */
.sel-tip-bg { fill: #fff; stroke: var(--accent); stroke-width: 1; }
.sel-tip { font-size: 10.5px; font-weight: 600; fill: var(--ink); }

.now { stroke: var(--err); stroke-width: 2; stroke-dasharray: 4 3; opacity: .8; }
.now-chip { fill: var(--err); }
.now-chip-text { font-size: 10px; font-weight: 600; fill: #fff; }
.hit { cursor: pointer; }
.toosmall { fill: var(--warn); font-size: 12px; }

/* ----------------------------------------------------------------- panels */

/* floating error bar: overlays the page bottom-left, hidden when there is
   nothing to report, and sized to fit exactly its content (max-content) */
#issues {
  position: fixed; left: 24px; bottom: 24px; z-index: 4;
  width: max-content; max-width: min(70vw, 640px);
  background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--err);
  border-radius: 10px; padding: 6px 14px; box-shadow: var(--shadow);
  max-height: 30vh; overflow-y: auto;
}
/* while the prompt bar is open, float above it instead of covering the input */
#issues.raised { bottom: calc(20px + 48px + 8px); }
#issues[hidden] { display: none; }
/* wrap instead of nowrap: the box grows taller (it already caps at 30vh and
   scrolls for many issues) instead of clipping long messages */
.issue { font-size: 12.5px; color: var(--ink); white-space: normal; overflow-wrap: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.issue.error, .issue.overflow { color: var(--err); }
.issue.warn { color: var(--warn); }
.issue.repair, .issue.note { color: var(--muted); }

/* the prompt bar is an overlay: opening it must NOT shrink the timeline
   (no zoom/scroll change) — only the bottom strip of the stage behind it is
   hidden, exactly like the issues bar floats over the page */
#prompt-bar {
  position: fixed; left: 24px; right: 24px; bottom: 20px; z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
#prompt-bar[hidden] { display: none; }
#prompt-bar.flash { background: #f7dfe1; }
#prompt-label { color: var(--accent); font-size: 12px; min-width: 15ch; font-weight: 600; }
#prompt-input {
  flex: 1; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px; font: inherit;
}
#prompt-input:focus { outline: none; border-color: var(--accent); }

/* -------------------------------------------------------------- overlays */

#help { position: fixed; inset: 0; background: rgba(51, 34, 31, .35); display: flex; align-items: center; justify-content: center; z-index: 5; }
#help[hidden] { display: none; }
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 20px; max-width: min(760px, 92vw); max-height: 88vh; overflow: auto; }
.sheet h2 { margin: 0 0 10px; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.sheet table { border-collapse: collapse; width: 100%; }
.sheet td { padding: 2px 8px 2px 0; vertical-align: top; font-size: 12.5px; }
.sheet td:first-child { white-space: nowrap; width: 1%; }
kbd { background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
code { color: var(--task-ink); }
.sheet p.muted { color: var(--muted); font-size: 12px; }