/* App shell: page base, five views, floating tab bar, timer slot, shared ui- pieces. */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.4; font-size:16px;
  -webkit-text-size-adjust:100%;
}
[hidden]{ display:none !important; }

.shell{
  display:flex; flex-direction:column; height:100vh; height:100dvh;
  max-width:560px; margin:0 auto;
}
.shell-scroll{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:max(28px, env(safe-area-inset-top)) 16px 20px;
}

/* Hidden slot above the tab bar for the workout timer pill (built in Step C). */
.shell-timer-slot{ margin:0 16px 8px; }

.shell-tabbar{
  display:flex; margin:8px 16px max(12px, env(safe-area-inset-bottom));
  padding:8px 6px; background:var(--surface); border-radius:28px;
}
.shell-tab{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 0 4px; background:none; border:0; cursor:pointer;
  font-family:inherit; color:var(--slate); -webkit-tap-highlight-color:transparent;
}
.shell-tab-ico{
  width:56px; height:32px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
}
.shell-tab-ico svg{ width:24px; height:24px; display:block; }
.shell-tab-label{ font-size:11px; font-weight:600; color:var(--slate); }
.shell-tab[aria-current="page"] .shell-tab-ico{ background:var(--paprika); color:var(--ink); }
.shell-tab[aria-current="page"] .shell-tab-label{ font-weight:700; color:var(--ink); }

/* Shared screen header and placeholder pieces (ui-) */
.ui-header{ padding:0 8px 4px; display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.ui-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
}
.ui-title{ margin:0; font-size:32px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; }
.ui-card{ background:var(--surface); border-radius:28px; padding:22px; }
.ui-lede{ margin:0; font-size:17px; font-weight:500; color:var(--slate); }