/* Events index, drawn by app/events-index.js and app/event-grid-card.js:
   the control row, month groups with the year, 56px rows, short cards, one
   status mark with its reason, the countdown column, the two tool buttons,
   the ⋯ menus, and Schedule's Show tasks switch. Loaded after extensions.css. */

/* The branch tokens (--event-card-*) for everything this page colours by
   branch: the row's edge and date block, the card, the event header and the
   branch dot. HR and CMO take #2d2d2f text, Legal and CFO white, and an
   unknown branch is grey. extensions.css keeps main's .event-card rules
   untouched; the .event-card forms here carry the same weight and load
   later, so a card reads these values too. The tab bar right under an event
   header (event-workspace-tabs.css) takes its event's tokens too. */
[data-event-branch-theme="hr"],.event-card[data-event-branch-theme="hr"],.event-head[data-event-branch-theme="hr"]+.event-workspace-tabs{--event-card-accent:#fe7615;--event-card-soft:#ffd8b4;--event-card-ink:#2d2d2f}
[data-event-branch-theme="cmo"],.event-card[data-event-branch-theme="cmo"],.event-head[data-event-branch-theme="cmo"]+.event-workspace-tabs{--event-card-accent:#58d994;--event-card-soft:#d4f6e4;--event-card-ink:#2d2d2f}
[data-event-branch-theme="legal"],.event-card[data-event-branch-theme="legal"],.event-head[data-event-branch-theme="legal"]+.event-workspace-tabs{--event-card-accent:#0356fc;--event-card-soft:#9eecff;--event-card-ink:#fff}
[data-event-branch-theme="cfo"],.event-card[data-event-branch-theme="cfo"],.event-head[data-event-branch-theme="cfo"]+.event-workspace-tabs{--event-card-accent:#7b0aec;--event-card-soft:#e5ccff;--event-card-ink:#fff}
[data-event-branch-theme="workgroup"],.event-card[data-event-branch-theme="workgroup"],.event-head[data-event-branch-theme="workgroup"]+.event-workspace-tabs{--event-card-accent:#6b6b70;--event-card-soft:#e4e2e7;--event-card-ink:#fff}

.events-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.events-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Control row */
.events-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
/* List | Cards, the page ⋯ and + New event stay one group on the right. When
   the page is too narrow for the group on one line (320px signed in), it
   wraps inside itself, still right-aligned, instead of running off the page. */
.events-controls-end{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;min-width:0;margin-left:auto}
.events-seg,.events-controls .events-page-tabs{display:inline-flex;gap:2px;margin:0;padding:3px;border:0;border-radius:9px;background:#ecebef;box-shadow:none}
.events-seg button,.events-controls .events-page-tabs button{display:inline-flex;align-items:center;gap:6px;min-width:0;border:0;border-radius:7px;background:transparent;color:var(--muted);padding:5px 11px;font:600 13px/1.2 "Bricolage Grotesque",sans-serif;white-space:nowrap;cursor:pointer;box-shadow:none}
.events-seg button[aria-pressed="true"],.events-controls .events-page-tabs button.active{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(45,45,47,.12)}
.events-seg button:focus-visible,.events-controls .events-page-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.events-icon-button{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);cursor:pointer}
.events-icon-button:hover,.events-icon-button[aria-expanded="true"]{background:#faf8fa;border-color:#c9c6bb}
.events-controls .events-new{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;white-space:nowrap}
.events-field{display:inline-flex;align-items:center;gap:7px;min-width:0;height:34px;margin:0;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);font:500 12.5px "Bricolage Grotesque",sans-serif;letter-spacing:0;text-transform:none}
.events-field:focus-within{border-color:#c9c6bb;outline:2px solid var(--accent);outline-offset:1px}
.events-field input,.events-field select{min-width:0;height:auto;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;color:var(--ink);font:500 13px "Bricolage Grotesque",sans-serif}
.events-search{flex:1 1 275px;min-width:200px;max-width:340px;padding-right:6px}
.events-search input{width:100%}
.events-search input::placeholder{color:var(--muted)}
.events-search input:placeholder-shown::-webkit-search-cancel-button{display:none}
.events-branch select{padding-right:2px;font-weight:600;cursor:pointer}
.events-branch-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--event-card-accent,#6b6b70)}
.events-branch-dot.is-all{background:conic-gradient(#0356fc 0 25%,#7b0aec 0 50%,#fe7615 0 75%,#58d994 0)}
.events-button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font:600 13px "Bricolage Grotesque",sans-serif;white-space:nowrap;cursor:pointer}
.events-button:hover,.events-button[aria-expanded="true"]{background:#faf8fa;border-color:#c9c6bb}
.events-button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.events-controls .events-link-button{padding:0 4px}
.events-filter-pop{right:auto;left:0}
/* Filter opens under its button and, when the row has no room for it on the
   right (a phone, or a desktop row where Filter ends the line), ends at the
   button's right edge instead, so the page never scrolls sideways. With
   anchor positioning the page (.events-index, made relative for this) is
   the popover's containing block, so the flip happens at the page's edge,
   not the window's. Browsers without it (older Safari and Firefox) keep
   the popover in its wrap under the button, and after each render
   events-index.js's fitPopover gives it .is-end when it would run past the
   page or the window and ending at the button fits. */
@supports (position-try-fallbacks:flip-inline){
  .events-index{position:relative}
  .events-controls>.events-pop-wrap{position:static}
  .events-controls [data-events-filter]{anchor-name:--events-filter}
  .events-controls .events-filter-pop{position-anchor:--events-filter;top:anchor(bottom);right:auto;left:anchor(left);margin-top:6px;position-try-fallbacks:flip-inline}
}
@supports not (position-try-fallbacks:flip-inline){
  .events-controls .events-filter-pop.is-end{right:0;left:auto}
}
.events-check{display:flex;align-items:center;gap:8px;margin:0;padding:6px 8px;border-radius:7px;color:var(--ink);font:500 13.5px/1.3 "Bricolage Grotesque",sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}
.events-check:hover{background:#f4f2f5}
.events-check input{width:15px;height:15px;margin:0;accent-color:var(--accent-fill,#ff3158)}
.events-empty .button{display:table;margin:12px auto 0}

/* Month groups, the past-events bar and the Snoozed group */
.events-month{margin:0 0 14px}
.events-month-head{display:flex;align-items:baseline;gap:8px;margin:0;padding:6px 0 8px;color:var(--ink);font:600 14px/1.3 "Poppins",sans-serif;letter-spacing:0}
.events-month-head>span{color:var(--muted);font:500 12px "Bricolage Grotesque",sans-serif}
.events-month-head::after{content:"";flex:1;align-self:center;height:1px;margin-left:4px;background:var(--line)}
.events-past-bar{margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);font-size:13px}
.events-link-button{border:0;background:none;padding:0 2px;color:var(--accent-text);font:600 13px "Bricolage Grotesque",sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.events-group-toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:var(--ink);font:inherit;cursor:pointer}
.events-group-toggle::before{content:"▸";color:var(--muted);font-size:12px}
.events-group-toggle[aria-expanded="true"]::before{content:"▾"}
.events-link-button:focus-visible,.events-group-toggle:focus-visible{border-radius:4px;outline:2px solid var(--accent);outline-offset:2px}
.events-empty{text-align:center}

/* 56px rows */
.events-rows{border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.events-index-row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 150px 92px auto 30px;align-items:center;gap:14px;min-height:56px;padding:5px 12px 5px 16px;border-top:1px solid #eeecf0;cursor:pointer}
.events-rows.is-public .events-index-row{grid-template-columns:44px minmax(0,1fr) 92px 30px}
.events-index-row:first-child{border-top:0;border-radius:12px 12px 0 0}
.events-index-row:last-child{border-radius:0 0 12px 12px}
.events-index-row:only-child{border-radius:12px}
.events-index-row::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--event-card-accent,#6b6b70)}
.events-index-row:first-child::before{border-top-left-radius:12px}
.events-index-row:last-child::before{border-bottom-left-radius:12px}
.events-index-row:hover{background:#faf8fa}
.events-index-row.snoozed-event{opacity:.72}
.events-index-row.snoozed-event:hover{opacity:1}
.event-date-block{display:grid;align-content:center;justify-items:center;gap:1px;width:44px;min-height:44px;padding:3px 0;border-radius:9px;background:var(--event-card-accent,#6b6b70);color:var(--event-card-ink,#fff);line-height:1.05;text-align:center;font-variant-numeric:tabular-nums}
.event-date-block small{display:block;font:600 9.5px/1 "Bricolage Grotesque",sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.event-date-block strong{display:block;font:700 18px/1 "Poppins",sans-serif}
.event-date-block .event-date-year{font-size:9px;letter-spacing:.02em;opacity:.85}
.event-date-block.has-year{gap:0;padding:0}
.event-date-block.has-year strong{font-size:16px}
.event-name-block{min-width:0}
.event-name-line{display:flex;align-items:center;gap:6px;min-width:0}
.event-row-open{min-width:0;overflow:hidden;color:var(--ink);font:600 15px/1.3 "Poppins",sans-serif;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.event-row-open:hover{text-decoration:underline;text-decoration-color:var(--event-card-accent,var(--accent));text-underline-offset:3px}
.event-row-open:focus-visible{border-radius:4px;outline:2px solid var(--event-card-accent,var(--accent));outline-offset:2px;text-decoration:none}
.event-row-sub,.event-card-sub{margin:1px 0 0;overflow:hidden;color:var(--muted);font-size:12.5px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.event-name-line .event-star-button,.event-card-top .event-star-button{display:inline-grid;width:24px;height:24px;flex:none;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:#b9b8bf;font-size:16px;line-height:1}
.event-name-line .event-star-button:hover,.event-card-top .event-star-button:hover{background:#f1eff3;color:var(--ink)}
.event-name-line .event-star-button.starred,.event-card-top .event-star-button.starred{background:none;color:#e0a000}

/* One status mark with its reason, and the countdown column */
.event-status-mark{display:grid;gap:1px;min-width:0;font-size:13px;line-height:1.3}
.event-status-mark b{display:flex;align-items:center;gap:6px;font-weight:600}
.event-status-mark>span{overflow:hidden;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.event-mark-symbol{font-size:11px;line-height:1}
.event-mark-risk{color:#c8102e}
.event-mark-watch{color:var(--ink)}
.event-mark-good,.event-mark-muted{color:var(--muted)}
.event-countdown-col{color:var(--ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* The two tool buttons */
.event-tool-pair{display:flex;gap:6px;min-width:0}
.event-tool{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font:600 12.5px/1 "Bricolage Grotesque",sans-serif;text-decoration:none;white-space:nowrap}
.event-tool:hover{border-color:#c9c6bb;background:#faf8fa}
.event-tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.event-tool .events-icon{width:15px;height:15px}

/* ⋯ menus: a real button opens a role="menu" popover */
.events-pop-wrap{position:relative;display:inline-flex}
.event-more{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.event-more:hover,.event-more[aria-expanded="true"]{border-color:var(--line);background:var(--paper);color:var(--ink)}
.event-more:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.row-menu-popover{position:absolute;z-index:40;top:calc(100% + 6px);right:0;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:11px;background:var(--paper);box-shadow:0 14px 38px rgba(45,45,47,.16);color:var(--ink);text-align:left;cursor:default}
.row-menu-popover hr{margin:5px 4px;border:0;border-top:1px solid #eeecf0}
.row-menu-popover h4{margin:6px 8px 4px;color:var(--muted);font:600 11px "Poppins",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.event-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;border-radius:7px;background:none;color:var(--ink);font:500 13.5px/1.3 "Bricolage Grotesque",sans-serif;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.event-menu-item:hover{background:#f4f2f5}
.event-menu-item:focus-visible{background:#f4f2f5;outline:2px solid var(--accent);outline-offset:-2px}
.event-menu-item .events-icon{color:var(--muted)}
.event-menu-narrow,hr.event-menu-narrow{display:none}

/* Short cards: at most 150px */
.events-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
.events-cardgrid .event-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start;max-height:150px;padding:12px 12px 10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:none;cursor:pointer}
.events-cardgrid .event-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;border-radius:12px 0 0 12px;background:var(--event-card-accent,#6b6b70)}
.events-cardgrid .event-card:hover{background:#faf8fa;transform:none}
.event-card-top{display:flex;align-items:flex-start;gap:6px;min-width:0}
.events-cardgrid .event-card h3{flex:1;min-width:0;margin:0;overflow:hidden;font:600 16px/1.25 "Poppins",sans-serif;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.events-cardgrid .event-card .event-number{margin-right:6px;font-size:10.5px}
.event-card-date{margin-left:auto;padding-top:2px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.event-card-state{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:12.5px}
.event-card-state .event-status-mark{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:12.5px}
.event-card-state .event-status-mark>span{min-width:0}
.event-card-state .event-status-mark>span::before,.event-card-state .event-status-mark+.event-countdown::before{content:"· "}
.event-card-state .event-countdown{color:var(--muted);font-variant-numeric:tabular-nums}
/* One line at every width: the tool pair shrinks through its container queries
   instead. This outweighs extensions.css's older .event-card-foot rules (wrap,
   and a column at 520px and below), which stay there untouched. */
.events-cardgrid .event-card-foot{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
/* With no tool buttons (signed out, or no tools yet) the ⋯ still sits at the
   card's right edge, so its right-anchored menu opens over the card. */
.events-cardgrid .event-card-foot>.events-pop-wrap{margin-left:auto}
.event-card-foot .event-tool-pair{flex:1;container-type:inline-size}
@container (max-width:300px){.event-card-foot .event-tool .event-tool-rest{display:none}}
@container (max-width:170px){.event-card-foot .event-tool{width:30px;padding:0;justify-content:center}.event-card-foot .event-tool>span{display:none}}

/* Schedule: Show tasks switch; the events-only calendar keeps its range control */
.schedule-show-tasks{display:inline-flex;align-items:center;gap:8px;padding:4px 2px;border:0;background:none;color:var(--ink);font:600 12.5px "Bricolage Grotesque",sans-serif;white-space:nowrap;cursor:pointer}
.schedule-show-tasks-track{position:relative;width:30px;height:18px;flex:none;border-radius:999px;background:#cfcdd4;transition:background .15s}
.schedule-show-tasks-track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.schedule-show-tasks[aria-checked="true"] .schedule-show-tasks-track{background:var(--accent-fill)}
.schedule-show-tasks[aria-checked="true"] .schedule-show-tasks-track::after{transform:translateX(12px)}
.schedule-show-tasks:focus-visible{border-radius:6px;outline:2px solid var(--accent);outline-offset:2px}
.events-calendar-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:9px;justify-self:end}

/* The event page header (the approved mockup's purple header): a solid block
   of the branch colour, white text on Legal and CFO, #2d2d2f on HR and CMO,
   grey for an unknown branch. Left: back, the name (the Folk number is a
   reversed chip), the plain lines and one plain-text status row. Right: the
   countdown, big, over Share and ⋯. Only buttons look like buttons. */
.detail-hero.event-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px 18px;background:var(--event-card-accent,#6b6b70);color:var(--event-card-ink,#fff);box-shadow:none}
.event-head h2{margin:0;color:inherit}
.event-head .hero-main>p{margin:3px 0 0;color:inherit;font-size:13px;font-weight:400;line-height:1.4}
.event-head .back{border:0;background:color-mix(in srgb,var(--event-card-ink,#fff) 16%,transparent);color:inherit}
.event-head .back:hover{background:color-mix(in srgb,var(--event-card-ink,#fff) 26%,transparent)}
.event-head .event-title-edit{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:4px}
.event-head .event-number{margin-right:10px;border:0;background:var(--event-card-ink,#fff);color:var(--event-card-accent,#6b6b70);font-size:13px}
.event-head .event-title-edit .event-star-button{display:inline-grid;width:30px;height:30px;flex:none;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:inherit;font:400 20px/1 sans-serif;opacity:.85}
.event-head .event-title-edit .event-star-button:hover,.event-head .event-title-edit .event-star-button.starred{background:color-mix(in srgb,var(--event-card-ink,#fff) 16%,transparent);color:inherit;opacity:1}
/* The status row: stage · mark · done/total tasks · Folk, each plain text in
   the header's colour, spaced rather than dotted. The stage reads in sentence
   case, and the mark is its word alone (the strip and Task list say why). */
.event-head-state{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:12px}
.event-head-state>*{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:inherit;font:600 13px/1 "Bricolage Grotesque",sans-serif;white-space:nowrap}
/* Three classes deep so it outranks event-stages.css (loaded later), whose
   complete stage is muted grey: on the coloured header every stage is the ink colour. */
.event-head .event-head-state .event-stage-tag{display:inline-block;height:auto;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:0;text-transform:lowercase}
.event-head .event-head-state .event-stage-tag::first-letter{text-transform:uppercase}
.event-head-state .event-status-mark b,.event-head-state .event-status-mark b[class]{color:inherit;font:inherit}
/* The mockup's Watch dot: 8px, #fed23f, in place of the list's ◆. At risk and
   On track keep the list's symbol until their dot colours are chosen. */
.event-head-state .event-mark-watch .event-mark-symbol{display:block;width:8px;height:8px;border-radius:50%;background:#fed23f;font-size:0;color:transparent}
.event-head-state .event-status-mark>span{display:none}
.event-head-tasks{font-variant-numeric:tabular-nums}
.event-head-state .event-head-folk{gap:8px}
.event-head-folk-button{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:0;border-radius:999px;background:color-mix(in srgb,var(--event-card-ink,#fff) 20%,transparent);color:inherit;font:600 12px/1 "Bricolage Grotesque",sans-serif;text-decoration:none;cursor:pointer}
.event-head-folk-button:hover{background:color-mix(in srgb,var(--event-card-ink,#fff) 35%,transparent);color:inherit}
.event-head-folk-button:focus-visible,.event-head .event-more:focus-visible{outline:2px solid var(--event-card-ink,#fff);outline-offset:2px}
.event-head .hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:0;margin:0}
.event-head .event-head-count{margin:0 0 6px;color:inherit;font:700 30px/1.1 "Poppins",sans-serif;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.event-head-buttons{display:flex;gap:6px}
.event-head .hero-action{border-color:color-mix(in srgb,var(--event-card-ink,#fff) 36%,transparent);background:color-mix(in srgb,var(--event-card-ink,#fff) 12%,transparent);color:inherit}
/* The header ⋯ takes the share button's size and shape (36px, a thin ring
   and a light fill in the header's text colour), so it reads as a button on
   every branch colour. Both deepen alike on hover. */
.event-head .event-more{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid color-mix(in srgb,var(--event-card-ink,#fff) 36%,transparent);border-radius:9px;background:color-mix(in srgb,var(--event-card-ink,#fff) 12%,transparent);color:inherit;cursor:pointer}
.event-head .hero-action:hover,.event-head .event-more:hover,.event-head .event-more[aria-expanded="true"]{background:color-mix(in srgb,var(--event-card-ink,#fff) 20%,transparent);color:inherit}
.event-head .row-menu-popover{color:var(--ink)}
/* On the event page the header runs edge to edge: it meets the menu on the
   left, the top bar above and the window's right edge, with no grey gap. The
   top bar keeps its buttons but not the title the header already shows (it
   stays for screen readers). */
body[data-event-page] .view{padding-top:0;max-width:none}
body[data-event-page] .detail-hero.event-head{margin-inline:-34px;border-radius:0;padding:28px 60px 24px}
body[data-event-page] .page-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-event-page] .top-actions{margin-left:auto}
/* Three columns down to 760px, so the countdown never drops and leaves empty
   colour beside the name. */
@media(max-width:760px){
  .detail-hero.event-head{grid-template-columns:auto minmax(0,1fr)}
  .event-head .hero-actions{grid-column:2;align-items:flex-start}
  body[data-event-page] .detail-hero.event-head{margin-inline:-16px;padding:28px 42px 24px}
  /* At phone width the header's popover opens under the whole header, so it never runs off the screen. */
  .detail-hero.event-head{position:relative}
  .event-head .events-pop-wrap{position:static}
  .event-head .row-menu-popover{top:calc(100% + 6px);right:16px;left:auto}
}
@media(max-width:560px){
  .detail-hero.event-head{grid-template-columns:minmax(0,1fr)}
  .event-head .back{display:none}
  .event-head .hero-actions{grid-column:1}
  .event-head h2{font-size:24px}
  body[data-event-page] .detail-hero.event-head{padding-bottom:18px}
}

/* Narrower pages, measured on the page rather than the window because the
   menu may sit beside it. The two tool buttons keep their full names; once
   they no longer fit beside a readable name, they move into the row's ⋯ (the
   signed-off mockup drops them from the row under 1100px). Then a row takes
   two lines. */
.events-index{container:events-index/inline-size}
@container events-index (max-width:960px){
  .events-index-row{grid-template-columns:44px minmax(0,1fr) 140px 84px 30px;gap:12px}
  .events-index-row .event-tool-pair{display:none}
  .events-index-row .event-menu-narrow{display:flex}
  .events-index-row hr.event-menu-narrow{display:block}
}
@container events-index (max-width:640px){
  .events-index-row,.events-rows.is-public .events-index-row{grid-template-columns:44px auto minmax(0,1fr) 30px;grid-template-areas:"date name name more" "date status count more";row-gap:2px;column-gap:8px}
  .events-rows.is-public .events-index-row{grid-template-columns:44px minmax(0,1fr) 30px;grid-template-areas:"date name more" "date count more"}
  .events-index-row .event-date-block{grid-area:date}
  .events-index-row .event-name-block{grid-area:name}
  .events-index-row .event-status-col{grid-area:status;min-width:0}
  .events-index-row .event-status-col .event-status-mark{display:flex;align-items:baseline;gap:6px;font-size:12.5px}
  .events-index-row .event-countdown-col{grid-area:count;color:var(--muted);font-size:12.5px;font-weight:500;text-align:left}
  .events-index-row .events-pop-wrap{grid-area:more}
  .events-index-row .event-row-sub{display:none}
}
@media(max-width:700px){.events-calendar-top .events-calendar-actions{grid-column:2;grid-row:2}}
@media(max-width:480px){.events-calendar-top .events-calendar-actions{grid-column:1/-1;grid-row:3;justify-self:start;justify-content:flex-start;min-width:0}}
/* Phone width: a row becomes two lines and the tool pair moves into the ⋯ menu */
@media(max-width:760px){
  .events-controls{gap:6px}
  .events-search{flex:1 1 100%;max-width:none}
  .events-index-row,.events-rows.is-public .events-index-row{grid-template-columns:44px auto minmax(0,1fr) 30px;grid-template-areas:"date name name more" "date status count more";row-gap:2px;column-gap:8px;padding:6px 8px 6px 14px}
  .events-rows.is-public .events-index-row{grid-template-areas:"date name name more" "date count count more"}
  .events-index-row .event-date-block{grid-area:date}
  .events-index-row .event-name-block{grid-area:name}
  .events-index-row .event-status-col{grid-area:status;min-width:0}
  .events-index-row .event-status-col .event-status-mark{display:flex;align-items:baseline;gap:6px;font-size:12.5px}
  .events-index-row .event-countdown-col{grid-area:count;color:var(--muted);font-size:12.5px;font-weight:500;text-align:left}
  .events-index-row .events-pop-wrap{grid-area:more}
  .events-index-row .event-row-sub,.events-index-row .event-tool-pair{display:none}
  .events-index-row .event-menu-narrow{display:flex}
  .events-index-row hr.event-menu-narrow{display:block}
}