/* Chrome for the hosted public pages. Deliberately plain: these render inside, or alongside,
   an institution's own site, so the styling stays neutral and lets DevExtreme's Fluent theme
   carry the grids. */

:root {
    --ce-text: #1c1c1c;
    --ce-muted: #5c5c5c;
    --ce-border: #e0e0e0;
    --ce-surface: #ffffff;
    --ce-accent: #0f4c81;
    --ce-page-bg: #f6f7f9;
}

* { box-sizing: border-box; }

/* Text for assistive technology only: required-field hints, the form's live region. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ce-text);
    background: var(--ce-page-bg);
    line-height: 1.5;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Shown while a hidden page is rendered with the preview flag - unmistakably not published. */
.preview-banner {
    background: #fff4ce;
    border-bottom: 1px solid #f0d37c;
    color: #6d5200;
    padding: 10px 24px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.institution-logo { max-height: 64px; width: auto; }

/* The no-logo fallback: the institution's name standing in for the image, in the same slot and
   at the same alignment (PBI 2420). Sized to read as branding rather than as body copy. */
.institution-name { font-size: 1.4rem; font-weight: 600; line-height: 1.3; }

main.container { padding-top: 24px; padding-bottom: 48px; }

.card {
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------- page card (customization) */

/* Everything a page shows renders inside one surface card, so the configured page-backdrop
   color (--ce-page-bg) frames the content and never sits under text. */

.page-card {
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-radius: 8px;
    padding: 24px;
}

/* The card's own lead-in, in render order: Institution Logo, title, subtitle, Page Description.
   One margin rule here keeps the gap to the content the same whether or not the institution
   wrote a description. */

.page-lead { margin-bottom: 20px; }

.page-logo { display: flex; margin-bottom: 16px; }

.page-logo--left { justify-content: flex-start; }

.page-logo--center { justify-content: center; }

.page-logo--right { justify-content: flex-end; }

/* Nothing below it to separate from - the lead's own margin carries the gap. */
.page-logo:last-child { margin-bottom: 0; }

.page-subtitle { margin: 0; color: var(--ce-muted); font-size: 0.95rem; }

.page-description {
    margin-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ce-border);
}

/* With no logo or subtitle above it the description opens the card, so it takes no top gap. */
.page-description:first-child { margin-top: 0; }

.page-description > :first-child { margin-top: 0; }

.page-description > :last-child { margin-bottom: 0; }

/* The dateline - days since a page's content last changed - on the Hazing TR pages and both logs
   alike (PBI 2420), so it lives with the shared card chrome rather than with either page's own
   styles. Its alignment is the page's Date Alignment setting (PBI 2451), with the same three
   modifiers the logo slot uses; Left is the default, where it reads as a dateline over the
   content it stamps. */
.report-meta { color: var(--ce-muted); font-size: 0.9rem; margin: 0 0 24px; }

.report-meta--left { text-align: left; }

.report-meta--center { text-align: center; }

.report-meta--right { text-align: right; }

/* Attribution as the card's last row, so it stays legible over any configured backdrop. */

.powered-by {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ce-border);
    text-align: center;
    font-size: 0.85rem;
    color: var(--ce-muted);
}

.powered-by a { color: inherit; }

.not-available h2 { margin: 0 0 12px; font-size: 1.15rem; }

.not-available p { margin: 0; color: var(--ce-muted); }

/* ---------------------------------------------------------------- buttons */

/* Three tiers (PBI 2451), each sized to its words: primary is the one filled button on a page
   (Submit Report); secondary is outlined in the accent, for adding things (Add Person, Add
   Identification); quiet is outlined in a neutral dark, for removing them. Every tier's border
   and text clear 3:1 against the card (1.4.11), and every one has a visible focus ring (2.4.7). */

button.primary,
a.primary {
    padding: 8px 18px;
    border: 1px solid var(--ce-accent);
    border-radius: 6px;
    background: var(--ce-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

button.primary:hover,
a.primary:hover {
    background: #0b3a63;
    border-color: #0b3a63;
}

button.secondary,
a.secondary {
    padding: 8px 16px;
    border: 1px solid var(--ce-accent);
    border-radius: 6px;
    background: var(--ce-surface);
    color: var(--ce-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

button.secondary:hover,
a.secondary:hover {
    background: #e8eff6;
}

button.quiet {
    padding: 6px 12px;
    border: 1px solid #6b6b6b;
    border-radius: 6px;
    background: transparent;
    color: var(--ce-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

button.quiet:hover {
    background: #ececee;
    border-color: var(--ce-text);
}

button.primary:focus-visible,
button.secondary:focus-visible,
button.quiet:focus-visible,
a.primary:focus-visible,
a.secondary:focus-visible {
    outline: 2px solid var(--ce-accent);
    outline-offset: 2px;
}

/* Disabled keeps the text readable (the muted grey clears 4.5:1 on the fill) rather than
   fading the whole control - the fill change is the disabled signal. */
button.primary:disabled,
button.secondary:disabled,
button.quiet:disabled {
    background: #e6e9ee;
    border-color: #e6e9ee;
    color: var(--ce-muted);
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- transparency report */

.period { margin-bottom: 36px; }

.period > h2 {
    font-size: 1.15rem;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ce-accent);
}

.period-empty { color: var(--ce-muted); font-style: italic; margin: 0; }

/* Each case is a native <details> disclosure (Bug 2436), so the row chrome and the marker are
   ours rather than a widget's. The metrics below are the dxAccordion's own, measured off dev
   before it was removed, so the page looks unchanged: 44px rows, no separators, a 6px/12px title
   and a title caption 40px in - where the widget's 20px icon plus its 8px margin put it.
   Hiding the default marker takes both rules: a flex summary is no longer display:list-item in
   Firefox and Chromium, and Safari needs the ::-webkit- pseudo. */
.hazing-case > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 12px;
    cursor: pointer;
    list-style: none;
}

.hazing-case > summary::-webkit-details-marker { display: none; }

/* Chevron down when collapsed, up when open - the direction the widget pointed. The margins put
   its centre where the icon glyph's was and carry the caption out to 40px. The box is 9px wide,
   not 7: the global border-box reset uses `*`, which does not match pseudo-elements, so the 2px
   border-right sits outside the width (6 + 9 + 13 = 28). */
.hazing-case > summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: -3px 13px 0 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 120ms ease;
}

.hazing-case[open] > summary::before {
    margin-top: 3px;
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .hazing-case > summary::before { transition: none; }
}

/* The widget washed the title bar with one pale accent tint for hover, focus and press alike
   (dx-state-hover / -focused / -active, #e5edff in Fluent SaaS Light). Kept verbatim so the row
   still answers the pointer the way it always has. */
.hazing-case > summary:hover,
.hazing-case > summary:active,
.hazing-case > summary:focus-visible {
    background-color: #e5edff;
}

/* The widget marked focus with that tint and nothing else - a ~1.1:1 wash on white, which is not
   a focus indicator the ADA rubric would accept (ADR 0016). A bare summary draws no ring of its
   own in some browsers either, so this adds one on top of the tint rather than matching. */
.hazing-case > summary:focus-visible {
    outline: 2px solid var(--ce-accent);
    outline-offset: -2px;
}

.hazing-case-title { margin: 0; font-size: 1rem; }

/* 12px on every side is what the widget's item body used. */
.hazing-case dl {
    display: grid;
    grid-template-columns: minmax(200px, max-content) 1fr;
    gap: 6px 20px;
    margin: 0;
    padding: 12px;
}

.hazing-case dt { font-weight: 600; color: var(--ce-muted); }

.hazing-case dd { margin: 0; white-space: pre-wrap; }

/* ---------------------------------------------------------------- incident report form */

.form-section { margin-bottom: 8px; }

.form-section > h2 {
    font-size: 1.05rem;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ce-border);
}

/* A section's explainer sits between its heading and its fields. */
.form-section > .hint { margin: -8px 0 16px; }

.required-note { margin: 0 0 16px; font-size: 0.9rem; color: var(--ce-muted); }

/* The required mark: 5.9:1 on white, so it reads as red rather than as a smudge. */
.req { color: #c82613; font-weight: 700; }

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* The Incident section pairs its fields deliberately (PBI 2451) rather than packing however
   many fit: Date Reported | Time Reported, then Location | Specific Location. */
.field-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
    .field-grid--pairs { grid-template-columns: minmax(0, 1fr); }
}

/* Label above control with the same gap everywhere a field appears - the identification
   rows included, which used to run label and control together. */
.field-grid .field,
.identification-fields .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* The display above outweighs the browser's [hidden] { display: none } (a mere attribute
   selector), which the occurrence and residence fields rely on - restate it stronger. */
.field-grid .field[hidden],
.identification-fields .field[hidden] { display: none; }

.field-grid .field.wide { grid-column: 1 / -1; }

.field-grid label,
.identification-fields label,
.roles > legend { font-size: 0.85rem; font-weight: 600; color: var(--ce-muted); }

.field-grid input,
.field-grid select,
.field-grid textarea,
.identification-fields input,
.identification-fields select {
    padding: 8px 10px;
    border: 1px solid var(--ce-border);
    border-radius: 6px;
    background: var(--ce-surface);
    font: inherit;
    font-size: 0.95rem;
}

/* Time Known while the date is unknown: the tinted fill is the disabled signal, and the text
   stays at 4.5:1 or better (1.4.3) instead of the browser's washed-out grey. Chromium's UA
   stylesheet also fades a disabled <select> to opacity .7, which would blend the muted text
   down to about 3.2:1 against the page; opacity 1 keeps the ratio the colours were chosen for. */
.field-grid select:disabled {
    color: var(--ce-muted);
    background: #f0f1f3;
    border-color: #cfd3d8;
    opacity: 1;
    cursor: not-allowed;
}

.field-grid input:focus-visible,
.field-grid select:focus-visible,
.field-grid textarea:focus-visible,
.identification-fields input:focus-visible,
.identification-fields select:focus-visible {
    outline: 2px solid var(--ce-accent);
    outline-offset: 1px;
}

.field-grid textarea { min-height: 110px; resize: vertical; }

.checkbox-field { display: flex; align-items: center; gap: 8px; }

.checkbox-field input { width: auto; }

/* ---- CSA tooltip: a hand-rolled hover/focus/tap panel (no DevExtreme widget - Bug 2436). */

.help-tip { position: relative; display: inline-flex; }

.help-tip-button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--ce-accent);
    border-radius: 50%;
    background: var(--ce-surface);
    color: var(--ce-accent);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.help-tip-button:focus-visible {
    outline: 2px solid var(--ce-accent);
    outline-offset: 2px;
}

.help-tip-panel {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 10;
    width: min(340px, 80vw);
    padding: 10px 12px;
    border: 1px solid var(--ce-border);
    border-radius: 6px;
    background: var(--ce-surface);
    color: var(--ce-text);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Hover keeps it open while the pointer is over the panel too (1.4.13: hoverable); focus and
   the tapped state are the keyboard and touch equivalents. */
.help-tip:hover .help-tip-panel,
.help-tip-button:focus-visible + .help-tip-panel,
.help-tip.is-open .help-tip-panel { display: block; }

/* ---- People Involved */

.contact-card {
    border: 1px solid var(--ce-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: #fbfbfc;
}

.contact-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.contact-card header h3 { margin: 0; font-size: 0.95rem; }

/* The three groups inside a card - Details, Residence, Identification - each inset behind an
   accent rule with its own heading, so they stop blending into one run of fields. */
.contact-group {
    margin: 0 0 12px;
    padding: 10px 14px 12px;
    border: 0;
    border-left: 3px solid var(--ce-accent);
    border-radius: 0 6px 6px 0;
    background: var(--ce-surface);
    min-width: 0;
}

.contact-group:last-child { margin-bottom: 0; }

/* Floated so the legend sits inside the group as a heading rather than on a border. */
.contact-group > legend {
    float: left;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.contact-group > legend + * { clear: both; }

.contact-group .add-id { margin-top: 4px; }

/* Each identification is its own mini-card: a title, its four fields, and its Remove button
   as the trailing column (wrapping below on narrow screens). */
.identification-row {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ce-border);
    border-radius: 6px;
    background: #fbfbfc;
}

.identification-title { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; }

.identification-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.identification-fields .field { flex: 1 1 160px; }

.identification-fields button { flex: 0 0 auto; }

/* The role checkboxes are a fieldset with the question as its legend (WCAG 1.3.1). */
.roles { margin: 0; padding: 0; border: 0; min-width: 0; }

.roles > legend { margin: 0 0 4px; padding: 0; }

.roles-list { display: flex; flex-wrap: wrap; gap: 12px; }

.roles-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    text-transform: none;
    color: var(--ce-text);
}

.roles-list input:focus-visible,
.checkbox-field input:focus-visible {
    outline: 2px solid var(--ce-accent);
    outline-offset: 2px;
}

/* Submit Report on its own row, right-aligned and ruled off from the sections above it. */
.form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ce-border);
}

.form-footer .hint { margin: 0; }

.form-status { margin: 0 0 16px; padding: 12px 16px; border-radius: 6px; }

.form-status.error { background: #fdeaea; border: 1px solid #f0b4b4; color: #8a1f1f; }

.form-status.success { background: #eaf6ee; border: 1px solid #b0dcbf; color: #1c5c33; }

.hint { color: var(--ce-muted); font-size: 0.85rem; margin: 4px 0 0; }

.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }

.link-list a { color: var(--ce-accent); font-weight: 600; }

.field-error { color: #8a1f1f; font-size: 0.82rem; }

.field-error:empty { display: none; }