/* The menu builder (menu/index.html). The frame, the steps, the last step and the phone of the
   preview are the card builder's (builder.css), and so is the strip of a narrow screen (.b-peek);
   this file adds the list of categories and dishes, and the menu's face in that strip. */
.mb-cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long dish name is cut short, it never widens the page */
  gap: 0.5rem;
  padding: 0.875rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}

/* The small round buttons that move or remove a category or a dish: a thumb's size */
.mb-tool {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: 700 1.125rem var(--sans);
  cursor: pointer;
}

.mb-tool:hover {
  background: var(--tint);
  color: var(--ink);
}

.mb-tool[disabled] {
  opacity: 0.3;
}

.mb-dishes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-dish {
  border-top: 1px solid var(--line);
}

.mb-dish summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.375rem 0.25rem;
  cursor: pointer;
  list-style: none;
}

.mb-dish summary::-webkit-details-marker {
  display: none;
}

.mb-dish summary b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-dish summary span {
  flex: none;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mb-dish summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.mb-dish[open] summary::after {
  rotate: -135deg;
}

.mb-dish.is-off summary b {
  color: var(--muted);
  text-decoration: line-through;
}

.mb-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* or a row of sizes would be as wide as its fields want, wider than a 320px phone */
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 1rem;
}

.mb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: 0.5rem;
}

.mb-fields .label {
  margin-bottom: 0.25rem;
}

.mb-marks {
  display: flex;
  min-width: 0; /* a fieldset is as wide as its content unless told otherwise */
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A mark is a tick box that looks like the chip the guest will see */
.mb-marks label {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.mb-marks label:has(:checked) {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent-text);
}

.mb-marks label:has(:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* "Not available today": the tick used most, so a whole thumb's height */
.mb-fields .check {
  min-height: 2.75rem;
  margin-top: 0;
}

/* "Save changes", in the bar under every step of a menu that is online */
.b-nav #save-now {
  margin-inline-start: auto;
}

.mb-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.mb-foot .text-link {
  margin-inline-start: auto;
  color: var(--danger);
}

.mb-add {
  justify-self: start;
}

.mb-count {
  color: var(--muted);
  font-size: 0.875rem;
}

.mb-cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
}

/* A dish with several sizes: its name takes the whole row, and each size is a name and a price */
.mb-row.is-sized {
  grid-template-columns: minmax(0, 1fr);
}

.mb-sizes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.mb-size {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem auto;
  align-items: center;
  gap: 0.375rem;
}

.mb-size .input {
  min-width: 0;
  padding-inline: 0.625rem;
}

/* A photo that was sent: a small square of it, and the buttons that change or remove it */
.mb-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.mb-thumb {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.625rem;
  object-fit: cover;
  background: var(--tint);
}

/* A plain word that acts (Delete, Remove the photo): a button that looks like a link */
.mb-photo .text-link,
.mb-foot .text-link {
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  font: 600 1rem var(--sans);
  cursor: pointer;
}

.mb-photo .text-link {
  color: var(--danger);
}

/* The pictures at the top of the menu (the first step, under the name and the short line) */
.mb-top-photo {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Two rows, the logo and the cover: a small picture (or its empty place), what it is, and its buttons */
.mb-top-photo .mb-photo { padding-block: 0.25rem; }
.mb-photo-what { display: grid; flex: 1 1 8rem; min-width: 0; }
.mb-photo-what .help { margin: 0; }
.mb-thumb-logo { object-fit: contain; background: #fff; } /* a logo is shown whole */
.mb-thumb-empty { border: 1.5px dashed var(--line); background: none; }

.mb-top-photo .error {
  margin: 0;
}

.more-fields .grid {
  margin-top: 1rem;
}

/* "Enregistrer les modifications" beside "Retour" is wider than a phone: it goes under it */
.b-nav {
  flex-wrap: wrap;
}

.b-nav #save-now {
  margin-left: auto;
}

/* The strip of a narrow screen (.b-peek in builder.css) wears the menu's face: the top of what
   menuHtml writes (menu-view.js), laid out here in a row: the cover or the logo as a small round
   picture, the name, and the line under it. White, like the menu itself, whatever the theme.
   The header and the logo's box give their places to what they hold (display: contents), so the
   picture, the name and the line are the cells of one grid. The right padding is the button's room. */
.mb-peek {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.375rem 3.5rem 0.375rem 0.375rem;
  border-radius: 1.75rem;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  background: #fff;
  color: #0d0f15;
}

.b-peek:active .mb-peek {
  filter: brightness(0.94); /* it can be pressed */
}

.mb-peek :is(.m-head, .m-brand) {
  display: contents;
}

/* a menu with a logo and a cover: the strip shows the logo; with a cover alone, the cover (not the letter) */
.mb-peek:has(.m-logo) .m-cover,
.mb-peek:has(.m-cover) .m-mark,
.mb-peek .m-head::after {
  display: none;
}

.mb-peek :is(.m-cover, .m-logo, .m-mark) {
  grid-area: 1 / 1 / span 2;
  align-self: center;
  width: 2.75rem;
  height: 2.75rem;
  aspect-ratio: auto;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
}

.mb-peek :is(h1, .m-line) {
  grid-column: 2;
  overflow: hidden;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-peek .m-line {
  font-size: 0.875rem;
}

/* At the last step "Not online yet" stands where the line was (builder.css puts it there, after a
   picture's width): the name moves up to leave it the room, and without a picture the pill starts
   where the name does. */
.b-peek.is-marked .mb-peek {
  align-content: start;
}

.b-peek.is-marked .m-line {
  display: none;
}

/* The pill is placed from the left whatever the menu's direction, and the count of the Dishes
   step is our own words, read from the left: the name of a menu read from right to left comes to
   stand above them. */
.b-peek:is(.is-marked, .is-counted) .mb-peek :is(h1, .m-line) {
  text-align: left;
}

.b-peek:not(:has(img, .m-mark)) .state-pill {
  margin-left: 1.125rem;
}

/* No short line: the name stands in the middle of the picture's height, not at its top */
.mb-peek:not(:has(.m-line)) h1 {
  grid-row: 1 / span 2;
  align-self: center;
}

/* No logo: the letter of the menu, at the strip's size */
.mb-peek .m-mark {
  margin: 0;
  font-size: 1.25rem;
}

/* The strip keeps one row: the touches a look gives the name and the line on the page (a label, rules beside it, a
   rule under the name) are the page's, not the strip's */
.mb-peek .m-line {
  display: block;
  max-width: none;
  padding: 0;
  background: none;
  letter-spacing: 0;
  text-transform: none;
  rotate: none;
}

.mb-peek :is(.m-head h1, .m-line)::before,
.mb-peek :is(.m-head h1, .m-line)::after {
  display: none;
}

/* A logo is shown whole, in a small rounded square, as on the menu: a round cut would take its corners. */
.mb-peek .m-logo {
  border-radius: 0.625rem;
  object-fit: contain;
}

/* The strip is white in the dark theme too: its button is then the light theme's. */
.mb-peek ~ #peek-open {
  border-color: #e3e5ec;
  background: #fff;
  color: #0d0f15;
}

/* ---- The first step: the look of the menu, the name style and the owner's colour ---- */

/* The look: eight tiles (two by two on a phone, four by four from 30rem), each a small piece of a menu in that look (the classes of menu.css), its name under it */
.mb-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.mb-look { display: grid; gap: 0.375rem; padding: 0.375rem 0.375rem 0.5rem; border: 1.5px solid var(--line); border-radius: 1rem; background: var(--surface); font-weight: 700; text-align: center; cursor: pointer; }
.mb-look:has(:checked) { border-color: var(--accent); background: var(--tint); color: var(--accent-text); }
.mb-look:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the piece of menu: always light, like the menu itself; nothing in it can be pressed or read aloud.
   It is made of spans (a label holds no block), which stand as the page's own blocks do */
.mb-look span { display: block; }
.mb-look :is(.m-dish, .m-top) { display: flex; }
.mb-look .menu-page { width: 100%; min-width: 0; min-height: 0; max-width: none; margin: 0; padding: 0.625rem 0.625rem 0.5rem; border-radius: 0.625rem; font-size: 0.8125rem; text-align: start; overflow: hidden; pointer-events: none; }
.mb-look .menu-page:not(.look-carte, .look-board, .look-fresh, .look-night, .look-fine, .look-street, .look-photo) { outline: 1px solid #e2e4ea; outline-offset: -1px; color: #0d0f15; }
.mb-look { grid-template: 1fr auto / minmax(0, 1fr); }
.mb-look .m-cat { padding: 0; }
.mb-looks .mb-look .menu-page .m-cat-name { padding-block: 0.25rem; font-size: 0.75rem; letter-spacing: 0.06em; }
.mb-looks .mb-look .menu-page.look-fresh .m-cat-name { font-size: 0.9375rem; letter-spacing: 0; }
.mb-look .m-dishes { margin-top: 0.375rem; gap: 0.25rem; }
.mb-look .m-dish { padding: 0.25rem 0.5rem; border-radius: 0.5rem; }
.mb-look .menu-page:not(.look-fresh) .m-dish { padding-inline: 0; border-bottom: 0; }
.mb-looks .mb-look .menu-page :is(.m-dish-name, .m-price) { font-size: 0.8125rem; }
.mb-looks .mb-look .m-top { flex-wrap: nowrap; gap: 0 0.375rem; }
/* a tile is some 120px wide: the rows give way before the price does, and the carte's title keeps to one line */
.mb-look .m-dishes { grid-template-columns: minmax(0, 1fr); }
.mb-look .m-dish { min-width: 0; }
.mb-looks .mb-look .look-carte .m-cat-name { gap: 0.375rem; white-space: nowrap; }
.mb-looks .mb-look .look-carte .m-cat-name::before, .mb-looks .mb-look .look-carte .m-cat-name::after { min-width: 0.375rem; }
.mb-looks .mb-look .look-carte .m-top::after { min-width: 0.5rem; background-size: 100% 100%; } /* in a tile the dotted line always shows */
.mb-looks .mb-look .m-top .m-dish-name { flex-basis: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-looks .mb-look .look-carte .m-top .m-dish-name { flex: 0 1 auto; }
@media (min-width: 30rem) { .mb-looks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the tiles of the four later looks: each look's own traits, at a tile's size */
.mb-looks .mb-look .menu-page:is(.look-night, .look-fine) .m-cat-name { font-size: 0.6875rem; }
.mb-looks .mb-look .menu-page.look-night .m-cat-name::after { min-width: 0.375rem; }
.mb-looks .mb-look .menu-page.look-fine .m-cat-name::after { margin-top: 0.25rem; }
.mb-looks .mb-look .menu-page.look-fine .m-dish { flex-direction: column; align-items: center; padding-block: 0.125rem; }
.mb-looks .mb-look .menu-page.look-fine .m-text { gap: 0; }
.mb-looks .mb-look .menu-page.look-fine .m-top .m-dish-name { flex: none; }
.mb-looks .mb-look .menu-page.look-street .m-cat-name { margin: -0.625rem -0.625rem 0.25rem; padding: 0.375rem 0.625rem; font-size: 0.875rem; letter-spacing: 0; }
.mb-looks .mb-look .menu-page.look-street .m-price { padding: 0 0.375rem; border-radius: 0.375rem; }
.mb-looks .mb-look .menu-page.look-photo .m-cat-name { font-size: 0.9375rem; letter-spacing: 0; }
.mb-looks .mb-look .menu-page.look-photo .m-dish { padding: 0; border-radius: 0.5rem; }
.mb-looks .mb-look .menu-page.look-photo .m-text { padding: 0.25rem 0.5rem; }
/* the drawn picture of the Photo tile: a gradient, no file */
.mb-ph { height: 1.75rem; background: linear-gradient(120deg, #c98a3b, #7a4b2a); }

/* The name style: five tiles (two by two on a phone, five in a row from 40rem), each the top of the menu, small:
   its name and its line in the look picked and in that style (the classes of menu.css, name-bold) */
.field-set > .help:has(+ .mb-styles) { margin: 0 0 0.5rem; }
.mb-styles .mb-style .menu-page { display: grid; align-content: center; min-height: 5.5rem; padding: 0.5rem 0.375rem; }
.mb-styles .mb-style .menu-page .m-head { min-width: 0; gap: 0.25rem; margin: 0; padding: 0.375rem 0.25rem; border-radius: 0.5rem; box-shadow: none; text-align: center; }
.mb-styles .mb-style .menu-page .m-name { font-size: 1.0625rem; line-height: 1.2; text-wrap: balance; } /* a long name takes two lines rather than lose its end */
.mb-styles .mb-style .menu-page .m-name::after { margin-top: 0.375rem; }
.mb-styles .mb-style .menu-page:not(.look-carte, .name-refined) .m-name::after, .mb-styles .mb-style .menu-page.name-refined .m-name::after { width: 1.25rem; } /* a rule made short; Carte's diamond stays a diamond */
.mb-styles .mb-style .menu-page .m-line { display: block; max-width: 100%; overflow: hidden; font-size: 0.6875rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; rotate: none; }
.mb-styles .mb-style .menu-page.look-street .m-line { padding: 0.0625rem 0.25rem; }
.mb-styles .mb-style .menu-page .m-line::before, .mb-styles .mb-style .menu-page .m-line::after { display: none; }
@media (min-width: 40rem) { .mb-styles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The colours: three rows, each a name and its swatches */
.mb-colors { display: grid; gap: 0.875rem; }
.mb-color { display: grid; gap: 0.375rem; }
.mb-color-name { color: var(--muted); font-size: 0.9375rem; font-weight: 600; }
.mb-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; }
/* the background and the text: a circle of the colour in use (menu-builder.js), with the plus of the ninth swatch until the owner picks one there */
.mb-pick .swatch input + span { background-image: none; }
.mb-pick .swatch input:not([aria-current="true"]) + span { background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), radial-gradient(closest-side, var(--bg) 58%, transparent 60%); background-position: center; background-size: 0.75rem 2px, 2px 0.75rem, 100% 100%; background-repeat: no-repeat; }
.mb-pick .text-link { min-height: 2.75rem; padding: 0 0.25rem; border: 0; background: none; font: 600 1rem var(--sans); cursor: pointer; }
/* a colour too weak on the background: amber, like everything that is not as the owner thinks it is */
.mb-weak { display: grid; justify-items: start; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: 1rem; background: #fdf0d8; color: #6b3c00; }
.mb-weak p { margin: 0; font-size: 0.9375rem; }
.mb-weak .btn { border-color: transparent; background: #fff; color: #0d0f15; }

/* The accent: the swatches of the card builder (.swatch in builder.css), each coloured by its class. The ninth, the
   browser's colour field, keeps the card builder's rainbow until a colour is picked there */
.mb-accents .swatch input[type="radio"] + span { background: var(--m-accent, #0d0f15); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); } /* the ring: the black circle shows on the dark page */

/* The strip wears the look: its paper, its ink, the way it sets the name */
.mb-peek:is(.look-carte, .look-board, .look-fresh, .look-night, .look-fine, .look-street, .look-photo, .has-tint) { background: var(--m-paper); color: var(--m-ink); }
.mb-peek:is(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-line { color: var(--m-soft); }
.mb-peek.look-fine h1 { font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.mb-peek.look-street h1 { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; }
.mb-peek[dir="rtl"] h1 { letter-spacing: 0; }
.mb-peek.look-carte h1 { font-family: var(--serif); font-weight: 700; }
.mb-peek.look-carte h1::after { display: none; }
.mb-peek.look-board h1 { font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.mb-peek.look-fresh h1 { font-weight: 900; }
/* and the name style: its letters, not its sizes */
.mb-peek:is(.name-classic, .name-refined, .name-italic) h1 { font-family: var(--serif); letter-spacing: 0; text-transform: none; }
.mb-peek.name-classic h1 { font-weight: 700; }
.mb-peek.name-bold h1 { font-weight: 900; letter-spacing: -0.02em; text-transform: none; }
.mb-peek.name-refined h1 { font-weight: 400; font-variant-caps: small-caps; }
.mb-peek.name-italic h1 { font-style: italic; font-weight: 600; }
.mb-peek[dir="rtl"] h1 { font-style: normal; font-variant-caps: normal; }

/* The legends of this step start where the fields do */
.b-form legend.label { padding: 0; }
.b-form .field-set { margin-top: 0.5rem; }

/* "Example", over the phone while it shows the example menu of a kind: not amber, which says "not online yet" */
.state-pill.mb-example { background: var(--surface); color: var(--muted); }
.b-preview .mb-example-help { max-width: 17rem; margin: 0; text-align: center; }

/* ---- The organiser of the Dishes step (menu-builder.js, drawCats): each category folded to one line (its name, how many
   dishes, a chevron), one open at a time with its dishes and its tools, a handle to drag (mouse and finger alike, one
   path: sortable), and the box that adds a category where the owner is ---- */
.mb-cats { gap: 0.5rem; }
.mb-cat { padding: 0; gap: 0; border-width: 1px; }
.mb-cat-line { display: flex; align-items: center; gap: 0.25rem; min-height: 3.5rem; padding-inline-end: 0.25rem; }
.mb-grip { flex: none; align-self: stretch; width: 2.5rem; cursor: grab; touch-action: none; user-select: none; background: radial-gradient(circle, var(--muted) 1.5px, transparent 2px) 0 0 / 0.375rem 0.375rem; background-clip: content-box; padding: 1.125rem 0.875rem; }
.mb-cat-open { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0 0.75rem 0 0; border: 0; background: none; color: var(--ink); font: 700 1rem var(--sans); text-align: start; cursor: pointer; }
.mb-cat-open b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-cat-open b.is-unnamed { color: var(--muted); font-style: italic; font-weight: 600; }
.mb-n { flex: none; min-width: 1.75rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--tint); color: var(--accent-text); font-size: 0.875rem; text-align: center; font-variant-numeric: tabular-nums; }
.mb-cat-open::after, .mb-fold::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border: solid var(--muted); border-width: 0 2px 2px 0; rotate: 45deg; margin-inline-end: 0.25rem; }
.mb-fold::after { rotate: -135deg; margin: 0.25rem 0 0; }
.mb-cat-line .input { flex: 1; min-width: 0; font-weight: 700; }
.mb-cat.is-open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* "Same name" goes on its own line under the name, so even at 320px both names read whole enough to tell apart */
.mb-cat-open:has(.mb-flag:not([hidden])) { row-gap: 0.25rem; padding-block: 0.5rem; }
.mb-cat-open:has(.mb-flag:not([hidden]))::before { content: ""; order: 1; flex-basis: 100%; }
.mb-flag { order: 2; flex: none; padding: 0.125rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); font-size: 0.8125rem; font-weight: 700; }
.mb-cat-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; padding: 0 0.875rem 0.875rem; }
.mb-same { display: grid; gap: 0.5rem; justify-items: start; margin: 0; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); font-size: 0.9375rem; font-weight: 600; }
.mb-same .btn { max-width: 100%; height: auto; min-height: 2.75rem; padding-block: 0.5rem; border-color: var(--warn); background: var(--surface); color: var(--warn); white-space: normal; text-align: start; } /* a long name wraps: never wider than a 320px phone */
.mb-same > * { min-width: 0; }
.mb-new-note { margin: 0; color: var(--warn); font-size: 0.9375rem; font-weight: 600; } /* the same calm note as .mb-same: not an alert */
.mb-dishes > li { display: flex; align-items: flex-start; }
.mb-dishes > li > .mb-grip { width: 2rem; height: 3.25rem; padding: 1rem 0.625rem; border-top: 1px solid transparent; }
.mb-dishes > li > .mb-dish { flex: 1; min-width: 0; }
.mb-cat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--line); }
.mb-cat-tools .text-link { min-height: 2.75rem; margin-inline-start: auto; padding: 0 0.5rem; border: 0; background: none; color: var(--danger); font: 600 1rem var(--sans); cursor: pointer; }
.is-dragging { position: relative; z-index: 2; box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18); background: var(--surface); }
.is-dragging .mb-grip { cursor: grabbing; }
.mb-new { display: grid; gap: 0.75rem; padding: 0.875rem; border: 1.5px dashed var(--accent); border-radius: var(--r-panel); background: var(--surface); }
.mb-new > b { font-size: 1rem; }
.mb-ideas { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.mb-ideas button { min-height: 2.5rem; padding: 0 0.875rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.9375rem var(--sans); cursor: pointer; }
.mb-where { display: flex; flex-wrap: wrap; gap: 0.375rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.mb-where legend { padding: 0 0 0.375rem; color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.mb-where label { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.875rem; border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.mb-where label:has(:checked) { border-color: var(--accent); background: var(--tint); color: var(--accent-text); }
.mb-where label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.mb-new-go { display: flex; flex-wrap: wrap; gap: 0.5rem; }