.theme-bg-row .layout-switch{
  margin-left:0 !important;
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  padding:3px;
  border:1px solid var(--line,#334155);
  border-radius:10px;
  background:var(--panel,#1e293b);
}
.theme-bg-row .layout-switch .layout-k{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#94a3b8);padding:0 6px;
}
.theme-bg-row .layout-switch button{
  font:600 11.5px/1 system-ui,sans-serif;padding:6px 10px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--muted,#94a3b8);
  cursor:pointer;white-space:nowrap;
}
.theme-bg-row .layout-switch button:hover{color:var(--text,#f1f5f9)}
.theme-bg-row .layout-switch button.on{
  color:#fff;background:var(--blue,#2563eb);border-color:transparent;
}

/* DSG page layout — Current (default) | Tree folds — dropdown */
.layout-switch{
  display:inline-flex;align-items:center;gap:6px;
}
.layout-switch .layout-k,
.layout-switch .theme-label{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#94a3b8);
}
.layout-select{
  min-width:148px;max-width:210px;
  font:600 12px/1.2 system-ui,sans-serif;
  padding:7px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line,#334155);
  color:var(--text);background:var(--panel);
}
.layout-select:hover,.layout-select:focus{
  border-color:var(--blue,#2563eb);outline:2px solid color-mix(in srgb,var(--blue,#2563eb) 25%,transparent);outline-offset:1px;
}

/* ---- Tree folds (NinjaTrader Parameter Settings palette) ----
   From NT screenshot: header #d3d3d3, body #303032, category #93c5fd,
   param text #dbdfdd, checkbox blue #1b84ff, chevron white */
html[data-page-layout="tree"]{
  --nt-header:#d3d3d3;
  --nt-header-text:#111;
  --nt-body:#303032;
  --nt-cat:#93c5fd;
  --nt-param:#dbdfdd;
  --nt-check:#1b84ff;
  --nt-line:#3a3a3c;
  --nt-chevron:#f5f5f5;
}
html[data-page-layout="tree"] #list,
html[data-page-layout="tree"] #folds{
  background:var(--nt-body);
  border:1px solid var(--nt-line);
  border-radius:0;
  padding:0 0 8px;
  box-shadow:none;
  color:var(--nt-param);
}
html[data-page-layout="tree"] #list::before,
html[data-page-layout="tree"] #folds::before{
  content:"Parameter Settings";
  display:block;
  background:var(--nt-header);
  color:var(--nt-header-text);
  font:700 13px/1 system-ui,sans-serif;
  padding:10px 14px;
  border-bottom:1px solid #b0b0b0;
}
html[data-page-layout="tree"] #list > details,
html[data-page-layout="tree"] #folds > details.param-fold,
html[data-page-layout="tree"] #folds > details{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--nt-line);
  border-radius:0;
  margin:0;
}
html[data-page-layout="tree"] #list > details:last-child,
html[data-page-layout="tree"] #folds > details.param-fold:last-child,
html[data-page-layout="tree"] #folds > details:last-child{
  border-bottom:none;
}
html[data-page-layout="tree"] #list > details > summary,
html[data-page-layout="tree"] #folds > details.param-fold > summary,
html[data-page-layout="tree"] #folds > details > summary{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  font-size:12.5px;font-weight:600;
  color:var(--nt-cat);
  list-style:none;
  cursor:pointer;
  user-select:none;
  background:transparent;
}
html[data-page-layout="tree"] #list > details > summary::-webkit-details-marker,
html[data-page-layout="tree"] #folds > details.param-fold > summary::-webkit-details-marker{display:none}
html[data-page-layout="tree"] #list > details > summary::before,
html[data-page-layout="tree"] #folds > details.param-fold > summary::before{
  content:"▸";color:var(--nt-chevron);font-size:11px;width:12px;
  transition:transform .12s;
}
html[data-page-layout="tree"] #list > details[open] > summary::before,
html[data-page-layout="tree"] #folds > details.param-fold[open] > summary::before{
  transform:rotate(90deg);color:var(--nt-chevron);
}
html[data-page-layout="tree"] #list > details[open] > summary,
html[data-page-layout="tree"] #folds > details.param-fold[open] > summary{
  color:var(--nt-cat);
}
html[data-page-layout="tree"] .tree-num{
  font-family:Consolas,"IBM Plex Mono",monospace;
  font-size:11px;font-weight:700;color:var(--nt-cat);
  min-width:2.6em;
}
html[data-page-layout="tree"] details[open] > summary .tree-num{
  color:var(--nt-cat);
}
html[data-page-layout="tree"] .tree-title{flex:1;color:var(--nt-cat)}
html[data-page-layout="tree"] .cnt,
html[data-page-layout="tree"] .oncnt,
html[data-page-layout="tree"] .tag-count{
  margin-left:auto;font-size:10.5px;font-weight:600;color:#9ca3af;
}

html[data-page-layout="tree"] .rows,
html[data-page-layout="tree"] .param-rows{
  padding:2px 0 8px 28px;
}
html[data-page-layout="tree"] .row,
html[data-page-layout="tree"] .param-row{
  display:flex;align-items:center;gap:10px;
  padding:4px 12px 4px 6px;
  border-left:none;border-radius:0;
  background:transparent !important;
  font-size:12.5px;
  min-height:26px;
  color:var(--nt-param);
}
html[data-page-layout="tree"] .row:hover,
html[data-page-layout="tree"] .param-row:hover{
  background:rgba(147,197,253,.08) !important;
}
html[data-page-layout="tree"] .tree-check{
  width:14px;height:14px;accent-color:var(--nt-check);
  flex:0 0 auto;cursor:default;
}
html[data-page-layout="tree"] .row .k,
html[data-page-layout="tree"] .param-row .name,
html[data-page-layout="tree"] .row .id{
  flex:1;font-weight:500;color:var(--nt-param);
}
html[data-page-layout="tree"] .row .v,
html[data-page-layout="tree"] .param-row .val{
  font-family:Consolas,"IBM Plex Mono",monospace;
  font-size:12px;color:#a8aeb8;min-width:4em;text-align:right;
}
html[data-page-layout="tree"] .row.on .v,
html[data-page-layout="tree"] .param-row.wired .val{
  color:#93c5fd;font-weight:700;
}

/* nested sub-folds inside a group */
html[data-page-layout="tree"] details.tree-sub{
  border:none;background:transparent;margin:0;
}
html[data-page-layout="tree"] details.tree-sub > summary{
  padding:6px 12px 6px 6px;font-size:12px;font-weight:600;
  color:var(--nt-cat);
}
html[data-page-layout="tree"] details.tree-sub[open] > summary{
  color:var(--nt-cat);
}
html[data-page-layout="tree"] details.tree-sub > summary::before{
  content:"▸";color:var(--nt-chevron);margin-right:6px;font-size:10px;
}
html[data-page-layout="tree"] details.tree-sub[open] > summary::before{
  color:var(--nt-chevron);
}

.controls .layout-switch{margin-left:auto}
.top .layout-switch{margin-left:8px}


/* ---- Dense strip: compact param book ---- */
html[data-page-layout="dense"] #list,
html[data-page-layout="dense"] #folds{
  max-width:920px;
}
html[data-page-layout="dense"] #list > details,
html[data-page-layout="dense"] #folds > details{
  border-radius:8px;margin-bottom:6px;
}
html[data-page-layout="dense"] #list > details > summary,
html[data-page-layout="dense"] #folds > details > summary{
  padding:7px 12px;font-size:12px;
}
html[data-page-layout="dense"] .rows,
html[data-page-layout="dense"] .param-rows{padding:2px 8px 6px}
html[data-page-layout="dense"] .row,
html[data-page-layout="dense"] .param-row{
  padding:3px 8px;min-height:22px;font-size:11.5px;gap:8px;
}
html[data-page-layout="dense"] .row .v,
html[data-page-layout="dense"] .param-row .val{font-size:11px}

/* ---- Card tiles: groups as card grid ---- */
html[data-page-layout="cards"] #list,
html[data-page-layout="cards"] #folds{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
  align-items:start;
}
html[data-page-layout="cards"] #list > details,
html[data-page-layout="cards"] #folds > details{
  margin:0;border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  border:1px solid var(--line,#334155);
  background:var(--panel,#1e293b);
  overflow:hidden;
}
html[data-page-layout="cards"] #list > details > summary,
html[data-page-layout="cards"] #folds > details > summary{
  padding:12px 14px;font-size:13px;
  background:color-mix(in srgb, var(--blue,#2563eb) 8%, transparent);
  border-bottom:1px solid var(--line,#334155);
}
html[data-page-layout="cards"] .rows,
html[data-page-layout="cards"] .param-rows{padding:8px 10px 12px}
html[data-page-layout="cards"] .row,
html[data-page-layout="cards"] .param-row{
  border-radius:8px;padding:6px 8px;margin-bottom:2px;
}

/* ---- Twin columns: two-up group list ---- */
html[data-page-layout="twin"] #list,
html[data-page-layout="twin"] #folds{
  column-count:2;column-gap:14px;
}
@media(max-width:860px){
  html[data-page-layout="twin"] #list,
  html[data-page-layout="twin"] #folds{column-count:1}
}
html[data-page-layout="twin"] #list > details,
html[data-page-layout="twin"] #folds > details{
  break-inside:avoid;page-break-inside:avoid;
  margin-bottom:10px;
}

/* ---- Poster: airy hero sections ---- */
html[data-page-layout="poster"] body{letter-spacing:.01em}
html[data-page-layout="poster"] #list,
html[data-page-layout="poster"] #folds{max-width:820px;margin-left:auto;margin-right:auto}
html[data-page-layout="poster"] #list > details,
html[data-page-layout="poster"] #folds > details{
  border:none;border-radius:0;
  border-bottom:1px solid var(--line,#334155);
  background:transparent;margin:0 0 8px;padding:8px 0 16px;
}
html[data-page-layout="poster"] #list > details > summary,
html[data-page-layout="poster"] #folds > details > summary{
  font-size:18px;font-weight:800;letter-spacing:-.02em;
  padding:14px 4px 10px;color:var(--text);
}
html[data-page-layout="poster"] #list > details > summary::before,
html[data-page-layout="poster"] #folds > details > summary::before{
  content:"—";color:var(--gold,#fbbf24);margin-right:8px;font-weight:400;
}
html[data-page-layout="poster"] .rows,
html[data-page-layout="poster"] .param-rows{padding:4px 4px 8px 28px}
html[data-page-layout="poster"] .row,
html[data-page-layout="poster"] .param-row{
  padding:8px 4px;border-left:none;border-bottom:1px dashed color-mix(in srgb,var(--line,#334155) 70%, transparent);
  background:transparent !important;border-radius:0;
}

/* ---- Focus one: emphasize open fold ---- */
html[data-page-layout="focus"] #list > details:not([open]),
html[data-page-layout="focus"] #folds > details:not([open]){
  opacity:.55;
}
html[data-page-layout="focus"] #list > details[open],
html[data-page-layout="focus"] #folds > details[open]{
  opacity:1;
  border-color:color-mix(in srgb, var(--blue,#2563eb) 55%, var(--line,#334155));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--blue,#2563eb) 35%, transparent),
             0 12px 32px rgba(0,0,0,.22);
}
html[data-page-layout="focus"] #list > details[open] > summary,
html[data-page-layout="focus"] #folds > details[open] > summary{
  color:var(--blue,#60a5fa);
}

/* ============================================================
   Fight / compare pages — layouts keyed off .fight presence
   ============================================================ */

/* ---- Twin columns: fight | rounds+judge ---- */
@media (min-width: 900px) {
  html[data-page-layout="twin"] .wrap:has(> .fight) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    column-gap: 20px;
    row-gap: 14px;
    max-width: 1180px;
    align-items: start;
  }
  html[data-page-layout="twin"] .wrap:has(> .fight) > .theme-bg-row,
  html[data-page-layout="twin"] .wrap:has(> .fight) > .devbar,
  html[data-page-layout="twin"] .wrap:has(> .fight) > .eyebrow,
  html[data-page-layout="twin"] .wrap:has(> .fight) > h1,
  html[data-page-layout="twin"] .wrap:has(> .fight) > .sub,
  html[data-page-layout="twin"] .wrap:has(> .fight) > .fight-nav,
  html[data-page-layout="twin"] .wrap:has(> .fight) > .foot,
  html[data-page-layout="twin"] .wrap:has(> .fight) > p.foot {
    grid-column: 1 / -1;
  }
  html[data-page-layout="twin"] .wrap:has(> .fight) > .fight {
    grid-column: 1;
    grid-row: auto / span 2;
    margin-bottom: 0;
    align-self: stretch;
  }
  html[data-page-layout="twin"] .wrap:has(> .fight) > .rounds {
    grid-column: 2;
    margin-bottom: 0;
  }
  html[data-page-layout="twin"] .wrap:has(> .fight) > .judge {
    grid-column: 2;
    margin-top: 0;
  }
}

/* ---- Tree: compact indented rounds under full-width fight ---- */
html[data-page-layout="tree"] .wrap:has(.fight) > .fight {
  margin-bottom: 18px;
}
html[data-page-layout="tree"] .wrap:has(.fight) .rounds {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 8px 4px;
  box-shadow: none;
}
html[data-page-layout="tree"] .wrap:has(.fight) .rounds h2 {
  font-size: 18px;
  letter-spacing: .04em;
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 3px solid var(--blue, #3b82f6);
}
html[data-page-layout="tree"] .wrap:has(.fight) .rounds .hint {
  font-size: 11px;
  margin-bottom: 10px;
  padding-left: 14px;
}
html[data-page-layout="tree"] .wrap:has(.fight) .rounds .round {
  margin-bottom: 8px;
  padding: 6px 8px 8px 14px;
  border-left: 2px solid color-mix(in srgb, var(--line, #334155) 80%, transparent);
  background: transparent;
}
html[data-page-layout="tree"] .wrap:has(.fight) .rounds .round .lab {
  font-size: 10px;
  margin-bottom: 4px;
}
html[data-page-layout="tree"] .wrap:has(.fight) .rounds .bar-track {
  height: 20px;
}
html[data-page-layout="tree"] .wrap:has(.fight) .judge {
  margin-top: 12px;
  opacity: .92;
}

/* ---- Dense: tighten fight / rounds / judge ---- */
html[data-page-layout="dense"] .wrap:has(.fight) > .fight {
  padding: 12px 12px 16px;
  gap: 8px;
  margin-bottom: 12px;
  border-radius: 12px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .corner .name {
  font-size: clamp(22px, 4.5vw, 32px);
}
html[data-page-layout="dense"] .wrap:has(.fight) .score {
  font-size: clamp(44px, 10vw, 64px);
  margin-top: 4px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .rounds {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 10px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .rounds h2 {
  font-size: 22px;
  margin-bottom: 2px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .rounds .hint {
  margin-bottom: 8px;
  font-size: 11px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .round {
  margin-bottom: 8px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .bar-track {
  height: 22px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .judge {
  gap: 8px;
  margin-top: 4px;
}
html[data-page-layout="dense"] .wrap:has(.fight) .judge .card {
  padding: 10px 12px;
  border-radius: 10px;
}

/* ---- Cards: rounds as 2-col card grid ---- */
html[data-page-layout="cards"] .wrap:has(.fight) .rounds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  background: transparent;
  border: none;
  padding: 0;
}
html[data-page-layout="cards"] .wrap:has(.fight) .rounds > h2,
html[data-page-layout="cards"] .wrap:has(.fight) .rounds > .hint {
  grid-column: 1 / -1;
}
html[data-page-layout="cards"] .wrap:has(.fight) .rounds > h2 {
  margin-bottom: 0;
}
html[data-page-layout="cards"] .wrap:has(.fight) .rounds > .hint {
  margin-bottom: 4px;
}
html[data-page-layout="cards"] .wrap:has(.fight) .rounds .round {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line, #334155);
  background: var(--panel, #1e293b);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
html[data-page-layout="cards"] .wrap:has(.fight) .judge {
  margin-top: 14px;
  gap: 14px;
}
html[data-page-layout="cards"] .wrap:has(.fight) .judge .card {
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  border-width: 2px;
}
html[data-page-layout="cards"] .wrap:has(.fight) .judge .card.win {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold, #fbbf24) 45%, transparent),
              0 12px 32px rgba(0, 0, 0, .25);
}
@media (max-width: 640px) {
  html[data-page-layout="cards"] .wrap:has(.fight) .rounds {
    grid-template-columns: 1fr;
  }
}

/* ---- Poster: hero fight, airy rounds below ---- */
html[data-page-layout="poster"] .wrap:has(.fight) > .fight {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 36px;
  padding: 32px 24px 40px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-page-layout="poster"] .wrap:has(.fight) .corner .name {
  font-size: clamp(36px, 7vw, 52px);
}
html[data-page-layout="poster"] .wrap:has(.fight) .score {
  font-size: clamp(80px, 16vw, 120px);
  margin-top: 14px;
}
html[data-page-layout="poster"] .wrap:has(.fight) .vs-badge {
  font-size: 36px;
  padding: 8px 20px;
}
html[data-page-layout="poster"] .wrap:has(.fight) .rounds {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
  padding: 22px 24px 28px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line, #334155);
  border-radius: 0;
}
html[data-page-layout="poster"] .wrap:has(.fight) .rounds h2 {
  font-size: 34px;
  text-align: center;
  margin-bottom: 8px;
}
html[data-page-layout="poster"] .wrap:has(.fight) .round {
  margin-bottom: 22px;
}
html[data-page-layout="poster"] .wrap:has(.fight) .judge {
  max-width: 720px;
  margin: 8px auto 0;
  gap: 16px;
}

/* ---- Focus: maximize fight only ---- */
html[data-page-layout="focus"] .wrap:has(.fight) > .rounds,
html[data-page-layout="focus"] .wrap:has(.fight) > .judge {
  display: none !important;
}
html[data-page-layout="focus"] .wrap:has(.fight) > .fight {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  padding: 28px 22px 36px;
  border-width: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold, #fbbf24) 35%, transparent),
              0 24px 56px rgba(0, 0, 0, .55);
}
html[data-page-layout="focus"] .wrap:has(.fight) .score {
  font-size: clamp(72px, 15vw, 110px);
}
html[data-page-layout="focus"] .wrap:has(.fight) .corner .name {
  font-size: clamp(32px, 6.5vw, 48px);
}

/* Hide dead Layout control when page has no layout targets */
html[data-dsg-layout-na="1"] .layout-switch {
  display: none !important;
}