/* Peptix - Today page layer. Builds on app.css tokens and components.css. */

.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.today-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
@media (max-width: 1099px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ------------------------------------------------------------ due rows */
.due-row, .up-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-width: 0; }
.due-row .status-circle, .up-row .status-circle { align-self: center; }
.due-main { flex: 1; min-width: 0; }
.due-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.due-title strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.due-title .due-dose { font-weight: 500; color: var(--text-2); font-size: 12.5px; }
.due-meta { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; font-size: 12px; color: var(--text-2); }
.due-meta .num { font-size: 11.5px; color: var(--text); }
.due-meta .sep { color: var(--border-firm); }
.due-meta .is-crit { color: var(--crit-ink); font-weight: 600; }
.due-note { color: var(--text-3); overflow-wrap: anywhere; }
.due-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.due-row.is-done .due-title strong { color: var(--text-2); font-weight: 560; }
.due-row.is-late .due-title strong { color: var(--text); }
.up-row .up-time { flex: none; font-size: 12px; color: var(--text-2); min-width: 48px; text-align: right; }
.up-row .status-circle { border-style: dotted; }
@media (max-width: 560px) {
  .due-row { flex-wrap: wrap; }
  .due-acts { width: 100%; padding-left: 30px; }
  .due-row .actions { margin-left: auto; }
}

.today-quiet {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; font-size: 13px; color: var(--text-2);
}
.today-quiet > svg { color: var(--accent); flex: none; }
.today-quiet > span { flex: 1 1 auto; min-width: 0; }
.today-quiet .btn { margin-left: auto; }

.quick-log { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -8px; }
.quick-log .kicker { flex: none; }
.quick-log .chip .num { color: var(--text-2); }
.quick-log .chip:hover .num { color: inherit; }

/* ------------------------------------------------------- featured vial */
.today-vial { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1100px) { .today-vial { position: sticky; top: 24px; } }
.today-vial-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--border); }
.today-vial-head h2 { font-size: 14px; font-weight: 600; }

.vial-picker { display: flex; flex-direction: column; gap: 1px; padding: 6px; border-bottom: 1px solid var(--border); }
.vial-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px 36px; align-items: center; gap: 10px;
  min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: none;
  color: var(--text-2); font-size: 12.5px; font-weight: 500; text-align: left;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.vial-pick:hover { background: var(--sunken); color: var(--text); }
.vial-pick[aria-pressed="true"] { background: var(--sunken); color: var(--text); font-weight: 600; }
.vial-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vial-pick .meter-track { height: 4px; }
.vial-pick-pct { font-size: 11px; text-align: right; color: var(--text-3); }
.vial-pick[aria-pressed="true"] .vial-pick-pct { color: var(--text-2); }

.today-vial-art {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 272px; padding: 14px 20px 8px;
  background: radial-gradient(ellipse at 50% 62%, var(--sunken) 0%, transparent 68%);
}
.today-vial-art::after {
  content: ''; position: absolute; z-index: 0; left: 50%; bottom: 22px;
  width: 96px; height: 12px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--art-shadow), transparent 72%);
  filter: blur(3px); pointer-events: none;
  animation: today-vial-shadow 5.4s ease-in-out infinite;
}
.today-vial-art .vial-stage, .today-vial-art .vial-model-shell { width: 176px; height: 236px; }
.today-vial-art .vial-stage {
  position: relative; z-index: 1; justify-content: center; gap: 0;
  transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}
.today-vial-art .vial-model-shell { animation: today-vial-float 5.4s ease-in-out infinite; }
.today-vial-art .vial-model-halo { display: none; }
.today-vial-art[data-motion-active="true"] .vial-stage { transform: translateY(-6px) scale(1.04); }
.today-vial-art .vial-inspect-badge { right: 4px; bottom: 10px; }
@keyframes today-vial-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes today-vial-shadow { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .9; } 50% { transform: translateX(-50%) scaleX(.86); opacity: .6; } }

.today-vial-body { display: flex; flex-direction: column; gap: 10px; padding: 6px 18px 16px; }
.today-vial-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.today-vial-name h3 { font-size: 15px; font-weight: 600; letter-spacing: -.015em; min-width: 0; overflow-wrap: anywhere; }
.today-vial-name .num { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.today-vial-remaining { display: flex; align-items: baseline; gap: 6px; }
.today-vial-remaining .big { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.today-vial-remaining .unit { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.today-vial-remaining .pct { margin-left: auto; font-size: 12px; color: var(--text-2); }
.today-vial.is-low .today-vial-remaining .pct { color: var(--warn-ink); }
.today-vial.is-crit .today-vial-remaining .pct { color: var(--crit-ink); }
.today-vial-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.today-vial-facts > div { min-width: 0; }
.today-vial-facts dt { font-size: 11px; color: var(--text-3); }
.today-vial-facts dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.today-vial-facts dd small { font-size: 10.5px; font-weight: 500; color: var(--text-3); font-family: var(--sans); }
.today-vial-facts dd.is-late { color: var(--crit-ink); }
.today-vial-note { font-size: 12px; color: var(--crit-ink); }

/* The pin picker dialog rows (opened from "Pin a vial"). */
.pin-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.pin-row { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; transition: background var(--t-1) var(--ease); }
.pin-row:hover { background: var(--sunken); }
.pin-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pin-row-main strong { font-size: 13.5px; font-weight: 600; }
.pin-row-main small { font-size: 12px; color: var(--text-2); font-family: var(--mono); }

@media (prefers-reduced-motion: reduce) {
  .today-vial-art .vial-model-shell, .today-vial-art::after { animation: none; }
  .today-vial-art .vial-stage { transition: none; }
}