/* OpenFlow v2: the events pages' own rules. Report 204, filled by report 205.
   Uses the shared templates in of-base.css (`templates/_of.html`); only
   this page group's rules go here. See
   planning/design/openflow-v2-handoff/BUILD-NOTES.md.

     1. Events: the toolbar (month, Upcoming / Past, Calendar / List)
     2. Events: list rows (the date block, the action)
     3. Events: the month calendar and the chosen day */

:root {
  --evc-ce-bg: var(--warn-bg);      --evc-ce-fg: var(--warn-fg);  --evc-ce-dot: var(--copper-cta);
  --evc-or-bg: #E6E9F2;             --evc-or-fg: var(--ink-1);    --evc-or-dot: var(--ink-1);
  --evc-ot-bg: #F2EEE6;             --evc-ot-fg: var(--ink-1);    --evc-ot-dot: #8F96B3;
  --evc-x-bg:  var(--alert-bg);     --evc-x-fg:  var(--alert-fg); --evc-x-dot:  var(--alert-fg);
}

/* ── 1. The toolbar ──────────────────────────────────────────────────── */
.ev-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.ev-bar__view { margin-left: auto; }
.ev-bar .of-seg__opt { gap: 6px; padding: 0 12px; }
.ev-bar .of-seg__opt .ms { font-size: 18px; }
.ev-bar__month { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ev-bar__arrow {
  width: 36px; height: 36px; flex: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-bg); color: var(--ink-1); text-decoration: none;
}
.ev-bar__arrow:hover { border-color: var(--ink-1); color: var(--ink-1); }
.ev-bar__arrow .ms { font-size: 20px; }
.ui-page .ev-bar__label { margin: 0 8px; font-size: 18px; font-weight: 600; white-space: nowrap; color: var(--ink-1); }
.ev-bar .ev-bar__today { height: 36px; min-height: 36px; padding: 0 12px; font-size: 14px; }

/* ── 2. List rows ───────────────────────────────────────────────────────
   `.ev-row` is kept for the walkthrough's selector; components.css still
   styles that name for the old list, so the rules it set are undone here. */
.ev-index .ev-list { display: block; }
.ev-index .ev-month + .ev-month .of-group-label { margin-top: 24px; }
.ev-index .of-row.ev-row {
  display: grid; grid-template-columns: var(--of-cols); flex-wrap: nowrap; gap: 6px 16px;
  padding: 14px 20px; transition: none; align-items: center;
}
.ev-index .of-list__head + .of-row.ev-row,
.ev-index .of-list > .of-row.ev-row:first-child { border-top: 0; }
.ev-index .ev-row:hover { background: var(--of-head-bg); }
.ev-index .ev-row .of-row__main { align-items: flex-start; gap: 14px; }
.ev-index .ev-date {
  width: 46px; flex: none; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 4px 0; line-height: 1.1;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg);
}
.ev-index .ev-date__month { font-size: 13px; color: var(--of-head-ink); }
.ev-index .ev-date__day { font-size: 18px; font-weight: 600; color: var(--ink-1); }
.ev-index .ev-row__title { font-size: 16px; font-weight: 500; }
.ev-index .ev-row__when { font-size: 14px; }
.ev-index .ev-row.is-cancelled .ev-row__title { text-decoration: line-through; }
.ev-index .ev-row__places { white-space: normal; font-size: 14px; color: var(--of-head-ink); }

.ev-row__act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.ev-row__act .ui-inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.ev-row__act .ui-btn { min-height: 36px; height: 36px; padding-block: 0; white-space: nowrap; }
.ev-row__act .of-pill { position: relative; z-index: 1; }

@media (max-width: 1023.98px) {
  /* The row stacks: the date block and title, then For · places, then the
     action, all lined up under the title (16 + 46 + 14). */
  .ev-index .of-row.ev-row { display: block; padding: 14px 36px 14px 76px; }
  .ev-index .ev-row > .of-row__main { margin-left: -60px; }
  .ev-index .ev-row__act { justify-content: flex-start; margin-top: 10px; flex-wrap: wrap; }
}
@media (max-width: 759.98px) {
  /* components.css turns the date block into a line of text on a phone;
     the handoff keeps the block. The action takes the row. */
  .ev-index .ev-date { flex-direction: column; align-items: center; width: 46px; padding: 4px 0; border: 1px solid var(--line); background: var(--card-bg); }
  .ev-index .ev-date__day { font-size: 18px; }
  .ev-index .ev-row__act > form:not(.ev-going-form),
  .ev-index .ev-row__act > form:not(.ev-going-form) .ui-btn,
  .ev-index .ev-row__act > a.ui-btn { flex: 1 1 100%; width: 100%; justify-content: center; }
}

/* ── 3. The month calendar ───────────────────────────────────────────────
   The grid and the chosen day side by side on a wide screen; the day goes
   under the grid below 1180. A phone's grid shows dots, not titles. */
.evc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.evc__main { min-width: 0; }
@media (max-width: 1179.98px) {
  .evc { grid-template-columns: minmax(0, 1fr); }
}
.evc-month { overflow: hidden; }
.evc-dow, .evc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.evc-dow {
  background: var(--of-head-bg); border-bottom: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; color: var(--of-head-ink); text-align: center;
}
.evc-dow > span { padding: 8px 0; }
.evc-dow__short { display: none; }
.evc-week + .evc-week { border-top: 1px solid var(--line-2); }
.evc-cell {
  position: relative; min-width: 0; min-height: 104px; box-sizing: border-box;
  padding: 6px; display: flex; flex-direction: column; gap: 3px;
  background: var(--card-bg);
}
.evc-cell + .evc-cell { border-left: 1px solid var(--line-2); }
.evc-cell.is-out { background: var(--of-head-bg); }
.evc-cell:not(.is-out):hover { background: var(--of-head-bg); }
.evc-cell.is-chosen { background: #F2EEE6; }
.evc-cell__n {
  align-self: flex-start; width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 13px; color: var(--ink-1); text-decoration: none;
}
/* The whole square picks the day; a chip inside opens its event. */
.evc-cell__n::after { content: ""; position: absolute; inset: 0; }
.evc-cell__n:hover { color: var(--ink-1); }
.evc-cell__n:focus-visible { outline: none; }
.evc-cell__n:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.evc-cell.is-chosen .evc-cell__n { font-weight: 600; }
.evc-cell.is-today .evc-cell__n { background: var(--ink-1); color: #fff; font-weight: 600; }
.evc-chip {
  position: relative; z-index: 1; display: block; min-width: 0;
  padding: 2px 6px; border-radius: 6px;
  font-size: 13px; line-height: 1.3; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evc-chip b { font-weight: 600; }
.evc-chip:hover { filter: brightness(.96); text-decoration: none; }
.evc-chip--ce { background: var(--evc-ce-bg); color: var(--evc-ce-fg); }
.evc-chip--orientation { background: var(--evc-or-bg); color: var(--evc-or-fg); }
.evc-chip--other { background: var(--evc-ot-bg); color: var(--evc-ot-fg); }
.evc-chip--cancelled { background: var(--evc-x-bg); color: var(--evc-x-fg); text-decoration: line-through; }
.evc-chip:hover, .evc-chip:focus { color: inherit; }
.evc-more { font-size: 13px; color: var(--of-head-ink); padding-left: 6px; }
.evc-dots { display: none; gap: 3px; justify-content: center; flex-wrap: wrap; }
.evc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--evc-ot-dot); }
.evc-dot--ce { background: var(--evc-ce-dot); }
.evc-dot--orientation { background: var(--evc-or-dot); }
.evc-dot--cancelled { background: var(--evc-x-dot); }

.evc-legend {
  list-style: none; margin: 10px 0 0; padding: 0 4px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--of-head-ink);
}
.evc-legend li { display: flex; align-items: center; gap: 6px; }

.evc-day { overflow: hidden; }
.evc-day__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line-2);
}
.ui-page .evc-day__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink-1); }
.evc-day__count { font-size: 14px; color: var(--of-muted); }
.evc-day__empty { margin: 0; padding: 24px 20px; font-size: 15px; color: var(--of-muted); }
.evc-day__empty a { color: var(--accent); }
.evc-item {
  position: relative; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px;
}
.evc-item + .evc-item { border-top: 1px solid var(--line-2); }
.evc-item:hover { background: var(--of-head-bg); }
.evc-item__time { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--of-head-ink); }
.evc-item__title { font-size: 16px; }
.evc-item.is-cancelled .evc-item__title { text-decoration: line-through; }
.evc-item__meta { font-size: 14px; color: var(--of-muted); }
.evc-item .ev-row__act { position: relative; z-index: 1; justify-content: flex-start; flex-wrap: wrap; }

@media (max-width: 759.98px) {
  .evc-dow__long { display: none; }
  .evc-dow__short { display: inline; }
  .evc-cell { min-height: 52px; padding: 4px 2px; align-items: center; }
  .evc-cell__n { align-self: center; }
  .evc-chip, .evc-more { display: none; }
  .evc-dots { display: flex; }
  .evc-dot { width: 6px; height: 6px; }
  .evc-legend .evc-dot { width: 8px; height: 8px; }
  .ev-bar__view { margin-left: 0; }
  .evc-item .ev-row__act > form:not(.ev-going-form),
  .evc-item .ev-row__act > form:not(.ev-going-form) .ui-btn,
  .evc-item .ev-row__act > a.ui-btn { flex: 1 1 100%; width: 100%; justify-content: center; }
}

/* ── 7. Resources (List: folders as groups, rows open in place) ──────────
   library.css draws the old shapes under `.lib-page`; the toolbar, the
   chips, the 13/600 folder label and the 14/20 row are the handoff's. */
/* The page wrapper is the template's (`of-t`), so the old one adds nothing. */
.res-page #library.library--page { display: block; padding: 0; max-width: none; overflow: visible; }
.res-page .lib-head.of-toolbar { flex-direction: row; gap: 8px; margin: 0 0 16px; }
.res-page .lib-head input[type="search"].of-search { flex: 1 1 260px; height: 42px; min-height: 42px; padding: 0 12px; border-radius: 10px; font-size: 15px; }
.res-page .lib-filters.of-chips { gap: 6px; }
.res-page .lib-filters .of-chip.filter {
  height: 34px; padding: 0 12px; font: inherit; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-1);
}
.res-page .lib-filters .of-chip.filter.active { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.res-page .lib-filters .of-chip .lib-count { font-weight: 600; }
.res-page .lib-folder + .lib-folder { margin-top: 20px; }
.ui-page.res-page .lib-folder-name.of-group-label {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px 4px;
  font-size: 13px; font-weight: 600; color: var(--of-head-ink); letter-spacing: 0;
}
.res-page .lib-folder-name .lib-count { font-size: 13px; color: var(--of-muted); }
.res-page .lib-cards.of-list { margin: 0; }
.res-page .lib-item + .lib-item { border-top: 1px solid var(--line-2); }
.res-page .lib-item-head { min-height: 0; padding: 14px 20px; gap: 6px 12px; flex-wrap: wrap; }
.res-page .lib-item-head:hover { background: var(--of-head-bg); }
.res-page .lib-item-name { flex: 1 1 240px; font-size: 16px; font-weight: 500; }
.res-page .lib-item.open { background: var(--card-bg); }
.res-page .lib-item-body { padding: 0 20px 16px 54px; }
.res-page .lib-item.open .lib-item-body { display: flex; flex-direction: column; gap: 8px; }
.res-page .lib-meta { font-size: 14px; color: var(--of-muted); }
.res-page .lib-actions { margin-top: 0; }
.res-page .lib-actions .ui-btn { min-height: 36px; height: 36px; padding-block: 0; white-space: nowrap; }
.res-page .lib-upload { margin: 0 0 10px; }
.res-page .lib-empty { border-radius: 14px; }
@media (max-width: 759.98px) {
  .res-page .lib-item-head { padding: 14px 16px; }
  .res-page .lib-item-body { padding: 0 16px 16px 16px; }
}

/* ── 6. Notifications (List at 880) ──────────────────────────────────────
   An unread row has a dot before it and a 600 title; the time is the
   row's one cell. */
.notes-page .of-row__main { align-items: flex-start; gap: 10px; }
.note-dot { width: 8px; height: 8px; flex: none; margin-top: 8px; border-radius: 50%; background: transparent; }
.note-unread .note-dot { background: var(--copper-cta); }
.note-unread .of-row__title { font-weight: 600; }
.notes-page span.of-row__title { color: var(--ink-1); }
.notes-page .note-when { font-size: 14px; color: var(--of-muted); }
.notes-page .push-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; padding: 18px 20px; margin: 0;
}
.notes-page .push-box .ui-btn { white-space: nowrap; }
@media (max-width: 1023.98px) {
  .notes-page .of-row { padding-left: 34px; }
  .notes-page .of-row > .of-row__main { margin-left: -18px; }
  .notes-page .note-when { display: block; margin-top: 2px; }
}

/* ── 5. New event and Edit event (Form) ──────────────────────────────────
   The form bar is the shared `.of-formbar`; components.css still draws
   `.ev-form__foot` as a card, so that is undone. Copper first, Cancel, then
   the consequence line. */
.ev-form-page .of-formbar.ev-form__foot {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 12px; background: color-mix(in srgb, var(--page-bg) 94%, transparent);
}
.ev-form-page .of-formbar .ui-btn--primary { order: 1; }
.ev-form-page .of-formbar .ev-form__cancel { order: 2; }
.ev-form-page .of-formbar .ev-form__says { order: 3; flex: 1 1 240px; font-size: 14px; color: var(--of-muted); }
.ev-form-page .ev-cancel .of-danger { margin-left: 0; height: 40px; }

/* ── 4. One event (Detail) ───────────────────────────────────────────────
   The header card (pill, title, time, actions), then the register and its
   cards in the main column and the Details card on the right. The page
   keeps `.evce`, so pages-events-ce.css still draws what is inside the
   cards; the handoff's differences are here. */
.ev-hcard {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px;
  padding: 22px 24px; margin: 0 0 20px;
}
.ev-hcard__text { flex: 1 1 340px; min-width: 0; }
.ev-hcard__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.ev-detail .ev-hcard__tag {
  font-size: 14px; color: var(--of-muted);
  padding: 0; background: none; border: 0; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.ev-hcard .of-head__title { text-wrap: pretty; }
.ev-hcard__state { margin: 10px 0 0; }
.ev-hcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-detail .ev-hcard__actions .ev-detail-actions { display: contents; }
.ev-hcard__actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ev-hcard__actions .ui-btn { min-height: 40px; height: 40px; padding-block: 0; white-space: nowrap; }
.ev-hcard__actions .ev-going { font-size: 15px; }
/* Secondary first, the one copper last (rule 2). */
.ev-hcard__actions > .ui-btn--primary,
.ev-hcard__actions form:has(> .ui-btn--primary) { order: 9; }
@media (max-width: 759.98px) {
  .ev-hcard { padding: 18px 16px; }
  .ev-hcard__actions { width: 100%; }
  .ev-hcard__actions .ui-btn--primary,
  .ev-hcard__actions form:has(> .ui-btn--primary) { flex: 1 1 100%; justify-content: center; }
}

.ev-detail .of-detail__main { display: flex; flex-direction: column; gap: 16px; }
.ev-detail .of-detail__main > * { margin: 0; }
.ev-detail .ev-details { margin: 0; gap: 12px; }
.ev-detail .ev-details > * { margin-top: 0; margin-bottom: 0; }
.ev-detail__single { max-width: 760px; }
.ev-detail .ev-card__title { margin: 0; font-size: 18px; font-weight: 600; }

/* The register as the handoff draws it: an 18/600 head with its count,
   rows 14/20, Present / Didn't come as one segmented control. */
.ev-detail .evp-register { border-radius: 14px; }
.ev-detail .evp-register__head { padding: 16px 20px; background: var(--card-bg); align-items: baseline; }
.ev-detail .evp-register__title { font-size: 18px; }
.ev-detail .evp-register__count { font-size: 14px; color: var(--of-muted); }
.ev-detail .ev-marking { margin: 0; border-radius: 12px; }
.ev-detail .evp-person { padding: 14px 20px; border-top: 1px solid var(--line-2); gap: 8px 14px; }
.ev-detail .evp-person__ini { width: 36px; height: 36px; font-size: 13px; }
.ev-detail .evp-person__meta { font-size: 14px; color: var(--of-muted); }
.evp-person .ev-seg[role="group"] {
  display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 3px;
  background: var(--chip-bg); border-radius: 10px;
}
.evp-person .ev-seg[role="group"] .ev-seg__btn,
.evp-person .ev-seg[role="group"] .ev-seg__on {
  height: 32px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-1); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.evp-person .ev-seg[role="group"] .ev-seg__btn:hover { background: color-mix(in srgb, #fff 55%, transparent); }
.evp-person .ev-seg[role="group"] .ev-seg__on { background: var(--card-bg); }
.evp-person .ev-seg[role="group"] .ev-seg__on--present { background: var(--ok-bg); color: var(--green-deep); }
.ev-detail .evp-person .ev-row__remove { color: var(--accent); background: none; border: 0; }
.ev-detail .evp-register .ev-add-person { padding: 14px 20px; background: var(--of-head-bg); }

/* Report 256: folders inside a collection, each a heading that opens. */
.res-page .lib-cards.of-list:empty { display: none; }
.res-page .lib-subfolder { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card-bg); }
.res-page .lib-subfolder > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px;
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink-1); list-style: none;
}
.res-page .lib-subfolder > summary::-webkit-details-marker { display: none; }
.res-page .lib-subfolder > summary .lib-count { font-size: 13px; font-weight: 400; color: var(--of-muted); }
.res-page .lib-subfolder > summary .ui-pill { margin-left: auto; font-weight: 400; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-page .lib-subfolder[open] > summary { border-bottom: 1px solid var(--line-2); }
.res-page .lib-subfolder > .lib-cards.of-list { border: 0; box-shadow: none; }
/* Folder vs. its items (Danny, 23 Oct: "all white, hard to tell what's what").
   The folder row sits on the sunken tone, the items inside stay white and
   are inset with an accent rule, so an open folder reads as a container. */
.res-page .lib-subfolder { background: var(--sunken, #EDEAE3); overflow: hidden; }
.res-page .lib-subfolder > summary { background: var(--sunken, #EDEAE3); font-weight: 600; }
.res-page .lib-subfolder > summary:hover { background: color-mix(in srgb, var(--sunken, #EDEAE3) 80%, var(--ink-1, #303030) 6%); }
.res-page .lib-subfolder > summary .lib-ico { color: var(--accent); }
.res-page .lib-subfolder[open] > .lib-cards.of-list { background: var(--card-bg, #fff);
  margin: 0 0 0 14px; border-left: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 0; }
.res-page .lib-access { padding: 12px 16px; border-top: 1px solid var(--line-2); font-size: 14px; }
.res-page .lib-access fieldset { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.res-page .lib-access legend { font-weight: 600; margin-bottom: 4px; }
.res-page .lib-access select { max-width: 100%; }
.res-page .lib-move input[type="text"] { max-width: 220px; }
.res-page .lib-newfolder { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.res-page .lib-newfolder input[type="text"], .res-page .lib-access input[type="text"] { max-width: 320px; }