/* The app's layout, matched to the approved boards. */

/* Liquid glass on the timer, clock and privacy lock. */
html body.student-experience #app-shell#app-shell[data-preview-shell=true] :is(.preview-status,.preview-actions,.preview-status-actions) :is([data-live-focus-button],.mc-live-header,[data-workspace-lock]),html body.student-experience #app-shell#app-shell[data-preview-shell=true] :is(.mc-app-weather__focus,.mc-live-header,[data-workspace-lock]){background:linear-gradient(165deg,rgba(255,255,255,.74),rgba(255,255,255,.3))!important;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 8px 22px rgba(5,20,92,.14),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3)!important;color:#0b1a3d!important}
html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-active-view=focus] .preview-status :is([data-live-focus-button],.mc-live-header,[data-workspace-lock]),html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-active-view=focus] :is(.mc-app-weather__focus,.mc-live-header,[data-workspace-lock]){background:linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.06))!important;border-color:rgba(255,255,255,.3)!important;box-shadow:0 8px 22px rgba(2,8,40,.32),inset 0 1px 0 rgba(255,255,255,.34)!important;color:#fff!important}
html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-active-view=focus] .mc-live-header :is(time,button,summary,span){color:#fff!important}
@media (prefers-reduced-transparency:reduce){html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-status :is([data-live-focus-button],.mc-live-header,[data-workspace-lock]),html body.student-experience #app-shell#app-shell[data-preview-shell=true] :is(.mc-app-weather__focus,.mc-live-header,[data-workspace-lock]){background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-active-view=focus] :is(.mc-app-weather__focus,.mc-live-header,[data-workspace-lock]){background:#16246e!important}}

/* Today: the top card holds the next step and the start button. The rest folds away. */
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .hero-more{grid-column:2;order:9;margin-top:2px;color:#dce3ff;font-size:13.5px;font-weight:700}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .hero-more>summary{min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .hero-more>summary::-webkit-details-marker{display:none}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .hero-more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 180ms ease}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .hero-more[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .hero-more[open]>:not(summary){margin-top:8px}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .hero-more:not(:has(>:not(summary):not([hidden]))){display:none}

@media (min-width:1000px){
  /* Today: the top card and the column beside it end together. */
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-layout>.today-next{align-self:stretch!important;height:auto!important}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-layout>.today-dashboard__schedule{align-self:stretch!important;height:auto!important}
  /* Plan: both columns end on the same line. The week chart takes up the difference. */
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .planner-workspace{align-items:stretch!important}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-side{display:flex!important;flex-direction:column;align-self:stretch!important;height:auto!important}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-side>.preview-plan-week{flex:1 1 auto;display:flex;flex-direction:column;height:auto!important;min-height:0}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-side>.preview-plan-week>.preview-plan-week-chart{flex:1 1 auto;height:auto!important;min-height:240px}
}

/* Plan: the board's Coming soon card. */
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-soon{display:flex;flex-direction:column;gap:10px;padding:14px 18px;border-radius:24px;background:var(--board-card,#f5fcffdc);border:1px solid var(--board-line,#ffffffd9);box-shadow:0 8px 24px rgba(5,20,92,.08)}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-soon>div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-soon strong{min-width:0;font-size:14.5px;font-weight:800;color:var(--board-ink,#102044)}
html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-soon span{flex:none;padding:3px 10px;border-radius:999px;background:#c7fce0;color:#0b5a3d;font-size:12px;font-weight:800}