diff --git a/web/strategy-switch-console/index.html b/web/strategy-switch-console/index.html index 5896c1e..45643ff 100644 --- a/web/strategy-switch-console/index.html +++ b/web/strategy-switch-console/index.html @@ -1164,15 +1164,87 @@ background: transparent; } - @media (max-width: 820px) { + /* ── Responsive breakpoints (descending max-width) ── */ + /* L: 900-1199px — moderate spacing compression, execution cash policy → 1-col */ + @media (max-width: 1199px) { + .topbar { + width: min(100% - 20px, 1400px); + padding: 16px 20px; + min-height: 78px; + } + + .shell { + width: min(100% - 28px, 1400px); + gap: 14px; + } + + .switch-surface { + grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.9fr); + gap: 14px; + } + + .switch-panel { + padding: 22px; + } + + .panel-head h2 { + font-size: clamp(27px, 3vw, 38px); + } + + .execution-cash-policy-grid { + grid-template-columns: 1fr; + } + + .public-preview { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + /* M: 680-899px — single-column main layout, form sections → 1-col, platform strip → 3-col */ + @media (max-width: 899px) { + .topbar { + border-radius: 0; + margin: 0; + top: 0; + width: 100%; + min-height: 68px; + padding: 14px 18px; + } + + .brand { + column-gap: 10px; + grid-template-columns: 38px minmax(0, 1fr); + } + + .brand::before { + width: 38px; + height: 38px; + font-size: 19px; + } + + h1 { + font-size: clamp(19px, 2.5vw, 26px); + } + + .brand p { + font-size: 12px; + } + + .shell { + width: min(100% - 24px, 1400px); + padding: 10px 0 32px; + gap: 12px; + } + .platform-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 10px; } - .platform-copy strong { - font-size: 12px; + .platform-button { + min-height: 48px; + padding: 8px 24px 8px 8px; } .switch-surface { @@ -1183,39 +1255,51 @@ position: static; } - .public-preview { + .quick-form { grid-template-columns: 1fr; } - } + .form-section { + grid-template-columns: 1fr; + } - @media (max-width: 540px) { - .platform-strip { - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 5px; - padding: 6px 8px; + .public-preview { + grid-template-columns: 1fr; } - .platform-button { - min-height: 40px; - gap: 5px; - padding: 5px 7px; + + .switch-panel { + padding: 20px; + gap: 16px; } - .mark { - width: 26px; - height: 26px; - font-size: 10px; + + .panel-head h2 { + font-size: clamp(24px, 4vw, 32px); } - .platform-copy strong { - font-size: 11px; + + .summary-row { + grid-template-columns: 1fr; + gap: 3px; + padding: 10px 0; + } + + .mode-block, + .section-wide { + grid-column: auto; } } - @media (max-width: 680px) { + /* S: 480-679px — topbar stacks vertically, platform strip → 2-col, tighter spacing */ + @media (max-width: 679px) { .topbar { position: static; - align-items: flex-start; flex-direction: column; - padding: 18px; + align-items: flex-start; + gap: 12px; + padding: 14px 16px; + } + + .brand { + width: 100%; } .top-actions { @@ -1223,60 +1307,265 @@ width: 100%; } + .btn, + .pill { + min-height: 36px; + font-size: 12px; + } + .boot-screen { - width: min(100% - 28px, 680px); - min-height: calc(100svh - 122px); - padding-top: 22px; + width: min(100% - 24px, 680px); + min-height: calc(100svh - 130px); + padding: 20px 0; } - .shell { - width: min(100% - 28px, 1160px); - padding-top: 18px; + .boot-panel h2 { + font-size: clamp(24px, 6vw, 34px); } - .platform-strip, - .quick-form, - .form-section { - grid-template-columns: 1fr; + .shell { + width: min(100% - 20px, 1160px); + padding-top: 14px; + gap: 10px; } .platform-strip { - grid-template-columns: repeat(5, minmax(68px, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; - overflow-x: auto; } .platform-button { - min-height: 48px; - padding-inline: 8px 24px; + min-height: 44px; } .platform-copy strong { - font-size: 11px; + font-size: 12px; } - .mode-block, - .section-wide { - grid-column: auto; + .mark { + width: 28px; + height: 28px; + font-size: 10px; + border-radius: 8px; } .switch-panel { - padding: 18px; + padding: 16px; + gap: 14px; } - .summary-row { - grid-template-columns: 1fr; - gap: 3px; + .summary-head { + padding: 16px 18px 14px; } - .run-area { - grid-template-columns: 1fr; + .summary-list { + padding: 4px 18px 14px; + } + + .summary-actions { + padding: 14px 18px 18px; + } + + .summary-row.pending { + margin: 0 -18px; + padding-inline: 15px 18px; + } + + select, + input { + font-size: 13px; + } + } + + /* XS: < 480px — hide subtitle, compact platform buttons, minimal chrome */ + @media (max-width: 479px) { + .topbar { + padding: 12px 14px; + } + + .brand p { + display: none; + } + + .brand::before { + width: 34px; + height: 34px; + font-size: 17px; + } + + .brand { + grid-template-columns: 34px minmax(0, 1fr); + column-gap: 8px; + } + + h1 { + font-size: 19px; } - select { + .btn, + .pill { + min-height: 34px; + padding: 0 10px; + border-radius: 10px; + font-size: 12px; + } + + .boot-panel h2 { + font-size: clamp(22px, 7vw, 28px); + } + + .boot-panel p { font-size: 13px; } + + .shell { + width: min(100% - 16px, 1160px); + padding-top: 10px; + gap: 8px; + } + + .platform-strip { + gap: 5px; + padding: 6px; + } + + .platform-button { + min-height: 40px; + gap: 6px; + padding: 6px 22px 6px 6px; + } + + .platform-button.active::after { + right: 5px; + width: 16px; + height: 16px; + font-size: 10px; + } + + .mark { + width: 26px; + height: 26px; + font-size: 9px; + border-radius: 7px; + } + + .platform-copy strong { + font-size: 11px; + } + + .switch-panel { + padding: 14px; + gap: 12px; + } + + .panel-head h2 { + font-size: clamp(21px, 6vw, 26px); + } + + .quick-form { + gap: 10px; + } + + .form-section { + padding: 12px; + gap: 10px; + } + + select, + input { + height: 42px; + min-height: 42px; + font-size: 12px; + padding: 0 10px; + padding-right: 36px; + } + + .mode { + height: 42px; + min-height: 42px; + } + + .mode button { + font-size: 12px; + border-radius: 7px; + } + + .control-block { + grid-template-rows: auto 42px minmax(16px, auto); + gap: 6px; + } + + .run-button { + min-height: 50px; + font-size: 15px; + } + + .summary-head { + padding: 14px 14px 12px; + } + + .summary-head h2 { + font-size: 18px; + } + + .summary-list { + padding: 2px 14px 12px; + } + + .summary-actions { + padding: 12px 14px 14px; + } + + .summary-row.pending { + margin: 0 -14px; + padding-inline: 11px 14px; + } + } + + /* XXS: < 375px — safety net for tiny screens */ + @media (max-width: 374px) { + body { + word-break: break-word; + } + + .topbar { + padding: 10px 10px; + } + + h1 { + font-size: 17px; + } + + .brand::before { + width: 30px; + height: 30px; + font-size: 15px; + } + + .brand { + grid-template-columns: 30px minmax(0, 1fr); + column-gap: 6px; + } + + .shell { + width: min(100% - 12px, 1160px); + } + + .platform-strip { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 4px; + padding: 4px; + } + + .platform-button { + min-height: 38px; + padding: 4px 18px 4px 4px; + } + + .switch-panel { + padding: 10px; + } } @media (prefers-reduced-motion: no-preference) {