/* ============================================================================
   Calendar — the one place time lives.

   The grid is deliberately quiet. Each thing on a day is a coloured line of
   text rather than a block, because a month with eleven filled blocks in it is
   unreadable and a month with eleven thin lines is a workload you can see.
   ========================================================================== */

.v10cal{padding:0;overflow:hidden}

/* --------------------------------------------------------------- the bar */
.v10cal-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px clamp(12px,1.6vw,18px);border-bottom:1px solid var(--line,#e3e9f2);
}
.v10cal-nav{display:flex;align-items:center;gap:8px}
.v10cal-month{font-size:clamp(15px,1.5vw,18px);font-weight:640;letter-spacing:-.02em;min-width:9.5ch}
.v10cal-modes{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--sunken,#eef2f8)}
.v10cal-mode{
  border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--muted,#66748F);padding:6px 13px;border-radius:9px;transition:background .15s,color .15s;
}
.v10cal-mode.on{background:var(--surface,#fff);color:var(--text,#12263F);box-shadow:0 1px 3px rgba(16,32,58,.1)}

/* ----------------------------------------------------------- the filters */
.v10cal-filters{
  display:flex;flex-wrap:wrap;gap:7px;
  padding:12px clamp(12px,1.6vw,18px);border-bottom:1px solid var(--line,#e3e9f2);
}
.v10cal-filter{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-size:12.5px;
  font-weight:560;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line,#e3e9f2);background:var(--surface,#fff);
  color:var(--muted,#8894ab);opacity:.62;transition:opacity .15s,border-color .15s;
}
.v10cal-filter.on{opacity:1;color:var(--text,#12263F);border-color:color-mix(in srgb,var(--k) 42%,var(--line,#e3e9f2))}
.v10cal-filter i{width:8px;height:8px;border-radius:50%;background:var(--k);flex:0 0 auto}
.v10cal-filter b{font-weight:660;font-size:11px;color:var(--muted,#8894ab)}
.v10cal-filter.k-event{--k:#0e67b3}
.v10cal-filter.k-project{--k:#1E7FD0}
.v10cal-filter.k-milestone{--k:#7C5CE7}
.v10cal-filter.k-task{--k:#2FA96B}
.v10cal-filter.k-waiting{--k:#F6B33A}
.v10cal-filter.k-commitment{--k:#C2567F}
.v10cal-filter.k-reminder{--k:#7C5CD6}

/* -------------------------------------------------------------- the grid */
.v10cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.v10cal-dow{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted,#8894ab);padding:10px 8px 8px;text-align:center;
  border-bottom:1px solid var(--line,#e3e9f2);
}
.v10cal-day{
  min-height:104px;padding:6px 7px 8px;cursor:pointer;
  border-right:1px solid var(--line,#e3e9f2);border-bottom:1px solid var(--line,#e3e9f2);
  display:flex;flex-direction:column;gap:3px;transition:background .13s;
}
.v10cal-day:nth-child(7n+7){border-right:0}
.v10cal-day:hover{background:color-mix(in srgb,var(--accent,#1E7FD0) 5%,transparent)}
.v10cal-day.outside{background:color-mix(in srgb,var(--muted,#8894ab) 5%,transparent)}
.v10cal-day.outside .v10cal-num{opacity:.4}
.v10cal-num{
  font-size:12px;font-weight:600;color:var(--muted,#66748F);
  align-self:flex-start;min-width:22px;text-align:center;line-height:20px;border-radius:6px;
}
.v10cal-day.istoday .v10cal-num{background:var(--accent,#1E7FD0);color:#fff;font-weight:700}
.v10cal-day.istoday{background:color-mix(in srgb,var(--accent,#1E7FD0) 6%,transparent)}

.v10cal-chip{
  display:flex;align-items:baseline;gap:5px;width:100%;text-align:left;
  border:0;background:none;cursor:pointer;font:inherit;font-size:11.5px;line-height:1.3;
  color:var(--text,#12263F);padding:2px 3px;border-radius:5px;
}
.v10cal-chip:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}
.v10cal-chip i{width:6px;height:6px;border-radius:50%;background:var(--c);flex:0 0 auto;align-self:flex-start;margin-top:5px}
.v10cal-chip span{overflow-wrap:anywhere;min-width:0}
.v10cal-chip.done span{text-decoration:line-through;opacity:.5}
.v10cal-more{font-size:10.5px;font-weight:600;color:var(--muted,#8894ab);padding-left:4px}

/* ------------------------------------------------------------ the agenda */
.v10cal-agenda{padding:clamp(12px,1.6vw,18px)}
.v10cal-sub{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted,#8894ab);margin:18px 0 9px;
}
.v10cal-sub:first-child{margin-top:0}
.v10cal-rows{display:grid;gap:5px}
.v10cal-row{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;text-align:left;cursor:pointer;font:inherit;padding:10px 13px;border-radius:12px;
  background:var(--surface,#fff);border:1px solid var(--line,#e3e9f2);
  border-left:3px solid var(--c);transition:transform .13s,box-shadow .13s;
}
.v10cal-row:hover{transform:translateX(2px);box-shadow:0 2px 8px rgba(16,32,58,.07)}
.v10cal-row-date{font-size:12px;font-weight:620;color:var(--muted,#66748F);font-variant-numeric:tabular-nums}
.v10cal-row-body{display:grid;gap:2px;min-width:0}
.v10cal-row-body strong{font-size:14px;font-weight:570;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v10cal-row-body small{font-size:12px;color:var(--muted,#8894ab)}
.v10cal-row-kind{
  font-size:10.5px;font-weight:660;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 72%,var(--text,#12263F));white-space:nowrap;
}
.v10cal-row.done .v10cal-row-body strong{text-decoration:line-through;opacity:.55}
.v10cal-dayrows .v10cal-row{grid-template-columns:minmax(0,1fr) auto}

/* -------------------------------------------------------------- narrower */
/* A seven-column month on a phone is a wall of unreadable numbers, so the
   grid drops its text and keeps only the dots — the shape of the month — and
   tapping a day still opens everything on it. */
@media(max-width:860px){
  .v10cal-day{min-height:72px}
  .v10cal-chip span{display:none}
  .v10cal-chip{display:inline-flex;width:auto;padding:1px}
  .v10cal-day{flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:2px}
  .v10cal-num{width:100%;text-align:left;margin-bottom:2px}
  .v10cal-more{font-size:9.5px}
  .v10cal-row{grid-template-columns:minmax(0,1fr);gap:3px}
  .v10cal-row-date{font-size:11.5px}
  .v10cal-row-kind{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .v10cal-row:hover{transform:none}
}

/* ------------------------------------------------------------ key events */
/* The few big ones -- a board, a conference, an exam -- pinned above the
   month with a countdown, so they never sink among the small dated things. */
.v10cal-keys{margin:0 0 14px}
.v10cal-keys-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 8px}
.v10cal-keys-head h2{margin:0;font-size:15px;font-weight:720;letter-spacing:-.01em;color:var(--text,#12263F)}
.v10cal-keys-head span{font-size:12px;color:var(--muted,#8894ab)}
.v10cal-keys-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.v10cal-key{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;
  text-align:left;cursor:pointer;font:inherit;padding:12px 14px;border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,#E3A21A 13%,var(--surface,#fff)),var(--surface,#fff) 62%);
  border:1px solid color-mix(in srgb,#E3A21A 32%,var(--line,#e3e9f2));
  box-shadow:0 1px 2px rgba(16,32,58,.05),0 10px 22px -16px rgba(180,120,10,.55);
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.v10cal-key:hover,.v10cal-key:focus-visible{transform:translateY(-2px);border-color:#E3A21A;box-shadow:0 0 0 1px #E3A21A55,0 14px 26px -14px rgba(180,120,10,.6)}
.v10cal-key-date{
  width:50px;height:54px;border-radius:12px;display:grid;place-content:center;text-align:center;
  background:linear-gradient(160deg,#B46E06,#8E5500);color:#fff;box-shadow:0 6px 14px -8px #8E5500;
}
.v10cal-key-date b{font-size:21px;font-weight:780;line-height:1}
.v10cal-key-date small{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.92}
.v10cal-key-body{display:grid;gap:2px;min-width:0}
.v10cal-key-body em{font-style:normal;font-size:10.5px;font-weight:760;letter-spacing:.08em;text-transform:uppercase;color:#A86A06}
.v10cal-key.near .v10cal-key-body em{color:#C0392B}
.v10cal-key-body strong{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text,#12263F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v10cal-key-body small{font-size:12px;color:var(--muted,#66748F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v10cal-keyhint{
  display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:10px 14px;border-radius:12px;
  font-size:13px;color:var(--muted,#66748F);background:color-mix(in srgb,#E3A21A 7%,var(--surface,#fff));
  border:1px dashed color-mix(in srgb,#E3A21A 45%,var(--line,#e3e9f2));
}
.v10cal-keyhint>span{color:#D98A0B;font-size:15px}
.v10cal-keyhint b{color:var(--text,#12263F);font-weight:650}
/* in the grid and the agenda */
.v10cal-chip.key{font-weight:700;background:color-mix(in srgb,#E3A21A 15%,transparent)}
.v10cal-chip.key:hover{background:color-mix(in srgb,#E3A21A 26%,transparent)}
.v10cal-chip i.star{width:auto;height:auto;background:none;color:#D98A0B;font-style:normal;font-size:11px;line-height:1}
.v10cal-row.key{border-left-color:#E3A21A;background:linear-gradient(90deg,color-mix(in srgb,#E3A21A 9%,var(--surface,#fff)),var(--surface,#fff) 55%)}
.v10cal-row.key .v10cal-row-kind{color:#A86A06}
.v10cal-row.key .v10cal-row-body strong{font-weight:700}
/* the "key events only" filter */
.v10cal-filter.keyonly{--k:#E3A21A;color:#A86A06;opacity:.85}
.v10cal-filter.keyonly.on{opacity:1;background:color-mix(in srgb,#E3A21A 14%,var(--surface,#fff));border-color:#E3A21A;color:#8a5604}
.v10cal-filter.muted{opacity:.4}
@media(max-width:860px){
  .v10cal-chip.key{background:none}
  .v10cal-keys-row{grid-template-columns:1fr}
}