/* The calendar, to the Bridge's calendar rules: the header is one 50px line,
 * in Day and Week the grid starts at 127px (50 + the 50px day heads + the
 * 27px all-day band), the hour is 56px. Nothing above the grid; no text in it
 * but time; no day dividers; one hue per kind of time; one saturated chip, and
 * that one is next. The month, the calendars and the tiles live in the lane
 * menu. */

.cal{--gut:58px; --cols:7}
.cal.v-day{--cols:1}
.cal .bar{flex:0 0 50px; height:50px; min-height:50px; padding-top:0; padding-bottom:0}
.cal .bar .gcap.title{padding:4px 12px}
.wknav{display:inline-flex; align-items:center; gap:2px}
.wknav .icbtn{width:26px; height:26px}
.wklabel{font:550 13px/18px var(--sans); white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.cal-views > button{min-width:52px; justify-content:center}

/* ------------------------------------------------------------ day and week */
.cal-days, .cal-ad{display:grid; grid-template-columns:var(--gut) repeat(var(--cols), minmax(0,1fr)); padding-right:var(--sbw, 10px)}
.cal-days{flex:0 0 50px; height:50px; border-bottom:1px solid var(--sep)}
.cal-ad{flex:0 0 27px; height:27px; border-bottom:1px solid var(--sep); background:var(--fill3)}
.dh{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; padding:0 10px; margin:4px 2px; text-align:left;
  border-radius:10px; transition:background var(--d-state) var(--spring)}
.dh:hover{background:var(--fill3)}
.dh:active{background:var(--fill2)}
.dh .dow{font:600 9.5px/12px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--t3)}
.dh .dnum{font:550 17px/18px var(--sans); letter-spacing:-.03em; color:var(--t2); transition:color var(--d-state) var(--spring)}
.dh:hover .dnum{color:var(--t1)}
.dh.today .dow{color:var(--red-ink)}
.dh.today .dnum{color:var(--t1)}
.dh.wknd .dnum{color:var(--t3)}
.adc{padding:3px 2px; min-width:0; display:flex; gap:2px}
.adp{--c:var(--tint); height:20px; border-radius:5px; padding:0 7px; font:500 10.5px/20px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;
  background:color-mix(in srgb, var(--c) 18%, transparent); color:color-mix(in srgb, var(--c) var(--ink-k), var(--ink-to)); text-align:left;
  transition:background var(--d-state) var(--spring)}
.adp:hover{background:color-mix(in srgb, var(--c) 28%, transparent)}

.cal-wrap{flex:1; min-height:0; overflow-y:scroll; overflow-x:hidden; position:relative; scrollbar-gutter:stable}
.cal-grid{display:grid; grid-template-columns:var(--gut) repeat(var(--cols), minmax(0,1fr)); position:relative;
  background-image:linear-gradient(to bottom, var(--sep) 1px, transparent 1px);
  background-size:calc(100% - var(--gut)) 56px; background-position:var(--gut) -1px; background-repeat:repeat-y}
.gut{position:relative}
.gut .hr{position:absolute; right:9px; transform:translateY(-50%); font:400 10px/12px var(--mono); color:var(--t3); letter-spacing:.02em}
.col{position:relative; min-width:0}
/* the hours either side of the working day recede */
.col::before{content:""; position:absolute; left:0; right:0; top:0; height:calc(8 * 56px); background:var(--fill3); opacity:.6; pointer-events:none}
.col::after{content:""; position:absolute; left:0; right:0; top:calc(19 * 56px); bottom:0; background:var(--fill3); opacity:.6; pointer-events:none}
.col.wknd{background:color-mix(in srgb, var(--fill3) 70%, transparent)}
.col.today{background:linear-gradient(to bottom, color-mix(in srgb, var(--red) 4%, transparent), transparent 240px)}

.ev{--c:var(--tint); position:absolute; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:1px; overflow:hidden; text-align:left;
  padding:3px 7px 3px 9px; border-radius:6px;
  background:color-mix(in srgb, var(--c) 15%, var(--card-solid));
  color:color-mix(in srgb, var(--c) var(--ink-k), var(--ink-to));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), inset 3px 0 0 -1px var(--c);
  transition:background var(--d-state) var(--spring), transform var(--d-press) var(--ease-press), box-shadow var(--d-state) var(--spring), opacity var(--d-state) var(--spring)}
.ev:hover{background:color-mix(in srgb, var(--c) 24%, var(--card-solid)); z-index:5}
.ev:active{transform:scale(.985)}
.ev:focus-visible{outline:2px solid var(--c); outline-offset:1px; z-index:5}
.ev[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--c), inset 3px 0 0 -1px var(--c); z-index:4}
.ev .t{font:550 12px/15px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.ev .m{font:450 10.5px/13px var(--sans); opacity:.82; white-space:nowrap}
.ev.short{flex-direction:row; align-items:center; gap:6px; padding-top:1px; padding-bottom:1px}
.ev.short .m{margin-left:auto}
.ev.past{opacity:.6}
.ev.past:hover{opacity:.85}
/* one saturated chip: what's next, the only rim light on the page */
.ev.next{background:var(--c); color:var(--cal-next-ink, #0A0A0B);
  box-shadow:0 8px 22px -8px color-mix(in srgb, var(--c) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.22)}
.ev.next:hover{background:color-mix(in srgb, var(--c) 90%, white)}
.ev.next .m{opacity:.9}
[data-theme="light"] .ev.next{--cal-next-ink:#fff}
.v-week .cal-grid .ev, .v-day .cal-grid .ev{animation:chipin var(--d-state) var(--spring) backwards}
.gap{position:absolute; left:3px; right:3px; z-index:1; border-radius:6px; cursor:copy;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent) 0 6px, color-mix(in srgb, var(--green) 6%, transparent) 6px 12px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); transition:background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring);
  animation:fadein var(--d-state) var(--spring) backwards}
.gap:hover{background:color-mix(in srgb, var(--green) 20%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, transparent)}
.gap:active{background:color-mix(in srgb, var(--green) 28%, transparent)}
.nowl{position:absolute; left:0; right:0; z-index:6; height:0; border-top:1.5px solid var(--red); pointer-events:none}
.nowl::before{content:""; position:absolute; left:-4px; top:-4.5px; width:7px; height:7px; border-radius:50%; background:var(--red); animation:nowdot 2.6s ease-out infinite}
html.woke .nowl::before{animation:none}
/* the day view reads wider: the title and the time on one line */
.v-day .ev{padding-left:12px}
.v-day .ev .t{font-size:13px; line-height:17px}

/* ------------------------------------------------------------ month */
.cal-mhead{flex:0 0 30px; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); align-items:center; border-bottom:1px solid var(--sep); padding:0 6px}
.cal-mhead span{font:600 9.5px/12px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--t3); padding:0 8px}
.cal-mhead span.wknd{color:color-mix(in srgb, var(--t3) 75%, transparent)}
.cal-month{flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); grid-template-rows:repeat(6, minmax(96px, 1fr));
  gap:1px; padding:0 6px 6px; animation:cellin var(--d-seg) var(--spring) backwards}
.mc{min-width:0; min-height:0; display:flex; flex-direction:column; gap:2px; padding:4px 4px 6px; border-radius:10px; overflow:hidden;
  transition:background var(--d-state) var(--spring)}
.mc:hover{background:var(--fill3)}
.mc.wknd{background:color-mix(in srgb, var(--fill3) 55%, transparent)}
.mc.wknd:hover{background:var(--fill3)}
.mc.out .mnum{color:var(--t3); opacity:.6}
.mc.out .mpill{opacity:.55}
.mnum{align-self:flex-start; min-width:24px; height:22px; padding:0 6px; border-radius:var(--r-full); font:550 12px/22px var(--sans); color:var(--t2); text-align:center;
  transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring)}
.mnum:hover{background:var(--fill2); color:var(--t1)}
.mc.today .mnum{background:var(--red); color:#fff}
.mc.today .mnum:hover{background:color-mix(in srgb, var(--red) 88%, white)}
.mpill{--c:var(--tint); display:flex; align-items:center; gap:5px; min-width:0; height:20px; padding:0 6px; border-radius:5px; text-align:left;
  font:500 11px/20px var(--sans); color:var(--t1); white-space:nowrap; overflow:hidden;
  transition:background var(--d-state) var(--spring), opacity var(--d-state) var(--spring)}
.mpill::before{content:""; width:6px; height:6px; border-radius:50%; flex:0 0 auto; background:var(--c)}
.mpill:hover{background:color-mix(in srgb, var(--c) 16%, transparent)}
.mpill:active{background:color-mix(in srgb, var(--c) 24%, transparent)}
.mpill.ad{background:color-mix(in srgb, var(--c) 18%, transparent); color:color-mix(in srgb, var(--c) var(--ink-k), var(--ink-to))}
.mpill.ad::before{display:none}
.mpill.past{opacity:.6}
.mpill .mt{font-size:10px; color:var(--t3); flex:0 0 auto}
.mmore{align-self:flex-start; padding:0 6px; height:18px; border-radius:5px; font:500 10.5px/18px var(--sans); color:var(--t2);
  transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring)}
.mmore:hover{background:var(--fill2); color:var(--t1)}
.mdots{display:flex; gap:3px; justify-content:center; margin-top:auto}
.mdots i{width:5px; height:5px; border-radius:50%; background:var(--c)}

/* ------------------------------------------------------------ agenda */
.cal-ag{animation:cellin var(--d-seg) var(--spring) backwards}
.ag{display:flex; flex-direction:column; padding:6px 20px 28px; max-width:1040px}
.ag-day{display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--sep)}
.ag-day:last-child{border-bottom:0}
.ag-h{display:flex; align-items:baseline; gap:6px; align-self:start; padding:6px 8px; border-radius:10px; text-align:left;
  transition:background var(--d-state) var(--spring)}
.ag-h:hover{background:var(--fill3)}
.ag-dow{font:600 10px/12px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--t3)}
.ag-num{font:650 20px/24px var(--sans); letter-spacing:-.03em; color:var(--t1)}
.ag-mon{font:500 12px/16px var(--sans); color:var(--t2)}
.ag-h .n{display:none}
.ag-day.today .ag-dow{color:var(--red-ink)}
.ag-day.today .ag-num{color:var(--red-ink)}
.ag-list{display:flex; flex-direction:column; gap:2px; min-width:0}
.ag-row{--c:var(--tint); display:grid; grid-template-columns:118px 8px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:38px; padding:6px 10px;
  border-radius:var(--r-row); text-align:left; color:var(--t1); transition:background var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
.ag-row:hover{background:var(--fill3)}
.ag-row:active{transform:scale(.995); background:var(--fill2)}
.ag-row[aria-pressed="true"]{background:color-mix(in srgb, var(--c) 16%, transparent)}
.ag-row.past{opacity:.6}
.ag-row.past:hover{opacity:.85}
.ag-row.next{background:color-mix(in srgb, var(--c) 14%, transparent); box-shadow:inset 3px 0 0 -1px var(--c)}
.ag-t{font-size:11.5px; color:var(--t2)}
.ag-sw{width:8px; height:8px; border-radius:50%; background:var(--c)}
.ag-tt{font:550 13px/18px var(--sans)}
.ag-loc{font-size:12px; color:var(--t2); max-width:200px}
.ag-row .g-faces{justify-self:end}

/* ------------------------------------------------------------ the lane menu */
.cal-lm .lm-sc{padding-top:12px}
.mm{padding:0 4px 6px}
.mm-h{display:flex; align-items:center; gap:2px; padding:0 0 6px 4px}
.mm-h b{font:600 13px/18px var(--sans); letter-spacing:-.005em}
.mm-h .icbtn{width:24px; height:24px; border-radius:7px}
.mm-h .icbtn svg{width:13px; height:13px}
.mm-g{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); row-gap:1px}
.mm-w{font:600 9px/18px var(--sans); color:var(--t3); text-align:center; letter-spacing:.04em}
.mm-d{position:relative; height:26px; font:500 11.5px/26px var(--sans); color:var(--t1); text-align:center; border-radius:7px; font-variant-numeric:tabular-nums;
  transition:background var(--d-state) var(--spring), color var(--d-state) var(--spring)}
.mm-d:hover{background:var(--fill2)}
.mm-d:active{background:var(--fill)}
.mm-d.out{color:var(--t3)}
.mm-d.in{background:var(--tint-soft); color:var(--tint-ink); border-radius:0}
.mm-d.in:hover{background:color-mix(in srgb, var(--tint) 26%, transparent)}
.mm-g > .mm-d.in:nth-child(7n+1), .mm-d.in.start{border-top-left-radius:7px; border-bottom-left-radius:7px}
.mm-g > .mm-d.in:nth-child(7n), .mm-d.in.end{border-top-right-radius:7px; border-bottom-right-radius:7px}
.mm-d.today{color:var(--red-ink); font-weight:700}
.mm-d.has::after{content:""; position:absolute; left:50%; bottom:3px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:currentColor; opacity:.55}
.mm-d:focus-visible{outline:2px solid var(--tint); outline-offset:-2px}
.cal-k .gl{width:18px}
.cal-sw{display:block; width:10px; height:10px; border-radius:3px; background:var(--c); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, black);
  transition:background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring), transform var(--d-press) var(--ease-press)}
.cal-k:hover .cal-sw{transform:scale(1.15)}
.cal-k[aria-pressed="false"]{color:var(--t3)}
.cal-k[aria-pressed="false"] .cal-sw{background:transparent; box-shadow:inset 0 0 0 1.5px var(--c)}
.cal-k[aria-pressed="false"] .n{opacity:.6}
.cal-kd{display:inline-flex; align-items:center; gap:8px}
.cal-kd .cal-sw{width:9px; height:9px}
/* the tiles stack in the menu's column */
.cal-lm .ins-host{padding:14px 0 4px}
.cal-lm .ins-top{flex-wrap:nowrap; gap:4px}
.cal-lm .ins-top .spacer{display:none}
.cal-lm .ins-story{flex:1 1 auto; min-width:0; max-width:none}
.cal-lm .ins-chip{max-width:120px}
.cal-lm .ins-row{grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); overflow:visible; gap:6px}
.cal-lm .ins-t{padding:9px 11px 8px}
.cal-lm .ins-t .fig{font-size:20px; line-height:24px}

@media (prefers-reduced-motion: reduce){
  /* the calendar: chips and cells are simply there; the now dot holds still */
  .v-week .cal-grid .ev, .v-day .cal-grid .ev, .gap, .cal-month, .cal-ag{animation:none}
  .nowl::before{animation:none}
  .ev:active, .ag-row:active, .cal-k:hover .cal-sw{transform:none}
}

/* desks narrower than the three columns: the menu folds away */
@media (max-width: 1100px) and (min-width: 431px){
  .cal-lm{display:none}
  .cal-lm + .sheet{border-radius:var(--r-pane); border-left-color:var(--glass-line)}
  .cal .wklabel{display:none}
}

/* ------------------------------------------------------------ the phone */
@media (max-width: 430px){
  .cal .bar{flex:0 0 auto; height:auto; min-height:46px; flex-wrap:wrap; padding:6px 12px 8px; gap:6px; row-gap:6px}
  .cal .bar .gcap.title{display:none}
  .cal .wklabel{flex:1; font-size:12px; color:var(--t2)}
  .cal .bar .spacer{display:none}
  .cal-views{order:5; flex:1 0 100%; min-width:0}
  .cal-views > button{min-width:0; flex:1; padding:0 6px}
  .mmore{display:none}
  .ag-end{display:none}
  .ph-hide-i, .cal .ph-hide{display:none}
  .cal{--gut:44px}
  .dh{align-items:center; padding:0; cursor:pointer; margin:3px 1px}
  .dh[aria-pressed="true"]{background:var(--tint-soft)}
  .dh[aria-pressed="true"] .dnum{color:var(--tint-ink)}
  .v-day .dh[aria-pressed="true"]{background:none}
  .v-day .dh[aria-pressed="true"] .dnum{color:var(--t1)}
  .v-week .cal-ad, .v-week .cal-grid{grid-template-columns:var(--gut) minmax(0,1fr)}
  .v-week .cal-ad .adc, .v-week .cal-grid .col{display:none}
  .v-week .cal-ad[data-sel="0"] .adc[data-col="0"], .v-week .cal-ad[data-sel="1"] .adc[data-col="1"], .v-week .cal-ad[data-sel="2"] .adc[data-col="2"],
  .v-week .cal-ad[data-sel="3"] .adc[data-col="3"], .v-week .cal-ad[data-sel="4"] .adc[data-col="4"], .v-week .cal-ad[data-sel="5"] .adc[data-col="5"],
  .v-week .cal-ad[data-sel="6"] .adc[data-col="6"]{display:flex}
  .v-week .cal-grid[data-sel="0"] .col[data-col="0"], .v-week .cal-grid[data-sel="1"] .col[data-col="1"], .v-week .cal-grid[data-sel="2"] .col[data-col="2"],
  .v-week .cal-grid[data-sel="3"] .col[data-col="3"], .v-week .cal-grid[data-sel="4"] .col[data-col="4"], .v-week .cal-grid[data-sel="5"] .col[data-col="5"],
  .v-week .cal-grid[data-sel="6"] .col[data-col="6"]{display:block}
  .cal-days, .cal-ad{padding-right:0}
  .cal-mhead{padding:0 2px}
  .cal-mhead span{padding:0; text-align:center}
  .cal-month{grid-template-rows:repeat(6, minmax(54px, 1fr)); padding:0 2px 6px}
  .mc{align-items:center; padding:4px 2px}
  .mnum{align-self:center}
  .ag{padding:4px 16px 24px}
  .ag-day{grid-template-columns:1fr; gap:4px}
  .ag-h{padding:4px 0}
  .ag-row{grid-template-columns:40px 8px minmax(0,1fr) auto; gap:8px; padding:6px 8px}
  .ag-t{font-size:11px}
  .cal-ag .ins-host{padding:8px 0 4px}
}