/* Nursing Department Days - Apple-style type + pink glass layer.
   Loaded AFTER style.css. Pure override: delete this file (and its <link>) to revert. */

/* ---------- Typography: San Francisco on Apple devices ----------
   SF Pro cannot be self-hosted or served from the web (Apple's licence limits it to Apple
   platforms). `-apple-system` resolves to SF Pro Text / SF Pro Display automatically on
   iPhone, iPad and Mac, switching optical size by font size. Other devices fall back cleanly. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
             "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue",
                  "Segoe UI", Roboto, system-ui, sans-serif;

  --glass-bg: rgba(255, 255, 255, .42);
  --glass-bg-strong: rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-edge: rgba(255, 182, 208, .55);
  --glass-shadow: 0 8px 28px rgba(214, 90, 140, .16), 0 1px 0 rgba(255, 255, 255, .8) inset;
  --glass-blur: blur(18px) saturate(170%);
  --pink-ink: #5b2340;
}

html { -webkit-text-size-adjust: 100%; }

html body, html body button, html body input, html body select, html body textarea {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-synthesis: none;
}
html body h1, html body h2, html body h3, html body .card-title, html body .big, html body .stat {
  font-family: var(--font-display);
  letter-spacing: -.022em;          /* SF Display tracking at large sizes */
  font-feature-settings: "kern", "liga";
}
html body h1 { font-weight: 700; letter-spacing: -.03em; }
html body .card-title { font-weight: 600; }
html body time, html body .num, html body .stat, html body .big { font-variant-numeric: tabular-nums; }

/* ---------- Background: soft static pink wash (cheap to paint) ---------- */
html body { background: #ffeaf2; color: var(--pink-ink); }
html body .bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 12% 8%,  rgba(255, 160, 200, .75), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 22%, rgba(255, 205, 225, .85), transparent 62%),
    radial-gradient(70vmax 70vmax at 30% 100%, rgba(244, 143, 187, .55), transparent 65%),
    linear-gradient(160deg, #fff3f8 0%, #ffe3ee 100%);
  transform: translateZ(0);          /* own layer: blur behind cards doesn't repaint it */
}

/* ---------- Glass cards ---------- */
html body .card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.62), var(--glass-bg));
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  contain: layout paint;             /* limits repaint to the card */
}
/* thin pink rim light along the top edge */
html body .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-edge), transparent 38%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}
@media (hover: hover) {
  html body .card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(214, 90, 140, .22), 0 1px 0 rgba(255,255,255,.85) inset; }
}

/* ---------- Floating tab bar + header ---------- */
html body .tabbar {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(214, 90, 140, .22), 0 1px 0 rgba(255,255,255,.85) inset;
}
html body .tabbar .pill {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,205,225,.75));
  box-shadow: 0 2px 10px rgba(214, 90, 140, .25);
  transition: transform .35s cubic-bezier(.3,1.2,.4,1), width .35s cubic-bezier(.3,1.2,.4,1);
}
html body .icon-btn {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(214, 90, 140, .15);
}

/* ---------- Buttons & inputs ---------- */
html body .btn.primary {
  background: linear-gradient(180deg, #ff8fb8, #f0628f);
  color: #fff; border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 6px 16px rgba(240, 98, 143, .35), 0 1px 0 rgba(255,255,255,.5) inset;
}
html body .btn.secondary {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
}
html body .btn { transition: transform .15s ease, filter .15s ease; }
html body .btn:active { transform: scale(.97); filter: brightness(.97); }
html body input, html body select, html body textarea {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255, 182, 208, .6);
  border-radius: 14px;
  font-size: 16px;                   /* stops iOS Safari zooming on focus */
}
html body :focus-visible { outline: 3px solid rgba(240, 98, 143, .55); outline-offset: 2px; }

/* ---------- Toasts ---------- */
html body #toasts > * {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--pink-ink);
}

/* ---------- Smooth view changes ---------- */
html body .view:not([hidden]) { animation: ndd-view .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ndd-view { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Fallbacks & accessibility ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body .card, html body .tabbar, html body .icon-btn, html body #toasts > * { background: rgba(255, 245, 249, .96); }
}
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html body .card, html body .tabbar, html body .icon-btn { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 245, 249, .96); }
}
/* Low-power: lighter blur on small / older phones keeps scrolling at 60fps */
@media (max-width: 480px) {
  :root { --glass-blur: blur(12px) saturate(150%); }
}

/* ---------- Sun Shield (care.js) ---------- */
@property --sp { syntax: '<number>'; inherits: false; initial-value: 0; }
.sunshield { display: flex; align-items: center; gap: 16px; }
.sunshield .dial {
  --sp: 0; position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#f0628f calc(var(--sp) * 1%), rgba(255,255,255,.7) 0);
  box-shadow: 0 6px 18px rgba(214, 90, 140, .25);
  transition: --sp .9s cubic-bezier(.3,.8,.3,1);
}
.sunshield .dial::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: rgba(255, 246, 250, .96); }
.sunshield .dial i { position: relative; font-size: 32px; color: #f0628f; }
.sunshield .dial.down i { color: #b8a1ab; }
.sunshield .sun-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 2px; }
.sunshield.pop .dial { animation: shield-pop .7s cubic-bezier(.2,.9,.3,1.3); }
.sunshield.pop .dial i { animation: shield-spin .7s ease; }
@keyframes shield-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(240,98,143,.18); } 100% { transform: scale(1); } }
@keyframes shield-spin { from { transform: rotate(-30deg) scale(.6); } to { transform: none; } }