/* Basic mode editors: tip menu (bm-), room title (bt-), Lovense tiers (bl-).
   Built on the dashboard's own tokens and parts (.card, .btn, .pill, .input). */

.bm-spacer { flex: 1; }
.save-bar.bm-bar, .save-bar.bt-bar, .save-bar.bl-bar { flex-wrap: wrap; row-gap: 10px; }
:is(.bm-bar, .bt-bar, .bl-bar) .status:empty { display: none; }
/* Status gets its own line under the buttons, so a long message never pushes them around. */
:is(.bm-bar, .bt-bar, .bl-bar) .status { order: 10; flex-basis: 100%; text-align: right; }
/* Narrow card: the range and Test on top, strength · seconds · label underneath. */
@container (max-width: 700px) {
  .bl-tier:not(.bl-ro) { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "range range range test" "str dur name name"; gap: 8px 14px; }
  .bl-tier:not(.bl-ro) .bl-range { grid-area: range; min-width: 0; }
  .bl-tier:not(.bl-ro) .bl-arrow { display: none; }
  .bl-tier:not(.bl-ro) .bl-str { grid-area: str; }
  .bl-tier:not(.bl-ro) .bl-dur { grid-area: dur; }
  .bl-tier:not(.bl-ro) .bl-name { grid-area: name; min-width: 0; }
  .bl-tier:not(.bl-ro) .bl-name .input { width: 100%; min-width: 90px; }
  .bl-tier:not(.bl-ro) .bl-test { grid-area: test; margin-left: 0; }
}
@container (max-width: 460px) {
  .bl-tier:not(.bl-ro) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "range range test" "str dur dur" "name name name"; }
}
.bt-adv-h { font-size: 14px; margin: 4px 0 8px; }
.bt-adv-goal { display: grid; gap: 4px; margin-bottom: 8px; }
.ht-basic .ht-input + .hint { margin-top: 8px; }
@media (max-width: 560px) { :is(.bm-bar, .bt-bar, .bl-bar) .status { text-align: left; } }
.bm-bar .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.bm-bar .btn.secondary[aria-disabled="true"]:hover { background: var(--paper); }

/* ---- Tip menu ---- */
.bm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bm-head .sub { margin-bottom: 14px; }
.bm-count { flex: none; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bm-locked { margin-bottom: 14px; }
.bm-cols, .bm-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 36px; gap: 10px; }
.bm-cols { font-size: 12px; font-weight: 700; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.bm-row { align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bm-row .input { padding: 9px 11px; font-size: 15px; }
.bm-row .price { font-variant-numeric: tabular-nums; }
.bm-row .price.round { border-color: #e2b36b; background: #fffaf0; }
.bm-row .input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px #b3364f1f; }
.bm-row .icon-btn { margin-top: 4px; }
.bm-what { min-width: 0; display: grid; gap: 6px; }
.bm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bm-meta[hidden], .bm-also[hidden] { display: none; }
.bm-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; cursor: help; }
.bm-also { font-size: 12px; color: var(--faint); }
.bm-empty { padding: 18px 0 6px; border-top: 1px solid var(--line); }
.bm-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bm-empty p { color: var(--muted); font-size: 14px; }
#bm-notes:not(:empty) { margin-top: 12px; display: grid; gap: 4px; }
.bm-note a { font-weight: 600; }
.bm-round-note::before, .bm-warn::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #e2b36b; vertical-align: 1px; }
.bm-warn { color: var(--warn); }
.bm-hidden { color: var(--faint); }
/* The Advanced editor, ghosted (read-only copy of the preset grid). */
.bm-adv-live { margin-bottom: 10px; }
.bm-adv-row { display: grid; grid-template-columns: 80px minmax(120px, 1fr) auto; gap: 8px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bm-adv-row .input { padding: 7px 9px; font-size: 14px; }
.bm-adv-cols { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 0 6px; }
.bm-adv-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; }
@media (max-width: 1000px) {
  .bm-adv-row { grid-template-columns: 76px minmax(0, 1fr); }
  .bm-adv-chips { grid-column: 2 / 3; }
  .bm-adv-cols > :last-child { display: none; }
}
.bm-reload { margin-left: 4px; font-size: 13px; }

/* ---- Room title ---- */
.bt-head { display: flex; align-items: center; gap: 10px; }
.bt-head h2 { margin: 0; }
.bt-card > .sub { margin-top: 4px; }
.bt-goal { margin-bottom: 14px; }
.bt-goal a { font-weight: 700; margin-left: 4px; }
.bt-text { display: block; resize: none; min-height: 72px; line-height: 1.45; }
.bt-letter { margin-top: 8px; }
.bt-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.bt-prev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); font-size: 14px; }
.bt-prev > .hint { grid-column: 1 / -1; }
.bt-tags:not(:empty) { margin-top: 16px; }
.ht-basic .ht-sites { margin-top: 6px; color: var(--faint); }

/* ---- Lovense tiers ---- */
.bl-card { container-type: inline-size; }
.bl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bl-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.bl-custom { margin-bottom: 4px; }
.bl-list { list-style: none; border-top: 1px solid var(--line); }
.bl-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.bl-tier strong { color: var(--ink); font-weight: 700; }
.bl-range { display: inline-flex; align-items: baseline; gap: 8px; min-width: 212px; }
.bl-range-ro { min-width: 130px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-to { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 52px; }
.bl-arrow { color: var(--faint); }
.bl-f { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bl-f small { font-size: 11px; color: var(--faint); }
.bl-f .input { width: 70px; padding: 7px 9px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.bl-f .input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px #b3364f1f; }
.bl-name .input { width: 128px; }
.bl-test { margin-left: auto; min-width: 64px; }

@media (max-width: 560px) {
  .bm-cols, .bm-row { grid-template-columns: 78px minmax(0, 1fr) 32px; gap: 8px; }
}