/* Catalyst calendar: an editorial glimpse of a desk's catalyst calendar for its watchlist.
   Unscheduled news lands on today and later dates are reread: the entries it touches take
   colour with the scientific reason, and one opens to show what changed.
   Fixed 620 x 440 artboard, zoomed to fit its container by the script (--cc-fit).
   Without the script, or under reduced motion, the finished frame shows. */
[data-cc]{
  --cc-ink:#091423;
  --cc-muted:rgb(9 20 35 / .46);
  --cc-faint:rgb(9 20 35 / .3);
  --cc-rule:rgb(9 20 35 / .07);
  --cc-line:#e1e4e8;
  --cc-line-2:#cdd1d7;
  --cc-green:#7ba458;
  --cc-amber:#cd9258;
  --cc-fit:1;
  width:100%;
  max-width:620px;
  font-family:'Experimental', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color:var(--cc-ink);
  -webkit-font-smoothing:antialiased;
}
[data-cc] *{ box-sizing:border-box; }
.cc-stage{ position:relative; width:620px; height:440px; zoom:var(--cc-fit); }
.cc-card{
  position:absolute; inset:0;
  background:#fff; border-radius:16px;
  box-shadow:0 0 0 1px rgb(9 20 35 / .07), 0 1px 2px rgb(9 20 35 / .04), 0 18px 40px -18px rgb(9 20 35 / .2);
  overflow:hidden;
}
.cc-abs{ position:absolute; }

/* Header: the month, and whose calendar it is. */
.cc-title{ left:28px; top:26px; display:flex; align-items:baseline; gap:10px; font-size:15px; font-weight:500; letter-spacing:-.01em; }
.cc-title small{ font-size:11px; font-weight:400; color:var(--cc-muted); letter-spacing:0; }

/* The grid. */
.cc-wd{ top:66px; width:112.8px; padding-left:10px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cc-muted); }
.cc-hr{ left:28px; width:564px; height:1px; background:var(--cc-rule); transform-origin:0 50%; }
.cc-vr{ top:84px; width:1px; height:316px; background:var(--cc-rule); transform-origin:50% 0; }
.cc-date{ font-size:10px; line-height:20px; width:20px; text-align:center; color:var(--cc-muted); font-variant-numeric:tabular-nums; }
.cc-date.past{ color:var(--cc-faint); }
.cc-today{ width:20px; height:20px; border-radius:50%; background:var(--cc-ink); }
.cc-date.is-today{ color:#fff; font-weight:500; }

/* Cells that the news touches take a faint tint. */
.cc-tint{ width:112.8px; height:79px; opacity:1; }
.cc-tint[data-s="green"]{ background:rgb(123 164 88 / .08); }
.cc-tint[data-s="amber"]{ background:rgb(205 146 88 / .1); }

/* An entry: a rule, what kind of event it is, and the rest abstracted. */
.cc-ev{ width:94px; height:28px; padding-left:8px; }
.cc-ev .rule{ position:absolute; left:0; top:0; width:2px; height:28px; border-radius:1px; background:var(--cc-line-2); transform-origin:50% 0; }
.cc-ev .type{ position:absolute; left:8px; top:0; font-size:8.5px; line-height:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--cc-muted); white-space:nowrap; }
.cc-ev .line{ position:absolute; left:8px; top:17px; height:5px; border-radius:3px; background:var(--cc-line); transform-origin:0 50%; }
.cc-ev.past{ opacity:.5; }
.cc-ev.dim{ opacity:.55; }
.cc-ev[data-s="green"] .rule{ background:var(--cc-green); }
.cc-ev[data-s="amber"] .rule{ background:var(--cc-amber); }
.cc-ev[data-s] .line{ background:var(--cc-line-2); }
.cc-reason{ font-size:10px; font-weight:500; white-space:nowrap; }
.cc-reason[data-s="green"]{ color:var(--cc-green); }
.cc-reason[data-s="amber"]{ color:var(--cc-amber); }

/* The news that wasn't on the calendar. */
.cc-news .rule{ background:var(--cc-ink); }
.cc-news .co{ position:absolute; left:8px; top:2px; width:38px; height:5px; border-radius:3px; background:var(--cc-line-2); transform-origin:0 50%; }
.cc-news .what{ position:absolute; left:8px; top:13px; font-size:10.5px; line-height:13px; font-weight:500; white-space:nowrap; }

/* What changed for the amber entry. */
.cc-pop{
  left:250px; top:328px; width:204px;
  padding:11px 13px 12px;
  background:#fff; border-radius:10px;
  box-shadow:0 0 0 1px rgb(9 20 35 / .08), 0 10px 28px -10px rgb(9 20 35 / .28);
  transform-origin:0 50%;
}
.cc-pop .head{ display:flex; align-items:baseline; gap:8px; }
.cc-pop .head b{ font-size:12px; font-weight:500; color:var(--cc-amber); }
.cc-pop .head span{ font-size:10px; color:var(--cc-muted); }
.cc-pop .sep{ height:1px; background:var(--cc-rule); margin:9px 0 8px; transform-origin:0 50%; }
.cc-pop .bar{ display:flex; align-items:baseline; font-size:10.5px; }
.cc-pop .bar .k{ color:var(--cc-muted); }
.cc-pop .bar .old{ position:relative; margin-left:auto; color:var(--cc-faint); font-variant-numeric:tabular-nums; }
.cc-pop .bar .old i{ position:absolute; left:-1px; right:-1px; top:50%; height:1px; background:var(--cc-faint); transform-origin:0 50%; }
.cc-pop .bar .new{ margin-left:8px; font-weight:500; color:var(--cc-amber); font-variant-numeric:tabular-nums; }
.cc-pop .src{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:10px; color:var(--cc-muted); }
.cc-pop .src .docs{ position:relative; width:14px; height:12px; }
.cc-pop .src .docs i{ position:absolute; width:8px; height:10px; border:1px solid #b9bec6; border-radius:1.5px; background:#fff; }
.cc-pop .src .docs i:nth-child(1){ left:5px; top:0; }
.cc-pop .src .docs i:nth-child(2){ left:2.5px; top:1px; }
.cc-pop .src .docs i:nth-child(3){ left:0; top:2px; }