/* ═══════════════════════════════════════════════════════════
   RAMS Pro — IBM Carbon Design System (CDS) Tokens
   Typography: IBM Plex Sans / IBM Plex Mono
   Color: Carbon Gray + Blue60 accent
   Spacing: 8px grid (rem-based)
   ═══════════════════════════════════════════════════════════ */

/* ─── CARBON DESIGN TOKENS ─── */
:root {
    /* Core Colors — Carbon Gray scale */
    --cds-background:               #f4f4f4;    /* Gray 10 */
    --cds-layer-01:                 #ffffff;    /* White */
    --cds-layer-02:                 #f4f4f4;    /* Gray 10 */
    --cds-border-subtle:            #e0e0e0;    /* Gray 20 */
    --cds-border-strong:            #8d8d8d;    /* Gray 50 */
    --cds-text-primary:             #161616;    /* Gray 100 */
    --cds-text-secondary:           #525252;    /* Gray 70 */
    --cds-text-helper:              #6f6f6f;    /* Gray 60 */
    --cds-text-placeholder:         #a8a8a8;    /* Gray 40 */
    --cds-text-on-color:            #ffffff;
    --cds-icon-primary:             #161616;
    --cds-icon-secondary:           #525252;

    /* Interactive — Carbon Blue */
    --cds-interactive:              #0f62fe;    /* Blue 60 */
    --cds-interactive-hover:        #0353e9;    /* Blue 70 */
    --cds-interactive-active:       #002d9c;    /* Blue 80 */
    --cds-focus:                    #0f62fe;

    /* Support Colors */
    --cds-support-error:            #da1e28;    /* Red 60 */
    --cds-support-success:          #198038;    /* Green 60 */
    --cds-support-warning:          #f1c21b;    /* Yellow 30 */
    --cds-support-info:             #0043ce;    /* Blue 70 */

    /* Tag Colors */
    --cds-tag-green-bg:             #defbe6;
    --cds-tag-green-text:           #0e6027;
    --cds-tag-yellow-bg:            #fcf4d6;
    --cds-tag-yellow-text:          #684e00;
    --cds-tag-orange-bg:            #fff2e8;
    --cds-tag-orange-text:          #8a3800;
    --cds-tag-red-bg:               #fff1f1;
    --cds-tag-red-text:             #a2191f;
    --cds-tag-blue-bg:              #edf5ff;
    --cds-tag-blue-text:            #0043ce;
    --cds-tag-gray-bg:              #e0e0e0;
    --cds-tag-gray-text:            #393939;

    /* UI Shell */
    --cds-header-bg:                #161616;    /* Gray 100 */
    --cds-header-text:              #f4f4f4;

    /* Spacing — Carbon 8px grid */
    --cds-spacing-02:  0.25rem;    /*  4px */
    --cds-spacing-03:  0.5rem;     /*  8px */
    --cds-spacing-04:  0.75rem;    /* 12px */
    --cds-spacing-05:  1rem;       /* 16px */
    --cds-spacing-06:  1.5rem;     /* 24px */
    --cds-spacing-07:  2rem;       /* 32px */
    --cds-spacing-08:  2.5rem;     /* 40px */
    --cds-spacing-09:  3rem;       /* 48px */

    /* Layout */
    --cds-layout-max:  960px;

    /* Hover / layer interactions */
    --cds-layer-hover:              #e8e8e8;    /* Gray 20 hover */
    --cds-layer-active:             #c6c6c6;    /* Gray 30 active */
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    background: var(--cds-background);
    color: var(--cds-text-primary);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ─── CARBON TYPOGRAPHY ─── */
.cds-heading-04 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.29;
    letter-spacing: 0;
    margin-bottom: var(--cds-spacing-02);
}
.cds-heading-03 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: var(--cds-spacing-03);
}
.cds-body-01 {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: 0.16px;
}
.cds-text-helper {
    color: var(--cds-text-helper);
    margin-bottom: var(--cds-spacing-06);
}

/* ═════════════════════════════════════════
   UI SHELL — Header
   ═════════════════════════════════════════ */
.cds-header {
    background: var(--cds-header-bg);
    height: 3rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
}
.cds-header__inner {
    max-width: var(--cds-layout-max);
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cds-header__name {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    color: var(--cds-header-text);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-decoration: none;
}
.cds-header__icon { opacity: .8; }
.cds-header__prefix { font-weight: 600; }
.cds-header__title { font-weight: 300; opacity: .7; }
.cds-header__label {
    font-size: 0.75rem;
    color: var(--cds-header-text);
    opacity: .5;
    letter-spacing: 0.32px;
}

/* ═════════════════════════════════════════
   PROGRESS INDICATOR (Carbon)
   ═════════════════════════════════════════ */
.cds-progress {
    background: var(--cds-layer-01);
    border-bottom: 1px solid var(--cds-border-subtle);
    padding: 0 1rem;
    position: sticky;
    top: 3rem;
    z-index: 100;
}
.cds-progress__inner {
    max-width: var(--cds-layout-max);
    margin: 0 auto;
    display: flex;
}
.cds-progress__step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-05) var(--cds-spacing-03);
    cursor: pointer;
    position: relative;
    transition: background .15s;
}
.cds-progress__step:hover { background: var(--cds-layer-02); }

.cds-progress__indicator svg {
    fill: var(--cds-border-strong);
    transition: fill .15s;
}
.cds-progress__step--current .cds-progress__indicator svg { fill: var(--cds-interactive); }
.cds-progress__step--complete .cds-progress__indicator svg { fill: var(--cds-support-success); }

/* Completed step gets a checkmark overlay */
.cds-progress__step--complete .cds-progress__indicator {
    position: relative;
}
.cds-progress__step--complete .cds-progress__indicator::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M13 24l-9-9 1.41-1.41L13 21.17 26.59 7.58 28 9z'/%3E%3C/svg%3E");
    background-size: contain;
}

.cds-progress__line {
    display: none;
}

.cds-progress__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cds-text-secondary);
    letter-spacing: 0.32px;
    text-transform: uppercase;
}
.cds-progress__step--current .cds-progress__label {
    color: var(--cds-text-primary);
    font-weight: 600;
}
.cds-progress__step--complete .cds-progress__label {
    color: var(--cds-text-helper);
}

/* Unvisited future steps — still clickable */
.cds-progress__step:not(.cds-progress__step--current):not(.cds-progress__step--complete) {
    cursor: pointer;
}
.cds-progress__step:not(.cds-progress__step--current):not(.cds-progress__step--complete):hover .cds-progress__label {
    color: var(--cds-text-primary);
}

/* ═════════════════════════════════════════
   MAIN CONTENT
   ═════════════════════════════════════════ */
.cds-content {
    max-width: var(--cds-layout-max);
    margin: calc(3rem + var(--cds-spacing-07)) auto var(--cds-spacing-07);
    padding: 0 var(--cds-spacing-05);
}

.form-step {
    display: none;
    animation: cdsFadeIn .2s ease;
}
.form-step.active { display: block; }

@keyframes cdsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════
   FORM ELEMENTS (Carbon Text Input / Area)
   ═════════════════════════════════════════ */
.cds-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cds-spacing-06);
}
.cds-form-grid--3col {
    grid-template-columns: 1fr 1fr auto;
}
.cds-form-item {
    display: flex;
    flex-direction: column;
}
.cds-form-item--full { grid-column: 1 / -1; }
.cds-form-item--btn-align {
    display: flex;
    align-items: flex-end;
}

.cds-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cds-text-secondary);
    letter-spacing: 0.32px;
    margin-bottom: var(--cds-spacing-03);
    line-height: 1.34;
}
.cds-label--required { color: var(--cds-support-error); }

.cds-text-input,
.cds-text-area,
.cds-select {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.875rem;
    color: var(--cds-text-primary);
    background: var(--cds-layer-02);
    border: none;
    border-bottom: 1px solid var(--cds-border-strong);
    padding: 0 1rem;
    height: 2.5rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.cds-text-input::placeholder,
.cds-text-area::placeholder {
    color: var(--cds-text-placeholder);
}
.cds-text-input:focus,
.cds-text-area:focus,
.cds-select:focus {
    border-bottom-color: var(--cds-focus);
    box-shadow: inset 0 -2px 0 0 var(--cds-focus);
}

.cds-text-area {
    height: auto;
    padding: 0.6875rem 1rem;
    resize: vertical;
    line-height: 1.43;
}

select.cds-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z' fill='%23161616'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Error state */
.cds-text-input--error,
.cds-text-area--error {
    border-bottom-color: var(--cds-support-error);
    box-shadow: inset 0 -2px 0 0 var(--cds-support-error);
}
.cds-form-requirement {
    font-size: 0.75rem;
    color: var(--cds-support-error);
    margin-top: var(--cds-spacing-02);
    letter-spacing: 0.32px;
}

/* ═════════════════════════════════════════
   BUTTONS (Carbon)
   ═════════════════════════════════════════ */
.cds-btn {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.16px;
    line-height: 1.29;
    padding: calc(0.875rem - 3px) calc(1rem - 3px);
    min-height: 3rem;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    position: relative;
    white-space: nowrap;
}
.cds-btn__icon { flex-shrink: 0; }
.cds-btn__icon--left { order: -1; }

/* Primary */
.cds-btn--primary {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
}
.cds-btn--primary:hover { background: var(--cds-interactive-hover); }
.cds-btn--primary:active { background: var(--cds-interactive-active); }
.cds-btn--primary svg { fill: currentColor; }

/* Secondary */
.cds-btn--secondary {
    background: #393939;
    color: var(--cds-text-on-color);
}
.cds-btn--secondary:hover { background: #474747; }
.cds-btn--secondary svg { fill: currentColor; }

/* Tertiary */
.cds-btn--tertiary {
    background: transparent;
    color: var(--cds-interactive);
    border: 1px solid var(--cds-interactive);
    padding: calc(0.875rem - 3px) calc(1rem - 3px);
}
.cds-btn--tertiary:hover {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
}
.cds-btn--tertiary svg { fill: currentColor; }

/* Ghost */
.cds-btn--ghost {
    background: transparent;
    color: var(--cds-interactive);
    padding: calc(0.875rem - 3px) calc(1rem - 3px);
}
.cds-btn--ghost:hover { background: #e0e0e0; color: var(--cds-interactive); }
.cds-btn--ghost svg { fill: currentColor; }

/* Danger */
.cds-btn--danger {
    background: var(--cds-support-error);
    color: var(--cds-text-on-color);
}
.cds-btn--danger:hover { background: #b81922; }

/* Small button (Carbon 32px field height) */
.cds-btn--sm {
    min-height: 2rem;
    padding: calc(0.375rem - 3px) calc(1rem - 3px);
}

.cds-btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--cds-spacing-07);
    padding-top: var(--cds-spacing-06);
    border-top: 1px solid var(--cds-border-subtle);
}
.cds-btn-row--export { flex-wrap: wrap; gap: var(--cds-spacing-05); }
.cds-btn-group { display: flex; gap: 1px; flex-wrap: wrap; }
.cds-btn-group--modal { margin-top: var(--cds-spacing-05); gap: 1px; }

/* ═════════════════════════════════════════
   TILE (Carbon)
   ═════════════════════════════════════════ */
.cds-tile {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-05);
    border: none;
    box-shadow: none;
    /* Carbon tiles have no border-radius by default */
}
.cds-tile--dashed {
    border: 2px dashed var(--cds-border-subtle);
}

/* ═════════════════════════════════════════
   TAG (Carbon)
   ═════════════════════════════════════════ */
.cds-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--cds-spacing-02);
    padding: 0 var(--cds-spacing-03);
    height: 1.5rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.32px;
    border-radius: 624rem; /* Pill */
    white-space: nowrap;
}
.cds-tag--green  { background: var(--cds-tag-green-bg);  color: var(--cds-tag-green-text); }
.cds-tag--yellow { background: var(--cds-tag-yellow-bg); color: var(--cds-tag-yellow-text); }
.cds-tag--orange { background: var(--cds-tag-orange-bg); color: var(--cds-tag-orange-text); }
.cds-tag--red    { background: var(--cds-tag-red-bg);    color: var(--cds-tag-red-text); }
.cds-tag--blue   { background: var(--cds-tag-blue-bg);   color: var(--cds-tag-blue-text); }
.cds-tag--gray   { background: var(--cds-tag-gray-bg);   color: var(--cds-tag-gray-text); }
.cds-tag--teal   { background: #d9fbfb; color: #004144; }
.cds-tag--purple { background: #e8daff; color: #491d8b; }
.cds-tag-group { display: flex; gap: var(--cds-spacing-03); flex-wrap: wrap; margin-top: var(--cds-spacing-05); }

/* ═════════════════════════════════════════
   DATA TABLE (Carbon)
   ═════════════════════════════════════════ */
.cds-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.cds-data-table th {
    background: var(--cds-header-bg);
    color: var(--cds-text-on-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16px;
    text-transform: uppercase;
    padding: 0 var(--cds-spacing-05);
    height: 3rem;
    text-align: left;
    border: none;
    border-bottom: 1px solid #393939;
    vertical-align: middle;
}
.cds-data-table td {
    padding: 0 var(--cds-spacing-05);
    height: 3rem;
    border-bottom: 1px solid var(--cds-border-subtle);
    vertical-align: middle;
    background: var(--cds-layer-01);
}
.cds-data-table tbody tr:hover td {
    background: var(--cds-layer-hover);
}

/* Risk matrix specific table */
.risk-matrix-table {
    font-size: 0.75rem;
}
.risk-matrix-table th,
.risk-matrix-table td {
    text-align: center;
    padding: var(--cds-spacing-03) var(--cds-spacing-04);
}
.risk-matrix-table td:first-child {
    text-align: left;
    background: var(--cds-layer-02);
    font-weight: 500;
}
.risk-matrix-table th {
    font-size: 0.6875rem;
}

/* Risk matrix cells */
.risk-low   { background: var(--cds-tag-green-bg);  color: var(--cds-tag-green-text); }
.risk-med   { background: var(--cds-tag-yellow-bg); color: var(--cds-tag-yellow-text); }
.risk-high  { background: var(--cds-tag-orange-bg); color: var(--cds-tag-orange-text); }
.risk-vhigh { background: var(--cds-tag-red-bg);    color: var(--cds-tag-red-text); }

/* ═════════════════════════════════════════
   HAZARD CATEGORIES (Step 2)
   ═════════════════════════════════════════ */
.hazard-categories {
    display: flex;
    flex-direction: column;
    gap: 1px;  /* Carbon stacked list style */
    margin-bottom: var(--cds-spacing-06);
    background: var(--cds-border-subtle);
}
.hazard-cat {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
}
.hazard-cat h3 {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16px;
    margin-bottom: var(--cds-spacing-04);
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    color: var(--cds-text-primary);
}
.hazard-cat h3 .cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.hazard-cat h3 .cat-icon svg { fill: var(--cds-icon-secondary); }

.hazard-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
}
.hazard-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-03) var(--cds-spacing-05);
    margin: 0 calc(var(--cds-spacing-05) * -1);
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0;
    user-select: none;
    -webkit-user-select: none;
    transition: background .15s;
}
.hazard-item:hover { background: var(--cds-layer-02); }

/* Carbon Checkbox */
.hazard-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--cds-icon-primary);
    border-radius: 1px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.hazard-item input[type="checkbox"]:checked {
    background: var(--cds-interactive);
    border-color: var(--cds-interactive);
}
.hazard-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 12.4L2 8l1-1 3.5 3.4L13 4l1 1z'/%3E%3C/svg%3E");
    background-size: contain;
}
.hazard-item input[type="checkbox"]:focus {
    box-shadow: 0 0 0 2px var(--cds-focus);
}
.hazard-item label {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--cds-text-primary);
    cursor: pointer;
    letter-spacing: 0.16px;
    margin-bottom: 0;
}

/* ═════════════════════════════════════════
   RISK CARDS (Step 3)
   ═════════════════════════════════════════ */
.risk-key {
    margin-bottom: var(--cds-spacing-07);
}

.risk-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: 1px;
    border-left: 4px solid var(--cds-border-subtle);
    transition: border-color .15s;
}
.risk-card:hover {
    border-left-color: var(--cds-interactive);
}
.risk-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--cds-spacing-05);
    gap: var(--cds-spacing-03);
}
.risk-card-header h4 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.16px;
    min-width: 0;
    flex: 1;
}
.risk-card-header .risk-cat {
    font-size: 0.6875rem;
    white-space: nowrap;
    flex-shrink: 0;
    height: 1.25rem;
    padding: 0 0.5rem;
}
.risk-card .cds-form-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--cds-spacing-05);
    align-items: end;
}
.risk-score-display {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    height: 2.5rem;
}
.risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--cds-spacing-03);
    height: 1.5rem;
    border-radius: 624rem;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.32px;
    font-family: 'IBM Plex Mono', monospace;
}
.precautions-area {
    margin-top: var(--cds-spacing-05);
}
.precautions-area > .cds-label {
    margin-bottom: var(--cds-spacing-03);
}
.suggested-controls {
    margin: var(--cds-spacing-03) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cds-spacing-02);
}
.control-chip {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    padding: 0 var(--cds-spacing-03);
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    background: var(--cds-tag-blue-bg);
    color: var(--cds-tag-blue-text);
    border: none;
    border-radius: 624rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.control-chip:hover {
    background: #d0e2ff;
}
.control-chip.selected {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
}

/* ═════════════════════════════════════════
   REVIEW (Step 4)
   ═════════════════════════════════════════ */
#reviewContent {
    margin-bottom: var(--cds-spacing-05);
}
.review-section {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: 1px;
}
.review-section h3 {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16px;
    text-transform: uppercase;
    color: var(--cds-text-secondary);
    margin-bottom: var(--cds-spacing-05);
    padding-bottom: var(--cds-spacing-03);
    border-bottom: 2px solid var(--cds-interactive);
    display: inline-block;
}
.review-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cds-spacing-02) var(--cds-spacing-07);
}
.review-detail-grid dt {
    font-size: 0.75rem;
    color: var(--cds-text-helper);
    letter-spacing: 0.32px;
}
.review-detail-grid dd {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--cds-spacing-03);
}

/* Review table re-uses cds-data-table */

.signoff-section {
    margin-bottom: var(--cds-spacing-05);
}
.signoff-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--cds-spacing-05);
}

/* ═════════════════════════════════════════
   MODAL (Carbon)
   ═════════════════════════════════════════ */
.cds-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22, 22, 22, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--cds-spacing-07);
}
.cds-modal-overlay.visible { display: flex; }

.cds-modal {
    background: var(--cds-layer-01);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    /* Carbon modals are square-cornered */
}
.cds-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cds-spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle);
}
.cds-modal__header h3 { margin-bottom: 0; }
.cds-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-icon-primary);
    padding: var(--cds-spacing-03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.cds-modal__close:hover { background: var(--cds-layer-02); }
.cds-modal__close svg { fill: currentColor; }

.cds-modal__body { padding: var(--cds-spacing-05); }

.cds-modal__preview {
    border-top: 1px solid var(--cds-border-subtle);
    padding: var(--cds-spacing-05);
    background: var(--cds-layer-02);
}
.cds-modal__preview iframe {
    width: 100%;
    height: 350px;
    border: 1px solid var(--cds-border-subtle);
}

/* ═════════════════════════════════════════
   TOAST (Carbon Inline Notification)
   ═════════════════════════════════════════ */
.cds-toast {
    position: fixed;
    bottom: var(--cds-spacing-07);
    right: var(--cds-spacing-07);
    background: var(--cds-header-bg);
    color: var(--cds-text-on-color);
    padding: var(--cds-spacing-05);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.16px;
    max-width: 20rem;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    animation: cdsSlideUp .2s ease;
    border-left: 3px solid var(--cds-interactive);
}
@keyframes cdsSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════ */
.cds-footer {
    text-align: center;
    padding: var(--cds-spacing-07);
    font-size: 0.75rem;
    color: var(--cds-text-helper);
    letter-spacing: 0.32px;
    border-top: 1px solid var(--cds-border-subtle);
    margin-top: var(--cds-spacing-09);
}

/* ═════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════ */
@media (max-width: 672px) {
    .cds-header__label { display: none; }
    .cds-form-grid,
    .cds-form-grid--3col {
        grid-template-columns: 1fr;
    }
    .risk-card .cds-form-grid { grid-template-columns: 1fr; }
    .cds-progress__label { display: none; }
    .cds-progress__step { justify-content: center; padding: var(--cds-spacing-04); }
    .review-detail-grid { grid-template-columns: 1fr; }
    .risk-matrix-table { font-size: 0.625rem; }
    .risk-matrix-table th { font-size: 0.5625rem; }
    .cds-btn-group { flex-direction: column; width: 100%; }
    .cds-btn-group .cds-btn { width: 100%; }
    .cds-btn-row { flex-direction: column-reverse; gap: var(--cds-spacing-03); }
    .cds-btn-row .cds-btn { width: 100%; justify-content: space-between; }
}

@media (max-width: 480px) {
    .cds-content { padding: 0 var(--cds-spacing-04); margin-top: calc(3rem + var(--cds-spacing-05)); }
    .cds-heading-04 { font-size: 1.5rem; }
}

/* ─── LOGIN OVERLAY ─── */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--cds-background);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .3s ease, visibility .3s ease;
}
.login-overlay--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.login-card {
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle);
    padding: var(--cds-spacing-07);
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-icon {
    margin-bottom: var(--cds-spacing-05);
}
.login-title {
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--cds-text-primary);
    margin-bottom: var(--cds-spacing-02);
}
.login-subtitle {
    font-size: .875rem;
    color: var(--cds-text-helper);
    letter-spacing: .16px;
    margin-bottom: var(--cds-spacing-06);
}

/* ─── HEADER USER AREA ─── */
.cds-header__user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem;
    margin-left: auto;
    height: 100%;
    flex-shrink: 0;
}
.cds-header__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--cds-border-inverse);
}
.cds-header__user-name {
    font-size: .8125rem;
    color: var(--cds-text-on-color);
    letter-spacing: .16px;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 672px) {
    .cds-header__user-name { display: none; }
}

/* ═════════════════════════════════════════
   HEADER NAVIGATION TABS
   ═════════════════════════════════════════ */
.cds-header__nav {
    display: flex;
    gap: 0;
    margin-left: auto;
    height: 100%;
}
.cds-header__nav-item {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--cds-header-text);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.16px;
    padding: 0 1rem;
    height: 3rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity .15s, background .15s;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}
.cds-header__nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
}
.cds-header__nav-item--active {
    opacity: 1;
    border-bottom-color: var(--cds-interactive);
    font-weight: 600;
}

/* ═════════════════════════════════════════
   DASHBOARD
   ═════════════════════════════════════════ */
.dashboard-content {
    max-width: var(--cds-layout-max);
    margin: calc(3rem + var(--cds-spacing-07)) auto var(--cds-spacing-07);
    padding: 0 var(--cds-spacing-05);
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--cds-spacing-06);
    gap: var(--cds-spacing-05);
}
.dashboard-header .cds-heading-04 { margin-bottom: var(--cds-spacing-02); }

/* Dashboard Stats */
.dashboard-stats {
    display: flex;
    gap: 1px;
    margin-bottom: var(--cds-spacing-06);
    background: var(--cds-border-subtle);
}
.stat-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    flex: 1;
    text-align: center;
    min-width: 0;
}
.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: var(--cds-spacing-02);
    color: var(--cds-text-primary);
}
.stat-label {
    font-size: 0.75rem;
    color: var(--cds-text-helper);
    letter-spacing: 0.32px;
    text-transform: uppercase;
    font-weight: 500;
}
.stat-card--green  .stat-number { color: var(--cds-support-success); }
.stat-card--blue   .stat-number { color: var(--cds-interactive); }
.stat-card--yellow .stat-number { color: #b28600; }
.stat-card--red    .stat-number { color: var(--cds-support-error); }

/* Dashboard Table */
.dashboard-table { margin-bottom: var(--cds-spacing-07); }
.dashboard-table td { font-size: 0.875rem; }
.dashboard-table td.dashboard-actions {
    padding: 0;
    white-space: nowrap;
    text-align: right;
}
.td-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cds-btn--icon-only {
    padding: 0;
    min-height: 3rem;
    width: 2.5rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 0;
    color: var(--cds-icon-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cds-btn--icon-only:hover {
    background: #e0e0e0;
    color: var(--cds-interactive);
}
.cds-btn--icon-only:hover svg { fill: var(--cds-interactive); }
.cds-btn--icon-only:focus {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}
.cds-btn--icon-only svg { flex-shrink: 0; fill: currentColor; }
.cds-btn--danger-ghost {
    color: var(--cds-icon-secondary);
}
.cds-btn--danger-ghost:hover {
    background: var(--cds-tag-red-bg);
    color: var(--cds-support-error);
}
.cds-btn--danger-ghost:hover svg { fill: var(--cds-support-error); }

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--cds-spacing-09) var(--cds-spacing-05);
}
.empty-state svg {
    margin-bottom: var(--cds-spacing-05);
}
.empty-state .cds-heading-03 {
    margin-bottom: var(--cds-spacing-03);
}

/* ═════════════════════════════════════════
   PLACES AUTOCOMPLETE DROPDOWN (REST API)
   ═════════════════════════════════════════ */
.places-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle);
    border-top: none;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    display: none;
}
.places-dropdown.visible {
    display: block;
}
.places-dropdown__item {
    display: flex;
    align-items: flex-start;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-03) var(--cds-spacing-05);
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--cds-border-subtle);
}
.places-dropdown__item:last-child {
    border-bottom: none;
}
.places-dropdown__item:hover,
.places-dropdown__item--active {
    background: var(--cds-layer-hover);
}
.places-dropdown__item svg {
    margin-top: 2px;
}
.places-dropdown__main {
    display: block;
    font-weight: 500;
    color: var(--cds-text-primary);
}
.places-dropdown__secondary {
    display: block;
    font-size: .75rem;
    color: var(--cds-text-helper);
    letter-spacing: .32px;
}

/* ═════════════════════════════════════════
   DASHBOARD RESPONSIVE
   ═════════════════════════════════════════ */
@media (max-width: 672px) {
    .cds-header__nav-item { font-size: 0.75rem; padding: 0 0.75rem; }
    .dashboard-header {
        flex-direction: column;
        gap: var(--cds-spacing-05);
    }
    .dashboard-stats {
        flex-wrap: wrap;
    }
    .stat-card {
        min-width: calc(50% - 1px);
    }
    .dashboard-actions {
        flex-wrap: wrap;
    }
    .td-truncate { max-width: 120px; }
}

/* ═════════════════════════════════════════
   PLAN USAGE BAR
   ═════════════════════════════════════════ */
.usage-bar-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 100px;
}
.usage-bar {
    flex: 1;
    height: 6px;
    background: var(--cds-layer-accent-01, #e0e0e0);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.usage-bar__fill {
    height: 100%;
    border-radius: 3px;
    transition: width .3s ease;
}
.usage-bar__label {
    font-size: .75rem;
    color: var(--cds-text-helper);
    white-space: nowrap;
}

/* Plan limit banner shown on dashboard */
.plan-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 4px;
    font-size: .875rem;
    margin-bottom: 1rem;
}
.plan-banner--warning {
    background: #fdf0d5;
    color: #5e4100;
    border-left: 3px solid var(--cds-support-warning, #f1c21b);
}
.plan-banner--error {
    background: #fff1f1;
    color: #750e13;
    border-left: 3px solid var(--cds-support-error, #da1e28);
}
.plan-banner svg { flex-shrink: 0; }

/* ═════════════════════════════════════════
   AI ENHANCE LINK
   ═════════════════════════════════════════ */
.ai-enhance-link {
    display: inline-block;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--cds-text-helper, #6f6f6f);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s;
}
.ai-enhance-link:hover {
    color: var(--cds-link-primary, #0f62fe);
}
.ai-enhance-link[disabled] {
    pointer-events: none;
    opacity: .5;
}
.ai-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--cds-border-subtle-01, #e0e0e0);
    border-top-color: var(--cds-text-helper, #6f6f6f);
    border-radius: 50%;
    animation: ai-spin .6s linear infinite;
    vertical-align: middle;
    margin-right: .25rem;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════
   METHOD STATEMENT BUILDER
   ═══════════════════════════════════════════════ */

.ms-steps {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ms-step {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: var(--cds-layer);
    border: 1px solid var(--cds-border-subtle);
    transition: border-color .15s, opacity .15s, box-shadow .15s;
    cursor: grab;
}

.ms-step:hover {
    border-color: var(--cds-border-strong);
}

.ms-step--dragging {
    opacity: .4;
    cursor: grabbing;
}

.ms-step--drag-over {
    border-color: var(--cds-border-interactive, #0f62fe);
    box-shadow: inset 0 -2px 0 0 var(--cds-border-interactive, #0f62fe);
}

.ms-step__drag-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: grab;
    padding: .125rem;
}

.ms-step__number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cds-interactive, #0f62fe);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 50%;
}

.ms-step__input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: .375rem 0 !important;
    font-size: .875rem;
}

.ms-step__input:focus {
    outline: none;
    box-shadow: none !important;
    border-bottom: 1px solid var(--cds-border-interactive) !important;
}

.ms-step__actions {
    display: flex;
    gap: .125rem;
    flex-shrink: 0;
    opacity: .4;
    transition: opacity .15s;
}

.ms-step:hover .ms-step__actions {
    opacity: 1;
}

/* ─── Library Editor (Settings / Tenant Admin) ─── */
.lib-category { border: 1px solid var(--cds-border-subtle); margin-bottom: -1px; }
.lib-category__header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; cursor: pointer; transition: background .15s; }
.lib-category__header:hover { background: var(--cds-layer-hover); }
.lib-category__chevron { flex-shrink: 0; display: flex; }
.lib-category__name { font-size: .9375rem; }

.lib-hazards { padding: 0 1rem 1rem 2.5rem; }
.lib-hazard { padding: .5rem 0; border-bottom: 1px solid var(--cds-border-subtle); }
.lib-hazard:last-of-type { border-bottom: none; }
.lib-hazard__header { display: flex; align-items: center; gap: .375rem; }
.lib-hazard__name { font-size: .875rem; flex: 1; }

.lib-controls { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .375rem; }
.lib-control-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--cds-layer); padding: .125rem .5rem; border-radius: 624rem; font-size: .75rem; color: var(--cds-text-secondary); border: 1px solid var(--cds-border-subtle); }
.lib-control-remove { background: none; border: none; color: var(--cds-text-helper); cursor: pointer; font-size: .75rem; padding: 0 .125rem; line-height: 1; }
.lib-control-remove:hover { color: var(--cds-support-error); }
.lib-control-add { background: none; border: 1px dashed var(--cds-border-subtle); border-radius: 624rem; font-size: .75rem; padding: .125rem .5rem; color: var(--cds-border-interactive); cursor: pointer; font-family: inherit; }
.lib-control-add:hover { border-color: var(--cds-border-interactive); background: #edf5ff; }

.lib-template { border: 1px solid var(--cds-border-subtle); padding: 1rem; margin-bottom: .5rem; }
.lib-template__header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.lib-template__steps { font-size: .8125rem; padding-left: 1.25rem; color: var(--cds-text-secondary); }
.lib-template__steps li { margin-bottom: .125rem; }

/* ─── UPLOAD / IMPORT MODAL ─── */
.cds-modal--sm .cds-modal__body { max-height: 70vh; }

.upload-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--cds-border-subtle);
    border-radius: .5rem;
    background: var(--cds-layer);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
}
.upload-dropzone:hover,
.upload-dropzone--dragover {
    border-color: var(--cds-border-interactive);
    background: #edf5ff;
}
.upload-dropzone--dragover {
    border-style: solid;
}

.upload-file-info {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--cds-border-subtle);
    border-radius: .25rem;
    background: var(--cds-layer);
    margin-top: .75rem;
}

.upload-progress {
    padding: 1rem 0;
}
.upload-progress__steps {
    display: flex; flex-direction: column; gap: .75rem;
}
.upload-progress__step {
    display: flex; align-items: center; gap: .75rem;
    font-size: .875rem;
    color: var(--cds-text-helper);
    opacity: .5;
    transition: opacity .3s, color .3s;
}
.upload-progress__step--active {
    opacity: 1;
    color: var(--cds-text-primary);
}
.upload-progress__step--active .upload-progress__icon {
    color: var(--cds-interactive);
}
.upload-progress__step--done {
    opacity: 1;
    color: var(--cds-support-success);
}
.upload-progress__step--done .upload-progress__icon {
    color: var(--cds-support-success);
}
.upload-progress__icon {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: var(--cds-layer);
    flex-shrink: 0;
    transition: color .3s;
}
.upload-progress__bar {
    margin-top: 1.25rem;
    height: .25rem;
    background: var(--cds-border-subtle);
    border-radius: .125rem;
    overflow: hidden;
}
.upload-progress__fill {
    height: 100%;
    background: var(--cds-interactive);
    border-radius: .125rem;
    transition: width .5s ease;
}

.upload-complete,
.upload-error {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 1.5rem 0;
}
.upload-complete__actions {
    display: flex; gap: .5rem;
}

/* AI-suggested hazard badge */
.cds-tag--ai {
    background: #e8daff;
    color: #6929c4;
    font-size: .6875rem;
    border: none;
    padding: .125rem .5rem;
    border-radius: 624rem;
    font-weight: 500;
}

/* Add to Library button on imported hazards */
.add-to-lib-btn {
    margin-left: auto;
    font-size: .6875rem;
    color: var(--cds-link-primary, #0f62fe);
    padding: .125rem .5rem;
    white-space: nowrap;
    min-height: unset;
    height: auto;
}
.add-to-lib-btn:hover { color: var(--cds-link-primary-hover, #0043ce); }
.add-to-lib-btn:disabled { color: var(--cds-text-disabled, #a8a8a8); cursor: default; }
.add-to-lib-btn.cds-btn--success { color: #198038; }

/* Fuzzy match review UI */
.hazard-item--review {
    flex-wrap: wrap;
    border: 1px solid #e8daff;
    border-radius: 4px;
    padding: .5rem;
    background: #f9f6ff;
}
.fuzzy-match-review {
    display: flex;
    align-items: center;
    gap: .375rem;
    width: 100%;
    margin-top: .25rem;
    padding-top: .375rem;
    border-top: 1px solid #e0d6f3;
    font-size: .75rem;
}
.fuzzy-match-label {
    color: var(--cds-text-helper, #6f6f6f);
    white-space: nowrap;
}
.fuzzy-match-name {
    color: #6929c4;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fuzzy-accept-btn {
    font-size: .6875rem;
    color: #198038;
    padding: .125rem .5rem;
    min-height: unset;
    height: auto;
    white-space: nowrap;
}
.fuzzy-accept-btn:hover { color: #0e6027; }
.fuzzy-reject-btn {
    font-size: .6875rem;
    color: var(--cds-text-secondary, #525252);
    padding: .125rem .5rem;
    min-height: unset;
    height: auto;
    white-space: nowrap;
}
.fuzzy-reject-btn:hover { color: var(--cds-text-primary, #161616); }

/* Auto-matched from indicator */
.fuzzy-matched-tag {
    display: inline-block;
    font-size: .625rem;
    color: #198038;
    background: #defbe6;
    padding: .0625rem .375rem;
    border-radius: 624rem;
    margin-left: .375rem;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    letter-spacing: .16px;
}

/* ─── Match confidence block (library-matched hazards) ─── */
.match-confidence-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    width: 100%;
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: 1px solid var(--cds-border-subtle, #e0e0e0);
    font-size: .75rem;
}
.match-confidence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    font-weight: 600;
    padding: .125rem .375rem;
    border-radius: 624rem;
    white-space: nowrap;
    letter-spacing: .16px;
}
.match-confidence--high { background: #defbe6; color: #0e6027; }
.match-confidence--med  { background: #d0e2ff; color: #0043ce; }
.match-confidence--low  { background: #fff1e6; color: #8a3800; }

.match-preview-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .6875rem;
    color: var(--cds-link-primary, #0f62fe);
    padding: 0;
    text-align: left;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-preview-toggle:hover { text-decoration: underline; }

.match-preview-detail {
    display: none;
    width: 100%;
    background: var(--cds-layer-02, #f4f4f4);
    border-radius: 4px;
    padding: .5rem .625rem;
    margin-top: .25rem;
    font-size: .6875rem;
    color: var(--cds-text-secondary, #525252);
}
.match-preview-detail.match-preview--open { display: block; }

.match-preview-row { margin-bottom: .25rem; }
.match-preview-row strong { color: var(--cds-text-primary, #161616); }

.match-preview-controls {
    margin: .25rem 0 0 1rem;
    padding: 0;
    list-style: disc;
}
.match-preview-controls li {
    margin-bottom: .125rem;
    line-height: 1.4;
}

/* Controls preview on imported hazards */
.imported-controls-preview {
    width: 100%;
    margin-top: .25rem;
    font-size: .6875rem;
}


/* ═══════════════════════════════════════════════════════════
   LANDING PAGE — Sales & Marketing
   ═══════════════════════════════════════════════════════════ */

.landing {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--cds-text-primary);
    background: #ffffff;
    overflow-x: hidden;
}

/* ─── Nav ─── */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cds-border-subtle);
}
.landing-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.5rem;
}
.landing-nav__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    letter-spacing: -.02em;
    color: var(--cds-text-primary);
}
.landing-nav__brand strong { font-weight: 600; }
.landing-nav__actions { display: flex; gap: .5rem; }

/* ─── Buttons ─── */
.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .16px;
    cursor: pointer;
    padding: .625rem 1.25rem;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.landing-btn--primary {
    background: var(--cds-interactive);
    color: #fff;
}
.landing-btn--primary:hover { background: var(--cds-interactive-hover); }
.landing-btn--ghost {
    background: transparent;
    color: var(--cds-interactive);
}
.landing-btn--ghost:hover { background: #edf5ff; }
.landing-btn--lg {
    padding: .875rem 2rem;
    font-size: 1rem;
}
.landing-btn--full { width: 100%; }

/* ─── Hero ─── */
.landing-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.landing-hero__tag {
    display: inline-block;
    background: #edf5ff;
    color: var(--cds-interactive);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .32px;
    text-transform: uppercase;
    padding: .25rem .75rem;
    margin-bottom: 1rem;
}
.landing-hero__title {
    font-size: 3.25rem;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0 0 1.5rem 0;
}
.landing-hero__accent {
    font-weight: 600;
    color: var(--cds-interactive);
}
.landing-hero__body {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--cds-text-secondary);
    margin: 0 0 2rem 0;
    max-width: 540px;
}
.landing-hero__cta {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.landing-hero__proof {
    font-size: .8125rem;
    color: var(--cds-text-helper);
    letter-spacing: .16px;
}

/* ─── Mockup ─── */
.landing-mockup {
    background: #161616;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.1);
    font-size: .8125rem;
}
.landing-mockup__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: #262626;
}
.landing-mockup__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.landing-mockup__title {
    color: #a8a8a8;
    margin-left: .5rem;
    font-size: .75rem;
    letter-spacing: .16px;
}
.landing-mockup__body {
    padding: .5rem;
}
.landing-mockup__row {
    display: grid;
    grid-template-columns: 2fr .75fr 2fr .75fr;
    gap: .5rem;
    padding: .5rem .75rem;
    color: #e0e0e0;
    border-bottom: 1px solid #333;
    align-items: center;
}
.landing-mockup__row:last-child { border-bottom: none; }
.landing-mockup__row--header {
    color: #6f6f6f;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .6875rem;
    letter-spacing: .32px;
    border-bottom-color: #444;
}
.landing-mockup__row--ai {
    background: rgba(15,98,254,.08);
    border-radius: 4px;
    border-bottom: none;
    color: #78a9ff;
}
.landing-risk {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 624rem;
    font-size: .6875rem;
    font-weight: 600;
    text-align: center;
}
.landing-risk--high { background: #fff1f1; color: #a2191f; }
.landing-risk--med  { background: #fcf4d6; color: #684e00; }
.landing-risk--low  { background: #defbe6; color: #0e6027; }

/* ─── Logo Bar ─── */
.landing-logos {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-top: 1px solid var(--cds-border-subtle);
    border-bottom: 1px solid var(--cds-border-subtle);
    background: var(--cds-layer-02);
}
.landing-logos__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .32px;
    color: var(--cds-text-helper);
    margin: 0 0 .75rem 0;
    font-weight: 600;
}
.landing-logos__row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--cds-text-secondary);
}

/* ─── Section headers ─── */
.landing-section__title {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -.02em;
    text-align: center;
    margin: 0 0 .5rem 0;
}
.landing-section__subtitle {
    text-align: center;
    color: var(--cds-text-secondary);
    font-size: 1.0625rem;
    margin: 0 0 3rem 0;
}

/* ─── Features ─── */
.landing-features {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
}
.landing-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.landing-feature {
    padding: 2rem;
    border: 1px solid var(--cds-border-subtle);
    transition: box-shadow .2s;
}
.landing-feature:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.landing-feature__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.landing-feature__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 .5rem 0;
}
.landing-feature__body {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--cds-text-secondary);
    margin: 0;
}

/* ─── How It Works ─── */
.landing-steps {
    background: #161616;
    color: #f4f4f4;
    padding: 5rem 1.5rem;
}
.landing-steps .landing-section__title { color: #f4f4f4; }
.landing-steps__row {
    max-width: 1000px;
    margin: 3rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.landing-step { text-align: center; }
.landing-step__num {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cds-interactive);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.landing-step h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 .5rem 0;
}
.landing-step p {
    font-size: .9375rem;
    line-height: 1.5;
    color: #a8a8a8;
    margin: 0;
}

/* ─── Pricing ─── */
.landing-pricing {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
}
.landing-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.landing-price-card {
    border: 1px solid var(--cds-border-subtle);
    padding: 2rem;
    position: relative;
}
.landing-price-card--featured {
    border-color: var(--cds-interactive);
    border-width: 2px;
    box-shadow: 0 8px 32px rgba(15,98,254,.1);
}
.landing-price-card__badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: var(--cds-interactive);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .32px;
    text-transform: uppercase;
    padding: .25rem .75rem;
}
.landing-price-card__header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 .5rem 0;
}
.landing-price-card__amount {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -.02em;
    margin-bottom: 1.5rem;
}
.landing-price-card__amount span {
    font-size: .9375rem;
    color: var(--cds-text-helper);
}
.landing-price-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}
.landing-price-card__features li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem 0;
    font-size: .9375rem;
    line-height: 1.4;
}
.landing-price-card__disabled {
    color: var(--cds-text-placeholder);
}

/* ─── Final CTA ─── */
.landing-cta {
    text-align: center;
    padding: 5rem 1.5rem;
    background: #edf5ff;
}
.landing-cta h2 {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -.02em;
    margin: 0 0 .75rem 0;
}
.landing-cta p {
    font-size: 1.0625rem;
    color: var(--cds-text-secondary);
    margin: 0 0 2rem 0;
}

/* ─── Footer ─── */
.landing-footer {
    border-top: 1px solid var(--cds-border-subtle);
    padding: 2rem 1.5rem;
}
.landing-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.landing-footer__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--cds-text-secondary);
}
.landing-footer__copy {
    font-size: .8125rem;
    color: var(--cds-text-helper);
    margin: 0;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .landing-hero {
        grid-template-columns: 1fr;
        padding: 3rem 1rem 2rem;
    }
    .landing-hero__title { font-size: 2.25rem; }
    .landing-hero__cta { flex-direction: column; }
    .landing-hero__visual { order: -1; }
    .landing-features__grid { grid-template-columns: 1fr; }
    .landing-steps__row { grid-template-columns: 1fr; gap: 2rem; }
    .landing-pricing__grid { grid-template-columns: 1fr; }
    .landing-footer__inner { flex-direction: column; gap: .75rem; text-align: center; }
    .landing-mockup__row { grid-template-columns: 2fr 1fr; }
    .landing-mockup__row span:nth-child(3),
    .landing-mockup__row span:nth-child(4) { display: none; }
    .landing-mockup__row--header span:nth-child(3),
    .landing-mockup__row--header span:nth-child(4) { display: none; }
}

/* ─── Font Autocomplete Dropdown ─── */
.font-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--cds-layer-01, #fff);
    border: 1px solid var(--cds-border-subtle, #e0e0e0);
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 9000;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.font-autocomplete-list .font-ac-item {
    padding: .5rem .75rem;
    font-size: .875rem;
    cursor: pointer;
    border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
    transition: background .1s;
}
.font-autocomplete-list .font-ac-item:last-child { border-bottom: none; }
.font-autocomplete-list .font-ac-item:hover,
.font-autocomplete-list .font-ac-item.active {
    background: var(--cds-layer-02, #f4f4f4);
}
.font-autocomplete-list .font-ac-item .font-ac-preview {
    font-size: .75rem;
    color: var(--cds-text-helper, #6f6f6f);
    display: block;
    margin-top: .125rem;
}