:root {
  --desktop-rail: 258px;
  --desktop-header-height: 86px;
}

body:not(.alarm-mobile) .app {
  display: grid !important;
  grid-template-columns: var(--desktop-rail) minmax(0, 1fr) !important;
  grid-template-rows: 100dvh;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: clip;
}

body.oia-desktop {
  height: 100dvh;
  overflow: hidden;
}

body:not(.alarm-mobile) .side {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: var(--desktop-rail);
  padding: 24px 18px;
  overflow-y: auto;
  align-self: start;
}

body:not(.alarm-mobile) .botanical-layer {
  left: var(--desktop-rail);
}

body:not(.alarm-mobile) .side .brand {
  padding-bottom: 22px;
}

body:not(.alarm-mobile) .side .nav {
  gap: 7px;
}

body:not(.alarm-mobile) .side .nav button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 49px;
  padding: 8px 12px;
  border: 1px solid transparent;
}

body:not(.alarm-mobile) .desktop-nav-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(0,55,24,.16));
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 7px 16px rgba(0,35,13,.13);
  color: #fff;
}

body:not(.alarm-mobile) .side .nav button.active {
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(229,255,193,.24), rgba(255,255,255,.09));
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 13px 28px rgba(0,31,12,.18);
}

body:not(.alarm-mobile) .side .nav button.active .desktop-nav-icon {
  color: #173c25;
  background: linear-gradient(145deg, #f3ffd8, #9eea55 54%, #37a747);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.72), inset 0 -4px 8px rgba(10,85,29,.22), 0 7px 18px rgba(105,232,75,.26);
}

body:not(.alarm-mobile) .main {
  grid-column: 2;
  grid-row: 1;
  max-width: 1660px;
  min-width: 0;
  width: 100%;
  height: 100dvh;
  margin: 0 auto;
  padding: 18px 34px 54px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body:not(.alarm-mobile) .panel,
body:not(.alarm-mobile) .panel.active {
  min-width: 0;
  width: 100%;
}

body:not(.alarm-mobile) .panel.active {
  display: block;
}

body:not(.alarm-mobile) .panel > :not(dialog),
body:not(.alarm-mobile) .card,
body:not(.alarm-mobile) .progress-section,
body:not(.alarm-mobile) .training-dashboard {
  min-width: 0;
  max-width: 100%;
}

body:not(.alarm-mobile) .top-nav {
  display: none;
}

body:not(.alarm-mobile) .desktop-context-bar {
  position: sticky;
  z-index: 30;
  top: 12px;
  min-height: var(--desktop-header-height);
  display: grid;
  grid-template-columns: 58px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(8,79,36,.78), rgba(5,49,24,.62));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 18px 42px rgba(0,31,12,.20);
  backdrop-filter: blur(24px) saturate(1.25);
  width: 100%;
}

body:not(.alarm-mobile) .desktop-side-account {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 104px;
  width: calc(100% - 36px);
  min-height: 43px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.11);
  color: #f3ffed;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

body:not(.alarm-mobile) .desktop-side-account:hover {
  background: rgba(255,255,255,.2);
}

body:not(.alarm-mobile) .reference-home {
  min-height: max(620px, calc(100vh - 150px));
}

body:not(.alarm-mobile) .reference-art {
  min-height: max(620px, calc(100vh - 150px));
}

body:not(.alarm-mobile) .training-calendar,
body:not(.alarm-mobile) .body-chart-table,
body:not(.alarm-mobile) .progress-dashboard,
body:not(.alarm-mobile) .nutrition-energy-dashboard {
  width: 100%;
  min-width: 0;
}

body:not(.alarm-mobile) .training-calendar {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

body:not(.alarm-mobile) .panel > .top:first-child {
  align-items: flex-end;
  flex-wrap: wrap;
}

body:not(.alarm-mobile) .desktop-home-button {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,25,10,.24);
}

body:not(.alarm-mobile) .desktop-home-button img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

body:not(.alarm-mobile) .desktop-home-button.is-home {
  opacity: .64;
  cursor: default;
}

body:not(.alarm-mobile) .desktop-context-title {
  min-width: 0;
}

body:not(.alarm-mobile) .desktop-context-title small,
body:not(.alarm-mobile) .desktop-context-title strong,
body:not(.alarm-mobile) .desktop-context-meta span,
body:not(.alarm-mobile) .desktop-context-meta small {
  display: block;
}

body:not(.alarm-mobile) .desktop-context-title small {
  color: rgba(239,255,231,.65);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:not(.alarm-mobile) .desktop-context-title strong {
  margin-top: 3px;
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -.035em;
}

body:not(.alarm-mobile) .desktop-context-meta {
  color: #f4ffe9;
  text-align: right;
}

body:not(.alarm-mobile) .desktop-context-meta span {
  font-size: .8rem;
  font-weight: 850;
  text-transform: capitalize;
}

body:not(.alarm-mobile) .desktop-context-meta small {
  margin-top: 4px;
  color: rgba(239,255,231,.62);
  font-size: .65rem;
}

body:not(.alarm-mobile) .desktop-sequence {
  display: flex;
  gap: 7px;
}

body:not(.alarm-mobile) .desktop-sequence button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 8px 16px rgba(0,28,11,.16);
}

body:not(.alarm-mobile) .panel > .top:first-child {
  margin-bottom: 18px;
  padding: 0 4px;
}

body:not(.alarm-mobile) .panel > .top:first-child h1 {
  color: #fff;
  font-size: clamp(2rem, 3vw, 3.25rem);
  text-shadow: 0 5px 22px rgba(0,30,11,.22);
}

body:not(.alarm-mobile) .panel > .top:first-child p {
  color: rgba(242,255,235,.72);
}

@media (max-width: 1080px) and (min-width: 701px) {
  :root { --desktop-rail: 92px; }
  body:not(.alarm-mobile) .side .brand span,
  body:not(.alarm-mobile) .side .nav button > span:last-child { display: none; }
  body:not(.alarm-mobile) .side .nav button { grid-template-columns: 1fr; justify-items: center; padding: 7px; }
  body:not(.alarm-mobile) .side .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  body:not(.alarm-mobile) .side .brand img { width: 50px; height: 50px; }
  body:not(.alarm-mobile) .desktop-context-meta { display: none; }
  body:not(.alarm-mobile) .desktop-context-bar { grid-template-columns: 58px 1fr auto; }
  body:not(.alarm-mobile) .desktop-side-account { padding: 0; font-size: 0; }
  body:not(.alarm-mobile) .desktop-side-account::before { content: "CP"; font-size: .72rem; }
}

@media (max-width: 700px) {
  body:not(.alarm-mobile) .desktop-context-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.alarm-mobile) .desktop-context-bar,
  body:not(.alarm-mobile) .desktop-nav-icon { transition: none !important; }
}

/* Persistent, transparent desktop menu control. */
body:not(.alarm-mobile) .desktop-menu-toggle {
  position: fixed;
  z-index: 50;
  top: 24px;
  left: calc(var(--desktop-rail) + 2px);
  width: 30px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #063d25;
  cursor: pointer;
}
.desktop-menu-toggle svg { width: 24px; height: 24px; }
body:not(.alarm-mobile) .desktop-menu-toggle:focus-visible { outline: 2px solid #063d25; outline-offset: 2px; }
body.desktop-menu-collapsed:not(.alarm-mobile) { --desktop-rail: 0px; }
body.desktop-menu-collapsed:not(.alarm-mobile) .side { visibility: hidden; overflow: hidden; padding: 0; }
body.desktop-menu-collapsed:not(.alarm-mobile) .main { max-width: none; }
body.alarm-mobile .desktop-menu-toggle { display: none; }

/* Fit each desktop page to the available window. */
body.oia-desktop:not(.alarm-mobile) .main {
  max-width: none;
  padding: 18px 34px;
  overflow: hidden;
}
body.oia-desktop:not(.alarm-mobile) #today.active {
  height: 100%;
  display: grid;
  place-items: start center;
}
body.oia-desktop:not(.alarm-mobile) .reference-home {
  width: min(100%, calc((100dvh - 36px) * 1.5));
  height: auto;
  min-height: 0;
  max-height: 100%;
  aspect-ratio: 3 / 2;
}
body.oia-desktop:not(.alarm-mobile) .reference-art {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  animation: none;
}

body.oia-desktop:not(.alarm-mobile) #today.active { height: auto; display: block; }
body.oia-desktop:not(.alarm-mobile) .reference-home { width: 100%; max-height: none; }
body.oia-desktop:not(.alarm-mobile) .ring-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.oia-desktop .side .desktop-brand-home {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

body:not(.alarm-mobile) .side .nav button .desktop-nav-medallion {
  border: 0;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 25, 10, .22);
}
.desktop-nav-medallion svg { display: block; width: 100%; height: 100%; }

/* Personal profile above the artwork, independent of the collapsible rail. */
body.oia-desktop:not(.alarm-mobile) .main { padding-top: 64px; }
body.oia-desktop:not(.alarm-mobile) .desktop-profile-bar {
  position: fixed;
  z-index: 35;
  top: 16px;
  right: 34px;
  left: calc(var(--desktop-rail) + 34px);
  height: 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
}
body.oia-desktop .desktop-profile-button {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 360px;
  flex-shrink: 0;
  zoom: .5;
  min-height: 62px;
  padding: 6px 18px 6px 8px;
  border: 2px solid #9cdb49;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8f9 39%, #d4dcdf 55%, #eef2f3 100%);
  color: #1c3440;
  box-shadow: 0 0 0 3px rgba(177, 230, 93, .17), inset 0 1px 2px #fff, 0 5px 14px rgba(0, 30, 12, .2);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: none;
}
body.oia-desktop .desktop-profile-button:hover { background: linear-gradient(180deg, #fff, #e0e8eb 60%, #f7fafb); }
body.oia-desktop .desktop-profile-button .avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid #a6b5bc;
  background: linear-gradient(145deg, #526b78, #243c48);
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 2px 4px rgba(20,40,50,.18);
}
body.oia-desktop .desktop-profile-button > div:last-child { min-width: 0; }
body.oia-desktop .desktop-profile-button b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.oia-desktop .desktop-profile-button small { display: block; margin-top: 3px; color: #536e7a !important; font-size: 12px; }
body.oia-desktop .desktop-profile-button .profile-cloud-state { display: none; }
body.oia-desktop .desktop-profile-button::after { content: "⌄"; margin-left: auto; color: #536e7a; }
body.oia-desktop .desktop-side-account { bottom: 24px; }
body.oia-desktop .desktop-menu-toggle { top: 29px; }
body.alarm-mobile .desktop-profile-bar { display: none; }

body.oia-desktop .desktop-menu-toggle { top: 72px; }

body.oia-desktop .desktop-profile-account {
  position: static;
  margin-top: 18px;
  padding: 11px 24px;
  border: 1px solid #91ca4a;
  border-radius: 999px;
  background: #0b5226;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body:not(.alarm-mobile) .side .nav button .desktop-nav-alarm {
  position: relative;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(#f32936, #ff9718, #77cf2f, #0786e8, #f32936);
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.65), 0 0 7px rgba(122,220,255,.5);
}
.desktop-nav-alarm::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff, #e3f7ff 20%, #1d5e8a 75%);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.7);
}

/* Desktop alarm: two modules beside the preview, settings across the page. */
body.oia-desktop:not(.alarm-mobile) #alarm.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 14px 20px;
  align-items: start;
  animation: none;
}
body.oia-desktop:not(.alarm-mobile) #alarm > .top,
body.oia-desktop:not(.alarm-mobile) #alarm > .clock-tabs { grid-column: 1 / -1; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library { grid-column: 1; grid-row: 3; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .event-reminders { grid-column: 1; grid-row: 4; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-dashboard { display: contents; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm {
  grid-column: 2;
  grid-row: 3 / 5;
  width: 100%;
  height: 100%;
  min-height: 340px;
  max-width: none;
  margin: 0;
  padding: 26px 12px 12px;
  border-width: 7px;
  border-radius: 34px;
}
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm::before { width: 76px; height: 15px; top: 7px; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm-time { margin-top: 10px; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm-time strong { font-size: 2.8rem; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm .alarm-o { width: 120px; height: 120px; margin: 22px auto 16px; display: block; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm .alarm-o::after { inset: 24px; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm .alarm-o span { font-size: 2rem; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card {
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 16px;
  padding: 18px;
  align-items: start;
}
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > small { grid-column: 1 / -1; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-identity { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-time { grid-column: 1; grid-row: 3; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-days { grid-column: 1; grid-row: 4; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-options { grid-column: 1; grid-row: 5; grid-template-columns: 1fr; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-ramp { grid-column: 1; grid-row: 6; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-volume { grid-column: 1; grid-row: 7; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-voice { grid-column: 4; grid-row: 2 / 4; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .morning-content-options { grid-column: 2 / 4; grid-row: 2 / 8; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
body.oia-desktop:not(.alarm-mobile) #alarm .morning-content-heading,
body.oia-desktop:not(.alarm-mobile) #alarm .morning-order-note { grid-column: 1 / -1; }
body.oia-desktop:not(.alarm-mobile) #alarm .quote-source-picker { grid-column: 1; }
body.oia-desktop:not(.alarm-mobile) #alarm .joke-category-picker { grid-column: 2; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .event-content-options { grid-column: 4; grid-row: 4 / 8; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-actions { grid-column: 1 / -1; grid-row: 8; margin: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm .stopwatch-panel,
body.oia-desktop:not(.alarm-mobile) #alarm .timer-panel { grid-column: 1 / -1; }

body.oia-desktop:not(.alarm-mobile) #alarm .alarm-dashboard[hidden] { display: none; }

/* Readable alarm controls with vertical access to every setting. */
body.oia-desktop.desktop-alarm-scroll:not(.alarm-mobile) .main { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
body.oia-desktop:not(.alarm-mobile) #alarm { font-size: 16px; line-height: 1.5; color: #173e56; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(small, label, p) { font-size: 14px; line-height: 1.5; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(h2, h3) { font-size: 22px; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { font-size: 16px; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(select, input[type="text"], input[type="date"]) { min-height: 46px; width: 100%; }
body.oia-desktop:not(.alarm-mobile) #alarm button:not(.alarm-o) { min-height: 42px; }
body.oia-desktop:not(.alarm-mobile) #alarm input[type="time"] { font-size: 40px; min-width: 0; }
body.oia-desktop:not(.alarm-mobile) #alarm input[type="range"] { width: 100%; min-height: 30px; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(.alarm-option, .alarm-ramp, .alarm-volume, .alarm-voice, .morning-content-options, .event-content-options) { padding: 16px; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(.alarm-card, .alarm-library, .event-reminders) { color: #173e56; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding: 24px; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .morning-content-options { grid-column: 2; grid-row: 2 / 10; grid-template-columns: 1fr; gap: 16px; }
body.oia-desktop:not(.alarm-mobile) #alarm .morning-content-options > * { grid-column: 1; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .alarm-voice { grid-column: 1; grid-row: 8; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > .event-content-options { grid-column: 1; grid-row: 9; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-actions { grid-row: 10; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(.morning-content-toggle, .quote-source-option) { min-height: 52px; gap: 12px; }
body.oia-desktop:not(.alarm-mobile) #alarm :is(.alarm-voice, .alarm-option) select { max-width: 100%; }
body.oia-desktop:not(.alarm-mobile) #alarm .event-reminder-heading { grid-template-columns: 1fr; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm { height: 440px; min-height: 0; align-self: start; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library-head h2 { color: #173e56; }
@media (max-width: 1100px) {
  body.oia-desktop:not(.alarm-mobile) #alarm.active { grid-template-columns: minmax(0, 1fr) 220px; }
  body.oia-desktop:not(.alarm-mobile) #alarm .alarm-list { grid-template-columns: 1fr; }
}

body.oia-desktop:not(.alarm-mobile) #alarm .alarm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-list :is(b, strong) { font-size: 16px; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-list small { font-size: 14px; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-time input[type="time"] { font-size: 40px; }
body.oia-desktop:not(.alarm-mobile) #alarm .morning-content-toggle small { font-weight: 400; letter-spacing: normal; color: #536e7a; }

/* Pages reflow at readable size; scrolling follows their natural height. */
body.oia-desktop:not(.alarm-mobile) .main {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  container-type: inline-size;
  padding-inline: clamp(16px, 2vw, 34px);
}
body.oia-desktop:not(.alarm-mobile) .panel { min-width: 0; transform: none; }
body.oia-desktop:not(.alarm-mobile) .panel :is(input, select, textarea) { max-width: 100%; }
body.oia-desktop:not(.alarm-mobile) .panel :is(.card, article, section) { min-width: 0; }
body.oia-desktop:not(.alarm-mobile) .reference-home { aspect-ratio: 1584 / 993; }
body.oia-desktop:not(.alarm-mobile) #alarm.active { grid-template-columns: minmax(0, 1fr) clamp(220px, 22cqw, 300px); }
@container (max-width: 1000px) {
  .panel :is(.grid, .home-bottom, .progress-overview, .trend-card, .photo-measure-grid, .nutrition-energy-dashboard) { grid-template-columns: 1fr !important; }
  .panel :is(.composition-grid, .body-core-grid, .profile-summary, .stats) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.oia-desktop:not(.alarm-mobile) #alarm .alarm-list { grid-template-columns: 1fr; }
  body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library-head { flex-wrap: wrap; gap: 12px; }
}
@container (max-width: 720px) {
  body.oia-desktop:not(.alarm-mobile) #alarm.active { grid-template-columns: minmax(0, 1fr); }
  body.oia-desktop:not(.alarm-mobile) #alarm :is(.alarm-library, .event-reminders, .phone-alarm, .alarm-card) { grid-column: 1; grid-row: auto; }
  body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm { width: min(100%, 280px); height: 440px; justify-self: center; }
  body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card { grid-template-columns: minmax(0, 1fr); }
  body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card > * { grid-column: 1; grid-row: auto; }
  body.oia-desktop:not(.alarm-mobile) #alarm .event-reminder-heading { grid-template-columns: minmax(0, 1fr); }
  body.oia-desktop:not(.alarm-mobile) .ring-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ring-readout small { display: none; }
  .ring-readout { padding: 5px 7px; }
  .ring-readout strong { font-size: 12px; }
  .ring-readout span { font-size: 9px; }
  .reference-weather { font-size: 12px; padding: 7px 10px; }
  .panel :is(.training-overview, .progress-head, .progress-section-head, .nutrition-settings-head) { display: flex; flex-wrap: wrap; gap: 12px; }
  .panel :is(.form-grid, .training-form-grid, .profile-summary, .composition-grid, .photo-guidance) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@container (max-width: 440px) {
  .panel :is(.form-grid, .training-form-grid, .profile-summary, .composition-grid, .body-core-grid, .stats, .measure-list) { grid-template-columns: minmax(0, 1fr) !important; }
  .panel .progress-actions { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  body.oia-desktop { --desktop-rail: 72px; }
  body.oia-desktop .side { position: relative; inset: auto; height: 100dvh; padding: 18px 6px; border-radius: 0; }
  body.oia-desktop .side .nav { display: grid; grid-template-columns: 1fr; }
  body.oia-desktop .side .nav button { grid-template-columns: 1fr; justify-items: center; padding: 8px; }
  body.oia-desktop .side .nav button::before, body.oia-desktop .side .brand::after { display: none; }
  body.oia-desktop .side .nav button > span:last-child, body.oia-desktop .side .brand span { display: none; }
  body.oia-desktop .side .brand { display: flex !important; justify-content: center; padding: 0 0 20px; }
  body.oia-desktop .side .brand img { width: 44px; height: 44px; }
  body.desktop-menu-collapsed { --desktop-rail: 0px; }
}

/* Alarm overview: scheduled alarms, contextual reminders, then phone preview. */
body.oia-desktop:not(.alarm-mobile) #alarm.active { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 250px; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library { grid-column: 1; grid-row: 3; }
body.oia-desktop:not(.alarm-mobile) #alarm .event-reminders { grid-column: 2; grid-row: 3; }
body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm { grid-column: 3; grid-row: 3; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card { grid-column: 1 / -1; grid-row: 4; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library-head > div { flex: 1 1 100%; }
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library-head .alarm-test {
  padding: 12px 18px;
  border: 1px solid #1680ad;
  border-radius: 999px;
  background: #e5f5fc;
  color: #135575;
  font-weight: 800;
  cursor: pointer;
}
body.oia-desktop:not(.alarm-mobile) #alarm .alarm-list { grid-template-columns: 1fr; }
@container (max-width: 1150px) {
  body.oia-desktop:not(.alarm-mobile) #alarm.active { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.oia-desktop:not(.alarm-mobile) #alarm .phone-alarm { grid-column: 2; grid-row: 4; justify-self: center; width: 250px; }
  body.oia-desktop:not(.alarm-mobile) #alarm .alarm-card { grid-row: 5; }
}
@container (max-width: 720px) {
  body.oia-desktop:not(.alarm-mobile) #alarm.active { grid-template-columns: minmax(0, 1fr); }
  body.oia-desktop:not(.alarm-mobile) #alarm :is(.alarm-library, .event-reminders, .phone-alarm, .alarm-card) { grid-column: 1; grid-row: auto; }
}

/* Only show the home alarm action while an alarm is active. */
.home-weather-actions { position: absolute; top: 5%; right: 4%; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
body:not(.alarm-mobile) .home-weather-actions .reference-weather { position: static; }
.home-alarm-stop { min-height: 44px; padding: 10px 20px; border: 2px solid #fff; border-radius: 999px; background: #a52c30; color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(0,30,12,.2); }
.home-alarm-stop[hidden], body.alarm-mobile .home-alarm-stop { display: none; }

body.oia-desktop:not(.alarm-mobile) #alarm .alarm-library-head .alarm-test[aria-pressed="true"] { background: #a52c30; color: #fff; border-color: #a52c30; }