.radio-panel { display: none; }
.tablet-radio-control { display: none; }
.energy-radio-group { display: contents; }

@media (orientation: landscape) and (min-width: 740px) and (min-height: 500px) and (any-pointer: coarse) {
  .energy-radio-group { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
  .energy-radio-group > .energy-card { flex: 1 1 0; min-width: 0; }
  .tablet-radio-control {
    position: relative; z-index: 2; display: flex; flex: 0 0 auto;
  }
  .tablet-radio-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 60px; min-height: 44px; padding: 7px 8px; border: 1px solid var(--line);
    border-radius: var(--header-control-radius, 12px); background: var(--panel); color: var(--text);
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .tablet-radio-toggle[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); }
  .tablet-radio-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
  .tablet-radio-status:not([hidden]) {
    position: absolute; z-index: 3; bottom: calc(100% + 6px); right: 0;
    width: max-content; max-width: 230px; padding: 7px 10px; border: 1px solid var(--line);
    border-radius: 9px; background: var(--panel); color: var(--text); font-size: 11px;
    line-height: 1.4; box-shadow: 0 4px 14px #0003; pointer-events: none;
  }
  .two-column .energy-radio-group { grid-column: 1 / -1; }
  .two-column .tablet-radio-toggle { border-color: #6b7f5759; background: #304936; color: #dfebc9; }
  .two-column .tablet-radio-toggle[aria-pressed='true'] { background: #cfe3a2; color: #243b29; }
}

@media (max-width: 560px) and (orientation: portrait) {
  .radio-panel {
    display: block; order: 5; min-width: 0; margin-top: 14px;
    padding: 16px 14px; border: 1px solid #dbe1d1; border-radius: 20px;
    background: #f3f3e9; color: #263e2d;
  }
  .radio-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .radio-main > div { min-width: 0; }
  .radio-kicker { margin: 0 0 3px; color: #617052; font-size: 10px; letter-spacing: .16em; }
  .radio-main h2 { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.4; }
  .radio-status { margin: 4px 0 0; color: #617052; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  .radio-status.is-error { color: #a23f35; }
  .radio-toggle {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px;
    min-width: 84px; min-height: 46px; padding: 9px 14px; border: 0; border-radius: 14px;
    background: #345c39; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .radio-toggle[aria-pressed='true'] { background: #e2e9d8; color: #29472e; }
  .radio-settings { margin-top: 12px; border-top: 1px solid #d5ddcb; }
  .radio-settings summary { padding: 11px 0 0; color: #617052; font-size: 12px; cursor: pointer; }
  .radio-area { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #344d37; font-size: 13px; }
  .radio-area input {
    width: 95px; min-height: 42px; padding: 8px 10px; border: 1px solid #c9d4bb;
    border-radius: 10px; background: #fff; color: #263e2d; font: inherit; text-transform: uppercase;
  }
  .radio-panel :is(button, input, summary):focus-visible { outline: 3px solid #52703d; outline-offset: 3px; }
  .radio-panel audio { display: none; }
}