/* today — "Today's orders" on the Command post (src/today.rs, docs/EMOTIONAL_DESIGN.md §5.1). Tokens
   and shared components only (see docs/DESIGN.md). */
@layer pages {
  .today { display: flex; flex-direction: column; gap: var(--sp-4); }
  .today.complete { border-color: color-mix(in srgb, var(--gold) 45%, var(--border-subtle));
    box-shadow: var(--shadow-1), var(--highlight), 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent); }
  .today .today-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .today .today-head h3 { font: var(--fw-bold) var(--fs-h2) / 1.1 var(--font-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
  .today.complete .today-head h3 { color: var(--gold-text); }
  .today .today-head p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
  .today .today-meter .fill { background: linear-gradient(90deg, var(--brand-edge), var(--brand)); }

  /* The streak: a flame that lights once there is one, the day count beside it. */
  .today .streak { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: var(--sp-2); align-items: center;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .today .streak .flame { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-3); background: var(--surface-3); }
  .today .streak.lit .flame { color: #ffb347; background: radial-gradient(circle, rgba(255, 150, 40, .3), transparent 70%); animation: flame 1.6s ease-in-out infinite; }
  .today .streak b { font: var(--fw-bold) var(--fs-h2) / 1 var(--font-display); }
  .today .streak small { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
  @keyframes flame { 50% { transform: scale(1.08) translateY(-1px); } }

  /* The orders: each one a row that leads to its page, stamped when done. */
  .today .today-orders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
  .today .today-order { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); text-align: left; cursor: pointer;
    border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text);
    transition: border-color var(--t-fast), transform var(--t-base) var(--ease), background-color var(--t-fast); }
  .today .today-order:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  .today .today-order:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .today .today-order-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); }
  .today .today-order-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .today .today-order-text b { font-weight: var(--fw-semibold); }
  .today .today-order-text small { color: var(--text-3); font-size: var(--fs-xs); }
  .today .today-order .stamp { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px dashed var(--border-strong); color: #fff; }
  .today .today-order.done { background: linear-gradient(180deg, var(--green-soft), transparent 80%), var(--surface-2); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
  .today .today-order.done .today-order-ico { color: var(--green-text); background: var(--green-soft); }
  .today .today-order.done .stamp { border: 0; background: var(--green); box-shadow: 0 0 12px color-mix(in srgb, var(--green) 60%, transparent); animation: stamp-in .45s cubic-bezier(.2, 1.4, .3, 1); }
  @keyframes stamp-in { 0% { transform: scale(2.2) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

  .today .next-up { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); }
  .today .next-up span { display: inline-flex; align-items: center; gap: 6px; }
  .today .next-up .icon { color: var(--gold-text); }
  /* Your country right now: a live dot and how many are on duty. */
  .today .pulse { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
  /* The ring is a layer that grows and fades (transform + opacity), not a growing box-shadow. */
  .today .pulse-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
  .today .pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--green) 60%, transparent); animation: pulse-dot 2s ease-out infinite; }
  @keyframes pulse-dot { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3); opacity: 0; } }
  .today .streak-note { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
  .today .streak-note .icon { color: var(--blue-text); flex: none; }

  @media (max-width: 760px) { .today .today-orders { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) { .today .streak.lit .flame, .today .today-order.done .stamp { animation: none; } }
}