/* Desktop saved-results controls. Loaded after style.css and the mobile sheet. */
@media (min-width: 761px) {
  .stage .result-controls {
    --study-ink: #193f3d;
    --study-muted: #58746d;
    --study-accent: #176e68;
    --study-line: #d2e1da;
    bottom: 50px;
    width: min(620px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    padding: 10px 12px 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    grid-template-areas: "variants variants" "actions actions" "top key" "detail key";
    gap: 7px 13px;
    align-items: center;
    color: var(--study-ink);
    background: rgba(250, 253, 250, .97);
    border: 1px solid rgba(188, 211, 200, .95);
    border-radius: 12px;
    box-shadow: 0 9px 28px rgba(18, 53, 48, .16);
    backdrop-filter: blur(12px);
  }
  .stage .result-variant-tray {
    position: static;
    grid-area: variants;
    display: block;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--study-line);
  }
  .stage .result-variant-tray #result-variant {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(37px, 1fr));
    gap: 4px;
    width: 100%;
    max-width: none;
    overflow: visible;
  }
  .stage .result-variant-tray #result-variant button {
    min-width: 0;
    min-height: 24px;
    padding: 3px 4px;
    border: 1px solid #d7e5dd;
    border-radius: 6px;
    background: #f1f7f2;
    box-shadow: none;
    color: #41675b;
    font: 600 10px/1.2 Inter, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    backdrop-filter: none;
  }
  .stage .result-variant-tray #result-variant button:hover:not(:disabled):not(.active) {
    color: #164c42;
    background: #e0eee3;
    border-color: #8ebaaa;
  }
  .stage .result-variant-tray #result-variant button.active {
    color: #fff;
    background: var(--study-accent);
    border-color: var(--study-accent);
  }
  .stage .result-variant-tray #result-variant button:disabled {
    color: #8ca098;
    background: #f2f5f2;
    border-color: #e5ece7;
    opacity: .55;
    cursor: not-allowed;
  }
  .stage .result-actions {
    grid-area: actions;
    justify-content: flex-start;
    gap: 4px;
    max-width: 100%;
    padding-bottom: 1px;
    scrollbar-width: thin;
  }
  .stage .result-actions button {
    min-height: 28px;
    padding: 5px 9px;
    color: #385e54;
    background: #edf4ef;
    border: 1px solid transparent;
    border-radius: 6px;
    font: 600 10px/1.2 Inter, system-ui, sans-serif;
  }
  .stage .result-actions button:hover:not(:disabled):not(.active) { background: #dcece1; }
  .stage .result-actions button.active {
    color: #fff;
    background: var(--study-accent);
    border-color: var(--study-accent);
  }
  .stage .result-top {
    grid-area: top;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    min-height: 24px;
    flex-wrap: wrap;
  }
  .stage .result-info-button,
  .stage .result-scene-toggle {
    min-height: 24px;
    padding: 4px 7px;
    border: 1px solid #d2e2d9;
    border-radius: 5px;
    background: #fbfdfb;
    color: #42685c;
    font: 600 10px/1.2 Inter, system-ui, sans-serif;
  }
  .stage .result-info-button:hover,
  .stage .result-scene-toggle:hover { background: #eaf3ec; }
  .stage .result-controls .result-detail {
    grid-area: detail;
    max-width: 100%;
    height: auto;
    min-height: 14px;
    margin: 0;
    color: var(--study-muted);
    font-size: 10px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
  }
  .stage .result-controls #result-key {
    grid-area: key;
    width: 130px;
    min-height: 40px;
    padding-left: 11px;
    border-left: 1px solid var(--study-line);
  }
  .stage .result-controls .result-legend { height: 6px; margin: 0 0 5px; }
  .stage .result-controls .result-range { color: var(--study-muted); font-size: 9px; }
  .stage .result-controls :is(button, select):focus-visible {
    outline: 2px solid #147d75;
    outline-offset: 2px;
  }
  .stage .result-info { z-index: 5; }
}
@media (min-width: 761px) {
  .stage .result-controls { width: max-content; max-width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'actions' 'detail'; padding: 8px 11px; gap: 5px; }
  .stage .result-variant-tray { position: absolute; left: 50%; right: auto; bottom: calc(100% + 9px); transform: translateX(-50%); width: min(680px, calc(100vw - 36px)); display: flex; padding: 0; border: 0; }
  .stage .result-variant-tray #result-variant { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 5px; }
  .stage .result-variant-tray #result-variant button { flex: 0 0 auto; min-width: 34px; border-radius: 999px; padding: 5px 9px; background: rgba(246,251,248,.94); box-shadow: 0 2px 8px #183f3d18; }
  .stage .result-variant-tray #result-variant button.active { background: var(--study-accent); }
  .stage .result-actions, .stage .result-top { justify-content: center; }
  .stage .result-controls .result-detail { text-align: center; }
  .stage .result-controls #result-key { position: absolute; grid-area: auto; top: calc(100% + 5px); right: 0; width: 150px; min-height: 0; height: auto; padding: 6px 9px; border: 1px solid #d2e1da; border-radius: 8px; background: rgba(250,253,250,.93); box-shadow: 0 3px 12px #183f3d18; }
}
@media (min-width: 761px) {
  body.comparison-board-open .stage .result-controls {
    left: 50%; right: auto; bottom: 50px; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 32px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'top' 'actions' 'detail';
  }
}
@media (min-width: 761px) {
  .stage .result-controls, body.comparison-board-open .stage .result-controls { left: 0; right: 0; margin-inline: auto; transform: none; }
  .stage .result-controls #result-key { position: fixed; left: 18px; right: auto; top: auto; bottom: 30px; }
  .stage .stage-footer { bottom: 6px; left: 18px; font-size: 9px; }
}
@media (min-width: 761px) {
  .stage { container-type: inline-size; }
  .stage .result-variant-tray, body.comparison-board-open .stage .result-variant-tray {
    width: max(0px, calc(100cqw - 150px)); max-width: none;
  }
  .stage .result-controls #result-key {
    position: absolute; left: calc((100% - 100cqw) / 2 + 18px); right: auto;
    top: auto; bottom: -20px; padding: 0; width: 150px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
}
@media (min-width: 901px) {
  .stage .brand, body.comparison-board-open .stage .brand { top: 23px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap; }
  .stage .brand img, body.comparison-board-open .stage .brand img { width: 150px; }
}
@media (min-width: 761px) {
  .stage .brand, body.comparison-board-open .stage .brand { display: none; }
  .stage .intro { top: 82px; }
  .stage .result-variant-tray #result-variant button { min-height: 21px; padding-block: 2px; }
  .stage .result-variant-tray #result-variant { row-gap: 3px; }
  .stage .result-controls { padding-block: 6px; gap: 3px; }
  .stage .result-actions button { min-height: 25px; padding-block: 3px; }
}
@media (min-width: 761px) {
  .stage .brand, body.comparison-board-open .stage .brand { display: flex; top: 62px; left: 42px; transform: none; font-size: 0; }
  .stage .brand img, body.comparison-board-open .stage .brand img { width: 110px; }
  .stage .brand-divider { display: none; }
  .stage .intro { top: 110px; }
}
@media (min-width: 761px) {
  .stage .brand, body.comparison-board-open .stage .brand { top: 64px; left: 42px; width: 22px; height: 22px; overflow: hidden; pointer-events: auto; }
  .stage .brand img, body.comparison-board-open .stage .brand img { width: 150px; max-width: none; height: auto; flex: none; }
  .stage .intro { top: 96px; }
}
@media (min-width: 761px) {
  .stage .brand, body.comparison-board-open .stage .brand { top: 19px; left: 18px; z-index: 76; }
}
@media (min-width: 761px) { .stage .intro { top: 76px; } }