/* ═══════════════════════════════════════════════════════════════════════
   THE CALENDAR, THIRD BUILD (12 Sep 2026) — frontend/_cal.css
   Served by /_cal.css. The box model only; frames, pills and buttons are
   drawn by _cal.js in her pen (rough.js). Kind colours ride on --kc.
   Desktop: sticky toolbar → Next up → the grid. Phone (.ph): compact head,
   week strip, agenda; month = dots + the day's list; sheets from the bottom.
   ═══════════════════════════════════════════════════════════════════════ */
.cal-wrap.dc{padding-bottom:48px;--dc-r:10px}
.cal-wrap.dc .cal-head{margin-bottom:2px}
.cal-wrap.dc .cal-sub{margin-bottom:10px;max-width:560px}
.cal-wrap.dc svg.cardink,.cal-wrap.dc svg.cellink,.cal-wrap.dc svg.pillink,.cal-wrap.dc svg.chipink,.cal-wrap.dc svg.btnink,
.dc-modal svg.cardink,.dc-modal svg.chipink,.dc-modal svg.btnink,.dc-offer svg.cardink,.dc-offer svg.btnink{
  position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;overflow:visible;pointer-events:none;z-index:0}
.dc-next>*:not(svg),.dc-quick>*:not(svg),.dc-cell>*:not(svg),.dc-wday>*:not(svg),.dc-agd>*:not(svg),.dc-daylist>*:not(svg),.dc-pill>*:not(svg),
.dc-ib>*:not(svg),.dc-nav>*:not(svg),.dc-today>*:not(svg),.dc-ask>*:not(svg),.dc-add>*:not(svg),.dc-fab>*:not(svg),
.dc-kb>*:not(svg),.dc-pb>*:not(svg),.dc-rb>*:not(svg),.dc-sw-k>*:not(svg),
.dc-save>*:not(svg),.dc-done>*:not(svg),.dc-cancel>*:not(svg),.dc-del>*:not(svg),.dc-test>*:not(svg),.dc-gconnect>*:not(svg),
.dc-offer>*:not(svg),.dc-sheet>*:not(svg){position:relative;z-index:1}
.dc-cell>.dc-cell-add,.dc-wday>.dc-cell-add,.dc-ib>.dc-badge{position:absolute!important}
.dc-quick>.dc-q-ico,.dc-quick>.dc-q-hint{position:relative}

/* ── head ─────────────────────────────────────────────────────────────── */
.dc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.dc-tools{display:flex;gap:6px;flex:none;padding-top:4px}
.dc-ib{position:relative;width:38px;height:38px;border:none;background:transparent;cursor:pointer;color:var(--ink);padding:0}
.dc-ib .dc-ico{width:18px!important;height:18px!important;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.dc-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--lav);color:#fff;
  font-family:var(--hand);font-size:12px;font-weight:700;line-height:18px;text-align:center;opacity:0;transform:scale(.6);transition:all .25s;z-index:2}
.dc-badge.show{opacity:1;transform:none}
.dc-tabn{display:inline-block;margin-left:6px;min-width:16px;padding:0 4px;border-radius:8px;background:var(--lav-16);color:var(--lav);
  font-family:var(--hand);font-size:12px;line-height:16px;text-align:center;font-weight:700}

/* ── the toolbar: sticky inside the scroller ─────────────────────────── */
.dc-toolbar{position:sticky;top:-17px;z-index:5;background:var(--paper);padding:23px 0 6px;margin:-17px 0 10px}
[data-theme="dark"] .dc-toolbar{background:var(--paper)}
.dc-tb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dc-tb-nav{display:flex;align-items:center;gap:4px;min-width:0}
.dc-nav{position:relative;width:34px;height:34px;border:none;background:transparent;cursor:pointer;font-family:var(--serif);font-size:20px;line-height:1;color:var(--ink);padding:0}
.dc-nav:active{transform:translateY(1px)}
.dc-mon{font-family:var(--serif);font-size:19px;font-weight:600;padding:0 4px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dc-today{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--hand);font-size:14px;color:var(--ink);padding:5px 12px;margin-left:4px;order:-1;margin-right:6px}
.dc-views{display:flex;gap:2px;margin-left:8px}
.dc-vt{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--serif);font-size:15px;color:var(--mute);padding:6px 9px 8px}
.dc-vt.on{color:var(--ink);font-weight:600}
.dc-vt:hover{color:var(--ink)}
.dc-vt-ink{position:absolute;left:0;right:0;bottom:0;height:10px!important;width:100%!important;pointer-events:none}
.dc-add{position:relative;margin-left:auto;font-family:var(--hand);font-size:15px;font-weight:600;padding:7px 18px;border:none;background:transparent;cursor:pointer}
.dc-add span{color:#fff}
.dc-filters{display:flex;gap:2px;flex-wrap:wrap;margin-top:2px}
.dc-f{border:none;background:transparent;cursor:pointer;font-family:var(--hand);font-size:13px;color:var(--mute);padding:2px 7px;display:flex;align-items:center;gap:5px;border-radius:8px}
.dc-f i{width:7px;height:7px;border-radius:50%;background:var(--kc,var(--lav))}
.dc-f.off{opacity:.35}
.dc-f:hover{background:var(--lav-08);color:var(--ink)}
.dc-fx{color:var(--lav)}

/* ── rows (Next up, agenda, the day's list) ──────────────────────────── */
.dc-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer;min-height:40px}
.dc-row:hover{background:var(--lav-08)}
.dc-row.dragging{opacity:.4}
.dc-row.done{opacity:.55}
.dc-row.done .dc-r-t{text-decoration:line-through;text-decoration-color:var(--mute)}
/* ── her hand (14 Sep 2026) ───────────────────────────────────────────
   --pen is Caveat and --hand is Inter. The rest of the app writes in her
   pen 147 times; this panel used it exactly nought, which is most of why
   it read as a calendar somebody else shipped. It is on the SHORT things
   she says - a time, a verdict, an aside - and never on body copy or a
   field the user types into, where a script face just costs legibility.
   Caveat sets small, so every switch here also goes up ~1.5px. */
.dc-r-when{flex:none;width:92px;font-family:var(--pen);font-size:15.5px;color:var(--lav);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-r-when.late{color:#D8453F}
.dc-r-when.ready{color:#c8912f}
.dc-r-when.now{color:var(--ink);font-weight:700}
.dc-r-when.dim{color:var(--soft)}
.dc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:var(--kc,var(--lav))}
.dc-r-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dc-r-t{font-family:var(--sans);font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-r-s{font-family:var(--hand);font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-r-s:empty{display:none}
.dc-by{font-family:var(--pen);font-style:normal;font-size:14px;color:var(--lav);margin-left:6px}
.dc-state{flex:none;font-family:var(--pen);font-size:14.5px;font-weight:600;color:var(--mute);white-space:nowrap}
.dc-state.late{color:#D8453F} .dc-state.ready{color:#c8912f} .dc-state.done{color:#3f9163}

/* ── Next up (desktop) ───────────────────────────────────────────────── */
.dc-next{position:relative;padding:10px 12px 8px;margin:0 0 12px}
.dc-nx-h{font-family:var(--pen);font-size:16.5px;color:var(--mute);padding:2px 8px 6px;display:flex;align-items:center;gap:10px}
.dc-nx-warn{font-family:var(--pen);font-size:14.5px;color:#D8453F}
.dc-nx-warn.amb{color:#c8912f}
.dc-nx-ask{margin-left:auto;font-family:var(--pen);font-size:15px;color:var(--lav);cursor:pointer}
.dc-nx-ask:hover{text-decoration:underline}
.dc-next.empty{padding:14px 18px 16px}
.dc-next.empty .dc-nx-h{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:600;padding:0 0 2px}
.dc-nx-empty{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:640px;margin-bottom:10px}
.dc-ask{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--hand);font-size:15px;font-weight:600;color:var(--lav);padding:7px 16px}
.dc-nx-more{font-family:var(--hand);font-size:14px;color:var(--lav);padding:6px 8px 2px;cursor:pointer}

/* ── the quick line (desktop) ────────────────────────────────────────── */
.dc-quick{position:relative;display:flex;align-items:center;gap:8px;padding:4px 14px 4px 12px;margin:0 0 14px}
.dc-q-ico{width:16px!important;height:16px!important;flex:none;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dc-quick input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--sans);font-size:14px;color:var(--ink);padding:7px 4px;outline:none}
.dc-quick input::placeholder{color:var(--soft);font-family:var(--hand);font-size:14.5px}
.dc-q-hint{font-family:var(--hand);font-size:13px;color:var(--soft)}

/* ── the wide layout: the calendar, and a rail beside it ─────────────── */
html[data-ia="threads"].ia-sd-max #side .cal-wrap.dc{max-width:none;padding:0 24px}
#calendar>.cal-wrap.dc{max-width:none;padding:0 28px}
.dc-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.dc-rail{position:sticky;top:64px;display:flex;flex-direction:column;gap:12px}
.dc-rail .dc-next{margin:0}
.dc-rail .dc-quick{margin:0}
.dc-rail .dc-ideas{margin-top:2px}
.dc-rail .dc-r-when{width:72px}
.dc-rail .dc-nx-ask{display:none}
.dc-rail .dc-row{padding:6px 4px;gap:8px}

/* ── month (desktop): thin lines, a filled circle for today ──────────── */
/* the day names are a HEADER, not a week: grid-auto-rows made every
   implicit row 1fr, so Mon-Sun sat at the top of a 92px blank band and
   the month looked like it began with an empty week */
.dc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:auto repeat(var(--dc-weeks,6),minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  min-height:calc(100vh - 210px)}
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-grid{min-height:0;
  grid-template-rows:auto repeat(var(--dc-weeks,6),minmax(92px,auto))}
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-grid .dc-pt{display:none}
.dc-dow{font-family:var(--pen);font-size:15px;letter-spacing:0;color:var(--mute);text-align:center;padding:3px 0 5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dc-cell{position:relative;min-height:92px;padding:4px 4px 18px;cursor:default;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dc-cell:hover{background:var(--lav-08)}
.dc-dnum{display:flex;align-items:center;justify-content:flex-start;margin:0 0 3px;padding:2px 2px 0}
.dc-dnum b{position:relative;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-soft);min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:12px;padding:0 5px}
/* today is a circle SHE drew round it, not a filled dot from a database.
   ink() puts a rough oval in here; the wash is what shows if rough.js
   never loads, so today is never unmarked. */
.dc-dnum b>span{position:relative;z-index:1}
.dc-dnum b>svg{position:absolute;inset:-3px;width:auto;height:auto;overflow:visible;pointer-events:none}
.dc-cell.today .dc-dnum b{background:var(--lav-16);color:var(--lav);font-weight:600}
.dc-cell.sel:not(.today) .dc-dnum b{background:var(--lav-08);color:var(--ink)}
.dc-cell.past:not(.has) .dc-dnum b{color:var(--soft)}
.dc-cell.out .dc-dnum b{color:var(--soft)}
.dc-cell.out{background:color-mix(in srgb,var(--line) 30%,transparent)}
.dc-cell.dc-over,.dc-tg-col.dc-over,.dc-tg-ad.dc-over,.dc-agd.dc-over,.dc-daylist.dc-over,.dc-ideas.dc-over,.dc-sd.dc-over,.dc-mc.dc-over{background:var(--lav-08);outline:2px dashed var(--lav);outline-offset:-2px}
.dc-cell-add{position:absolute;right:4px;bottom:2px;width:22px;height:22px;border:none;border-radius:50%;background:transparent;color:var(--lav);
  font-family:var(--pen);font-size:21px;line-height:22px;cursor:pointer;opacity:0;transition:opacity .15s;z-index:2}
@media (hover:hover){.dc-cell:hover .dc-cell-add{opacity:1}}
.dc-cell-add:hover{background:var(--lav-16)}
.dc-more{font-family:var(--pen);font-size:13.5px;color:var(--mute);padding:1px 6px 2px;cursor:pointer}
.dc-more:hover{color:var(--ink)}

/* ── the pill: a wash, an inked edge, and the page's own ink ──────────
   (14 Sep 2026) A saturated block with white type is a Google Calendar
   chip - it was the one thing in here that looked like somebody else's
   product. Everywhere ELSE in this app a coloured thing is drawn as a
   wash of that colour behind an inked left edge, with the page's ink on
   top: .ax-tht, .ax-vb, .rt-ov, .db-sec all do it. So does the calendar
   now. The kind is still readable at a glance from the edge and the
   pen-written time; it just reads as paper somebody wrote on. */
.dc-pill{position:relative;display:flex;align-items:center;gap:5px;padding:2px 7px 2px 6px;margin:0 0 3px;cursor:pointer;
  font-family:var(--sans);font-size:12px;color:var(--ink);min-height:20px;min-width:0;line-height:1.3;
  background:color-mix(in srgb,var(--kc,var(--lav)) 13%,transparent);
  border-left:2.5px solid color-mix(in srgb,var(--kc,var(--lav)) 72%,transparent);
  border-radius:0 8px 8px 0}
.dc-pill:hover{background:color-mix(in srgb,var(--kc,var(--lav)) 22%,transparent)}
.dc-pt{font-family:var(--pen);font-size:13.5px;font-weight:600;flex:none;line-height:1;
  color:color-mix(in srgb,var(--kc,var(--lav)) 62%,var(--ink))}
.dc-ptxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:500}
.dc-pill.done{background:transparent;color:var(--mute);border-left-color:var(--line)}
.dc-pill.done .dc-pt{color:var(--soft)}
.dc-pill.done .dc-ptxt{text-decoration:line-through}
.dc-pill.late{background:color-mix(in srgb,#D8453F 14%,transparent);border-left-color:#D8453F}
.dc-pill.late .dc-pt{color:#D8453F}
.dc-pill.dragging{opacity:.4}

/* ── week: the hour grid ─────────────────────────────────────────────── */
.dc-tg{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:calc(100vh - 200px);min-height:420px}
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-tg{height:calc(100vh - 230px)}
.dc-tg-head,.dc-tg-allday{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));flex:none;border-bottom:1px solid var(--line)}
.dc-tg-corner{font-family:var(--sans);font-size:10.5px;color:var(--soft);text-align:right;padding:4px 6px 0 0;border-right:1px solid var(--line)}
.dc-tg-dh{text-align:center;padding:6px 0 4px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:1px}
.dc-tg-dh span{font-family:var(--pen);font-size:14px;letter-spacing:0;color:var(--mute)}
.dc-tg-dh b{position:relative;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);width:36px;height:36px;line-height:36px;border-radius:50%}
.dc-tg-dh b>span{position:relative;z-index:1;font-family:inherit;font-size:inherit;color:inherit}
.dc-tg-dh b>svg{position:absolute;inset:-2px;width:auto;height:auto;overflow:visible;pointer-events:none}
.dc-tg-dh.today span{color:var(--lav)}
.dc-tg-dh.today b{background:var(--lav-16);color:var(--lav);font-weight:600}
.dc-tg-ad{min-height:26px;padding:2px 3px;border-right:1px solid var(--line)}
.dc-tg-ad .dc-pill{margin:1px 0}
.dc-tg-body{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));overflow-y:auto;flex:1;position:relative;scrollbar-width:thin}
.dc-tg-hours{position:relative;border-right:1px solid var(--line)}
.dc-tg-hr{height:var(--tg-h);font-family:var(--sans);font-size:10.5px;color:var(--soft);text-align:right;padding-right:6px;transform:translateY(-7px)}
.dc-tg-col{position:relative;border-right:1px solid var(--line);height:calc(var(--tg-h) * var(--tg-n));cursor:copy}
.dc-tg-col.today{background:var(--lav-08)}
.dc-tg-col.past{cursor:default}
.dc-tg-line{height:var(--tg-h);border-bottom:1px solid var(--line);box-sizing:border-box}
/* the same wash as the month pill - one language across both views */
.dc-ev{position:absolute;z-index:2;overflow:hidden;padding:3px 6px;cursor:pointer;box-sizing:border-box;min-width:0;
  font-family:var(--sans);color:var(--ink);
  background:color-mix(in srgb,var(--kc,var(--lav)) 15%,var(--paper));
  border-left:3px solid color-mix(in srgb,var(--kc,var(--lav)) 72%,transparent);
  border-radius:0 7px 7px 0}
.dc-ev b{display:block;font-size:12.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-ev span{display:block;font-family:var(--pen);font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:color-mix(in srgb,var(--kc,var(--lav)) 62%,var(--ink))}
.dc-ev.short{padding:1px 6px;display:flex;align-items:center;gap:5px}
.dc-ev.short b,.dc-ev.short span{display:inline}
.dc-ev.done{background:var(--paper);color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);border-left-color:var(--soft)}
.dc-ev.done span{color:var(--soft)}
.dc-ev:hover{background:color-mix(in srgb,var(--kc,var(--lav)) 26%,var(--paper));z-index:3}
.dc-ev.dragging{opacity:.4}
.dc-tg-now{position:absolute;left:0;right:0;height:0;border-top:2px solid #D8453F;z-index:4;pointer-events:none}
.dc-tg-now::before{content:'';position:absolute;left:-5px;top:-5px;width:8px;height:8px;border-radius:50%;background:#D8453F}

/* ── agenda ──────────────────────────────────────────────────────────── */
.dc-ag{display:flex;flex-direction:column;gap:6px}
.dc-agd{position:relative;display:flex;gap:10px;padding:8px 10px;border-radius:10px}
.dc-agd:not(.today):not(.urgent){border-top:1px dashed var(--line)}
.dc-agdate{flex:none;width:52px;display:flex;flex-direction:column;align-items:center;font-family:var(--pen);font-size:14px;color:var(--mute);padding-top:4px}
.dc-agdate b{font-family:var(--serif);font-size:22px;line-height:1;color:var(--ink);font-weight:600}
.dc-agdate em{font-style:normal;color:var(--lav);font-size:12px}
.dc-agd.today .dc-agdate b{color:var(--lav)}
.dc-agd.urgent .dc-agdate b{color:#D8453F}
.dc-agrows{flex:1;min-width:0;display:flex;flex-direction:column}
.dc-agmt{font-family:var(--serif);font-size:15px;color:var(--ink-soft);padding:14px 4px}
.dc-dl-none{font-family:var(--pen);color:var(--soft);font-size:15.5px;padding:8px 8px}
.dc-dl-none a{color:var(--lav);text-decoration:none}
.dc-past-blk{margin-top:16px}
.dc-past-blk summary{font-family:var(--hand);font-size:15px;color:var(--mute);cursor:pointer;padding:6px 4px;list-style:none}
.dc-past-blk summary::before{content:'▸ ';color:var(--lav)}
.dc-past-blk[open] summary::before{content:'▾ '}
.dc-past-blk .dc-ag{margin-top:6px;opacity:.8}

/* ── ideas ───────────────────────────────────────────────────────────── */
.dc-ideas{margin-top:18px;padding:4px;border-radius:10px}
.dc-ideas summary{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;padding:6px 4px;list-style:none;display:flex;align-items:baseline;gap:8px}
.dc-ideas summary::before{content:'▸';color:var(--lav);font-size:14px}
.dc-ideas[open] summary::before{content:'▾'}
.dc-ideas summary b{font-family:var(--hand);color:var(--lav);font-weight:600}
.dc-blk-hint{font-family:var(--hand);font-size:13px;color:var(--soft);font-weight:400;margin-left:auto}
.dc-brows{display:flex;flex-direction:column;gap:1px;padding:2px 0}
.dc-brow{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;min-height:36px}
.dc-brow:hover{background:var(--lav-08)}
.dc-brow.dragging{opacity:.4}
.dc-b-t{font-family:var(--sans);font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-b-f{font-family:var(--hand);font-size:13px;color:var(--mute);flex:none}

/* ── the modal (editor · bell · settings) ────────────────────────────── */
.dc-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
.dc-mback{position:absolute;inset:0;background:rgba(20,16,10,.28);backdrop-filter:blur(2px)}
[data-theme="dark"] .dc-mback{background:rgba(0,0,0,.5)}
.dc-sheet{position:relative;width:min(620px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:14px;box-shadow:0 22px 60px rgba(0,0,0,.18)}
.dc-sheet-s{width:min(520px,100%)}
.dc-grip{display:none}
.dc-sheet-in{position:relative;z-index:1;overflow-y:auto;padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.dc-sheet-in::-webkit-scrollbar{width:0}
.dc-ed-top{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.dc-ed-title{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}
.dc-ed-title #dc-ed-word{text-transform:lowercase}
.dc-ed-by{font-family:var(--hand);font-size:13.5px;color:var(--mute)}
.dc-x{margin-left:auto;border:none;background:transparent;font-size:26px;line-height:1;color:var(--mute);cursor:pointer;padding:0 4px;width:36px;height:36px}
.dc-x:hover{color:var(--ink)}
.dc-kinds{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:2px}
.dc-kb,.dc-pb,.dc-rb{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--hand);font-size:14px;color:var(--ink);padding:5px 11px;display:flex;align-items:center;gap:6px;min-height:32px}
.dc-kb i{width:8px;height:8px;border-radius:50%;background:var(--kc)}
.dc-kb.on{color:var(--kc);font-weight:700}
.dc-pb.on,.dc-rb.on{color:var(--lav);font-weight:700}
.dc-in{width:100%;box-sizing:border-box;min-height:38px}
.dc-in.dc-bad{outline:2px solid #D8453F;outline-offset:2px}
.dc-in-s{font-size:13.5px}
.dc-in-t{width:auto;display:inline-block;padding:2px 6px;font-size:13px;margin:0 2px;min-height:0}
.dc-ta-s{min-height:56px}
.dc-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dc-row3{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:8px}
.dc-lab{display:flex;flex-direction:column;gap:3px;font-family:var(--hand);font-size:13px;color:var(--mute);min-width:0}
.dc-lab-h{font-family:var(--pen);font-size:15.5px;color:var(--mute);margin:4px 0 2px;display:flex;align-items:baseline;gap:8px}
.dc-lab-s{font-size:12.5px;color:var(--soft)}
.dc-plat{display:flex;gap:4px;flex-wrap:wrap}
.dc-attach{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:10px;background:var(--lav-08)}
.dc-attach-note,.dc-hint,.dc-proof,.dc-linked{font-family:var(--pen);font-size:15px;color:var(--mute);line-height:1.45}
/* the account cannot be posted to - said where the booking is made, and in
   her own ink rather than a browser-red error box (14 Sep 2026) */
.dc-attach-warn{font-family:var(--pen);font-size:15px;line-height:1.45;color:var(--ink);
  padding:6px 9px;border-radius:8px;background:var(--lav-16);border-left:2px solid var(--lav)}
.dc-warn-a{color:var(--lav);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.dc-proof a,.dc-linked a,.dc-gcal{color:var(--lav);text-decoration:none;border-bottom:1px solid var(--lav-16)}
.dc-check{display:flex;flex-direction:column;gap:2px}
.dc-ck{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;color:var(--ink);padding:5px 2px;min-height:32px}
.dc-ck input{accent-color:var(--lav);width:18px;height:18px}
.dc-ck.done span{text-decoration:line-through;color:var(--mute)}
.dc-ck-x{margin-left:auto;border:none;background:transparent;color:var(--soft);cursor:pointer;font-size:18px;opacity:0;width:32px;height:32px}
.dc-ck:hover .dc-ck-x{opacity:1}
.dc-rems{display:flex;gap:4px;flex-wrap:wrap}
.dc-ed-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.dc-save,.dc-done,.dc-cancel,.dc-del,.dc-test,.dc-gconnect{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--hand);font-size:15px;font-weight:600;padding:8px 18px;color:var(--ink);white-space:nowrap;text-decoration:none;display:inline-block;min-height:38px}
.dc-save span{color:#fff}
.dc-del{color:#D8453F}
.dc-test-x{color:#D8453F}
.dc-gcal{margin-left:auto;font-family:var(--hand);font-size:14px}
.dc-hint.dc-ind{margin-left:34px;margin-top:-4px}

/* the switch, drawn */
.dc-sw{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 0}
.dc-sw input{position:absolute;opacity:0;width:0;height:0}
.dc-sw-k{position:relative;width:34px;height:20px;flex:none;display:block}
.dc-sw-k i{position:absolute;top:5px;left:5px;width:10px;height:10px;border-radius:50%;background:var(--mute);transition:all .18s;z-index:1}
.dc-sw input:checked+.dc-sw-k i{left:19px;background:var(--lav)}
.dc-sw-l{font-family:var(--sans);font-size:14px;color:var(--ink);display:flex;flex-direction:column}
.dc-sw-l small{font-family:var(--hand);font-size:13px;color:var(--mute)}
.dc-set-sec{padding:6px 0 4px;border-top:1px dashed var(--line)}
.dc-set-sec:first-of-type{border-top:none}
.dc-gc-on{font-family:var(--sans);font-size:14px;color:var(--ink);line-height:1.5}
.dc-bad-t{font-family:var(--hand);color:#D8453F;font-size:13px}

/* the inbox */
.dc-inbox{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow-y:auto}
.dc-ii{padding:9px 10px;border-radius:10px;cursor:pointer}
.dc-ii:hover{background:var(--lav-08)}
.dc-ii.unread{background:var(--lav-08)}
.dc-ii-h{display:flex;align-items:center;gap:8px;font-family:var(--hand);font-size:12.5px;color:var(--mute)}
.dc-ii-k{color:var(--lav);font-weight:600}
.dc-ii-title{font-family:var(--serif);font-size:15.5px;color:var(--ink);font-weight:600;margin:1px 0 2px}
.dc-ii-b{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);line-height:1.45;white-space:normal}

/* the shoot offer after a post lands */
.dc-offer{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:8000;display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--surface);border-radius:12px;font-family:var(--serif);font-size:15px;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.15);max-width:calc(100vw - 32px)}
.dc-offer>button{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--hand);font-size:15px;font-weight:600;padding:6px 14px;color:#fff}
.dc-offer>button.dc-offer-no{color:var(--mute)}

/* ── the column (desktop, not full page) ─────────────────────────────── */
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-cell{min-height:86px}
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-r-when{width:84px}
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-row3{grid-template-columns:1fr 1fr}
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-views{margin-left:2px}
html[data-ia="threads"]:not(.ia-sd-max) #side .dc-mon{font-size:17px}

/* ═══ THE PHONE (.ph) ═══════════════════════════════════════════════════ */
.cal-wrap.dc.ph{padding-bottom:96px}
.cal-wrap.dc.ph .dc-top{margin-bottom:2px;align-items:center}
.cal-wrap.dc.ph .cal-head{font-size:24px;margin:0}
.cal-wrap.dc.ph .dc-toolbar{padding:21px 0 4px;margin-bottom:6px}
.cal-wrap.dc.ph .dc-top{margin-bottom:18px}
.cal-wrap.dc.ph .dc-tb-row{flex-wrap:nowrap;justify-content:space-between}
.cal-wrap.dc.ph .dc-tb-nav{flex:1;min-width:0}
.cal-wrap.dc.ph .dc-nav{width:36px;height:36px}
.cal-wrap.dc.ph .dc-mon{font-size:16px;flex:none;overflow:visible;padding:0 2px}
.cal-wrap.dc.ph .dc-today{padding:4px 7px;margin:0 2px 0 0;font-size:13px}
.cal-wrap.dc.ph .dc-views{margin-left:4px;flex:none}
.cal-wrap.dc.ph .dc-vt{font-size:14px;padding:6px 5px 8px}
.cal-wrap.dc.ph .dc-nav{width:30px;height:34px}
.cal-wrap.dc.ph .dc-filters{gap:0}
.cal-wrap.dc.ph .dc-f{font-size:12.5px;padding:2px 6px}

/* the week strip */
.dc-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin:2px 0 10px;position:sticky;top:var(--dc-strip-top,44px);z-index:4;background:var(--paper);padding-bottom:6px}
.dc-sd{border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;border-radius:12px;min-height:56px;color:var(--ink)}
.dc-sd-w{font-family:var(--pen);font-size:13.5px;color:var(--mute)}
.dc-sd-n{position:relative;font-family:var(--serif);font-size:16px;font-weight:600;width:30px;height:30px;line-height:30px;border-radius:50%;text-align:center}
.dc-sd-n>span{position:relative;z-index:1}
.dc-sd-n>svg{position:absolute;inset:-2px;width:auto;height:auto;overflow:visible;pointer-events:none}
.dc-sd.today .dc-sd-n{color:var(--lav)}
.dc-sd.sel .dc-sd-n{background:var(--lav-16);color:var(--lav)}
.dc-sd-dots,.dc-mc-dots{display:flex;gap:3px;height:6px;align-items:center}
.dc-sd-dots i,.dc-mc-dots i{width:5px;height:5px;border-radius:50%;display:block}

/* month on the phone: dots, then the day */
.dc-mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-bottom:12px}
.dc-mgrid .dc-dow{font-size:12px;padding-bottom:2px}
.dc-mc{border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0 3px;min-height:46px;border-radius:10px;color:var(--ink)}
.dc-mc-n{position:relative;font-family:var(--serif);font-size:15px;width:30px;height:30px;line-height:30px;border-radius:50%;text-align:center}
.dc-mc-n>span{position:relative;z-index:1}
.dc-mc-n>svg{position:absolute;inset:-2px;width:auto;height:auto;overflow:visible;pointer-events:none}
.dc-mc.out{opacity:.35}
.dc-mc.past:not(.sel) .dc-mc-n{color:var(--mute)}
.dc-mc.today .dc-mc-n{color:var(--lav);font-weight:700}
.dc-mc.sel .dc-mc-n{background:var(--lav-16);color:var(--lav);font-weight:700}
.dc-daylist{position:relative;padding:8px 10px 6px;margin-top:4px}
.dc-dl-h{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);padding:2px 6px 6px;display:flex;align-items:center;gap:8px}
.dc-dl-add{margin-left:auto;border:none;background:transparent;font-family:var(--pen);font-size:15.5px;color:var(--lav);cursor:pointer;padding:4px 8px}

/* rows on the phone */
.cal-wrap.dc.ph .dc-row{padding:8px 6px;min-height:46px;gap:9px}
.cal-wrap.dc.ph .dc-r-when{width:64px;font-size:13.5px}
.cal-wrap.dc.ph .dc-r-t{font-size:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cal-wrap.dc.ph .dc-state{font-size:12.5px}
.cal-wrap.dc.ph .dc-agd{padding:8px 4px;gap:8px}
.cal-wrap.dc.ph .dc-agdate{width:44px}
.cal-wrap.dc.ph .dc-agdate b{font-size:20px}
.cal-wrap.dc.ph .dc-ideas summary{font-size:15px}
.cal-wrap.dc.ph .dc-blk-hint{display:none}

/* the floating add */
.dc-fab{position:fixed;right:18px;bottom:22px;width:56px;height:56px;border:none;background:transparent;cursor:pointer;z-index:900;
  font-family:var(--hand);font-size:30px;line-height:56px;text-align:center;padding:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}
.dc-fab span{color:#fff;display:block}
html.ux-drawer .dc-fab{display:none}

/* sheets from the bottom */
.dc-modal.ph{align-items:flex-end;padding:0}
.dc-modal.ph .dc-sheet{width:100%;max-height:92vh;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.dc-modal.ph .dc-grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--soft);margin:10px auto 0;position:relative;z-index:1;opacity:.7}
.dc-modal.ph .dc-sheet-in{padding:10px 16px calc(16px + env(safe-area-inset-bottom));gap:9px}
.dc-modal.ph .dc-ed-title{font-size:20px}
.dc-modal.ph .dc-row3{grid-template-columns:1fr 1fr}
.dc-modal.ph .dc-row2{grid-template-columns:1fr}
.dc-modal.ph .dc-in{font-size:16px;min-height:42px}
.dc-modal.ph .dc-kb,.dc-modal.ph .dc-pb,.dc-modal.ph .dc-rb{min-height:36px;font-size:14.5px;flex:none}
.dc-modal.ph .dc-kinds{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.dc-modal.ph .dc-kinds::-webkit-scrollbar{display:none}
.dc-modal.ph .dc-ck-x{opacity:1}
.dc-modal.ph .dc-ed-btns{position:sticky;bottom:0;background:var(--surface);padding:10px 0 4px;margin-top:4px;z-index:2}
.dc-modal.ph .dc-save{flex:1;text-align:center;font-size:16px;min-height:44px}
.dc-modal.ph .dc-gcal{margin-left:0;width:100%;text-align:center;border:none;padding:4px 0}
.dc-modal.ph .dc-inbox{max-height:70vh}
.cal-wrap.dc.ph .dc-offer{bottom:92px}

@media (max-width:640px){
  .dc-row3{grid-template-columns:1fr 1fr}
  .dc-row2{grid-template-columns:1fr}
}


/* ═══ THE FILE, SEEN · THE SCRIPT · THE BELL · THE SETTINGS (12 Sep 2026) ═══
   "a draft to be posted can be attached on the calander not only the text"
   "she needs to give the users everyuthuing they need"
   "make ui better of the small page that opens when i click on the bell"   */

/* the frame instead of a dot, wherever a row is listed */
.dc-th{position:relative;flex:none;width:34px;height:34px;border-radius:7px;overflow:hidden;
  background:var(--lav-08);box-shadow:inset 0 0 0 1px var(--line);display:block}
.dc-th img{width:100%;height:100%;object-fit:cover;display:block}
.dc-th i{position:absolute;inset:0;background:
  linear-gradient(transparent 55%,rgba(0,0,0,.42));pointer-events:none}
.dc-th i::after{content:'';position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-42%,-50%);
  border-left:7px solid rgba(255,255,255,.95);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.dc-row.done .dc-th{opacity:.55}
/* and a mark on a pill, so a cell shows at a glance which post has its file */
/* the ink is the page's now, so the mark takes the kind's colour itself
   rather than inheriting white from a chip that no longer exists */
.dc-pv{flex:none;width:0;height:0;margin-left:2px;opacity:.9;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  border-left:5px solid color-mix(in srgb,var(--kc,var(--lav)) 80%,var(--ink))}

/* the attached video, in the editor */
.dc-vcard{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:9px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line)}
.dc-vthumb{position:relative;flex:none;width:76px;height:100px;border:none;padding:0;border-radius:7px;overflow:hidden;
  cursor:pointer;background:var(--lav-08);display:block}
.dc-vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.dc-vthumb:hover img{filter:brightness(1.06)}
.dc-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  background:rgba(20,16,12,.55);backdrop-filter:blur(2px)}
.dc-vplay::after{content:'';position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-38%,-50%);
  border-left:10px solid #fff;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.dc-vmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.dc-vname{font-family:var(--sans);font-size:14px;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-vs{font-family:var(--pen);font-size:14.5px;color:var(--mute)}
.dc-vs:empty{display:none}
.dc-vacts{display:flex;gap:2px;margin:2px 0 0 -10px;flex-wrap:wrap}
.dc-vbtn{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--hand);font-size:13.5px;
  font-weight:600;color:var(--ink);padding:5px 12px;min-height:30px;white-space:nowrap}
.dc-vbtn>*:not(svg){position:relative;z-index:1}
.dc-vbtn-x{color:#D8453F}

/* the strip you pick from — posters, not a dropdown of titles */
.dc-vstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.dc-vopt{position:relative;flex:none;width:82px;border:none;padding:0;background:transparent;cursor:pointer;
  text-align:left;display:flex;flex-direction:column;gap:4px}
.dc-vopt img{width:82px;height:108px;object-fit:cover;border-radius:7px;display:block;
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s}
.dc-vopt:hover img{box-shadow:0 0 0 2px var(--lav)}
.dc-vopt.on img{box-shadow:0 0 0 2.5px var(--lav)}
.dc-vopt b{position:absolute;left:6px;top:86px;margin:0;font-family:var(--sans);font-size:11px;font-weight:500;
  color:#fff;background:rgba(20,16,12,.62);border-radius:4px;padding:0 4px;line-height:16px;pointer-events:none}
.dc-vopt span{font-family:var(--pen);font-size:13.5px;color:var(--mute);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-vnone{font-family:var(--pen);font-size:15px;color:var(--mute);line-height:1.45;padding:6px 0}

/* the player */
/* above .dc-modal (9000) — the player opens FROM the editor, so it has to
   sit on top of the sheet that launched it, not behind it */
.dc-playw{position:fixed;inset:0;z-index:9400;display:flex;align-items:center;justify-content:center;padding:24px}
.dc-playbox{position:relative;z-index:1;max-width:min(420px,92vw);max-height:88vh;display:flex}
.dc-playbox video{max-width:100%;max-height:88vh;border-radius:12px;background:#000;display:block}
.dc-playbox .dc-x{position:absolute;top:-6px;right:-6px;z-index:2;width:32px;height:32px;border-radius:50%;
  background:var(--paper);box-shadow:0 2px 10px rgba(0,0,0,.28)}

/* the script, the cut, putting it out */
.dc-scr{display:flex;flex-direction:column;gap:3px;margin:2px 0}
.dc-scr .dc-lab-h{justify-content:space-between;align-items:center}
.dc-write{position:relative;border:none;background:transparent;cursor:pointer;font-family:var(--hand);
  font-size:13px;font-weight:600;color:var(--lav);padding:4px 11px;min-height:27px;white-space:nowrap;flex:none}
.dc-write>*:not(svg){position:relative;z-index:1}
.dc-ta-l{min-height:132px;line-height:1.5}
.dc-scr-lend{padding:8px 10px;border-radius:9px;background:var(--lav-08);margin:2px 0}
.dc-scr-lend pre{margin:0;font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);
  line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:190px;overflow-y:auto}

/* ── the bell ────────────────────────────────────────────────────────── */
.dc-ed-n{margin-left:9px;font-family:var(--hand);font-size:13px;font-weight:700;color:var(--lav);
  background:var(--lav-16);border-radius:9px;padding:1px 8px;vertical-align:2px}
.dc-inbox{gap:1px;padding-right:2px}
.dc-ii-day{font-family:var(--pen);font-size:14.5px;font-weight:600;color:var(--soft);
  text-transform:lowercase;padding:12px 10px 4px;letter-spacing:0}
.dc-ii-day:first-child{padding-top:2px}
.dc-ii{display:flex;align-items:flex-start;gap:9px;padding:10px;border-radius:10px;cursor:default;position:relative}
.dc-ii.go{cursor:pointer}
.dc-ii.go:hover{background:var(--lav-08)}
.dc-ii.unread{background:var(--lav-08)}
.dc-ii.unread::before{content:'';position:absolute;left:2px;top:16px;width:4px;height:4px;border-radius:50%;background:var(--lav)}
.dc-ii-k{flex:none;font-family:var(--hand);font-size:11.5px;font-weight:600;color:var(--lav);
  background:var(--lav-16);border-radius:7px;padding:2px 7px;line-height:1.4;margin-top:2px;white-space:nowrap}
.dc-ii-k.k-morning{color:#c8912f;background:rgba(200,145,47,.14)}
.dc-ii-k.k-week{color:#3f9163;background:rgba(63,145,99,.14)}
.dc-ii-m{flex:1;min-width:0}
.dc-ii-title{margin:0 0 2px}
.dc-ii-t{flex:none;font-family:var(--pen);font-size:13.5px;color:var(--soft);white-space:nowrap;margin-top:3px}
.dc-ii-go{flex:none;font-style:normal;font-size:19px;line-height:1;color:var(--soft);margin-top:2px}
.dc-ii.go:hover .dc-ii-go{color:var(--lav)}
.dc-foot{display:flex;justify-content:flex-end;padding-top:8px;margin-top:6px;border-top:1px dashed var(--line)}
.dc-empty{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:14px 2px 4px}
.dc-empty b{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:600}
.dc-empty span{font-family:var(--pen);font-size:15px;color:var(--mute);line-height:1.5}
.dc-empty .dc-test{margin:4px 0 0 -6px}

/* ── the settings ────────────────────────────────────────────────────── */
.dc-set .dc-sheet-in{gap:0}
.dc-card{padding:14px 0 15px;border-top:1px solid var(--line)}
.dc-card:first-of-type{border-top:none;padding-top:6px}
.dc-card-h{margin:0 0 8px}
.dc-card-h h4{margin:0;font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.dc-card-h p{margin:2px 0 0;font-family:var(--pen);font-size:14.5px;color:var(--mute);line-height:1.4}
.dc-status{display:flex;align-items:center;gap:7px;margin:6px 0;font-family:var(--sans);font-size:13.5px;color:var(--ink)}
.dc-status i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--soft)}
.dc-status.on i{background:#3f9163;box-shadow:0 0 0 3px rgba(63,145,99,.16)}
.dc-fieldrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.dc-fieldrow .cal-in{flex:1;min-width:150px}
.dc-fieldrow .dc-test{flex:none;margin:0}
.dc-note{margin:5px 0 0;font-family:var(--pen);font-size:14.5px;color:var(--mute);line-height:1.5}
.dc-note b{font-weight:600;color:var(--ink-soft)}
.dc-when{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* a sentence with two time pickers in it is a sentence, not a row: flex
   wrapping orphaned the tail of it onto a line of its own */
.dc-note.dc-when{display:block}
.dc-note.dc-when select{vertical-align:baseline;margin:0 2px}
.dc-when.dc-ind{margin:-2px 0 6px 44px}
.dc-set .dc-in-t{width:auto;min-width:86px;padding:4px 8px;min-height:30px;font-size:13px}
@media (max-width:560px){
  .dc-vthumb{width:64px;height:86px}
  .dc-vopt,.dc-vopt img{width:72px}
  .dc-vopt img{height:96px}
  .dc-vopt b{top:74px}
  .dc-when.dc-ind{margin-left:0}
}

/* ROOMS_CAL_START (14 Sep 2026) */
/* ── THE PLATFORM ON THE ROW ────────────────────────────────
   One calendar for the brand, so every row says which room it serves. The
   marks are the platforms' own, inked in the row's own colour. */
/* THE SIZES ARE FORCED. Every svg in the calendar is one of her rough.js
   inks - absolutely positioned and stretched to its box by an id-scoped
   rule - so an unarmoured `.dc-pm svg{height:11px}` lost and the TikTok
   note came out 118px tall across four days of the grid. */
.dc-pm{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:auto;height:auto;line-height:0;color:var(--mute);opacity:.9;
  vertical-align:middle;overflow:visible}
.dc-pm svg{height:11px!important;width:11px!important;display:block!important;
  position:static!important;inset:auto!important;max-width:none!important;
  overflow:visible!important;pointer-events:none}
.dc-pm b{font:600 9px/1 var(--sans);letter-spacing:.02em}
/* month pill: after the time, before the words (the pill is a flex row) */
.dc-pill .dc-pm{color:color-mix(in srgb,var(--kc,var(--lav)) 62%,var(--ink))}
/* agenda row */
.dc-pm.row{margin-right:1px}
.dc-pm.row svg{height:13px!important;width:13px!important}
/* day / week block: the corner, out of the title's way */
.dc-pm.ev{position:absolute;right:4px;top:4px;z-index:1;
  color:color-mix(in srgb,var(--kc,var(--lav)) 70%,var(--ink))}
.dc-pm.ev svg{height:11px!important;width:11px!important}
.dc-ev.short .dc-pm.ev{position:static;margin-left:auto}
.dc-ev b{padding-right:15px}
.dc-ev.short b{padding-right:0}

/* ── the picker in the details ────────────────────────────── */
.dc-plat{align-items:center}
.dc-plat-l{font-family:var(--pen);font-size:15px;color:var(--mute);margin-right:4px}
.dc-pb .dc-pb-m{display:inline-flex;align-items:center;line-height:0;
  margin-right:5px;width:auto;height:auto}
.dc-pb .dc-pb-m svg{height:14px!important;width:14px!important;
  display:block!important;position:static!important;inset:auto!important;
  max-width:none!important;overflow:visible!important;pointer-events:none}
/* ROOMS_CAL_END */