/* A quiet desk: navigation above, companion above the clock, garden beside the plan. */
.shell { display: block; background: var(--ink); }
.app-header { position: relative; min-height: 76px; display: flex; justify-content: center; align-items: center; padding: 12px 24px; }
.app-header .nav-list { position: relative; inset: auto; display: flex; gap: 10px; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.app-header .nav-button { flex: none; width: 46px; height: 46px; min-height: 46px; padding: 12px; justify-content: center; border-radius: 16px; color: #bfc7c1; }
.app-header .nav-button > span { display: none; }
.app-header .nav-button svg { width: 22px; height: 22px; }
.app-header .nav-button[aria-current='page'] { color: #fff; }
.app-header .nav-indicator { background: none; border-radius: 0; color: var(--paper); z-index: 2; }
.app-header .nav-indicator svg { display: block; width: 100%; height: 100%; }
.app-header .nav-button:focus-visible { outline-color: var(--paper); }
@media(hover:hover) { .app-header .nav-button:hover { color: #fff; background: #ffffff0c; } }
.workspace { background: var(--paper); border-radius: 26px 26px 0 0; min-height: calc(100dvh - 120px); }
.topbar { display: none; }
/* GSAP owns this transform; a CSS transition would lag behind each frame. */
.focus-dashboard .daily-completion > span { transition: none; }
.view-overview { min-height: calc(100dvh - 120px); max-width: 1240px; margin: auto; padding: 28px 42px; align-content: center; }
.focus-dashboard { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,410px); grid-template-areas: 'primary plan'; gap: 44px; align-items: center; }
.focus-primary { gap: 18px; }
.focus-plan { grid-area: plan; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.focus-dashboard .today-widget { grid-area: auto; order: 0; width: 100%; padding: 22px; }
.focus-dashboard .overview-heading { margin-bottom: 12px; }
.focus-dashboard .clock-date { margin-top: 12px; }
.focus-dashboard .weather-widget { padding: 12px 16px; }
.focus-dashboard .quote-widget { padding: 16px 16px 16px 22px; }
.focus-dashboard .quote-widget .icon-button { flex: 0 0 44px; background: #ffffff70; }
.focus-dashboard .quote-widget blockquote { font-size: 1rem; line-height: 1.55; }
.study-friend { position: relative; inset: auto; width: 164px; height: 150px; margin: 0 auto 12px; z-index: auto; }
.study-friend::before { display: none; }
.friend-stage { inset: 0; }
.friend-status { bottom: 0; }
.friend-toggle { background: var(--lilac); }
.companion-title { display: none; }
.overview-garden-slot .garden-companion { position: relative; inset: auto; display: block; width: 100%; height: 104px; padding: 22px; border-radius: 24px; background: #e5f2df; text-align: left; z-index: auto; }
.overview-garden-slot .garden-companion::before { display: none; }
.overview-garden-slot .garden-current { left: auto; right: 8px; bottom: 2px; width: 104px; height: 104px; transform: none; }
.overview-garden-slot .companion-title { display: block; margin-right: 90px; font-size: .9375rem; font-weight: 650; color: #304630; }
.overview-garden-slot .companion-label { position: static; display: block; margin-top: 6px; padding: 0; border-radius: 0; background: none; color: #53674f; font-size: .8125rem; text-align: left; }
.app-main:not(.view-overview) { padding-top: 32px; }
@media(min-width:701px) and (max-height:800px) {
  .view-overview { padding-block: 14px; }
  .study-friend { height: 112px; margin-bottom: 8px; }
  .focus-primary { gap: 16px; }
  .focus-dashboard .digital-clock { font-size: 5.5rem; }
  .focus-dashboard .overview-tasks .focus-task { padding-block: 3px; }
  .overview-garden-slot .garden-companion { height: 88px; padding-block: 16px; }
  .overview-garden-slot .garden-current { width: 88px; height: 88px; }
}
@media(min-width:701px) and (max-width:1000px) {
  .view-overview { padding-inline: 24px; }
  .focus-dashboard { grid-template-columns: minmax(0,1fr) minmax(290px,340px); gap: 24px; }
  .focus-dashboard .digital-clock { font-size: 4.5rem; }
  .focus-dashboard .today-widget { padding: 19px; }
  .focus-dashboard .clock-date { flex-direction: column; gap: 3px; }
}
@media(max-width:700px) {
  .app-header { min-height: 66px; padding: 9px 8px; }
  .app-header .nav-list { gap: 4px; }
  .app-header .nav-button { width: 44px; height: 44px; min-height: 44px; padding: 11px; border-radius: 14px; }
  .workspace { height: calc(100dvh - 88px); min-height: 0; border-radius: 22px 22px 0 0; }
  body[data-view='overview'] .workspace { padding-bottom: 0; }
  .view-overview { min-height: 0; padding: 22px 18px; }
  .focus-dashboard { display: flex; gap: 24px; }
  .focus-plan { width: 100%; gap: 14px; }
  .focus-primary { gap: 18px; width: 100%; }
  .study-friend { width: 150px; height: 130px; margin-bottom: 8px; }
  .focus-dashboard .digital-clock { font-size: clamp(3.8rem,18vw,5rem); }
  .focus-dashboard .clock-date { flex-direction: row; flex-wrap: wrap; }
  .focus-dashboard .quote-widget { padding: 16px; }
  .focus-dashboard .today-widget { padding: 19px; }
  .overview-garden-slot .garden-companion { height: 98px; }
}