/*
 * surfaces.css · per-surface styling: landing (S1), home (S2), sources (S3), skills + library (S4/S5), bundle (S6/S7), dialogs (S8), states (S9).
 * Responsive show/hide of COMPONENT-classed elements (.btn, .seg, .chip) lives here, in the layer after components,
 * because a layout-layer display rule would lose to .btn { display: inline-flex }.
 */
@layer surfaces {
  /* ---------- responsive visibility ---------- */
  @media (min-width: 1024px) { .skl__pick, .skl__back, .reader__back { display: none; } }
  @media (min-width: 1280px) { .skl__seg { display: none; } }
  @media (min-width: 768px) and (max-width: 1023.98px) { .skl__back { display: none; } .reader__back { display: none; } }
  @media (max-width: 767.98px) { .pane-head__act > .btn { flex: 1 1 auto; } .skl__pick { display: none; } .sw-hide-sm { display: none; } .hide-sm { display: none; } }
  dialog .reader__back { display: inline-flex; }

  /* ---------- S1 landing ---------- */
  .sw-land { color: var(--text); }
  .land-hero, .land-sec, .land-final { width: 100%; max-width: calc(var(--shell-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); min-width: 0; }
  .land-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); padding-block: var(--sp-16) var(--sp-12); align-items: center; background: radial-gradient(60% 80% at 80% 0%, var(--accent-tint) 0%, transparent 70%); }
  @media (min-width: 1280px) { .land-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding-block: var(--sp-20) var(--sp-16); } }
  .land-hero__copy { display: grid; gap: var(--sp-5); justify-items: start; min-width: 0; }
  .land-hero h1 { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); font-weight: var(--fw-bold); text-wrap: balance; }
  .land-hero h1:focus { outline: none; }
  .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); max-width: 62ch; }
  .land-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .land-hero__art { min-width: 0; }
  .pipe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-5); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: var(--e-3); min-width: 0; }
  @media (min-width: 768px) { .pipe { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; } }
  .pipe__col { display: grid; gap: var(--sp-2); min-width: 0; align-content: start; }
  .pipe__arrow { align-self: center; color: var(--text-3); justify-self: center; transform: rotate(90deg); }
  @media (min-width: 768px) { .pipe__arrow { transform: none; } }
  .pipe__card { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-label); min-width: 0; color: var(--text-2); }
  .pipe__card > .ico { color: var(--accent-text); }
  .pipe__card .score { margin-left: auto; }
  .pipe__card--tree { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: var(--sp-3); line-height: 1.5; }
  .pipe__cap { grid-column: 1 / -1; margin-top: var(--sp-1); }
  .land-hero__art .pipe__cap { padding: var(--sp-2) var(--sp-1) 0; }
  .land-sec { padding-block: var(--sp-12); border-top: 1px solid var(--border); display: grid; gap: var(--sp-4); }
  .land-sec > h2, .land-final h2 { font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); text-wrap: balance; }
  .land-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-2); }
  @media (min-width: 768px) { .land-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { .land-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .land-step { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; }
  .land-step h3 { font-size: var(--fs-title); font-weight: var(--fw-bold); } .land-step p { color: var(--text-2); }
  .land-step__n { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); }
  .land-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  @media (min-width: 1024px) { .land-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .land-list { display: grid; gap: var(--sp-4); } .land-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); color: var(--text-2); } .land-list .ico { color: var(--ready); }
  .land-list strong { color: var(--text); }
  .land-tree { display: grid; gap: var(--sp-1); line-height: 1.6; color: var(--text); overflow-x: auto; }
  .land-tree em { font-style: normal; }
  .mathrow { display: flex; justify-content: space-between; gap: var(--sp-3); }
  .h3 { font-size: var(--fs-title); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--sp-2); }
  .faq { display: grid; max-width: 820px; } .faq__i { border-top: 1px solid var(--border); } .faq__i:last-child { border-bottom: 1px solid var(--border); }
  .faq__i summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 52px; padding: var(--sp-2) 0; cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fs-lead); }
  .faq__i summary::-webkit-details-marker { display: none; } .faq__i summary .chev { color: var(--text-3); transition: transform var(--t-fast); flex: none; }
  .faq__i[open] summary .chev { transform: rotate(180deg); } .faq__i p { color: var(--text-2); padding: 0 var(--sp-8) var(--sp-4) 0; max-width: 68ch; line-height: 1.6; }
  .land-final { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; padding-block: var(--sp-16); border-top: 1px solid var(--border); }
  .sw-about { max-width: calc(880px + 2 * var(--gutter)); margin: var(--sp-12) auto 0; padding: var(--sp-10) 0 var(--sp-12); border-top: 1px solid var(--border); }
  .sw-app--land .sw-about { padding-inline: var(--gutter); }
  .sw-about h2 { font-size: var(--fs-title); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); } .about__lead { max-width: 68ch; margin-bottom: var(--sp-4); }

  /* ---------- S2 home ---------- */
  .home { max-width: 880px; margin-inline: auto; display: grid; gap: var(--sp-5); padding-top: var(--sp-6); }
  .home__head { display: grid; gap: var(--sp-2); }
  .home__head h2 { font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); }
  .home__choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  @media (max-width: 767.98px) { .home__choose { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .home__head h2 { font-size: var(--fs-display); line-height: var(--lh-display); } }
  .radio-card strong { font-size: var(--fs-title); line-height: var(--lh-title); }
  .home__ico { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent-text); display: grid; place-items: center; }
  .textarea--lead { font-size: var(--fs-lead); min-height: 112px; line-height: 1.55; }
  .home__ex, .home__mat { display: grid; gap: var(--sp-2); }
  .mat__t { font-weight: var(--fw-medium); }
  .home__matbtns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .home__go { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
  .home__go .help { flex: 1 1 240px; }
  .home__steps { display: grid; gap: var(--sp-4); } .home__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  .home__import { color: var(--text-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .proj-list { display: grid; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); } .proj { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--border); } .proj:first-child { border-top: 0; }
  .proj__b { display: grid; gap: 2px; text-align: left; padding: var(--sp-3) var(--sp-4); min-height: 56px; min-width: 0; } .proj__b:hover { background: var(--surface-2); } .proj__t { font-weight: var(--fw-medium); }
  .home__proj { display: grid; gap: var(--sp-3); }

  /* ---------- S3 sources ---------- */
  .src-col { display: grid; gap: var(--sp-3); min-width: 0; align-content: start; }
  .meter__head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
  .src-toolbar { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); flex-wrap: wrap; }
  .src-toolbar__t { color: var(--text-2); font-size: var(--fs-label); flex: 1 1 auto; min-width: 0; }
  .src-toolbar__q { flex: 0 1 240px; }
  .srcs { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
  .src { display: grid; grid-template-columns: var(--ctl) 24px minmax(0, 1fr) auto var(--ctl); gap: var(--sp-1) var(--sp-3); align-items: start; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-1); border-top: 1px solid var(--border); transition: background var(--t-fast); }
  .src:first-child { border-top: 0; }
  .src:hover { background: var(--surface-2); }
  .src.is-sel { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent-text); }
  .src__chk { align-self: start; } .src__ico { padding-top: calc((var(--ctl) - 20px) / 2); }
  .src__main { min-width: 0; padding-block: var(--sp-1); display: grid; gap: 2px; }
  .src__title { display: flex; min-height: 24px; align-items: center; text-align: left; font-weight: var(--fw-medium); color: var(--text); min-width: 0; max-width: 100%; border-radius: var(--r-sm); }
  .src__title:hover { text-decoration: underline; text-underline-offset: 3px; }
  .src.is-off .src__title { color: var(--text-2); }
  .src__rename { min-height: 28px; }
  .src__meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .src__note { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); margin-top: var(--sp-1); max-width: 62ch; }
  .src__note--bad { color: var(--danger); } .src__note--warn { color: var(--warning); }
  .src__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
  .src__st { padding-top: calc((var(--ctl) - 24px) / 2); }
  .src-none { padding: var(--sp-6); text-align: center; color: var(--text-2); }
  .src-honest { display: flex; gap: var(--sp-2); align-items: flex-start; }
  @media (max-width: 767.98px) {
    .src { grid-template-columns: var(--ctl) minmax(0, 1fr) var(--ctl); grid-template-areas: "chk main kb" ". st st"; }
    .src__chk { grid-area: chk; } .src__main { grid-area: main; } .src__kb { grid-area: kb; } .src__st { grid-area: st; padding-top: 0; padding-bottom: var(--sp-2); } .src__ico { display: none; }
    .src-toolbar__q { flex: 1 1 100%; order: 3; }
  }
  .reader { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); display: grid; align-content: start; min-width: 0; }
  .reader--empty { min-height: 280px; align-content: center; }
  .reader__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); min-width: 0; flex-wrap: wrap; }
  .reader__t { flex: 1 1 140px; min-width: 0; } .reader__t h3 { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-title); }
  .reader__tools { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .reader__sp { flex: 1; }
  .reader__guide { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); min-width: 0; }
  .reader__text { display: grid; gap: var(--sp-3); padding: var(--sp-4); min-width: 0; }
  .reader__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .reader__find { flex: 0 1 180px; }
  .reader__prose { max-height: 360px; overflow: auto; padding: var(--sp-4); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-md); display: grid; gap: var(--sp-3); line-height: 1.6; color: var(--text-2); }
  .reader__prose:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .reader__cut { color: var(--warning); display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-label); }
  .dropzone { border: 1.5px dashed var(--border-control); border-radius: var(--r-xl); background: var(--surface-1); min-width: 0; }
  .dropzone__in { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); }
  .dropzone--sheet .dropzone__in { padding: var(--sp-8) var(--sp-4); } .dropzone--sheet .ico--xl { color: var(--accent-text); }
  .src-empty { margin-top: var(--sp-2); } .src-empty h3 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: var(--sp-3); width: 100%; max-width: 860px; margin-top: var(--sp-2); }
  .tile { display: grid; gap: var(--sp-1); justify-items: start; align-content: start; text-align: left; padding: var(--sp-4); min-height: 132px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); min-width: 0; transition: border-color var(--t-fast), background var(--t-fast); }
  .tile:hover { border-color: var(--accent-text); background: var(--surface-3); } .tile .ico--xl { color: var(--accent-text); margin-bottom: var(--sp-1); } .tile strong { font-size: var(--fs-body); } .tile .muted { font-size: var(--fs-label); }
  .help-list { display: grid; gap: var(--sp-2); font-size: var(--fs-label); color: var(--text-2); } .help-list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
  html.is-drag body::after { content: "Drop files to add them as sources"; position: fixed; inset: calc(var(--nav-h) + 12px) 12px 12px 12px; z-index: var(--z-toast); display: grid; place-items: center; text-align: center; padding: var(--sp-6); font-size: var(--fs-title); font-weight: var(--fw-bold); border: 2px dashed var(--accent-text); border-radius: var(--r-xl); background: rgba(13, 12, 29, .88); color: var(--text); pointer-events: none; }
  .dlg__body--flush { padding: 0; } .dlg__body--flush .reader, .dlg__body--flush .skl__lib { border: 0; border-radius: 0; }
  .dlg__x--abs { position: absolute; right: var(--sp-2); top: var(--sp-2); z-index: 2; margin: 0; }
  .dlg--drawer .dlg__head { padding: 0; height: 0; } .dlg--drawer > .dlg__head h2 { position: absolute; }

  /* ---------- S4/S5 skills ---------- */
  .lib-head { display: grid; gap: var(--sp-3); }
  .lib-head__t { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .lib-head__t h2 { font-size: var(--fs-title); font-weight: var(--fw-bold); display: flex; gap: var(--sp-2); align-items: baseline; }
  .lib-head__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .seg--sm > button { padding: 0 var(--sp-2); }
  .libs { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
  .lib { display: grid; grid-template-columns: minmax(0, 1fr) var(--ctl); align-items: center; border-top: 1px solid var(--border); }
  .lib:first-child { border-top: 0; }
  .lib:has(.check) { grid-template-columns: var(--ctl) minmax(0, 1fr); }
  .lib__grip { color: var(--text-disabled); padding-left: var(--sp-1); }
  .lib__b { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n m" "d d"; gap: 2px var(--sp-2); padding: var(--sp-2) 0; min-height: 56px; text-align: left; min-width: 0; align-items: center; }
  .lib__n { grid-area: n; font-weight: var(--fw-medium); color: var(--text); } .lib__d { grid-area: d; color: var(--text-3); font-size: var(--fs-label); } .lib__m { grid-area: m; display: flex; align-items: center; gap: var(--sp-2); }
  .lib__rel { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-meta); }
  .lib.is-sel { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent-text); } .lib:hover { background: var(--surface-2); } .lib.is-sel:hover { background: var(--accent-tint-strong); }
  .bulkbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: var(--fs-label); }
  .empty--sm { padding: var(--sp-8) var(--sp-4); } .empty--sm h3 { font-size: var(--fs-title); line-height: var(--lh-title); } .empty--sm p { font-size: var(--fs-body); }
  .empty__act { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-2); }
  .skl--empty { padding-top: var(--sp-8); }
  .skl__main { min-width: 0; }
  .ed__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; min-width: 0; }
  .ed__title { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 160px; min-width: 0; } .ed__title h2 { font-size: var(--fs-title); font-weight: var(--fw-bold); min-width: 0; }
  .ed, .pv, .genpanel .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; }
  .ed { display: grid; }
  .ed__scroll { display: grid; gap: 0; padding: 0 var(--sp-5); }
  .ed__sec { display: grid; gap: var(--sp-3); padding-block: var(--sp-5); border-top: 1px solid var(--border); min-width: 0; } .ed__sec:first-child { border-top: 0; }
  .ed__sech { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .ed__sech h3 { font-size: var(--fs-body); font-weight: var(--fw-bold); } .ed__sech--sub { margin-top: var(--sp-2); }
  .ed__grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
  #advAcc > .acc__body .ed__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .ed__foot { position: sticky; bottom: calc(var(--tabbar-h) + var(--cookie-h)); z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-5); background: var(--surface-1); border-top: 1px solid var(--border-strong); border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .ed__foot .help { flex: 1 1 200px; }
  .taglist { display: grid; gap: var(--sp-2); }
  .rels { display: grid; gap: var(--sp-3); } .rel { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
  .rel__h { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; } .rel__c { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .rel__sel { width: auto; min-width: 160px; flex: 0 1 220px; background-color: var(--surface-1); }
  .rel__none { font-size: var(--fs-label); } .chip-btn--conf { border-color: var(--danger); }
  .pv { display: grid; align-content: start; }
  .pv__body { padding: var(--sp-4); display: grid; gap: var(--sp-4); min-width: 0; }
  .pv .utabs { padding-inline: var(--sp-2); }
  .pv__foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
  .refine { display: grid; gap: var(--sp-2); } .try__row { display: flex; gap: var(--sp-2); min-width: 0; } .try__row .input { flex: 1; }
  .try__t { margin-top: var(--sp-3); }
  .tests { display: grid; gap: var(--sp-4); } .tests__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4); }
  .tlist { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); } .tlist li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-label); align-items: start; } .tlist .ico { margin-top: 2px; }
  .try .card__body { gap: var(--sp-3); }
  .filelist ul { display: grid; gap: 0; } .filelist li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--sp-2); min-height: var(--ctl); align-items: center; border-bottom: 1px solid var(--border); }
  .score--lg { min-width: 56px; height: 40px; font-size: var(--fs-title); border-radius: var(--r-md); }
  .score-box { display: grid; gap: var(--sp-3); } .score-box__h { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .score-box__h > div { flex: 1 1 200px; }
  .skl__ed--wide { max-width: 760px; }
  .plan__list { display: grid; border: 1px solid var(--border); border-radius: var(--r-md); } .plan__i { display: grid; grid-template-columns: var(--ctl) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-1); border-top: 1px solid var(--border); } .plan__i:first-child { border-top: 0; }
  .plan__ico { display: grid; place-items: center; width: var(--ctl); } .plan__ico.ready { color: var(--ready); } .plan__ico.failed { color: var(--danger); }
  .plan__tax { display: grid; gap: var(--sp-2); } .plan__f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .plan__f .help { flex: 1 1 240px; }
  .genpanel { display: grid; gap: var(--sp-3); padding: var(--sp-4); } .genpanel > .card { border: 0; padding: 0; background: none; }
  .genpanel .card__body { padding: 0; } .genpanel__h { display: flex; gap: var(--sp-3); align-items: center; } .genpanel__f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
  .skels { display: grid; gap: var(--sp-2); } .file--dim .code { opacity: .75; }
  .graphbox { display: grid; gap: var(--sp-3); min-width: 0; } .graph__scroll { border-radius: var(--r-md); background: var(--surface-1); } .graph { width: 100%; min-width: 560px; height: auto; color: var(--accent-text); }
  .graph__dom { fill: var(--text-3); font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; }
  .edge { fill: none; stroke-width: 1.6; } .edge--dep { stroke: var(--accent-text); } .edge--hand { stroke: var(--ready); stroke-dasharray: 5 4; color: var(--ready); } .edge--conf { stroke: var(--danger); stroke-dasharray: 2 4; }
  .node { cursor: pointer; outline: none; } .node rect { fill: var(--surface-2); stroke: var(--border-control); stroke-width: 1.2; } .node text { fill: var(--text); font: 500 11.5px var(--font-mono); } .node:hover rect { fill: var(--surface-3); } .node.is-sel rect { stroke: var(--accent-text); stroke-width: 2.4; }
  .node:focus-visible rect { stroke: var(--focus); stroke-width: 3; }
  .graph__key { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-label); color: var(--text-2); } .graph__key span { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .graph__key .k { display: inline-block; width: 26px; height: 0; border-top-width: 3px; border-top-style: solid; }
  .graph__key .k.k--dep { border-top-color: var(--accent-text); } .graph__key .k.k--hand { border-top-color: var(--ready); border-top-style: dashed; } .graph__key .k.k--conf { border-top-color: var(--danger); border-top-style: dotted; }
  .graphsel { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
  .skl__lib--drawer { padding: var(--sp-4); }

  /* ---------- S6/S7 bundle ---------- */
  .bnd--empty { padding-top: var(--sp-8); }
  .bnd .banner { margin-bottom: var(--sp-4); }
  .bnd-sel__bar { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3) 0 var(--sp-1); border-bottom: 1px solid var(--border); min-height: var(--ctl); flex-wrap: wrap; } .bnd-sel__q { flex: 1 1 120px; margin-block: var(--sp-1); }
  .bsel { display: grid; padding: var(--sp-1); } .bsel--scroll { max-height: 320px; overflow: auto; } .bsel--scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .bsel__i { display: grid; grid-template-columns: var(--ctl) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1); min-height: var(--ctl); border-radius: var(--r-sm); cursor: pointer; padding-right: var(--sp-2); } .bsel__i:hover { background: var(--surface-2); }
  .bnd-sel__nr { padding: var(--sp-3); display: flex; gap: var(--sp-2); align-items: flex-start; border-top: 1px solid var(--border); }
  .math { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-8); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
  @media (max-width: 767.98px) { .math { grid-template-columns: minmax(0, 1fr); } }
  .math__col { display: grid; gap: var(--sp-2); align-content: start; } .math__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-label); color: var(--text-2); } .math__row--sum { color: var(--text); font-weight: var(--fw-bold); font-size: var(--fs-body); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
  .math__res { grid-column: 1 / -1; padding: var(--sp-3) var(--sp-4); background: var(--ready-tint); border-radius: var(--r-md); color: var(--text); } .math__res.is-bad { background: var(--warning-tint); }
  .rtree { padding-top: var(--sp-2); } .rt-root { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
  .rt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); flex: none; margin-inline: 5px; } .rt-trig { flex: 1; font-size: var(--fs-meta); }
  .vlist { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); } .vi { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-2); } .vi--block { color: var(--danger); } .vi--warn { color: var(--warning); } .vi strong { color: var(--text); font-size: var(--fs-label); } .vi .help { margin-top: 2px; } .vi__w { display: flex; gap: var(--sp-3); font-size: var(--fs-meta); margin-top: 2px; }
  .checks { display: grid; gap: var(--sp-1); } .checks li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); } .checks .ok { color: var(--text-2); } .checks .ok .ico { color: var(--ready); } .checks .no .ico { color: var(--danger); }
  .exp__sum { color: var(--text-2); overflow-wrap: anywhere; } .exp__sum > span { white-space: nowrap; } .exp__go { display: grid; gap: var(--sp-2); } .exp__more { display: grid; gap: var(--sp-2); }
  .ins { display: grid; gap: var(--sp-3); counter-reset: n; } .ins li { counter-increment: n; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); color: var(--text-2); } .ins li::before { content: counter(n); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: var(--fs-meta); font-weight: var(--fw-bold); }
  .ins .mono { color: var(--text); word-break: break-word; }
  .ftree .strong { font-weight: var(--fw-bold); }
  .card .utabs { padding-inline: var(--sp-3); }

  /* ---------- S8 dialogs ---------- */
  .tick { display: grid; gap: var(--sp-3); } .tick li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-3); color: var(--text-2); align-items: start; } .tick .ico { margin-top: 3px; color: var(--ready); } .tick li .mono { color: var(--text); }
  .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); } .kv dt { color: var(--text-3); } .kv dd { min-width: 0; word-break: break-word; }
  .import-sum__h { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); color: var(--ready); } .import-sum__h strong { color: var(--text); word-break: break-all; }
  .radios { display: grid; gap: var(--sp-1); } .radios input[type=radio] { appearance: auto; width: 18px; height: 18px; accent-color: var(--accent); background: none; border-radius: 50%; }
  .radios input[type=radio]::after { display: none; } .radios .switch input { position: static; } 
  .sc { display: grid; } .sc__r { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 40px; border-top: 1px solid var(--border); } .sc__r:first-child { border-top: 0; } .sc__k { display: flex; gap: var(--sp-1); flex: none; }
  .spick { display: grid; } .spick__i { display: grid; grid-template-columns: var(--ctl) minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); min-height: var(--ctl); border-top: 1px solid var(--border); cursor: pointer; }
  .res-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  dialog.sw-dialog[data-id="palette"] { place-items: start center; padding-top: 12vh; }
  .dlg--pal { width: min(640px, 100%); border-radius: var(--r-xl); } .dlg--pal::before { display: none; }
  .pal__in { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); min-height: 56px; border-bottom: 1px solid var(--border); color: var(--text-3); }
  .pal__q { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font-size: var(--fs-lead); min-height: 44px; } .pal__q:focus-visible { outline: none; }
  .pal__list { display: grid; padding: var(--sp-2); max-height: min(50vh, 380px); overflow: auto; } .pal__i { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-sm); cursor: pointer; color: var(--text); } .pal__i .ico { color: var(--text-2); } .pal__i[aria-selected="true"] { background: var(--accent-tint-strong); box-shadow: inset 0 0 0 1px var(--accent-text); } .pal__k { margin-left: auto; display: flex; gap: 4px; } .pal__none { padding: var(--sp-6); text-align: center; color: var(--text-2); }
  @media (max-width: 767.98px) { dialog.sw-dialog[data-id="palette"] { place-items: start stretch; padding-top: 0; } .dlg--pal { border-radius: 0 0 var(--r-xl) var(--r-xl); border-top: 0; } }

  /* the loading skeleton page */
  .sw-app > .sw-view .src-grid { display: grid; }
}
@layer surfaces {
  .skl.skl--empty { display: block; }
  .skl--empty .skl__ed--wide { margin-inline: auto; }
}
@layer surfaces {
  @media (max-width: 767.98px) {
    .chip--btn { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-label); }
    .chip-btn { min-height: 36px; } .chip-btn > button { width: 44px; height: 44px; margin-block: -4px; }
    .src__title { min-height: 44px; } .link { min-height: 44px; } .faq__i summary { min-height: 52px; }
    .tree .leaf, .tree summary { min-height: 44px; }
  }
}
@layer surfaces {
  @media (min-width: 768px) and (max-width: 1023.98px) { .sw-bar__in { grid-template-columns: minmax(180px, 1fr) auto auto; } .sw-bar__end { justify-content: flex-end; } .sw-proj { font-size: var(--fs-lead); } }
  @media (max-width: 767.98px) { .seg > button { min-height: var(--ctl); } .src__rename { min-height: var(--ctl); } }
}
@layer surfaces {
  @media (max-width: 767.98px) { .chip-btn > button { min-width: 44px; flex: none; } .seg > button { min-width: 44px; } }
}
@layer surfaces {
  @media (max-width: 767.98px) { .ed__head .skl__seg { flex: 1 1 100%; order: 9; } .ed__head .skl__seg > button { flex: 1; } .pv .utabs > button { padding: 0 var(--sp-2); } .utabs { gap: 0; } }
}
@layer surfaces { .addpane { display: grid; gap: var(--sp-4); min-width: 0; } }
@layer surfaces { @media (max-width: 1023.98px) { .sw-hide-md { display: none; } } }
@layer surfaces {
  /* a visually hidden file input: its label wears the focus ring */
  input.vh:focus-visible + label.btn { outline: 2px solid var(--focus); outline-offset: 2px; }
  .pal__in:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: none; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
@layer surfaces {
  @media (min-width: 1024px) { .skl__lib .graphbox--lib { display: none; } }
  .utabs > button:focus-visible { outline-offset: -3px; }
  .vi__more summary { font-size: var(--fs-label); } .vi__more[open] summary { margin-bottom: var(--sp-1); }
}
@layer surfaces { @media (min-width: 768px) { .graph__hint { display: none; } } }

@layer surfaces {
  /* storage honesty: chip at >= 1200 (in the bar), a persistent line under the bar below that */
  .sw-sub { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding-bottom: var(--sp-1); color: var(--text-2); font-size: var(--fs-label); flex-wrap: wrap; }
  .sw-sub .ico { color: var(--accent-text); }
  @media (min-width: 1200px) { .sw-show-sm { display: none; } }
  @media (max-width: 1199.98px) { .sw-show-lg { display: none; } }
  @media (max-width: 767.98px) { .sw-bar__in { min-height: 52px; } }
  .t-warn { color: var(--warning); }
  html[data-tab="skills"] { scroll-padding-bottom: calc(var(--tabbar-h) + 140px); }
  /* collapsible bundle sections (narrow) */
  .bnd__all { display: grid; gap: var(--sp-3); min-width: 0; }
  .bsec__t { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: 44px; text-align: left; font: inherit; font-weight: var(--fw-bold); color: var(--text); }
  .bsec__t .chev { color: var(--text-3); transition: transform var(--t-fast); flex: none; } .bsec__t[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .bsec.is-collapsed .card__head { border-bottom: 0; }
  .bsec .card__head h3 { min-width: 0; }
  /* three-way token comparison */
  .cmp { display: grid; gap: var(--sp-4); }
  .strats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  @media (min-width: 768px) { .strats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .strat { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; }
  .strat h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); } .strat dl { display: grid; gap: var(--sp-2); margin: var(--sp-1) 0; }
  .strat dl > div { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-label); color: var(--text-2); }
  .strat--hub { border-color: var(--accent-text); background: var(--accent-tint); } .strat--all { opacity: .92; }
  .rng { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; } .rng strong { color: var(--text); font-size: var(--fs-body); } .rng__r { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-3); }
  .listing { display: grid; gap: var(--sp-2); }
  .cmp__v { padding: var(--sp-3) var(--sp-4); background: var(--ready-tint); border-radius: var(--r-md); color: var(--text); line-height: 1.5; } .cmp__v.is-over { background: var(--warning-tint); }
  /* orchestrator execution view */
  .olanes { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
  .olane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); min-width: 0; }
  .olane__n { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3); font-weight: var(--fw-bold); min-width: 74px; }
  .olane__x { color: var(--danger); display: inline-grid; }
  .ostep { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: var(--fs-label); max-width: 100%; overflow-wrap: anywhere; }
  /* rendered markdown preview */
  .md { padding: var(--sp-4); max-height: 560px; overflow: auto; background: var(--code-bg); line-height: 1.6; color: var(--text-2); display: grid; gap: var(--sp-3); align-content: start; }
  .md:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .md .md-h { color: var(--text); font-weight: var(--fw-bold); font-size: var(--fs-title); line-height: var(--lh-title); margin-top: var(--sp-2); } h3.md-h { font-size: var(--fs-lead); } h4.md-h, h5.md-h { font-size: var(--fs-body); }
  .md .md-p { max-width: 78ch; } .md-l { display: grid; gap: var(--sp-1); padding-left: var(--sp-5); list-style: revert; } .md-l li { padding-left: var(--sp-1); }
  .md code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: var(--text); }
  .md-fm, .md-code { margin: 0; padding: var(--sp-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--fs-code); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
  .md-t th, .md-t td { white-space: normal; min-width: 90px; }
  .seg--wrap { flex-wrap: wrap; } .file__sub { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
  .meter__sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--ctl); cursor: pointer; } .meter__sum::-webkit-details-marker { display: none; } .meter__sum .chev { color: var(--text-3); margin-left: var(--sp-2); transition: transform var(--t-fast); flex: none; }
  .meter-d[open] .meter__sum .chev { transform: rotate(180deg); } .meter-d[open] .meter__sum { margin-bottom: var(--sp-2); }
  .edge__l { fill: var(--text-2); font: 500 10.5px var(--font-ui); paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; } .edge__l--conf { fill: var(--danger); }
}
@layer surfaces { @media (max-width: 767.98px) { .strat { padding: var(--sp-3); gap: var(--sp-1); } .strat > .help:last-child { display: none; } .strat > .help:nth-of-type(1) { margin-top: -4px; } } }
@layer surfaces { .meter__mark--start { transform: none; align-items: flex-start; } .plan__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; } }
@layer surfaces { .sw-bar__start .sw-saved { flex: 0 100 auto; min-width: 0; } .sw-bar__start .sw-saved > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-proj { flex: 0 1 auto; max-width: none; } }
@layer surfaces { .sw-only-sm { display: none; margin-left: auto; } @media (max-width: 767.98px) { .sw-only-sm { display: inline-flex; } .sw-bar__end { display: none; } .sw-bar__in { grid-template-columns: minmax(0, 1fr); } } }
@layer surfaces {
  .skl__ed--wide:has(.graphcard) { max-width: none; }
  @media (max-width: 1023.98px) { .skl__lib.is-graph > .libs { display: none; } }
  @media (min-width: 1024px) and (max-width: 1279.98px) { .bnd__main { grid-row: 1; } .bnd__left { grid-row: 2; } }
}
@layer surfaces { @media (max-width: 767.98px) { .plan__i { grid-template-columns: var(--ctl) minmax(0, 1fr); } .plan__i > :last-child { grid-column: 2; justify-self: start; } } }
@layer surfaces { dialog .reader__head { padding-right: var(--sp-16); } }
@layer surfaces {
  /* short viewports (200% zoom of a laptop = 720x450, 320x568 reflow): nothing stays stuck, the form gets the whole screen */
  @media (max-height: 600px) {
    .sw-bar, .ed__foot, .bnd__stick { position: static; }
    .sw-tabs { position: static; height: auto; }
    :root { --tabbar-h: 0px; --scroll-top: var(--sp-4); }
    .src-side, .skl__lib, .bnd__rail, .bnd__left { position: static; max-height: none; }
  }
}
@layer surfaces {
  /* numbers the mock does not compute (labelled placeholders). The frontend replaces each with the engine/server value and drops the attribute. */
  [data-fixture] { text-decoration: underline dotted var(--text-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
@layer surfaces {
  .partial { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1280px) { .partial { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
  .skl__ed--wide:has(.partial) { max-width: none; } .partial__acts { display: grid; gap: var(--sp-2); justify-items: stretch; }
  .sw-skip--2 { left: 232px; }
  .skip-in { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-in:focus { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: inline-flex; margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--accent); color: var(--on-accent); border-radius: var(--r-md); }
}
@layer surfaces { .derived { padding: var(--sp-3); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; max-height: 140px; overflow: auto; } .derived:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } }
@layer surfaces {
  /* budget at 390x844 with the site's cookie banner up: nav ~130 + banner ~135 + tab bar 64 leaves ~500px. So on phones the sticky footer keeps its buttons and drops the help line,
     and nothing below 600px height is sticky at all (see the max-height rule). */
  @media (max-width: 767.98px) { .ed__foot .help { display: none; } .ed__foot { padding: var(--sp-2) var(--sp-4); } }
  @media (max-width: 767.98px) and (max-height: 720px) { .bnd__stick { position: static; } }
}
@layer surfaces { .bnd__stat .count, .bnd__stat .chip { white-space: nowrap; } .meter__sum .mono { text-align: right; } }
@layer surfaces { .lib__b { padding-left: var(--sp-3); } .dlg--drawer .lib-head__t { padding-right: var(--sp-10); } }
@layer surfaces {
  /* F1: the library drawer clones .skl__lib; the tablet rule that hides the in-page rail must never hide the clone */
  .skl__lib--drawer, dialog .skl__lib { display: grid; }
  /* F7: menus live ABOVE the tab bar; on phones they are a bottom sheet pinned above tab bar + cookie banner */
  .sw-pop { z-index: var(--z-popover); max-height: calc(100dvh - var(--nav-h) - var(--tabbar-h) - var(--cookie-h) - var(--sp-4)); overflow: auto; overscroll-behavior: contain; }
  @media (max-width: 767.98px) {
    .sw-pop { left: var(--sp-2); right: var(--sp-2); top: auto; bottom: calc(var(--tabbar-h) + var(--cookie-h) + var(--sp-2)); max-width: none; width: auto; box-shadow: var(--e-3); }
  }
  /* F8: the budget caption is in flow, never absolutely positioned over the help text */
  .meter__cap { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--text-3); margin-top: var(--sp-1); }
  .meter__tick { position: absolute; top: 0; width: 1px; height: 6px; background: var(--border-control); }
  .meter__marks { height: 6px; }
}