/* OpenFlow v2: the progress pages' own rules. Report 204.
   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. */

/* ── Continuing education (page map 03) · report 207 ──────────────────
   Progress template: the hours card, what the state asks as one card of
   rows, the courses as rows that open in place. The old two-column rules
   in components.css (§27) still exist for other pages; here they are
   reset to the drawn screen. */

.evce .ce-stub {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 16px; padding: 12px 16px;
  background: #EEF1F6; border: 0; border-radius: 12px;
  font-size: 14px; color: var(--ink-1);
}
.evce .ce-stub .ms { font-size: 20px; color: var(--of-head-ink); }
.evce .ce-stub__text { max-width: none; }
.evce .ce-stub strong { font-weight: 600; }

/* The hours cards. `of-progress` draws them; these are the extras. */
.evce .ce-owed { display: flex; flex-direction: column; }
.evce .ce-standing + .ce-standing { margin-top: 0; padding-top: 22px; border-top: 1px solid var(--line); }
.evce .ce-standing .of-meter { margin: 12px 0 10px; }
.evce .ce-standing .of-progress__line + .of-progress__line { margin-top: 6px; }
.evce .ce-owed__figure--none { font-size: 26px; }
.evce .ce-standing__summary { margin: 0; font-size: 14px; color: var(--of-muted); }
/* The domain's sentences under the bar and under the card read as lines
   here, not as the boxed notes components.css draws elsewhere. */
.evce .ce-standing__because,
.evce .ce-standing__caveat,
.evce .ce-standing__dormant-link,
.evce .ce-standing__shared {
  background: none; border: 0; padding: 0; border-radius: 0;
  max-width: none; font-size: 14px; color: var(--of-muted);
}
.evce .ce-owed + .of-group-label { margin-top: 0; }
.evce .ce-standing__dormant-link a { color: var(--copper-press, #94501E); text-decoration: underline; }

/* What the state asks: one white card, a row per line, divided by
   hairlines (rule 4). Rows open nothing, so no hover and no chevron. */
.evce .ce-asks { overflow: hidden; margin: 0 0 8px; }
.evce .ce-asks .ce-parts, .evce .ce-asks .ce-obligations { gap: 0; }
.evce .ce-asks .ce-part, .evce .ce-asks .ce-obligation {
  align-items: center; padding: 13px 20px; font-size: 15px;
  border-bottom: 0; border-top: 1px solid #EEEAE2;
}
.evce .ce-asks .ce-parts > .ce-part:first-child { border-top: 0; }
.evce .ce-asks .ce-parts:empty + .ce-obligations > .ce-obligation:first-child { border-top: 0; }
.evce .ce-part__label { display: flex; flex-direction: column; flex: 1 1 220px; }
.evce .ce-part__period { margin: 0; font-size: 14px; font-weight: 400; color: var(--of-muted); }
.evce .ce-part__state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; justify-content: flex-end; }
.evce .ce-part__figure { font-size: 14px; }
/* The pill, in the handoff's shape (rule 7): a word on a soft ground. */
.evce .ce-state { height: 24px; padding: 0 10px; font-size: 13px; font-weight: 500; }
.evce .ce-state::before { display: none; }
.evce .ce-state--met { background: #E3F2EA; color: var(--green-deep, #0F6B4F); }
.evce .ce-standing__shared,
.evce .ce-source { margin: 0 4px 20px; font-size: 14px; color: var(--of-muted); max-width: none; }
.evce .ce-standing__shared { margin-bottom: 8px; }

/* Your courses: a group label with the approved total beside it. */
.evce .ce-courses__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 24px 4px 8px; }
.evce .ce-courses__head .of-group-label { margin: 0; }
.evce .ce-approved-total { margin: 0; font-size: 13px; color: var(--of-muted); }
.evce .ce-approved-total strong { color: var(--alert-fg); font-weight: 600; }
.evce .ce-courses { margin-bottom: 16px; }

/* Report 250: the courses are a table (`ce/_course_table.html`). The
   header is the shared `.ui-table` head; each header is a sort link. */
.evce .ce-course__name { font-weight: 500; color: var(--ink-1); overflow-wrap: anywhere; }
.evce .ce-table-wrap { margin-bottom: 16px; border-radius: var(--radius-lg); }
.evce .ce-table { table-layout: auto; }
.evce .ce-table thead th { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4);
  background: var(--rail-bg); border-bottom: 1px solid var(--line-2); padding: 0; }
.evce .ce-th__sort { display: flex; align-items: center; gap: 2px; padding: 10px 14px;
  color: inherit; text-decoration: none; white-space: nowrap; }
.evce .ce-th.ui-table__right .ce-th__sort { justify-content: flex-end; }
.evce .ce-th__sort:hover, .evce .ce-th__sort.is-on { color: var(--ink-1); }
.evce .ce-th__sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.evce .ce-th__arrow { font-size: 16px; opacity: .45; }
.evce .ce-th__sort.is-on .ce-th__arrow { opacity: 1; color: var(--copper-press, #94501E); }
.evce .ce-th--toggle { width: 44px; }
.evce .ce-table td { padding: 12px 14px; font-size: 14px; color: var(--ink-1); }
.evce .ce-td--number .ui-id { border: 0; background: none; padding: 0; font: inherit; color: var(--of-muted); }
.evce .ce-td--date, .evce .ce-td--number, .evce .ce-td--category { color: var(--of-muted); }
.evce .ce-td--date, .evce .ce-td--number, .evce .ce-td--category, .evce .ce-td--status { white-space: nowrap; }
.evce .ce-td__unit { display: none; }
.evce .ce-row { cursor: pointer; }
.evce .ce-table tbody tr.ce-detail:hover { background: none; }
.evce .ce-detail > td { padding: 0 14px 16px; border-bottom: 1px solid var(--line-2); }
.evce .ce-row:has(+ .ce-detail:not([hidden])) > td { border-bottom: 0; }
.evce .ce-row--sent-back > td:first-child { box-shadow: inset 3px 0 0 var(--alert-fg); }
.evce .ce-detail.ce-row--sent-back > td { box-shadow: inset 3px 0 0 var(--alert-fg); }
.evce .ce-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  color: var(--of-head-ink); cursor: pointer; }
.evce .ce-toggle:hover { background: var(--of-head-bg); }
.evce .ce-toggle .ms { font-size: 22px; transition: transform .12s; }
.evce .ce-toggle[aria-expanded="true"] .ms { transform: rotate(180deg); }
.evce .ce-total th, .evce .ce-total td { padding: 10px 14px; font-size: 14px; font-weight: 600;
  color: var(--ink-1); background: var(--rail-bg); border-top: 1px solid var(--line-2); }
.evce .ce-total__label { text-align: left; }
/* The Sort by select is for a phone; on a wide screen the headers sort. It
   stays in the form, so a filter keeps the sort. */
.evce .ce-sortsel { display: none; }

/* A phone: no sideways scroll. Each course is two lines — the title (and
   its toggle), then date · hours · status. Number and Category are in the
   table on a wide screen; the search still finds by number. */
@media (max-width: 720px) {
  .evce .ce-sortsel { display: contents; }
  .evce .ce-table, .evce .ce-table tbody, .evce .ce-table tfoot { display: block; width: 100%; }
  .evce .ce-table thead { display: none; }
  .evce .ce-row { display: grid; grid-template-columns: max-content max-content 1fr 36px;
    grid-template-areas: "name name name toggle" "date hours status status";
    align-items: center; gap: 4px 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .evce .ce-row:has(+ .ce-detail:not([hidden])) { border-bottom: 0; }
  .evce .ce-row > td, .evce .ce-total > * { display: block; width: auto; min-width: 0; padding: 0; border: 0; white-space: nowrap; }
  .evce .ce-row { width: auto; }
  .evce .ce-row > .ce-td--name { white-space: normal; }
  .evce .ce-row > .ce-td--number, .evce .ce-row > .ce-td--category { display: none; }
  .evce .ce-td--name { grid-area: name; }
  .evce .ce-td--date { grid-area: date; }
  .evce .ce-td--hours { grid-area: hours; text-align: left; color: var(--of-muted); }
  .evce .ce-td--status { grid-area: status; justify-self: start; }
  .evce .ce-td--toggle { grid-area: toggle; }
  .evce .ce-td__unit { display: inline; }
  .evce .ce-row--sent-back > td:first-child { box-shadow: none; }
  .evce .ce-row.ce-row--sent-back { box-shadow: inset 3px 0 0 var(--alert-fg); }
  .evce .ce-detail { display: block; width: auto; padding: 0; border-bottom: 1px solid var(--line-2); }
  .evce .ce-detail[hidden] { display: none; }
  .evce .ce-detail > td { display: block; padding: 0 14px 14px; }
  .evce .ce-total { display: flex; align-items: baseline; }
  .evce .ce-total__hours { margin-left: auto; white-space: nowrap; }
  .evce .ce-total { width: auto; padding: 10px 14px; gap: 8px; background: var(--rail-bg); border-top: 1px solid var(--line-2); }
  .evce .ce-total th, .evce .ce-total td { border-top: 0; }
  .evce .ce-total td:empty { display: none; }
}
.evce .ce-course__body { padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.evce .ce-course__body .ce-reason { margin: 0; font-size: 15px; color: var(--ink-1); }
.evce .ce-course__body .ce-picked { margin: 0; font-size: 14px; color: var(--of-muted); }
.evce .ce-course__body .ce-edits { margin: 4px 0 0; }
.evce .ce-course__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 6px 0 0; }
.evce .ce-course__links a:not(.ui-btn) { color: var(--copper-press, #94501E); font-weight: 500; text-decoration: none; }
.evce .ce-course__links a:not(.ui-btn):hover { text-decoration: underline; }
.evce .ce-course__links .ui-btn { min-height: 36px; height: 36px; padding-block: 0; }
.evce .ce-evidence__file { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.evce .ce-evidence__name { font-size: 14px; color: var(--of-muted); overflow-wrap: anywhere; }
.evce .ce-nar { margin: 0 4px; font-size: 14px; color: var(--of-muted); max-width: none; }
.evce .ce-nolicence { margin: 0 0 16px; }

/* Add a course: the form, in the side panel or as a Form page. Three
   short fields may share a row (the Form template's rule). */
.evce .ce-add__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 12px; }
.evce .ce-add__grid > label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.evce .ce-add__grid > label > input,
.evce .ce-add__grid > label > select { height: 42px; min-height: 42px; width: 100%; box-sizing: border-box; font-weight: 400; }
.evce .ce-add__grid > .ce-add__wide { grid-column: 1 / -1; }
.ce-add-panel .ce-certificate,
.ce-add .ce-certificate { margin-top: 14px; }
.ce-add-panel .prof-note,
.ce-add .prof-note { margin: 10px 0 0; font-size: 14px; color: var(--of-muted); }
.ce-add-panel .ce-hint, .ce-add .ce-hint { margin: 12px 0 0; }

/* ── Not found, no access, a fault of ours (page map 55) · report 207 ──
   The States template's error card, inside the frame. */
.of-error__card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 40px 24px; margin: 24px 0 0;
}
.of-error__ico { font-size: 32px; color: var(--alert-fg); }
.of-error__title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-1); }
.of-error__title:focus { outline: none; }
.of-error__text { margin: 0; max-width: 520px; font-size: 15px; color: var(--of-muted); }
.of-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.of-error__actions .ui-btn { min-height: 40px; white-space: nowrap; }
@media (max-width: 759.98px) {
  .of-error__card { padding: 32px 16px; }
  .of-error__actions .ui-btn { flex: 1 1 100%; }
}

/* ── Onboarding and other checklists (page map 17–20, 22) · report 207 ──
   `journeys/_frame.html` is the 880 Progress column now; the old frame's
   560 phone column, its ground and its own padding are put back to the
   template's. */
.of-t.jp { max-width: calc(880px + 64px); min-height: 0; background: transparent; display: block; }
.of-t.jp > .jp-top { padding: 0 0 12px; }
.of-t.jp .bx-page:not(.bx-page--intake) { max-width: none; padding: 0; gap: 16px; }
.of-t.jp .bx-page--intake { padding: 0; }
.of-t.jp .jp-page { display: flex; flex-direction: column; gap: 16px; }
.of-t.jp .of-head { margin-bottom: 4px; }
.of-t.jp .of-head__actions .ui-btn { font-size: 15px; }
.of-t.jp .of-head__actions .ms { font-size: 18px; }

/* How far: the Progress template's card. */
.of-t.jp .jp-progress, .of-t.jp .bx-progress--home { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.of-t.jp .jp-progress__words, .of-t.jp .bx-progress__words { margin: 0; font-size: 18px; color: var(--of-head-ink); }
.of-t.jp .bx-progress--home .ui-progress { margin: 0; }

/* Map 20: what was sent back, a red-edge card above the groups. */
.jp-back {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border-color: var(--alert-line, #E7B4AE); box-shadow: inset 4px 0 0 var(--alert-fg);
}
.jp-back__ico { font-size: 22px; color: var(--alert-fg); align-self: flex-start; }
.jp-back__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jp-back__title { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.jp-back__note { margin: 0; font-size: 14px; color: var(--of-muted); overflow-wrap: anywhere; }
.jp-back__flag { margin: 2px 0 0; font-size: 14px; color: var(--alert-fg); }
.jp-back__go { flex: none; min-height: 40px; }
.of-t.jp .bx-back-card { box-shadow: inset 4px 0 0 var(--alert-fg); border-radius: 14px; }
@media (max-width: 759.98px) {
  .jp-back { flex-wrap: wrap; align-items: flex-start; }
  .jp-back__text { flex-basis: calc(100% - 40px); }
  .jp-back__go { flex: 1 1 100%; }
}

/* Map 18: a group is one white card; its rows open in place, flush with
   the card, and what is done folds away under "Completed". */
.jp-group { overflow: hidden; gap: 0; }
.jp-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 18px 20px 12px; }
.jp-group__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink-1); }
.jp-group__meta { margin: 0; flex-basis: 100%; font-size: 14px; color: var(--of-muted); }
.jp-group .ui-rows, .jp-group .bx-list {
  border: 0; border-radius: 0; border-top: 1px solid #EEEAE2; background: transparent;
}
.jp-done { border-top: 1px solid #EEEAE2; }
.jp-done__sum {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  font-size: 15px; font-weight: 500; color: var(--of-head-ink); cursor: pointer; list-style: none;
}
.jp-done__sum::-webkit-details-marker { display: none; }
.jp-done__sum:hover { background: var(--of-head-bg); }
.jp-done__sum .ms { font-size: 20px; color: var(--green-deep, #0F6B4F); }
.jp-done__sum .jp-done__chev { margin-left: auto; color: var(--of-head-ink); transition: transform .12s; }
.jp-done[open] .jp-done__chev { transform: rotate(180deg); }
.jp-done[data-all-done] { border-top: 0; }
.jp-skipped { overflow: hidden; }
.jp-skipped .bx-list { border: 0; border-radius: 0; border-top: 1px solid #EEEAE2; }

/* Map 17: the home. "Need help?" beside the groups at 880, under them
   on a narrow screen; three group cards fit the main column. */
.of-t.jp .bx-home { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
.of-t.jp .bx-home__main { gap: 16px; }
.of-t.jp .bx-gcards { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
@media (max-width: 1023.98px) {
  .of-t.jp .bx-home { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759.98px) {
  .of-t.jp .of-head__actions .ui-btn { flex: 1 1 100%; white-space: normal; }
}
/* The page's own gap spaces the cards; the older section and details
   margins and frames are put back. */
.of-t.jp .jp-page > section, .of-t.jp .jp-page > details { margin: 0; }
.of-t.jp .jp-done { margin: 0; border: 0; border-top: 1px solid #EEEAE2; border-radius: 0; background: transparent; }
.of-t.jp .jp-done[data-all-done] { border-top: 0; }

/* Report 236. Completed / remaining / pending review under the bar, the
   annual Core per year, and the third chip word. Wraps at 390px. */
.evce .ce-totals { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 8px; }
.evce .ce-totals > div { display: flex; flex-direction: column; min-width: 88px; }
.evce .ce-totals dt { font-size: 13px; color: var(--of-muted); }
.evce .ce-totals dd { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink-1); }
.evce .ce-standing__cycle { margin-top: 4px; }
.evce .ce-years { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.evce .ce-year { font-size: 13px; padding: 2px 8px; border-radius: 999px; }
.evce .ce-year--met { background: var(--ok-bg); color: var(--ok-fg); }
.evce .ce-year--short { background: var(--warn-bg); color: var(--warn-fg); }
.evce .ce-state--outstanding { background: var(--alert-bg); color: var(--alert-fg); }

/* ── CE renewal journey, report 241 ───────────────────────────────────
   Brianna's dashboard concept. The fill is the firm's own colour
   (`--brand-edge`, set by `domain/brand_colors` — R1's green), and the
   product's green without one. One column under 640 px. */
/* Report 251: every progress fill is --accent; the raw brand fill fails
   3:1 on the track under R1's green. */
.cedash { --cedash-fill: var(--accent);
  --cedash-track: var(--chip-bg, #EFEBE2);
  padding: 24px; margin: 0 0 16px; }
.cedash + .cedash { margin-top: 0; }
.cedash__head { display: flex; flex-wrap: wrap; gap: 12px 20px;
  justify-content: space-between; align-items: flex-start; }
.cedash__h { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--ink-1); }
.cedash__meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 15px; color: var(--ink-3); }
.cedash__variant { font-weight: 600; color: var(--ink-2); }
.cedash__sep { color: var(--line); }
.cedash__days { color: var(--ink-2); font-weight: 600; }
/* Report 251: 90 days or fewer to renewal is amber. */
.cedash__days--soon { color: var(--warn-fg); }
.cedash__days--late { color: var(--alert-fg, #A3261B); }
.cedash__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cedash__badge { display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  border-radius: 12px; background: var(--ok-bg); color: var(--ok-fg); }
.cedash__badge-ico { font-size: 20px; }
.cedash__badge-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink-1); }
.cedash__badge-sub { display: block; font-size: 11px; color: var(--ink-3); }
.cedash__main { display: flex; gap: 24px; align-items: center; margin: 18px 0 16px; }
.cedash__ring { position: relative; flex: 0 0 auto; width: 132px; height: 132px; }
.cedash__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cedash__ring circle { fill: none; stroke-width: 12; }
.cedash__ring-bg { stroke: var(--cedash-track); }
.cedash__ring-fg { stroke: var(--cedash-fill); stroke-linecap: round; }
.cedash__ring-text { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 13px; color: var(--ink-3); }
.cedash__ring-text strong { font-size: 28px; line-height: 1; color: var(--ink-1); }
.cedash__right { flex: 1 1 auto; min-width: 0; }
.cedash__hours { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--ink-1); }
/* The bar is redesign.css `.hours-bar`: approved solid, waiting hatched. */
.cedash__bar { height: 12px; }
.cedash__key { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-3); }
.cedash__key-i { display: inline-flex; align-items: center; gap: 6px; }
.cedash__sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--chip-bg); }
.cedash__sw--approved { background: var(--accent); }
.cedash__sw--waiting { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, color-mix(in srgb, var(--accent) 25%, #fff) 2px 4px); }
.cedash__pending { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.cedash__next { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); }
.cedash__next-ico { font-size: 22px; color: var(--cedash-fill); }
.cedash__next-text { flex: 1 1 220px; min-width: 0; }
.cedash__next-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-1); }
.cedash__next-detail { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.cedash__next-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cedash__tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cedash__tile { position: relative; display: grid; grid-template-columns: auto 1fr auto;
  gap: 4px 10px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-bg); }
.cedash__tile-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; background: var(--surface-2, #F4F1EA); color: var(--ink-2); }
.cedash__tile--done .cedash__tile-ico { background: var(--ok-bg); color: var(--ok-fg); }
.cedash__tile-name { display: block; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.cedash__tile-detail { display: block; font-size: 13px; color: var(--ink-3); }
.cedash__tile-check { color: var(--cedash-fill); font-size: 22px; }
.cedash__tile-bar { grid-column: 1 / -1; height: 6px; margin-top: 6px; border-radius: 999px;
  background: var(--cedash-track); overflow: hidden; }
.cedash__tile-bar > span { display: block; height: 100%; background: var(--cedash-fill); }
.cedash__source { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-3); }
.cedash-more { margin: 0 0 16px; }
.cedash-more__sum { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); padding: 6px 0; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.cedash-more__sum::-webkit-details-marker { display: none; }
.cedash-more__sum::after { content: 'arrow_forward'; font-family: 'Material Symbols Outlined'; font-size: 18px; font-weight: 400; }
.cedash-more[open] > .cedash-more__sum::after { content: 'expand_less'; }
.cedash-more[open] > .cedash-more__sum { margin-bottom: 10px; }
.cedash-staffhead { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; }
/* Report 242: Add a course, upload first. The drop zone, the stored file,
   the live check, and the note it asks for. */
.evce .ce-drop { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 32px 16px; border: 2px dashed var(--line-2); border-radius: var(--radius-md);
  background: var(--info-bg); }
.evce .ce-drop--small { padding: 14px 12px; margin: 0 0 14px; flex-direction: row; flex-wrap: wrap;
  justify-content: center; text-align: left; }
.evce .ce-drop.is-over, .ce-dragging .evce .ce-drop { border-color: var(--accent); }
.evce .ce-drop.is-busy { opacity: .75; }
.evce .ce-drop__ico { font-size: 36px; color: var(--accent); }
.evce .ce-drop--small .ce-drop__ico { font-size: 22px; }
.evce .ce-drop__title { margin: 0; font-size: 16px; font-weight: 600; }
.evce .ce-drop--small .ce-drop__title { font-size: 14px; }
.evce .ce-drop__sub { margin: 0; font-size: 13px; color: var(--of-muted); }
.evce .ce-drop--small .ce-drop__sub { display: none; }
.evce .ce-drop__busy { margin: 4px 0 0; font-size: 14px; font-weight: 600; flex-basis: 100%; }
.evce .ce-drop__choose, .evce .ce-drop__manual { background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.evce .ce-drop__manual { margin-top: 10px; font-size: 13px; }
.evce .ce-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; }
.evce .ce-file__link { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  color: inherit; font-size: 14px; overflow-wrap: anywhere; }
.evce .ce-file__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); }
.evce .ce-file__ico { font-size: 28px; color: var(--of-muted); }
.evce .ce-file .ce-drop__choose { font-size: 13px; }
.evce .ce-read-note { margin: 0 0 12px; }
.evce .ce-check { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45; }
.evce .ce-check--ok { background: var(--ok-bg); color: var(--ok-fg); }
.evce .ce-check--off { background: var(--warn-bg); color: var(--warn-fg); }
.evce .ce-check__head { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-weight: 600; }
.evce .ce-check__head .ms { font-size: 20px; }
.evce .ce-check ul { margin: 6px 0 0; padding-left: 32px; }
.evce .is-mismatch > input, .evce .is-mismatch > select { border-color: var(--warn-fg); }
.evce .ce-mismatch { font-size: 13px; font-weight: 400; color: var(--warn-fg); }
.evce .ce-note.is-asked textarea { border-color: var(--warn-fg); box-shadow: 0 0 0 2px var(--warn-bg); }
.evce .ce-note__ask { font-size: 13px; font-weight: 600; color: var(--warn-fg); }
.evce .prof-grid > .ce-edit__wide { grid-column: 1 / -1; }
.evce .ce-drop[hidden], .evce .ce-file[hidden], .evce .ce-check[hidden],
.evce [data-ce-fields][hidden] { display: none; }
.ce-at-step [type="submit"] { display: none; }
@media (max-width: 640px) {
  .cedash { padding: 16px; }
  .cedash__h { font-size: 20px; }
  .cedash__sep { display: none; }
  .cedash__meta { gap: 2px 12px; }
  /* The ring sits beside the total (report 251). */
  .cedash__main { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; }
  .cedash__ring { width: 88px; height: 88px; grid-row: 1 / span 2; }
  .cedash__ring-text strong { font-size: 20px; }
  .cedash__ring-text span { display: none; }
  .cedash__right { display: contents; }
  .cedash__right > :not(.cedash__headline):not(.cedash__hours) { grid-column: 1 / -1; }
  .cedash__headline { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .cedash__hours { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .cedash__tiles { grid-template-columns: 1fr 1fr; }
  .cedash__tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cedash__tile { padding: 10px; }
  .cedash__next-acts { width: 100%; }
  .cedash__next-acts .ui-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 360px) { .cedash__tiles { grid-template-columns: 1fr; } }

/* Report 251. The course table in the 22 Oct redesign's table pattern:
   headers 13/500 sentence case on white with the arrow next to the word,
   rows of one height, the details in a tinted panel under the row, and
   the banner as an info note. The phone's two-line rows are report 250's. */
.evce .ce-stub { background: var(--rd-info-bg); color: var(--rd-info-fg); border: 0; border-radius: var(--radius-m); }
.evce .ce-stub .ms { color: var(--rd-info-fg); }
.evce .ce-table thead th { background: #fff; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.evce .ce-th__sort { font-weight: 500; }
.evce .ce-th__sort.is-on { font-weight: 600; }
.evce .ce-th__sort.is-on .ce-th__arrow { color: var(--ink-1); }
.evce .ce-table td { height: 56px; padding: 8px 14px; font-size: 15px; }
.evce .ce-td--name { font-weight: 500; }
.evce .ce-row:hover { background: var(--row-tint); }
.evce .ce-row--sent-back, .evce .ce-detail.ce-row--sent-back { background: #FFFBF9; }
.evce .ce-detail > td { height: auto; }
.evce .ce-course__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius-m); background: var(--row-tint); border: 1px solid var(--line-2); }
.evce .ce-course__body > p { margin: 0; }
.evce .ce-course__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px !important; }
.evce .ce-course__links .ce-hist-link { margin: 0; font-size: 14px; }
.evce .ce-total th, .evce .ce-total td { background: var(--row-tint); }
.evce .ce-nar { font-size: 13px; color: var(--ink-3); }
@media (max-width: 720px) {
  .evce .ce-table td { height: auto; }
  .evce .ce-row > .ce-td--status { min-width: 0; overflow: hidden; }
  .evce .ce-course__body { padding: 12px; }
  .evce .of-toolbar .of-select { flex: 1 1 calc(50% - 4px); }
}
@media (max-width: 720px) {
  /* Line 1 the course and its toggle; line 2 date · hours · status, which
     wraps rather than cutting the pill off (pills never truncate). */
  .evce .ce-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .evce .ce-row > td { padding: 0; height: auto; }
  .evce .ce-row > .ce-td--name { flex: 1 1 calc(100% - 52px); order: 0; }
  .evce .ce-row > .ce-td--toggle { flex: none; order: 1; }
  .evce .ce-row > .ce-td--date { order: 2; }
  .evce .ce-row > .ce-td--hours { order: 3; }
  .evce .ce-row > .ce-td--status { order: 4; overflow: visible; }
  .evce .ce-detail > td { padding: 0 14px 14px; }
}

/* Report 251. Sortable header links (`_table_sort.html`), on every staff
   table: 13/500 sentence case, the arrow next to the word. */
.ts-link { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ts-link:hover, .ts-link.is-on { color: var(--ink-1); }
.ts-link.is-on { font-weight: 600; }
.ts-link__arrow { font-size: 16px; opacity: .45; }
.ts-link.is-on .ts-link__arrow { opacity: 1; }
th.ui-table__right .ts-link { justify-content: flex-end; }

/* CE compliance: chips in place of the four tally cards; the table in the
   course-table pattern; two-line rows on a phone. */
.cc .cc-chips { margin: 0 0 12px; }
.cc .ce-console-search { margin: 0 0 12px; }
.cc .cc-table thead th { background: #fff; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cc .cc-table td { padding: 10px 14px; vertical-align: middle; }
.cc .cc-table td[data-label="Hours"] { text-align: right; }
.cc .cc-license { white-space: nowrap; }
@media (max-width: 720px) {
  .cc .cc-table thead { display: none; }
  .cc .cc-table, .cc .cc-table tbody { display: block; }
  .cc .cc-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .cc .cc-table td { display: block; padding: 0; border: 0; font-size: 13px; color: var(--ink-3); }
  .cc .cc-table td::before { content: none !important; display: none !important; }
  .cc .cc-table td[data-label="—"] { flex: 1 1 100%; font-size: 15px; color: var(--ink-1); }
  .cc .cc-table td[data-label="—"] .ui-table__sub { display: none; }
  .cc .cc-table td[data-label="License"] .ce-applies { display: none; }
  .cc .cc-table td[data-label="Hours"] { text-align: left; }
  .cc .cc-table td[data-label="Standing"] { flex: 1 1 100%; }
}
.cc .ce-console-search > label.ui-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) { .cc .cc-table tbody td { width: auto; } .cc .cc-table tbody td[data-label="—"], .cc .cc-table tbody td[data-label="Standing"] { width: 100%; } }

/* Report 255. THE COURSE TABLE HAD NO ROOM (R1, 23 Oct: "squished"). In
   the 880 column the one-line columns and the ~200px "Approved from
   NetSuite" pill took ~710px, so Course got ~170px and titles ran to four
   or five lines (rows up to 133px). Now:
   - the page runs 1120 wide; the hours card and everything above it stay
     in their 880 column, and "Your courses", its toolbar and the table use
     the full width (wider than the card on purpose);
   - a title wraps to two lines at most (the full name is its tooltip);
   - number, date, hours, category and status never wrap; hours stay right;
   - on a phone, line 2 (date · hours · status) is 13px with a 10px gap so
     the pill fits beside them instead of falling to a third line. */
@media (min-width: 760px) {
  .shell-col > .ui-page.t-progress.evce { --pg-c: 1120px; }
  .t-progress.evce > :not(.ce-courses__head):not(.of-toolbar):not(.ce-table-wrap):not(.ce-courses):not(.ce-nar) {
    max-width: 880px; margin-inline: auto; }
}
.evce .ce-course__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; overflow-wrap: break-word; line-height: 1.35; }
.evce .ce-td--number, .evce .ce-td--date, .evce .ce-td--hours,
.evce .ce-td--category, .evce .ce-td--status { white-space: nowrap; width: 1%; }
@media (max-width: 720px) {
  .evce .ce-td--number, .evce .ce-td--date, .evce .ce-td--hours,
  .evce .ce-td--category, .evce .ce-td--status { width: auto; }
  .evce .ce-row { column-gap: 10px; }
  .evce .ce-row > .ce-td--date, .evce .ce-row > .ce-td--hours { font-size: 13px; }
}