/* The menu link page's own rules (canvas "Menu link page: app-style navigation",
   2026-10-19), over table-order's tokens.css and app.css, switched on by boot.js
   putting .dd-app on <html>. The first rule is the no-JavaScript lander's English
   line, under the German one (same pairing as r.html). Colours only through the
   tokens, so the phone's dark palette follows. */
html:not(.dd-app) .en { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

/* What stands out: the search field's rim and magnifier (DESIGN.md § 1, amber). */
html.dd-app { --amber: #9a6a0a; }
@media (prefers-color-scheme: dark) { html.dd-app { --amber: #dcc184; } }

/* The ground of a dish card and the next-category card: the faintest tint of
   the primary plate's green (--cta-fill), near white yet apart from the page,
   with a green edge (the owner, 2026-10-19: "daha canlı ama sade", then "closer
   to white", then "reduce green tone more"). Green, because a card is
   something to press. */
html.dd-app { --dish-ground: #f9fbf6; --dish-edge: rgba(79,112,49,0.10); }
@media (prefers-color-scheme: dark) { html.dd-app { --dish-ground: rgba(176,208,151,0.04); --dish-edge: rgba(176,208,151,0.12); } }

html.dd-app .ml-bar { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.dd-app .ml-kicker { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; color: var(--muted); }
/* The logo at the top bar's left on every screen, as diner/index.html's .mark.
   On a narrow phone, beside a category's list button, only the monogram, so
   the bar's three parts fit one row. */
html.dd-app .ml-bar-start { display: flex; align-items: center; gap: 14px; min-width: 0; }
html.dd-app .ml-brand {
  flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--paper-dim); text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
html.dd-app .ml-brand svg { display: block; flex: none; color: var(--accent); }
html.dd-app .ml-brand b { color: var(--accent); font-weight: 700; }
@media (max-width: 440px) { html.dd-app .ml-bar-start .ml-brand-word { display: none; } }
/* The language chip keeps to the right, whatever is (or is not) on the left. */
html.dd-app .ml-bar .ml-lang { margin-left: auto; }
/* The contents' free QR menu chip goes right beside it, in the language chip's
   own style (the owner, 2026-10-25). A phone keeps the three on one row: the
   logo is only its monogram, and below 360 px the chip drops its glyph. */
html.dd-app .ml-bar .ml-qrchip { margin-left: auto; }
html.dd-app .ml-bar .ml-qrchip + .ml-lang { margin-left: 0; }
@media (max-width: 440px) {
  html.dd-app .ml-bar-full { gap: 8px; }
  html.dd-app .ml-bar-full .ml-brand-word { display: none; }
}
@media (max-width: 359px) { html.dd-app .ml-bar-full .ml-qrchip svg { display: none; } }

/* ── The categories beside a category or a dish (screens/side.js) ─────────── */
/* A phone: no panel; the top bar's button brings the same list as a sheet
   from the left. A wide screen: the panel on the left, sticky, scrolling on its
   own, as the owner portal's menu rail; the shell widens to hold both. */
html.dd-app .ml-side { display: none; }
/* What sits beside the panel (a category, a dish, or the dishes found), and
   the phone list under its search field. */
html.dd-app .ml-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
html.dd-app .ml-drawer .ml-search { margin-bottom: 6px; }
@media (min-width: 720px) {
  html.dd-app .dd-shell.ml-wide { max-width: 1000px; }
  html.dd-app .ml-split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
  html.dd-app .ml-side {
    display: flex; flex-direction: column; gap: 4px; padding-top: 8px;
    position: sticky; top: calc(var(--dd-head-h, 56px) + 8px);
    max-height: calc(100vh - var(--dd-head-h, 56px) - 16px); overflow-y: auto;
  }
  /* Above .ml-chip's own display, which comes later in this file. */
  html.dd-app .ml-bar .ml-drawer-btn { display: none; }
}
/* "Back to the menu": full green, white text (the owner, 2026-10-19). */
html.dd-app .ml-side-head {
  min-height: 44px; padding: 0 16px; margin-bottom: 8px; border: 0; border-radius: 22px;
  background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
/* The panel's height is capped, so nothing in it may shrink to fit: the search
   field was squeezed to half its height. The panel scrolls instead. */
html.dd-app .ml-side > * { flex: none; }
html.dd-app .ml-side-list { display: flex; flex-direction: column; gap: 2px; }
html.dd-app .ml-side-row {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 10px; background: none;
  display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 15px; line-height: 20px;
  color: var(--paper); cursor: pointer;
}
html.dd-app .ml-side-row:hover { background: var(--dish-ground); }
html.dd-app .ml-side-name { flex: 1; min-width: 0; }
/* Where you are: the fact colour (DESIGN.md § 1). */
html.dd-app .ml-side-on, html.dd-app .ml-side-on:hover { background: var(--notice-12); color: var(--notice-ink); font-weight: 600; }
html.dd-app .ml-side-on .ml-count { color: var(--notice-ink); }
html.dd-app .ml-drawer { justify-content: flex-start; align-items: stretch; }
html.dd-app .ml-drawer .dd-sheet { width: min(320px, 86vw); max-width: none; height: 100%; max-height: none; border-radius: 0 18px 18px 0; }
html.dd-app .ml-drawer .dd-sheet-grab { display: none; }
html.dd-app .ml-drawer .dd-sheet-body { padding: 4px 8px 20px; }
html.dd-app .ml-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }

/* Chips: the language chip on a field's contour; the way back, the diet
   chip and "Get the app" on the secondary button's accent edge. */
html.dd-app .ml-chip {
  flex: none; height: 36px; padding: 0 12px; border-radius: 18px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--card); color: var(--paper); border: 1px solid var(--line-dash);
}
/* Every button that is not the primary is TONAL here: a soft green fill, dark
   green text, no edge. The owner, 2026-10-19: the white button with a green
   outline (--btn2-*, the table page's .dd-btn-secondary) is hard to recognise
   as a button; this page only for now, the rest of the apps later. */
html.dd-app { --tonal-fill: #e2edd8; --tonal-ink: #2a4317; }
@media (prefers-color-scheme: dark) { html.dd-app { --tonal-fill: #3d5329; --tonal-ink: #eef4e6; } }
html.dd-app .ml-back, html.dd-app .ml-diet {
  background: var(--tonal-fill); color: var(--tonal-ink); border: 0;
}
html.dd-app .dd-btn-secondary { background: var(--tonal-fill); color: var(--tonal-ink); border-color: transparent; box-shadow: none; }
/* "Get the app" is the one filled button (the owner, 2026-10-19: full green,
   white text), on a blue band: the app offer is a fact, not an alarm. */
html.dd-app .ml-getapp { background: var(--accent); color: var(--on-accent); border: 0; }
/* A chosen need is a value you chose: blue (DESIGN.md § 1). */
html.dd-app .ml-diet-on { padding: 0 2px 0 12px; border: 1.5px solid var(--notice); background: var(--notice-12); color: var(--notice-ink); }
html.dd-app .ml-diet-name, html.dd-app .ml-diet-x, html.dd-app .ml-x, html.dd-app .ml-link {
  border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
html.dd-app .ml-diet-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
html.dd-app .ml-x { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
html.dd-app .ml-link { color: var(--accent); font-size: 15px; font-weight: 600; }

/* ── The contents ─────────────────────────────────────────────────────────── */
html.dd-app .ml-screen { padding-top: 8px; display: flex; flex-direction: column; gap: 14px; }
html.dd-app .ml-below { display: flex; flex-direction: column; gap: 14px; }
html.dd-app .ml-title { margin: 0; font-size: 28px; line-height: 32px; font-weight: 600; }
html.dd-app .ml-branch { margin: 4px 0 0; font-size: 15px; line-height: 21px; color: var(--paper-dim); }
html.dd-app .ml-mast .ml-note { margin-top: 8px; }
/* The venue's name and the Share chip on one row, the chip level with the
   name's first line, however many lines the name takes. */
html.dd-app .ml-mast { display: flex; align-items: flex-start; gap: 12px; }
html.dd-app .ml-mast-text { flex: 1; min-width: 0; }
html.dd-app .ml-share-btn { background: var(--tonal-fill); color: var(--tonal-ink); border: 0; }
html.dd-app .ml-approw { background: var(--notice-12); border-radius: 12px; padding: 10px 8px 10px 14px; display: flex; align-items: center; gap: 10px; }
html.dd-app .ml-approw p { margin: 0; flex: 1; font-size: 13px; line-height: 18px; color: var(--paper); }

html.dd-app .ml-search {
  height: 48px; box-sizing: border-box; border-radius: 12px; border: 1.5px solid var(--amber);
  padding: 0 6px 0 14px; display: flex; align-items: center; gap: 10px; color: var(--amber);
}
html.dd-app .ml-search:focus-within { border-width: 2px; padding-left: 13.5px; }
html.dd-app .ml-search-input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; -webkit-appearance: none;
  font: inherit; font-size: 16px; color: var(--paper);
}
html.dd-app .ml-search-input::-webkit-search-cancel-button { display: none; }
html.dd-app .ml-search-input::placeholder { color: var(--muted); }

html.dd-app .ml-contents-head { display: flex; align-items: center; gap: 10px; }
html.dd-app .ml-rule { flex: 1; height: 1px; background: var(--line); }
html.dd-app .ml-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; line-height: 21px; }
html.dd-app .ml-group { display: flex; flex-direction: column; gap: 6px; }

/* A list as a printed menu's contents: rows on the page itself, a hairline
   between, no box fill (the owner, 2026-10-19). */
html.dd-app .ml-band { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
html.dd-app .ml-row {
  width: 100%; min-height: 56px; box-sizing: border-box; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line);
  background: none; display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; color: var(--paper); cursor: pointer;
}
html.dd-app .ml-num { flex: none; width: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
html.dd-app .ml-name { flex: 1; min-width: 0; font-size: 17px; line-height: 23px; font-weight: 600; }
html.dd-app .ml-count { flex: none; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
html.dd-app .ml-hitcount { font-weight: 600; color: var(--notice-ink); }
/* A category the filter found nothing in dims; it never goes. */
html.dd-app .ml-dim .ml-name, html.dd-app .ml-dim .ml-hitcount { color: var(--muted); opacity: 0.75; }
html.dd-app .ml-hit { min-height: 56px; padding: 8px 4px; }
html.dd-app .ml-hit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dd-app .ml-where { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
html.dd-app .ml-price { flex: none; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--paper); white-space: nowrap; }
html.dd-app .ml-foot { padding-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ── A category ───────────────────────────────────────────────────────────── */
html.dd-app .ml-cat-title { margin: 4px 0 0; font-size: 24px; line-height: 30px; font-weight: 600; }
html.dd-app .ml-cat-head .ml-note { margin-top: 2px; }
/* DishCard (DESIGN.md part 14): text left, an 84px photo right, the price and
   the marks on the last line. */
/* A ground of its own, so one dish ends where the next begins (the owner,
   2026-10-19). */
html.dd-app .ml-dish {
  width: 100%; box-sizing: border-box; border: 1px solid var(--dish-edge); border-radius: 12px; padding: 12px;
  display: flex; gap: 12px; background: var(--dish-ground); color: var(--paper); text-align: left; font: inherit; cursor: pointer;
}
html.dd-app .ml-dish-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.dd-app .ml-dish-name {
  font-size: 16px; line-height: 21px; font-weight: 600; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.dd-app .ml-dish-desc {
  font-size: 13px; line-height: 18px; color: var(--paper-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.dd-app .ml-dish-line { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The price as a round pill in INK (the text colour as its ground, the page's
   as its text: near black with white in light, inverted in dark), at the
   card's right and in its vertical middle, the photo (if any) under it; the
   text centred in the pill on both axes. The owner, 2026-10-19: "smaller,
   centered of card and circle", then option B "ink" of the price tile canvas,
   so green stays for what to press and blue for where you are. */
html.dd-app .ml-dish-side { flex: none; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
html.dd-app .ml-price-pill {
  height: 28px; padding: 0 12px; border-radius: 14px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 14px; line-height: 1; font-weight: 700; white-space: nowrap;
}
/* A dish with a photo (option D of the "Dish card with photo" canvas): a
   108 px square on the right, the price pill sitting on its bottom edge with
   a ring of the page's colour; the card gives the pill room below. */
html.dd-app .ml-dish-has-photo { padding-bottom: 18px; }
/* Such a card is a box of two buttons: the text (the dish) and the photo (it,
   large). The text's button reaches over the card's padding, so a tap there
   still opens the dish. */
html.dd-app .ml-dish-main {
  flex: 1; min-width: 0; display: flex; align-self: stretch; margin: -12px 0 -18px -12px; padding: 12px 0 18px 12px;
  border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer;
}
html.dd-app .ml-dish-photo {
  flex: none; align-self: center; position: relative; width: 108px; height: 108px;
  padding: 0; border: 0; background: none; border-radius: 12px; cursor: zoom-in;
}
html.dd-app .ml-thumb { display: block; width: 108px; height: 108px; border-radius: 12px; object-fit: cover; background: var(--ink2); }
html.dd-app .ml-dish-photo .ml-price-pill { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); box-shadow: 0 0 0 2px var(--ink); }
/* The buy-line card (screens/dish-card.js `buy`, the app's DishCard since 2026-11-01; canvas "Shop product card",
   2026-11-02): the words and a 96 px photo side by side, top-aligned, nothing laid on the photo; ONE line at the foot
   across the card, the price pill on the left and the control, or the orange reason there is none, on the right. */
html.dd-app .ml-dish-buy { flex-direction: column; gap: 12px; cursor: default; }
html.dd-app .ml-dish-top { display: flex; align-items: flex-start; gap: 12px; }
html.dd-app .ml-dish-buy .ml-dish-main { margin: 0; padding: 0; }
html.dd-app .ml-dish-buy .ml-dish-text { gap: 2px; }
html.dd-app .ml-dish-note { margin-top: 2px; color: var(--muted); }
html.dd-app .ml-dish-buy .ml-dish-photo { align-self: flex-start; width: 96px; height: 96px; }
html.dd-app .ml-dish-buy .ml-thumb { width: 96px; height: 96px; }
html.dd-app .ml-dish-buyline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.dd-app .ml-dish-buyline > .ml-ord-row, html.dd-app .ml-dish-buyline > .ml-dish-held { margin-left: auto; }
/* The app's StatusPill `warn`, `readable`: the orange wash, its edge, 16 px words. */
html.dd-app .ml-dish-held { min-height: 24px; box-sizing: border-box; padding: 2px 10px; border-color: var(--warn); border-radius: 999px; font-size: 16px; line-height: 20px; }
/* The end of a category (option B of the "Category end" canvas): back to the
   menu and the next category side by side, in light blue, apart from the
   dishes' green and the prices' ink (the owner, 2026-10-19: "this but a
   different background colour"); the star's note after them as fine print. */
html.dd-app .ml-pager { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.dd-app .ml-pager-btn {
  min-height: 64px; box-sizing: border-box; padding: 10px 14px; border: 0; border-radius: 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  background: var(--notice-12); color: var(--notice-ink); text-align: left; font: inherit; cursor: pointer;
}
html.dd-app .ml-pager-next { align-items: flex-end; text-align: right; }
html.dd-app .ml-pager-only { grid-column: 1 / -1; }
html.dd-app .ml-pager .ml-kicker { color: var(--notice-ink); opacity: 0.85; }
html.dd-app .ml-pager-name { font-size: 15px; line-height: 20px; font-weight: 600; }
html.dd-app .ml-fine { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
html.dd-app .ml-fine p { margin: 0; font-size: 12px; line-height: 17px; color: var(--muted); }

/* ── A dish ───────────────────────────────────────────────────────────────── */
html.dd-app .ml-back-dish { align-self: flex-start; padding-left: 8px; }
html.dd-app .ml-photo { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 12px; background: var(--ink2); }
html.dd-app .ml-photo-btn { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 12px; cursor: zoom-in; }

/* ── A photo, large (screens/zoom.js) ─────────────────────────────────────── */
/* The sheet as a dark full-screen view: the photo as large as fits, the dish's
   name and the X over it in white, a tap beside it closes. */
html.dd-app .ml-zoom { background: rgba(0,0,0,0.88); align-items: center; justify-content: center; }
html.dd-app .ml-zoom .dd-sheet {
  width: auto; max-width: min(960px, 100vw); height: auto; max-height: 100vh;
  background: transparent; color: #ffffff; border-radius: 0; box-shadow: none;
}
html.dd-app .ml-zoom .dd-sheet-grab { display: none; }
html.dd-app .ml-zoom .dd-sheet-title { color: #ffffff; }
html.dd-app .ml-zoom .dd-sheet-head button { color: #ffffff; }
html.dd-app .ml-zoom .dd-sheet-body { padding: 8px 12px 16px; display: flex; justify-content: center; }
html.dd-app .ml-zoom-img { display: block; max-width: 100%; max-height: 78vh; border-radius: 12px; object-fit: contain; }

/* ── Share (screens/share.js) ─────────────────────────────────────────────── */
/* Full screen and dark, as the photo view, so the white code is the brightest
   thing on the phone held out across the table. "Send the link" is this
   view's one filled button. */
html.dd-app .ml-share { background: rgba(0,0,0,0.92); align-items: stretch; justify-content: center; }
html.dd-app .ml-share .dd-sheet {
  width: 100%; max-width: 520px; height: 100%; max-height: none;
  background: transparent; color: #ffffff; border-radius: 0; box-shadow: none;
}
html.dd-app .ml-share .dd-sheet-grab { display: none; }
html.dd-app .ml-share .dd-sheet-title { color: #ffffff; }
html.dd-app .ml-share .dd-sheet-head button { color: #ffffff; }
/* Centred by auto margins, not justify-content, so a landscape phone too short
   for it scrolls to the top instead of cutting the title row off. */
html.dd-app .ml-share .dd-sheet-body { display: flex; flex-direction: column; }
html.dd-app .ml-share-body { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 24px; text-align: center; }
html.dd-app .ml-share-name { margin: 0; font-size: 16px; line-height: 22px; color: rgba(255,255,255,0.75); }
html.dd-app .ml-share-plate { padding: 4px; border-radius: 16px; background: #ffffff; }
html.dd-app .ml-qr { display: block; width: min(300px, 76vw, 50vh); height: min(300px, 76vw, 50vh); }
html.dd-app .ml-share-scan { margin: 0; max-width: 300px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,0.75); }
html.dd-app .ml-share-link { max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
html.dd-app .ml-share-url { min-width: 0; font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: #ffffff; text-align: left; overflow-wrap: anywhere; }
html.dd-app .ml-share-copy {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14); color: #ffffff; cursor: pointer;
}
html.dd-app .ml-share-copy span { display: inline-flex; }
html.dd-app .ml-share-copy .ml-i-tick, html.dd-app .ml-share-copy.ml-copied .ml-i-copy { display: none; }
html.dd-app .ml-share-copy.ml-copied .ml-i-tick { display: inline-flex; }
html.dd-app .ml-share-status { margin: 0; min-height: 20px; font-size: 14px; line-height: 20px; color: #b0d097; }
html.dd-app .ml-share-send {
  width: min(300px, 100%); min-height: 48px; padding: 0 24px; border: 0; border-radius: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
html.dd-app .ml-dish-head .ml-cat-title { margin-top: 0; }
html.dd-app .ml-dish-price { margin: 4px 0 0; font-family: var(--font-mono); font-size: 15px; line-height: 21px; font-weight: 600; color: var(--paper); }
html.dd-app .ml-dish-desc-full { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--paper-dim); }
html.dd-app .ml-dish-head .dd-tags { margin-top: 10px; }
html.dd-app .ml-choices { display: flex; flex-direction: column; gap: 6px; }
html.dd-app .ml-choice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html.dd-app .ml-choice-name { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; }
html.dd-app .ml-option { min-height: 44px; font-size: 15px; cursor: default; }

/* ── The diet sheet ───────────────────────────────────────────────────────── */
html.dd-app .ml-chips { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
html.dd-app .ml-pick {
  height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line-dash); background: var(--card);
  color: var(--paper); font: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
html.dd-app .ml-pick-on { border: 1.5px solid var(--notice); background: var(--notice-12); color: var(--notice-ink); }
html.dd-app .ml-sheet-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
html.dd-app .ml-sheet-actions .ml-show { flex: 1; }