/* "Choose times" in Plan a meeting (js/ui/meeting-times-step.js, review L1,
   2026-10-17). One grid: a fixed name column, then one cell per hour, every
   hour labelled; the week bar, day tiles and rows share the same left edge. */
.mts { --mts-pick: var(--amber-500); --mts-name: 64px; --mts-gap: 6px; display: flex; flex-direction: column; gap: 12px; }
.mts-len { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 12px; }
.mts-len-text { font-size: 15px; font-weight: 700; color: var(--text-primary, #0f172a); }
.mts-link { min-height: 44px; margin: -12px -4px; padding: 0 4px; border: 0; background: none; font: inherit;
  font-size: 14px; font-weight: 700; color: var(--primary-700, #0f766e); text-decoration: underline; cursor: pointer; }
.mts-len-picker[hidden] { display: none; }
.mts-weekbar { display: flex; align-items: center; gap: 8px; }
.mts-nav, .mts-month, .mts-shift {
  min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid #99f6e4;
  background: #f0fdfa; color: var(--primary-700, #0f766e); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer;
}
.mts-month { font-size: 13px; }
.mts-month.is-on { background: var(--primary-600, #0d9488); border-color: var(--primary-600, #0d9488); color: #ffffff; }
.mts-range { flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: 700; color: var(--text-primary, #0f172a); }
.mts-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mts-day {
  min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; border: 1px solid var(--slate-300, #cbd5e1); background: var(--surface-primary, #ffffff);
  color: var(--text-primary, #0f172a); font: inherit; cursor: pointer;
}
.mts-dow { font-size: 11px; font-weight: 700; color: var(--text-secondary, #475569); text-transform: uppercase; }
.mts-num { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mts-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.mts-dot.is-on { background: var(--mts-pick); }
.mts-day.is-on { background: var(--primary-700, #0f766e); border-color: var(--primary-700, #0f766e); color: #ffffff; }
.mts-day.is-on .mts-dow { color: #ccfbf1; }
.mts-day:disabled, .mts-mday:disabled { opacity: 0.4; cursor: default; }
.mts-monthgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mts-mdow { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-secondary, #475569); }
.mts-mday {
  position: relative; min-height: 44px; border-radius: 10px; border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--surface-primary, #ffffff); color: var(--text-primary, #0f172a); font: inherit; font-size: 14px;
  font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.mts-mday.is-out { color: var(--text-tertiary, #94a3b8); }
.mts-mday.is-on { background: var(--primary-700, #0f766e); border-color: var(--primary-700, #0f766e); color: #ffffff; }
/* THE HOURS AS THE BOARD DRAWS THEM (owner 2026-10-27: drag scroll, pinch
   zoom, a tap selects, bottom drag handles, team bar and presets). A fixed name
   column, then one track of 24 hour cells you drag sideways; --mts-cw is the
   cell width (pinch / Ctrl + wheel), set by meeting-times-step.js. The scan box,
   its handles, the offer frames and the stack under the box are placed in px
   by the same script. */
.mts-board { --mts-cw: 26px; display: grid; grid-template-columns: var(--mts-name) minmax(0, 1fr); column-gap: var(--mts-gap); }
.mts-names { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mts-names-hrs { height: 16px; flex: none; }
/* A name takes two lines before it is cut ("Guests can book", 2026-10-28). */
.mts-names .mts-name { height: 30px; flex: none; display: flex; align-items: center; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
.mts-scroll { position: relative; min-width: 0; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y;
  overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; border-radius: 6px; }
.mts-scroll::-webkit-scrollbar { display: none; }
.mts-scroll:active { cursor: grabbing; }
.mts-track { position: relative; width: calc(24 * var(--mts-cw)); padding: 0 0 6px; }
/* Numbers on the hour lines (2026-10-21 ruling), the ends drawn inside. */
.mts-hrs { position: relative; display: block; height: 16px; }
.mts-hrs > span { position: absolute; top: 0; left: calc(var(--mts-h) * var(--mts-cw)); transform: translateX(-50%);
  /* 7.5px down to 11px an hour, 7px at the 10.5px the whole day reaches on a
     360px phone (2026-10-30), so two digits keep their gap. */
  font-size: min(10px, max(calc(var(--mts-cw) * 0.4), clamp(7px, calc(var(--mts-cw) - 3.5px), 7.5px))); letter-spacing: -0.2px; font-weight: 600;
  color: var(--text-secondary, #475569); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mts-hrs > span:first-child { transform: none; }
.mts-hrs > .mts-hr-end { transform: translateX(-100%); }
.mts-hrs small { font-size: 7px; font-weight: 800; margin-left: 1px; }
.mts-rows { display: flex; flex-direction: column; gap: 6px; }
.mts-row { display: grid; grid-template-columns: repeat(24, var(--mts-cw)); height: 30px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.25); }
.mts-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary, #334155); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mts-name--all { color: var(--primary-700, #0f766e); }
.mts-cell { border: 0; padding: 0; margin: 0; cursor: pointer; border-left: 1px solid rgba(15, 23, 42, 0.3); }
/* Board-sized cells: the app's phone floor (button { min-height: 44px })
   would make each hour a 44px square and stack them over each other. */
.mts .mts-cell { min-width: 0 !important; min-height: 0 !important; height: 100%; }
.mts-cell:first-child { border-left: 0; }
.mts-cell.mts-free { background: #76db9b; }
.mts-cell.mts-all { background: #1f9d55; }
.mts-cell.mts-off { background: #f1f5f9; }
.mts-cell.mts-busy { background: #e55e5e; }
/* Open hours as a fact or a result row (2026-10-28): the app's level colours. */
.mts-cell.mts-pos { background: var(--level-possible, #99f6e4); }
.mts-cell.mts-pref { background: var(--level-preferred, #0d9488); }
.mts-cell.mts-none { background: var(--surface-primary, #ffffff); }
/* A guest's day from their city (2026-10-30): usual hours are a guess, so
   the free colour with a dashed edge; their night in the booking page's
   night tint. */
.mts-cell.mts-usual { background: #76db9b; box-shadow: inset 0 0 0 1.5px #ffffff; outline: 1.5px dashed #0f766e; outline-offset: -3px; }
.mts-cell.mts-night { background: #ede9fe; }
.mts-k-usual-cell { background: #76db9b; outline: 1.5px dashed #0f766e; outline-offset: -3px; }
.mts-k-night { background: #ede9fe; border: 1px solid #c4b5fd; box-sizing: border-box; }
/* What the time means for each person, beside Who can come. */
.mts-impact { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.mts-impact--good { color: #15803d; } .mts-impact--late { color: #b45309; } .mts-impact--night { color: #5b21b6; }
body.dark-mode .mts-cell.mts-night, body.dark-mode .mts-k-night { background: #3b2f63; border-color: #6d28d9; }
body.dark-mode .mts-impact--good { color: #4ade80; } body.dark-mode .mts-impact--late { color: #fcd34d; } body.dark-mode .mts-impact--night { color: #c4b5fd; }
/* A changed hour is outlined, never dotted (Days and hours, 2026-10-21 / 10-28). */
.mts-cell.is-marked { box-shadow: inset 0 0 0 2px var(--primary-800, #115e59); }
.mts-key .mts-k-mark { background: var(--surface-primary, #ffffff); box-shadow: inset 0 0 0 2px var(--primary-800, #115e59); }
.mts-cell.is-past {
  cursor: default;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0 3px, transparent 3px 6px);
}
.mts-cell:focus-visible { outline: 2px solid var(--primary-600, #0d9488); outline-offset: -2px; }
/* THE BLOCK IS THE TIME (owner 2026-10-28, "make it make sense"): one amber
   frame per time, across every row, as long as the meeting, starting where
   it was tapped. The one the bar below speaks for is filled. */
.mts-frame { position: absolute; pointer-events: none; border: 3px solid var(--mts-pick); border-radius: 7px; }
.mts-frame.is-current { background: rgba(245, 158, 11, 0.22); }
/* ONE CARD UNDER THE HOURS (owner 2026-10-29, "Approved", canvas "The bar
   under a time" QTWLLgxXAPgk9Pd8Wwp5zV, option A): the picked time and
   everything about it, labelled, in one card that never moves or covers
   rows. The app's own parts: the grey segmented control (the Links / Booked
   look), white 44px buttons, the cells' own colours on Possible / Preferred. */
.mts-card { margin-top: 8px; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; background: var(--surface-secondary, #f8fafc); }
.mts-card-h { display: flex; align-items: center; gap: 8px; }
.mts-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mts-card-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary, #64748b); }
.mts-when { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text-primary, #0f172a); overflow-wrap: anywhere; }
.mts-when .fa-check { color: var(--primary-700, #0f766e); }
.mts-when.mts-when--hint { font-size: 14px; font-weight: 600; color: var(--text-secondary, #475569); }
.mts .mts-card-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px !important; min-height: 44px !important;
  height: 44px; padding: 0 12px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; background: var(--surface-primary, #ffffff);
  color: var(--primary-700, #0f766e); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mts .mts-card-btn.mts-when-x { width: 44px; padding: 0; color: #b91c1c; }
.mts-card-row { display: flex; flex-direction: column; gap: 5px; }
.mts-card-l { font-size: 12px; font-weight: 700; color: var(--text-primary, #334155); }
.mts-teambar { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 15px;
  font-size: 12.5px; font-weight: 700; background: #94a3b8; color: #ffffff; }
.mts-teambar[data-state="all"] { background: #1f9d55; }
.mts-teambar[data-state="some"] { background: #76db9b; color: #0f3d24; }
.mts-presets { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: #e8edf2; }
.mts .mts-preset { flex: 1 1 0; min-width: 0 !important; min-height: 38px !important; height: 38px; padding: 0 4px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: #334155; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mts .mts-preset[aria-pressed="true"] { background: #ffffff; color: var(--primary-700, #0f766e); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14); }
@media (pointer: coarse) {
  .mts .mts-preset { height: 44px; min-height: 44px !important; }
}
/* ONE WAY TO SET TIMES (owner 2026-10-28, canvas 6ryLAsvK7aeFuRmfVUgEww): the
   track is shared (js/ui/times-track.js). Open hours are teal blocks, the bar
   under one says its times (tap to type them) and Possible or Preferred. */
.mts-frame--open { border-color: var(--level-preferred, #0d9488); }
.mts-frame--open.is-current { background: rgba(13, 148, 136, 0.14); }
/* The time the card is under moves with a drag, and an open-hours one
   stretches from a grip at either end (2026-10-30). Only that block takes
   the press; the hours around it still scroll and tap as before. */
.mts-frame.is-movable { pointer-events: auto; cursor: grab; touch-action: none; }
.mts-frame.is-movable:active { cursor: grabbing; }
.mts-grip { position: absolute; top: 50%; width: 10px; height: 28px; margin-top: -14px; border-radius: 5px;
  background: #fff; border: 2px solid var(--mts-pick); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); cursor: ew-resize; touch-action: none; }
.mts-grip::before { content: ''; position: absolute; left: 2px; right: 2px; top: 8px; bottom: 8px;
  border-left: 1px solid rgba(15, 23, 42, 0.35); border-right: 1px solid rgba(15, 23, 42, 0.35); }
.mts-grip::after { content: ''; position: absolute; inset: -10px -14px; }
.mts-grip--a { left: -7px; }
.mts-grip--z { right: -7px; }
.mts-frame--open .mts-grip { border-color: var(--level-preferred, #0d9488); }
body.dark-mode .mts-grip { background: #0f172a; }
/* The hours a link is given, dashed around its own block (2026-10-28). */
.mts-frame--usual { border: 2px dashed var(--primary-300, #5eead4); }
/* Exact times, typed in the same card (never clipped by the hours that
   scroll sideways, iPhone 13, 2026-10-28). */
.mts-typebar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.mts-type { display: inline-flex; flex-direction: column; gap: 4px; }
.mts-type-l { font-size: 12px; font-weight: 700; color: var(--text-primary, #334155); }
.mts-type input { height: 44px; width: 104px; box-sizing: border-box; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; color: #0f172a; background: #ffffff; }
.mts .mts-when-ok, .mts .mts-type-x { min-height: 44px !important; height: 44px; padding: 0 16px; }
.mts-level { display: flex; gap: 6px; }
.mts .mts-lv { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0 !important; min-height: 44px !important; height: 44px;
  padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: #334155; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mts .mts-lv[aria-pressed="true"] { border: 2px solid var(--primary-700, #0f766e); background: var(--primary-50, #f0fdfa); color: var(--primary-700, #0f766e); font-weight: 700; padding: 0 9px; }
.mts-lv-sw { width: 16px; height: 12px; border-radius: 3px; flex: none; }
.mts-lv-sw--possible { background: var(--level-possible, #99f6e4); }
.mts-lv-sw--preferred { background: var(--level-preferred, #0d9488); }
body.dark-mode .mts-card { background: #0f172a; border-color: #334155; }
body.dark-mode .mts-when { color: #f1f5f9; }
body.dark-mode .mts .mts-card-btn, body.dark-mode .mts .mts-lv, body.dark-mode .mts-type input { background: #1e293b; border-color: #475569; color: #e2e8f0; }
body.dark-mode .mts .mts-card-btn { color: #5eead4; }
body.dark-mode .mts .mts-card-btn.mts-when-x { color: #fca5a5; }
body.dark-mode .mts-presets { background: #1e293b; }
body.dark-mode .mts .mts-preset { color: #cbd5e1; }
body.dark-mode .mts .mts-preset[aria-pressed="true"], body.dark-mode .mts .mts-lv[aria-pressed="true"] { background: #0f172a; color: #5eead4; border-color: #14b8a6; box-shadow: none; }
/* SAME TIMES ON: the open day's times on other picked days in one tap. */
.mts-same { display: flex; flex-direction: column; gap: 6px; }
.mts-same-h { font-size: 12.5px; font-weight: 700; color: var(--text-primary, #334155); }
.mts-same-days { display: flex; flex-wrap: wrap; gap: 6px; }
.mts-same-day, .mts-same-all { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 10px; background: var(--white, #fff); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary, #334155); cursor: pointer; white-space: nowrap; }
.mts-same-day.is-on { border-color: var(--primary-700, #0f766e); background: var(--primary-50, #f0fdfa); color: var(--primary-700, #0f766e); }
.mts-same-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #94a3b8; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.mts-same-day.is-on .mts-same-box { border-color: var(--primary-700, #0f766e); background: var(--primary-700, #0f766e); color: #ffffff; }
.mts-same-all { border-style: dashed; }
/* Fingers (mobile ready, 2026-10-28): the bar's small buttons keep their
   look and take a 44px touch. */
@media (pointer: coarse) {
  .mts-same-day, .mts-same-all { min-height: 44px; }
}
body.dark-mode .mts-same-day, body.dark-mode .mts-same-all { background: var(--slate-800, #1e293b); border-color: var(--slate-600, #475569); color: var(--slate-100, #f1f5f9); }
body.dark-mode .mts-same-day.is-on { background: rgba(20, 184, 166, 0.15); border-color: #14b8a6; color: #5eead4; }
.mts-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-secondary, #475569); }
.mts-key span { display: inline-flex; align-items: center; gap: 5px; }
.mts-key i { width: 14px; height: 10px; border-radius: 3px; flex: none; }
.mts-key .mts-k-pick { border: 2px solid var(--mts-pick); background: transparent; }
.mts-key .mts-k-open { border: 2px solid var(--level-preferred, #0d9488); background: transparent; }
.mts-key .mts-k-usual { border: 2px dashed var(--primary-300, #5eead4); background: transparent; box-sizing: border-box; }
.lhe { display: flex; flex-direction: column; gap: 8px; }
.lhe-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary, #64748b); }
/* The booking hours' track sits where the AM / PM rows were (2026-10-28). */
.whg-track, .bbd-track { min-width: 0; }
.whg-key { margin-top: 2px; }
.mts-hint { margin: 0; font-size: 13px; color: var(--text-secondary, #475569); }
.mts-offered { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mts-offered-h { font-size: 13px; font-weight: 700; color: var(--text-primary, #0f172a); }
.mts-none { font-size: 13px; color: var(--text-tertiary, #94a3b8); }
.mts-chip {
  min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--mts-pick); background: #fffbeb;
  color: #78350f; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.mts-note { margin: 0; min-height: 1em; font-size: 12.5px; color: #b45309; }
.mts-note:empty { display: none; }
body.dark-mode .mts-len, body.dark-mode .mts-day, body.dark-mode .mts-mday { border-color: var(--slate-600, #475569); }
body.dark-mode .mts-day, body.dark-mode .mts-mday { background: var(--slate-800, #1e293b); color: var(--slate-100, #f1f5f9); }
body.dark-mode .mts-nav, body.dark-mode .mts-month, body.dark-mode .mts-shift { background: rgba(20, 184, 166, 0.14); border-color: rgba(45, 212, 191, 0.35); color: #5eead4; }
body.dark-mode .mts-cell.mts-off { background: #334155; }
body.dark-mode .mts-when.mts-when--hint { background: #0f172a; color: #cbd5e1; border-color: #64748b; }
body.dark-mode .mts-chip { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
/* "Choose on the grid" beside a lone date + time (js/ui/time-pick-sheet.js). */
.tps-open { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid #99f6e4; background: #f0fdfa; color: var(--primary-700, #0f766e); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
body.dark-mode .tps-open { background: rgba(20, 184, 166, 0.14); border-color: rgba(45, 212, 191, 0.35); color: #5eead4; }
/* Tight rows: am/pm on its own line under the number (no two numbers touch). */
.mts-hrs.is-stacked > span { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.mts-hrs.is-stacked small { margin-left: 0; }

/* DAYS ARE ROWS YOU TICK (owner 2026-10-22, canvas "Setup flows" board 3):
   quick picks, then one row per picked day (tick, date tile, what it has),
   one open at a time with everyone's hours; its times listed inside it. The
   one picked look: a teal outline and tint, never a solid teal tile. */
.mts-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.mts-pick { min-height: 40px; padding: 0 12px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 999px; background: var(--white, #fff);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary, #334155); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mts .mts-pick.mts-month { font-size: 13px; }
.mts .mts-month.is-on, .mts .mts-pick.is-on { background: var(--primary-50, #f0fdfa); border-color: var(--primary-700, #0f766e); color: var(--primary-700, #0f766e); box-shadow: inset 0 0 0 1px var(--primary-700, #0f766e); }
.mts-monthpanel { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 10px; }
.mts .mts-mday.is-on { background: var(--primary-50, #f0fdfa); border: 2px solid var(--primary-700, #0f766e); color: var(--primary-700, #0f766e); }
.mts-empty { margin: 0; padding: 12px; border: 1px dashed var(--border-color, #cbd5e1); border-radius: 12px; font-size: 13px; color: var(--text-secondary, #475569); text-align: center; }
.mts-dayrows { display: flex; flex-direction: column; gap: 8px; }
.mts-drow { border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; background: var(--white, #fff); }
.mts-drow.is-open { border: 2px solid var(--primary-700, #0f766e); }
.mts-drow-h { display: flex; align-items: center; min-height: 54px; }
.mts-tick { flex: 0 0 48px; align-self: stretch; display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; padding: 0; }
.mts-tick-box { width: 20px; height: 20px; border-radius: 6px; background: var(--primary-600, #0d9488); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.mts-drow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mts-dtile { flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--surface-hover, #f1f5f9); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; line-height: 1.05; }
.mts-dtile b { font-size: 15px; color: var(--text-primary, #0f172a); }
.mts-dname { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mts-dname b { font-size: 15px; color: var(--text-primary, #1e293b); }
.mts-dname span { font-size: 12.5px; color: var(--text-secondary, #64748b); }
.mts-chev { color: #94a3b8; font-size: 12px; }
.mts-drow-b { border-top: 1px solid var(--border-color, #e2e8f0); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.mts-summary { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary, #334155); }
body.dark-mode .mts-pick, body.dark-mode .mts-drow, body.dark-mode .mts-monthpanel { background: var(--slate-800, #1e293b); border-color: var(--slate-600, #475569); color: var(--slate-100, #f1f5f9); }
body.dark-mode .mts-drow.is-open { border-color: #14b8a6; }
body.dark-mode .mts-dtile { background: #0f172a; color: #cbd5e1; }
body.dark-mode .mts-dtile b, body.dark-mode .mts-dname b { color: #f1f5f9; }
body.dark-mode .mts .mts-mday.is-on, body.dark-mode .mts .mts-pick.is-on { background: rgba(20, 184, 166, 0.15); border-color: #14b8a6; color: #5eead4; }

/* Suggest fair times (2026-10-30, canvas "Times between parties" 2): one
   outlined teal button with the board's star, and a line saying what it did. */
.mts-suggest { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.mts .mts-suggest-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  border: 2px solid #0d9488; background: #f0fdfa; color: #0f766e;
  font: inherit; font-size: 15px; font-weight: 700;
}
.mts .mts-suggest-btn i { color: #0d9488; }
.mts .mts-suggest-btn:disabled { opacity: 0.6; cursor: default; }
.mts .mts-suggest-btn:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.mts-suggest-note { margin: 0; font-size: 13px; line-height: 1.45; color: #475569; }
body.dark-mode .mts .mts-suggest-btn { background: rgba(20, 184, 166, 0.12); border-color: #14b8a6; color: #5eead4; }
body.dark-mode .mts .mts-suggest-btn i { color: #5eead4; }
body.dark-mode .mts-suggest-note { color: #cbd5e1; }