/* The release calendar (CZ-6803). The page is a flat page (see ".page--flat" in site.css): it takes the whole window, with the shell's own gutters, like the checklist
   pages. On wide screens the releases are a month grid whose entries open a small card with the full name and the links; on a phone the grid is hidden and the same
   releases are a list by day. Both are always in the HTML. Built from the site tokens. */
.rel { padding: 14px 0 48px; }
.rel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 16px; }
.rel-nav { flex: 1 1 360px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
.rel-nav__title { margin: 0; font-size: clamp(22px, 3vw, 30px); color: var(--navy); text-align: center; }
.rel-nav__link { font-weight: 500; white-space: nowrap; }
.rel-note { color: var(--ink-2); margin: 16px 0; }

.rel-grid { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--card-line, #E4DED2); border-radius: 8px; background: var(--panel); }
.rel-grid__dow { padding: 8px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--well, #F3EFE7); }
.rel-grid__dow:first-child { border-top-left-radius: 8px; }
.rel-grid__dow:nth-child(7) { border-top-right-radius: 8px; }
.rel-cell { min-height: 132px; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--card-line, #E4DED2); border-left: 1px solid var(--card-line, #E4DED2); min-width: 0; position: relative; }
.rel-cell:nth-child(7n + 8) { border-left: 0; }
.rel-cell--out { background: var(--well, #F3EFE7); }
.rel-cell--out .rel-cell__num { opacity: 0.5; }
.rel-cell--today { box-shadow: inset 0 0 0 2px var(--action); }
.rel-cell__num { font-size: 13px; font-weight: 600; color: var(--muted); }

.rel-cell__rel { position: relative; }
.rel-cell__item { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; list-style: none;
  font-size: 13px; line-height: 1.3; color: var(--ink); padding: 3px 7px; border-radius: 4px; background: #EAF0FB; overflow-wrap: anywhere; }
.rel-cell__item:hover { background: #DCE6F8; }
.rel-cell__item:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.rel-pop { position: absolute; z-index: 10; top: 100%; left: 0; width: max(100%, 260px); max-width: 340px; display: grid; gap: 6px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--outline, #CFC8B8); border-radius: 8px; box-shadow: 0 8px 24px rgba(28, 36, 54, 0.18);
  visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .12s; }
/* The card opens on hover or on KEYBOARD focus only (:focus-visible: a mouse click focuses nothing visibly, so a click neither opens nor holds the card) after a short delay, and
   stays open while the pointer is on the entry or the card (the card is the entry's child, with no gap between them), so its links can be reached. */
.rel-cell__rel:hover > .rel-pop { visibility: visible; opacity: 1; transition: opacity .12s ease .25s, visibility 0s linear .25s; }
/* Keyboard focus opens it at once (no delay), so tabbing straight on to the card's links never meets a hidden card. */
.rel-cell__rel:has(:focus-visible) > .rel-pop { visibility: visible; opacity: 1; transition: none; }
.rel-cell:nth-child(7n + 6) .rel-pop, .rel-cell:nth-child(7n + 7) .rel-pop { left: auto; right: 0; }
.rel-pop__name { color: var(--navy); overflow-wrap: anywhere; }
.rel-pop__date { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rel-pop__links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }

/* Wide windows show the grid and hide the list (it stays in the HTML for the phone layout and for crawlers); narrower ones show the list. The same breakpoint for both. */
/* The grid needs room and a pointer that can hover: a wide window with a mouse. A phone, and a tablet or any touch screen, get the list (and a wide touch screen the week and day tabs). */
@media (min-width: 821px) and (hover: hover) { .rel-grid { display: grid; } .rel-list { display: none; } }

.rel-list { margin-top: 28px; }
.rel-list__title { font-size: 22px; color: var(--navy); margin: 0 0 12px; }
.rel-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rel-day { background: var(--panel); border: 1px solid var(--card-line, #E4DED2); border-radius: 8px; padding: 14px 18px; scroll-margin-top: 80px; }
.rel-day__date { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rel-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* One row grid for every release (month list, day), so the rows line up: the name takes the room that is left and wraps inside its column, then a fixed column for the tag (the icon
   in the same place on every row), present even when empty. A phone stacks the two on one left edge, and the week's narrow columns do the same; where they are stacked an empty tag
   cell is hidden, so it does not leave a blank line. */
.rel-item { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: start; gap: 4px 16px; }
.rel-item__tags { justify-content: flex-start; }
@media (max-width: 820px) { .rel-item { grid-template-columns: minmax(0, 1fr); } .rel-item__tags:empty { display: none; } }
.rel-span--week .rel-item__tags:empty { display: none; }
.rel-item__name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* Tags (CZ-6804): the words of a tag with the icon of its catalog category, in the colour the app draws it in (inline, from the category tree). The icons are Font Awesome 6 Pro
   Duotone glyphs from one inline sprite; the lighter layer keeps its own opacity. The words stay navy, so contrast never depends on a category colour. */
.rel-icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; color: var(--navy); vertical-align: -0.25em; }
.rel-cell__item { cursor: default; display: flex; align-items: flex-start; gap: 5px; }
.rel-cell__item > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
.rel-cell__item .rel-icon { margin-top: 1px; }
.rel-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: #F3F5FA; border: 1px solid #D5DBEA; color: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.2; }
.rel-pop__tags, .rel-item__tags { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.rel-pop__tags:empty { display: none; }
.rel-day--today { box-shadow: inset 0 0 0 2px var(--action); }

/* View control: ONE segmented pill (a single rounded track holding Month, Week and Day side by side, the active one a filled segment). Plain links with aria-current, so every view
   works without script. On a phone the list is the layout, so the control is not shown there. */
.rel-tabs { display: inline-flex; flex: none; padding: 3px; gap: 0; border-radius: 999px; background: #E8ECF5; border: 1px solid #C9D3E8; }
.rel-tab { padding: 6px 18px; border-radius: 999px; color: var(--navy); font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.rel-tab:hover { background: rgba(255, 255, 255, 0.7); text-decoration: none; }
.rel-tab[aria-current="page"] { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(16, 33, 74, 0.25); }
.rel-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
@media (max-width: 820px) { .rel-tabs { display: none; } .rel-nav { flex-basis: 100%; } }

/* Week: one column per day on a wide window, fewer columns as it narrows, one on a phone. Day: one roomy card. Every release in full, with its tags and links. */
.rel-span .rel-days { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
/* The week is ONE continuous grid like the month: the day columns touch, separated only by the month's hairline (no gaps, no separate rounded cards); each column has the same
   header cell (weekday and date) and a little padding inside. The lines are drawn as a right and bottom edge on every cell inside a bordered, clipped frame. */
.rel-span--week .rel-days { gap: 0; align-items: stretch; border-top: 1px solid var(--card-line, #E4DED2); border-left: 1px solid var(--card-line, #E4DED2); border-radius: 8px; overflow: hidden; background: var(--panel); }
.rel-span--week .rel-day { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: 1px 0 0 0 var(--card-line, #E4DED2), 0 1px 0 0 var(--card-line, #E4DED2); }
.rel-span--week .rel-day--today { box-shadow: inset 0 0 0 2px var(--action), 1px 0 0 0 var(--card-line, #E4DED2), 0 1px 0 0 var(--card-line, #E4DED2); }
.rel-span--week .rel-day__date { margin: 0; padding: 8px 10px; background: var(--well, #F3EFE7); border-bottom: 1px solid var(--card-line, #E4DED2); font-size: 12px; letter-spacing: 0.08em; }
.rel-span--week .rel-items, .rel-span--week .rel-day__none { padding: 8px 10px 10px; }
.rel-span--week .rel-item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--card-line, #E4DED2); }
.rel-span--week .rel-item:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 1200px) { .rel-span--week .rel-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.rel-span--day .rel-days { grid-template-columns: minmax(0, 1fr); gap: 0; }
.rel-span--day .rel-day { padding: 22px 26px; }
.rel-span--day .rel-item__name { font-size: 19px; }
.rel-span--day .rel-item { padding-block: 6px; gap: 6px 20px; }
.rel-day__none { margin: 0; color: var(--muted); font-size: 14px; }
.rel-day--today .rel-day__date { color: var(--action); }

/* An entry with a checklist is a plain internal link (same tab); one without is not a link and shows no pointer. */
.rel-cell__item { cursor: default; }
.rel-cell__item--link { cursor: pointer; color: var(--ink); text-decoration: none; }
.rel-cell__item--link:hover { text-decoration: none; }
.rel-cell__item:focus { outline: none; }
.rel-cell__item:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }