/* ============================================================ Deal Detail (case detail) page. Structure in @layer layout, paint in @layer design. Content-named classes only — no legacy/appearance names, no hardcoded color. Reuses .app-screen and .btn/.btn--outline/.btn--primary from elements.css. DESK page: prosecutors / coaches / case managers read this under the default light .app-screen palette; the participant variant rebinds only --t-* tokens via the citizen theme, so the same markup reskins. This stylesheet only references --t-* semantic tokens, which app/theme.css rebinds per theme, so the page reskins without any role-specific color rules here. The assign-coach / add-note / transition dialogs carry the .app-screen .deal-detail root classes so the same --t-* tokens resolve when they are appended to . See docs/FRONTEND-ARCHITECTURE.md. ============================================================ */ @layer layout { .deal-detail-page > section { padding: var(--mea-space-4); border-radius: var(--mea-radius-xl); & > header { padding-block-end: var(--mea-space-4); border-block-end-width: var(--mea-line-hairline); } } .deal-detail-page section#actions { padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); border-width: 1px; display: flex; gap: var(--mea-space-2); } .deal-detail-page { & #eligibility-status { & .status-badge { padding: var(--mea-space-1) var(--mea-space-3); } } & .eligibility-rule { padding-block: var(--mea-space-3); } & li.eligibility-rule { list-style-position: inside; &::marker { font-weight: var(--mea-w-bold); } &[data-passed="true"]::marker { content: "✓ "; } &[data-passed="false"]::marker { content: "✗ "; } } } .deal-detail-page section#eligibility { & > header { display: flex; align-items: center; justify-content: space-between; } } /* Page rhythm: the detail stacks back-link, summary, facts, then the main/aside two-up grid. */ .deal-detail { display: grid; gap: var(--mea-space-5); align-content: start; } .deal-detail__back { display: inline-block; justify-self: start; cursor: pointer; text-decoration: none; } /* Case-summary header: avatar beside heading, actions trailing. */ .deal-summary { display: grid; grid-template-columns: auto 1fr auto; gap: var(--mea-space-4); align-items: center; padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); } .deal-summary__avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; flex-shrink: 0; border-radius: var(--mea-radius-circle); } .deal-summary__heading { display: grid; gap: var(--mea-space-2); min-inline-size: 0; } .deal-summary__name, .deal-summary__meta, .deal-summary__status { margin: 0; } .deal-summary__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); justify-content: flex-end; } /* Participant variant: hero photo spans the top, heading + supervisor stack. */ .deal-summary--participant { grid-template-columns: 1fr; padding: 0; overflow: hidden; } .deal-summary--participant .deal-summary__heading { padding: var(--mea-space-5); } .deal-hero-photo { block-size: 8rem; background-size: cover; background-position: center; display: flex; align-items: flex-end; } .deal-hero-photo__overlay { display: grid; gap: var(--mea-space-1); padding: var(--mea-space-5); } .deal-hero-photo__eyebrow, .deal-hero-photo__program { margin: 0; } .deal-supervisor { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mea-space-3); margin: var(--mea-space-5); padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); } .deal-supervisor__avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; flex-shrink: 0; border-radius: var(--mea-radius-circle); } .deal-supervisor__detail { display: grid; gap: var(--mea-space-1); min-inline-size: 0; } .deal-supervisor__name, .deal-supervisor__role { margin: 0; } .deal-supervisor__action { flex-shrink: 0; text-decoration: none; white-space: nowrap; } @container (max-width: 32rem) { .deal-summary { grid-template-columns: auto 1fr; } .deal-summary__actions { grid-column: 1 / -1; justify-content: flex-start; } } /* Case facts: a label/value definition grid. */ .deal-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mea-space-4); margin: 0; } .deal-fact { display: grid; gap: var(--mea-space-1); min-inline-size: 0; padding: var(--mea-space-4); border-radius: var(--mea-radius-md); } .deal-fact__label, .deal-fact__value { margin: 0; } .deal-charge { display: inline-block; padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-pill); } @container (max-width: 40rem) { .deal-facts { grid-template-columns: repeat(2, 1fr); } } @container (max-width: 26rem) { .deal-facts { grid-template-columns: 1fr; } } /* Two-up body: main column + sidebar. */ .deal-detail__layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--mea-space-5); align-items: start; } .deal-detail__main, .deal-detail__aside { display: grid; gap: var(--mea-space-5); align-content: start; min-inline-size: 0; } @container (max-width: 48rem) { .deal-detail__layout { grid-template-columns: 1fr; } } /* A card: header (title + optional action/meta) then body. */ .deal-card { display: grid; gap: 0; border-radius: var(--mea-radius-xl); overflow: hidden; align-content: start; } .deal-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); padding: var(--mea-space-4) var(--mea-space-5); } .deal-card__title { margin: 0; min-inline-size: 0; } .deal-card__meta { margin-inline-start: auto; } .deal-card__action { margin-inline-start: auto; } .deal-card__body { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-5); min-inline-size: 0; } .deal-empty { margin: 0; } /* Secondary-source load error fallback (D7). */ .deal-secondary-load-error { display: grid; gap: var(--mea-space-2); justify-items: start; padding: var(--mea-space-4); border-radius: var(--mea-radius-md); } .deal-secondary-load-error__title, .deal-secondary-load-error__body { margin: 0; } /* Missions list. */ .mission-list { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none; } .mission { display: grid; grid-template-columns: auto 1fr auto; gap: var(--mea-space-3); align-items: center; min-inline-size: 0; } .mission__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; flex-shrink: 0; border-radius: var(--mea-radius-circle); } .mission__detail { display: grid; gap: var(--mea-space-1); min-inline-size: 0; } .mission__name, .mission__sub { margin: 0; } .mission__status { flex-shrink: 0; } /* Timeline: a dot beside text + timestamp. */ .deal-timeline { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none; } .deal-timeline__event { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3); align-items: start; } .deal-timeline__dot { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; flex-shrink: 0; border-radius: var(--mea-radius-circle); } .deal-timeline__detail { display: grid; gap: var(--mea-space-1); min-inline-size: 0; } .deal-timeline__text, .deal-timeline__time { margin: 0; } /* Compliance notes. */ .deal-note-list { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none; } .deal-note { display: grid; gap: var(--mea-space-1); } .deal-note__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--mea-space-2); } .deal-note__author, .deal-note__time, .deal-note__body { margin: 0; } /* Sidebar rules & conditions. */ .deal-card__body>.deal-rules__group+.deal-rules__group { margin-block-start: var(--mea-space-4); } .deal-rules__group { display: grid; gap: var(--mea-space-3); } .deal-rules__heading { margin: 0; } .deal-rules__list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; } .deal-rules__item { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3); align-items: start; } .deal-rules__icon { flex-shrink: 0; } .deal-rules__text { min-inline-size: 0; } .deal-elig-link-row { margin: var(--mea-space-3) 0 0; } .deal-elig-link { text-decoration: none; } /* Sidebar action stack. */ .deal-actions { gap: var(--mea-space-3); } .deal-actions__divider { inline-size: 100%; block-size: 1px; border: 0; margin: var(--mea-space-1) 0; } .deal-decision-step { display: grid; gap: var(--mea-space-3); min-inline-size: 0; margin: 0; padding: var(--mea-space-3) 0 0; border: 0; border-top: 1px solid; } .deal-decision-step__title { margin: 0; padding: 0; } .deal-decision-summary { display: grid; gap: var(--mea-space-2); margin: 0; } .deal-decision-summary > div { display: grid; grid-template-columns: minmax(8rem, 1fr) 1.2fr; gap: var(--mea-space-2); min-inline-size: 0; } .deal-decision-summary dt, .deal-decision-summary dd { margin: 0; min-inline-size: 0; } @container (max-width: 32rem) { .deal-decision-summary > div { grid-template-columns: 1fr; } } /* Gang-unit alert. */ .gang-unit-alert { display: grid; gap: 0; border-radius: var(--mea-radius-xl); overflow: hidden; } .gang-unit-alert__banner { display: flex; align-items: center; gap: var(--mea-space-2); margin: 0; padding: var(--mea-space-3) var(--mea-space-4); } .gang-unit-alert__body { display: grid; gap: var(--mea-space-2); padding: var(--mea-space-4); } .gang-unit-alert__row { display: flex; align-items: center; justify-content: space-between; gap: var(--mea-space-3); margin: 0; } .gang-threat-badge { display: inline-block; padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-pill); white-space: nowrap; } .gang-unit-alert__note { margin: 0; } /* Assign-coach / add-note / transition dialogs. */ .deal-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--mea-space-4); z-index: 1000; } .deal-modal { display: grid; gap: 0; inline-size: 100%; max-inline-size: 30rem; max-block-size: 90vh; overflow-y: auto; border-radius: var(--mea-radius-xl); } .deal-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--mea-space-3); padding: var(--mea-space-5); } .deal-modal__title { margin: 0; min-inline-size: 0; } .deal-modal__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; background: transparent; border-radius: var(--mea-radius-md); cursor: pointer; } .deal-modal__body { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-5); } .deal-modal__desc { margin: 0; } .deal-modal__error { margin: 0; padding: var(--mea-space-3); border-radius: var(--mea-radius-md); } .deal-modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mea-space-3); } .deal-field { display: grid; gap: var(--mea-space-2); } .deal-field__label { margin: 0; } .deal-field__control { inline-size: 100%; min-height: var(--t-target-min, 44px); padding: var(--mea-space-2) var(--mea-space-3); border-radius: var(--mea-radius-md); font: inherit; } textarea.deal-field__control { min-height: auto; resize: vertical; } @container (max-width: 30rem) { .deal-modal__footer { flex-direction: column-reverse; align-items: stretch; } } dialog:target { display: block; z-index: 1; position: fixed; margin: auto; inline-size: auto; max-inline-size: var(--mea-readable-w); &~.dialog-backdrop { display: block; } } .dialog-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .deal-detail-page #approval-dialog { & select[name="program"]:not(:has(option[value="mea"]:checked))~#mea-tasks-panel { display: none; } & input[name="mea.restorative-justice-enabled"]:not(:checked)~input[name="mea.restorative-justice-description"] { display: none; } & .restorative-justice { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--mea-space-2); & input[type="text"] { inline-size: 100%; } } } .deal-detail-page dialog { top: 5vh; max-height: 90vh; overflow: hidden; padding: 0; & section { max-height: 90vh; display: flex; flex-direction: column; padding: var(--mea-space-5); overflow: hidden; & header { flex: 0 0 0; } & form { flex: 1 1 min-content; display: flex; flex-direction: column; overflow: hidden; & main { display: flex; flex-direction: column; overflow-y: auto; padding-block: var(--mea-space-5); } & .dialog-footer { flex: 0 0 0; } } } } } @layer design { .deal-detail-page { & > section { background-color: var(--t-card-bg); color: var(--t-text); & > header { border-block-end-color: var(--t-card-border); border-block-end-style: solid; } } & > section#actions { border-color: var(--t-card-border); border-style: solid; box-shadow: var(--mea-shadow-card); & .approve-btn { background-color: var(--t-success); color: var(--t-accent-text); } & .deny-btn { background-color: var(--t-error); color: var(--t-accent-text); } & .defer-btn { color: var(--t-text); } } } .deal-detail-page { & #eligibility-status { & .status-badge.status-badge--eligible { background-color: var(--t-success-bg); color: var(--t-success); border: var(--t-success) 1px solid; } } & li.eligibility-rule { &[data-passed="true"]::marker { color: var(--t-success); } &[data-passed="false"]::marker { color: var(--t-error); } } } .deal-fact { background-color: var(--t-card-bg); box-shadow: var(--mea-shadow-card); } .deal-detail__back { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-link); } .deal-detail__back:hover { color: var(--t-link-hover); } /* Case-summary header. */ .deal-summary { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm); } .deal-summary__avatar { background: var(--t-bg-active); color: var(--t-text); font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold); } .deal-summary__name { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl); font-weight: var(--mea-w-bold); color: var(--t-text); } .deal-summary__meta { font-size: var(--mea-text-sm); color: var(--t-text-muted); } .deal-summary__meta span { color: var(--t-text-secondary); font-weight: var(--mea-w-semibold); } /* Participant variant. */ .deal-hero-photo { background-color: var(--t-bg-active); } .deal-hero-photo--gradient { background-image: linear-gradient(135deg, var(--t-accent), var(--t-accent-hover)); } .deal-hero-photo__eyebrow { font-size: var(--mea-text-sm); color: var(--t-accent-text); opacity: .85; } .deal-hero-photo__program { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold); color: var(--t-accent-text); } .deal-supervisor { background: var(--t-bg-recessed); border: 1px solid var(--t-border); } .deal-supervisor__avatar { background: var(--t-accent); color: var(--t-accent-text); font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); } .deal-supervisor__name { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); } .deal-supervisor__role { font-size: var(--mea-text-xs); color: var(--t-text-muted); } .deal-fact__label { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); color: var(--t-text-muted); text-transform: uppercase; letter-spacing: var(--mea-ls-wide); } .deal-fact__value { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); } /* Charge tag — category modifiers recolour the tag only. */ .deal-charge { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); background: var(--t-bg-recessed); color: var(--t-text-secondary); } .deal-charge--drug { background: var(--t-accent); color: var(--t-accent-text); } .deal-charge--theft { background: var(--t-warning-bg); color: var(--t-warning-text); } .deal-charge--property { background: var(--t-bg-active); color: var(--t-text); } .deal-charge--conduct { background: var(--t-success-bg); color: var(--t-success-text); } .deal-charge--dui { background: var(--t-error-bg); color: var(--t-error-text); } .deal-charge--trespass { background: var(--t-bg-active); color: var(--t-text); } .deal-charge--assault { background: var(--t-error-bg); color: var(--t-error-text); } /* Cards. */ .deal-card { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm); } .deal-card__header { border-block-end: 1px solid var(--t-border); } .deal-card__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold); color: var(--t-text); } .deal-card__meta { font-size: var(--mea-text-sm); color: var(--t-text-muted); } .deal-empty { font-size: var(--mea-text-md); color: var(--t-text-muted); } /* Secondary-source load error fallback. */ .deal-secondary-load-error { background: var(--t-error-bg, var(--t-bg-recessed)); } .deal-secondary-load-error__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); color: var(--t-error-text); } .deal-secondary-load-error__body { font-size: var(--mea-text-sm); color: var(--t-text-secondary); } /* Missions — state modifiers recolour the icon only. */ .mission__icon { background: var(--t-bg-recessed); color: var(--t-text-muted); font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); } .mission--completed .mission__icon { background: var(--t-success); color: var(--t-accent-text); } .mission--active .mission__icon { background: var(--t-accent); color: var(--t-accent-text); } .mission--pending .mission__icon { background: var(--t-bg-active); color: var(--t-text-muted); } .mission__name { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); } .mission__sub { font-size: var(--mea-text-sm); color: var(--t-text-muted); } /* Timeline — colour modifiers recolour the dot only. */ .deal-timeline__dot { background: var(--t-bg-active); color: var(--t-text); font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); } .deal-timeline__dot--blue { background: var(--t-accent); color: var(--t-accent-text); } .deal-timeline__dot--green { background: var(--t-success); color: var(--t-accent-text); } .deal-timeline__dot--amber { background: var(--t-warning); color: var(--t-accent-text); } .deal-timeline__dot--red { background: var(--t-error); color: var(--t-accent-text); } .deal-timeline__text { font-size: var(--mea-text-md); color: var(--t-text); } .deal-timeline__time { font-size: var(--mea-text-xs); color: var(--t-text-muted); } /* Compliance notes. */ .deal-note { padding-block-end: var(--mea-space-3); border-block-end: 1px solid var(--t-border); } .deal-note-list .deal-note:last-child { padding-block-end: 0; border-block-end: 0; } .deal-note__author { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); } .deal-note__time { font-size: var(--mea-text-sm); color: var(--t-text-muted); } .deal-note__body { font-size: var(--mea-text-md); color: var(--t-text-secondary); line-height: var(--mea-lh-normal); } /* Sidebar rules & conditions. */ .deal-rules__heading { font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold); color: var(--t-text-muted); text-transform: uppercase; letter-spacing: var(--mea-ls-wide); } .deal-rules__icon { font-weight: var(--mea-w-bold); } .deal-rules__item--eligibility .deal-rules__icon { color: var(--t-success-text); } .deal-rules__item--condition .deal-rules__icon { color: var(--t-warning-text); } .deal-rules__item--requirement .deal-rules__icon { color: var(--t-accent); } .deal-rules__text { font-size: var(--mea-text-md); color: var(--t-text-secondary); } .deal-elig-link { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-link); } .deal-elig-link:hover { color: var(--t-link-hover); } /* Sidebar action stack — outcome modifiers recolour the resolution buttons. */ .deal-actions__divider { background: var(--t-border); } .deal-decision-step { border-top-color: var(--t-border); } .deal-decision-step__title { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); color: var(--t-text); } .deal-decision-summary dt { font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold); color: var(--t-text-muted); text-transform: uppercase; letter-spacing: var(--mea-ls-wide); } .deal-decision-summary dd { font-size: var(--mea-text-sm); color: var(--t-text); } .deal-action--complete { background: var(--t-success); color: var(--t-accent-text); } .deal-action--fail { background: var(--t-error); color: var(--t-accent-text); } .deal-action--revoke { color: var(--t-error-text); border-color: var(--t-error); } /* Gang-unit alert. */ .gang-unit-alert { background: var(--t-card-bg); border: 1px solid var(--t-error); box-shadow: var(--mea-shadow-sm); } .gang-unit-alert__banner { background: var(--t-error-bg, var(--t-bg-recessed)); } .gang-unit-alert__icon { color: var(--t-error-text); font-size: var(--mea-text-md); } .gang-unit-alert__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); color: var(--t-error-text); text-transform: uppercase; letter-spacing: var(--mea-ls-wide); } .gang-unit-alert__row span:first-child { font-size: var(--mea-text-sm); color: var(--t-text-secondary); } .gang-threat-badge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold); background: var(--t-bg-recessed); color: var(--t-text-secondary); } .gang-threat-badge--high { background: var(--t-error-bg); color: var(--t-error-text); } .gang-threat-badge--medium { background: var(--t-warning-bg); color: var(--t-warning-text); } .gang-threat-badge--low { background: var(--t-success-bg); color: var(--t-success-text); } .gang-unit-alert__note { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-error-text); } /* Dialogs. */ .deal-modal-overlay { background: var(--t-overlay, var(--t-bg-active)); } .deal-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-lg); } .deal-modal__header { border-block-end: 1px solid var(--t-border); } .deal-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold); color: var(--t-text); } .deal-modal__close { color: var(--t-text-muted); font-size: var(--mea-text-xl); transition: background var(--mea-dur-fast), color var(--mea-dur-fast); } .deal-modal__close:hover { background: var(--t-bg-recessed); color: var(--t-text); } .deal-modal__desc { font-size: var(--mea-text-md); color: var(--t-text-secondary); line-height: var(--mea-lh-normal); } .deal-modal__error { background: var(--t-error-bg, var(--t-bg-recessed)); color: var(--t-error-text); font-size: var(--mea-text-sm); } .deal-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); } .deal-field__control { background: var(--t-bg-elevated); color: var(--t-text); border: 1px solid var(--t-border); font-size: var(--mea-text-md); } .deal-field__control:focus { outline: none; border-color: var(--t-border-focus); } .deal-field__control::placeholder { color: var(--t-text-muted); } }