/* ===========================================================================
   THE CALENDAR, as a workspace. Josh's revised specification, August 2026.
   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS, and why the room moved.

   The Calendar was a document: a masthead, four counters, four dropdowns and
   a docket, poured into the site's 1220px measure. That is the right shell
   for a page you read once. It is the wrong shell for the thing section 102
   asks this room to become - "a return habit", where a subscriber comes back
   to see what changed, what is due, and what it belongs to. The Tracker made
   the same move on 2026-08-28 and this file is its sibling: the ground, the
   shell, the head and the detail panel all come from assets/workspace.css and
   are not restated here. Only the room's own furniture lives in this file.

   WHAT THE MOCKUP GOT RIGHT AND WHAT IS NOT COPIED. The supplied drawing has
   the right INFORMATION ARCHITECTURE - a lane strip, an attention queue above
   the list, decision windows drawn as sequences, a shortcut rail, a glance
   month and a market week. Every one of those is built here. Its PALETTE is
   not: it is a generic neon-on-black dashboard, and this product is the
   Midnight Docket - navy ground, brand green for what is live, steel blue for
   contracts, gold for grants. The tokens all come from style.css.

   THE FOUR ACCENTS, and each one means exactly one thing:

     green   an attendable engagement event. Somebody can be in the room.
     steel   a contract action deadline. The half of the market that signs.
     gold    a grant or assistance action deadline.
     indigo  a forecast window. A date the government has projected, not set.

   A fifth state, `is-declared`, is deliberately colourless: it is what an
   empty lane wears while it names the source it is waiting for. It must not
   look like a fifth kind of data.

   NOTHING IN THIS FILE PAINTS A NUMBER. Every count on this page is measured
   in assets/calendar.js from the data actually in the browser.
   =========================================================================== */

/* ---- the search in the head ------------------------------------------
   The Calendar had no search box at all, which spine.js recorded as data:
   `"calendar.html": { takes: [] }`. It has both now, and the contract has
   been updated to say so. */
.cal-search { position: relative; flex: 1 1 300px; min-width: 190px; max-width: 460px; }
.cal-search input {
  width: 100%; font: inherit; font-size: 13.5px; padding: 9px 12px 9px 34px;
  border-radius: 9px; border: 1px solid var(--ws-line);
  background: rgba(6,15,28,.62); color: var(--on-navy);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
  transition: border-color var(--t-quick) var(--ease-out),
              background var(--t-quick) var(--ease-out),
              box-shadow var(--t-quick) var(--ease-out);
}
.cal-search input::placeholder { color: var(--on-navy-mute); }
.cal-search input:hover { border-color: var(--ws-line-2); }
.cal-search input:focus { outline: none; background: rgba(6,15,28,.86);
  border-color: rgba(148,213,60,.45); box-shadow: var(--ring), inset 0 1px 3px rgba(0,0,0,.34); }
.cal-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--on-navy-mute); pointer-events: none; }
/* Safari paints its own clear button inside a type=search and it lands on the
   dark ground as a light blob. */
.cal-search input::-webkit-search-decoration,
.cal-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---- the lane strip --------------------------------------------------
   Section 66's named views. Sticky under the head, because the lane is the
   single most important piece of state on the page: it decides what the
   counts, the filters and the list are all talking about. */
.cal-lanes {
  position: sticky; top: 0; z-index: 39;
  display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden;
  padding: 0 26px; border-bottom: 1px solid var(--ws-line);
  background: linear-gradient(100deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
              rgba(8,19,34,.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  scrollbar-width: none;
}
.cal-lanes::-webkit-scrollbar { display: none; }
.cal-lane {
  position: relative; flex: none; font: inherit; font-size: 13px;
  padding: 13px 14px 12px; border: 0; background: none; cursor: pointer;
  color: var(--on-navy-mute); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--t-tint) var(--ease-out);
}
.cal-lane:hover { color: var(--on-navy); }
.cal-lane b { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.07);
  color: var(--on-navy-mute); }
.cal-lane.is-on { color: #fff; font-weight: 600; }
.cal-lane.is-on b { background: rgba(148,213,60,.18); color: var(--green-400); }
.cal-lane.is-on::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--green-400), var(--steel-500));
}
/* A lane with nothing in it is SHOWN, dimmed, and still clickable: opening it
   is how the reader finds out what it is waiting for. Hiding it would make
   the gap invisible, which is the one thing the house rules forbid. */
.cal-lane.is-empty { color: var(--on-navy-mute); opacity: .62; }
.cal-lane.is-empty b { background: rgba(255,255,255,.05); }
.cal-lane:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* ---- the landing metrics --------------------------------------------- */
.cal-wow { display: grid; gap: 11px; margin: 0 0 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  animation: rise .6s var(--ease-out) both; animation-delay: 50ms; }
@media (max-width: 1560px) { .cal-wow { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* Inside the centre column since 2026-09-07 (the grid starts under the lanes
   so the filter column is at the top of the page): three across at every
   width, two on a phone by the rule below. */
.cal-center > .cal-wow { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px)  { .cal-wow { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 430px)  { .cal-wow { grid-template-columns: minmax(0,1fr); } }

.cal-w {
  position: relative; overflow: hidden; text-align: left; font: inherit;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 13px 12px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--ws-line); color: inherit;
  background: var(--ws-glass), var(--ws-card);
  box-shadow: var(--shadow-sm), var(--edge-dark);
  transition: border-color var(--t-quick) var(--ease-out),
              transform var(--t-quick) var(--ease-out),
              box-shadow var(--t-quick) var(--ease-out);
}
/* The hue reaches the card, not just a 30px tile in its corner. That was the
   lesson of the Ledger's six identical grey rectangles. */
.cal-w::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background: radial-gradient(118% 128% at 86% -28%, var(--c-pool), transparent 68%);
  transition: opacity var(--t-quick) var(--ease-out);
}
.cal-w::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--c-edge), transparent 74%);
}
.cal-w > * { position: relative; }
.cal-w:hover { transform: translateY(-3px); border-color: var(--ws-line-2);
  box-shadow: var(--shadow-md), var(--edge-dark); }
.cal-w:hover::before { opacity: 1; }
.cal-w:active { transform: translateY(-1px); }
.cal-w:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-w.is-on { border-color: rgba(148,213,60,.5); box-shadow: var(--shadow-glow), var(--edge-dark); }
.cal-w-i { flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; box-shadow: var(--edge-dark);
  background: var(--c-tile); color: var(--c-ink);
  transition: transform var(--t-quick) var(--ease-out); }
.cal-w:hover .cal-w-i { transform: scale(1.07) rotate(-3deg); }
.cal-w-i svg { width: 17px; height: 17px; }
.cal-w-b { min-width: 0; display: grid; gap: 1px; }
.cal-w-l { font-size: 11.5px; line-height: 1.3; color: var(--on-navy-soft); }
.cal-w-n { font-family: var(--f-display); font-weight: 800; font-stretch: 104%;
  font-size: 25px; line-height: 1.06; color: #fff; letter-spacing: -.02em; }
.cal-w-d { font-size: 10.5px; color: var(--on-navy-mute); line-height: 1.35; }
.cal-w.is-on .cal-w-n { color: var(--green-400); }

/* The four hues, and the fifth non-hue. Declared as custom properties so a
   card names its family once and every part of it follows. */
.c-green  { --c-pool: rgba(121,185,40,.30); --c-edge: rgba(148,213,60,.8);
            --c-tile: rgba(121,185,40,.20); --c-ink: var(--green-400); }
.c-steel  { --c-pool: rgba(143,182,224,.28); --c-edge: rgba(169,203,239,.8);
            --c-tile: rgba(143,182,224,.20); --c-ink: var(--steel-400); }
.c-gold   { --c-pool: rgba(232,163,61,.28); --c-edge: rgba(232,163,61,.8);
            --c-tile: rgba(232,163,61,.20); --c-ink: var(--gold-500); }
.c-indigo { --c-pool: rgba(142,140,240,.28); --c-edge: rgba(142,140,240,.8);
            --c-tile: rgba(142,140,240,.20); --c-ink: var(--ws-indigo); }
/* Colourless on purpose. An unbuilt lane must not read as a fifth kind of
   data that happens to be grey. */
.c-none   { --c-pool: rgba(255,255,255,.05); --c-edge: rgba(255,255,255,.22);
            --c-tile: rgba(255,255,255,.07); --c-ink: var(--on-navy-mute); }
.cal-w.c-none { cursor: default; }
.cal-w.c-none:hover { transform: none; box-shadow: var(--shadow-sm), var(--edge-dark);
  border-color: var(--ws-line); }
.cal-w.c-none .cal-w-n { color: var(--on-navy-mute); font-size: 22px; }

/* ---- the three-column body ------------------------------------------- */
.cal-grid { display: grid; gap: 18px; align-items: start;
  grid-template-columns: 234px minmax(0, 1fr) 296px; }
@media (max-width: 1620px) { .cal-grid { grid-template-columns: 220px minmax(0,1fr); }
                             .cal-aux { grid-column: 1 / -1; }
                             .cal-aux-in { display: grid; gap: 14px;
                               grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); } }
@media (max-width: 1060px) { .cal-grid { grid-template-columns: minmax(0,1fr); }
                             .cal-side { grid-column: 1 / -1; }
                             .cal-side-in { position: static; display: grid; gap: 14px;
                               grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); } }

/* Both flanks stick. On a page whose whole job is triage, scrolling the list
   away from the filters that made it is the wrong trade. `top` clears the
   sticky head plus the sticky lane strip.

   minmax(0,1fr) AND min-width:0, AND BOTH ARE LOAD-BEARING. A bare `display:
   grid` gives an implicit `auto` track, and an auto track is floored by its
   items' min-content contribution. Measured on the built page: the filter
   column's track resolved to 484.5px inside a 234px column, so the whole
   rail painted on top of the event list and the counts landed in the middle
   of the page. Every individual descendant measures under 200px on its own;
   the overflow only appears once the facet lists, which are themselves
   `overflow-y:auto` grids, are sized together. Pinning the track is the fix
   that does not depend on knowing which descendant did it. */
.cal-side-in, .cal-aux-in { position: sticky; top: 128px; display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr); }
.cal-side-in > *, .cal-aux-in > * { min-width: 0; }
@media (max-width: 1620px) { .cal-aux-in { position: static; } }

.cal-side { animation: rise .6s var(--ease-out) both; animation-delay: 120ms; }
.cal-center { min-width: 0; animation: rise .6s var(--ease-out) both; animation-delay: 90ms; }
.cal-aux { animation: rise .6s var(--ease-out) both; animation-delay: 170ms; }

/* ---- a panel, the shared shape for every block on the flanks ---------- */
.cal-p {
  border: 1px solid var(--ws-line); border-radius: 13px; padding: 13px;
  background: var(--ws-glass), var(--ws-card);
  box-shadow: var(--shadow-sm), var(--edge-dark);
}
.cal-p-h { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-navy-mute); margin: 0 0 10px;
  font-weight: 600; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; }
.cal-p-h a, .cal-p-h button { font: inherit; letter-spacing: .06em; border: 0;
  background: none; padding: 0; cursor: pointer; color: var(--green-400);
  text-decoration: none; }
.cal-p-h a:hover, .cal-p-h button:hover { text-decoration: underline; }

/* ---- the shortcut rail ------------------------------------------------
   Section 112's suggestion chips, given a column instead of a row. A count
   beside each one, so the reader knows before clicking whether it is worth
   the click - and a zero is shown rather than the row being dropped. */
.cal-sc { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.cal-sc button {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; text-align: left;
  font: inherit; font-size: 12.5px; padding: 7px 9px; border: 0; border-radius: 8px;
  background: none; color: var(--on-navy-soft); cursor: pointer;
  transition: background var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.cal-sc button svg { width: 14px; height: 14px; flex: none; color: var(--on-navy-mute); }
.cal-sc button span { flex: 1 1 auto; min-width: 0; }
.cal-sc button b { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--on-navy-mute); }
.cal-sc button:hover { background: rgba(255,255,255,.055); color: #fff; }
.cal-sc button:hover svg { color: var(--steel-400); }
.cal-sc button.is-on { background: rgba(148,213,60,.13); color: #fff; font-weight: 600; }
.cal-sc button.is-on svg, .cal-sc button.is-on b { color: var(--green-400); }
.cal-sc button:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-sc button[disabled] { opacity: .4; cursor: not-allowed; }
.cal-sc button[disabled]:hover { background: none; color: var(--on-navy-soft); }

/* ---- the facets ------------------------------------------------------
   Section 20 asks the Calendar to filter the way the Finder does: searchable
   values, cascading counts, and a count beside each value. The counts here
   are recomputed against the CURRENT result set on every change, which is
   what makes them cascading rather than decorative. */
.cal-f { border-top: 1px solid var(--ws-line); padding-top: 11px; margin-top: 11px; }
.cal-f:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cal-f-h { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; font: inherit; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-navy-mute);
  font-weight: 600; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.cal-f-h:hover { color: var(--on-navy); }
.cal-f-h svg { width: 12px; height: 12px; transition: transform var(--t-quick) var(--ease-out); }
.cal-f.is-shut .cal-f-h svg { transform: rotate(-90deg); }
.cal-f.is-shut .cal-f-body { display: none; }
.cal-f-body { padding-top: 8px; }
.cal-f-find { width: 100%; font: inherit; font-size: 12px; padding: 5px 8px;
  margin-bottom: 6px; border-radius: 7px; border: 1px solid var(--ws-line);
  background: rgba(6,15,28,.55); color: var(--on-navy); }
.cal-f-find:focus { outline: none; border-color: rgba(148,213,60,.4); box-shadow: var(--ring); }
/* minmax(0,1fr), for the same reason the two rails carry it: an implicit
   `auto` track is floored by its items and a long agency name would push the
   whole list wider than the column it lives in, which at 390px meant a value
   row running 97px past the edge of its own panel. Pinning the track is what
   lets the ellipsis below actually fire. */
.cal-f-list { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  max-height: 210px; overflow-y: auto; scrollbar-width: thin; }
.cal-f-list label {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0;
  padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--on-navy-soft);
  transition: background var(--t-tint) var(--ease-out); }
.cal-f-list label:hover { background: rgba(255,255,255,.05); color: #fff; }
.cal-f-list input { flex: none; accent-color: var(--green-500); width: 13px; height: 13px; }
.cal-f-list span { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cal-f-list b { font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  color: var(--on-navy-mute); flex: none; }
/* A value that survives no current filter combination reads zero rather than
   vanishing: a facet whose options move under the reader is worse than one
   that says "nothing here matches what you already picked". */
.cal-f-list label.is-nil { opacity: .42; }
.cal-f-none { font-size: 12px; color: var(--on-navy-mute); padding: 4px 6px; }

/* ---- the attention queue ---------------------------------------------- */
.cal-block:empty { display: none; }
.cal-block { margin: 0 0 16px; }
.cal-att { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(216px, 100%), 1fr)); }
.cal-att-c {
  position: relative; overflow: hidden; text-align: left; font: inherit;
  display: block; padding: 12px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--ws-line); color: inherit;
  background: var(--ws-glass), var(--ws-card);
  box-shadow: var(--shadow-sm), var(--edge-dark);
  transition: transform var(--t-quick) var(--ease-out),
              border-color var(--t-quick) var(--ease-out),
              box-shadow var(--t-quick) var(--ease-out); }
.cal-att-c::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c-edge); }
.cal-att-c:hover { transform: translateY(-2px); border-color: var(--ws-line-2);
  box-shadow: var(--shadow-md), var(--edge-dark); }
.cal-att-c:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-att-k { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--c-ink);
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.cal-att-k svg { width: 12px; height: 12px; }
.cal-att-t { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.32;
  margin: 0 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
/* BLOCK, EXPLICITLY. These are <span>s inside a <button> - a button cannot
   contain a <p> - so they inherit inline layout and the date runs straight
   on from the end of the sentence above it. */
.cal-att-w { display: block; font-size: 11.5px; line-height: 1.45;
  color: var(--on-navy-soft); margin: 0; }
.cal-att-w b { color: var(--green-400); font-weight: 600; }
.cal-att-d { display: block; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--on-navy-mute); margin-top: 7px; }

/* ---- decision windows -------------------------------------------------
   Section 103. One solicitation's related dates drawn as a sequence rather
   than as five unrelated rows. The rail is a real measure: a date's position
   along it is its position in time between the first and the last, so a
   cluster looks like a cluster. */
/* minmax(0,1fr) HERE TOO, 2026-09-02. The same trap the flanks note above:
   a bare `display: grid` gives an implicit auto track floored by its items'
   min-content, and the decision-window card's min-content is 437px (the
   title, the notice id, and "Open on the board" on one flex row). At phone
   width that made the card 437px inside a 390px screen and put the whole
   Calendar page on a sideways scroll; every other board measured 390. */
.cal-dw { display: grid; gap: 11px; grid-template-columns: minmax(0, 1fr); }
.cal-dw-c { border: 1px solid var(--ws-line); border-radius: 13px; padding: 13px 15px 15px;
  min-width: 0;
  background: var(--ws-glass), var(--ws-card);
  box-shadow: var(--shadow-sm), var(--edge-dark); }
.cal-dw-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.cal-dw-b { min-width: 0; flex: 1 1 auto; }
.cal-dw-t { margin: 0 0 3px; font-size: 14px; font-weight: 600; color: #fff;
  line-height: 1.32; }
.cal-dw-t a { color: inherit; text-decoration: none; }
.cal-dw-t a:hover { color: var(--green-400); }
.cal-dw-m { margin: 0; font-size: 11.5px; color: var(--on-navy-mute);
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.cal-dw-m code { font-family: var(--f-mono); font-size: 10.5px; color: var(--steel-400); }
.cal-dw-go { flex: none; font-size: 11.5px; color: var(--green-400); text-decoration: none;
  padding: 4px 9px; border: 1px solid rgba(148,213,60,.3); border-radius: 7px;
  white-space: nowrap; transition: background var(--t-tint) var(--ease-out); }
.cal-dw-go:hover { background: rgba(148,213,60,.13); }

.cal-rail { position: relative; height: 46px; margin: 0 4px; }
.cal-rail-line { position: absolute; left: 0; right: 0; top: 9px; height: 2px;
  border-radius: 2px; background: rgba(255,255,255,.11); }
/* The travelled part of the sequence, up to today. */
.cal-rail-done { position: absolute; left: 0; top: 9px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(143,182,224,.5), rgba(148,213,60,.55)); }
.cal-stop { position: absolute; top: 0; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 4px; width: 96px; }
.cal-stop i { width: 11px; height: 11px; border-radius: 50%; display: block;
  background: var(--ws-card-hi); border: 2px solid var(--c-edge, var(--steel-500));
  box-shadow: 0 0 0 3px rgba(8,19,34,.9); }
.cal-stop.is-past i { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.13); }
.cal-stop.is-next i { background: var(--green-400); border-color: var(--green-400);
  box-shadow: 0 0 0 3px rgba(8,19,34,.9), 0 0 0 6px rgba(148,213,60,.22); }
.cal-stop em { font-style: normal; font-family: var(--f-mono); font-size: 9.5px;
  color: var(--on-navy-mute); white-space: nowrap; }
.cal-stop b { font-size: 10.5px; font-weight: 600; color: var(--on-navy-soft);
  text-align: center; line-height: 1.25; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 96px; }
.cal-stop.is-past em, .cal-stop.is-past b { color: var(--on-navy-mute); opacity: .68; }
.cal-stop.is-next b { color: #fff; }
.cal-stop.is-next em { color: var(--green-400); }

/* ---- the toolbar over the list --------------------------------------- */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid var(--ws-line); }
.cal-count { margin: 0; font-size: 13px; color: var(--on-navy-soft); }
.cal-count b { color: #fff; font-family: var(--f-mono); font-weight: 600; }
.cal-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-chip-x { font: inherit; font-size: 11.5px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(148,213,60,.3); background: rgba(148,213,60,.11);
  color: var(--green-400); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.cal-chip-x:hover { background: rgba(148,213,60,.2); }
.cal-chip-x span { font-size: 13px; line-height: 1; }
.cal-sort { margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--on-navy-mute); }
.cal-sort select { font: inherit; font-size: 12.5px; padding: 5px 26px 5px 9px;
  border-radius: 7px; border: 1px solid var(--ws-line); background: var(--panel-solid);
  color: var(--on-navy-soft); cursor: pointer; }
.cal-sort select:focus { outline: none; box-shadow: var(--ring); }

/* ---- the list --------------------------------------------------------- */
.cal-list { display: grid; gap: 9px; }
.cal-mon { margin: 16px 0 3px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--on-navy-mute);
  font-weight: 600; display: flex; align-items: center; gap: 10px; }
.cal-mon::after { content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--ws-line), transparent); }
.cal-list > .cal-mon:first-child { margin-top: 0; }

.cal-row {
  position: relative; display: grid; gap: 13px; align-items: start;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ws-line);
  background: var(--ws-glass), var(--ws-card);
  box-shadow: var(--shadow-xs), var(--edge-dark);
  transition: border-color var(--t-quick) var(--ease-out),
              transform var(--t-quick) var(--ease-out),
              box-shadow var(--t-quick) var(--ease-out);
}
.cal-row::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--c-edge); opacity: .85; }
.cal-row:hover { transform: translateY(-2px); border-color: var(--ws-line-2);
  box-shadow: var(--shadow-md), var(--edge-dark); }
.cal-row.is-today { border-color: rgba(148,213,60,.42); }
.cal-row.is-open { border-color: rgba(148,213,60,.5);
  box-shadow: var(--shadow-glow), var(--edge-dark); }

.cal-d { text-align: center; display: grid; gap: 0; padding-top: 1px; }
.cal-d em { font-style: normal; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .09em; color: var(--on-navy-mute); text-transform: uppercase; }
.cal-d b { font-family: var(--f-display); font-weight: 800; font-stretch: 104%;
  font-size: 22px; line-height: 1.05; color: #fff; }
.cal-d i { font-style: normal; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .09em; color: var(--c-ink); text-transform: uppercase; }
.cal-d .cal-cd { display: block; margin-top: 3px; font-family: var(--f-mono);
  font-size: 9px; color: var(--on-navy-mute); }
.cal-d .cal-cd.is-soon { color: var(--gold-500); }
.cal-d .cal-cd.is-now { color: var(--green-400); }

.cal-bd { min-width: 0; }
.cal-k { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.cal-k-t { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--c-ink); }
.cal-t { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: #fff; }
.cal-t a { color: inherit; text-decoration: none; }
.cal-t a:hover { color: var(--green-400); text-decoration: underline; }
.cal-why { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--on-navy-soft); }
.cal-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 11.5px; color: var(--on-navy-mute); }
.cal-meta a { color: var(--steel-400); text-decoration: none; }
.cal-meta a:hover { text-decoration: underline; }
.cal-meta code { font-family: var(--f-mono); font-size: 10.5px; color: var(--steel-400); }

/* The small outline chips. Neutral by default; the solid ones on this site
   already mean grant and contract on the Finder board and must keep meaning
   only that. */
.cal-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--ws-line-2); color: var(--on-navy-soft); white-space: nowrap; }
.cal-tag.t-warn { border-color: rgba(232,163,61,.42); color: var(--gold-300);
  background: rgba(232,163,61,.09); }
.cal-tag.t-live { border-color: rgba(148,213,60,.42); color: var(--green-400);
  background: rgba(148,213,60,.09); }
.cal-tag.t-mute { border-style: dashed; color: var(--on-navy-mute); }

.cal-acts { display: grid; gap: 6px; justify-items: stretch; align-content: start; }
.cal-act { font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--ws-line); background: rgba(255,255,255,.04);
  color: var(--on-navy-soft); cursor: pointer; text-decoration: none;
  white-space: nowrap; text-align: center; display: block;
  transition: background var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out),
              border-color var(--t-tint) var(--ease-out); }
.cal-act:hover { background: rgba(255,255,255,.09); color: #fff; border-color: var(--ws-line-2); }
.cal-act:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-act.is-go { border-color: rgba(148,213,60,.34); color: var(--green-400); }
.cal-act.is-go:hover { background: rgba(148,213,60,.14); color: var(--green-400); }
.cal-act.done { border-color: rgba(148,213,60,.5); background: rgba(148,213,60,.16);
  color: var(--green-400); }

/* ---- at a glance, the month ------------------------------------------ */
.cal-gm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-gm-h { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .06em;
  color: var(--on-navy-mute); text-align: center; padding-bottom: 3px; }
.cal-gm-d { position: relative; aspect-ratio: 1; border-radius: 6px; border: 0;
  background: none; font: inherit; font-size: 11px; color: var(--on-navy-soft);
  display: grid; place-items: center; cursor: default; padding: 0; }
.cal-gm-d.is-out { color: rgba(147,168,194,.3); }
.cal-gm-d.has-n { cursor: pointer; color: #fff; font-weight: 600;
  background: rgba(255,255,255,.05); }
.cal-gm-d.has-n:hover { background: rgba(148,213,60,.16); }
.cal-gm-d.is-today { box-shadow: inset 0 0 0 1.5px var(--green-400); color: var(--green-400); }
/* The day the reader has actually clicked. Filled rather than outlined, so it
   never has to compete with today's ring for the same square. */
.cal-gm-d.is-on { background: rgba(148,213,60,.26); color: #fff; }
.cal-gm-d.is-on i { background: #fff; }
.cal-gm-d i { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--green-400); }
.cal-gm-d.is-heavy i { width: 12px; border-radius: 2px; }
.cal-gm-nav { display: flex; align-items: center; gap: 5px; }
.cal-gm-nav button { font: inherit; font-size: 13px; line-height: 1; border: 0;
  background: none; color: var(--on-navy-mute); cursor: pointer; padding: 2px 5px;
  border-radius: 5px; }
.cal-gm-nav button:hover { color: #fff; background: rgba(255,255,255,.07); }

/* ---- market week ------------------------------------------------------ */
.cal-mw { display: grid; gap: 7px; }
.cal-mw-r { display: grid; grid-template-columns: 1fr 34px; gap: 8px; align-items: center;
  font-size: 12px; }
.cal-mw-l { display: flex; align-items: center; gap: 7px; min-width: 0;
  color: var(--on-navy-soft); }
.cal-mw-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mw-l i { flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: var(--c-edge); }
.cal-mw-n { font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  color: #fff; text-align: right; }
.cal-mw-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.07); overflow: hidden; margin-top: -3px; }
.cal-mw-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c-edge);
  opacity: .8; }
.cal-mw-tot { display: flex; justify-content: space-between; font-size: 12px;
  padding-top: 9px; margin-top: 4px; border-top: 1px solid var(--ws-line);
  color: var(--on-navy-soft); }
.cal-mw-tot b { font-family: var(--f-mono); color: #fff; }

/* ---- connected intelligence and the source ledger --------------------- */
.cal-cx { display: grid; gap: 8px; }
.cal-cx a, .cal-cx div.is-shut {
  display: block; padding: 9px 10px; border-radius: 9px; text-decoration: none;
  border: 1px solid var(--ws-line); background: rgba(255,255,255,.03);
  transition: background var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out); }
.cal-cx a:hover { background: rgba(255,255,255,.07); border-color: var(--ws-line-2); }
.cal-cx b { display: block; font-size: 12.5px; color: #fff; font-weight: 600;
  margin-bottom: 2px; }
.cal-cx span { display: block; font-size: 11px; line-height: 1.45; color: var(--on-navy-mute); }
.cal-cx div.is-shut { border-style: dashed; opacity: .8; }
.cal-cx div.is-shut b { color: var(--on-navy-soft); }

.cal-src { display: grid; gap: 8px; font-size: 11.5px; }
.cal-src-r { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.cal-src-r b { font-weight: 600; color: var(--on-navy-soft); }
.cal-src-r span { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-navy-mute);
  white-space: nowrap; }
.cal-src-r.is-nil b { color: var(--on-navy-mute); }
.cal-src-r.is-nil span { color: var(--gold-500); }
.cal-src-n { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--on-navy-mute); }
.cal-src-n a { color: var(--green-400); }

/* ---- empty and declared states ---------------------------------------- */
.cal-none { text-align: center; padding: 40px 24px; border-radius: 14px;
  border: 1px dashed var(--ws-line-2);
  background: radial-gradient(100% 80% at 50% -10%, rgba(121,185,40,.08), transparent 64%),
              var(--ws-glass), rgba(10,22,39,.55);
  max-width: 640px; margin: 8px auto 0; }
.cal-none > svg { width: 28px; height: 28px; color: var(--on-navy-mute); margin-bottom: 11px; }
/* Not the page-heading treatment: the global h3 is Archivo and wide, which is
   right for a section name and wrong for a sentence. --f-body, not --f-sans:
   the latter is used in workspace.css and is not defined anywhere, so it
   silently falls through to whatever the body carries. */
.cal-none h3 { margin: 0 0 8px; font-size: 16px; color: #fff; font-family: var(--f-body);
  text-transform: none; letter-spacing: -.005em; font-stretch: normal; }
.cal-none p { margin: 0 auto 12px; max-width: 54ch; font-size: 13px; line-height: 1.6;
  color: var(--on-navy-soft); }
.cal-none p:last-child { margin-bottom: 0; }
.cal-none .cal-wait { font-size: 12px; color: var(--on-navy-mute);
  border-top: 1px solid var(--ws-line); padding-top: 12px; margin-top: 4px; }
.cal-none .cal-wait b { color: var(--gold-300); font-weight: 600; }
.cal-none .btn-row { justify-content: center; margin-top: 14px; }

/* ---- the detail drawer's own pieces -----------------------------------
   The panel shell, .pn-top, .pn-sec and .pn-h all come from workspace.css.
   Only what the Calendar puts inside them is here. */
.pn-dates { display: grid; gap: 7px; }
.pn-date { display: grid; grid-template-columns: 88px 1fr; gap: 10px; font-size: 12.5px;
  align-items: baseline; }
.pn-date em { font-style: normal; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--on-navy-mute); }
.pn-date b { font-weight: 600; color: #fff; }
.pn-date.is-past b { color: var(--on-navy-mute); font-weight: 400; }
.pn-prep { margin: 0; padding-left: 17px; display: grid; gap: 6px; }
.pn-prep li { font-size: 12.5px; line-height: 1.5; color: var(--on-navy-soft); }
.pn-prep li::marker { color: var(--green-400); }
.pn-note { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--on-navy-mute); }
.pn-note b { color: var(--on-navy-soft); font-weight: 600; }
.pn-btns { display: grid; gap: 7px; margin-top: 4px; }
.pn-btns .cal-act { text-align: center; }

/* ---- loading ---------------------------------------------------------- */
.cal-load { display: flex; align-items: center; gap: 10px; padding: 26px;
  font-size: 13px; color: var(--on-navy-soft); justify-content: center; }
.cal-load i { width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.16); border-top-color: var(--green-400);
  animation: calspin .7s linear infinite; }
@keyframes calspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cal-load i { animation: none; }
  .cal-side, .cal-center, .cal-aux, .cal-wow { animation: none; }
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 720px) {
  .cal-lanes { padding: 0 16px; }
  .cal-row { grid-template-columns: 48px minmax(0, 1fr); }
  .cal-acts { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
  .cal-search { max-width: none; flex-basis: 100%; }
  .ws-head-r { width: 100%; }
  .cal-side-in, .cal-aux-in { top: 0; }
  /* The date stops on the decision rail sit in 96px boxes centred on the
     dot, so the first and last boxes overhang the card by 48px; the text
     inside them overhangs by a few pixels at most. On a phone that box edge
     is the difference between a page that fits and one that scrolls. */
  .cal-dw-c { overflow-x: clip; }
}

/* THE HORIZON (calendar.js paintHorizon). The amber still, the line, the
   points of light placed by date. Texture only; every word is from ITEMS. */
.cal-horizon { position: relative; min-height: 270px; border-radius: 14px; overflow: hidden; margin: 0 0 18px;
  border: 1px solid var(--ws-line); isolation: isolate;
  background: #08172A url("fam/horizon.jpg") 50% 100% / cover no-repeat; }
.cal-horizon::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,23,42,.12), rgba(8,23,42,.62) 70%); }
.cal-hz-in { position: relative; z-index: 1; padding: 22px 26px 0; max-width: 62ch; }
.cal-hz-eb { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-300); }
.cal-horizon h2 { margin: 6px 0 0; font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; color: #fff; }
.cal-horizon p { margin: 6px 0 0; font-size: 13.5px; color: var(--on-navy-soft); }
.cal-hz-line { position: absolute; left: 4%; right: 4%; top: 176px; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(242,199,132,.6) 6%, rgba(242,199,132,.6) 94%, transparent); }
.cal-hz-dot { position: absolute; top: 176px; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; z-index: 1;
  background: var(--gold-300); box-shadow: 0 0 12px 2px rgba(242,199,132,.55); }
.cal-hz-dot.near { box-shadow: 0 0 22px 6px rgba(242,199,132,.7); }
.cal-hz-lab small { font-family: var(--f-mono); font-size: 9px; font-weight: 600; color: var(--gold-300); letter-spacing: .08em; }
.cal-hz-lab { position: absolute; z-index: 1; top: 190px; transform: translateX(-50%); text-align: center; width: 190px; }
.cal-hz-lab.dn2 { top: 228px; }
.cal-hz-lab b { display: block; font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: 12.5px; line-height: 1.25; color: #fff; }
.cal-hz-lab span { display: block; margin-top: 3px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.cal-hz-tick { position: absolute; z-index: 1; top: 150px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-mute); }
.cal-hz-none { position: relative; z-index: 1; padding: 22px 26px; color: var(--on-navy-soft); font-size: 13.5px; }
.cal-hz-none b { color: #fff; }
@media (max-width: 700px) { .cal-hz-lab { display: none; } .cal-horizon { min-height: 210px; } .cal-hz-line, .cal-hz-dot { top: 186px; } .cal-hz-tick { top: 160px; } }