/* OpenVibe.Domains — the room's own pieces. Colours come from the theme (--bg-*, --text-*, --border) and the room's
   accent (.ov-room in openvibe-shared kit.css: --room-accent, --room-strong, --room-fill, --room-on), so every theme,
   light or dark, wears it. Phone first: tables become stacked rows under 700 px; nothing scrolls sideways. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--text-primary, #e6edf7); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 12px; border-radius: 10px; background: var(--bg-card, #0f1729); color: inherit; }
.dm { display: block; }
.dm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 64px; }
.dm a { color: var(--room-strong); }
.dm h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.dm h3 { margin: 22px 0 8px; font-size: 1rem; }
.dm section { margin-top: clamp(28px, 4vw, 44px); }
.dm section > h2 { margin-bottom: 12px; }
.dm section > .dm-head-row { margin-bottom: 4px; }
.dm-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dm-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.dm-more .ovk-i { width: 1em; height: 1em; }
.dm-fine { margin: 6px 0 14px; max-width: 780px; color: var(--text-muted, #7386a3); font-size: .88rem; line-height: 1.55; }
.dm-lede { margin: 8px 0 0; max-width: 680px; color: var(--text-secondary, #96a7c2); line-height: 1.55; }
.dm-kicker { margin: 0 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--room-strong); }
.dm-page-h { padding-top: clamp(20px, 4vw, 40px); }
.dm-page-h h1, .dm-hit h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; overflow-wrap: anywhere; }

/* The box that prices a name, on pages other than the home's hero. */
.dm-box { display: flex; align-items: center; max-width: 560px; margin-top: 18px; border-radius: 999px; background: var(--bg-card, #0f1729); border: 1.5px solid color-mix(in srgb, var(--room-accent) 40%, var(--border, #1f2d47)); }
.dm-box:focus-within { border-color: var(--room-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-accent) 20%, transparent); }
.dm-box input { flex: 1; min-width: 0; height: 50px; padding: 0 8px 0 20px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1rem; outline: none; }
.dm-box input::-webkit-search-cancel-button { display: none; }
.dm-box button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 5px; border: 0; border-radius: 50%; background: var(--room-fill); color: var(--room-on); cursor: pointer; }
.dm-box button:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 3px; }
.dm-box .ovk-i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dm .ovk-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The board: endings as tiles, three years first. */
.dm-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 44%), 1fr)); gap: 10px; }
.dm-tile { position: relative; display: grid; gap: 4px; min-height: 132px; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--room-accent) 9%, transparent), transparent 65%), var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); text-decoration: none; transition: border-color .18s, transform .18s; }
.dm a.dm-tile { color: var(--text-primary, #e6edf7); }
.dm-tile:hover, .dm-tile:focus-visible { border-color: var(--room-accent); transform: translateY(-2px); outline: none; }
.dm-tile-tld { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--room-strong); }
.dm-tile-y3 { display: flex; align-items: baseline; gap: 6px; }
.dm-tile-y3 b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.dm-tile-y3 small, .dm-tile-y1, .dm-tile-n { font-size: .8rem; color: var(--text-muted, #7386a3); }
.dm-trap { display: inline-flex; align-items: center; width: fit-content; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: .74rem; font-weight: 800; color: var(--warning-text, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent); }
.dm-best { display: inline-flex; width: fit-content; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: .74rem; font-weight: 800; color: var(--room-on); background: var(--room-fill); }

/* Price tables: a row per ending or registrar; stacked on phones. */
.dm-table { display: grid; border: 1px solid var(--border, #1f2d47); border-radius: 16px; overflow: hidden; background: var(--bg-card, #0f1729); }
.dm-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border, #1f2d47); font-variant-numeric: tabular-nums; }
.dm-tr:first-child { border-top: 0; }
.dm-th { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #7386a3); background: color-mix(in srgb, var(--room-accent) 5%, transparent); }
.dm-tr.is-best { background: color-mix(in srgb, var(--room-accent) 9%, transparent); }
.dm-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; font-weight: 700; }
.dm-name a { text-decoration: none; overflow-wrap: anywhere; }
.dm-name a:hover { text-decoration: underline; }
.dm-y3 { font-weight: 800; }
.dm-aff { flex-basis: 100%; font-size: .72rem; font-weight: 600; color: var(--text-muted, #7386a3); }
@media (max-width: 699px) {
    .dm-th { display: none; }
    .dm-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
    .dm-name { grid-column: 1 / -1; font-size: 1.05rem; }
    .dm-tr > [data-l]::before { content: attr(data-l); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
}

/* A name's answer: free or taken, with the public facts. */
.dm-q { margin-top: 12px; }
.dm-hit { margin-top: 26px; padding: clamp(18px, 3vw, 28px); border-radius: 20px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.dm-hit.is-free { border-color: color-mix(in srgb, var(--success, #22c55e) 55%, var(--border, #1f2d47)); background: linear-gradient(140deg, color-mix(in srgb, var(--success, #22c55e) 12%, transparent), transparent 60%), var(--bg-card, #0f1729); }
.dm-page-h .dm-status { margin-top: 10px; }
.dm-page-h .dm-status.is-free .dm-pill { color: var(--success-text, #22c55e); background: color-mix(in srgb, var(--success, #22c55e) 16%, transparent); }
.dm-page-h .dm-status.is-taken .dm-pill { background: color-mix(in srgb, var(--text-muted, #7386a3) 22%, transparent); }
.dm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--text-secondary, #96a7c2); }
.dm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem; }
.is-free .dm-pill { color: var(--success-text, #22c55e); background: color-mix(in srgb, var(--success, #22c55e) 16%, transparent); }
.is-taken .dm-pill { color: var(--text-primary, #e6edf7); background: color-mix(in srgb, var(--text-muted, #7386a3) 22%, transparent); }
.is-unknown .dm-pill { color: var(--warning-text, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent); }
.dm-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.dm-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--room-fill); font-weight: 700; font-size: .92rem; text-decoration: none; }
.dm a.dm-btn { color: var(--room-on); }
.dm a.dm-btn.is-quiet { background: transparent; color: var(--room-strong); border: 1px solid color-mix(in srgb, var(--room-accent) 45%, var(--border, #1f2d47)); }

/* 8 touch targets (2026-10-29): the hero chips are 44 px tall; its two action links and the lone section link gain
   vertical-only hit areas. */
@media (pointer: coarse) {
  .dm .sc-room-chips a { min-height: 44px; }
  .dm article.is-in a, .dm article.is-flip a, .dm-more { position: relative; }
  .dm article.is-in a::after, .dm article.is-flip a::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
  .dm-more::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
}
.dm-btn:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }

/* An ending's page. */
.dm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 18px 0 0; }
.dm-facts > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); min-width: 0; }
.dm-facts dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.dm-facts dd { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.dm-facts dd b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dm-facts dd small { color: var(--text-muted, #7386a3); }
.dm-record dd { font-weight: 600; }
.dm-warn { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; max-width: 760px; padding: 12px 14px; border-radius: 14px; color: var(--text-primary, #e6edf7); background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 35%, transparent); line-height: 1.5; }
.dm-warn .ovk-i { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--warning-text, #f59e0b); }
.dm-chart { margin: 12px 0 0; padding: 14px; border-radius: 16px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.dm-chart svg { display: block; width: 100%; height: auto; }
.dm-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke: var(--room-accent); }
.dm-line.s1 { stroke: var(--text-secondary, #96a7c2); } .dm-line.s2 { stroke: var(--warning, #f59e0b); } .dm-line.s3 { stroke: var(--success, #22c55e); }
.dm-chart figcaption { margin-top: 8px; font-size: .82rem; color: var(--text-muted, #7386a3); }
.dm-timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid color-mix(in srgb, var(--room-accent) 40%, transparent); display: grid; gap: 12px; }
.dm-timeline li { position: relative; display: grid; gap: 2px; }
.dm-timeline li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--room-accent); }
.dm-timeline time { font-size: .78rem; color: var(--text-muted, #7386a3); }
.dm-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dm-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-primary, #e6edf7); text-decoration: none; font-weight: 600; font-size: .9rem; }

/* Scenes on the home: the renewal trap drawn, and a 3-year total added up (real catalog numbers). */
.dm-trap-fig { margin: 0; }
.dm-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; height: 190px; }
.dm-bar { position: relative; display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; }
.dm-bar span { align-self: end; height: var(--h); border-radius: 12px 12px 4px 4px; background: color-mix(in srgb, var(--warning, #f59e0b) 70%, transparent); }
.dm-bar.is-first span { background: var(--room-accent); }
.dm-bar b { margin-top: 8px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dm-bar small { font-size: .76rem; color: var(--text-muted, #7386a3); }
.dm-trap-fig figcaption { margin-top: 14px; color: var(--text-secondary, #96a7c2); line-height: 1.5; }
.dm-fig-tld { font-weight: 800; color: var(--room-strong); }
html.ov-motion [data-ov-reveal] .dm-bar span { transform: scaleY(.02); transform-origin: bottom; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .15s; }
html.ov-motion [data-ov-reveal].is-in .dm-bar span { transform: none; }
.dm-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 8px 0; }
.dm-sum > div { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--room-accent) 8%, var(--bg-secondary, #101828)); text-align: center; min-width: 110px; }
.dm-sum > div.is-total { background: var(--room-fill); color: var(--room-on); }
.dm-sum small { font-size: .74rem; opacity: .8; }
.dm-sum b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.dm-sum i { font-style: normal; font-size: 1.4rem; font-weight: 800; color: var(--text-muted, #7386a3); }
html[data-ov-motion=off] .dm-bar span{transform: none !important}

/* The API page. */
.dm-eps { display: grid; gap: 10px; margin: 12px 0 0; }
.dm-eps > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.dm-eps dt code { font: 600 .92rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--room-strong); overflow-wrap: anywhere; }
.dm-eps dd { margin: 6px 0 0; color: var(--text-secondary, #96a7c2); line-height: 1.5; }

/* ── The control panel (DOM-2): connections, zones, records, proposals ─────────────────────────────────────────── */
.dmp .ovk-i { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dmp-sub { color: var(--text-muted, #7386a3); font-size: .84rem; }
.dmp-notice { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 11px 14px; border-radius: 14px; font-weight: 600;
    color: var(--success-text, var(--success, #22c55e)); background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent); border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent); }
.dmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.dm-btn { gap: 8px; border: 0; color: var(--room-on); cursor: pointer; font: inherit; font-weight: 700; }
.dmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border, #1f2d47);
    background: var(--bg-card, #0f1729); color: var(--text-primary, #e6edf7); font: inherit; font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.dmp-btn:hover { border-color: color-mix(in srgb, var(--room-accent) 55%, var(--border, #1f2d47)); }
.dmp-btn--quiet { background: transparent; color: var(--text-secondary, #96a7c2); }
.dmp-btn:focus-visible, .dm-btn:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }

/* Signed out: three steps */
.dmp-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dmp-steps li { display: grid; gap: 6px; padding: 16px; border-radius: 18px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.dmp-steps li > span:last-child { color: var(--text-secondary, #96a7c2); line-height: 1.5; font-size: .92rem; }
.dmp-step-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--room-on); background: var(--room-fill); }

/* Status pills */
.dmp-st { font-size: .76rem; padding: 2px 10px; }
.dmp-st--pending { color: var(--room-strong); background: color-mix(in srgb, var(--room-accent) 16%, transparent); }
.dmp-st--applying { color: var(--warning-text, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent); }
.dmp-st--applied { color: var(--success-text, #22c55e); background: color-mix(in srgb, var(--success, #22c55e) 14%, transparent); }
.dmp-st--failed { color: var(--error-text, #f87171); background: color-mix(in srgb, var(--error, #ef4444) 14%, transparent); }
.dmp-st--declined, .dmp-st--expired, .dmp-st--rolled_back { color: var(--text-secondary, #96a7c2); background: color-mix(in srgb, var(--text-muted, #7386a3) 16%, transparent); }

/* Proposal cards */
.dmp-props { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.dmp-prop a { display: grid; gap: 6px; height: 100%; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--text-primary, #e6edf7);
    background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); transition: border-color .15s, transform .15s; }
.dmp-prop a:hover { border-color: color-mix(in srgb, var(--room-accent) 55%, var(--border, #1f2d47)); transform: translateY(-1px); }
.dmp-prop b { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.dmp-prop-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Zones table */
.dmp-zones .dm-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.2fr) auto; text-decoration: none; color: inherit; }
.dmp-zones a.dm-tr:hover { background: color-mix(in srgb, var(--room-accent) 6%, transparent); }
.dmp-zone-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.dmp-zone-name .ovk-i { color: var(--room-strong); }
.dmp-ns { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--text-secondary, #96a7c2); overflow-wrap: anywhere; }
.dmp-open { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .86rem; color: var(--room-strong); }

/* Connections */
.dmp-conns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dmp-conn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-radius: 16px;
    background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.dmp-conn.is-broken { border-color: color-mix(in srgb, var(--error, #ef4444) 45%, var(--border, #1f2d47)); }
.dmp-conn-main { display: grid; gap: 3px; min-width: 0; }
.dmp-conn-act { display: flex; gap: 8px; }
.dmp-conn-act form { margin: 0; }
.dmp-err { display: inline-flex; align-items: center; gap: 6px; color: var(--error-text, #f87171); font-size: .86rem; }

/* Forms */
.dmp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; align-items: start; }
.dmp-form { display: grid; gap: 14px; }
.dmp-form--row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; padding: 16px; border-radius: 18px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.dmp-form--row .dmp-actions { margin: 0; grid-column: 1 / -1; }
.dmp-field { display: grid; gap: 6px; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--text-secondary, #96a7c2); }
.dmp-field--wide { grid-column: span 2; }
.dmp-field input, .dmp-field select { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47);
    background: var(--bg-input, var(--bg-primary, #0a0f1c)); color: var(--text-primary, #e6edf7); font: inherit; font-size: .95rem; font-weight: 500; }
.dmp-field input:focus, .dmp-field select:focus { outline: 2px solid var(--room-accent); outline-offset: 1px; border-color: transparent; }
.dmp-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font-size: .88rem; font-weight: 600; color: var(--text-secondary, #96a7c2); }
.dmp-check input { width: 18px; height: 18px; accent-color: var(--room-fill); }
.dmp-help { padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--room-accent) 6%, var(--bg-card, #0f1729)); border: 1px solid var(--border, #1f2d47); }
.dmp-help h2 { font-size: 1rem; }
.dmp-help ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; color: var(--text-secondary, #96a7c2); }
.dmp-where { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: .86rem; line-height: 1.5; color: var(--text-secondary, #96a7c2); }
.dmp-where .ovk-i { margin-top: 2px; color: var(--room-strong); }

/* Records */
.dmp-recs { list-style: none; margin: 0; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); }
.dmp-rec { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--border, #1f2d47); }
.dmp-rec:first-child { border-top: 0; }
.dmp-rec-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 10px; min-width: 0; flex: 1 1 320px; }
.dmp-rec-name { overflow-wrap: anywhere; }
.dmp-rec-val, .dmp-rec-main .dmp-sub { grid-column: 2; }
.dmp-rec-val, .dmp-diff code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; color: var(--text-secondary, #96a7c2); overflow-wrap: anywhere; word-break: break-word; }
.dmp-type { display: inline-grid; place-items: center; min-width: 52px; padding: 2px 8px; border-radius: 8px; font: 800 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--room-strong); background: color-mix(in srgb, var(--room-accent) 14%, transparent); }
.dmp-rec-act { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.dmp-rec-act form { margin: 0; }
.dmp-edit { flex-basis: 100%; order: 2; }
.dmp-edit summary { list-style: none; }
.dmp-edit summary::-webkit-details-marker { display: none; }
.dmp-edit[open] { flex-basis: 100%; }
.dmp-edit[open] .dmp-form { margin-top: 10px; }
.dmp-rec:has(.dmp-edit[open]) .dmp-rec-act { flex-basis: 100%; }

/* A proposal */
.dmp-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dmp-change { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.dmp-op { align-self: start; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.dmp-change--create .dmp-op { color: var(--success-text, #22c55e); background: color-mix(in srgb, var(--success, #22c55e) 14%, transparent); }
.dmp-change--update .dmp-op { color: var(--warning-text, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent); }
.dmp-change--delete .dmp-op { color: var(--error-text, #f87171); background: color-mix(in srgb, var(--error, #ef4444) 14%, transparent); }
.dmp-change-rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.dmp-diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.dmp-diff > div { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; min-width: 0; }
.dmp-before { background: color-mix(in srgb, var(--error, #ef4444) 7%, transparent); }
.dmp-before code { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--error, #ef4444) 60%, transparent); }
.dmp-after { background: color-mix(in srgb, var(--success, #22c55e) 8%, transparent); }
.dmp-after code { color: var(--text-primary, #e6edf7); }
.dmp-text { margin: 0; max-width: 760px; line-height: 1.6; color: var(--text-secondary, #96a7c2); }
.dmp-decide { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dmp-decide form { margin: 0; }
.dmp-decide .dm-btn { min-height: 46px; padding: 0 22px; font-size: 1rem; }

@media (max-width: 760px) {
    .dmp-split { grid-template-columns: minmax(0, 1fr); }
    .dmp-field--wide { grid-column: 1 / -1; }
    .dmp-zones .dm-tr { grid-template-columns: minmax(0, 1fr) auto; }
    .dmp-zones .dm-tr > span:nth-child(2), .dmp-zones .dm-tr > span:nth-child(3), .dmp-zones .dm-tr > span:nth-child(4) { display: none; }
    .dmp-change { grid-template-columns: minmax(0, 1fr); }
}

/* Touch targets on phones (fleet audit, 2026-10-29): touch pointers only. */
@media (pointer: coarse) {
  .sc-room-chips a { min-height: 44px; }
  .ov-room article a, .dm-more { position: relative; }
  .ov-room article a::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  .dm-more::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
}

/* The phone home (2026-10-30, the owner's short-pages rule): the questions and the API samples are folds, and the
   endings are one sideways row (every ending is still there). A wider screen shows the grid and no chips. */
/* Pick (the owner's short-pages rule, 2026-10-30): on a phone the front page's blocks of the same kind are one at a
   time, picked with a row of chips. Radio inputs and :has(), no script: the chips and the one-pane rule live under
   640 px and only where :has() is understood, so a wider screen, or an older browser, shows every pane and no chips.
   Every pane stays in the page for crawlers. */
.pick-head { display: none; }
.pick-row { display: none; }
@supports selector(:has(*)) { @media (max-width: 640px) {
  .pick-bar { margin-top: 30px; }
  .pick-head { display: block; }
  .pick-head h2 { margin: 0 0 4px; font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); letter-spacing: -.02em; }
  .pick-row { display: flex; gap: 8px; overflow-x: auto; margin: 10px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pick-row::-webkit-scrollbar { display: none; }
  .pick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .pick-row label { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); font-size: .9rem; font-weight: 650; white-space: nowrap; cursor: pointer; }
  .pick-row input:checked + label { color: var(--text-primary, #e6edf7); border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent); }
  .pick-row input:focus-visible + label { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
  .pick .pick-pane { display: none; }
  /* A link that points at a pane opens that pane on a phone too. */
  .pick .pick-pane:target { display: block !important; }
  .pick:has(.pick-pane:target) .pick-pane:not(:target) { display: none !important; }
  /* The chip names the pane, so the pane's own heading gives way to it; the link to more stays. */
  .pick .pick-pane > h2, .pick .pick-pane > h3 { display: none; }
} }

/* The fold (the owner's short-pages rule): closed on a phone, and where there is room it looks like the section it
   replaces: a heading and its content, with no card around it. */
.hm-fold-block { margin-top: 32px; }
.hm-fold-block > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.hm-fold-block > summary::-webkit-details-marker { display: none; }
.hm-fold-block > summary h2 { margin: 0; font: 700 clamp(19px, 2.2vw, 26px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); }
.hm-fold-block > summary .hm-fold-n { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; white-space: nowrap; }
.hm-fold-block > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
@media (min-width: 641px) {
  .hm-fold-block { border: 0; background: none; border-radius: 0; margin: 56px auto 0; padding: 0; }
  .hm-fold-block > summary { display: block; min-height: 0; }
  .hm-fold-block > summary h2 { margin: 0 0 6px; font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); }
  .hm-fold-block > summary .hm-fold-n { display: none; }
  .hm-fold-block .hm-sec, .hm-fold-block .sc-sec { margin: 0; max-width: none; padding: 0; }
}
@media (max-width: 640px) { .hm-fold-block { margin-top: 24px; } .hm-fold-block > summary h2 { font-size: 1.05rem; } }
/* A fold that sits inside the section it replaces adds no space of its own. */
:where(.sc-sec, .cm-sec, .hm-sec, .section) > .hm-fold-block { margin: 0; }
/* The fold holds the questions and the samples, so they get the room the section gave them. */
.hm-fold-block .sc-faq, .hm-fold-block .sc-code { margin: 0; padding: 0 16px 16px; }
/* The endings on a phone: one sideways row of tiles, every ending still in the page. */
@media (max-width: 599px) {
  .dm-board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .dm-board::-webkit-scrollbar { display: none; }
  .dm-board > li { flex: 0 0 62%; min-width: 0; scroll-snap-align: start; }
}

/* ── The home's picture: one name, priced (MOTION-1, 2026-11-02) ──────────────────────────────────────────────────── */
.dm-motif { width: min(100%, 370px); margin: 0 auto; display: grid; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--ovk-line, rgba(255, 255, 255, .1)); background: var(--ovk-panel, #141c2a); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); font-variant-numeric: tabular-nums; }
.dm-mf-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dm-mf-name b { font: 700 17px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ovk-text, #e8ecf3); overflow-wrap: anywhere; }
.dm-mf-ok { font-size: 12.5px; font-weight: 700; color: var(--ovk-ok-text, var(--ovk-ok, #22c55e)); white-space: nowrap; }
.dm-mf-cols, .dm-mf-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .7fr)); gap: 8px; align-items: center; }
.dm-mf-cols { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ovk-muted, #93a0b4); padding: 0 10px; }
.dm-mf-cols span:not(:first-child), .dm-mf-row > span:not(:first-child), .dm-mf-row b { text-align: right; }
.dm-mf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm-mf-row { padding: 9px 10px; border-radius: 10px; background: var(--ovk-bg, #0f1522); font-size: 13px; color: var(--ovk-muted, #93a0b4); }
.dm-mf-row b { color: var(--ovk-text, #e8ecf3); }
.dm-mf-reg { display: grid; gap: 1px; color: var(--ovk-text, #e8ecf3); min-width: 0; }
.dm-mf-reg em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--room-strong, var(--ovk-accent, #3b82f6)); }
.dm-mf-reg em.is-trap { color: var(--ovk-warn-text, var(--ovk-warn, #f59e0b)); }
.dm-mf-row.is-best { outline: 2px solid color-mix(in srgb, var(--room-accent, var(--ovk-accent, #3b82f6)) 55%, transparent); outline-offset: -2px; }