/* ═══════════════════════════════════════════════════════════════════════════
 * signitur — EDITOR SHELL "INSPECTOR"  (lab only, Sep 19)
 * The owner picked concept A and asked for Stage's layout shelf under it, on
 * desktop AND on the phone. This is a SHELL LAYER over the real editor — the
 * same contract editor-lab.css has: loads LAST, restyles and re-arranges
 * chrome, and never touches the rendered signature inside #mockWrap, which
 * carries its own inline styles and must keep looking like real output.
 * Pair: js/editor-inspector.js. Remove both <link>/<script> and it reverts.
 *
 *   1. tokens + the accordion + the control rhythm   — every width
 *   2. >=981px  the three-column shell + the shelf
 *   3. <=980px  the phone shell: same language, different structure
 * ═══════════════════════════════════════════════════════════════════════ */

/* ══ 1 · shared ═══════════════════════════════════════════════════════════ */
body.ins {
  --bg: #FAF9F7; --surface: #FFFFFF;
  --hair: rgba(22,17,15,.085); --hair-2: rgba(22,17,15,.05);
  --i1: #16110F; --i2: #6E6660; --i3: #A39B95;
  --o: #FB8221; --o-ink: #F4761B; --grad-o: linear-gradient(92deg,#FB8221,#FA962B);
  --ease: cubic-bezier(.32,.72,0,1);
  --rail: 64px; --insp: 344px; --shelf: 172px;
  background: var(--bg); color: var(--i1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
}

/* the panel title carries its own context line */
body.ins .panel-title { margin: 0; border: 0; gap: 0; display: block; }
body.ins .panel-title .sec-chip { display: none; }
body.ins .panel-title h2 { font-weight: 640; letter-spacing: -.021em; margin: 0; color: var(--i1); }
body.ins .panel-title::before {
  content: attr(data-ctx); display: block; font-size: 11px; color: var(--i3); margin-bottom: 2px;
}

/* every .section is a disclosure row, at every width — this is the whole point
 * of the concept and it matters MORE on a phone, not less */
body.ins #panelInner .section {
  margin: 0; padding: 0; background: none; border: 0; border-top: 1px solid var(--hair);
  border-radius: 0; box-shadow: none;
}
body.ins #panelInner .section:first-of-type { border-top: 0; }
body.ins .sec-head {
  margin: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; border: 0;
  transition: background 140ms;
}
body.ins .sec-head:hover { background: rgba(22,17,15,.028); }
body.ins .sec-head .sec-chip { display: none; }
body.ins .sec-head h3 { font-weight: 560; letter-spacing: -.012em; margin: 0; color: var(--i1); }
body.ins .sec-head .ins-sum { font-size: 11.5px; color: var(--i3); font-weight: 400; letter-spacing: -.004em; }
body.ins .section.ins-open .sec-head .ins-sum { opacity: 0; }
body.ins .sec-head .ins-chev {
  margin-left: auto; width: 13px; height: 13px; color: var(--i3); flex: none;
  transition: transform 240ms var(--ease);
}
body.ins .section.ins-open .sec-head .ins-chev { transform: rotate(90deg); }

body.ins .sec-body { display: none; }
/* a headless .section (Banner: the credibility UI owns that panel) and any
 * direct panel child that is not a section (Layouts: a bare grid) still need
 * the gutter this shell strips from .section */
body.ins .section.ins-bare { padding-bottom: 16px; }
body.ins #panelInner > .section.ins-bare > *,
body.ins #panelInner > *:not(.panel-title):not(.section) { margin-left: 20px; margin-right: 20px; }
body.ins .section.ins-open .sec-body { display: block; animation: insIn 260ms var(--ease); }
@keyframes insIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.ins .section.ins-open .sec-body { animation: none; }
  body.ins .sec-head .ins-chev { transition: none; }
}

/* one rhythm for every control: label left, value right */
body.ins .sec-body .row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  margin: 0; padding: 0; border: 0; background: none; flex-wrap: nowrap;
}
body.ins .sec-body .row + .row { margin-top: 2px; }
body.ins .sec-body .row-label { color: var(--i2); letter-spacing: -.008em; font-weight: 400; }
body.ins .sec-body .row-ctl { justify-self: end; }
body.ins .sec-body .field-label { color: var(--i2); margin: 10px 0 5px; font-weight: 400; letter-spacing: -.008em; }
body.ins .sec-body .hint { color: var(--i3); line-height: 1.45; margin: 8px 0 0; letter-spacing: -.004em; }
body.ins .sec-body .hint b { font-weight: 560; color: var(--i2); }
body.ins .sec-body input.txt, body.ins .sec-body select {
  width: 100%; border-radius: 9px; border: 1px solid var(--hair);
  background: #FCFBFA; color: var(--i1); box-shadow: none;
}
body.ins .sec-body .drop-zone { border: 1px dashed rgba(22,17,15,.17); border-radius: 12px; background: #FCFBFA; box-shadow: none; }
body.ins .sec-body .drop-zone .dz-empty b { font-weight: 500; color: var(--i2); }
body.ins .sec-body .drop-zone .dz-empty small { color: var(--i3); }
body.ins .sec-body .switch-txt { display: none; }
body.ins .sec-body .slider-wrap { display: flex; align-items: center; gap: 10px; }
body.ins .sec-body .slider-val { font-variant-numeric: tabular-nums; color: var(--i3); text-align: right; }

/* the signature manager. THE COLOUR MATTERS: these selects inherit the dark
 * rail's near-white ink from editor-lab.css, so on a light bar they render
 * white-on-white and read as empty boxes. Set it, do not assume it. */
body.ins .ins-mgr { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* ID selectors, not classes: editor-lab.css styles these as `#folderSelect,
 * #sigSelect`, and an id (1,0,0) beats any class rule no matter which file
 * loads last. Same family as the Sep-16 finding that media queries add no
 * specificity. When an override "does nothing", grep every stylesheet for the
 * selector before assuming load order will save you. */
body.ins #folderSelect, body.ins #sigSelect {
  height: 30px; width: auto; border-radius: 8px; border: 1px solid var(--hair);
  background: rgba(255,255,255,.9); color: var(--i1); padding: 0 24px 0 10px;
  font-size: 12.5px; box-shadow: none; min-width: 0;
}
body.ins .ins-mgr .sig-actions { display: flex; gap: 2px; margin: 0; }
body.ins .ins-mgr .sig-actions button {
  width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--i3);
  display: grid; place-items: center; padding: 0;
}
body.ins .ins-mgr .sig-actions button:hover { background: rgba(22,17,15,.06); color: var(--i2); }

/* the sheet: the real mock with its BROWSER chrome removed, so what is left is
 * the message the signature actually arrives in */
body.ins #mockWrap .browser-frame {
  border: 0; border-radius: 14px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(22,17,15,.05), 0 14px 38px rgba(22,17,15,.08); overflow: hidden;
}
body.ins #mockWrap .b-top, body.ins #mockWrap .b-url { display: none; }
body.ins #mockWrap .g-head, body.ins #mockWrap .o-head, body.ins #mockWrap .a-head { border-bottom: 1px solid var(--hair-2); }

/* the shelf */
body.ins .ins-shelf-head { display: flex; align-items: baseline; gap: 10px; }
body.ins .ins-shelf-head h3 { margin: 0; font-size: 10.5px; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; color: var(--i3); }
body.ins .ins-shelf-head .now { font-size: 11.5px; color: var(--i2); letter-spacing: -.006em; }
body.ins .ins-shelf-head .legal { margin-left: auto; font-size: 10.5px; color: var(--i3); }
body.ins .ins-shelf-head .legal a { color: inherit; text-decoration: none; }
body.ins .ins-row { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body.ins .ins-row::-webkit-scrollbar { display: none; }
body.ins .ins-card {
  flex: 0 0 auto; border-radius: 10px; background: var(--surface); border: 1px solid var(--hair);
  position: relative; overflow: hidden; cursor: pointer; padding: 0;
  transition: transform 260ms var(--ease), box-shadow 220ms var(--ease), border-color 200ms;
}
body.ins .ins-card.on { border-color: var(--o); box-shadow: 0 0 0 1px var(--o), 0 6px 18px rgba(251,130,33,.18); }
body.ins .ins-mini { position: absolute; inset: 0 0 21px 0; display: grid; place-items: center; overflow: hidden; }
body.ins .ins-mini > div { max-width: 100%; }
body.ins .ins-cap {
  position: absolute; inset: auto 0 0 0; height: 21px; display: flex; align-items: center; padding: 0 8px;
  font-size: 10.5px; font-weight: 560; letter-spacing: -.006em; color: var(--i2);
  background: rgba(255,255,255,.9); border-top: 1px solid var(--hair-2);
}
body.ins .ins-card.on .ins-cap { color: var(--o-ink); }

/* ══ 2 · desktop (>=741px) ════════════════════════════════════════════════
 * 741px, NOT a number of my own choosing: app.css switches to the stacked
 * mobile layout at max-width 740px. Picking 981 put this file's phone styling
 * on top of app.css's still-three-column layout for every width from 741 to
 * 980, and the inspector overlapped the preview. Match the structural
 * breakpoint that already exists; do not invent a second one.
 * ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 741px) {
body.ins #app {
  display: grid; grid-template-columns: var(--rail) var(--insp) 1fr;
  grid-template-rows: 1fr var(--shelf); height: 100vh; gap: 0; padding: 0;
}
body.ins #sidebar { grid-area: 1 / 1; }
/* a 344px inspector leaves too little for the preview on a small laptop */
@media (max-width: 1040px) { body.ins { --insp: 296px; } }
body.ins #panel   { grid-area: 1 / 2; }
body.ins #preview { grid-area: 1 / 3; }
body.ins #insShelf { grid-area: 2 / 1 / 3 / -1; }

body.ins #sidebar {
  width: auto; min-width: 0; background: rgba(250,249,247,.72);
  backdrop-filter: blur(20px) saturate(180%); border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px; gap: 3px;
  overflow: visible; position: relative;
}
body.ins #sidebar .brand { display: block; padding: 0; margin: 0 0 14px; border: 0; background: none; }
/* the real mark, not a coloured square standing in for it */
body.ins #sidebar .brand-logo-link { display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: none; box-shadow: none; overflow: hidden; }
body.ins #sidebar .brand-logo-link img { display: block; width: 34px; height: 34px; object-fit: contain; }
/* centre with auto margins, NOT translateX(-50%) + scale: the scale applies
 * first, so the percentage translate no longer equals half the drawn width and
 * the switch sat 7px left of the column it is meant to share with the tabs */
body.ins #sidebar .admin-switch {
  position: absolute; left: 0; right: 0; bottom: 58px; margin: 0 auto; width: max-content;
  transform: scale(.66); transform-origin: center bottom;
}
body.ins #sidebar .adm-lbl, body.ins #sidebar .admin-tag, body.ins #sidebar .foot-label { display: none; }
body.ins #sidebar .sidebar-foot { display: none; }

body.ins #tabs { display: flex; flex-direction: column; gap: 3px; width: auto; padding: 0; border: 0; background: none; }
body.ins #tabs .tab {
  width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 0; background: transparent;
  display: grid; place-items: center; color: var(--i3); cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
body.ins #tabs .tab .tab-name { display: none; }
body.ins #tabs .tab .tab-ic { margin: 0; display: grid; place-items: center; }
body.ins #tabs .tab:hover { background: rgba(22,17,15,.05); color: var(--i2); }
body.ins #tabs .tab.active { background: var(--surface); color: var(--o-ink);
  box-shadow: 0 1px 2px rgba(22,17,15,.07), 0 0 0 1px var(--hair); }
body.ins #sidebar .dash-link {
  margin: auto auto 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--i3); background: transparent; padding: 0; border: 0; gap: 0;
}
body.ins #sidebar .dash-link span { display: none; }
body.ins #sidebar .dash-link:hover { background: rgba(22,17,15,.05); color: var(--i2); }

/* width:auto is load-bearing. app.css sizes #panel as the editor's fixed 390px
 * middle card; inside a 296px grid track that overflows by 94px and lands on
 * top of the preview. A grid track does not constrain an item that carries an
 * explicit width — min-width:0 alone does not undo it. */
body.ins #panel {
  background: var(--surface); border-right: 1px solid var(--hair); border-radius: 0; box-shadow: none;
  margin: 0; padding: 0; display: flex; flex-direction: column;
  width: auto; min-width: 0; max-width: 100%; min-height: 0;
}
body.ins #panelInner { padding: 0 0 26px; overflow: auto; scrollbar-width: thin; }
body.ins .panel-title { padding: 18px 20px 13px; }
body.ins .panel-title h2 { font-size: 20px; }
body.ins .sec-head { padding: 13px 20px; }
body.ins .sec-head h3 { font-size: 13.5px; }
body.ins .sec-body { padding: 0 20px 16px; }
body.ins .sec-body .row { min-height: 34px; }
body.ins .sec-body .row-label, body.ins .sec-body .field-label { font-size: 12.5px; }
body.ins .sec-body .hint { font-size: 11.5px; }
body.ins .sec-body input.txt, body.ins .sec-body select { height: 34px; padding: 0 11px; font-size: 12.5px; }
body.ins .sec-body .drop-zone { padding: 16px; }
body.ins .sec-body .slider-val { font-size: 11.5px; min-width: 36px; }
body.ins .sec-body > button.primary, body.ins .sec-body > button.ghost-btn {
  width: 100%; height: 36px; border-radius: 10px; font-size: 12.5px; font-weight: 500;
  letter-spacing: -.008em; margin: 0 0 7px; box-shadow: none;
}
body.ins .sec-body > button.primary { background: var(--grad-o); border: 0; color: #fff; }
body.ins .sec-body > button.ghost-btn { background: #FCFBFA; border: 1px solid var(--hair); color: var(--i2); }

body.ins #preview { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0;
  display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
/* nowrap + scroll, not wrap: the bar is a FIXED 54px, so at a narrow desktop
 * width (measured at 741, the grid's own minimum) the controls wrapped to a
 * second row, overflowed the bar and rendered on top of the preview sheet. */
body.ins .preview-head {
  height: 54px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 18px; margin: 0;
  background: rgba(250,249,247,.74); backdrop-filter: blur(20px) saturate(180%); border: 0;
  position: relative; z-index: 6;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
body.ins .preview-head::-webkit-scrollbar { display: none; }
body.ins .preview-head > *, body.ins .preview-controls > * { flex: none; }
body.ins .preview-head h2 { display: none; }
body.ins .preview-controls { margin-left: auto; gap: 8px; align-items: center; flex-wrap: nowrap; }
/* ONE HEIGHT FOR THE WHOLE ROW. Measured before this: the selects were 30,
 * the action buttons 28, quick-Save 36, the client pill 38 and the device
 * segment 37 — five heights, all centred on the same line, which reads as
 * five different things rather than one toolbar. */
body.ins .preview-head #folderSelect, body.ins .preview-head #sigSelect { height: 32px; max-width: 168px; }
body.ins .preview-head .ins-mgr .sig-actions button { width: 32px; height: 32px; }
body.ins .preview-head .ghost-btn,
body.ins .preview-head .sel-pill,
body.ins .preview-head .seg { height: 32px; box-sizing: border-box; }
body.ins .preview-head .sel-pill, body.ins .preview-head .seg { display: inline-flex; align-items: center; }
body.ins .preview-head .seg button { height: 26px; display: inline-flex; align-items: center; gap: 5px; }
body.ins .preview-head .ghost-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
/* the manager is one group, then a real gap, then the view controls */
body.ins .preview-head .ins-mgr { gap: 6px; }
body.ins .preview-head .ins-mgr .sig-actions { margin-left: 4px; }

body.ins #mockWrap {
  flex: 1; min-height: 0; overflow: auto; padding: 26px 30px 92px; background: transparent;
  /* safe centring: centres a short sheet, and still scrolls from the TOP when
   * the message is taller than the pane (plain `center` clips the overflow) */
  display: grid; align-content: safe center; justify-items: center;
  -webkit-mask-image: linear-gradient(#0000 0, #000 26px, #000 calc(100% - 74px), #0000 calc(100% - 34px));
}
body.ins #mockWrap .browser-frame { max-width: 620px; margin: 0 auto; }

body.ins .preview-foot {
  position: absolute; inset: auto 0 0 0; height: 74px; margin: 0; padding: 0 18px; border: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; z-index: 6;
  background: linear-gradient(transparent, rgba(250,249,247,.88) 42%);
}
body.ins .preview-foot .ghost-btn {
  height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair);
  background: rgba(255,255,255,.82); backdrop-filter: blur(10px); color: var(--i2); font-size: 12.5px; font-weight: 500;
}
body.ins .preview-foot .primary.big {
  height: 36px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--grad-o); color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.008em;
  box-shadow: 0 1px 2px rgba(251,130,33,.3), 0 6px 18px rgba(251,130,33,.26);
  transition: transform 140ms var(--ease);
}
body.ins .preview-foot .primary.big:active { transform: scale(.97); }
body.ins #preview > footer { display: none; }

body.ins #insShelf {
  border-top: 1px solid var(--hair); background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(180%); padding: 12px 18px 14px; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* LAB ONLY: motion-lab's own fixed bar sits over the bottom of the screen.
 * GROW the grid row by that much — do not pad it from inside, which takes the
 * height out of the cards and flattened them to a 19px strip. */
body.ins.lab-bar { --shelf: calc(172px + var(--labbar, 42px) + 8px); }
body.ins.lab-bar #insShelf { padding-bottom: calc(var(--labbar, 42px) + 8px); }
/* the card's HEIGHT is what binds the mini's scale — 92px left the tall
 * layouts legible but small, 112 gives them back about a fifth */
body.ins .ins-card { min-height: 112px; }
body.ins .ins-shelf-head { margin-bottom: 9px; }
body.ins .ins-row { gap: 11px; padding: 3px 2px 6px; flex: 1; min-height: 0; }
body.ins .ins-card { width: 182px; }
body.ins .ins-card:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 8px 22px rgba(22,17,15,.12); z-index: 2; }
body.ins #mobileNav { display: none; }
}

/* ══ 3 · phone (<=740px) ══════════════════════════════════════════════════
 * Same language, different structure. The shelf does NOT stand permanently on
 * a phone — it would cost ~110px of a 812px screen while you are working on
 * controls that are nowhere near it. It appears in PREVIEW mode, where you are
 * already looking at the signature and choosing a layout is the next thing you
 * would want. The manager moves back into the top bar (the JS re-homes it),
 * because #preview is display:none on this side while editing.
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 740px) {
body.ins #app { background: var(--bg); padding: 8px 8px 0; gap: 8px; overflow-x: hidden; max-width: 100vw; }
body.ins #panel, body.ins #sidebar, body.ins #preview { max-width: 100%; min-width: 0; }

body.ins #sidebar {
  background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 1px 2px rgba(22,17,15,.04);
  padding: 9px 16px; gap: 8px; align-items: center;   /* 16 == the panel's gutter */
}
body.ins #sidebar .brand-logo-link img { height: 17px; display: block; }
body.ins #sidebar .ins-mgr { margin-left: auto; }
body.ins #sidebar #folderSelect, body.ins #sidebar #sigSelect { height: 28px; font-size: 11.5px; max-width: 104px; padding: 0 18px 0 8px; }
body.ins #sidebar .ins-mgr .sig-actions button { width: 26px; height: 26px; }
body.ins #sidebar .sidebar-foot { display: none; }
body.ins .admin-switch { transform: scale(.62); transform-origin: left center; margin: 0 0 0 -4px; flex: none; }

body.ins #panel {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(22,17,15,.04); overflow: hidden; margin: 0; padding: 0;
}
body.ins #panelInner { padding: 0 0 calc(118px + env(safe-area-inset-bottom)); }
body.ins .panel-title { padding: 15px 16px 11px; }
body.ins .panel-title h2 { font-size: 18px; }
/* a 44px target, the phone minimum — the head is the primary control here */
body.ins .sec-head { padding: 14px 16px; min-height: 44px; }
body.ins .sec-head h3 { font-size: 14px; }
body.ins .sec-body { padding: 0 16px 14px; }
body.ins #panelInner > .section.ins-bare > *,
body.ins #panelInner > *:not(.panel-title):not(.section) { margin-left: 16px; margin-right: 16px; }
body.ins .sec-body .row { min-height: 42px; gap: 10px; }
body.ins .sec-body .row-label, body.ins .sec-body .field-label { font-size: 13px; }
body.ins .sec-body .hint { font-size: 12px; }
body.ins .sec-body input.txt, body.ins .sec-body select { height: 40px; padding: 0 12px; font-size: 16px; } /* 16px: iOS zooms anything smaller on focus */
body.ins .sec-body .drop-zone { padding: 18px; }
body.ins .sec-body .slider-wrap { width: auto; }
body.ins .sec-body .slider-val { font-size: 12px; min-width: 38px; }
body.ins .sec-body > button.primary, body.ins .sec-body > button.ghost-btn {
  width: 100%; height: 42px; border-radius: 11px; font-size: 13.5px; font-weight: 500; margin: 0 0 8px; box-shadow: none;
}
body.ins .sec-body > button.primary { background: var(--grad-o); border: 0; color: #fff; }
body.ins .sec-body > button.ghost-btn { background: #FCFBFA; border: 1px solid var(--hair); color: var(--i2); }

body.ins #preview { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
body.ins .preview-head {
  background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--hair); border-radius: 14px; padding: 7px 9px; margin: 0 0 8px; gap: 7px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
body.ins .preview-head::-webkit-scrollbar { display: none; }
/* no margin-left:auto here: the row can overflow on a phone, and pushing it
 * right shoved the quick-Save off the left edge instead of scrolling.
 * And there is no reason for TWO save affordances on a phone — the dock's
 * "Save Signature" is right there. Dropping the toolbar copy also buys back
 * the ~80px that made the row overflow in the first place. */
body.ins .preview-controls { flex-wrap: nowrap; gap: 6px; margin-left: 0; justify-content: flex-start; }
body.ins .preview-head #quickSave { display: none; }
body.ins .preview-head .ghost-btn, body.ins .preview-head .sel-pill { height: 32px; flex: none; }
body.ins .preview-head .seg { flex: none; }
body.ins .preview-head .seg button { padding: 0 9px; height: 32px; font-size: 11.5px; }
body.ins .preview-head h2 { display: none; }
body.ins #mockWrap { padding: 0 0 10px; background: transparent; }
body.ins #mockWrap .browser-frame { max-width: 100%; border-radius: 14px; }
body.ins .preview-foot {
  padding: 8px 0 calc(74px + env(safe-area-inset-bottom)); border: 0; background: transparent; gap: 9px;
}
body.ins .preview-foot .ghost-btn {
  height: 42px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); color: var(--i2); font-weight: 500;
}
body.ins .preview-foot .primary.big {
  height: 42px; border-radius: 999px; border: 0; background: var(--grad-o); color: #fff; font-weight: 600;
  box-shadow: 0 4px 16px rgba(251,130,33,.28);
}
body.ins #preview > footer { display: none; }

/* the live-preview strip (js/mobile-preview.js) brings its own stylesheet, and
 * it does not know about this shell: 12px gutters against the panel's 16 (a
 * 4px step you can see), and a cool slate hairline against
 * this warm one. Bring it into the language. (Its status dot was GREEN in a
 * brand with no green; that one was fixed at the source in mobile-preview.js,
 * so there is no override for it here.) */
body.ins .mp-bar { border-bottom: 1px solid var(--hair) !important; background: var(--surface) !important; }
body.ins .mp-head { padding: 0 16px 5px !important; color: var(--i3) !important; letter-spacing: .09em; }
body.ins .mp-head span { color: var(--i3) !important; }
body.ins .mp-sig { padding: 0 16px !important; }

body.ins #mobileNav {
  background: rgba(255,255,255,.86); backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--hair);
}
body.ins .m-tab { color: var(--i3); }
body.ins .m-tab.active { color: var(--o-ink); font-weight: 600; }

/* the shelf rides above the nav, and ONLY in preview mode */
body.ins #insShelf { display: none; }
body.ins.m-preview #insShelf {
  display: block; position: fixed; left: 0; right: 0; z-index: 40;
  bottom: calc(58px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.88); backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--hair); padding: 8px 8px 10px;   /* 8 == #app's own gutter */
}
body.ins.lab-bar.m-preview #insShelf { bottom: calc(var(--labbar, 96px) + 8px + env(safe-area-inset-bottom)); }
body.ins.m-preview .ins-shelf-head { margin-bottom: 7px; }
body.ins.m-preview .ins-shelf-head .legal { display: none; }
body.ins.m-preview .ins-row { gap: 9px; padding: 2px 0 2px; }
body.ins.m-preview .ins-card { width: 158px; height: 92px; min-height: 0; }
body.ins.m-preview .ins-mini { inset: 0 0 19px 0; }
body.ins.m-preview .ins-cap { height: 19px; font-size: 10px; }
/* the preview column has to clear the strip it now sits above */
body.ins.m-preview #preview { padding-bottom: calc(136px + var(--labbar, 0px)); }
}