/**
 * ATA Online Accreditation — Brand Design System
 * ================================================
 * Master brand stylesheet loaded after app.css.
 * Defines the institutional Navy + Gold palette and
 * overrides Bootstrap/app defaults for a cohesive look.
 *
 * COLOR RATIONALE (rebranded 2026-06-10 to match the public ATA website):
 *   Warm Charcoal (#2b2620) — authority, permanence, institutional gravity
 *   Amber-Gold (#d18f12) — excellence, achievement (the brand mark)
 *   Unified with ata-secure-site so the OA app and public site read as one brand.
 *
 * TO CUSTOMIZE:
 *   - Primary color:  Search for "--ata-primary"
 *   - Accent color:   Search for "--ata-accent"
 *   - Sidebar:        Search for "--ata-sidebar"
 *   - Cards/shadows:  Search for "--ata-shadow"
 */

/* ── Brand Variables ──────────────────────────────────── */
:root {
    /* Primary palette */
    --ata-primary: var(--ata-navy);
    --ata-primary-light: var(--ata-navy-light);
    --ata-primary-dark: var(--ata-navy-dark);
    --ata-accent: var(--ata-gold);
    --ata-accent-light: var(--ata-gold-light);

    /* Sidebar — v6: light sidebar (was charcoal). Warm-white surface,
       charcoal text, pale-gold active state with a gold left-bar. */
    --ata-sidebar-bg: var(--ata-surface);
    --ata-sidebar-text: var(--ata-body);
    --ata-sidebar-text-hover: var(--ata-navy-dark);
    --ata-sidebar-hover-bg: var(--ata-subtle);
    --ata-sidebar-active-bg: var(--ata-gold-light);
    --ata-sidebar-active-text: var(--ata-gold-deep);
    --ata-sidebar-border: var(--ata-border);

    /* Backgrounds */
    --ata-bg-body: var(--ata-page, #ffffff);
    --ata-bg-card: #ffffff;

    /* Text */
    --ata-text-heading: var(--ata-ink);
    --ata-text-body: var(--ata-body);
    --ata-text-muted: var(--ata-muted);

    /* Borders & shadows — v4 warm shadows, matching the public website */
    --ata-border-color: var(--ata-border);
    --ata-shadow-card: 0 1px 3px rgba(40, 30, 10, 0.05), 0 4px 16px rgba(40, 30, 10, 0.04);
    --ata-shadow-card-hover: 0 4px 12px rgba(40, 30, 10, 0.10), 0 8px 24px rgba(40, 30, 10, 0.06);

    /* Radius — v4 bumped to match website softness (14/20) */
    --ata-radius-sm: 8px;
    --ata-radius-md: 14px;
    --ata-radius-lg: 20px;
}

/* ── Body & Page ──────────────────────────────────────── */
body {
    background-color: var(--ata-bg-body);
    color: var(--ata-text-body);
    font-family: var(--ata-font-sans);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    overflow-x: hidden;
}

.pace,
.pace .pace-progress,
.pace .pace-activity {
    display: none !important;
}

.page-content {
    display: block;
    min-height: calc(100vh - 120px);
    padding: var(--ata-space-lg);
    padding-bottom: calc(var(--ata-space-lg) + 48px);
}

/* ── Sidebar Overrides ────────────────────────────────── */
.sidebar-wrapper {
    background: var(--ata-sidebar-bg) !important;
    border-right: 1px solid var(--ata-sidebar-border) !important;
    box-shadow: 2px 0 8px rgba(42, 36, 24, 0.05) !important;
}

.sidebar-header {
    background: var(--ata-sidebar-bg) !important;
    border-bottom: 1px solid var(--ata-sidebar-border) !important;
}

.logo-text {
    color: var(--ata-ink) !important;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.toggle-icon {
    color: var(--ata-gold-strong) !important;
}

.toggle-icon:hover {
    color: var(--ata-ink) !important;
}

button.toggle-icon,
button.mobile-toggle-menu {
    border: 0;
    background: transparent;
    min-width: var(--ata-control-h);
    min-height: var(--ata-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar menu links */
.sidebar-wrapper .metismenu a {
    color: var(--ata-sidebar-text) !important;
    border-color: transparent !important;
    border-radius: var(--ata-radius-sm);
    margin: 1px 8px;
    transition: all 0.2s ease;
}

.sidebar-wrapper .metismenu a .parent-icon {
    color: var(--ata-sidebar-text);
}

.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:active {
    color: var(--ata-sidebar-text-hover) !important;
    background: var(--ata-sidebar-hover-bg) !important;
}

.sidebar-wrapper .metismenu .mm-active > a {
    color: var(--ata-sidebar-active-text) !important;
    background: var(--ata-sidebar-active-bg) !important;
    border-left: 3px solid var(--ata-accent) !important;
    font-weight: 600;
}

.sidebar-wrapper .metismenu .mm-active > a .parent-icon {
    color: var(--ata-accent);
}

/* Sub-menu */
.sidebar-wrapper .metismenu ul {
    border: none !important;
    background: var(--ata-subtle) !important;
    border-radius: var(--ata-radius-sm);
    margin: 2px 8px;
}

.sidebar-wrapper .metismenu ul a {
    color: var(--ata-muted) !important;
    padding-left: 22px !important;
    font-size: var(--ata-fs-small) !important;
    min-height: 40px;
}

.sidebar-wrapper .metismenu ul a:hover {
    color: var(--ata-ink) !important;
}

/* Top-level menu links — v3 senior baseline */
.sidebar-wrapper .metismenu > li > a {
    font-size: var(--ata-fs-body) !important;
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Menu section labels */
.menu-label {
    color: var(--ata-muted) !important;
    font-size: 12.5px !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 22px 16px 6px 16px !important;
}

/* Arrow icon for expandable menus */
.metismenu .has-arrow:after {
    border-color: var(--ata-sidebar-text) !important;
}

/* Sidebar profile section */
.sidebar-wrapper .user-img {
    border: 2px solid var(--ata-border);
}

/* ── Topbar Overrides ─────────────────────────────────── */
.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ata-border-color) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

.topbar h4,
.topbar .topbar-title {
    color: var(--ata-text-heading) !important;
    font-weight: 600;
    font-size: var(--ata-fs-h3);
}

.topbar .navbar {
    gap: var(--ata-space-sm);
}

.mobile-toggle-menu {
    align-items: center;
    border-radius: var(--ata-radius-sm);
    color: var(--ata-navy);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.user-box .nav-link {
    border-left: 1px solid var(--ata-border);
    min-height: 60px;
    padding-left: var(--ata-space-md);
}

.user-box .user-img {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    height: 36px !important;
    width: 36px !important;
}

/* ── Bootstrap Overrides ──────────────────────────────── */

/* Primary button — v6: gold-forward, unified with the public website's
   gold CTAs. Solid amber-gold fill + near-black gold-brown text (AA-safe;
   white text on gold fails contrast for our 50–75 audience). */
.btn-primary {
    background-color: var(--ata-gold) !important;
    border-color: var(--ata-gold) !important;
    color: var(--ata-on-gold) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ata-gold-bright) !important;
    border-color: var(--ata-gold-bright) !important;
    color: var(--ata-on-gold) !important;
    box-shadow: 0 4px 12px rgba(209, 143, 18, 0.30) !important;
}

.btn-primary:active {
    background-color: var(--ata-gold-strong) !important;
    border-color: var(--ata-gold-strong) !important;
    color: var(--ata-on-gold) !important;
}

/* Outline primary — v6: gold outline, gold-deep text, fills gold on hover */
.btn-outline-primary {
    color: var(--ata-gold-deep) !important;
    border-color: var(--ata-gold) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ata-gold) !important;
    border-color: var(--ata-gold) !important;
    color: var(--ata-on-gold) !important;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--ata-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(43, 38, 32, 0.15) !important;
}

/* Nav tabs — v6: gold underline on the active tab, matching the public
   website's gold-underline navigation. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--ata-gold-deep) !important;
    border-bottom-color: var(--ata-gold) !important;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--ata-gold-strong) !important;
}

/* Nav pills */
.nav-pills .nav-link.active {
    background-color: var(--ata-primary) !important;
}

/* Links */
a {
    color: var(--ata-primary);
}

a:hover {
    color: var(--ata-primary-light);
}

/* Cards */
.card {
    border: 1px solid var(--ata-border-color);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
}

.card-header {
    background: var(--ata-surface);
    border-bottom: 1px solid var(--ata-border);
    color: var(--ata-ink);
    font-weight: var(--ata-fw-semibold);
}

.modal-content {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card-hover);
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--ata-primary);
    border-color: var(--ata-primary);
}

.page-link {
    color: var(--ata-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--ata-text-heading);
    letter-spacing: 0;
}

.form-label,
label {
    color: var(--ata-ink);
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    margin-bottom: var(--ata-space-xs);
}

.form-control,
.form-select {
    min-height: var(--ata-control-h);
    font-size: var(--ata-fs-body);
    border-color: var(--ata-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-body);
}

textarea.form-control {
    min-height: 132px;
}

.form-control::placeholder {
    color: #94a3b8;
}

.btn {
    border-radius: var(--ata-radius-sm);
    font-weight: var(--ata-fw-semibold);
    letter-spacing: 0;
}

.btn-ghost {
    color: var(--ata-navy);
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus {
    color: var(--ata-navy-light);
    background: var(--ata-subtle);
}

.alert {
    border-radius: var(--ata-radius-sm);
    border: 1px solid var(--ata-border);
    border-left-width: 4px;
}

.panel-contact,
.ata-panel {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    padding: var(--ata-space-md);
}

/* ── Contextual Mini Guide ──────────────────────────────
   v3: this is the single most-read help surface for senior users.
   Bumped headline to 18 px, body to 16 px, eyebrow to 14 px and
   added breathing room so it reads like an institutional notice
   board, not a sidebar widget. */
.ata-mini-guide {
    background: var(--ata-surface);
    border: 2px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
    margin-bottom: var(--ata-space-lg);
    overflow: hidden;
}

/* P3 — Compact variant. Pages set $ataMiniGuideCompact = true; before
   including the partial. Reduces vertical footprint to a single strip
   so the banner stops dominating dense pages like the Admin Dashboard. */
.ata-mini-guide--compact .ata-mini-guide__summary {
    padding: var(--ata-space-sm) var(--ata-space-md);
}
.ata-mini-guide--compact .ata-mini-guide__eyebrow {
    display: none;
}
.ata-mini-guide--compact h2 {
    font-size: var(--ata-fs-body-lg);
}

.ata-mini-guide__summary {
    align-items: center;
    display: flex;
    gap: var(--ata-space-md);
    justify-content: space-between;
    padding: var(--ata-space-lg);
}

.ata-mini-guide__heading {
    min-width: 0;
}

.ata-mini-guide__eyebrow {
    color: var(--ata-primary);
    display: block;
    font-size: var(--ata-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.ata-mini-guide h2 {
    color: var(--ata-text-heading);
    font-size: var(--ata-fs-h3);
    font-weight: var(--ata-fw-bold);
    line-height: var(--ata-lh-tight);
    margin: 0;
}

.ata-mini-guide p {
    color: var(--ata-text-body);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    margin: 6px 0 0;
}

.ata-mini-guide__toggle {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
}

.ata-mini-guide__diagram {
    border-top: 1px solid var(--ata-border);
    padding: var(--ata-space-md) var(--ata-space-lg) 0;
}

.ata-mini-guide__body {
    border-top: 1px solid var(--ata-border);
    display: grid;
    gap: var(--ata-space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--ata-space-lg);
}

.ata-mini-guide__action {
    align-items: flex-start;
    background: var(--ata-subtle);
    border: 1px solid var(--ata-gold);
    border-radius: var(--ata-radius-sm);
    box-shadow: inset 0 0 0 1px rgba(200, 169, 81, 0.14);
    display: flex;
    gap: var(--ata-space-sm);
    height: 100%;
    min-width: 0;
    padding: var(--ata-space-md);
}

.ata-mini-guide__action-icon {
    align-items: center;
    background: var(--ata-surface);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-navy);
    display: inline-flex;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.ata-mini-guide__action-icon i {
    font-size: 1.25rem;
}

.ata-mini-guide__body h3 {
    color: var(--ata-text-heading);
    font-size: var(--ata-fs-body);
    font-weight: 700;
    margin: 0 0 0.6rem;
}

.ata-mini-guide__body ul {
    color: var(--ata-text-body);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    margin: 0;
    padding-left: 1.4rem;
}

.ata-mini-guide__body li + li {
    margin-top: 0.5rem;
}

.ata-mini-guide__meta {
    align-items: center;
    background: var(--ata-subtle);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-text-body);
    display: flex;
    font-size: var(--ata-fs-small);
    gap: var(--ata-space-sm);
    grid-column: 1 / -1;
    justify-content: space-between;
    padding: var(--ata-space-md) var(--ata-space-lg);
}

.ata-mini-guide__meta a {
    align-items: center;
    color: var(--ata-primary);
    display: inline-flex;
    gap: 0.35rem;
    font-weight: 700;
    text-decoration: none;
}

.ata-mini-guide__meta a:hover,
.ata-mini-guide__meta a:focus {
    text-decoration: underline;
}

.ata-mini-guide__stage {
    align-items: center;
    background: var(--ata-gold-light);
    border: 1px solid var(--ata-gold);
    border-radius: var(--ata-radius-pill);
    color: var(--ata-navy-dark);
    display: inline-flex;
    font-weight: var(--ata-fw-semibold);
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
}

/* ── Guide Diagrams ───────────────────────────────────── */
.ata-guide-diagram {
    background: #ffffff;
    border: 2px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    margin: 0 0 var(--ata-space-md);
    padding: var(--ata-space-md);
}

.ata-mini-guide__diagram .ata-guide-diagram {
    background: var(--ata-subtle);
    margin-bottom: 0;
}

.ata-guide-diagram__header {
    margin-bottom: var(--ata-space-sm);
}

.ata-guide-diagram__header h3 {
    color: var(--ata-text-heading);
    font-size: var(--ata-fs-body);
    font-weight: 700;
    line-height: var(--ata-lh-tight);
    margin: 0 0 0.4rem;
}

.ata-guide-diagram__header p,
.ata-guide-diagram__note {
    color: var(--ata-text-body);
    font-size: var(--ata-fs-small);
    line-height: var(--ata-lh-body);
    margin: 0;
}

.ata-guide-diagram__items {
    align-items: stretch;
    display: grid;
    gap: var(--ata-space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ata-guide-diagram--steps .ata-guide-diagram__items,
.ata-guide-diagram--cycle .ata-guide-diagram__items {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.ata-guide-diagram--split .ata-guide-diagram__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ata-guide-diagram__item {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    display: flex;
    gap: 0.55rem;
    height: 100%;
    min-width: 0;
    min-height: 88px;
    padding: 0.75rem;
    position: relative;
}

.ata-guide-diagram__item.is-current {
    border-color: var(--ata-primary);
    box-shadow: 0 0 0 2px rgba(43, 38, 32, 0.12);
}

.ata-guide-diagram__icon {
    align-items: center;
    background: var(--ata-navy);
    border: 1px solid var(--ata-navy);
    border-radius: 999px;
    color: var(--ata-surface);
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ata-guide-diagram__icon i {
    font-size: 1.25rem;
}

.ata-guide-diagram__number {
    align-items: center;
    background: var(--ata-navy);
    border: 1px solid var(--ata-navy);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: var(--ata-fs-body);
    font-weight: 800;
    height: 38px;
    justify-content: center;
}

.ata-guide-diagram__content {
    display: block;
    min-width: 0;
}

.ata-guide-diagram__label {
    color: var(--ata-text-heading);
    display: block;
    font-size: var(--ata-fs-small);
    font-weight: 700;
    line-height: var(--ata-lh-tight);
}

.ata-guide-diagram__details {
    color: var(--ata-text-body);
    display: block;
    font-size: var(--ata-fs-small);
    line-height: var(--ata-lh-body);
    margin-top: 0.4rem;
}

.ata-guide-diagram__current {
    background: var(--ata-primary);
    border-radius: var(--ata-radius-pill);
    color: #fff;
    display: inline-block;
    font-size: var(--ata-fs-xs);
    margin-left: 0.35rem;
    padding: 0.15rem 0.5rem;
    vertical-align: middle;
}

.ata-guide-diagram__cycle-note {
    align-items: center;
    color: var(--ata-text-body);
    display: flex;
    font-size: var(--ata-fs-small);
    gap: 0.4rem;
    margin: var(--ata-space-sm) 0 0;
}

.ata-guide-diagram__note {
    background: #fff;
    border-radius: var(--ata-radius-sm);
    margin-top: var(--ata-space-sm);
    padding: 0.65rem 0.75rem;
}

.ata-guide-diagram--compact {
    padding: var(--ata-space-sm);
}

.ata-guide-diagram--compact .ata-guide-diagram__header h3 {
    font-size: 0.88rem;
}

.ata-guide-diagram--compact .ata-guide-diagram__header p,
.ata-guide-diagram--compact .ata-guide-diagram__note {
    font-size: 0.8rem;
}

.ata-guide-diagram--compact .ata-guide-diagram__item {
    padding: 0.6rem;
}

/* Breadcrumb */
.breadcrumb-item a {
    color: var(--ata-primary);
}

.breadcrumb-item.active {
    color: var(--ata-text-muted);
}

/* Badges */
.bg-primary {
    background-color: var(--ata-primary) !important;
}

/* Progress bar */
.progress-bar {
    background-color: var(--ata-primary);
}

/* ── Page Content ─────────────────────────────────────── */
.page-content {
    background-color: var(--ata-bg-body);
}

.wrapper {
    overflow-x: hidden !important;
}

.wrapper table {
    white-space: normal !important;
}

/* ── Scrollbar (light sidebar) ────────────────────────── */
.sidebar-wrapper .simplebar-scrollbar::before {
    background-color: rgba(42, 36, 24, 0.22) !important;
}

/* ── Mobile Sidebar ───────────────────────────────────── */
@media screen and (max-width: 1024px) {
    .sidebar-wrapper {
        left: -250px;
    }

    .wrapper.toggled .sidebar-wrapper {
        left: 0;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2) !important;
    }
}

/* ── Collapsed Sidebar State ──────────────────────────── */
.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {
    background: var(--ata-sidebar-bg) !important;
}

.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text {
    color: transparent !important;
}

/* ── Footer ───────────────────────────────────────────── */
.page-footer {
    border-top-color: var(--ata-border-color);
    color: var(--ata-text-muted);
    font-size: var(--ata-fs-small);
    left: auto !important;
    margin-left: 250px;
    padding: 14px 24px;
    position: static !important;
    right: auto !important;
}

.wrapper.toggled .page-footer {
    margin-left: 70px;
}

/* ──────────────────────────────────────────────────────
   v3 Senior-mode toggle pill — drop into the user menu so
   reviewers and applicants can flip into "comfortable
   reading" mode without leaving their workflow.
   ────────────────────────────────────────────────────── */
.ata-text-size-toggle {
    align-items: center;
    background: var(--ata-surface);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-pill);
    color: var(--ata-navy);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    gap: 8px;
    min-height: var(--ata-control-h-sm);
    padding: 6px 14px;
}

.ata-text-size-toggle:hover,
.ata-text-size-toggle:focus {
    background: var(--ata-subtle);
    color: var(--ata-navy-dark);
}

body.ata-large-text .ata-text-size-toggle {
    background: var(--ata-gold-light);
    border-color: var(--ata-gold);
    color: var(--ata-navy-dark);
}

@media screen and (max-width: 1024px) {
    .page-content {
        padding: var(--ata-space-md);
        padding-bottom: calc(var(--ata-space-md) + 64px);
    }

    .topbar .navbar {
        padding-left: var(--ata-space-md);
        padding-right: var(--ata-space-md);
    }
}

@media screen and (max-width: 767px) {
    .topbar .navbar {
        min-height: 56px;
        padding-left: var(--ata-space-sm);
        padding-right: var(--ata-space-sm);
    }

    .mobile-toggle-menu {
        height: 36px;
        width: 36px;
    }

    .user-box .nav-link {
        border-left: 0;
        min-height: 56px;
        padding-left: var(--ata-space-xs);
        padding-right: 0;
    }

    .user-box .user-img {
        height: 32px !important;
        width: 32px !important;
    }

    .user-box .user-info {
        display: none;
    }

    .ata-mini-guide__summary {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--ata-space-sm);
        padding: var(--ata-space-md);
    }

    .ata-mini-guide__body {
        grid-template-columns: 1fr;
        padding: var(--ata-space-md);
    }

    .ata-mini-guide__diagram {
        padding: var(--ata-space-md) var(--ata-space-md) 0;
    }

    .ata-guide-diagram--steps .ata-guide-diagram__items,
    .ata-guide-diagram--split .ata-guide-diagram__items,
    .ata-guide-diagram--cycle .ata-guide-diagram__items {
        grid-template-columns: 1fr;
    }

    .ata-mini-guide__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-footer {
        left: 0 !important;
        margin-left: 0;
        position: static;
    }

    .page-wrapper {
        margin-bottom: 0;
    }

    .page-content {
        min-height: calc(100vh - 60px);
        padding: var(--ata-space-md);
    }
}

/* ── Add-remark button (admin review pages) ───────────────
   Replaces the legacy `btn btn-success px-3 radius-10 pull-right btn-sm`
   icon-only `+` button. Shipped via `ata_add_remark_button()` helper in
   `Common/ui_helpers.php`. */
.ata-add-remark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    min-height: 36px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: var(--ata-fw-medium, 500);
    line-height: 1.2;
    color: var(--ata-navy);
    background: transparent;
    border: 1.5px solid var(--ata-navy);
    border-radius: var(--ata-radius-pill, 999px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ata-add-remark-row {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--ata-space-xs, 6px);
    width: 100%;
}

.ata-add-remark-row--right {
    justify-content: flex-end;
}

.ata-add-remark--right {
    float: none;
    clear: none;
}

.ata-add-remark:hover,
.ata-add-remark:focus-visible {
    background: var(--ata-navy);
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(43, 38, 32, 0.18);
}

.ata-add-remark:active {
    background: var(--ata-navy-dark, #161616);
    border-color: var(--ata-navy-dark, #161616);
}

.ata-add-remark .bx {
    font-size: 18px;
    line-height: 1;
}

.ata-add-remark__label {
    white-space: nowrap;
}

@media print {
    .ata-add-remark,
    .ata-add-remark-row { display: none !important; }
}

/* ============================================================
   INSTRUCTION BLOCK + SUPPORTING DOCUMENTS
   ------------------------------------------------------------
   Shared component styles for:
     - Member_Institutional/instruction_block.php
     - Member_Institutional/supporting_documents.php
     - Admin/supporting_documents_review.php
   These live here (loaded in <head>) rather than in a <style> tag
   inside each component, because several host pages mount a Vue
   app on #app and Vue strips <style> tags found inside its root
   ("Templates should only be responsible for mapping the state to
   the UI"), which left the components unstyled.
   ============================================================ */

/* --- Instruction block ------------------------------------- */
.ata-instruction-block {
    border: 1px solid var(--ata-border);
    background: var(--ata-surface);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
    margin: 0 auto var(--ata-space-lg, 28px);
    max-width: 1500px;
    overflow: hidden;
}
.ata-instruction-block__head {
    display: flex;
    align-items: baseline;
    gap: var(--ata-space-sm, 12px);
    flex-wrap: wrap;
    padding: 16px var(--ata-card-pad, 24px);
    border-bottom: 1px solid var(--ata-border);
}
.ata-instruction-block__title {
    font-size: var(--ata-fs-h3, 20px);
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-ink);
    margin: 0;
    line-height: 1.3;
}
.ata-instruction-block__badge {
    font-size: 13px;
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-gold-deep);
    background: var(--ata-gold-light);
    border-radius: var(--ata-radius-pill);
    padding: 3px 12px;
    margin-left: auto;
    white-space: nowrap;
}
.ata-instruction-block__placeholder {
    font-size: 13px;
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-muted);
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-pill);
    padding: 3px 12px;
    white-space: nowrap;
}
.ata-instruction-block__body { padding: var(--ata-card-pad, 24px); }
.ata-instruction-block__lead {
    font-size: var(--ata-fs-body, 16px);
    line-height: var(--ata-lh-body, 1.65);
    color: var(--ata-body);
    margin: 0 0 var(--ata-space-sm, 12px);
}
.ata-instruction-block__list {
    margin: 0;
    padding-left: 1.35rem;
    color: var(--ata-body);
    font-size: var(--ata-fs-body, 16px);
    line-height: var(--ata-lh-body, 1.65);
}
.ata-instruction-block__list li { margin-bottom: 8px; }
.ata-instruction-block__list li:last-child { margin-bottom: 0; }
.ata-instruction-block__note {
    margin: var(--ata-space-md, 18px) 0 0;
    padding: 12px 16px;
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-body);
    font-size: 15px;
    line-height: 1.55;
}
.ata-instruction-block__manual {
    margin-top: var(--ata-space-md, 18px);
    padding-top: 14px;
    border-top: 1px solid var(--ata-border);
}
.ata-instruction-block__manual-cite {
    font-size: 12px;
    font-weight: var(--ata-fw-semibold, 600);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ata-gold-deep);
    margin: 0 0 4px;
}
.ata-instruction-block__manual-title {
    font-size: 15px;
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-ink);
    margin: 0 0 4px;
}
.ata-instruction-block__manual-summary {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ata-body);
    margin: 0 0 8px;
}
.ata-instruction-block__manual-link {
    font-size: 14px;
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-gold-strong);
    text-decoration: none;
}
.ata-instruction-block__manual-link:hover { color: var(--ata-gold-deep); text-decoration: underline; }

/* --- Supporting documents (applicant, editable) ------------- */
.ata-supdocs {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    background: var(--ata-surface);
    box-shadow: var(--ata-shadow-card);
    margin: var(--ata-space-lg, 28px) auto;
    max-width: 1500px;
    overflow: hidden;
}
.ata-supdocs__head {
    display: flex;
    align-items: baseline;
    gap: var(--ata-space-sm, 12px);
    flex-wrap: wrap;
    padding: 16px var(--ata-card-pad, 24px);
    border-bottom: 1px solid var(--ata-border);
}
.ata-supdocs__title {
    font-size: var(--ata-fs-h3, 20px);
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-ink);
    margin: 0;
    line-height: 1.3;
}
.ata-supdocs__count { margin-left: auto; font-size: 14px; color: var(--ata-muted); white-space: nowrap; }
.ata-supdocs__body { padding: var(--ata-card-pad, 24px); }
.ata-supdocs__lead {
    color: var(--ata-body);
    font-size: var(--ata-fs-body, 16px);
    line-height: var(--ata-lh-body, 1.65);
    margin: 0 0 6px;
}
.ata-supdocs__hint { color: var(--ata-muted); font-size: 14px; line-height: 1.6; margin: 0 0 var(--ata-space-md, 18px); }
.ata-supdocs__group { margin-bottom: var(--ata-space-md, 18px); }
.ata-supdocs__group:last-of-type { margin-bottom: 0; }
.ata-supdocs__grouplabel {
    display: block;
    font-size: 14px;
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-ink);
    margin-bottom: 8px;
}
.ata-supdocs__row {
    display: grid;
    /* Fixed final column so the Upload and Add link rows align exactly. */
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 128px;
    gap: 12px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    background: var(--ata-subtle);
}
@media (max-width: 860px) {
    .ata-supdocs__row { grid-template-columns: 1fr; }
}
.ata-supdocs__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ata-supdocs__field label { font-size: 14px; font-weight: var(--ata-fw-semibold, 600); color: var(--ata-body); }
.ata-supdocs__field input {
    height: var(--ata-control-h, 48px);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    padding: 0 12px;
    font-size: 15px;
    background: var(--ata-surface);
    color: var(--ata-body);
    width: 100%;
}
.ata-supdocs__field input[type=file] { padding: 11px 12px; height: var(--ata-control-h, 48px); line-height: 1.2; }
.ata-supdocs__btn {
    height: var(--ata-control-h, 48px);
    width: 100%;
    padding: 0 16px;
    border: 0;
    border-radius: var(--ata-radius-md);
    background: var(--ata-gold);
    color: var(--ata-on-gold);
    font-weight: var(--ata-fw-semibold, 600);
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
}
.ata-supdocs__btn:hover { background: var(--ata-gold-bright); }
.ata-supdocs__btn:disabled { opacity: .55; cursor: default; }

/* Core OA usability patterns: explicit actions, navigation, and availability. */
.ata-page-navigation {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ata-space-sm) var(--ata-space-lg);
    justify-content: space-between;
    margin-top: var(--ata-space-xs);
}
.ata-back-link {
    align-items: center;
    color: var(--ata-navy);
    display: inline-flex;
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    gap: var(--ata-space-xxs);
    text-decoration: none;
}
.ata-back-link:hover,
.ata-back-link:focus-visible {
    color: var(--ata-gold-deep);
    text-decoration: underline;
}
.ata-action-control {
    align-items: center;
    display: inline-flex;
    gap: var(--ata-space-xxs);
    justify-content: center;
    white-space: nowrap;
}
.ata-action-control .bx {
    margin-right: 0;
}
.ata-unavailable-action {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--ata-space-xxs);
    min-width: 10rem;
}
.ata-unavailable-reason {
    color: var(--ata-muted);
    display: inline-flex;
    font-size: var(--ata-fs-xs);
    gap: var(--ata-space-xxs);
    line-height: var(--ata-lh-body);
    max-width: 25rem;
    text-align: center;
}

/* Shared institutional-application workspace */
.ata-application-workspace {
    margin-bottom: var(--ata-space-lg);
}
.ata-application-workspace__context {
    align-items: center;
    background: #fff;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md) var(--ata-radius-md) 0 0;
    display: flex;
    gap: var(--ata-space-md);
    justify-content: space-between;
    margin-top: var(--ata-space-md);
    padding: var(--ata-space-lg);
}
.ata-application-workspace__context h1 {
    color: var(--ata-text-heading);
    font-size: var(--ata-fs-h3);
    margin: 0 0 var(--ata-space-xs);
}
.ata-application-workspace__context p {
    align-items: center;
    color: var(--ata-text-body);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ata-space-xs);
    margin: 0;
}
.ata-application-workspace__context p span {
    border-left: 1px solid var(--ata-border);
    color: var(--ata-muted);
    padding-left: var(--ata-space-xs);
}
.ata-application-workspace__nav {
    background: #fff;
    border: 1px solid var(--ata-border);
    border-radius: 0 0 var(--ata-radius-md) var(--ata-radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ata-space-xs);
    padding: var(--ata-space-sm);
}
.ata-application-workspace__link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--ata-radius-sm);
    color: var(--ata-navy);
    display: inline-flex;
    font-size: var(--ata-fs-small);
    font-weight: 700;
    gap: var(--ata-space-xxs);
    min-height: var(--ata-control-h-sm);
    padding: 0.55rem 0.75rem;
    text-decoration: none;
}
.ata-application-workspace__link:hover,
.ata-application-workspace__link:focus-visible {
    background: var(--ata-gold-light);
    border-color: var(--ata-gold);
    color: var(--ata-navy-dark);
}
.ata-application-workspace__link.is-active {
    background: var(--ata-navy);
    color: #fff;
}
@media (max-width: 767.98px) {
    .ata-application-workspace__context {
        align-items: flex-start;
        flex-direction: column;
    }
    .ata-application-workspace__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Remark content stays readable; gold is an accent rather than a text surface. */
.ata-remarks-modal .modal-content {
    background: var(--ata-surface);
    color: var(--ata-ink);
}
.ata-remarks-modal .modal-header {
    background: var(--ata-gold-light);
    border-bottom: 1px solid var(--ata-gold);
    color: var(--ata-ink);
}
.ata-remarks-modal .modal-title,
.ata-remarks-modal .modal-body,
.ata-remarks-modal .modal-footer,
.ata-remarks-modal label {
    color: var(--ata-ink);
}
.ata-remarks-modal .remark-card,
.ata-remarks-modal #remarkList > li {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-left: 3px solid var(--ata-gold);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-ink);
    overflow-wrap: anywhere;
    padding: var(--ata-space-sm) var(--ata-space-md);
}
.ata-remarks-modal #remarkList {
    list-style: none;
    padding-left: 0 !important;
}
.ata-remarks-modal #remarkList > li + li {
    margin-top: var(--ata-space-xs);
}

/* Manual-aligned workflow: one visual grammar on every core OA surface. */
.ata-workflow {
    margin-bottom: var(--ata-space-lg);
}
.ata-workflow__title {
    color: var(--ata-ink);
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-bold);
    margin-bottom: var(--ata-space-md);
}
.ata-workflow__list {
    display: grid;
    gap: var(--ata-space-sm);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.ata-workflow__step {
    min-width: 0;
    position: relative;
}
.ata-workflow__step-link {
    align-items: flex-start;
    background: var(--ata-surface);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    color: var(--ata-body);
    display: grid;
    gap: var(--ata-space-sm);
    grid-template-columns: auto minmax(0, 1fr);
    height: 100%;
    padding: var(--ata-space-md);
    text-decoration: none;
}
a.ata-workflow__step-link:hover,
a.ata-workflow__step-link:focus-visible {
    border-color: var(--ata-gold);
    box-shadow: var(--ata-shadow-card);
    color: var(--ata-body);
}
.ata-workflow__number {
    align-items: center;
    background: var(--ata-neutral-bg);
    border: 2px solid var(--ata-border);
    border-radius: 50%;
    color: var(--ata-ink);
    display: inline-flex;
    font-weight: var(--ata-fw-bold);
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}
.ata-workflow__content {
    display: flex;
    flex-direction: column;
    gap: var(--ata-space-xxs);
    min-width: 0;
}
.ata-workflow__content strong {
    color: var(--ata-ink);
    line-height: var(--ata-lh-tight);
}
.ata-workflow__owner,
.ata-workflow__meta {
    color: var(--ata-muted);
    font-size: var(--ata-fs-xs);
    line-height: var(--ata-lh-body);
}
.ata-workflow__count,
.ata-workflow__state {
    border-radius: var(--ata-radius-pill);
    font-size: var(--ata-fs-xs);
    font-weight: var(--ata-fw-semibold);
    padding: 2px 8px;
    width: fit-content;
}
.ata-workflow__count {
    background: var(--ata-neutral-bg);
    color: var(--ata-body);
}
.ata-workflow__state {
    grid-column: 2;
}
.ata-workflow__step.is-completed .ata-workflow__number,
.ata-workflow__step.is-completed .ata-workflow__state {
    background: var(--ata-success-bg);
    border-color: var(--ata-success-border);
    color: var(--ata-success-text);
}
.ata-workflow__step.is-current .ata-workflow__step-link {
    border-color: var(--ata-gold);
    box-shadow: 0 0 0 2px var(--ata-gold-light);
}
.ata-workflow__step.is-current .ata-workflow__number,
.ata-workflow__step.is-current .ata-workflow__state {
    background: var(--ata-gold-light);
    border-color: var(--ata-gold);
    color: var(--ata-gold-deep);
}
.ata-workflow__step.is-waiting .ata-workflow__state {
    background: var(--ata-neutral-bg);
    color: var(--ata-muted);
}
.ata-workflow__step.is-returned .ata-workflow__number,
.ata-workflow__step.is-returned .ata-workflow__state {
    background: var(--ata-warning-bg);
    border-color: var(--ata-warning-border);
    color: var(--ata-warning-text);
}

@media (max-width: 575.98px) {
    .ata-page-navigation {
        align-items: flex-start;
        flex-direction: column;
    }
    .ata-unavailable-action {
        min-width: 10rem;
    }
    .ata-workflow__list {
        grid-template-columns: 1fr;
    }
}
.ata-supdocs__msg { font-size: 14px; margin: var(--ata-space-sm, 12px) 0 0; }
.ata-supdocs__msg:empty { margin: 0; }
.ata-supdocs__msg.is-ok { color: #065f46; }
.ata-supdocs__msg.is-err { color: #991b1b; }
.ata-supdocs__listwrap { margin-top: var(--ata-space-lg, 28px); }
.ata-supdocs__listtitle {
    font-size: 14px;
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-ink);
    margin: 0 0 8px;
}
.ata-supdocs__list { list-style: none; margin: 0; padding: 0; }
.ata-supdocs__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    margin-bottom: 8px;
    background: var(--ata-surface);
}
.ata-supdocs__item:last-child { margin-bottom: 0; }
.ata-supdocs__kind {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: var(--ata-fw-semibold, 600);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ata-gold-deep);
    background: var(--ata-gold-light);
    border-radius: var(--ata-radius-sm);
    padding: 4px 10px;
    min-width: 62px;
    text-align: center;
}
.ata-supdocs__meta { flex: 1 1 auto; min-width: 0; }
.ata-supdocs__name { font-weight: var(--ata-fw-semibold, 600); color: var(--ata-ink); word-break: break-word; }
.ata-supdocs__name a { color: var(--ata-navy-light); text-decoration: underline; }
.ata-supdocs__desc { color: var(--ata-muted); font-size: 14px; margin-top: 2px; word-break: break-word; }
.ata-supdocs__del {
    flex: 0 0 auto;
    border: 1px solid var(--ata-border);
    background: var(--ata-surface);
    color: #991b1b;
    border-radius: var(--ata-radius-sm);
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    cursor: pointer;
}
.ata-supdocs__del:hover { background: #fee2e2; border-color: #fecaca; }
.ata-supdocs__empty {
    color: var(--ata-muted);
    font-size: 14px;
    padding: 16px;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    background: var(--ata-subtle);
}
.ata-supdocs__locked {
    padding: 12px 16px;
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-body);
    font-size: 15px;
    line-height: 1.55;
}

/* --- Supporting documents (staff, read-only) ---------------- */
.ata-supdocs-review {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    background: var(--ata-surface);
    box-shadow: var(--ata-shadow-card);
    margin: var(--ata-space-lg, 28px) auto;
    max-width: 1500px;
    overflow: hidden;
}
.ata-supdocs-review__head {
    display: flex;
    align-items: baseline;
    gap: var(--ata-space-sm, 12px);
    flex-wrap: wrap;
    padding: 16px var(--ata-card-pad, 24px);
    border-bottom: 1px solid var(--ata-border);
}
.ata-supdocs-review__title {
    font-size: var(--ata-fs-h3, 20px);
    font-weight: var(--ata-fw-semibold, 600);
    color: var(--ata-ink);
    margin: 0;
}
.ata-supdocs-review__count { margin-left: auto; font-size: 14px; color: var(--ata-muted); }
.ata-supdocs-review__body { padding: var(--ata-card-pad, 24px); }
.ata-supdocs-review__list { list-style: none; margin: 0; padding: 0; }
.ata-supdocs-review__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    margin-bottom: 8px;
    background: var(--ata-surface);
}
.ata-supdocs-review__item:last-child { margin-bottom: 0; }
.ata-supdocs-review__kind {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: var(--ata-fw-semibold, 600);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ata-gold-deep);
    background: var(--ata-gold-light);
    border-radius: var(--ata-radius-sm);
    padding: 4px 10px;
    min-width: 62px;
    text-align: center;
}
.ata-supdocs-review__meta { flex: 1 1 auto; min-width: 0; }
.ata-supdocs-review__name { font-weight: var(--ata-fw-semibold, 600); color: var(--ata-ink); word-break: break-word; }
.ata-supdocs-review__name a { color: var(--ata-navy-light); text-decoration: underline; }
.ata-supdocs-review__desc { color: var(--ata-muted); font-size: 14px; margin-top: 2px; word-break: break-word; }
.ata-supdocs-review__when { flex: 0 0 auto; font-size: 13px; color: var(--ata-muted); white-space: nowrap; }
.ata-supdocs-review__empty {
    color: var(--ata-muted);
    font-size: 14px;
    padding: 16px;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    background: var(--ata-subtle);
}

/* ============================================================
   CKEDITOR — match the app's card styling
   ------------------------------------------------------------
   The editor ships its own grey chrome. These rules align it with
   ATA form controls (warm sand border, standard radius, quiet
   toolbar) so an answer box looks like part of the form rather
   than an embedded third-party widget.
   Toolbar contents are configured in assets/box/config.js.
   ============================================================ */
.cke.cke_chrome {
    border: 1px solid var(--ata-border) !important;
    border-radius: var(--ata-radius-sm) !important;
    box-shadow: none !important;
}
.cke_top {
    background: var(--ata-subtle) !important;
    border-bottom: 1px solid var(--ata-border) !important;
    padding: 6px 8px !important;
}
.cke_bottom {
    background: var(--ata-subtle) !important;
    border-top: 1px solid var(--ata-border) !important;
    padding: 4px 8px !important;
}
.cke_toolgroup,
.cke_combo_button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 2px !important;
}
.cke_button {
    border-radius: var(--ata-radius-sm) !important;
    padding: 5px 6px !important;
}
.cke_button:hover,
.cke_button__checked,
.cke_button_on {
    background: var(--ata-gold-light) !important;
}
.cke_button_on .cke_button_icon { opacity: 1 !important; }
/* Separators between the small groups stay subtle. */
.cke_toolbar_separator {
    background: var(--ata-border) !important;
    margin: 4px 6px !important;
}

/* v7 (2026-09-23) contrast: manual links and required-field markers
   (were 4.1:1 and 4.4:1 against the page background). */
.ata-instruction-block__manual-link {
    color: var(--ata-gold-deep);
}
.form-text .text-danger,
label .text-danger,
.text-danger.required,
span.text-danger:only-child {
    color: var(--ata-danger-text) !important;
}

/* Phones (audit 2026-09-28 V7/V8) ---------------------------------------
   Keep the Mini Guide to one short row so page content starts near the top,
   and give small in-content links a 24 px minimum touch target. */
@media (max-width: 575.98px) {
    .ata-mini-guide .ata-mini-guide__summary {
        align-items: center;
        flex-direction: row;
        padding: var(--ata-space-sm) var(--ata-space-md);
    }
    .ata-mini-guide .ata-mini-guide__eyebrow,
    .ata-mini-guide .ata-mini-guide__heading p {
        display: none;
    }
    .ata-mini-guide h2 {
        font-size: var(--ata-fs-body-lg);
    }
    .ata-mini-guide__toggle {
        flex-shrink: 0;
    }
    #main-content .breadcrumb a,
    #main-content .ata-back-link {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
    }
}