/* Dashboard tab (the Roadmap until 5 October 2026). One timetable: months across, tracks down, a calendar strip
   above the items on the same month scale. Below 900px it becomes a month by
   month list. Every class is rm- prefixed so nothing collides with Lists.
   Colours are the wiki's own tokens: green for progress and done, red for
   urgent, overdue and today, amber for decisions. */

.rm { --rm-accent: var(--green); --rm-accent-soft: var(--green-bg); --rm-signal: var(--red); --rm-signal-soft: var(--red-light);
  --rm-amber: var(--amber); --rm-amber-soft: var(--amber-bg); --rm-hatch: #b7b2ab; --rm-soft: #ebe8e4;
  --rm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: flex; flex-direction: column; gap: 14px; max-width: 1560px; margin: 0 auto; padding-bottom: 2rem; font-size: 14px; line-height: 1.4; }
.rm button { font: inherit; color: inherit; }
.rm :focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-num, .rm-when { font-family: var(--rm-mono); font-variant-numeric: tabular-nums; }

/* header and controls */
.rm-top { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-end; justify-content: space-between; }
.rm-top h1 { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.rm-overall { margin: 4px 0 0; color: var(--text2); }
.rm-overall b { color: var(--text); }
.rm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-actions .btn { padding: 0.5rem 0.85rem; }
.rm-controls { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.rm-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--border); background: var(--bg2); border-radius: var(--radius-sm); overflow: hidden; }
.rm-tabs button { border: 0; background: none; padding: 7px 11px; cursor: pointer; font-weight: 500; border-right: 1px solid var(--rm-soft); min-height: 36px; }
.rm-tabs button:last-child { border-right: 0; }
.rm-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg2); }
.rm-tabs button:hover:not([aria-selected="true"]) { background: var(--rm-accent-soft); }
.rm-search { flex: 1 1 180px; max-width: 300px; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font: inherit; border-radius: var(--radius-sm); min-height: 36px; }
.rm-toggle { border: 1px solid var(--border); background: var(--bg2); padding: 7px 11px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; border-radius: var(--radius-sm); min-height: 36px; }
.rm-toggle::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--text2); border-radius: 3px; flex: none; }
.rm-toggle[aria-pressed="true"] { border-color: var(--rm-accent); background: var(--rm-accent-soft); }
.rm-toggle[aria-pressed="true"]::before { background: var(--rm-accent); border-color: var(--rm-accent); }
.rm-count { color: var(--text2); margin-left: auto; white-space: nowrap; }
@media (max-width: 480px) { .rm-tabs button { padding: 7px 8px; } .rm-search { max-width: none; flex-basis: 100%; } .rm-count { margin-left: 0; } }

.rm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text2); font-size: 12.5px; align-items: center; }
.rm-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* glyphs and tags */
.rm-g { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.rm-g.urgent { background: var(--rm-signal); box-shadow: 0 0 0 2px var(--rm-signal-soft); }
.rm-g.high { background: var(--text); }
.rm-g.medium { border: 1.5px solid var(--text2); }
.rm-g.low, .rm-g.optional { width: 5px; height: 5px; margin: 2px; background: var(--text2); }
.rm-g.dec { border-radius: 0; width: 8px; height: 8px; background: var(--rm-amber); transform: rotate(45deg); }
.rm-tag { font-family: var(--rm-mono); font-size: 10.5px; line-height: 1; padding: 2px 4px; border: 1px solid var(--border); color: var(--text2); white-space: nowrap; border-radius: 3px; }
.rm-tag.started { border-color: var(--rm-accent); color: var(--rm-accent); }
.rm-tag.overdue { border-color: var(--rm-signal); color: var(--rm-signal); background: var(--rm-signal-soft); }
.rm-tag.decided { border-color: var(--rm-accent); color: var(--rm-accent); }

/* the tick box: small on the board, a full thumb target in the list */
.rm-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; width: 22px; height: 22px; margin: -2px 0 -2px -2px; }
.rm-tick span { width: 15px; height: 15px; border: 1.5px solid var(--text2); border-radius: 4px; background: var(--bg2); display: inline-flex; align-items: center; justify-content: center; }
.rm-tick[aria-checked="true"] span { background: var(--rm-accent); border-color: var(--rm-accent); }
.rm-tick[aria-checked="true"] span::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.rm-tick:disabled { cursor: default; opacity: 0.6; }
.rm-tick.dec span { border-color: var(--rm-amber); }
.rm-tick.dec[aria-checked="true"] span { background: var(--rm-amber); border-color: var(--rm-amber); }

/* board (wide) */
.rm-board { display: grid; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rm-board > * { min-width: 0; }
.rm-mh, .rm-corner { position: sticky; top: 0; z-index: 3; background: var(--bg2); border-bottom: 1px solid var(--border); }
.rm-corner { border-top-left-radius: var(--radius-sm); }
.rm-mh { padding: 10px 10px 9px; border-left: 1px solid var(--rm-soft); display: flex; flex-direction: column; gap: 4px; }
.rm-mh.now { box-shadow: inset 0 3px 0 var(--rm-accent); }
.rm-mh-name { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.rm-mh-name:hover { color: var(--rm-accent); }
.rm-yr { font-weight: 400; color: var(--text2); font-size: 13px; margin-left: 4px; }
.rm-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12.5px; color: var(--text2); align-items: baseline; }
.rm-meta b { color: var(--text); font-weight: 600; }
.rm-tight { color: var(--rm-signal); font-weight: 600; }
.rm-meter { height: 5px; background: var(--rm-soft); border-radius: 3px; overflow: hidden; }
.rm-meter i { display: block; height: 100%; background: var(--rm-accent); }
.rm-meter.is-tight i { background: var(--rm-signal); }
.rm-progress { height: 3px; background: var(--rm-soft); border-radius: 2px; overflow: hidden; }
.rm-progress i { display: block; height: 100%; background: var(--text2); }
.rm-cap { font-size: 11.5px; color: var(--text2); line-height: 1.3; }

.rm-rl { padding: 9px 10px; border-top: 1px solid var(--rm-soft); font-weight: 600; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.rm-rl small { font-weight: 400; color: var(--text2); font-size: 11.5px; }
.rm-rl.aux { color: var(--text2); font-weight: 500; }
.rm-rl.carry { color: var(--rm-signal); }
.rm-cell { padding: 7px; border-top: 1px solid var(--rm-soft); border-left: 1px solid var(--rm-soft); display: flex; flex-direction: column; gap: 5px; }
.rm-cell.now { background: #fbfcfb; }
.rm-first { border-top-color: var(--border); }

/* calendar strip */
.rm-strip { position: relative; height: 26px; border-left: 1px solid var(--rm-soft); }
.rm-rl.sl { padding-block: 0; justify-content: center; border-top: 0; height: 26px; font-size: 12px; }
.rm-band { position: absolute; top: 5px; bottom: 5px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-family: var(--rm-mono); font-size: 10.5px; line-height: 1; color: var(--text); border-radius: 2px; }
.rm-band > span { padding: 1px 5px; background: var(--bg2); margin-left: 3px; }
.rm-band.away { border: 1px solid var(--rm-hatch); background: repeating-linear-gradient(135deg, var(--rm-hatch) 0 2px, transparent 2px 5px); }
.rm-band.part { border: 1px dashed var(--rm-hatch); background: repeating-linear-gradient(135deg, var(--rm-hatch) 0 1px, transparent 1px 8px); }
.rm-band.green { background: var(--rm-accent-soft); }
.rm-band.amber { background: var(--rm-amber-soft); }
.rm-band.green > span, .rm-band.amber > span { background: none; }
.rm-band.event { background: var(--rm-accent); color: #fff; }
.rm-band.event > span { background: none; color: inherit; }
.rm-after { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 5px; font-family: var(--rm-mono); font-size: 10.5px; white-space: nowrap; color: var(--text2); }
.rm-mark { position: absolute; top: 2px; bottom: 2px; width: 2px; background: var(--text2); }
.rm-mark span { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--rm-mono); font-size: 10.5px; white-space: nowrap; color: var(--text2); }
.rm-mark.strong { background: var(--rm-signal); }
.rm-mark.strong span { color: var(--rm-signal); font-weight: 500; }
.rm-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--rm-signal); z-index: 2; }
.rm-today span { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-family: var(--rm-mono); font-size: 10px; color: var(--rm-signal); background: var(--bg2); padding: 0 3px; white-space: nowrap; }
.rm-band, .rm-after, .rm-mark { z-index: 1; }

/* key dates */
.rm-kd { font-size: 12.5px; line-height: 1.3; display: flex; flex-direction: column; }
.rm-kd .rm-when { font-size: 11px; color: var(--text2); }

/* chips on the board */
.rm-chip { display: flex; gap: 6px; align-items: flex-start; border: 1px solid var(--rm-soft); background: var(--bg2); padding: 5px 6px; font-size: 12.5px; line-height: 1.28; border-radius: 6px; }
.rm-chip:hover { border-color: var(--rm-accent); }
.rm-chip .rm-tick { margin-top: -2px; }
.rm-open { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; align-items: flex-start; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; }
.rm-open .rm-g { margin-top: 3.5px; }
.rm-open .rm-g.low, .rm-open .rm-g.optional { margin-top: 5.5px; }
.rm-lbl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rm-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.rm-chip.is-urgent { background: var(--rm-signal-soft); border-color: var(--rm-signal); }
.rm-chip.is-dec { background: none; border-style: dashed; border-color: var(--border); }
.rm-chip.is-dec .rm-when { font-size: 11px; color: var(--rm-amber); display: block; }
.rm-chip.is-sel, .rm-row.is-sel { outline: 2px solid var(--rm-accent); outline-offset: 1px; }
.rm-chip.dim, .rm-row.dim { opacity: 0.22; }
.rm-chip.is-done, .rm-row.is-done { opacity: 0.55; background: var(--bg); }
.rm-chip.is-done .rm-lbl, .rm-row.is-done .rm-row-main strong { text-decoration: line-through; text-decoration-color: var(--text3); }
.rm-chip.is-done.dim, .rm-row.is-done.dim { opacity: 0.18; }
.rm-moves { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0 26px; }
.rm-moves button { border: 1px solid var(--border); background: var(--bg2); border-radius: 4px; font-size: 11.5px; padding: 3px 7px; cursor: pointer; min-height: 28px; }
.rm-moves button:hover { border-color: var(--rm-accent); color: var(--rm-accent); }

/* unscheduled and carried over blocks */
.rm-block { border: 1px solid var(--border); background: var(--bg2); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rm-block h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.rm-block h2 .rm-num { font-weight: 400; color: var(--text2); font-size: 13px; }
.rm-block.carry { border-color: var(--rm-signal-soft); box-shadow: inset 3px 0 0 var(--rm-signal); }
.rm-block-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }

/* month list (narrow, or one month in focus) */
.rm-stack { display: flex; flex-direction: column; gap: 22px; }
.rm-ms { border: 1px solid var(--border); background: var(--bg2); border-radius: var(--radius-sm); overflow: hidden; }
.rm-ms-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.rm-ms-head.now { box-shadow: inset 0 3px 0 var(--rm-accent); }
.rm-ms-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.rm-ms-head h2 .rm-yr { font-size: 15px; margin-left: 5px; }
.rm-ms-head .rm-meter, .rm-ms-head .rm-progress { max-width: 260px; }
.rm-ms-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.rm-ms-side { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--rm-soft); min-width: 0; }
.rm-ms-tracks { padding: 6px 16px 16px; min-width: 0; display: flex; flex-direction: column; }
.rm-ms h3 { margin: 10px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text2); }
.rm-ms-side h3:first-child { margin-top: 0; }
.rm-tg { display: flex; flex-direction: column; gap: 6px; padding-block: 8px; }
.rm-tg + .rm-tg { border-top: 1px solid var(--rm-soft); }
.rm-tg h3 .rm-num { letter-spacing: 0; margin-left: 6px; font-weight: 400; }
.rm-tg.carry h3 { color: var(--rm-signal); }
.rm-row { display: flex; gap: 4px; align-items: flex-start; border: 1px solid var(--rm-soft); background: var(--bg2); border-radius: 8px; padding: 2px 10px 2px 2px; }
.rm-row:hover { border-color: var(--rm-accent); }
.rm-row .rm-tick { width: 44px; height: 44px; margin: 0; }
.rm-row .rm-tick span { width: 22px; height: 22px; border-radius: 6px; }
.rm-row .rm-tick[aria-checked="true"] span::after { width: 11px; height: 6px; }
.rm-row .rm-open { padding: 11px 0 9px; gap: 9px; }
.rm-row .rm-open .rm-g { margin-top: 5px; }
.rm-row .rm-open .rm-g.low, .rm-row .rm-open .rm-g.optional { margin-top: 7px; }
.rm-row.is-urgent { background: var(--rm-signal-soft); border-color: var(--rm-signal); }
.rm-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rm-row-main strong { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.rm-row-main p { margin: 0; color: var(--text2); font-size: 13px; max-width: 78ch; overflow-wrap: anywhere; }
.rm-row-main p b { color: var(--text); font-weight: 600; }
.rm-row .rm-moves { margin: 0 0 8px 46px; }
.rm-rowwrap { display: flex; flex-direction: column; }
.rm-empty { padding: 20px 0; color: var(--text2); margin: 0; }
@media (min-width: 900px) {
  .rm-ms-body { grid-template-columns: 270px minmax(0, 1fr); }
  .rm-ms-side { border-bottom: 0; border-right: 1px solid var(--rm-soft); }
}

/* detail panel */
.rm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 60; overflow: auto; overscroll-behavior: contain;
  background: var(--bg2); border-left: 1px solid var(--border); box-shadow: -14px 0 36px rgba(0,0,0,0.14);
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.rm-drawer.wide { width: min(720px, 100%); }
.rm-drawer-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rm-x { border: 1px solid var(--border); background: var(--bg3); padding: 7px 12px; cursor: pointer; border-radius: var(--radius-sm); font: inherit; min-height: 36px; }
.rm-x:hover { border-color: var(--rm-accent); }
.rm-eyebrow { font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text2); font-weight: 600; }
.rm-drawer h2 { margin: 0; font-size: 21px; line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rm-drawer h3 { margin: 10px 0 0; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text2); }
.rm-drawer p { margin: 0; overflow-wrap: anywhere; }
.rm-donewhen { border: 1px solid var(--rm-accent); background: var(--rm-accent-soft); padding: 10px 12px; border-radius: var(--radius-sm); }
.rm-donewhen b { display: block; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rm-accent); margin-bottom: 3px; }
.rm-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 13px; }
.rm-dl dt { color: var(--text2); }
.rm-dl dd { margin: 0; overflow-wrap: anywhere; }
.rm-status { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rm-status .rm-tick { width: 44px; height: 44px; margin: -8px 0 -8px -8px; }
.rm-status .rm-tick span { width: 22px; height: 22px; border-radius: 6px; }
.rm-status .rm-tick[aria-checked="true"] span::after { width: 11px; height: 6px; }
.rm-form { display: flex; flex-direction: column; gap: 10px; }
.rm-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; }
.rm-form .form-input, .rm-form .form-textarea, .rm-form select { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); font-size: 15px; padding: 0.5rem 0.65rem; }
.rm-form select { width: 100%; background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; min-height: 40px; }
.rm-form textarea { resize: vertical; min-height: 64px; }
.rm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-btns .btn { padding: 0.55rem 0.9rem; }
.rm-note { color: var(--text2); font-size: 12.5px; margin: 0; }
.rm-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.rm-log li { border-left: 2px solid var(--rm-soft); padding-left: 8px; color: var(--text2); overflow-wrap: anywhere; }
.rm-log li b { color: var(--text); font-weight: 600; }
.rm-dropbox { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--red-mid); background: var(--red-light); border-radius: var(--radius-sm); }

/* settings editor */
.rm-set { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rm-soft); padding-top: 10px; }
.rm-set-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rm-set-row .form-input, .rm-set-row select { flex: 1 1 110px; min-width: 0; font-size: 14px; padding: 0.4rem 0.55rem; }
.rm-set-row select { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; min-height: 36px; }
.rm-set-row .w-s { flex: 0 1 90px; }
.rm-set-row .w-m { flex: 0 1 150px; }
.rm-set-row label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.rm-mini { border: 1px solid var(--border); background: var(--bg3); border-radius: 6px; padding: 5px 9px; cursor: pointer; font: inherit; font-size: 13px; min-height: 34px; }
.rm-mini.danger { color: var(--red-dark); }
.rm-strip-edit { border: 1px solid var(--rm-soft); border-radius: var(--radius-sm); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rm-sub { font-size: 12px; color: var(--text2); font-weight: 600; margin-top: 4px; }

@media (max-width: 700px) {
  .rm-drawer, .rm-drawer.wide { top: auto; left: 0; width: auto; max-height: 82%; border-left: 0; border-top: 1px solid var(--border);
    box-shadow: 0 -14px 36px rgba(0,0,0,0.16); border-radius: 14px 14px 0 0; padding-top: 14px; }
  .rm-pair { grid-template-columns: 1fr; }
}
.rm-foot { color: var(--text2); font-size: 12.5px; max-width: 92ch; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .rm-chip, .rm-row, .rm-toggle, .rm-tabs button { transition: border-color .12s, background-color .12s, opacity .12s; } }
.rm-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rm-drawer[hidden] { display: none; }
/* On a phone the items come first in each month, so ticking needs no scrolling
   past the key dates and decisions; on wide screens those sit on the left. */
@media (max-width: 899px) {
  .rm-ms-tracks { order: -1; }
  .rm-ms-side { border-bottom: 0; border-top: 1px solid var(--rm-soft); }
}

/* The month window: arrows a month at a time, Today back to the current month. */
.rm-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rm-arrow, .rm-today-btn { border: 1px solid var(--border); background: var(--bg2); border-radius: var(--radius-sm); min-height: 40px; cursor: pointer; font: inherit; }
.rm-arrow { width: 44px; font-size: 22px; line-height: 1; padding: 0 0 3px; }
.rm-today-btn { padding: 0 14px; font-weight: 600; }
.rm-today-btn[aria-pressed="true"] { background: var(--text); color: var(--bg2); border-color: var(--text); }
.rm-arrow:hover, .rm-today-btn:hover { border-color: var(--rm-accent); }
.rm-window { color: var(--text2); font-weight: 600; margin-left: 4px; }
.rm-past { color: var(--rm-amber); font-weight: 500; }

/* Due dates: a short date in front of the label. */
.rm-due { display: inline-block; font-family: var(--rm-mono); font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--rm-accent); border: 1px solid var(--rm-accent); border-radius: 3px; padding: 0 4px; margin-right: 5px; white-space: nowrap; vertical-align: 1px; }
.rm-due.late { color: var(--rm-signal); border-color: var(--rm-signal); background: var(--rm-signal-soft); }
.rm-legend .rm-due { margin-right: 0; }
.rm-due-help { color: var(--text2); font-size: 12.5px; align-self: end; padding-bottom: 6px; }

/* The question when a dated item changes month. */
.rm-dialog { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.32); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rm-dialog-box { background: var(--bg2); border-radius: var(--radius); padding: 18px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 14px 36px rgba(0,0,0,0.2); font-size: 15px; }
.rm-dialog-box p { margin: 0; overflow-wrap: anywhere; }