/* Seder HaYom responsive layout contract v1.0.449 pass1259.
   Responsive changes rearrange the existing DOM only. The normal document
   remains the scroll authority, so the full header scrolls away naturally and
   the established compact sticky header is the only sticky header. */

.jds2-app{
  --jds2-layout-gap:14px;
  --jds2-layout-content-height:calc(var(--jds2-visible-viewport-height,100dvh) - var(--jds2-shared-head-height,0px) - 40px);
}

/* Never turn the route itself into the scroll container. This prevents the
   regular header from becoming an accidental sticky header in landscape. */
.jds2-app [data-jds2-route-panel]:not([hidden]),
.jds2-app .jds2-main-tile,
.jds2-app .jds2-profile-tile{
  max-height:none!important;
  overflow:visible!important;
}

/* Practice, Blessings and Learning keep chronological DOM order. Cards flow
   row-major across the available columns while the page uses one scroll. */
.jds2-app[data-jds2-layout-columns="2"] :is([data-jds2-reading],[data-jds2-blessings],[data-jds2-learning]){
  align-items:start;
  display:grid;
  gap:var(--jds2-layout-gap);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.jds2-app[data-jds2-layout-columns="3"] :is([data-jds2-reading],[data-jds2-blessings],[data-jds2-learning]){
  align-items:start;
  display:grid;
  gap:var(--jds2-layout-gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.jds2-app:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) :is([data-jds2-reading],[data-jds2-blessings],[data-jds2-learning])>:is(.jds2-status,.jds2-read-controls,.jds2-empty,.jds2-next-notice){
  grid-column:1 / -1;
}
.jds2-app:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) :is([data-jds2-reading],[data-jds2-blessings],[data-jds2-learning])>.jds2-current-reading{
  box-sizing:border-box;
  margin:0!important;
  min-width:0;
  width:100%;
}

/* Calendar is one route with three stable logical regions. */
.jds2-calendar-workspace{
  align-items:start;
  display:grid;
  gap:var(--jds2-layout-gap);
  min-width:0;
}
.jds2-calendar-region{
  box-sizing:border-box;
  min-width:0;
}
.jds2-app[data-jds2-page="calendar"] [data-jds2-panel="calendar-details"].is-panel-empty{
  display:none!important;
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="1"] .jds2-calendar-workspace{
  grid-template-columns:minmax(0,1fr);
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="2"] .jds2-calendar-workspace{
  grid-template-columns:minmax(320px,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="2"] [data-jds2-panel="calendar"]{
  grid-column:1;
  grid-row:1 / span 2;
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="2"] [data-jds2-panel="calendar-details"]{
  grid-column:2;
  grid-row:1;
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="2"] [data-jds2-panel="schedule"]{
  grid-column:2;
  grid-row:2;
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="2"] [data-jds2-panel="calendar-details"].is-panel-empty + [data-jds2-panel="schedule"]{
  grid-row:1 / span 2;
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="3"] .jds2-calendar-workspace{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="3"] [data-jds2-panel="calendar"]{grid-column:1;}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="3"] [data-jds2-panel="calendar-details"]{grid-column:2;}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="3"] [data-jds2-panel="schedule"]{grid-column:3;}
.jds2-app[data-jds2-page="calendar"][data-jds2-layout-columns="3"] [data-jds2-panel="calendar-details"].is-panel-empty + [data-jds2-panel="schedule"]{
  grid-column:2 / 4;
}

/* Month view stays square and fully visible. Do not force its parent or route
   to a viewport-height scroll lane. */
.jds2-app[data-jds2-page="calendar"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-calendar-shell{
  aspect-ratio:1 / 1!important;
  block-size:auto!important;
  box-sizing:border-box!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  inline-size:min(100%,var(--jds2-layout-content-height),620px)!important;
  margin:0 auto!important;
  max-inline-size:620px!important;
  overflow:hidden!important;
}
.jds2-app[data-jds2-page="calendar"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-calendar-grid{
  grid-auto-rows:minmax(0,1fr)!important;
  min-height:0!important;
}
.jds2-app[data-jds2-page="calendar"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-calendar-day{
  aspect-ratio:auto!important;
  min-height:0!important;
}
.jds2-app[data-jds2-page="calendar"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-calendar-day-details,
.jds2-app[data-jds2-page="calendar"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-calendar-schedule-title{
  margin-top:0!important;
}

/* Clock production renderer: the live page contains the dial shell and the
   insight tables as siblings. Keep the dial square in the first lane and use
   the remaining width for the actual insight cards. */
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) [data-jds2-clock]{
  align-items:start!important;
  display:grid!important;
  gap:var(--jds2-layout-gap)!important;
  grid-template-columns:minmax(300px,1fr) minmax(0,1fr)!important;
  min-width:0!important;
  width:100%!important;
}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="3"] [data-jds2-clock]{
  grid-template-columns:minmax(320px,1fr) minmax(0,2fr)!important;
}
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-clock-dial-shell{
  box-sizing:border-box!important;
  grid-column:1!important;
  inline-size:100%!important;
  justify-self:center!important;
  margin:0!important;
  max-inline-size:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:0!important;
  width:100%!important;
}
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-dial-frame{
  aspect-ratio:1 / 1!important;
  block-size:auto!important;
  box-sizing:border-box!important;
  inline-size:100%!important;
  max-block-size:none!important;
  max-inline-size:100%!important;
  width:100%!important;
}
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-clock-insights{
  align-content:start!important;
  display:grid!important;
  gap:var(--jds2-layout-gap)!important;
  grid-column:2!important;
  margin:0!important;
  max-width:none!important;
  min-width:0!important;
  overflow:visible!important;
  width:100%!important;
}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="2"] .jds2-clock-insights{
  grid-template-columns:1fr!important;
}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="3"] .jds2-clock-insights{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="3"] .jds2-clock-insights > :first-child{
  grid-column:1 / -1!important;
}
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-clock-insight-card{
  margin:0!important;
  min-width:0!important;
  width:100%!important;
}

/* Clock: a stable square dial plus readable information columns. */
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-clockRuntime-shell{
  align-items:start!important;
  box-sizing:border-box!important;
  display:grid!important;
  gap:var(--jds2-layout-gap)!important;
  height:auto!important;
  margin:0!important;
  max-width:none!important;
  min-height:0!important;
  padding:0!important;
}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="2"] .jds2-clockRuntime-shell{
  grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr)!important;
}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="3"] .jds2-clockRuntime-shell{
  grid-template-columns:minmax(320px,1fr) minmax(0,2fr)!important;
}
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-clockRuntime-dial-card{
  align-items:flex-start!important;
  box-sizing:border-box!important;
  display:flex!important;
  justify-content:center!important;
  min-height:0!important;
  overflow:visible!important;
  padding:0!important;
}
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-clockRuntime-dial-frame{
  aspect-ratio:1 / 1!important;
  block-size:auto!important;
  inline-size:min(100%,var(--jds2-layout-content-height),540px)!important;
  max-block-size:none!important;
  max-inline-size:100%!important;
}
.jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-clockRuntime-panels{
  align-content:start!important;
  box-sizing:border-box!important;
  display:grid!important;
  gap:var(--jds2-layout-gap)!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="2"] .jds2-clockRuntime-panels{grid-template-columns:1fr!important;}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="3"] .jds2-clockRuntime-panels{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="3"] .jds2-clockRuntime-group:first-child{grid-column:1 / -1!important;}

/* Settings are intentionally one centered reading column. Form controls are
   easier to scan and touch in a stable vertical sequence than in a sparse or
   masonry-style landscape arrangement. */
.jds2-app.is-profile-open:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) [data-jds2-profile]{
  margin:0 auto!important;
  max-width:760px!important;
  width:100%!important;
}
.jds2-app.is-profile-open:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-profile-groups{
  display:grid!important;
  gap:var(--jds2-layout-gap)!important;
  grid-template-columns:minmax(0,1fr)!important;
}
.jds2-app.is-profile-open:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) .jds2-profile-group{
  box-sizing:border-box!important;
  margin:0!important;
  min-width:0!important;
  width:100%!important;
}

/* Compact landscape phones never inherit desktop spacing. */
@media (max-height:520px){
  .jds2-app{--jds2-layout-gap:10px;}
  .jds2-app[data-jds2-page="clock"][data-jds2-layout-columns="2"] .jds2-clockRuntime-shell{
    grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr)!important;
  }
}

/* The base route list predates Learning; keep the current route contract complete. */
.jds2-app[data-jds2-page="learning"] [data-jds2-route-panel="learning"]{
  display:block!important;
}

/* Physical width properties are repeated with the standalone-page scope to
   override the accumulated legacy Clock width rules that use !important. */
html body.jds2-standalone-page .jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) [data-jds2-clock] > .jds2-clock-dial-shell{
  inline-size:100%!important;
  margin:0!important;
  max-inline-size:100%!important;
  max-width:100%!important;
  width:100%!important;
}
html body.jds2-standalone-page .jds2-app[data-jds2-page="clock"]:is([data-jds2-layout-columns="2"],[data-jds2-layout-columns="3"]) [data-jds2-clock] > .jds2-clock-dial-shell > .jds2-dial-frame{
  inline-size:100%!important;
  max-inline-size:100%!important;
  max-width:100%!important;
  width:100%!important;
}