/* Phone layer: one media query, three layouts (html[data-m] = 1, 2, 3; js/mobile.js builds the DOM and sets html.m-on).
   Rules are scoped to html.m-on, so a narrow desktop window that was not loaded as a phone keeps the desktop page.
   Type floor 13 px, 44 px targets made of padding, no borders or rounding. */
@media (max-width: 620px) {
  html.m-on {
    --m-edge: 16px;
    --m-bot: 0px;           /* height of the resting bottom surface, set by mobile.js */
    --m-cy: 50%;            /* middle of the free band, set by mobile.js */
    --m-halo: 0 0 3px var(--ground), 0 0 6px var(--ground), 0 0 12px var(--ground), 0 0 18px var(--ground);
    --sl: env(safe-area-inset-left, 0px);
    --sr: env(safe-area-inset-right, 0px);
    --st: env(safe-area-inset-top, 0px);
    --sb: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: none;
  }
  html.m-on body { overscroll-behavior: none; }

  /* ---------- what a phone does not have ---------- */
  html.m-on #panel, html.m-on #views, html.m-on #presets, html.m-on #pr-panel { display: none; }
  html.m-on .v-arrow { top: var(--m-cy); }
  html.m-on #detail { right: calc(var(--m-edge) + var(--sr)); bottom: calc(var(--m-bot) + 8px); text-shadow: var(--m-halo); }

  /* ---------- shared pieces ---------- */
  html.m-on #m-top, html.m-on #m-bot { position: fixed; left: 0; right: 0; z-index: 2; font-family: var(--font-read); pointer-events: none; }
  html.m-on #m-top { top: 0; padding: calc(var(--st) + 4px) calc(var(--m-edge) + var(--sr)) 2px calc(var(--m-edge) + var(--sl)); text-shadow: var(--m-halo); }
  html.m-on #m-bot { bottom: 0; }
  html.m-on #m-top button, html.m-on #m-top input, html.m-on #m-top li, html.m-on #m-bot button, html.m-on #m-bot a, html.m-on #m-sheet { pointer-events: auto; }
  html.m-on button { -webkit-appearance: none; appearance: none; border-radius: 0; }

  /* flag and name of the country, or the short project name while nothing is chosen */
  html.m-on .m-id { display: flex; align-items: center; min-width: 0; min-height: 44px; }
  html.m-on .m-flag { flex: none; width: 24px; height: 18px; margin-right: 10px; object-fit: fill; }
  html.m-on .m-flag[hidden] { display: none; }
  html.m-on .m-flag.lt { outline: 1px solid var(--line); outline-offset: -1px; }
  html.m-on .m-name, html.m-on .m-idle, html.m-on .m-title {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-display); font-weight: var(--title-strong-weight); font-size: 22px; line-height: 1.15; letter-spacing: var(--title-tracking); color: var(--ink);
  }
  html.m-on .m-idle { font-weight: var(--title-weight); }
  html.m-on:has(#readout[data-state="idle"]) .m-id > :not(.m-idle) { display: none; }
  html.m-on:has(#readout:not([data-state="idle"])) .m-idle { display: none; }
  html.m-on .m-title { font-weight: var(--title-weight); }
  html.m-on .m-tcity { font-weight: var(--title-strong-weight); }

  /* Globe / Country as words */
  html.m-on .toggle[data-view] { display: flex; gap: 0; flex: none; pointer-events: auto; }
  html.m-on .toggle[data-view] button {
    min-height: 44px; padding: 0 10px; border: 0; background: none; text-shadow: var(--m-halo);
    font-family: var(--font-ui); font-size: var(--size-small); font-weight: var(--ui-weight); letter-spacing: var(--ui-tracking); text-transform: uppercase;
    color: var(--ink-faint);
  }
  html.m-on .toggle[data-view] button:last-child { padding-right: 0; }
  html.m-on .toggle[data-view] button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }

  /* About: a word in the rail */
  html.m-on #about-link {
    position: static; z-index: auto; min-height: 44px; padding: 0 0 0 12px; text-shadow: var(--m-halo);
    font-size: var(--size-small); letter-spacing: var(--ui-tracking);
  }
  html.m-on .about { z-index: 8; width: 100%; border-left: 0; padding-top: var(--st); padding-bottom: var(--sb); }
  html.m-on .about-wrap { padding: 56px calc(20px + var(--sr)) 56px calc(20px + var(--sl)); }
  html.m-on .about-x, html.m-on .m-sx, html.m-on .m-x, html.m-on .m-sbtn { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); background: none; border: 0; }
  html.m-on .about-x { position: fixed; top: calc(var(--st) + 4px); right: calc(4px + var(--sr)); z-index: 9; }
  html.m-on .about-x svg, html.m-on .m-sx svg, html.m-on .m-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  html.m-on .m-sbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }

  /* search: a plain field under the rail, the list drops over the globe */
  html.m-on #v-search { position: relative; width: 100%; margin: 0; pointer-events: auto; }
  html.m-on #v-q { height: 44px; padding: 0; font-size: 16px; text-align: left; text-shadow: var(--m-halo); border-bottom: 1px solid var(--ink-faint); }
  html.m-on #v-list { top: 100%; max-height: 46vh; overflow-y: auto; padding: 0; background: var(--ground); box-shadow: 0 1px 0 var(--line); text-shadow: none; }
  html.m-on #v-list li { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 16px; text-align: left; }
  html.m-on #v-list li.none { padding: 0 10px; }

  /* ---------- the compact readout (bar, sheet, or bottom lines) ---------- */
  html.m-on #readout { font-family: var(--font-read); }
  html.m-on #readout > .mro, html.m-on #readout > .mro-idle { display: none; }
  html.m-on:not(.m-open) #readout #r-title, html.m-on:not(.m-open) #readout .ro, html.m-on:not(.m-open) #readout > .note { display: none !important; }
  html.m-on:not(.m-open) #readout[data-state="result"] > .mro { display: block; }
  html.m-on:not(.m-open) #readout[data-state="idle"] > .mro-idle { display: block; }
  html.m-on:not(.m-open) #readout[data-state="text"] > .note { display: block !important; margin: 0; }
  html.m-on .mro, html.m-on .mro-idle, html.m-on:not(.m-open) #readout[data-state="text"] > .note { min-height: 68px; }
  html.m-on .mro p, html.m-on .mro-idle { margin: 0; }
  html.m-on .mro-idle, html.m-on #readout > .note { font-size: 16px; line-height: 1.4; color: var(--ink-soft); max-width: none; }
  html.m-on .mro-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
  html.m-on .m-pop { font-size: 36px; line-height: 1.05; letter-spacing: var(--ratio-tracking); color: var(--ink); white-space: nowrap; font-weight: var(--ratio-weight); }
  html.m-on .mro-who { font-size: 16px; line-height: 1.3; color: var(--ink-soft); }
  html.m-on .m-city {
    padding: 12px 0; margin: -12px 0; font-weight: var(--ratio-weight); color: var(--ink);
    text-decoration: underline dotted; text-decoration-color: var(--hl); text-decoration-thickness: 2px; text-underline-offset: 0.22em;
  }
  html.m-on.m-solo .m-city { text-decoration: none; pointer-events: none; }
  html.m-on .mro-line { margin-top: 8px !important; font-size: 17px; line-height: 1.3; color: var(--ink-soft); }
  html.m-on .mro-line b, html.m-on .mro-l1 b, html.m-on .mro-l2 b { color: var(--ink); font-weight: var(--ratio-weight); }
  html.m-on .mro .swatch { margin-right: 8px; vertical-align: 0.05em; }
  html.m-on .mro-sep { margin: 0 8px; }
  html.m-on .mro-l1, html.m-on .mro-l2 { display: none; }

  /* ---------- open readout: the stock layout 1, sized for a phone ---------- */
  html.m-on.m-open #readout #r-title { font-size: 21px; line-height: 1.22; padding-right: 44px; }
  html.m-on .m-clause { display: none; }
  html.m-on .ro { margin-top: 14px; }
  html.m-on .ro-hero { font-size: 52px; }
  html.m-on .ro1-who { font-size: 19px; }
  html.m-on .ro1-land { font-size: 17px; }
  html.m-on .ro1-rel { font-size: 17px; }
  html.m-on .ro1-ratio .ro-ratio { font-size: 44px; }
  html.m-on.m-open #readout > .note { margin-top: 14px; font-size: 16px; }

  /* ================================================ 1: split corners ================================================ */
  html.m-on[data-m="1"] #m-top {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 44px; align-items: center; column-gap: 8px;
  }
  html.m-on[data-m="1"] .m-id { grid-column: 1; grid-row: 1; }
  html.m-on[data-m="1"] .toggle[data-view] { grid-column: 2; grid-row: 1; justify-self: end; }
  html.m-on[data-m="1"] #v-search { grid-column: 1; grid-row: 2; }
  html.m-on[data-m="1"] #about-link { grid-column: 2; grid-row: 2; justify-self: end; }
  html.m-on[data-m="1"] #m-sheet {
    position: relative; background: var(--ground); box-shadow: 0 -1px 0 var(--line);
    padding: 14px calc(var(--m-edge) + var(--sr)) calc(12px + var(--sb)) calc(var(--m-edge) + var(--sl));
  }
  html.m-on[data-m="1"] #m-sheet.open { max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; padding-top: 20px; animation: m-rise 0.22s ease-out; }
  html.m-on[data-m="1"] .m-x { display: none; }
  html.m-on[data-m="1"] #m-sheet.open .m-x { display: flex; position: sticky; top: 0; float: right; margin: -14px -12px 0 0; z-index: 1; }

  /* ================================================ 2: masthead ===================================================== */
  html.m-on[data-m="2"] #m-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 44px; align-items: center; column-gap: 8px; }
  html.m-on[data-m="2"] .m-id2 { grid-column: 1; grid-row: 1; }
  html.m-on[data-m="2"] #about-link { grid-column: 2; grid-row: 1; justify-self: end; }
  html.m-on[data-m="2"] #v-search { grid-column: 1 / -1; grid-row: 2; }
  html.m-on[data-m="2"] #m-bot { display: flex; flex-direction: column; align-items: stretch; }
  html.m-on[data-m="2"] .toggle[data-view] { align-self: flex-end; margin-right: calc(var(--m-edge) + var(--sr)); }
  html.m-on[data-m="2"] #m-sheet {
    position: relative; background: var(--ground); box-shadow: 0 -1px 0 var(--line);
    padding: 0 calc(var(--m-edge) + var(--sr)) calc(12px + var(--sb)) calc(var(--m-edge) + var(--sl));
  }
  html.m-on[data-m="2"] #m-sheet.open { max-height: 78vh; overflow-y: auto; overscroll-behavior: contain; }
  html.m-on[data-m="2"] .m-grip { position: relative; display: block; width: 100%; height: 30px; padding: 0; background: none; border: 0; }
  html.m-on[data-m="2"] .m-grip::before { content: ''; position: absolute; left: 50%; top: 12px; width: 40px; height: 4px; margin-left: -20px; background: var(--ink-faint); opacity: 0.7; }
  html.m-on[data-m="2"] .m-kick { display: none; margin: 4px 0 0; align-items: center; }
  html.m-on[data-m="2"] #m-sheet.open .m-kick { display: flex; }
  html.m-on[data-m="2"] .m-kick .m-name { font-size: 22px; }
  html.m-on[data-m="2"] #m-sheet.open #r-title { margin-top: 2px; padding-right: 0; }
  html.m-on[data-m="2"] .m-x { display: none; }
  html.m-on[data-m="2"] .m-flag + .m-title { margin-left: 0; }

  /* ================================================ 3: minimal ====================================================== */
  html.m-on[data-m="3"] #m-top { display: flex; align-items: flex-start; justify-content: space-between; }
  html.m-on[data-m="3"] .m-corner { min-width: 0; padding-bottom: 4px; }
  html.m-on[data-m="3"] .m-corner .m-id { min-height: 40px; }
  html.m-on[data-m="3"] .m-corner .m-pop { display: block; margin: 0; font-size: 46px; }
  html.m-on[data-m="3"] .m-corner .mro-who { margin: 4px 0 0; }
  html.m-on[data-m="3"]:has(#readout:not([data-state="result"])) .m-corner .m-pop,
  html.m-on[data-m="3"]:has(#readout:not([data-state="result"])) .m-corner .mro-who { display: none; }
  html.m-on[data-m="3"] .m-sbtn { flex: none; margin-right: -10px; pointer-events: auto; text-shadow: none; }
  html.m-on.m-sov:not(.m-q-open) #v-search { display: none; }
  html.m-on.m-sov.m-q-open #v-search {
    position: fixed; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; background: var(--ground);
    padding: calc(var(--st) + 4px) calc(var(--m-edge) + var(--sr)) 4px calc(var(--m-edge) + var(--sl)); box-shadow: 0 1px 0 var(--line);
  }
  html.m-on.m-sov.m-q-open #v-q { flex: 1; min-width: 0; text-shadow: none; }
  html.m-on.m-sov.m-q-open #v-list { top: 100%; left: 0; right: 0; }
  html.m-on.m-sov .m-sx { display: none; margin-right: -10px; }
  html.m-on.m-sov.m-q-open .m-sx { display: flex; }
  html.m-on[data-m="3"] #m-bot { padding: 0 calc(var(--m-edge) + var(--sr)) var(--sb) calc(var(--m-edge) + var(--sl)); text-shadow: var(--m-halo); }
  html.m-on[data-m="3"] #readout { pointer-events: none; }
  html.m-on[data-m="3"] .mro, html.m-on[data-m="3"] .mro-idle, html.m-on[data-m="3"]:not(.m-open) #readout[data-state="text"] > .note { min-height: 46px; }
  html.m-on[data-m="3"] .mro-head, html.m-on[data-m="3"] .mro-line { display: none; }
  html.m-on[data-m="3"] .mro-l1, html.m-on[data-m="3"] .mro-l2 { display: block; font-size: 16px; line-height: 1.3; color: var(--ink-soft); }
  html.m-on[data-m="3"] .mro-l2 { margin-top: 2px; }
  html.m-on[data-m="3"] .m-row { display: flex; align-items: center; justify-content: space-between; }
  html.m-on[data-m="3"] #about-link { padding-left: 0; }
  html.m-on[data-m="3"] .m-x, html.m-on[data-m="3"] .m-grip { display: none; }
}


/* ================= 1a, 1b, 1c: layout 1 with the key info on top (html.m-info) ================= */
@media (max-width: 620px) {
  html.m-on.m-info #m-top { background: var(--ground); box-shadow: 0 1px 0 var(--line); text-shadow: none; padding-top: calc(var(--st) + 2px); padding-bottom: 0; }
  html.m-on.m-info #m-sheet { position: relative; padding: 0 0 8px; background: none; box-shadow: none; }
  html.m-on.m-info #m-sheet.open { max-height: calc(100vh - var(--st) - 60px); overflow-y: auto; overscroll-behavior: contain; animation: m-rise 0.22s ease-out; }
  html.m-on.m-info .m-idrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-right: 0; }
  html.m-on.m-info .m-idrow .m-id { flex: 1; min-width: 0; }
  html.m-on.m-info .m-ctl { flex: none; display: flex; align-items: center; }
  html.m-on.m-info .mro, html.m-on.m-info .mro-idle, html.m-on.m-info:not(.m-open) #readout[data-state="text"] > .note { min-height: 70px; }
  html.m-on.m-info .m-pop { font-size: 34px; }
  html.m-on.m-info .m-x { display: none; }
  html.m-on.m-info #m-sheet.open .m-x { display: flex; position: absolute; top: 0; right: -10px; z-index: 2; }
  html.m-on.m-info.m-open .m-ctl { visibility: hidden; }
  html.m-on.m-info .m-aboutrow { display: none; }
  html.m-on.m-info #m-sheet.open .m-aboutrow { display: block; margin-top: 8px; }
  html.m-on.m-info .m-aboutrow #about-link { padding: 0; }
  html.m-on.m-info .m-off { display: none; }
  html.m-on.m-info #about-link { text-shadow: none; }
  html.m-on.m-info .m-i { width: 44px; height: 44px; margin-right: -12px; padding: 0; background: none; border: 0; color: var(--ink-soft); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 24px; }
  html.m-on.m-info .m-sbtn { margin-right: -10px; }
  /* bottom: a thin row (1a) or only the switch over the globe (1b, 1c) */
  html.m-on.m-info #m-bot { display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--m-edge) + var(--sr)) calc(2px + var(--sb)) calc(var(--m-edge) + var(--sl)); }
  html.m-on.m-info .toggle[data-view] button { font-size: 14px; padding: 0 14px; }
  html.m-on[data-m="1a"] #m-bot { gap: 8px; justify-content: space-between; background: var(--ground); box-shadow: 0 -1px 0 var(--line); padding-top: 4px; }
  html.m-on[data-m="1a"] #m-bot #v-search { flex: 1; min-width: 0; }
  html.m-on[data-m="1a"] #m-bot #v-q { text-shadow: none; }
  html.m-on[data-m="1a"] #v-list { top: auto; bottom: 100%; box-shadow: 0 -1px 0 var(--line); }
  html.m-on[data-m="1a"] .toggle[data-view] button { padding: 0 8px; }
  html.m-on[data-m="1a"] .toggle[data-view] button:last-child { padding-right: 0; }
  html.m-on[data-m="1a"] .m-ctl #about-link { padding: 0 0 0 12px; }
  html.m-on[data-m="1b"] #m-top > #v-search { padding-bottom: 6px; margin-bottom: 4px; }
  html.m-on[data-m="1b"] #m-top > #v-search #v-q { text-shadow: none; }
  html.m-on[data-m="1b"].m-open #m-top > #v-search { display: none; }
  html.m-on.m-sov.m-q-open.m-info #m-sheet { visibility: hidden; }
}
@keyframes m-rise { from { transform: translateY(18px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #m-sheet { animation: none !important; } }
@media (max-width: 620px) { html.m-on .m-src { display: none; } }
@media (max-width: 620px) { html.m-on[data-m="3"].m-q-open .m-corner { visibility: hidden; } }

/* ================= 4, 5, 6 (html.m-new): key info and the Globe / Country switch on top, the bottom is the globe ================= */
@media (max-width: 620px) {
  html.m-on.m-new #m-bot { padding-bottom: var(--sb); }
  html.m-on.m-new .m-off, html.m-on.m-new .m-x, html.m-on.m-new .m-grip { display: none; }
  html.m-on.m-new .m-i { width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--ink-soft); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 24px; }
  html.m-on.m-new .m-idrow { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
  html.m-on.m-new .m-idrow .m-id { flex: 1; min-width: 0; }
  html.m-on.m-new .mro, html.m-on.m-new .mro-idle, html.m-on.m-new:not(.m-open) #readout[data-state="text"] > .note { min-height: 68px; }
  html.m-on.m-new .toggle[data-view] button { font-size: 14px; padding: 0 14px; }
  html.m-on.m-new .toggle[data-view] button:last-child { padding-right: 14px; }
  html.m-on.m-new .m-sbtn { text-shadow: none; }

  /* ---------- 4: one slim toolbar, the info block under it ---------- */
  html.m-on[data-m="4"] #m-top { background: var(--ground); box-shadow: 0 1px 0 var(--line); text-shadow: none; padding: var(--st) calc(var(--m-edge) + var(--sr)) 0 calc(var(--m-edge) + var(--sl)); }
  html.m-on[data-m="4"] .m-bar { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
  html.m-on[data-m="4"] .m-bar-r { display: flex; align-items: center; gap: 4px; margin-right: -10px; }
  html.m-on[data-m="4"] .toggle[data-view] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  html.m-on[data-m="4"] .toggle[data-view] button { position: relative; min-height: 36px; padding: 0 16px; text-shadow: none; text-decoration: none; }
  html.m-on[data-m="4"] .toggle[data-view] button:last-child { padding-right: 16px; }
  html.m-on[data-m="4"] .toggle[data-view] button::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
  html.m-on[data-m="4"] .toggle[data-view] button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 15%, transparent); box-shadow: inset 0 -2px 0 var(--ink); }
  html.m-on[data-m="4"] #m-sheet { position: relative; padding: 0 0 6px; background: none; box-shadow: none; cursor: pointer; }
  html.m-on[data-m="4"] #m-sheet.open { max-height: calc(100vh - var(--st) - 64px); overflow-y: auto; overscroll-behavior: contain; cursor: auto; animation: m-rise 0.22s ease-out; }
  html.m-on[data-m="4"] .m-idrow { position: sticky; top: 0; z-index: 1; background: var(--ground); }
  html.m-on[data-m="4"] .m-more { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; color: var(--ink-soft); }
  html.m-on[data-m="4"] .m-more svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.2s; }
  html.m-on[data-m="4"] #m-sheet.open .m-more svg { transform: rotate(180deg); }
  html.m-on[data-m="4"]:has(#readout[data-state="idle"]) .m-more { display: none; }
  html.m-on[data-m="4"] .m-pop { font-size: 34px; }
  html.m-on[data-m="4"].m-q-open #m-top { background: none; box-shadow: none; }
  html.m-on[data-m="4"].m-q-open .m-bar, html.m-on[data-m="4"].m-q-open #m-sheet { visibility: hidden; }

  /* ---------- 5: desktop logic, no surface (text halo over the globe as on desktop) ---------- */
  html.m-on[data-m="5"] #m-top { padding: var(--st) calc(var(--m-edge) + var(--sr)) 2px calc(var(--m-edge) + var(--sl)); }
  html.m-on[data-m="5"] .m-row5 { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
  html.m-on[data-m="5"] .m-name-btn { display: flex; align-items: center; min-width: 0; min-height: 44px; padding: 0; background: none; border: 0; text-align: left; color: inherit; text-shadow: inherit; font: inherit; }
  html.m-on[data-m="5"] .m-name-btn .m-lens { flex: none; width: 18px; height: 18px; margin-left: 10px; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; }
  html.m-on[data-m="5"] #about-link { flex: none; min-height: 44px; padding: 0 0 0 16px; font-size: 13px; color: var(--ink-soft); }
  html.m-on[data-m="5"] .m-sw5 { display: flex; justify-content: center; }
  html.m-on[data-m="5"].m-q-open .m-name-btn, html.m-on[data-m="5"].m-q-open #about-link { display: none; }
  html.m-on[data-m="5"].m-sov.m-q-open #v-search { position: relative; top: auto; left: auto; right: auto; z-index: auto; flex: 1; padding: 0; background: none; box-shadow: none; }
  html.m-on[data-m="5"].m-sov.m-q-open .m-sx { margin-right: 0; }

  /* ---------- 6: card, ground at 90 %, no border, no rounding ---------- */
  html.m-on[data-m="6"] #m-top { text-shadow: none; padding: calc(var(--st) + 8px) calc(8px + var(--sr)) 0 calc(8px + var(--sl)); }
  html.m-on[data-m="6"] #m-card { pointer-events: auto; padding: 0 8px 0 16px; background: color-mix(in srgb, var(--ground) 90%, transparent); }
  html.m-on[data-m="6"] .m-idrow .m-i { width: auto; min-width: 44px; height: 44px; margin-right: -2px; padding: 0 0 0 12px; font-family: var(--font-ui); font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
  html.m-on[data-m="6"] .m-pop { font-size: 34px; }
  html.m-on[data-m="6"] .mro, html.m-on[data-m="6"] .mro-idle, html.m-on[data-m="6"]:not(.m-open) #readout[data-state="text"] > .note { min-height: 62px; }
  html.m-on[data-m="6"] .m-row6 { display: flex; align-items: center; justify-content: space-between; }
  html.m-on[data-m="6"] .toggle[data-view] button:first-child { padding-left: 0; }
  html.m-on[data-m="6"] .toggle[data-view] button { text-shadow: none; }
}

/* 6: the search opens in the row that was tapped. The Globe / Country words give way to the field, the lens becomes the field's cross,
   the list drops from the bottom edge of the card (#v-search is static, so the list is positioned against the card). */
@media (max-width: 620px) {
  html.m-on[data-m="6"] #m-card { position: relative; }
  html.m-on[data-m="6"] .m-row6 { min-height: 44px; }
  html.m-on[data-m="6"].m-q-open .m-row6 > .toggle[data-view], html.m-on[data-m="6"].m-q-open .m-row6 > .m-sbtn { display: none; }
  html.m-on[data-m="6"].m-sov.m-q-open #v-search { position: static; z-index: auto; flex: 1; min-width: 0; padding: 0; background: none; box-shadow: none; }
  html.m-on[data-m="6"].m-sov.m-q-open .m-sx { margin-right: 0; }
}