/* ============================================================
   Prose Minion Website — section/component styles
   Ported from design/mock/pm-embed.css (the sidebar/editor device
   mockups embedded in the hero, feature, and centerpiece sections),
   plus the CTA hover states and responsive rules added when the
   design was implemented (the raw design has no breakpoints — see
   design/README.md).
   ============================================================ */

/* ---------- App shell (sidebar webview mockup) ---------- */
.pm {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg) 220px);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pm-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 14px;
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid var(--border-soft);
}
.pm-strip-title {
  font-size: 11px;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}
.pm-strip-icons { display: flex; gap: 12px; color: var(--dim); }
.pm-strip-icons svg { width: 16px; height: 16px; }

.pm-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 20px;
}
.pm-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent-line);
}
.pm-brand { display: flex; gap: 13px; align-items: center; }
.pm-logo {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.05);
  overflow: hidden;
}
.pm-logo img { width: 40px; height: 40px; object-fit: contain; }
.pm-title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.pm-subtitle { font-size: 13px; color: var(--muted); margin-top: 3px; }

.pm-balance { display: flex; align-items: flex-start; gap: 8px; cursor: default; }
.pm-balance-rows { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pm-balance-row { display: flex; align-items: center; gap: 7px; }
.pm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pm-dot.blue  { background: var(--blue);  box-shadow: 0 0 7px rgba(90,162,240,0.6); }
.pm-dot.green { background: var(--green); box-shadow: 0 0 7px rgba(111,201,138,0.55); }
.pm-balance-label { font-size: 12.5px; color: var(--text-2); }
.pm-balance-val { font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.pm-balance-sub { font-size: 11px; color: var(--dim); margin-top: 2px; text-align: right; }
.pm-balance-sub b { color: var(--muted); font-weight: 600; }
.pm-chev { color: var(--dim); margin-top: 1px; }
.pm-chev svg { width: 14px; height: 14px; display: block; }

.pm-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 16px 4px; }
.pm-tab {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 6px; border-radius: var(--r-tile);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: all .15s ease;
}
.pm-tab svg { width: 21px; height: 21px; }
.pm-tab span { font-size: 12.5px; font-weight: 500; }
.pm-tab:hover { background: var(--surface-3); color: var(--text-2); }
.pm-tab.active {
  background: var(--surface-3); border-color: var(--border-2); color: var(--text);
  box-shadow: 0 0 0 1px rgba(224,103,58,0.25), 0 6px 16px rgba(0,0,0,0.3);
}
.pm-tab.active svg { color: var(--accent); }

.pm-body { flex: 1; overflow: hidden; padding: 12px 16px 18px; }
.pm-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); margin: 6px 0 8px;
}
.pm-section-title { font-size: 17px; font-weight: 700; margin: 6px 0 14px; letter-spacing: -0.01em; }

.pm-field-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 7px; display: block;
}
.pm-select, .pm-input, .pm-textarea {
  width: 100%; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-input);
  color: var(--text); font-family: var(--mono); font-size: 13px; padding: 11px 12px;
}
.pm-select { display: flex; align-items: center; justify-content: space-between; }
.pm-select .chev { color: var(--muted); }
.pm-textarea { font-family: var(--mono); line-height: 1.55; min-height: 64px; }
.pm-placeholder { color: var(--faint); }

.pm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 15px; margin-bottom: 12px; }
.pm-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.pm-card-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pm-card-meta { font-size: 11.5px; color: var(--dim); margin-bottom: 9px; font-family: var(--mono); }

.pm-sq {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid rgba(224,103,58,0.3);
  display: grid; place-items: center; color: var(--accent-hi); font-size: 15px;
}
.pm-sq.plain { background: var(--surface-3); border-color: var(--border); color: var(--muted); }

.pm-wordcount { font-size: 11px; color: var(--green); margin-top: 8px; font-family: var(--mono); }

.pm-btn {
  border: 1px solid var(--border-2); background: var(--surface-3); color: var(--text);
  border-radius: var(--r-input); padding: 11px 16px; font-size: 13px; font-weight: 600;
  font-family: var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pm-btn:hover { background: #40301f; }
.pm-btn.primary { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border-color: var(--accent-lo); color: #fff; }
.pm-btn.primary:hover { filter: brightness(1.06); }
.pm-btn.ghost { background: transparent; }
.pm-btn.block { width: 100%; }

.pm-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--inset); border: 1px solid var(--border); border-radius: 10px; padding: 5px; }
.pm-seg button { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 7px; padding: 9px 8px; font-size: 12.5px; font-weight: 500; font-family: var(--sans); cursor: pointer; }
.pm-seg button.active { background: var(--surface-3); border-color: var(--border-2); color: var(--text); box-shadow: 0 0 0 1px rgba(224,103,58,0.2); }

.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chip { font-family: var(--mono); font-size: 11px; padding: 5px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }

.pm-pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--border-2); color: var(--muted);
}

.pm-rule-row { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; }
.pm-rule-row .pm-eyebrow { margin: 0; white-space: nowrap; }
.pm-rule-row hr { flex: 1; border: none; border-top: 1px solid var(--border-soft); }

.pm-result {
  background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--text-2);
}
.pm-result .res-actions { display: flex; justify-content: flex-end; gap: 7px; margin-bottom: 12px; }
.pm-result .res-actions .pm-sq.plain { width: 30px; height: 28px; border-radius: 6px; }
.pm-result h3 { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); margin: 4px 0 14px; font-style: italic; }
.pm-result h4 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--text); margin: 18px 0 7px; padding-bottom: 9px; border-bottom: 1px solid var(--border-soft); }
.pm-result p { margin: 0 0 8px; }
.pm-result .kv b { color: var(--text); font-weight: 700; }
.pm-result .em { color: var(--muted); font-style: italic; }

.pm-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.pm-table th { text-align: left; color: var(--text); font-weight: 700; background: var(--surface-2); padding: 9px 11px; border: 1px solid var(--border); }
.pm-table th.r, .pm-table td.r { text-align: right; }
.pm-table td { padding: 9px 11px; border: 1px solid var(--border-soft); color: var(--text-2); }
.pm-table td .tok { color: var(--accent-hi); }

.pm-bar-row { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; margin: 5px 0; color: var(--text-2); }
.pm-bar-row .lab { width: 70px; color: var(--muted); }
.pm-bar-track { flex: 1; height: 12px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.pm-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); }
.pm-bar-row .pct { width: 46px; text-align: right; }

/* device card holding a sidebar/editor mock */
.device { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); background: var(--bg); }
.device.sidebar { width: 430px; height: 860px; }
.device.sidebar .pm-body { overflow-y: auto; }

/* VS Code editor chrome */
.vscode { width: 1200px; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05); }
.vscode-tabbar { display: flex; align-items: center; background: #181513; height: 40px; border-bottom: 1px solid #000; }
.vs-traffic { display: flex; gap: 8px; padding: 0 14px; }
.vs-traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.vs-traffic .r { background: #ff5f57; } .vs-traffic .y { background: #febc2e; } .vs-traffic .g { background: #28c840; }
.vs-tab { display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 16px; font-size: 13px; color: var(--dim); border-right: 1px solid #000; background: #211a13; }
.vs-tab .ic { width: 15px; height: 15px; border-radius: 3px; display:grid; place-items:center; }
.vs-tab.active { background: #2a2017; color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
.vs-tab .x { color: var(--faint); margin-left: 4px; }
.vscode-body { background: var(--bg); background-image: linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg) 200px); }

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; }
.grow { flex: 1; }

/* ---------- Full-tab Assistant (thread / branch board) ---------- */
.ed-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 28px 24px; }
.ed-header::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--accent-line); }

.thread-wrap { max-width: 880px; margin: 0 auto; padding: 26px 28px 0; }
.thread { display: flex; flex-direction: column; gap: 22px; padding-bottom: 26px; }

.msg { display: flex; gap: 13px; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px 14px 4px 14px; max-width: 78%; }
.msg.bot .bubble { background: transparent; max-width: 100%; flex: 1; padding: 0; }
.bubble { padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.bubble p { margin: 0; }
.chat-av { width: 34px; height: 34px; border-radius: 9px; background:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.chat-av img { width: 22px; height: 22px; object-fit: contain; }

.excerpt-att { margin-top: 11px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--inset); }
.ea-head { font-family: var(--mono); font-size: 11px; color: var(--dim); padding: 8px 11px; border-bottom: 1px solid var(--border-soft); }
.ea-body { font-size: 12px; color: var(--text-2); padding: 11px; line-height: 1.55; }
.msg-tools { margin-top: 10px; }
.mt { display:inline-flex; align-items:center; gap:6px; font-family: var(--mono); font-size: 11px; color: var(--accent-hi); border:1px solid rgba(224,103,58,0.35); border-radius: var(--r-pill); padding: 4px 10px; }

.var-stack { display: flex; flex-direction: column; gap: 11px; }
.var-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 14px; }
.var-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 9px; }
.var-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.var-text { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0; }
.var-foot { display: flex; gap: 8px; margin-top: 12px; }
.vf { display:inline-flex; align-items:center; gap:6px; font-size: 12px; font-family: var(--sans); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.vf:hover { background: var(--surface-3); color: var(--text); }

.composer-wrap { position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(21,17,13,0) 0%, var(--bg) 26px); padding: 8px 0 22px; }
.qbar { margin-bottom: 11px; }
.qbar-lab { font-size: 12px; color: var(--muted); margin-bottom: 9px; display:flex; align-items:center; gap:7px; }
.qbar-lab b { color: var(--text); }
.qbar-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.qa { font-size: 12.5px; font-family: var(--sans); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; }
.qa:hover { background: var(--surface-3); color: var(--text); }
.qa.primary { background: var(--accent-soft); border-color: rgba(224,103,58,0.45); color: var(--accent-hi); font-weight: 600; }

.composer, .cmdbar { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 13px; padding: 9px 11px; box-shadow: 0 8px 26px rgba(0,0,0,0.32); }
.comp-add { width: 36px; height: 36px; flex-shrink:0; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--border); color: var(--muted); display:grid; place-items:center; cursor:pointer; }
.comp-add:hover { color: var(--accent-hi); }
.comp-input { flex: 1; font-size: 14px; color: var(--text); padding: 6px 2px; }
.comp-right { display: flex; align-items: center; gap: 10px; }
.comp-pill { display:inline-flex; align-items:center; gap:6px; font-size: 12px; color: var(--muted); border:1px solid var(--border); border-radius: var(--r-pill); padding: 6px 11px; }
.comp-send { width: 36px; height: 36px; border-radius: 9px; border: none; cursor: pointer; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); color: #fff; display:grid; place-items:center; }

.board { padding: 24px 32px 0; max-width: 980px; margin: 0 auto; }
.board-top { margin-bottom: 22px; display:flex; flex-direction: column; gap: 6px; }
.spine { position: relative; padding-left: 30px; display: flex; flex-direction: column; gap: 18px; }
.spine::before { content:""; position:absolute; left: 9px; top: 8px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--border-2), var(--border-soft)); }
.node { position: relative; }
.node-dot { position:absolute; left: -30px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-2); display:grid; place-items:center; color: var(--muted); }
.node-dot.accent-dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }
.bcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px; }
.bcard.origin { background: var(--inset); }
.bcard-h { display:flex; align-items:center; justify-content:space-between; margin-bottom: 9px; }
.bk { font-weight: 700; font-size: 13.5px; }
.bk.accent { color: var(--accent-hi); }
.bcard-x { font-size: 12px; color: var(--text-2); margin: 0; line-height: 1.55; }
.bcard-p { font-size: 13.5px; color: var(--text); margin: 0; line-height: 1.55; }
.bcard-foot { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }
.bf { display:inline-flex; align-items:center; gap:6px; font-size: 11.5px; font-family: var(--sans); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.bf:hover { background: var(--surface-3); color: var(--text); }
.bf.primary { background: var(--accent-soft); border-color: rgba(224,103,58,0.45); color: var(--accent-hi); font-weight: 600; }

.branch-group { position: relative; margin-left: 14px; padding-left: 22px; }
.branch-group::before { content:""; position:absolute; left: 0; top: -10px; bottom: 30%; width: 2px; background: var(--border-2); border-radius: 2px; }
.branch-label { font-family: var(--mono); font-size: 11px; color: var(--accent-hi); margin-bottom: 12px; display:flex; align-items:center; gap:7px; }
.branch-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bcard.var { background: var(--surface-2); }
.bcard.add { display:flex; flex-direction: column; align-items:center; justify-content:center; gap:7px; color: var(--dim); border-style: dashed; cursor: pointer; min-height: 96px; }
.bcard.add:hover { color: var(--accent-hi); border-color: var(--accent); }
.bcard.add span { font-size: 12.5px; }
.bcard.add.wide { flex-direction: column; align-items: flex-start; min-height: 0; }
.ghost-node { opacity: 0.9; }

.cmdbar { position: sticky; bottom: 0; margin: 22px 0; }

/* ---------- CTA hover states (design used a `style-hover` authoring
   attribute the design tool resolves at edit-time; real CSS below) ---------- */
[data-cta-nav]:hover { transform:translateY(-1px); box-shadow:0 10px 30px -8px rgba(224,103,58,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
[data-cta]:hover { transform:translateY(-2px); box-shadow:0 12px 38px -8px rgba(224,103,58,0.72), inset 0 1px 0 rgba(255,255,255,0.3); }
[data-cta-ghost]:hover { background:rgba(255,255,255,0.08); border-color:#5c4733; transform:translateY(-2px); }
[data-cta-pill]:hover { color:#f3ece1; border-color:#5c4733; background:rgba(255,255,255,0.07); }
[data-cta-nav], [data-cta], [data-cta-ghost], [data-cta-pill] { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }

/* Ghost CTA base — shared look lifted out of inline styles. The inline
   font-family:'IBM Plex Sans' carried a single quote, which Netlify's HTML
   post-processing (it rewrites internal .html hrefs and re-serializes the tag)
   backslash-escaped into invalid `\'`, truncating the style attribute and
   dropping color/text-decoration. Keeping it in real CSS sidesteps that.
   Per-button sizing (gap/font-size/padding/border-radius) stays inline. */
[data-cta-ghost] {
  display: inline-flex; align-items: center;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
  border: 1px solid #4d3a28; background: rgba(255,255,255,0.04);
  color: #f3ece1; text-decoration: none;
}

/* ---------- Responsive ----------
   The raw Claude Design export is desktop-only (no @media rules). These
   breakpoints target the `data-*` layout hooks already present on the
   page's major grid containers rather than touching their inline styles,
   so the desktop design stays pixel-exact and only narrow viewports are
   affected. See design/README.md. */
@media (max-width: 900px) {
  [data-nav-links] { display: none !important; }
  [data-hero-grid],
  [data-feat],
  [data-feat-2up],
  [data-beats],
  [data-start-grid],
  [data-trust],
  [data-center-head] { grid-template-columns: 1fr !important; }
  .split { grid-template-columns: 1fr !important; }
  .branch-cards { grid-template-columns: 1fr !important; }
  .tm-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .device.sidebar { width: 100% !important; }
  .vscode { width: 100% !important; }

  /* Grid items default to min-width:auto (min-content), which lets long
     text/rows force a 1fr track wider than the viewport even after the
     column count drops to 1. Reset it on the direct children of every
     grid container above so they actually shrink to fit. */
  [data-hero-grid] > *,
  [data-feat] > *,
  [data-feat-2up] > *,
  [data-beats] > *,
  [data-start-grid] > *,
  [data-trust] > *,
  [data-center-head] > *,
  .split > *,
  .branch-cards > * { min-width: 0; }
}

@media (max-width: 600px) {
  .tm-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Examples page (examples.html) ----------
   This page has no `data-*` layout hooks (unlike index.html), so the
   overrides below target the exact inline `grid-template-columns`
   values from the design via attribute-substring selectors — the
   inline styles themselves stay untouched, matching design/README.md's
   "preserve inline styles verbatim" rule. */
@media (max-width: 900px) {
  nav div[style*="display:flex;align-items:center;gap:26px;"] { display: none !important; }

  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1.15fr 0.85fr"],
  [style*="grid-template-columns:1.2fr 0.8fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:170px 1fr 150px"] { grid-template-columns: 120px 1fr 110px !important; }

  [style*="grid-template-columns:0.9fr 1.1fr"] > *,
  [style*="grid-template-columns:1.15fr 0.85fr"] > *,
  [style*="grid-template-columns:1.2fr 0.8fr"] > *,
  [style*="grid-template-columns:1fr 1fr"] > *,
  [style*="grid-template-columns:repeat(3,1fr)"] > *,
  [style*="grid-template-columns:repeat(4,1fr)"] > *,
  [style*="grid-template-columns:repeat(6,1fr)"] > * { min-width: 0; }
}

@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:170px 1fr 150px"] { grid-template-columns: 90px 1fr 84px !important; }
}

/* ---------- Setup Guide page (setup-guide.html) ----------
   The settings-reference accordion (`<details class="pmset">`) is native
   HTML/CSS — no JS needed; the design's `expandSettings` prop only
   controlled a design-tool-only default-open state (default false, i.e.
   collapsed, which is what `<details>` does natively with no JS at all). */
details.pmset > summary { list-style: none; }
details.pmset > summary::-webkit-details-marker { display: none; }
details.pmset[open] .pm-plus { transform: rotate(45deg); }
.pm-plus { transition: transform .2s ease; display: inline-block; }

/* More grid patterns unique to this page — same attribute-substring
   approach as the Examples page block above. */
@media (max-width: 900px) {
  [style*="grid-template-columns:1.05fr 0.95fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:190px 230px 1fr"] { grid-template-columns: 150px 170px 1fr !important; }
  [style*="grid-template-columns:230px 90px 1fr"] { grid-template-columns: 150px 80px 1fr !important; }
  [style*="grid-template-columns:minmax(170px,220px) 1fr auto"] { grid-template-columns: 1fr !important; }

  [style*="grid-template-columns:1.05fr 0.95fr"] > *,
  [style*="grid-template-columns:190px 230px 1fr"] > *,
  [style*="grid-template-columns:230px 90px 1fr"] > *,
  [style*="grid-template-columns:1fr 24px 1fr"] > *,
  [style*="grid-template-columns:200px 1fr"] > *,
  [style*="grid-template-columns:minmax(170px,220px) 1fr auto"] > * { min-width: 0; }
}

@media (max-width: 560px) {
  [style*="grid-template-columns:190px 230px 1fr"],
  [style*="grid-template-columns:230px 90px 1fr"],
  [style*="grid-template-columns:200px 1fr"] { grid-template-columns: 1fr !important; }
}