/* The calendar core's look (public/cal/core.js): the header, the time grid, events, Month, the small month. Loaded after
   the app's styles.css (the order these rules always had over the app's own), so the app adapts the calendar with its own
   more specific rules. Uses the app's colour tokens (--ink, --panel, --line, --muted, --ui). */
.wk-day{height:22px;font:600 12px var(--ui);text-align:center}
.bd-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bd-step{all:unset;cursor:pointer;font:500 22px var(--ui);padding:0 6px;color:var(--muted)}
.bd-step:hover{color:var(--ink)}
.bd-date{font:700 18px var(--ui)}
.bd-today{margin-left:auto}
.bd-hours{position:relative;height:14px;font:11px var(--ui);color:var(--muted)}
.bd-hours span{position:absolute;transform:translateX(-50%)}
.bd-track{position:relative;height:36px;border-radius:8px;background-image:linear-gradient(90deg,transparent calc(100% - 1px),var(--line) calc(100% - 1px))}
.bd-blk{all:unset;cursor:pointer;box-sizing:border-box;position:absolute;top:3px;bottom:3px;border-radius:7px;display:grid;place-items:center;font:600 11px var(--ui);white-space:nowrap;overflow:hidden;padding:0 4px}
.bd-blk.done{background:color-mix(in srgb,var(--ink) 14%,var(--panel));color:var(--muted)}
.bd-blk.now{background:var(--ink);color:var(--panel);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink)}
.bd-blk.later{border:1.5px solid var(--ink);background:var(--panel);color:var(--ink)}
.bd-blk:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bd-now{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);border-radius:2px;pointer-events:none}
.bd-blk.busy{background:color-mix(in srgb,var(--ink) 9%,var(--panel));color:var(--muted);border:0;font-weight:500}
.bd-nav{flex-wrap:wrap}
.bd-views{display:inline-flex;gap:4px;margin-left:auto}
.bd-today + .bd-views{margin-left:8px}
.bm-head{display:grid;grid-template-columns:var(--mcols);font:600 11px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.bm-head span{padding:0 6px}
.bm-grid{display:grid;grid-auto-rows:116px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.bm-week{display:grid;grid-template-columns:var(--mcols);min-height:0;overflow:hidden;row-gap:1px;padding-bottom:2px;border-bottom:1px solid var(--line)}
.bm-day{grid-row:1/-1;border-right:1px solid var(--line);margin-bottom:-2px;background:var(--panel);background-repeat:no-repeat;background-position:right -6px bottom -6px;background-size:70% auto;position:relative;min-width:0}
.bm-day.bookable{cursor:pointer}
.bm-day.bookable:hover{background-color:color-mix(in srgb,var(--ink) 3%,var(--panel))}
.bm-day.wkend{background-color:color-mix(in srgb,var(--ink) 2.5%,var(--panel))}
.bm-day.out{background-color:color-mix(in srgb,var(--ink) 4%,var(--panel))}
.bm-n{all:unset;grid-row:1;justify-self:center;align-self:start;margin-top:3px;z-index:1;cursor:pointer;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;border-radius:11px;font:600 12px/22px var(--ui);text-align:center;color:var(--ink)}
.bm-n:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.bm-n:focus-visible{outline:2px solid var(--ink)}
.bm-day.out + .bm-n,.bm-day.past + .bm-n{color:var(--muted)}
.bm-day.today + .bm-n{background:var(--ink);color:var(--panel)}
.bm-bar{all:unset;box-sizing:border-box;z-index:1;margin:0 3px;padding:0 6px;height:18px;border-radius:4px;font:600 11px/18px var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;background:color-mix(in srgb,var(--who,var(--muted)) 16%,var(--panel));color:var(--ink);border-left:3px solid var(--who,var(--muted))}
button.bm-bar{cursor:pointer}
.bm-bar.out{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--who,var(--muted)) 14%,var(--panel)) 0 6px,color-mix(in srgb,var(--who,var(--muted)) 22%,var(--panel)) 6px 8px)}
.bm-bar.hol,.bm-bar.cel{--who:var(--m-gold)}
.bm-bar.vis{background:color-mix(in srgb,var(--who,var(--muted)) 26%,var(--panel));font-weight:700}
.bm-list{grid-row:-2/-1;z-index:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:0 3px;pointer-events:none}
.bm-list > *,.bm-n,.bm-bar{pointer-events:auto}
.bm-ev{all:unset;box-sizing:border-box;flex:none;display:flex;align-items:center;gap:4px;height:18px;padding:0 4px;border-radius:4px;font:500 11.5px/18px var(--ui);color:var(--ink);white-space:nowrap;overflow:hidden;cursor:pointer;min-width:0}
.bm-ev[hidden]{display:none}
.bm-ev:hover{background:color-mix(in srgb,var(--who,var(--ink)) 12%,transparent)}
.bm-ev > i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--who,var(--muted))}
.bm-ev.past{color:var(--muted)}
.bm-ev.busy,.bm-ev.outl{color:var(--muted)}
.bm-ev.outl{cursor:default}
.bm-ev.now{font-weight:700}
.bm-ev.now > i{box-shadow:0 0 0 2px color-mix(in srgb,var(--who) 30%,transparent)}
.bm-ev.busy > i,.bm-ev.outl > i{background:none;box-shadow:inset 0 0 0 1px var(--who,var(--muted))}
.bm-more{all:unset;flex:none;white-space:nowrap;height:18px;padding:0 4px;border-radius:4px;font:600 11px/18px var(--ui);color:var(--ink);cursor:pointer;pointer-events:auto}
.bm-more:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.bm-pop{position:fixed;z-index:58;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:10px 8px 10px;display:flex;flex-direction:column;gap:6px;max-height:min(70vh,520px);box-sizing:border-box}
.bm-pop-h{display:flex;flex-direction:column;align-items:center;font:600 11px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bm-pop-h .bm-n{align-self:center;font-size:20px;line-height:36px;height:36px;min-width:36px;border-radius:18px;margin:0;text-transform:none;letter-spacing:0}
.bm-pop-list{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
.bm-pop-list .bm-bar{margin:0 0 2px;flex:none}
@media (max-width:600px){.bm-grid{grid-auto-rows:84px}.bm-more span{display:none}.bm-ev{font-size:10.5px;padding:0 2px;gap:3px}.bm-bar{font-size:10px;padding:0 3px;margin:0 1px}.bm-n{font-size:11px}}
.bd-blk.roomy{place-items:center start;align-content:center;justify-items:start;padding:4px 8px;white-space:normal;text-align:left;line-height:1.2;gap:1px;font-size:12px}
.bd-blk.roomy small{font:500 10.5px var(--ui);opacity:.75}
.bd-blk.roomy span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (min-width:980px){.bd-lanes.vert .bd-cols{display:grid;grid-template-columns:52px repeat(var(--n),minmax(150px,1fr));gap:0 8px;align-items:stretch}.bd-lanes.vert .bd-track{height:clamp(520px,calc(100vh - 380px),1100px);border-radius:10px;background-color:color-mix(in srgb,var(--ink) 2.5%,transparent);background-image:linear-gradient(180deg,transparent calc(100% - 1px),var(--line) calc(100% - 1px))}.bd-lanes.vert .bd-row:not(.bd-scale) .bd-track{box-shadow:inset 0 0 0 1px var(--line)}.bd-lanes.vert .bd-scale{padding-top:74px}.bd-lanes.vert .bd-scale > span{display:none}.bd-lanes.vert .bd-hours{height:clamp(520px,calc(100vh - 380px),1100px)}.bd-lanes.vert .bd-hours span{left:auto!important;right:6px;top:var(--p);transform:translateY(-50%)}.bd-lanes.vert .bd-blk{top:auto;bottom:auto;left:0;border-radius:8px;box-sizing:border-box;border:2px solid var(--panel)}.bd-lanes.vert .bd-blk.roomy{place-items:start;align-content:start;padding:5px 8px}.bd-lanes.vert .bd-now{top:auto;left:0;right:0;width:auto;height:2px}}
@media (min-width:980px){.bd-lanes.vert .bd-now{bottom:auto}}
@media (min-width:980px){.bd-lanes.vert .bd-track{width:100%}}
.bd-lanes.vert .bd-track{isolation:isolate}
@media (min-width:980px){.bd-lanes.vert .bd-cols{flex:1;min-height:0;overflow:auto;position:relative}.bd-lanes.vert .bd-track,.bd-lanes.vert .bd-hours{height:calc(var(--hrs, 12) * 64px)}.bd-lanes.vert .bd-scale{padding-top:72px}}
@media (min-width:980px){.bd-lanes.vert .bd-cols{align-content:start}}
@media (min-width:980px){.bd-lanes.vert > .bd-cols{flex:1 1 0!important}}
.bd-blk.roomy{container-type:size}
.bd-in{display:grid;gap:1px;min-width:0;width:100%}
.bd-in>span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@container (max-height:30px){.bd-in{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bd-in>small{margin-right:4px}.bd-in>span{display:inline}}
.bd-blk.roomy .bd-in > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.bd-nav .bd-today{margin-left:0}
.bd-nav .bd-views{margin-left:auto}
@media (min-width:601px) and (max-width:979px){.bd-views [data-view="week"]{display:none}}
@media (max-width:600px){.bd-views [data-view="month"]{display:none}}
.bd-lanes.vert .bd-track[data-date]{cursor:cell}
.bd-lanes.vert .bd-blk.qc-ghost,.bd-blk.qc-ghost{border:1.5px dashed var(--ink);background:var(--panel);color:var(--ink);pointer-events:none;z-index:4;left:0;width:100%}
.bd-lanes.vert .bd-blk.dragging{z-index:6;opacity:.9;box-shadow:0 8px 20px rgba(0,0,0,.18);cursor:grabbing;transition:none}
.bd-lanes.vert .bd-blk:not(.busy):not(.qc-ghost)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.bd-lanes.vert .wk-dayhead{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:6px;min-height:40px;padding:4px 2px;position:sticky;top:0;z-index:3;background:var(--panel)}
.wk-dayhead .wk-dn{font:600 12px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.wk-dayhead b{font:700 20px var(--ui)}
.wk-day.today .wk-dayhead b{background:var(--ink);color:var(--panel);border-radius:6px;padding:0 6px}
.wk-day.past .wk-dayhead b{color:var(--muted)}
.bd-lanes.vert .wk-blk{background:color-mix(in srgb,var(--who) 13%,var(--panel));color:var(--ink);border:2px solid var(--panel);border-left:3px solid var(--who);box-shadow:none}
.bd-lanes.vert .wk-blk.done{background:color-mix(in srgb,var(--who) 6%,var(--panel));color:var(--muted)}
.bd-lanes.vert .wk-blk.now{background:color-mix(in srgb,var(--who) 26%,var(--panel))}
.bd-lanes.vert .wk-blk.busy{background:color-mix(in srgb,var(--ink) 6%,var(--panel));border-left-color:var(--muted)}
.bd-week-v .bd-cols{grid-template-columns:52px repeat(var(--n),minmax(120px,1fr))}
.bd-week-v .bd-scale{padding-top:52px}
.bd-lanes.vert .wk-blk.short{padding:2px 8px}
.wk-blk.short .bd-in{display:flex;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:baseline}
@media (max-width:979px){.bd-nav .bd-date{order:5;flex-basis:100%}}
.qc-ghost.short .bd-in{display:flex;gap:6px;align-items:baseline;white-space:nowrap;overflow:hidden}
.bd-lanes.vert .bd-blk.qc-ghost.short{padding:2px 8px}
.qc-ghost.short .bd-in > span,.wk-blk.short .bd-in > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bd-lanes.vert .wk-blk{z-index:1}
.bd-lanes.vert .wk-blk.tight{padding:3px 5px}
.bd-lanes.vert .wk-blk.tight small{display:none}
.bd-lanes.vert .wk-blk.tight .bd-in > span{font-size:11px;line-height:1.2;word-break:break-word}
.bd-lanes.vert .bd-blk.wk-busyblk{z-index:0;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--ink) 5%,transparent) 6px 7px);border:0;border-left:2px solid color-mix(in srgb,var(--who) 50%,transparent);color:var(--muted);font:500 11px var(--ui);place-items:start;padding:6px 8px;box-shadow:none}
@media (min-width:980px){.bd-lanes.vert .bd-row .wk-dayhead{flex:none;min-height:0;height:40px;box-sizing:content-box;padding:2px;align-items:center}.bd-lanes.vert .bd-scale,.bd-week-v .bd-scale{padding-top:62px}}
.bd-lanes.vert .bd-row.wk-day{height:auto}
@media (min-width:980px){.bd-lanes.vert.bd-week-v .bd-cols{grid-template-columns:44px repeat(var(--n),minmax(96px,1fr));gap:0 6px}.bd-lanes.vert:not(.bd-week-v) .bd-cols{grid-template-columns:44px repeat(var(--n),minmax(150px,1fr))}}
.wk-allday{position:relative;flex:none}
.wk-allday .bm-bar{position:absolute;left:0;right:0;margin:0}
.wk-allday .bm-bar.cont{left:-20px;border-top-left-radius:0;border-bottom-left-radius:0}
.wk-allday .bm-bar.goes{border-top-right-radius:0;border-bottom-right-radius:0}
.wk-allday button.bm-bar{cursor:pointer}
.bd-lanes.vert .wk-allday{position:sticky;top:48px;z-index:29;background:var(--panel);box-shadow:0 -8px 0 var(--panel)}
.bd-lanes.vert .bd-blk.wk-busyblk{background:repeating-linear-gradient(135deg,var(--panel) 0 6px,color-mix(in srgb,var(--ink) 6%,var(--panel)) 6px 7px);border:2px solid var(--panel);border-left:2px solid color-mix(in srgb,var(--who) 50%,transparent)}
.wk-allday .bm-bar{text-align:left}
.wk-allday .bm-bar.cont{border-left-color:transparent}
.bd-lanes:not(.vert) .bd-blk:not(.qc-ghost){border-left:3px solid var(--who,var(--ink))}
.bd-lanes:not(.vert) .bd-blk.later{background:color-mix(in srgb,var(--who,var(--ink)) 10%,var(--panel))}
.bm-day.drop{box-shadow:inset 0 0 0 2px var(--ink)}
.bd-past{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--line) 55%,transparent) 0 6px,transparent 6px 12px);pointer-events:none;z-index:0}
.cal-mini{display:none}
/* The small month: shown when the calendar says so (has-mini: tx on wide screens; createCalendar's `mini`). */
.board.has-mini{position:relative;padding-left:212px}
.board.has-mini > .cal-mini{display:block;position:absolute;left:0;top:0;width:196px;font:13px var(--ui);color:var(--ink)}
.cal-mini .cm-head{display:flex;align-items:center;gap:2px;padding:6px 4px 8px 8px}
.cal-mini .cm-head span{flex:1;font-weight:600}
.cal-mini .cm-step{all:unset;cursor:pointer;width:26px;height:26px;border-radius:50%;text-align:center;line-height:26px;font-size:16px}
.cal-mini .cm-step:hover,.cal-mini .cm-d:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.cal-mini .cm-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px;text-align:center}
.cal-mini .cm-wd{font-size:11px;color:var(--muted, #888);padding:2px 0}
.cal-mini .cm-d{all:unset;cursor:pointer;width:26px;height:26px;margin:auto;border-radius:50%;line-height:26px;font-size:12px;font-variant-numeric:tabular-nums}
.cal-mini .cm-d.out{color:var(--muted, #999)}
.cal-mini .cm-d.on{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.cal-mini .cm-d.today{background:var(--ink);color:var(--panel);font-weight:600}
/* Defaults for an app without its own buttons (zero specificity: any rule of the app's wins): the header's Today and
   views as round outlined buttons, the chosen view filled. */
:where(.board) :where(.bd-today, .bd-views .chip){font:500 13px var(--ui);padding:6px 14px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);cursor:pointer}
:where(.board) :where(.bd-views .chip[aria-pressed="true"]){background:var(--ink);color:var(--panel);border-color:var(--ink)}
:where(.board) :where(.bd-views){display:flex;gap:4px}
/* A phone: the days (or the people) side by side filling the width, a narrow hour scale, the hours scrolling inside.
   The same rules tx has for its #board (styles.css), here for any app; tx's own (#board) outrank these with the same values. */
@media (max-width:600px){
  .board > .bd-week-v{margin-top:4px}
  .board .bd-week-v .bd-cols{display:grid;grid-template-columns:28px repeat(var(--n),minmax(0,1fr));gap:0 2px;align-items:start;max-height:calc(100dvh - 230px);overflow:auto;position:relative;overscroll-behavior:contain}
  .board .bd-week-v .bd-row{display:flex;flex-direction:column;gap:2px;padding:0;border-top:0;background:none!important;min-width:0;height:auto}
  .board .bd-week-v .bd-row .wk-dayhead{position:sticky;top:0;z-index:3;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:40px;min-height:0;padding:0;width:100%;border:0;font:500 11px var(--ui);color:var(--muted)}
  .board .bd-week-v .bd-row .wk-dayhead b{font:600 14px var(--ui);color:var(--ink)}
  .board .bd-week-v .wk-day.today .wk-dayhead b{color:var(--panel);background:var(--ink);border-radius:6px;padding:0 5px}
  .board .bd-week-v .wk-allday{position:sticky;top:40px;z-index:2;background:var(--panel)}
  .board .bd-week-v .wk-allday .bm-bar{font-size:9px;overflow:hidden;white-space:nowrap}
  .board .bd-week-v .bd-track,.board .bd-week-v .bd-hours{height:calc(var(--hrs,12) * 48px);width:100%}
  .board .bd-week-v .bd-track{position:relative;border-radius:6px;background-color:color-mix(in srgb,var(--ink) 2.5%,transparent);background-image:linear-gradient(180deg,transparent calc(100% - 1px),var(--line) calc(100% - 1px));box-shadow:inset 0 0 0 1px var(--line)}
  .board .bd-week-v .bd-scale{display:flex;padding-top:42px}
  .board .bd-week-v .bd-track,.board .bd-week-v .bd-hours{display:block}
  .board .bd-week-v .bd-scale > span{display:none}
  .board .bd-week-v .bd-hours{position:relative}
  .board .bd-week-v .bd-hours span{left:auto!important;right:3px;top:var(--p);transform:translateY(-50%);font-size:9.5px}
  .board .bd-week-v .bd-blk{position:absolute;top:auto;bottom:auto;left:0;border-radius:4px;box-sizing:border-box;border:1px solid var(--panel);padding:2px 3px;font-size:10px;line-height:1.15;overflow:hidden;white-space:normal;place-items:start;align-content:start}
  .board .bd-week-v .bd-blk small{display:none}
  .board .bd-week-v .bd-blk .bd-in > span{font-size:10px;word-break:break-word}
  .board .bd-week-v .bd-now{position:absolute;top:auto;bottom:auto;left:0;right:0;width:auto;height:2px}
}