.cal { margin-top:calc(var(--gap) * 1.6); --thumb:2.75rem; } .cal > .sub { max-width:var(--measure); color:var(--ink-mute); } .calrail { margin:0 0 2rem; position:relative; } .calyr[hidden] { display:none; } .calyh { display:flex; align-items:baseline; gap:.9rem; margin:0 0 1.1rem; font-family:var(--display); font-size:var(--s3); line-height:1; border-top:none; padding-top:0; } .calyearbar { display:flex; align-items:center; justify-content:center; gap:1.1rem; margin:0 0 1.4rem; padding-bottom:1rem; border-bottom:var(--hair) solid var(--rule); } .calyearnow { display:flex; align-items:baseline; gap:.8rem; font-weight:400; min-width:11rem; justify-content:center; } .calyeart { font-family:var(--display); font-size:var(--s3); line-height:1; color:var(--limestone); letter-spacing:.02em; } .calyearn { font-family:var(--mono); font-size:var(--s-1); color:var(--ink-mute); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; } .cal:not(.js) .calyearbar { display:none; } .cal.js .calyh { display:none; } .calyn { font-family:var(--mono); font-size:var(--s-1); color:var(--ink-mute); letter-spacing:.1em; text-transform:uppercase; } .minis { list-style:none; margin:0; padding:0; display:grid; gap:.9rem; grid-template-columns:repeat(4,minmax(0,1fr)); } .mini { display:grid; gap:.3rem; padding:.7rem .6rem .75rem; text-decoration:none; color:inherit; border-radius:3px; border:var(--hair) solid var(--rule); background:color-mix(in srgb,var(--panel) 40%,transparent); grid-template-columns:1fr auto; align-items:baseline; transition:border-color .16s ease, background .16s ease; } .mini.has:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); } .mini.has:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .mini.none { opacity:.4; } .minm { font-family:var(--mono); font-size:var(--s-1); letter-spacing:.14em; text-transform:uppercase; color:var(--dust); } .mini.has:hover .minm { color:var(--limestone); } .minc { font-family:var(--mono); font-size:var(--s-2); color:var(--accent); text-align:right; } .mini.none .minc { display:none; } .minh, .ming { grid-column:1 / -1; display:grid; grid-template-columns:repeat(7,1fr); gap:1px; } .minh { margin-top:.15rem; } .minh > i { font-family:var(--mono); font-size:.56rem; line-height:1.4; text-align:center; color:var(--ink-mute); font-style:normal; letter-spacing:.04em; } .ming > i { font-family:var(--mono); font-size:.58rem; line-height:1.5; text-align:center; font-style:normal; color:var(--ink-mute); border-radius:2px; } .ming > i.mh { background:color-mix(in srgb,var(--accent) 26%,transparent); color:var(--limestone); } .ming > i.mh.act { background:var(--accent); color:var(--night); } .ming > i.mt { box-shadow:inset 0 0 0 1px var(--accent); } .ming > i.mo { visibility:hidden; } @media (max-width:60rem) { .minis { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:44rem) { .minis { grid-template-columns:repeat(2,minmax(0,1fr)); } } .caltoolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem 1.4rem; margin:0 0 1.3rem; padding-bottom:.7rem; border-bottom:var(--hair) solid var(--rule); } .caltabs { display:flex; align-items:center; gap:.2rem; } .caltab { font-family:var(--mono); font-size:var(--s-1); letter-spacing:.1em; text-transform:uppercase; line-height:1; padding:.55rem .75rem; border:0; cursor:pointer; background:transparent; color:var(--ink-mute); border-bottom:2px solid transparent; display:inline-flex; align-items:center; min-height:var(--thumb); transition:color .16s ease, border-color .16s ease; } .caltab:hover { color:var(--limestone); } .caltab[aria-pressed="true"] { color:var(--accent); border-bottom-color:var(--accent); } .caltab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .calctl { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .calpage { display:flex; align-items:center; gap:.45rem; } .calpage[hidden] { display:none; } .calarrow { width:var(--thumb); height:var(--thumb); display:grid; place-items:center; padding:0; border-radius:50%; cursor:pointer; border:var(--hair) solid var(--rule-strong); background:color-mix(in srgb,var(--panel) 70%,transparent); transition:border-color .16s ease, background .16s ease, transform .12s ease; } .calarrow svg { width:1.15rem; height:1.15rem; fill:none; stroke:var(--dust); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .16s ease; } .calarrow:hover:not([disabled]) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); } .calarrow:hover:not([disabled]) svg { stroke:var(--limestone); } .calarrow:active:not([disabled]) { transform:scale(.94); } .calarrow[disabled] { opacity:.3; cursor:default; } .calpill { font-family:var(--mono); font-size:var(--s-2); letter-spacing:.1em; text-transform:uppercase; line-height:1; padding:.72rem 1rem; margin-left:.3rem; display:inline-flex; align-items:center; min-height:var(--thumb); border-radius:2rem; cursor:pointer; color:var(--dust); border:var(--hair) solid var(--rule-strong); background:color-mix(in srgb,var(--panel) 70%,transparent); transition:border-color .16s ease, background .16s ease, color .16s ease; } .calpill:hover:not([disabled]) { border-color:var(--accent); color:var(--limestone); background:color-mix(in srgb,var(--accent) 14%,transparent); } .calpill[disabled] { opacity:.3; cursor:default; } .calarrow:focus-visible, .calpill:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .cal:not(.js) .caltoolbar { display:none; } .calswitch { display:inline-flex; align-items:center; gap:.7rem; margin:0; cursor:pointer; font-family:var(--mono); font-size:var(--s-1); color:var(--ink-mute); transition:color .16s ease; } .calswitch:hover { color:var(--limestone); } .calswitch input { position:absolute; opacity:0; width:0; height:0; } .calswtrack { flex:none; width:2.7rem; height:1.5rem; border-radius:1rem; position:relative; border:var(--hair) solid var(--rule-strong); background:color-mix(in srgb,var(--deep) 70%,transparent); transition:background .18s ease, border-color .18s ease; } .calswknob { position:absolute; top:50%; left:3px; width:1.05rem; height:1.05rem; border-radius:50%; background:var(--ink-mute); transform:translateY(-50%); transition:transform .18s ease, background .18s ease; } .calswitch input:checked + .calswtrack { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 34%,transparent); } .calswitch input:checked + .calswtrack .calswknob { background:var(--accent); transform:translateY(-50%) translateX(1.16rem); } .calswitch input:focus-visible + .calswtrack { outline:2px solid var(--accent); outline-offset:3px; } .calswitch input:checked ~ .calswlabel { color:var(--limestone); } .cal:not(.js) .calswitch { display:none; } .callist { margin-top:1.4rem; } .cal.js .calrail, .cal.js .calpanels, .cal.js .callist { display:none; } .cal.js[data-view="year"] .calrail { display:block; } .cal.js[data-view="month"] .calpanels { display:block; } .cal.js[data-view="list"] .callist { display:grid; } .cal.js[data-view="list"] .calswitch { display:none; } .cal.js[data-view="year"].acts .ming > i.mh:not(.act) { background:transparent; color:var(--ink-mute); } .cal.js[data-view="year"].acts .mini.has:not(.hasact) { opacity:.45; } .cal.js[data-view="year"].acts .minc { display:none; } .cal.acts .calday.full:not(.hasact) { display:none; } .cal.acts .calev:not(.act) { display:none; } .cal.acts .calmonth[data-act="0"] .caldays::after { content:"Nothing in this month is still open to act on."; display:block; grid-column:1 / -1; font-family:var(--mono); font-size:var(--s-1); color:var(--ink-mute); padding:.9rem .2rem; } .calday.today { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 62%,transparent); background:color-mix(in srgb,var(--accent) 9%,transparent); } .calday.today .caldn { color:var(--accent); } .caldn.num::after { content:""; } .calday.today .caldn::after { content:" today"; letter-spacing:.08em; } .calmonth { margin:0 0 2.2rem; } .calmonth[hidden] { display:none; } .cal.js .calmonth[data-slot="next"] { margin-top:3rem; padding-top:2.2rem; border-top:var(--hair) solid var(--rule); } .cal.js .calmonth[data-slot="next"] .calmname { font-size:var(--s3); color:var(--dust); } .calmh { margin:0; border-top:none; padding-top:0; font-weight:400; } .calmh > time { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem 1rem; } .calmnum, .calmyear { font-family:var(--mono); font-size:var(--s1); color:var(--ink-mute); letter-spacing:.04em; line-height:1; } .calmname { font-family:var(--display); font-size:var(--s4); line-height:1; letter-spacing:.02em; text-transform:uppercase; color:var(--limestone); } .calmsum { margin:.5rem 0 0; font-family:var(--mono); font-size:var(--s-1); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); } .calmh:focus { outline:none; } .calmh:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } .calact { font-family:var(--mono); font-size:var(--s-1); letter-spacing:.06em; text-transform:uppercase; } .calact { color:var(--accent); } .calhead { list-style:none; margin:1.1rem 0 0; padding:0 0 .5rem; display:grid; grid-template-columns:repeat(7,1fr); border-bottom:2px solid var(--rule-strong); } .calhead > li { font-family:var(--mono); font-size:var(--s-2); color:var(--dust); letter-spacing:.16em; text-transform:uppercase; text-align:center; } .caldays { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); border-left:var(--hair) solid var(--rule); } .calday { min-height:8.4rem; padding:.5rem .55rem .6rem; border-right:var(--hair) solid var(--rule); border-bottom:var(--hair) solid var(--rule); display:flex; flex-direction:column; gap:.35rem; min-width:0; } .calday.out { background:color-mix(in srgb,var(--deep) 34%,transparent); } .calday.full { background:color-mix(in srgb,var(--panel) 62%,transparent); } .caldn { font-family:var(--mono); font-size:var(--s0); color:var(--ink-mute); line-height:1; letter-spacing:.02em; } .calday.full .caldn { color:var(--limestone); } .caldd { display:none; } .calevs { list-style:none; margin:0; padding:0; display:grid; gap:.25rem; } .calev { display:block; text-decoration:none; color:inherit; padding:.28rem .4rem; border-left:2px solid var(--rule-strong); border-radius:0 2px 2px 0; background:color-mix(in srgb,var(--deep) 70%,transparent); transition:border-color .16s ease, background .16s ease, transform .16s ease; } .calev:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); border-left-color:var(--accent); transform:translateX(1px); } .calev:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .calev.act { border-left-color:var(--accent); } .cke { display:block; font-family:var(--mono); font-size:var(--s-2); line-height:1.2; color:var(--ink-mute); letter-spacing:.04em; } .calev.act .cke { color:var(--accent); } .ckt { display:block; font-size:var(--s-2); line-height:1.35; color:var(--dust); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .calev:hover .ckt { color:var(--limestone); } @media (max-width:52rem) { .calhead { display:none; } .caldays { display:block; } .calday { display:none; } .calday.full { display:block; min-height:0; margin:0 0 .5rem; padding:.5rem .6rem .6rem; } .caldn { display:none; } .caldd { display:block; font-family:var(--mono); font-size:var(--s-2); color:var(--accent); letter-spacing:.06em; margin-bottom:.35rem; } .ckt { -webkit-line-clamp:4; } .calyn { display:none; } .calmh { font-size:var(--s2); } .calmh > time { flex-wrap:wrap; } .calmname { font-size:var(--s2); } .calev { padding:.24rem .35rem; } .ckt { -webkit-line-clamp:2; } .calday.full { margin-bottom:.4rem; padding:.45rem .5rem .5rem; } } @media (prefers-reduced-motion:reduce) { .calev, .mini { transition:none; } .calev:hover { transform:none; } } @media (max-width:430px) { .askbox .composer { padding-left:.7rem; gap:.35rem; } .askbox .composer input { font-size:var(--s0); } } @media (max-width:380px) { .askbox .composer input { font-size:var(--s-1); } }