/* Emma's calendar card. Flat, cream and green, rose accents. Used on the home hub and on Olive's page. */
.cal{display:flex; flex-direction:column; gap:12px}
.cal [hidden]{display:none!important}
.cal-main{display:flex; flex-direction:column; gap:14px}
.cal-gate{margin-bottom:2px}
.cal-bar{padding-bottom:2px}
.cal-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.cal-nav{display:flex; gap:6px}
.cal-nav button,.cal-refresh,.cal-seg button,.cal-legend button{font:500 14px var(--font-body); border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:7px 14px; cursor:pointer}
.cal-nav button:hover,.cal-refresh:hover,.cal-seg button:hover,.cal-legend button:hover,.cal-nav button:focus-visible{border-color:#E23260}
.cal-nav button[aria-label]{width:36px; padding:7px 0; font-size:18px; line-height:1}
.cal-title{font:400 22px var(--font-display); color:var(--green); margin:0; flex:1; min-width:180px}
.cal-seg{display:flex}
.cal-seg button{border-radius:0}
.cal-seg button:first-child{border-radius:999px 0 0 999px} .cal-seg button:last-child{border-radius:0 999px 999px 0; margin-left:-1px}
.cal-seg button[aria-pressed="true"]{background:#1E3309; color:#FFF9F4; border-color:#1E3309}
.cal-refresh{color:var(--muted)}
.cal-legend{display:flex; flex-wrap:wrap; gap:6px}
.cal-legend button{display:inline-flex; align-items:center; gap:7px; padding:4px 11px; font-size:13px}
.cal-legend button[aria-pressed="false"]{opacity:.45}
.cal-legend i,.chip i{display:inline-block; width:10px; height:10px; border-radius:50%}
.cal-body{min-height:60px}
.cal-empty{padding:18px; border-radius:14px; background:var(--mist); color:var(--muted); text-align:center; font-size:14px}
.cal-note{font-size:14px; font-weight:600; color:var(--green); margin:0}
.cal-allday{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border:1.5px solid; border-radius:999px; font-size:13px; background:var(--surface)}

/* day timeline */
.cal-grid{position:relative; margin-left:0; border-top:1px solid var(--line)}
.cal-hour{position:absolute; left:0; right:0; border-top:1px solid var(--line); height:0}
.cal-hour span{position:absolute; left:0; top:-9px; width:52px; padding-right:8px; text-align:right; font:500 11px var(--font-mono); color:var(--muted); background:var(--surface)}
.cal-grid{background:linear-gradient(var(--surface),var(--surface))}
.cal-evs{position:absolute; left:56px; right:0; top:0; bottom:0}
.cal-ev{position:absolute; box-sizing:border-box; padding:4px 8px; border-radius:10px; background:color-mix(in srgb,var(--c) 16%,var(--surface)); border-left:4px solid var(--c); overflow:hidden; font-size:13px; line-height:1.25; color:var(--ink)}
.cal-ev b{display:block; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-ev span{display:block; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-now{position:absolute; left:52px; right:0; height:0; border-top:2px solid #E23260; z-index:3; pointer-events:none}
.cal-now i{position:absolute; left:-6px; top:-6px; width:10px; height:10px; border-radius:50%; background:#E23260}

/* week list */
.cal-week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.cal-col{padding:10px; border-radius:14px; background:var(--mist); border:1px solid var(--line); min-width:0}
.cal-col.today{border-color:#E23260; background:#FFF0F4}
.cal-col h4{font:700 13px var(--font-body); margin:0 0 8px; color:var(--green)}
.cal-col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.cal-col li{display:grid; grid-template-columns:8px 1fr; gap:2px 6px; font-size:12.5px; line-height:1.3}
.cal-col li i{grid-row:1 / span 2; width:6px; height:100%; min-height:28px; border-radius:3px}
.cal-col li .t{color:var(--muted); font:500 11px var(--font-mono)}
.cal-col li .n{overflow-wrap:anywhere}
.cal-col .none{margin:0; color:var(--muted); font-size:12.5px}
@media (max-width:1100px){.cal-week{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media (max-width:700px){.cal-title{flex-basis:100%; order:-1; font-size:20px}}

/* unlock */
.cal-gate{padding:16px; border-radius:14px; background:var(--mist)}
.cal-gate p{margin:0 0 10px; color:var(--muted); font-size:14px}
.cal-gate form{display:flex; flex-wrap:wrap; gap:8px}
.cal-gate input{flex:1; min-width:160px; max-width:280px; font:inherit; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink)}
.cal-gate .cal-err{margin:8px 0 0; color:var(--warn); font-weight:600}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cal-col.today{background:#3A1F28}}

.cal-ev.short{display:flex; align-items:baseline; gap:8px; padding-top:2px; padding-bottom:2px}
.cal-ev.short b{flex:0 1 auto; min-width:0}
.cal-ev.short span{flex:none}