/* TRELLAN: the comms screens. Reports 258, 259.

   Page-specific rules for this area only, after trellan.css and
   trellan-shell.css. Scope every rule to the page (its own class or
   `.t-<kind>` wrapper); do not restyle shared components here.
   See planning/trellan-screen-guide.md.

   Boards: comms-*, m-comms-* in ~/adealia/design/trellan-canvas/project/. */

/* ── 1. Events: the list and the calendar (events/index.html) ────────── */

.ev-index .ev-bar__label {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.ev-index .ev-bar__arrow {
  width: 40px; height: 40px; border: 1px solid var(--edge); border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--charcoal);
}
.ev-index .ev-bar__arrow:hover { background: var(--mist); }

/* The list: no box round a month, an ink rule under its head. */
.ev-index .ev-list .of-list { border: 0; background: transparent; }
.ev-index .ev-list .of-list__head { border-bottom: 1px solid var(--charcoal); }
.ev-index .ev-row { border-bottom: 1px solid var(--hairline); }
.ev-index .ev-date {
  border: 1px solid var(--hairline); border-radius: 0; background: var(--card-bg);
}
.ev-index .ev-date__month {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray);
}
.ev-index .ev-date__day { font-family: var(--font-display); font-weight: 300; color: var(--ink); }
.ev-index .ev-row.is-cancelled { background: var(--alert-bg); box-shadow: inset 3px 0 0 var(--alert-dot); }
.ev-index .ev-row.is-cancelled .ev-row__title, .ev-index .ev-row.is-cancelled .ev-row__when { color: var(--gray); }

/* "Full" and "Registration closed" open the event; drawn as chips. */
.ev-index [data-event-full], .ev-index .ev-closed, .ev-detail [data-event-full] {
  min-height: 0; padding: 2px 8px; border: 0; gap: 6px;
  font-family: var(--font-sans); font-weight: 400; font-size: 13px;
  letter-spacing: 0; text-transform: none;
}
.ev-index [data-event-full] { background: var(--warn-bg); color: var(--warn-fg); }
.ev-index .ev-closed { background: var(--muted-bg); color: var(--muted-fg); }
.ev-index [data-event-full]::before, .ev-index .ev-closed::before {
  content: ""; width: 8px; height: 8px; flex: none; background: currentColor;
}
.ev-index [data-event-full]::before { background: var(--warn-dot); }
.ev-index .ev-closed::before { background: var(--muted-dot); }

/* The calendar. */
.ev-index .evc-month { border-radius: 0; box-shadow: none; }
.ev-index .evc-dow {
  border-bottom: 1px solid var(--charcoal);
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--charcoal);
}
.ev-index .evc-cell.is-out { background: var(--mist); }
.ev-index .evc-cell.is-today { background: var(--mist); }
.ev-index .evc-cell.is-today .evc-cell__n { background: var(--charcoal); color: var(--card-bg); border-radius: 0; }
.ev-index .evc-cell__n { border-radius: 0; }
.ev-index .evc-chip {
  border-radius: 0; background: var(--card-bg); color: var(--charcoal);
  border: 1px solid var(--hairline); box-shadow: inset 2px 0 0 var(--green);
}
.ev-index .evc-chip--cancelled { background: var(--alert-bg); color: var(--alert-fg); box-shadow: inset 2px 0 0 var(--alert-dot); }
.ev-index .evc-dot { border-radius: 0; }
.ev-index .evc-day { border-radius: 0; box-shadow: none; }
.ev-index .evc-day__title {
  font-family: var(--font-display); font-weight: 300; font-size: 18px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}

/* ── 2. One event (events/detail.html) ───────────────────────────────── */

/* The head on the page ground, a hairline under it. */
.ev-detail .ev-hcard {
  border: 0; border-bottom: 1px solid var(--hairline); background: transparent;
  box-shadow: none; padding-inline: 0;
}
.ev-detail .ev-hcard__tag { border-radius: 0; }
.ev-detail .of-section, .ev-detail .ev-details { border-radius: 0; box-shadow: none; }
.ev-detail .ev-card__title, .ev-detail .evp-register__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.ev-detail .ev-details .ev-card__title { padding-bottom: 10px; border-bottom: 1px solid var(--charcoal); }
.ev-detail .ev-facts dt, .ev-detail .prof-readonly dt {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--charcoal);
}
.ev-detail .ev-calendar-clock { background: var(--mist); padding: 12px 14px; }

/* The register: initials square, Present / Didn't come a square
   segment (charcoal when chosen), Remove a quiet brick word. */
.ev-detail .evp-register__head { border-bottom: 1px solid var(--charcoal); }
.ev-detail .evp-person { border-bottom: 1px solid var(--hairline); }
.ev-detail .evp-person__ini { border-radius: 0; background: var(--mist); color: var(--charcoal); }
.ev-detail .evp-person .ev-seg[role="group"] { border: 1px solid var(--charcoal); border-radius: 0; padding: 0; background: var(--card-bg); }
.ev-detail .evp-person .ev-seg[role="group"] .ev-seg__btn,
.ev-detail .evp-person .ev-seg[role="group"] .ev-seg__on {
  border-radius: 0; background: var(--card-bg); color: var(--charcoal);
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
}
.ev-detail .evp-person .ev-seg[role="group"] .ev-seg__on,
.ev-detail .evp-person .ev-seg[role="group"] .ev-seg__on--present { background: var(--charcoal); color: var(--card-bg); }
.ev-detail .evp-person .ev-seg[role="group"] .ev-seg__btn:hover { background: var(--mist); }
.ev-detail .evp-person .ev-seg--quiet { border: 1px solid var(--hairline); border-radius: 0; color: var(--gray); }
.ev-detail .evp-person .ev-row__remove { color: var(--alert-fg); }
.ev-detail .ev-add-person { background: var(--mist); padding: 12px 14px; }
.ev-detail .ev-add-person label, .ev-detail .ev-add-person .field__label {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--charcoal);
}

/* Who it reaches now: two columns of names, each with its chip. */
.ev-detail .attendees { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 24px; }
.ev-detail .attendees > li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.ev-detail .person-status, .ev-calloff-page .person-status {
  display: inline-block; padding: 2px 8px; white-space: nowrap; border-radius: 0;
  background: var(--muted-bg); color: var(--muted-fg); font-size: 12px; text-transform: none;
}
.ev-detail .person-status::first-letter, .ev-calloff-page .person-status::first-letter { text-transform: uppercase; }
.ev-calloff-page .of-section { border-radius: 0; box-shadow: none; }
.ev-calloff-page .of-section__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}

/* ── 3. New / edit event (events/form.html) and cancel (cancel.html) ─── */
.ev-form-page .ev-card { border-radius: 0; box-shadow: none; }
.ev-form-page .ev-card__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.ev-form-page .ev-field, .ev-form-page #evKindLabel, .ev-form-page label[for="evDescription"] {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.ev-form-page .ev-field input, .ev-form-page .ev-field select, .ev-form-page .ev-field textarea,
.ev-form-page .ev-field__hint, .ev-form-page .ev-field__opt {
  font-family: var(--font-sans); font-weight: 400; font-size: 15px;
  letter-spacing: 0; text-transform: none;
}
.ev-form-page .ev-field__hint, .ev-form-page .ev-field__opt { font-size: 12px; color: var(--gray); }
.ev-form-page .ev-kind {
  border-radius: 0; font-family: var(--font-sans); font-weight: 400; font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--charcoal);
}
.ev-form-page .ev-kind:has(input:checked) { background: var(--charcoal); color: var(--card-bg); border-color: var(--charcoal); }
.ev-form-page .ev-form__foot { border-top: 1px solid var(--hairline); }

/* ── 4. Connect (connect/*; styling only, the chat's script untouched) ──
   Connect draws with its own --cx-* tokens; here they take Trellan's. */
html .cx {
  --cx-navy: var(--charcoal); --cx-copper: var(--charcoal); --cx-link: var(--leaf);
  --cx-line: var(--hairline); --cx-line-2: var(--hairline); --cx-muted: var(--gray);
  --cx-label: var(--charcoal); --cx-soft: var(--mist); --cx-chip: var(--mist);
  --cx-list-bg: var(--card-bg); --cx-red: var(--bloom);
  --cx-me-bg: var(--mist); --cx-me-chip: var(--mist); --cx-me-ink: var(--ink);
}
.cx .cx-list__title, .cx .cx-head__name, .cx .cx-intro__title, .cx .cx-pane__title {
  font-family: var(--font-display); font-weight: 300; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink);
}
.cx .cx-list__title { font-size: 22px; }
.cx .cx-intro__title { font-size: 22px; }
.cx .cx-intro__ico { border-radius: 0; background: var(--card-bg); border: 1px solid var(--hairline); }
/* The open channel: Mist with the green rule, as the rail. */
.cx .cx-row { border-radius: 0; }
.cx .cx-row.is-open, .cx .cx-row.is-open:hover {
  background: var(--mist); color: var(--ink); font-weight: 700; box-shadow: inset 2px 0 0 var(--green);
}
.cx .cx-row.is-open .cx-badge { background: var(--charcoal); color: var(--card-bg); }
.cx .cx-av, .cx .cx-face { border-radius: 0; background: var(--mist); color: var(--charcoal); border: 1px solid var(--hairline); }
.cx .cx-av--me { background: var(--charcoal); color: var(--card-bg); border-color: var(--charcoal); }
.cx .cx-msg__by { color: var(--ink); }
.cx .cx-day span {
  height: auto; padding: 0 4px; border: 0; border-radius: 0; background: transparent;
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--charcoal);
}
.cx .cx-threadlink { border: 1px solid var(--hairline); border-radius: 0; }
.cx .cx-box { border-radius: 0; border-color: var(--edge); }
.cx .cx-send { border-radius: 0; width: 40px; height: 40px; }
.cx .cx-send:disabled { background: var(--stone); }
.cx .cx-headbtn { border-radius: 0; }

/* New / edit channel (connect/channel_form.html). */
.connect-channel-form-page > .of-card, .connect-channel-form-page form.of-card {
  border: 1px solid var(--hairline); border-radius: 0; box-shadow: none; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.connect-channel-form-page .settings-field, .connect-channel-form-page .settings-field > legend {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.connect-channel-form-page fieldset.settings-field { border: 0; border-top: 1px solid var(--hairline); padding: 14px 0 0; margin: 0; }
.connect-channel-form-page .settings-field input, .connect-channel-form-page .settings-field select,
.connect-channel-form-page .settings-field__hint, .connect-channel-form-page fieldset.settings-field label {
  font-family: var(--font-sans); font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none;
}
.connect-channel-form-page fieldset.settings-field label { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.connect-channel-form-page .settings-field__hint { font-size: 13px; color: var(--gray); }
.connect-channel-form-page .of-formbar { border: 0; padding-inline: 0; }
.connect-channel-form-page [data-channel-archive] .ui-btn { align-self: flex-start; }
.connect-channel-form-page .cx-card__title {
  margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.connect-channel-form-page [data-channel-archive] p { margin: 0; }

/* ── 5. Messages (messages/index, detail, new) ───────────────────────── */
.write-page .of-section, .message-page .of-section, .message-page .of-facts { border-radius: 0; box-shadow: none; }
/* Decision 7: the filter fields sit on one bottom line, so a long label
   never pushes its field down. */
.write-page .aud-fields { align-items: end; }
.write-page .aud-fields > label, .write-page label.field {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.write-page .aud-fields > label select, .write-page .aud-fields > label input,
.write-page label.field input, .write-page label.field textarea,
.write-page label.field .field-note {
  font-family: var(--font-sans); font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none;
}
.write-page label.field .field-note { font-size: 13px; color: var(--gray); }
.write-page .write-who { background: var(--mist); padding: 14px 16px; }
.message-page .of-facts__row dt, .message-page .of-facts dt {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--charcoal);
}
.message-page .outbox-msg__body { background: var(--mist); border: 0; border-radius: 0; padding: 12px 16px; }

/* ── 6. Signatures (signatures/index, detail, sign) ──────────────────── */
.signatures-page .of-list { border-radius: 0; box-shadow: none; }
.sig-page .ui-title, .signature-page .of-head__title {
  font-family: var(--font-display); font-weight: 300; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink);
}
.sig-page .ui-card, .signature-page .of-section, .signature-page .of-card { border-radius: 0; box-shadow: none; }
.sig-page .ui-card__title, .signature-page .of-section__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.sig-page .sig-consent, .signature-page .sig-consent { background: var(--mist); border: 0; border-radius: 0; padding: 12px 16px; }
.signature-page .sig-facts dt {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--charcoal);
}

@media (max-width: 759.98px) {
  .write-page .of-formbar .ui-btn--commit, .sig-page #signButton { width: 100%; justify-content: center; }
}

@media (max-width: 759.98px) {
  .ev-detail .ev-hcard__actions .ui-btn, .ev-detail .ev-hcard__actions form { width: 100%; }
  .ev-detail .ev-seg { width: 100%; }
  .ev-detail .ev-seg__btn, .ev-detail .ev-seg__on { flex: 1; text-align: center; }
}

@media (max-width: 759.98px) {
  .ev-index .of-head .ui-btn--primary { width: 100%; justify-content: center; }
  .ev-index .ev-bar__arrow { width: 44px; height: 44px; }
  .ev-index .ev-bar .of-seg { flex: 1 1 100%; display: flex; }
  .ev-index .ev-bar .of-seg__opt { flex: 1; justify-content: center; }
  .ev-index .of-toolbar .of-select { flex: 1 1 100%; width: 100%; max-width: none; }
  .ev-index .ev-list .of-list { border: 0; }
  .ev-index .ev-list .ev-row { border-inline: 0; }
}