/* Main menu calendar (hubcal.js, Gerb 10-06). Event colors come in as --c from the kind map. */
.hub-cal{margin-top:22px;padding:22px;border-radius:16px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow);min-width:0}
.hc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.hc-top h2{margin:0;font-size:20px}.hc-top p{margin:4px 0 0;color:var(--faint);font-size:13px}
.hc-ctl{display:flex;gap:8px;flex-wrap:wrap}
.hc-seg{display:inline-flex;border:1px solid var(--edge2);border-radius:10px;overflow:hidden}
.hc-seg button{background:none;border:0;color:var(--soft);padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;min-height:34px}
.hc-seg button+button{border-left:1px solid var(--edge2)}
.hc-seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.hc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 12px}
.hc-bar b{font-size:15px;margin:0 6px}
.hc-nav{background:var(--panel2);border:1px solid var(--edge2);color:var(--ink);border-radius:8px;min-width:34px;min-height:34px;padding:0 10px;font:inherit;cursor:pointer}
.hc-nav:hover,.hc-dh:hover{border-color:var(--accent)}
.hc-sync{font-size:12px;color:var(--faint)}.hc-sync.bad{color:var(--bad)}
.hc-manage{margin-left:auto;font-size:13px;color:var(--accent);text-decoration:none}
.hc-sec h3{margin:6px 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.hc-hl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hc-box{background:var(--panel2);border:1px solid var(--edge);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.hc-box .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.hc-box b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hc-box small{font-size:12px;color:var(--soft)}
.hc-dot::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.hc-warn{margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:13px;background:color-mix(in srgb,var(--warn,#C98A1A) 14%,transparent);color:var(--ink)}
.hc-list{list-style:none;margin:12px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.hc-list li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;border-left:4px solid var(--c);background:var(--panel2);font-size:14px}
.hc-list li span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.hc-list small{color:var(--faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-list a{font-size:12px;color:var(--accent);text-decoration:none}
.hc-t{font-variant-numeric:tabular-nums;color:var(--soft);min-width:52px}
.hc-empty{border-left-color:var(--edge2)!important;color:var(--faint)}
.hc-scroll{overflow-x:auto;margin-top:16px;-webkit-overflow-scrolling:touch}
.hc-grid{min-width:0}.hc-grid.week{min-width:720px}
.hc-heads,.hc-allday,.hc-body{display:grid;grid-template-columns:42px repeat(var(--n,1),minmax(0,1fr));gap:4px}
.hc-grid.week .hc-heads,.hc-grid.week .hc-allday,.hc-grid.week .hc-body{grid-template-columns:42px repeat(7,minmax(0,1fr))}
.hc-dh{background:none;border:1px solid transparent;border-radius:8px;color:var(--soft);font:inherit;font-size:12px;padding:4px;cursor:pointer}
.hc-dh b{display:block;font-size:17px;color:var(--ink)}.hc-dh.today{color:var(--accent)}.hc-dh.today b{color:var(--accent)}
.hc-allday{margin:4px 0}.hc-allday>div{display:flex;flex-direction:column;gap:2px}
.hc-ax{font-size:10px;color:var(--faint);text-align:right;padding-right:4px}
.hc-chip{font-size:11px;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--c) 22%,transparent);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-body{padding-top:8px}.hc-axis{position:relative}.hc-axis span{position:absolute;right:6px;transform:translateY(-6px);font-size:10.5px;color:var(--faint)}
.hc-col{position:relative;border-left:1px solid var(--edge);background:repeating-linear-gradient(to bottom,var(--edge) 0 1px,transparent 1px var(--hr))}
.hc-col.today{background-color:color-mix(in srgb,var(--accent) 5%,transparent)}
.hc-ev{position:absolute;border-radius:7px;padding:3px 6px;overflow:hidden;font-size:12px;line-height:1.25;color:var(--ink);
  background:color-mix(in srgb,var(--c) 20%,var(--panel));border-left:3px solid var(--c);box-sizing:border-box}
.hc-ev.imp{background:color-mix(in srgb,var(--c) 32%,var(--panel));box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:2}
.hc-ev.past{opacity:.55}
.hc-ev b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hc-ev small{color:var(--soft);font-size:11px}
.hc-now{position:absolute;left:-1px;right:0;height:2px;background:var(--bad);z-index:3}
.hc-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--bad)}
.hc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.hc-key{font-size:12px;color:var(--soft)}.hc-key::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:5px;vertical-align:-1px}
@media (max-width:760px){.hub-cal{padding:16px}.hc-hl{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-manage{margin-left:0;width:100%}}

/* days already over this week (Gerb 10-06: "show everything kind of grayed out of what's been completed") */
.hc-col.gone{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.hc-col.gone .hc-ev{opacity:.45;filter:grayscale(.6)}
.hc-dh.gone{opacity:.55}