/* Motion, reduced motion and the narrow-desktop and phone breakpoints. */

/* Motion */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes draw-loop { 0% { stroke-dashoffset: 260; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -260; } }
@keyframes pop { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes beat { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes fill-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pulse .line { stroke-dashoffset: 0; }
}

/* Narrower desktops: cards stack in two columns or one */
@media (max-width: 1180px) {
  .s-3, .s-4 { grid-column: span 6; }
  .s-5, .s-6, .s-7, .s-8, .s-9 { grid-column: 1 / -1; }
  .board-layout { grid-template-columns: minmax(0, 1fr); }
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phone: the rail becomes a top bar plus a tab bar */
@media (max-width: 760px) {
  .app { display: block; background: var(--ground); }
  .rail { display: none; }
  .mtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .mtop img { display: block; width: 104px; height: auto; }
  .mtop-site { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px 10px; }
  .tabbar a { flex: 1 1 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-decoration: none; border-radius: 10px; position: relative; }
  .tabbar a[aria-current="page"] { color: var(--blue-deep); background: var(--blue-8); }
  .tabbar a[aria-current="page"] .i { color: var(--txm-blue); }
  .tabbar .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .main { padding: 18px 16px 104px; }
  .wrap { gap: 18px; }
  .title { font-size: 32px; }
  .stat { font-size: 52px; }
  .page-head { align-items: flex-start; }
  .page-head .actions { width: 100%; }
  .grid { gap: 14px; }
  .s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9 { grid-column: 1 / -1; }
  .card { padding: 18px; }
  .btn-sm { min-height: 44px; }
  .cal, .cal-head { gap: 4px; }
  .day { min-height: 0; padding: 5px 3px; gap: 4px; border-radius: 9px; }
  .day-num { font-size: 13px; justify-content: center; }
  .day-num small { display: none; }
  .req { min-height: 26px; padding: 0 3px; font-size: 11px; justify-content: center; border-radius: 6px; }
  .req .req-word { display: none; }
  .shift { min-height: 26px; padding: 0 3px; font-size: 11px; justify-content: center; border-radius: 6px; }
  .shift > span { display: none; }
  .req b { font-size: 10.5px; }
  .savebar { bottom: 84px; }
  .toast { bottom: 96px; }
  .drawer { padding: 20px; }
  .only-desk { display: none; }
  .only-phone { display: flex; }
  .who-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .journey { grid-template-columns: minmax(0, 1fr); }
  .li { flex-wrap: wrap; }
  .li > .actions { flex: 1 1 100%; justify-content: flex-end; }
  .hero-date { font-size: 40px; }
  .hero-helix { display: none; }
  .health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-1 { order: 1; } .ph-2 { order: 2; } .ph-3 { order: 3; } .ph-4 { order: 4; } .ph-5 { order: 5; }
}