/* DS9A: S9 BMS pre-course editor (KB, sections, draft against live).
   Loaded after tokens/tokens.css, tokens/app.css and tokens/bms.css (verbatim live copies).
   Semantic tokens only; live class names first (.admin-*, .bms-*, .btn, .pill). Scope prefix ds9a-. */

@font-face{
  font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/onest-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/onest-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- shell ---------- */
.bms body{font-family:var(--font-body); color:var(--color-body); margin:0}
.admin-nav a:not([href]){cursor:default}
.admin-nav a:not([href]):hover{background:transparent; color:var(--color-ink)}
.ds9a-nav-group{margin:var(--s-3) var(--s-3) var(--s-1); font-size:var(--t-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted)}
.admin-sidebar-foot .who{display:block; font-size:var(--t-sm); font-weight:700; color:var(--color-ink); margin-bottom:var(--s-2)}
:focus-visible{outline:2px solid var(--color-accent-text); outline-offset:2px; border-radius:var(--radius-sm)}
.ds9a-crumbs{display:flex; gap:var(--s-2); align-items:center; font-size:var(--t-sm); color:var(--color-muted); margin-bottom:var(--s-3)}
.ds9a-crumbs a{color:var(--color-accent-text); font-weight:700; text-decoration:none}
.ds9a-crumbs a:hover{text-decoration:underline}
.ds9a-page{max-width:110rem}

/* ---------- buttons (live .btn first) ---------- */
.btn.btn-sm{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap}
.btn-ghost:hover{border-color:var(--color-accent-text); text-decoration:none}
.ds9a-btn-danger{background:var(--color-danger); color:var(--color-on-accent)}
.ds9a-btn-danger:hover{background:var(--color-danger-ink); text-decoration:none}
.ds9a-btn-quiet{background:transparent; border:0; color:var(--color-muted); font:inherit; font-size:var(--t-sm); font-weight:700; cursor:pointer; padding:.4rem .6rem; text-decoration:none}
.ds9a-btn-quiet:hover{color:var(--color-accent-text)}

/* ---------- draft against live bar ---------- */
.ds9a-draftbar{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  background:var(--color-ink); color:var(--color-on-accent);
  border-radius:var(--radius); padding:var(--s-3) var(--s-4); margin-bottom:var(--s-5);
  box-shadow:var(--shadow); position:sticky; top:0; z-index:5;
}
.ds9a-draftbar .ds9a-count{display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:var(--t-base)}
.ds9a-draftbar .ds9a-count::before{content:""; width:.8rem; height:.8rem; border-radius:50%; background:var(--color-accent)}
.ds9a-draftbar .ds9a-what{font-size:var(--t-sm); opacity:.85}
.ds9a-draftbar .bms-sp{flex:1}
.ds9a-draftbar .btn-ghost{color:var(--color-on-accent); border-color:rgba(255,255,255,.35)}
.ds9a-draftbar .btn-ghost:hover{border-color:var(--color-on-accent)}
.ds9a-draftbar.is-clean{background:var(--color-card); color:var(--color-ink); border:1px solid var(--color-line)}

/* ---------- two-column work area ---------- */
.ds9a-cols{display:grid; grid-template-columns:minmax(0,1fr) 37rem; gap:var(--s-5); align-items:start}
.ds9a-side{position:sticky; top:var(--s-4); display:flex; flex-direction:column; gap:var(--s-5)}
.ds9a-side .bms-widget{margin-bottom:0}

/* ---------- section widget with tone ---------- */
.ds9a-sec .bms-whead{gap:var(--s-3)}
.ds9a-sec .bms-whead h3{font-size:var(--t-base)}
.ds9a-sec .bms-fb-handle{display:inline-flex; flex-direction:column; justify-content:center; gap:3px; cursor:grab; margin:-.35rem 0 -.35rem calc(var(--s-4) * -1)}
.ds9a-tone{width:1rem; height:1rem; border-radius:4px; border:1px solid var(--color-line); background:var(--color-card); flex:0 0 auto}
.ds9a-sec[data-tone="red"] .bms-whead{background:var(--color-danger-wash)}
.ds9a-sec[data-tone="red"] .bms-whead h3{color:var(--color-danger-ink)}
.ds9a-sec[data-tone="red"] .ds9a-tone,.ds9a-sw-red{background:var(--color-danger-wash); border-color:var(--color-danger)}
.ds9a-sec[data-tone="green"] .bms-whead{background:var(--color-success-wash)}
.ds9a-sec[data-tone="green"] .bms-whead h3{color:var(--color-success-ink)}
.ds9a-sec[data-tone="green"] .ds9a-tone,.ds9a-sw-green{background:var(--color-success-wash); border-color:var(--color-success)}
.ds9a-sec[data-tone="amber"] .bms-whead{background:var(--color-warning-wash)}
.ds9a-sec[data-tone="amber"] .bms-whead h3{color:var(--color-warning-ink)}
.ds9a-sec[data-tone="amber"] .ds9a-tone,.ds9a-sw-amber{background:var(--color-warning-wash); border-color:var(--color-warning)}
.ds9a-sec[data-tone="blue"] .bms-whead{background:var(--color-info-wash)}
.ds9a-sec[data-tone="blue"] .bms-whead h3{color:var(--color-info-ink)}
.ds9a-sec[data-tone="blue"] .ds9a-tone,.ds9a-sw-blue{background:var(--color-info-wash); border-color:var(--color-info)}
.ds9a-sec[data-tone="orange"] .bms-whead{background:var(--color-accent-wash)}
.ds9a-sec[data-tone="orange"] .bms-whead h3{color:var(--color-accent-text)}
.ds9a-sec[data-tone="orange"] .ds9a-tone,.ds9a-sw-orange{background:var(--color-accent-wash); border-color:var(--color-accent)}
.ds9a-sw-none{background:var(--color-card)}
.ds9a-sec-note{padding:var(--s-2) var(--s-4); font-size:var(--t-sm); color:var(--color-body); border-bottom:1px solid var(--color-line); background:var(--color-card)}
.ds9a-sec-note b{color:var(--color-muted); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em; margin-right:.4rem}
.ds9a-sec-name{background:none; border:0; padding:0; font:inherit; cursor:text; color:inherit; text-align:left}
.ds9a-sec-name:hover{text-decoration:underline dotted; text-underline-offset:3px}
.ds9a-sec-tools{display:flex; gap:var(--s-1); align-items:center}
.ds9a-sec.is-open{box-shadow:0 0 0 2px var(--color-accent-text), var(--shadow)}

/* ---------- card rows ---------- */
.ds9a-sec .bms-fb-item{gap:var(--s-3)}
.ds9a-badge{
  width:2.4rem; height:2.4rem; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:var(--t-sm); line-height:1;
  background:var(--color-bg); color:var(--color-ink); border:1px solid var(--color-line);
}
.ds9a-badge.is-red{background:var(--color-danger); color:var(--color-on-accent); border-color:var(--color-danger)}
.ds9a-badge.is-green{background:var(--color-success); color:var(--color-on-accent); border-color:var(--color-success)}
.ds9a-badge.is-emoji{font-size:.62rem; font-weight:800; letter-spacing:.02em; border-style:dashed; color:var(--color-muted); text-transform:uppercase}
.ds9a-card{flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; padding:.45rem 0}
.ds9a-card-title{font-size:var(--t-sm); font-weight:700; color:var(--color-ink)}
.ds9a-card-hook{font-size:var(--t-xs); color:var(--color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ds9a-row-tools{display:flex; gap:var(--s-2); align-items:center; flex:0 0 auto}
.bms-fb-item.is-changed{box-shadow:inset 3px 0 0 var(--color-info)}
.bms-fb-item.is-changed:not(:has(> .bms-fb-row)){background:var(--color-info-wash)}

/* change markers */
.ds9a-chg{display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:6px; background:var(--color-info-wash); color:var(--color-info-ink); border:1px solid var(--color-info)}
.ds9a-chg.is-del{background:var(--color-danger-wash); color:var(--color-danger-ink); border-color:var(--color-danger)}
.ds9a-chg.is-new{background:var(--color-success-wash); color:var(--color-success-ink); border-color:var(--color-success)}
.ds9a-proposed{display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:6px; background:var(--color-accent-wash); color:var(--color-accent-text); border:1px solid var(--color-accent)}

/* ---------- inline edit (expand in place, never a modal) ---------- */
.ds9a-inline{display:flex; gap:var(--s-2); align-items:center; flex:1; min-width:0}
.ds9a-input,.ds9a-textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:var(--t-sm); color:var(--color-ink);
  background:var(--color-card); border:1.5px solid var(--color-line); border-radius:var(--radius-sm);
  padding:.55rem .7rem; appearance:none; -webkit-appearance:none;
}
.ds9a-input:focus,.ds9a-textarea:focus{outline:none; border-color:var(--color-accent-text); box-shadow:0 0 0 3px var(--color-accent-wash)}
.ds9a-input.is-live{border-color:var(--color-accent-text); box-shadow:0 0 0 3px var(--color-accent-wash)}
.ds9a-input.is-badge{width:4.2rem; text-align:center; font-weight:800}
.ds9a-textarea{min-height:5.5rem; resize:vertical; line-height:1.5}
.ds9a-edit{padding:var(--s-4); background:var(--color-card); border-top:1px solid var(--color-line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4)}
.ds9a-edit .is-wide{grid-column:1 / -1}
.ds9a-field{display:flex; flex-direction:column; gap:.4rem}
.ds9a-help{font-size:var(--t-xs); color:var(--color-muted); line-height:1.45}
.ds9a-edit-foot{grid-column:1 / -1; display:flex; gap:var(--s-2); align-items:center; padding-top:var(--s-3); border-top:1px solid var(--color-line)}
.ds9a-edit-foot .bms-sp{flex:1}

/* swatches (styled radios, no browser control shows) */
.ds9a-swatches{display:flex; flex-wrap:wrap; gap:var(--s-2)}
.ds9a-swatches input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.ds9a-swatch{display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .7rem .3rem .35rem; border:1.5px solid var(--color-line); border-radius:999px; font-size:var(--t-xs); font-weight:700; color:var(--color-ink); cursor:pointer; background:var(--color-card)}
.ds9a-swatch i{width:1.4rem; height:1.4rem; border-radius:50%; border:1.5px solid var(--color-line); display:inline-block}
.ds9a-swatches input:checked + .ds9a-swatch{border-color:var(--color-accent-text); background:var(--color-accent-wash); color:var(--color-accent-text)}
.ds9a-swatches input:focus-visible + .ds9a-swatch{outline:2px solid var(--color-accent-text); outline-offset:2px}
.ds9a-dot-red{background:var(--color-danger) !important; border-color:var(--color-danger) !important}
.ds9a-dot-green{background:var(--color-success) !important; border-color:var(--color-success) !important}
.ds9a-dot-none{background:var(--color-bg) !important}

/* styled checkbox */
.ds9a-check{display:flex; gap:.6rem; align-items:flex-start; font-size:var(--t-sm); color:var(--color-ink); cursor:pointer}
.ds9a-check input{position:absolute; opacity:0; width:1px; height:1px}
.ds9a-check .box{width:1.5rem; height:1.5rem; flex:0 0 auto; border:1.5px solid var(--color-line); border-radius:5px; background:var(--color-card); display:inline-flex; align-items:center; justify-content:center}
.ds9a-check input:checked + .box{background:var(--color-accent); border-color:var(--color-accent)}
.ds9a-check input:checked + .box::after{content:""; width:.45rem; height:.8rem; border:solid var(--color-on-accent); border-width:0 2.5px 2.5px 0; transform:rotate(45deg) translate(-1px,-1px)}
.ds9a-check input:focus-visible + .box{outline:2px solid var(--color-accent-text); outline-offset:2px}

/* delete confirm, inline */
.ds9a-confirm{grid-column:1 / -1; border:1.5px solid var(--color-danger); background:var(--color-danger-wash); border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4); display:flex; flex-direction:column; gap:var(--s-2)}
.ds9a-confirm h4{margin:0; font-size:var(--t-sm); color:var(--color-danger-ink)}
.ds9a-confirm p{margin:0; font-size:var(--t-sm); color:var(--color-body); line-height:1.5}
.ds9a-confirm .ds9a-row{display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center}

/* ---------- preview with width switch (pure CSS radios) ---------- */
.ds9a-seg{display:inline-flex; background:var(--color-bg); border:1px solid var(--color-line); border-radius:999px; padding:3px}
.ds9a-seg-in{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.ds9a-seg label{font-size:var(--t-xs); font-weight:800; color:var(--color-muted); padding:.35rem .9rem; border-radius:999px; cursor:pointer}
#w-phone:checked ~ .ds9a-pv-head label[for="w-phone"],
#w-tablet:checked ~ .ds9a-pv-head label[for="w-tablet"],
#w-desk:checked ~ .ds9a-pv-head label[for="w-desk"]{background:var(--color-card); color:var(--color-accent-text); box-shadow:0 1px 3px rgba(22,52,80,.15)}
.ds9a-seg-in:focus-visible ~ .ds9a-pv-head .ds9a-seg{outline:2px solid var(--color-accent-text); outline-offset:2px}
.ds9a-pv-head{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--color-line); background:var(--color-bg)}
.ds9a-pv-head h3{margin:0; font-size:var(--t-sm); font-weight:800; color:var(--color-ink)}
.ds9a-pv-head .bms-sp{flex:1}
.ds9a-pv-stage{padding:var(--s-4); background:var(--color-bg); display:flex; justify-content:center}
.ds9a-frame{width:340px; height:470px; overflow:hidden; border-radius:10px; border:1px solid var(--color-line); background:var(--color-card); position:relative}
.ds9a-frame-in{transform-origin:0 0; font-size:16px; line-height:1.5; color:var(--color-body); background:var(--color-bg)}
#w-phone:checked ~ .ds9a-pv-stage .ds9a-frame-in{width:375px; height:518px; transform:scale(.9067)}
#w-tablet:checked ~ .ds9a-pv-stage .ds9a-frame-in{width:768px; height:1062px; transform:scale(.4427)}
#w-desk:checked ~ .ds9a-pv-stage .ds9a-frame-in{width:1280px; height:1770px; transform:scale(.2656)}
.ds9a-pv-foot{padding:var(--s-2) var(--s-4) var(--s-3); font-size:var(--t-xs); color:var(--color-muted); text-align:center}

/* the student look inside the preview frame (px on purpose: it is a true-size student page, scaled) */
.ds9a-st-top{display:flex; align-items:center; gap:12px; padding:14px 20px; background:var(--color-card); border-bottom:1px solid var(--color-line)}
.ds9a-st-brand{font-family:var(--font-script); font-size:26px; color:var(--color-ink); flex:1}
.ds9a-st-link{font-size:14px; font-weight:700; color:var(--color-ink)}
.ds9a-st-hero{background:var(--color-ink); color:var(--color-on-accent); padding:22px 20px}
.ds9a-st-hero small{display:block; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.8}
.ds9a-st-hero b{display:block; font-size:24px; line-height:1.2; margin-top:4px}
.ds9a-st-body{padding:16px 20px; display:flex; flex-direction:column; gap:14px}
.ds9a-st-sec{border-radius:10px; padding:8px 12px; font-size:14px; font-weight:800; color:var(--color-ink); background:var(--color-card); border:1px solid var(--color-line)}
.ds9a-st-sec.is-red{background:var(--color-danger-wash); color:var(--color-danger-ink); border-color:var(--color-danger-wash)}
.ds9a-st-sec.is-green{background:var(--color-success-wash); color:var(--color-success-ink); border-color:var(--color-success-wash)}
.ds9a-st-sec.is-amber{background:var(--color-warning-wash); color:var(--color-warning-ink); border-color:var(--color-warning-wash)}
.ds9a-st-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:8px}
.ds9a-st-card{background:var(--color-card); border:1px solid var(--color-line); border-radius:12px; padding:12px; display:flex; gap:10px; align-items:flex-start; box-shadow:0 4px 14px rgba(22,52,80,.06)}
.ds9a-st-card .ds9a-badge{width:30px; height:30px; font-size:14px}
.ds9a-st-card .ds9a-badge.is-emoji{font-size:8px}
.ds9a-st-card b{display:block; font-size:15px; color:var(--color-ink); line-height:1.3}
.ds9a-st-card span{display:block; font-size:13px; color:var(--color-muted); line-height:1.4; margin-top:2px}

/* ---------- Note for Karlis ---------- */
.ds9a-note{background:var(--color-card); border:1px solid var(--color-line); border-left:4px solid var(--color-ink); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.ds9a-note h3{margin:0; padding:var(--s-3) var(--s-4); font-size:var(--t-sm); font-weight:800; color:var(--color-ink); background:var(--color-bg); border-bottom:1px solid var(--color-line)}
.ds9a-note ul{list-style:none; margin:0; padding:var(--s-2) var(--s-4) var(--s-3)}
.ds9a-note li{display:flex; gap:var(--s-3); align-items:baseline; padding:var(--s-2) 0; font-size:var(--t-sm); line-height:1.5; color:var(--color-body); border-top:1px solid var(--color-line)}
.ds9a-note li:first-child{border-top:0}
.ds9a-note li b{color:var(--color-ink)}
.ds9a-tag{flex:0 0 5.6rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-warning-ink); background:var(--color-warning-wash); border-radius:6px; padding:2px 6px; text-align:center}
.ds9a-tag.is-code{color:var(--color-info-ink); background:var(--color-info-wash)}
.ds9a-tag.is-demo{color:var(--color-muted); background:var(--color-bg); border:1px solid var(--color-line)}

/* live-label emoji stand-ins (the set carries no emoji glyphs) */
.ds9a-emo{display:inline-block; width:.85em; height:.85em; border-radius:50%; vertical-align:-.05em; margin-right:.35em}
.ds9a-emo.is-red{background:var(--color-danger)}
.ds9a-emo.is-green{background:var(--color-success)}

/* ---------- draft against live compare ---------- */
.ds9a-summary{list-style:none; margin:0; padding:0}
.ds9a-summary li{display:flex; gap:var(--s-3); align-items:center; padding:var(--s-3) var(--s-4); border-top:1px solid var(--color-line); font-size:var(--t-sm); color:var(--color-ink)}
.ds9a-summary li:first-child{border-top:0}
.ds9a-summary .ds9a-n{width:2rem; height:2rem; border-radius:50%; background:var(--color-info-wash); color:var(--color-info-ink); font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.ds9a-summary .bms-sp{flex:1}
.ds9a-cmp{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5); align-items:start}
.ds9a-cmp-col > .bms-whead{border-radius:var(--radius) var(--radius) 0 0}
.ds9a-cmp-col.is-live .bms-whead h3::before,.ds9a-cmp-col.is-draft .bms-whead h3::before{content:""; display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.5rem; vertical-align:middle}
.ds9a-cmp-col.is-live .bms-whead h3::before{background:var(--color-success)}
.ds9a-cmp-col.is-draft .bms-whead h3::before{background:var(--color-info)}
.ds9a-cmp-sec{padding:var(--s-2) 0; border-top:1px solid var(--color-line)}
.ds9a-cmp-sec:first-of-type{border-top:0}
.ds9a-cmp-sec h4{margin:0; padding:var(--s-2) var(--s-4); font-size:var(--t-sm); font-weight:800; color:var(--color-ink); display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap}
.ds9a-cmp-sec ol{margin:0; padding:0 var(--s-4) 0 calc(var(--s-4) + 1.6rem); font-size:var(--t-sm); color:var(--color-body)}
.ds9a-cmp-sec li{padding:.2rem 0}
.ds9a-cmp .is-hit{background:var(--color-info-wash); box-shadow:inset 3px 0 0 var(--color-info); border-radius:4px}
.ds9a-cmp .is-gone{background:var(--color-danger-wash); box-shadow:inset 3px 0 0 var(--color-danger); border-radius:4px}
.ds9a-was{text-decoration:line-through; color:var(--color-muted)}
.ds9a-publish{display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; padding:var(--s-4); background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:var(--shadow); margin:var(--s-5) 0}
.ds9a-publish p{margin:0; font-size:var(--t-sm); color:var(--color-body); flex:1; min-width:16rem}
.ds9a-publish .btn-primary{font-size:var(--t-base); padding:.6rem 1.6rem}
.ds9a-target{display:none}
.ds9a-target:target{display:flex}
.ds9a-target.ds9a-confirm{margin-bottom:var(--s-5)}

/* ---------- small screens ---------- */
@media(max-width:1100px){
  .ds9a-cols{grid-template-columns:1fr}
  .ds9a-side{position:static}
}
@media(max-width:768px){
  .admin-main{padding:var(--s-4)}
  .ds9a-cmp{grid-template-columns:1fr}
  .ds9a-edit{grid-template-columns:1fr}
  .ds9a-card-hook{white-space:normal}
  .ds9a-draftbar{position:static}
  .ds9a-tag{flex-basis:4.8rem}
  .ds9a-sec .bms-whead{flex-wrap:wrap}
  .ds9a-sec .bms-fb-item{flex-wrap:wrap}
  .ds9a-sec .bms-fb-row{flex-wrap:wrap}
  .ds9a-card{flex:1 1 55%}
  .ds9a-row-tools{flex:1 1 100%; justify-content:flex-end; padding-bottom:var(--s-2)}
  .ds9a-row-tools .ds9a-btn-quiet{display:none}
  .ds9a-inline{flex-wrap:wrap; flex:1 1 60%}
  .ds9a-inline .ds9a-input{flex:1 1 100%; min-width:0}
  .ds9a-edit .bms-flex{flex-wrap:wrap}
  .ds9a-frame{width:300px; height:420px}
  #w-phone:checked ~ .ds9a-pv-stage .ds9a-frame-in{height:525px; transform:scale(.8)}
  #w-tablet:checked ~ .ds9a-pv-stage .ds9a-frame-in{height:1075px; transform:scale(.3906)}
  #w-desk:checked ~ .ds9a-pv-stage .ds9a-frame-in{height:1792px; transform:scale(.2344)}
  .ds9a-summary li{align-items:flex-start}
  .ds9a-summary li > span:nth-child(2){flex:1; min-width:0}
  .ds9a-summary .bms-sp{display:none}
  .ds9a-cmp-sec ol{padding-right:var(--s-3)}
}

/* round 2 fixes */
.ds9a-cmp li.is-hit,.ds9a-cmp li.is-gone{padding-left:.6rem; margin-left:-.2rem}
.ds9a-cmp h4.is-hit,.ds9a-cmp h4.is-gone{margin:0 var(--s-2); padding-left:var(--s-3)}
.ds9a-edit-foot [aria-current]{color:var(--color-danger-ink); cursor:pointer}

/* BMS links: toast, progress, keyboard handles (lane BMSLINKS) */
[hidden]{display:none !important}
.bms-toast{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:60;max-width:min(28rem,calc(100vw - 2rem));display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;background:var(--color-ink);color:var(--color-on-accent);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);font-size:var(--t-sm);font-weight:700;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.bms-toast.is-on{opacity:1;transform:none;pointer-events:auto}
.bms-toast a{color:var(--color-on-accent);text-decoration:underline}
@media(prefers-reduced-motion:reduce){.bms-toast{transition:none}}
.bms-pub-prog{display:inline-flex;align-items:center;gap:var(--s-2);min-width:12rem;margin-left:var(--s-3);vertical-align:middle;font-size:var(--t-sm);font-weight:700;color:var(--color-body)}
.bms-pub-prog .bms-capbar-track{flex:1;height:6px;background:var(--color-line);border-radius:3px;overflow:hidden}
.bms-pub-prog .bms-capbar-fill{height:100%;background:var(--color-success);border-radius:3px}
a[aria-disabled="true"]{opacity:.6;pointer-events:none}
.bms-fb-handle[tabindex]{touch-action:none;cursor:grab}
.bms-fb-handle[tabindex]:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.is-dragging{box-shadow:var(--shadow);background:var(--color-card)}
.ds-editpanel--text{grid-template-columns:1fr}
.ds10-flash{margin-bottom:var(--s-4)}

/* BMSDND: order editor (drag handle, Move buttons, drop marks) */
.ds9o-note{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid var(--color-border,#d9dde5);border-left:4px solid var(--color-accent);border-radius:var(--radius,8px);background:var(--color-card,#fff);color:var(--color-ink);font-size:var(--fs-sm,.9rem)}
.ds9o-hint{display:block;margin:2px 0 var(--s-2);color:var(--color-muted,#5b6472);font-size:var(--fs-sm,.85rem)}
.ds9o-moves{display:inline-flex;gap:4px;margin-left:auto;flex:none}
.ds9o-mv{font:inherit;font-size:.8rem;min-height:44px;padding:0 .7rem;border:1px solid var(--color-border,#d9dde5);border-radius:6px;background:var(--color-card,#fff);color:var(--color-ink);cursor:pointer;white-space:nowrap}
.ds9o-mv:hover{border-color:var(--color-accent)}
.ds9o-mv:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.ds9o-grip{touch-action:none;user-select:none}
.ds9o-drop-before{box-shadow:0 -3px 0 0 var(--color-accent)}
.ds9o-drop-after{box-shadow:0 3px 0 0 var(--color-accent)}
.ds9o-drop-into{outline:2px dashed var(--color-accent);outline-offset:-2px;min-height:44px}
.ds9o-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[draggable="true"].is-dragging{opacity:.6}
@media(max-width:900px){.ds9o-mv{padding:0 .5rem}}
.ds9o-badge{display:inline-block;padding:.2rem .65rem;border-radius:999px;background:var(--color-bg,#eef1f5);color:var(--color-ink);font-weight:600;font-size:.8rem}
.ds9o-badge.is-draft{background:var(--color-accent);color:#fff}
.ds9o-note button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1200px){.ds9a-sec li.bms-fb-item{flex-wrap:wrap}.ds9a-sec .ds9a-card{flex:1 1 12rem;min-width:0}.ds9o-moves{margin-left:auto}.ds9a-sec .bms-whead{flex-wrap:wrap}}
.ds9a-cols > div{min-width:0}.ds9a-row-tools{flex-wrap:wrap}

/* ---------- r4: delete with confirm, section colour, Unfiled (BMSKB) ---------- */
.ds9o-del{font:inherit;font-size:.8rem;min-height:44px;padding:0 .7rem;border:1px solid var(--color-danger);border-radius:6px;background:var(--color-card);color:var(--color-danger-ink);cursor:pointer}
.ds9o-del:hover{background:var(--color-danger-wash)}
.ds9o-del:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.ds9o-tone{font:inherit;font-size:.8rem;min-height:44px;padding:0 .5rem;border:1px solid var(--color-line);border-radius:6px;background:var(--color-card);color:var(--color-ink)}
.ds9o-tone:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.ds9o-confirm{flex:1 1 100%; width:100%; margin:var(--s-2) 0 0}
.ds9a-sec > .ds9o-confirm{margin:var(--s-3) var(--s-4)}
li.bms-fb-item.has-confirm{flex-wrap:wrap}
#ds9o-unfiled[hidden]{display:none}
#ds9o-unfiled{border-style:dashed}
.bms-toast a[href="#undo"]{font-weight:700;padding:.5rem .6rem;min-height:44px;display:inline-flex;align-items:center}
@media(max-width:900px){.ds9o-del,.ds9o-tone{padding:0 .5rem}}

/* FIXFINAL: the section rename input keeps a usable width; the head row wraps instead. */
.ds9a-sec .bms-whead{flex-wrap:wrap}
.ds9a-inline{flex:1 1 20rem}
.ds9a-inline .ds9a-input{min-width:18ch;flex:1 1 18ch}