/* Content tab — component styles, layered on the design system in
   styles.css the same way settings.css and tasks.css do. Only the .ar-*
   (Audience research) and .cn-* (week planner) anatomy lives here; cards,
   buttons, inputs and chips are the shared classes. */

/* ================= Audience research (#/content?tab=research) =================
   The library of what female coaches actually say — one line per row, filed
   by category and journey stage. The journey is the top strip (pre-revenue →
   $50k+/mo), the categories are a chip rail, and the rows read like a table:
   stage · her words · who added it · quiet hover actions. */

.ar-wrap { max-width: 980px; }

/* ---------- the journey strip: All + one tile per stage ---------- */
.ar-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ar-tile {
  flex: 1; min-width: 108px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 14px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; transition: border-color .12s, background .12s;
}
.ar-tile:hover { border-color: var(--blue-line); }
.ar-tile.active { border-color: var(--blue); background: var(--blue-bg); }
.ar-tile b { display: block; font-size: 20px; line-height: 1.2; }
.ar-tile span { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* ---------- toolbar + category rail ---------- */
.ar-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ar-bar .input { height: 32px; }
.ar-search { flex: 1; min-width: 180px; }
.ar-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- spark ("she’s saying this") ---------- */
.ar-spot {
  position: relative;
  background: linear-gradient(135deg, #182338, #2a3a55);
  color: #eef2f8; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px 16px; margin-bottom: 14px;
}
.ar-spot-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #93a3bb; margin-bottom: 6px; }
.ar-spot-text { font-size: 16.5px; font-weight: 650; line-height: 1.45; max-width: 46em; }
.ar-spot-meta { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ar-spot-meta .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #cfd9e6; }
.ar-spot-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ar-spot-actions .btn { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); color: #eef2f8; }
.ar-spot-actions .btn:hover { background: rgba(255,255,255,.16); }
.ar-spot-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; color: #93a3bb; font-size: 16px; cursor: pointer; line-height: 1;
}
.ar-spot-close:hover { color: #fff; }

/* ---------- category groups + rows ---------- */
.ar-group-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 20px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line-soft);
}
.ar-group-head h3 { font-size: 13.5px; }
.ar-group-hint { margin-left: auto; }
.ar-empty { color: var(--muted); padding: 26px 4px; text-align: center; }

.ar-row {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 10px; margin: 0 -10px; border-radius: 8px;
  transition: background .12s;
}
.ar-row:hover { background: #f7f9fc; }

/* the stage chip: a fixed-width column, so a scan down a category reads the
   journey at a glance — tinted from grey (pre-revenue) to green ($50k+) */
.ar-stage {
  flex: none; width: 88px; margin-top: 1px;
  font-size: 10.5px; font-weight: 700; text-align: center;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 4px;
  background: var(--grey-bg); color: var(--muted);
}
.ar-stage.st-3k  { background: var(--purple-bg); border-color: var(--purple-line); color: var(--purple); }
.ar-stage.st-10k { background: var(--blue-bg);   border-color: var(--blue-line);   color: var(--blue); }
.ar-stage.st-20k { background: var(--amber-bg);  border-color: var(--amber-line);  color: var(--amber); }
.ar-stage.st-50k { background: var(--green-bg);  border-color: var(--green-line);  color: var(--green); }

.ar-text { flex: 1; min-width: 0; font-weight: 550; line-height: 1.5; }
.ar-meta { flex: none; align-self: center; }

/* "Showing N of M · Clear filters" — only rendered when a filter is active */
.ar-filterline { display: flex; align-items: center; color: var(--muted); font-size: 12px; padding: 2px 0 8px; }
.ar-filterline .btn-link { padding: 0 4px; }

/* Row actions: a quiet icon rail that fades in on hover (Copy · Edit), so a
   scan down the library reads as her words, not as buttons. The rail keeps
   its width at rest so rows never shift as the cursor moves. */
.ar-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.ar-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: none;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, opacity .12s;
}
.ar-iconbtn:hover { background: var(--grey-bg); border-color: var(--line); color: var(--ink); }
.ar-iconbtn:active { transform: translateY(.5px); }
.ar-act { opacity: 0; transition: opacity .12s; }
.ar-row:hover .ar-act, .ar-act:focus-visible { opacity: 1; }
@media (hover: none) { .ar-act { opacity: .6; } }

/* ================= Hook templates (#/content?tab=templates) =================
   The third tab: fill-in-the-blank headline formulas, one per row — the
   formula bold, its worked example under it, quiet hover Copy/Edit. */
.ht-wrap { max-width: 980px; }
.ht-hint { color: var(--muted); margin: 0; flex: 1; min-width: 200px; }
.ht-row {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; margin: 0 -10px; border-radius: 8px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s;
}
.ht-row:last-child { border-bottom: 0; }
.ht-row:hover { background: #f7f9fc; }
.ht-row:hover .ar-act, .ht-row .ar-act:focus-visible { opacity: 1; }
.ht-main { flex: 1; min-width: 0; }
.ht-text { font-weight: 650; line-height: 1.5; }
.ht-eg { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ht-detail { color: var(--muted); font-size: 12.5px; margin-top: 4px; white-space: pre-wrap; }
.ht-detail a { color: var(--blue); word-break: break-all; }
.ht-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px;
}
.ht-row .ht-form { flex: 1; }
.ht-form-text { width: 100%; }
.ht-form-text + .ht-form-text { margin-top: 8px; }
.ht-form-detail { resize: vertical; }
.ht-form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.ht-form-del { color: var(--red); margin-left: auto; }

/* ---------- the form's folder combobox ----------
   a free-typed input wearing its own caret + popover (Quick Log's folder-pop
   look) in place of the native datalist's browser-drawn menu */
.ht-folder { position: relative; margin-right: auto; }
.ht-form-folder { width: 200px; padding-right: 30px; }
.ht-folder-btn {
  position: absolute; top: 0; bottom: 0; right: 0; width: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--faint);
}
.ht-folder-btn svg { width: 10px; height: 10px; transition: transform .15s; }
.ht-folder-btn path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ht-folder.open .ht-folder-btn svg { transform: rotate(180deg); }
.ht-folder-pop {
  display: none; position: absolute; top: calc(100% + 5px); left: 0; z-index: 30;
  width: 250px; box-sizing: border-box; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 16px 44px rgba(15, 30, 50, .2); padding: 6px;
}
.ht-folder.open .ht-folder-pop { display: block; animation: pill-pop-in .14s ease-out; }
.ht-folder-group { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--faint); text-transform: uppercase; padding: 7px 9px 3px; }
.ht-folder-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: none; border: none; border-radius: 7px; padding: 6px 9px;
  cursor: pointer; transition: background .12s;
}
.ht-folder-row:hover, .ht-folder-row:focus-visible { background: var(--bg); outline: none; }
.ht-folder-lbl { flex: 1; overflow-wrap: anywhere; }
.ht-folder-check { color: var(--blue); font-weight: 700; width: 12px; text-align: right; }
.ht-folder-new { color: var(--blue); border-top: 1px dashed var(--line-soft); border-radius: 0 0 7px 7px; margin-top: 3px; padding-top: 8px; }

/* ================= Content ideas (#/content?tab=ideas) =================
   The fourth tab: the finished piece on top, the woman's own words under it,
   and the hook it was built from under that — so one row shows the idea and
   both of its receipts without a click. */
.ci-wrap { max-width: 1040px; }
.ci-folders { margin-top: -6px; }
.ci-row {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; margin: 0 -10px; border-radius: 8px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s;
}
.ci-row:last-child { border-bottom: 0; }
.ci-row:hover { background: #f7f9fc; }
.ci-row:hover .ar-act, .ci-row .ar-act:focus-visible { opacity: 1; }
.ci-main { flex: 1; min-width: 0; }
/* her line, quoted — the research entry the piece answers */
.ci-her {
  color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 3px;
  padding-left: 9px; border-left: 2px solid var(--line);
}
/* the formula it was poured into, wearing its shelf */
.ci-hook { color: var(--faint); font-size: 11.5px; margin-top: 4px; }
.ci-hook-folder {
  display: inline-block; margin-right: 6px; padding: 0 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--grey-bg); color: var(--muted);
}
.ci-row .ci-form { flex: 1; }
.ci-form-hook { max-width: 260px; }
.ci-spot-her { color: #cfd9e6; border-left-color: rgba(255,255,255,.25); margin-top: 8px; }

/* ---------- add / edit form ---------- */
.ar-form,
.ci-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px;
}
.ar-row .ar-form { flex: 1; }
.ar-form-text { width: 100%; }
.ar-form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.ar-form-row select.input { width: auto; }
.ar-form-del { color: var(--red); margin-left: auto; }

/* ================= the week planner (Content → Calendar) =================
   A scheduling-tool grid: a column per day, an hour per row, notes dropped
   straight into the slot they go out in. The two popovers (the right-click
   menu and the note composer) are fixed to where the pointer was, so they
   never push the grid around. */
.ct-tabswitch { margin-bottom: 16px; }
.cn-wrap { max-width: 1180px; }

/* ---------- whose calendar (the team's own planner / a client's) ---------- */
.cn-cals { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.cn-calchip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 1px 11px 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
}
.cn-calchip:hover { background: var(--grey-bg); color: var(--ink); }
.cn-calchip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cn-caladd { border-style: dashed; color: var(--faint); font-weight: 600; }
.cn-caladd:hover { border-style: solid; }
/* the line under the chips while a client's calendar is showing: who sees it, where */
.cn-calnote {
  font-size: 12px; color: var(--muted); margin: -2px 0 8px;
  padding: 7px 11px; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 9px;
}
.cn-calnote .cn-calstop, .cn-calnote .cn-calview { margin-left: 6px; font-size: inherit; }
/* the "＋ Client calendar" picker — a right-click-menu skin with a scrolling roster */
.cn-calmenu { min-width: 264px; }
.cn-calmenu-note { font-size: 11.5px; color: var(--faint); padding: 2px 10px 6px; max-width: 250px; }
.cn-calmenu-list { max-height: 288px; overflow-y: auto; }

/* ---------- toolbar ---------- */
.cn-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cn-todaybtn { font-weight: 700; }
.cn-arrows { display: flex; gap: 2px; }
.cn-arrow {
  width: 30px; height: 30px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 18px; line-height: 1;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.cn-arrow:hover { color: var(--ink); border-color: var(--blue-line); background: var(--blue-bg); }
.cn-range { font-size: 16px; font-weight: 700; margin-right: auto; }
.cn-viewswitch { flex: none; }
.cn-foot { margin: 10px 0 0; }
.cn-empty { color: var(--muted); padding: 34px 16px; text-align: center; }

/* ---------- the hour grid ---------- */
/* clip, not hidden: same rounded-corner trim, but clip is NOT a scroll
   container, so the sticky day header below can ride the page's own scroll
   (older engines fall back to hidden and just lose the sticking) */
.cn-card { padding: 0; overflow: hidden; overflow: clip; }
/* The week renders WHOLE — no inner scrollbar with half the day folded away
   behind it (owner's ask, September 2026): the page's own scrollbar does the
   scrolling, and the day header + Any time rail stay pinned under the top of
   the screen on the way down. The box only ever scrolls SIDEWAYS, where the
   grid is wider than the screen (phones, narrow windows). */
.cn-scroll { overflow-x: auto; }
@media (min-width: 1150px) {
  /* wide enough that the grid fits: no scroll box at all, so the sticky
     header sticks to the PAGE (any overflow box would trap it) */
  .cn-scroll { overflow-x: visible; }
}
.cn-hscroll { overflow-x: auto; }   /* the month grid: same minimum, no vertical box */
.cn-week, .cn-month {
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(0, 1fr));
  /* below this the columns stop being readable, so the grid scrolls sideways
     inside its card rather than squeezing seven days into a phone */
  min-width: 860px;
}
/* the height of one half-hour box. It is written once, here, and the cards
   floating over the rail are placed in multiples of it (js/content.js reads it
   back through calc()), so the ruler and the plan can never drift apart. */
.cn-week { --cn-row: 22px; }
.cn-corner, .cn-dayhead {
  position: sticky; top: 0; z-index: 3; height: 40px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.cn-dayhead {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  padding: 9px 4px; border-left: 1px solid var(--line-soft);
}
.cn-dh-wd { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.cn-dh-n { font-size: 15px; font-weight: 700; }
.cn-dayhead.today .cn-dh-wd, .cn-dayhead.today .cn-dh-n { color: var(--blue); }
.cn-dayhead.today { box-shadow: inset 0 -2px 0 var(--blue); }

/* the rail names the hours only; the :30 rows keep an (empty) cell so the
   grid's columns stay aligned, and its bottom edge closes the hour */
.cn-hourlbl {
  padding: 2px 8px 0 0; text-align: right;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid transparent;
}
.cn-halflbl { border-bottom-color: var(--line); }
/* the "Any time" row rides just under the day header rather than scrolling
   away with the hours — an idea with no hour on it yet is exactly the one that
   must not fall off the top of the week */
.cn-anylbl, .cn-anyslot { position: sticky; top: 40px; z-index: 2; }
.cn-anylbl { line-height: 1.15; padding-top: 8px; color: var(--muted); background: var(--surface); }

/* The body of the week: the hour rail in the first column, then one column per
   day. A day column is a stack of 48 half-hour boxes — the ruler, which never
   changes height — with its cards floating over them in .cn-pieces. Note that
   .cn-card is something else entirely: the panel the whole grid sits in. */
.cn-rail, .cn-daycol { min-width: 0; }
.cn-daycol { position: relative; }
/* The cards stop 14px short of the right-hand edge, so every column keeps a
   bare strip of ruler down it. That strip is what makes a covered half hour
   still reachable: a card stands over four boxes, and without the strip there
   would be no way to click the 10:00 box under a card that started at 09:00.
   Click (or right-click) the strip and you are back on the box itself. */
.cn-pieces { position: absolute; inset: 0 14px 0 1px; pointer-events: none; }

/* one box per half hour, at the hour-row rhythm (an hour is two boxes). The
   rules read like a scheduling tool's: a dotted line at the half hour, a solid
   one closing the hour. */
.cn-slot {
  height: var(--cn-row, 22px); padding: 1px 3px; cursor: cell;
  border-left: 1px solid var(--line-soft); border-bottom: 1px dotted var(--line);
}
.cn-rail .cn-hourlbl { height: var(--cn-row, 22px); }
.cn-slot.cn-half { border-bottom-style: solid; }
.cn-anyslot { height: auto; min-height: 40px; background-color: #fbfcfe; border-bottom: 1px solid var(--line); }
.cn-slot.today { background-color: #f6f9ff; }
.cn-slot:hover { background-color: var(--blue-bg); }
.cn-slot.cn-drop, .cn-mcell.cn-drop { background-color: var(--blue-bg); box-shadow: inset 0 0 0 2px var(--blue); }

/* ---------- the month grid ---------- */
.cn-month { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cn-mwd {
  padding: 8px 6px; text-align: center; background: var(--surface);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.cn-mcell {
  min-height: 104px; padding: 4px 5px 6px; cursor: cell;
  border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.cn-mcell:hover { background: #f7f9fc; }
.cn-mcell.out { background: #fafbfd; }
.cn-mcell.out .cn-mnum { color: var(--faint); }
.cn-mcell.today { background: #f6f9ff; }
.cn-mnum { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.cn-mcell.today .cn-mnum { color: var(--blue); }

/* ---------- the list ---------- */
.cn-list { padding: 6px 16px 16px; }
.cn-lday { padding: 12px 0 2px; border-bottom: 1px solid var(--line-soft); }
.cn-lday:last-child { border-bottom: 0; }
.cn-lday h4 { font-size: 12.5px; margin: 0 0 6px; }
.cn-ltoday { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--blue); background: var(--blue-bg); border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.cn-lrows { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
.cn-lrows .cn-note { font-size: 12.5px; }

/* ---------- the tints ---------- */
/* Every tinted thing in the calendar — a note in the grid, the composer's
   swatches, the live note it previews — reads the same three properties, so a
   colour is written once, here. The brand tints come first and the hand-picked
   colours after, so a colour she picked herself wins over the brand's. */
.b-CW { --cn-ink: var(--purple); --cn-bg: var(--purple-bg); --cn-line: var(--purple-line); }
.b-PB { --cn-ink: var(--blue); --cn-bg: var(--blue-bg); --cn-line: var(--blue-line); }
.b-Both { --cn-ink: var(--green); --cn-bg: var(--green-bg); --cn-line: var(--green-line); }
.cn-c1 { --cn-ink: #6d28d9; --cn-bg: #f1ecfd; --cn-line: #d8c8f7; }
.cn-c2 { --cn-ink: #1d4ed8; --cn-bg: #e8effd; --cn-line: #c4d5f6; }
.cn-c3 { --cn-ink: #0f766e; --cn-bg: #e2f4f2; --cn-line: #b5e2dd; }
.cn-c4 { --cn-ink: #15803d; --cn-bg: #e4f5ea; --cn-line: #b9e4c8; }
.cn-c5 { --cn-ink: #b45309; --cn-bg: #fdf0d9; --cn-line: #f3d9a4; }
.cn-c6 { --cn-ink: #c2410c; --cn-bg: #fdeade; --cn-line: #f6cdb0; }
.cn-c7 { --cn-ink: #b91c1c; --cn-bg: #fde7e7; --cn-line: #f5bcbc; }
.cn-c8 { --cn-ink: #be185d; --cn-bg: #fce9f1; --cn-line: #f4bcd4; }
.cn-c9 { --cn-ink: #854d0e; --cn-bg: #f7efdd; --cn-line: #e5d3a8; }
.cn-c10 { --cn-ink: #475569; --cn-bg: #eef1f5; --cn-line: #cfd7e0; }
.cn-tint, .cn-note {
  border-color: var(--cn-line, var(--purple-line));
  background: var(--cn-bg, var(--purple-bg));
  color: var(--cn-ink, var(--purple));
}

/* ---------- a note ---------- */
.cn-note {
  position: relative;                   /* the edited bar pins to the chip */
  display: flex; align-items: flex-start; gap: 5px;
  padding: 3px 7px; margin-bottom: 3px; border-radius: 6px;
  font-size: 11.5px; line-height: 1.35; font-weight: 600;
  border: 1px solid var(--purple-line);
  cursor: grab; overflow: hidden;
}
.cn-note:last-child { margin-bottom: 0; }
.cn-note:hover { filter: brightness(.97); }
.cn-note:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cn-note.cn-dragging { opacity: .45; }
.cn-rep { flex: none; font-size: 10.5px; font-weight: 800; opacity: .7; padding-top: .5px; }
.cn-link { flex: none; font-size: 11px; line-height: 1.35; text-decoration: none; padding-top: .5px; }
/* what ONE day of a repeating note says on top of the series: the line added
   after its title, and the bar that means the listing was edited for its
   day — it carries a line or a doc of its own (read on the hovered-open
   piece, and in the List view under the note). The bar is a straight line
   of the chip's own colour down its whole right edge, clear of the title's
   ellipsis, so it reads at a glance where the old faded 📝 didn't. */
.cn-oc { font-style: normal; font-weight: 600; opacity: .82; }
.cn-oc::before { content: " · "; opacity: .55; }
.cn-mark {
  position: absolute; top: 0; right: 0; bottom: 0; width: 5px;
  background: var(--cn-ink, var(--purple));
  opacity: .8;
}
.cn-dsc {
  flex: 1 0 100%; margin-top: 2px;
  font-size: 11.5px; font-weight: 500; line-height: 1.4; opacity: .8;
  white-space: pre-line;
}
.cn-lrows .cn-note { flex-wrap: wrap; }
/* ---------- a note in the hour grid: one line, until it is hovered ----------
   At rest a piece keeps to its own half-hour box, one line, at the rhythm the
   grid is ruled in — its box's top, one box tall, its doc folded down to the
   edge bar. HOVER it (or land on it with the keyboard) and it takes the room to
   be read: it grows down and half a column across, floating over whatever sits
   under it, while every box of the ruler stays exactly where it was — the
   piece is positioned in a layer of its own, so nothing it does can move the
   grid. Sunday's pieces grow leftward instead, so nothing pokes out of the
   scroller. The side insets default to the whole column and are the custom
   properties a shared box's slices set (js/content.js), which is what lets
   the hover state override them wholesale. */
.cn-piece {
  position: absolute; left: var(--cn-x, 0); right: var(--cn-r, 0); margin: 0;
  max-height: calc(var(--cn-row, 22px) - 3px); overflow: hidden;
  padding: 1px 6px; pointer-events: auto;
  transition: max-height .18s cubic-bezier(.22, .61, .36, 1), left .18s cubic-bezier(.22, .61, .36, 1),
    right .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s ease, padding .18s ease;
}
.cn-piece .cn-txt { display: block; white-space: nowrap; text-overflow: ellipsis; }
.cn-piece .cn-dsc { display: none; }
.cn-piece:hover, .cn-piece:focus-visible {
  z-index: 5; left: 0; right: -46%;
  flex-wrap: wrap; align-content: flex-start;
  max-height: calc(var(--cn-row, 22px) * 9); padding: 5px 8px;
  box-shadow: 0 10px 28px rgba(15, 30, 50, .22);
  transition-delay: .1s;                /* a sweep across the week doesn't ripple */
}
.cn-daycol:last-child .cn-piece:hover, .cn-daycol:last-child .cn-piece:focus-visible { left: -46%; right: 0; }
.cn-piece:hover .cn-txt, .cn-piece:focus-visible .cn-txt {
  flex: 1 0 100%; white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.cn-piece:hover .cn-dsc, .cn-piece:focus-visible .cn-dsc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.cn-piece:hover { filter: none; }       /* the grown piece is lifted, not dimmed */
@media (prefers-reduced-motion: reduce) { .cn-piece { transition: none; } }
/* while a note is being dragged the pieces step out of the way, so the drop
   lands on the half-hour box underneath rather than on a piece covering it */
.cn-week.cn-drag .cn-pieces, .cn-week.cn-drag .cn-piece { pointer-events: none; }
.cn-link:hover { filter: brightness(.85); }
.cn-when { font-size: 10.5px; font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; flex: none; padding-top: .5px; }
/* an idea is a sentence, and everywhere there is room to read one it wraps:
   the list, the month cells, and the hour grid's cards. Only the sticky
   "Any time" rail keeps to one line, since it sits over the week. */
.cn-txt {
  flex: 1; min-width: 0; overflow: hidden;
  white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.cn-lrows .cn-txt { -webkit-line-clamp: 3; }
.cn-mcell .cn-txt { -webkit-line-clamp: 4; }
.cn-anyslot .cn-txt { display: block; white-space: nowrap; text-overflow: ellipsis; }
.cn-anyslot .cn-note:last-child { margin-bottom: 0; }
.cn-note.done { opacity: .6; }
.cn-note.done .cn-txt { text-decoration: line-through; }
.cn-tick {
  flex: none; align-self: flex-start; margin-top: 1px;
  width: 14px; height: 14px; padding: 0; margin-right: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 10px; font-weight: 800; line-height: 1;
  color: inherit; background: rgba(255, 255, 255, .75);
  border: 1.4px solid currentColor; border-radius: 4px; cursor: pointer;
}
.cn-tick:hover { background: #fff; }

/* ---------- right-click menu + note composer ---------- */
.cn-menu {
  position: fixed; z-index: 60; min-width: 232px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16); padding: 4px;
}
.cn-menu a.pay-menu-item { text-decoration: none; }

/* The composer. Every control is a chip, a switch or a swatch you can hit
   first time — nothing here is a dropdown to open and read — and each sits on
   a labelled row, so the whole thing scans top to bottom: what, when, whose,
   how often, what colour, which doc. The live note at the bottom is the same
   note that will be on the calendar a second later. */
.cn-pop {
  position: fixed; z-index: 61; width: 392px;
  max-width: calc(100vw - 16px);           /* a phone gets the composer it has room for */
  max-height: calc(100vh - 20px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .2), 0 2px 6px rgba(15, 23, 42, .06);
  padding: 12px 14px 13px;
  animation: cn-pop-in .13s ease-out;
}
@keyframes cn-pop-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.cn-pop-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
/* the note's colour, on the composer's own head — it changes as she picks */
.cn-pop-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cn-ink); }
.cn-pop-when { font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; color: var(--muted); }
.cn-pop-x { margin-left: auto; background: none; border: 0; color: var(--faint); font-size: 13px; line-height: 1; cursor: pointer; padding: 2px; }
.cn-pop-x:hover { color: var(--ink); }
/* one line to start with, growing into whatever gets typed (cnSizeText) and
   scrolling once it has had its share of the popover */
textarea.cn-pop-text {
  width: 100%; resize: none; overflow-y: auto;
  min-height: 0; max-height: 132px;
  font-size: 13px; line-height: 1.45;
}
/* a row: a fixed rail of tiny labels down the left, its controls to the right */
.cn-fld { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; }
.cn-fl {
  flex: none; width: 48px; padding-top: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
.cn-fv { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.cn-fv .input { height: 28px; font-size: 12px; }
.cn-pop-time { width: 108px; }
.cn-pop-link { flex: 1; min-width: 0; }
/* the one-tap times */
/* the 1px of padding-top on every label below is optical, not spacing: a line
   box reserves room under the baseline for descenders, so a label made of caps
   and x-height ("CW", "Tick-off", "Once") is painted a pixel above the middle
   of a box that centres it geometrically. Half of 2px of padding puts the ink
   itself on the centre line, which is what the eye actually reads. */
.cn-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 2px 10px 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
}
.cn-chip:hover { background: var(--grey-bg); color: var(--ink); }
.cn-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
/* the segmented pickers (brand, repeat) — radios wearing chips */
.cn-seg { display: inline-flex; align-items: center; gap: 2px; background: var(--grey-bg); border-radius: 9px; padding: 2px; }
.cn-seg-opt { position: relative; display: block; cursor: pointer; }
.cn-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cn-seg-opt span {
  display: flex; align-items: center; justify-content: center;
  height: 24px; padding: 2px 9px 0; border-radius: 7px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--muted);
}
.cn-seg-opt:hover span { color: var(--ink); }
.cn-seg-opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 33, 46, .14); }
.cn-seg-opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
/* …and the brand picker wears that brand's own tint once it's the one chosen */
.cn-seg-brand .cn-seg-opt input:checked + span {
  background: var(--cn-bg); color: var(--cn-ink); box-shadow: inset 0 0 0 1px var(--cn-line);
}
.cn-pop-check {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.cn-pop-check:hover { background: var(--grey-bg); color: var(--ink); }
.cn-pop-check:has(input:checked) { border-color: var(--blue-line); background: var(--blue-bg); color: var(--blue); }
.cn-pop-check input { margin: 0; accent-color: var(--blue); }
.cn-pop-check span { position: relative; top: 1px; }
/* the colour picker: the colours themselves, not their names. Each swatch wears
   the tint it will put on the note; the dashed one is Auto — no colour of its
   own, so the note keeps its brand's. */
.cn-sws { display: flex; flex-wrap: wrap; gap: 5px; }
.cn-sw { position: relative; display: block; line-height: 0; cursor: pointer; }
.cn-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cn-sw-dot { display: block; width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid var(--cn-ink); }
.cn-sw-dot.cn-sw-auto { border-style: dashed; border-color: var(--cn-ink); }
.cn-sw input:checked + .cn-sw-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--cn-ink); }
.cn-sw input:focus-visible + .cn-sw-dot { outline: 2px solid var(--blue); outline-offset: 2px; }
.cn-sw:hover .cn-sw-dot { filter: brightness(.97); }
/* the way through to the doc: the composer schedules the piece, the panel is
   where the piece is written */
.cn-pop-docrow { margin-top: 11px; }
.cn-pop-doc { width: 100%; justify-content: center; font-weight: 700; }
.cn-pop-acts {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft);
}
.cn-pop-acts .btn { height: 30px; padding: 0 12px; }
.cn-pop-del { color: var(--red); margin-right: auto; }

/* the Days row: seven toggle chips, hidden whenever the rhythm isn't Daily */
.cn-days-row.hid { display: none; }
.cn-days { display: flex; flex-wrap: wrap; gap: 4px; }
.cn-day { position: relative; display: block; cursor: pointer; }
.cn-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cn-day span {
  display: block; min-width: 30px; padding: 3px 0 4px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; font-weight: 700; color: var(--faint); background: var(--surface);
}
.cn-day:hover span { color: var(--muted); }
.cn-day input:checked + span { border-color: var(--blue-line); background: var(--blue-bg); color: var(--blue); }
.cn-day input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.cn-pop-hint { margin-right: auto; font-size: 10.5px; font-weight: 600; color: var(--faint); }

@media (prefers-reduced-motion: reduce) { .cn-pop { animation: none; } }

/* ---------- the doc (the planner's window on one piece) ----------
   The grid is a week at a glance, so a note on it is a card. The piece is
   longer than a card, and it opens in the middle of the screen: one dialog
   over the dimmed week, holding one listing, one note, on one day. The
   writing fills it, because writing is the point of it; everything that
   schedules the piece stays in the composer, one button away. */
.cn-doc-back { position: fixed; inset: 0; background: rgba(17, 26, 40, .42); z-index: 62; }
.cn-doc {
  position: fixed; z-index: 63;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 680px; max-width: calc(100vw - 32px);
  height: min(76vh, 680px); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15, 30, 50, .26);
  animation: cn-doc-in .16s cubic-bezier(.22, .61, .36, 1);
}
@keyframes cn-doc-in { from { transform: translate(-50%, -50%) scale(.975); opacity: 0; } }
@keyframes cn-doc-up { from { transform: translateY(18px); opacity: .4; } }
/* a repaint while the doc, its drawer or the composer is open (the settings
   toggle, a chip picked, a teammate's sync) rebuilds this DOM from scratch:
   .no-anim, put on by every paint but the opening one, keeps the entrance
   from replaying as a flash */
.cn-doc.no-anim, .cn-doc-set.no-anim, .cn-pop.no-anim { animation: none; }
.cn-doc-head { display: flex; align-items: center; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.cn-doc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cn-ink); }
.cn-doc-when { font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; color: var(--muted); }
.cn-doc-rep {
  flex: none; padding: 2px 8px 3px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--grey-bg);
}
.cn-doc-x { margin-left: auto; background: none; border: 0; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 0 2px 6px; }
.cn-doc-x:hover { color: var(--ink); }
/* the title block: the note's own line, and under it the line this one day adds
   to it — the same two things the calendar shows, in the same order */
.cn-doc-title { padding: 16px 20px 10px; }
.cn-doc-t, .cn-doc-x2 {
  display: block; width: 100%; border: 0; background: none; padding: 2px 0;
  font: inherit; color: var(--ink); outline: none;
}
.cn-doc-t { font-size: 19px; font-weight: 750; letter-spacing: -.2px; line-height: 1.3; }
.cn-doc-x2 { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cn-doc-t::placeholder, .cn-doc-x2::placeholder { color: var(--faint); font-weight: 600; }
.cn-doc-t:focus, .cn-doc-x2:focus { box-shadow: inset 0 -1.5px 0 var(--blue-line); }
/* the writing, and over it its mirror: the same text laid out the same way
   (one shared rule, so the two can never disagree on a font or a wrap), the
   mirror carrying the links as real anchors. The mirror is the ink that's
   read; the textarea underneath keeps only its caret, its selection and its
   spellcheck, and takes every click and keystroke, because the mirror lets
   everything but its links fall through. Both reserve the scrollbar's
   gutter, so a doc long enough to scroll wraps the same on both layers. */
.cn-doc-write { position: relative; flex: 1; min-height: 0; display: flex; }
.cn-doc-body, .cn-doc-mirror {
  box-sizing: border-box; width: 100%; height: 100%; margin: 0;
  padding: 6px 20px 18px; font: inherit; font-size: 13.5px; line-height: 1.62;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
  overflow-y: auto; scrollbar-gutter: stable;
}
.cn-doc-body {
  flex: 1; min-height: 0; resize: none;
  border: 0; background: none; outline: none;
  color: transparent; caret-color: var(--ink);
}
.cn-doc-body::placeholder { color: var(--faint); }
.cn-doc-mirror {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  color: var(--ink); pointer-events: none; user-select: none;
}
.cn-doc-mirror a, .cal-doc-body a {
  pointer-events: auto; color: var(--blue); text-decoration: underline;
  text-decoration-color: var(--blue-line); text-underline-offset: 3px; border-radius: 3px;
}
.cn-doc-mirror a:hover, .cal-doc-body a:hover { text-decoration-color: var(--blue); background: rgba(36, 88, 197, .08); }
.cn-doc-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--line); background: var(--grey-bg);
}
.cn-doc-note { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--faint); }
.cn-doc-foot .btn { height: 30px; padding: 0 12px; }
.cn-doc-link { text-decoration: none; }

/* ---------- the doc's settings drawer ----------
   Everything that schedules the piece, revealed from the doc's own footer
   rather than opened as a second window beside it. Two elements because that
   is what it takes to animate a height nobody has measured: the outer one is a
   one-row grid animating 0fr → 1fr, the inner one clips while it grows. The
   controls themselves are the composer's — the same chips, switches and
   swatches, because it is the same job. */
.cn-doc-set {
  flex: none; display: grid; grid-template-rows: 1fr;
  border-top: 1px solid var(--line); background: var(--grey-bg);
  animation: cn-set-open .22s cubic-bezier(.22, .61, .36, 1);
}
.cn-doc-set-in { min-height: 0; overflow: hidden auto; }
@keyframes cn-set-open { from { grid-template-rows: 0fr; opacity: 0; } }
/* the way out is the way in, reversed: the last paint before the drawer
   leaves the DOM wears .closing and folds back down to nothing */
.cn-doc-set.closing {
  animation: cn-set-close .18s cubic-bezier(.22, .61, .36, 1) forwards;
  pointer-events: none;
}
@keyframes cn-set-close { to { grid-template-rows: 0fr; opacity: 0; } }
/* while the drawer's height is animating, the clipped inner pane must not
   grow a scrollbar for the not-yet-revealed overflow: overflow-y is held
   hidden for the animation's own duration, then goes back to auto */
.cn-doc-set:not(.no-anim):not(.closing) > .cn-doc-set-in { animation: cn-set-clip .22s linear; }
.cn-doc-set.closing > .cn-doc-set-in { overflow-y: hidden; }
@keyframes cn-set-clip { from, to { overflow-y: hidden; } }
.cn-set-form { padding: 4px 20px 12px; }
.cn-set-form .cn-fl { padding-top: 7px; }
.cn-doc-set-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.cn-doc-set-note { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--faint); }
.cn-doc-set-foot .cn-pop-del { margin-right: 0; }
.cn-doc-set-foot .btn { height: 30px; padding: 0 12px; }
/* the which-days chooser rides above the doc dialog (z 63) wherever it opens */
.cn-menu.cn-ask { z-index: 70; }
/* the footer's toggle: a caret that points at what it will do */
.cn-doc-settings { display: inline-flex; align-items: center; gap: 6px; }
.cn-doc-settings.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.cn-doc-caret { display: inline-block; font-size: 11px; line-height: 1; transition: transform .18s ease; }
.cn-doc-settings.on .cn-doc-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .cn-doc, .cn-doc-set { animation: none; }
  /* the fold keeps its name (forwards fill = it still ends folded) but takes
     no time, so reduced motion gets a plain disappearance */
  .cn-doc-set.closing { animation-duration: 0s; }
  .cn-doc-caret { transition: none; }
}
@media (max-width: 560px) {
  /* a phone gets the whole screen for the writing */
  .cn-doc {
    top: 0; left: 0; transform: none;
    width: 100%; max-width: 100%; height: 100vh; max-height: 100vh;
    border: 0; border-radius: 0;
    animation-name: cn-doc-up;
  }
  .cn-doc-title { padding: 13px 16px 8px; }
  .cn-doc-t { font-size: 17px; }
  .cn-doc-body { padding: 6px 16px 16px; }
  .cn-doc-head, .cn-doc-foot, .cn-set-form { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 900px) {
  /* the grid keeps its shape and scrolls sideways rather than squeezing seven
     days into a phone's width */
  .cn-range { font-size: 14.5px; }
  .cn-viewswitch { order: 3; }
}

@media (max-width: 460px) {
  /* narrower than the composer wants: the label rail would leave the pickers
     nothing, so each label stands above its own row instead of beside it, and
     a segmented tray wraps rather than running off the edge */
  .cn-fld { flex-direction: column; align-items: stretch; gap: 3px; margin-top: 8px; }
  .cn-fl { width: auto; padding-top: 0; }
  .cn-seg { flex-wrap: wrap; }
  .cn-pop-time { width: 104px; }
}

@media (max-width: 640px) {
  .ar-tiles { gap: 7px; }
  .ar-tile { min-width: 86px; padding: 8px 10px; }
  /* phones: the stage column would squeeze her words — wrap it above the line */
  .ar-row, .ci-row { flex-wrap: wrap; }
  .ar-text { flex: 1 1 100%; order: 2; }
  .ar-stage { order: 1; }
  .ar-meta { order: 3; }
  .ar-acts { order: 4; margin-left: auto; }
  .ar-act { opacity: .55; }
  /* the idea and both its receipts are one block, under the stage chip */
  .ci-main { flex: 1 1 100%; order: 2; }
  .ci-form-hook { max-width: none; }
}

/* the sharing banner's publish line ("Her page refreshed at 14:02") */
.cn-calpub { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.cn-calpub.bad { color: var(--red); }

/* ================= the scratchpad (Content → Calendar's side panel) =========
   The loose half of planning a week, written as a DOC rather than a list: one
   continuous text beside the grid, with the note doc's own mirror over it so
   the links in it are real links. It stands beside the grid on a wide screen
   and drops under it on a narrow one, and the week keeps its own width either
   way (the wrap widens for the panel rather than the grid being squeezed). */
/* every page stops at 1560px; the planner with the pad open is the one view
   that wants the whole monitor, so it takes the cap off and stops at 1760 */
.view:has(.cn-wrap.has-pad) { max-width: none; }
.cn-wrap.has-pad { --cn-pad-w: clamp(272px, 21vw, 420px); max-width: min(1760px, 100%); }
/* the toolbar belongs to the WEEK, so it stops where the week does rather than
   reaching across the panel: the buttons stay over the grid they work on */
.cn-wrap.has-pad .cn-bar { max-width: calc(100% - var(--cn-pad-w) - 14px); }
/* stretch, so the panel is exactly as long as the calendar beside it */
.cn-body { display: flex; align-items: stretch; gap: 14px; }
/* the card's own bottom margin would make the row taller than the calendar,
   and the panel stretches to the ROW: the foot line carries the gap instead */
.cn-body > .cn-card { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.cn-wrap.has-pad .cn-foot { margin-top: 16px; }
.cn-padbtn { font-weight: 700; }
.cn-padbtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cn-padn { margin-left: 5px; font-size: 15px; line-height: 1; color: var(--blue); }
.cn-padbtn.on .cn-padn { color: #fff; }

.cn-pad {
  /* it takes the room the screen can spare: as wide as a share of the window
     (never under 272px, never so wide it eats the week), and as long as the
     calendar it stands beside — the row stretches it — up to the height of the
     window, past which it sticks instead of running off the bottom */
  flex: 0 0 var(--cn-pad-w, 272px); max-width: 420px;
  position: sticky; top: 12px;
  display: flex; flex-direction: column;
  height: auto; min-height: 320px; max-height: calc(100vh - 24px);
  padding: 12px 0 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.cn-pad-head { display: flex; align-items: center; gap: 6px; padding: 0 13px; }
.cn-pad-head h3 { margin: 0; margin-right: auto; font-size: 14px; font-weight: 700; }
.cn-pad-copy, .cn-pad-hide {
  height: 24px; padding: 0 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; cursor: pointer;
  background: none; color: var(--muted); border: 1px solid transparent; border-radius: 7px;
}
.cn-pad-hide { width: 24px; padding: 0; font-size: 13px; color: var(--faint); }
.cn-pad-copy:hover, .cn-pad-hide:hover { background: var(--grey-bg); color: var(--ink); border-color: var(--line); }
.cn-pad-copy[disabled] { opacity: .4; cursor: default; }
.cn-pad-copy[disabled]:hover { background: none; color: var(--muted); border-color: transparent; }
.cn-pad-hint { margin: 5px 13px 0; font-size: 11.5px; line-height: 1.45; color: var(--faint); }

/* the writing, and over it its mirror — the note doc's pair, at the panel's
   own size (see .cn-doc-body / .cn-doc-mirror: the mirror is the ink that is
   read, the textarea underneath keeps its caret and takes every keystroke) */
.cn-pad-write { position: relative; flex: 1; min-height: 0; display: flex; margin-top: 8px; }
.cn-pad-body, .cn-pad-mirror {
  box-sizing: border-box; width: 100%; height: 100%; margin: 0;
  padding: 8px 13px 12px; font: inherit; font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
  overflow-y: auto; scrollbar-gutter: stable;
}
.cn-pad-body {
  flex: 1; min-height: 0; resize: none;
  border: 0; background: none; outline: none;
  color: transparent; caret-color: var(--ink);
}
.cn-pad-body::placeholder { color: var(--faint); }
.cn-pad-mirror {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  color: var(--ink); pointer-events: none; user-select: none;
}
.cn-pad-mirror a {
  pointer-events: auto; color: var(--blue); text-decoration: underline;
  text-decoration-color: var(--blue-line); text-underline-offset: 3px; border-radius: 3px;
}
.cn-pad-mirror a:hover { text-decoration-color: var(--blue); background: rgba(36, 88, 197, .08); }
.cn-pad-foot {
  margin: 0; padding: 8px 13px 9px; border-top: 1px solid var(--line); background: var(--grey-bg);
  font-size: 10.5px; line-height: 1.45; color: var(--faint);
}
.cn-pad-foot [data-cn-pad-meta] { display: block; font-weight: 700; color: var(--muted); }

@media (max-width: 1440px) {
  /* the week itself wants 860px, and under this the sidebar plus the panel
     leave it less than that (the grid would start scrolling sideways inside
     its card): the pad drops under the grid instead, full width */
  .cn-body { display: block; }
  /* the panel is under the grid here, so the toolbar has the whole width back */
  .cn-wrap.has-pad .cn-bar { max-width: none; }
  .cn-pad { max-width: none; margin-top: 12px; position: static; height: clamp(320px, 55vh, 640px); max-height: none; }
}