/* dates.css - the three date pages under the Red Folder Calendar (TL-16: FOMC meeting dates, US jobs report and US CPI
   release dates), on top of tools.css and calendar.css (the kind colours, badges, the countdown card, the "why" flow
   and the sources table come from there, unchanged). Reference pages: the year's dates come first, as cards like the
   calendar's This Week tiles, the next one lit, those already out dashed. No visible words here (check_landing.py). */

.dp-b [hidden]{display:none !important}
.dp-b .desk-in{--w-bg:var(--bg);--w-in:var(--bg)}

/* the hero's way back to the whole calendar */
.dp-up{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:20px 0 0;font-size:14.5px;color:var(--band-2)}
.dp-up .btn{flex:0 0 auto}

/* the zone and the key */
.dp-ctl{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.dp-ctl .f{flex:1 1 260px;max-width:340px}
.dp-key{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:0;padding:0 0 10px;font-size:13px;color:var(--text-2)}
.dp-key li{display:inline-flex;align-items:center;gap:6px;margin:0}
.dp-key li::before{content:"";width:14px;height:14px;border-radius:4px;border:1px solid var(--line);background:var(--bg);box-sizing:border-box}
.dp-key .dk-nx::before{border:2px solid var(--orange)}
.dp-key .dk-done::before{border-style:dashed;border-color:var(--text-2);background:transparent}
.dp-key .dk-sep::before{border-radius:999px;border-color:var(--tl);background:var(--tl-2)}
.dp-key .dk-tent::before{border-radius:999px;border-style:dashed;border-color:var(--text-2)}

/* the years and their date cards */
.dy{margin:0 0 24px}
.dy-h{font-size:19px;margin:0 0 10px}
.dl{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.dl{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}}
/* a column, so the card's actions sit on its bottom edge and line up along a row of cards */
.dc{position:relative;display:flex;flex-direction:column;gap:4px;margin:0;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);box-shadow:inset 0 4px 0 var(--k);min-width:0;scroll-margin-top:90px}
.dc p{margin:0}
/* the state tag wraps under the date on a narrow card instead of touching it */
.dc-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 8px;padding-top:4px}
.dc-d{display:flex;align-items:center;gap:8px;color:var(--text);min-width:0}
.dc-dn{font:400 34px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dc-mw{display:grid;line-height:1.15}
.dc-mo{font:500 15px/1.15 var(--display)}
.dc-wd{font-size:13px;color:var(--text-2)}
.dc-st{font:600 11.5px/1 "Inter",system-ui,sans-serif;padding:4px 8px;border-radius:999px;white-space:nowrap}
.dc-done{color:var(--text-2);border:1px solid var(--line)}
.dc-nx{background:var(--orange-t);color:var(--bg)}
.dc-t{font:600 18px/1.2 "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;margin-top:4px !important}
.dc-z{font-weight:400;font-size:13px;color:var(--text-2);white-space:nowrap}
.dc-cd{display:block;font-weight:600;font-size:13.5px;color:var(--orange-t);margin-top:2px}
.dc-m{font-size:13.5px;color:var(--text-2);line-height:1.35}
.dc-tags{display:flex;flex-wrap:wrap;gap:4px}
.dc-sep{font-size:12px;line-height:1.3;color:var(--tl);border:1px solid var(--tl);border-radius:999px;padding:2px 8px;background:var(--tl-2)}
/* on a narrow card the tag wraps: a soft box rather than a squeezed pill */
.dc .ce-tag{font-size:12px;line-height:1.3;border-radius:8px}
.dc-act{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:auto !important;padding-top:4px}
.dc-act:empty{display:none}
.dc .ce-ics{min-height:44px;padding:0 12px;font-size:14px}
.dc-s{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--text);text-decoration-color:var(--orange)}
.dc .ce-ics:focus-visible,.dc-s:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.dc.is-done{background:transparent;border-style:dashed;box-shadow:none}
.dc.is-done .dc-dn,.dc.is-done .dc-t{color:var(--text-2)}
.dc.is-next{border:2px solid var(--orange);padding:11px;box-shadow:inset 0 4px 0 var(--k),0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}

/* the card beside the list: the countdown and the next date (calendar.css styles its parts) */
.dp-b .desk-out .nx-c{font-size:clamp(34px,4vw,44px);min-height:1.1em}
.dp-b .desk-out .nx-c:empty{display:none}
.nx-m{font-size:14px;color:var(--band-2);margin:2px 0 0}
.dp-b .desk-out .nx-y{margin-bottom:14px}
.dp-b .desk-out .btn[disabled]{opacity:.45;cursor:not-allowed}

/* FOMC: the decisions of the year so far, the target range after each */
.fd-lead{margin:0 0 4px}
.guide .fd{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.guide .fd{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
.guide .fd .fd-i{display:flex;flex-direction:column;gap:4px;margin:0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--fill);
  box-shadow:inset 0 4px 0 var(--k-rate);min-width:0}
.fd-i .fd-s{margin-top:auto}
.fd-d{font:500 16px/1.2 var(--display);padding-top:4px}
.fd-r{font:400 24px/1.1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.fd-r small{font:400 .55em/1 "Inter",system-ui,sans-serif;color:var(--text-2);margin-left:3px}
.fd-na{font-size:16px;white-space:normal;color:var(--text-2)}
.fd-c{display:flex;align-items:flex-start;gap:6px;font-size:13.5px;line-height:1.35;color:var(--text-2)}
.fd-c .ki{margin-top:1px}
.fd-i.is-up .ki{color:var(--tl)}
.fd-i.is-down .ki{color:var(--orange-t)}
.guide .fd .fd-i.is-up,.guide .fd .fd-i.is-down{border-color:var(--tl);background:color-mix(in srgb,var(--tl) 9%,var(--fill))}
.fd-i.is-up .fd-c,.fd-i.is-down .fd-c{color:var(--text)}
.fd-s{display:inline-flex;align-items:center;min-height:40px;font-size:14px;color:var(--text);text-decoration-color:var(--orange)}

/* the article */
.dp-why{margin-top:14px}
@media (min-width:720px){.dp-more{grid-template-columns:repeat(3,minmax(0,1fr))}}