/* ===========================
   TYPOGRAPHY
   =========================== */


/* Major titles */

.ui-display-title {

    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-display);

    font-weight: var(--weight-bold);

    line-height: var(--line-tight);

    letter-spacing: var(--tracking-title);

}


.ui-page-title {

    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-page-title);

    font-weight: var(--weight-bold);

    line-height: var(--line-title);

    letter-spacing: var(--tracking-title);

    overflow-wrap: anywhere;

}


.ui-workflow-title {

    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-workflow-title);

    font-weight: var(--weight-bold);

    line-height: var(--line-tight);

    letter-spacing: var(--tracking-title);

}


.ui-section-title {

    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-section-title);

    font-weight: var(--weight-bold);

    line-height: var(--line-tight);

    letter-spacing: var(--tracking-title);

}


.ui-content-title {

    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-content-title);

    font-weight: var(--weight-bold);

    line-height: var(--line-title);

    letter-spacing: var(--tracking-content-title);

    overflow-wrap: anywhere;

}


.ui-panel-title {

    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-panel-title);

    font-weight: var(--weight-bold);

    line-height: 1.25;

    letter-spacing: var(--tracking-content-title);

}


.ui-card-title {

    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-card-title);

    font-weight: var(--weight-bold);

    line-height: 1.3;

    letter-spacing: -.015em;

}


/* Body copy */

.ui-body-lg {

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-body-lg);

    font-weight: var(--weight-regular);

    line-height: var(--line-body);

}


.ui-body {

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-body);

    font-weight: var(--weight-regular);

    line-height: var(--line-body);

}


.ui-body-sm {

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-body-sm);

    font-weight: var(--weight-regular);

    line-height: var(--line-compact);

}


/* Explanatory copy */

.ui-helper {

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-body-lg);

    font-weight: var(--weight-regular);

    line-height: var(--line-body);

}


.ui-helper-sm {

    margin: 0;

    color: var(--text-muted);

    font-size: var(--font-label);

    font-weight: var(--weight-regular);

    line-height: 1.5;

}


/* Labels */

.ui-section-label {

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-label);

    font-weight: var(--weight-bold);

    line-height: 1;

    letter-spacing: var(--tracking-label);

    text-transform: uppercase;

}


.ui-subsection-label {

    margin: 0;

    color: var(--text-muted);

    font-size: var(--font-meta);

    font-weight: var(--weight-bold);

    line-height: 1;

    letter-spacing: var(--tracking-subsection);

    text-transform: uppercase;

}


.ui-field-label {

    display: block;

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-body-sm);

    font-weight: var(--weight-semibold);

    line-height: var(--line-compact);

}


/* Small supporting text */

.ui-caption {

    margin: 0;

    color: var(--text-muted);

    font-size: var(--font-caption);

    font-weight: var(--weight-regular);

    line-height: var(--line-compact);

}

.ui-caption-strong {

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-caption);

    font-weight: var(--weight-semibold);

    line-height: var(--line-compact);

}


.ui-detail-label {

    margin: 0;

    color: var(--text-muted);

    font-size: var(--font-label);

    font-weight: var(--weight-regular);

    line-height: var(--line-compact);

}


.ui-meta {

    margin: 0;

    color: var(--text-muted);

    font-size: var(--font-meta);

    font-weight: var(--weight-regular);

    line-height: var(--line-compact);

}


.ui-empty {

    margin: 0;

    color: var(--text-muted);

    font-size: var(--font-body-sm);

    font-weight: var(--weight-regular);

    line-height: var(--line-body);

}

/* ===========================
   WORKFLOW
   =========================== */

.workflow-overlay {

    position: fixed;

    inset: 0;

    z-index: 120;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 32px;

    background:
        var(--modal-overlay);

    animation:
        workflowOverlayEnter 180ms ease both;

}


.workflow-workspace {

    display: grid;

    grid-template-columns:
        minmax(0, 680px);

    gap: 0;

    width: min(100%, 1060px);

    align-items: start;

    justify-content: center;

    transition:
        grid-template-columns .42s cubic-bezier(.22, .8, .3, 1),
        gap .42s cubic-bezier(.22, .8, .3, 1);

}


.workflow-workspace.has-sidecar {

    grid-template-columns:
        340px minmax(0, 680px);

    gap: 32px;

}


.workflow-modal {

    width: 100%;

    max-width: 680px;

    max-height:
        calc(100vh - 64px);

    overflow-y: auto;

    padding:
        36px 40px 40px;

    background:
        linear-gradient(145deg,
            var(--accent-surface-medium),
            var(--accent-surface-faint) 46%,
            transparent 78%),
        var(--bg-card);

    border: none;

    border-radius: 22px;

    box-shadow:
        var(--shadow-modal);

    animation:
        workflowModalEnter 260ms cubic-bezier(.22, .8, .3, 1) both;

}


.workflow-progress-header {

    margin-bottom: 34px;

}


.workflow-step-number {

    margin-bottom: 12px;

}


.workflow-progress-track {

    width: 100%;

    height: 5px;

    overflow: hidden;

    background:
        var(--surface-subtle);

    border-radius: 999px;

}


.workflow-progress-fill {

    height: 100%;

    background:
        var(--accent);

    border-radius: inherit;

    transition:
        width .32s cubic-bezier(.22, .8, .3, 1);

}


.workflow-step-content {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .20s ease,
        transform .20s cubic-bezier(.22, .8, .3, 1);

}


.workflow-step-content.is-exiting {

    opacity: 0;

    transform:
        translateY(-6px);

}


.workflow-step-content.is-entering {

    opacity: 0;

    transform:
        translateY(6px);

}


.workflow-header {

    margin-bottom: 30px;

}


.workflow-eyebrow {

    margin-bottom: 9px;

    color:
        var(--accent);

}


.workflow-title {

    margin-bottom: 10px;

}


.workflow-navigation {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-top: 32px;

    padding-top: 24px;

    border-top:
        1px solid var(--divider-soft);

}


@keyframes workflowOverlayEnter {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


@keyframes workflowModalEnter {

    from {

        opacity: 0;

        transform:
            translateY(12px) scale(.985);

    }

    to {

        opacity: 1;

        transform:
            translateY(0) scale(1);

    }

}


@media (max-width: 1000px) {

    .workflow-workspace,
    .workflow-workspace.has-sidecar {

        grid-template-columns:
            minmax(0, 680px);

        gap: 0;

    }

}

/* ===========================
   BUTTONS
   =========================== */

.ui-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin: 0;

    background: transparent;

    border: none;

    color: var(--text-primary);

    font-family: inherit;

    font-weight: var(--weight-semibold);

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease,
        opacity .2s ease;

}


.ui-button-lg {

    min-height: var(--button-height-lg);

    padding: var(--button-padding-lg);

    border-radius: var(--button-radius-lg);

    font-size: var(--button-font-lg);

}


.ui-button-md {

    min-height: var(--button-height-md);

    padding: var(--button-padding-md);

    border-radius: var(--button-radius);

    font-size: var(--button-font-md);

}


.ui-button-sm {

    min-height: var(--button-height-sm);

    padding: var(--button-padding-sm);

    border-radius: var(--button-radius);

    font-size: var(--button-font-sm);

}


.ui-button-pill {

    border-radius: var(--button-radius-pill);

}


.ui-button-block {

    width: 100%;

}


.ui-button-primary {

    background:
        linear-gradient(135deg,
            var(--action-primary-start),
            var(--action-primary-end));

    border: none;

    color: var(--text-bright);

    font-weight: var(--weight-bold);

    box-shadow: var(--shadow-sm);

}


.ui-button-primary:hover:not(:disabled) {

    transform: translateY(-1px);

    filter: brightness(1.05);

    box-shadow: var(--shadow-button-hover);

}


.ui-button-secondary {

    background: var(--surface-subtle);

    border: none;

    color: var(--text-bright);

    box-shadow: none;

}


.ui-button-secondary:hover:not(:disabled) {

    background: rgba(255, 255, 255, .085);

    color: var(--text-primary);

    transform: translateY(-1px);

    box-shadow: var(--shadow-button-hover);

}


.ui-button-secondary:active:not(:disabled) {

    background: rgba(255, 255, 255, .065);

    transform: translateY(0);

    box-shadow: none;

}


.ui-button-danger {

    background: var(--danger);

    border: none;

    color: var(--text-primary);

    font-weight: var(--weight-semibold);

}


.ui-button-danger:hover:not(:disabled) {

    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow: var(--shadow-button-hover);

}


.ui-button-danger:active:not(:disabled) {

    transform: translateY(0);

    filter: brightness(1.04);

    box-shadow: none;

}


.ui-button-text,
.option-analysis-add-button,
.decision-add-note-button {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    min-height: 0;

    padding: 0;

    background: transparent;

    border: none;

    border-radius: 0;

    color: var(--accent);

    font-family: inherit;

    font-weight: var(--weight-regular);

    line-height: 1;

    box-shadow: none;

    cursor: pointer;

    transition:
        color .2s ease,
        opacity .2s ease;

}


.ui-button-text:hover:not(:disabled),
.option-analysis-add-button:hover:not(:disabled),
.decision-add-note-button:hover:not(:disabled) {

    color: var(--accent-hover);

}


.ui-button:disabled {

    cursor: not-allowed;

    opacity: .32;

    transform: none;

    box-shadow: none;

}

/* PRIMARY PAGE HEADER — Shared heading pattern for top-level app destinations. */
.app-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin-bottom: 28px;
}

.app-page-header-copy {
    min-width: 0;
}

.app-page-header .ui-section-label {
    margin-bottom: 7px;
}

.app-page-title {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.app-page-description {
    max-width: 760px;
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-body-sm);
    line-height: 1.55;
}

/* SECTION NAVIGATION — Shared left navigation for structured app pages. */
.app-section-navigation {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
    padding: 14px;
    background:
        linear-gradient(90deg,
            var(--accent-surface-faint) 0%,
            transparent 30%,
            transparent 70%,
            var(--accent-surface-faint) 100%),
        var(--bg-card);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.app-section-navigation-heading {
    display: grid;
    gap: 7px;
    padding: 2px 2px 12px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .045);
}

.app-section-navigation-list {
    --section-indicator-start: #5B6678;
    --section-indicator-end: #39465A;

    position: relative;
    display: grid;
    gap: 4px;
    padding: 4px;
    background: var(--bg-input);
    border-radius: 23px;
    box-shadow: var(--shadow-sm);
    isolation: isolate;
}

.app-section-navigation-indicator {
    position: absolute;
    top: 0;
    right: 4px;
    left: 4px;
    z-index: 0;
    height: 0;
    background: linear-gradient(135deg, var(--section-indicator-start), var(--section-indicator-end));
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    transition:
        height .28s cubic-bezier(.22, .8, .3, 1),
        transform .28s cubic-bezier(.22, .8, .3, 1);
}

.app-section-navigation-item {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 13px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.app-section-navigation-item:not(.is-active):hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.app-section-navigation-item.is-active {
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
}

/* SUBSECTION INTRO — Compact title and context shared by structured app pages. */
.app-subsection-intro {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}

.app-subsection-intro .ui-panel-title {
    flex: 0 0 auto;
    margin: 0;
    color: var(--text-bright);
    font-size: var(--font-label);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.app-subsection-intro .ui-helper-sm {
    min-width: 0;
    margin: 0;
}

@media (max-width: 700px) {
    .app-subsection-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .app-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }
}

.ui-button.hidden,
.ui-icon-button.hidden {
    display: none;
}

.ui-button:focus-visible {

    outline: none;

    box-shadow:
        var(--control-focus-ring),
        var(--shadow-sm);

}

/* ===========================
   FORM CONTROLS
   =========================== */

.ui-input,
.ui-textarea,
.ui-select {

    width: 100%;

    min-width: 0;

    margin: 0;

    background: var(--control-bg);

    border: none;

    color: var(--text-primary);

    font-family: inherit;

    font-size: var(--font-body);

    font-weight: var(--weight-regular);

    outline: none;

    box-sizing: border-box;

    box-shadow: var(--control-shadow);

    transition:
        background-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}

.ui-input,
.ui-select {

    min-height: var(--control-height-md);

    padding: var(--control-padding-md);

    border-radius: var(--control-radius-md);

}

.ui-textarea {

    min-height: 130px;

    padding: var(--control-padding-md);

    border-radius: var(--control-radius-md);

    line-height: var(--line-body);

    overflow-y: hidden;

    resize: none;

}

.ui-input-lg,
.ui-select-lg {

    min-height: var(--control-height-lg);

    padding: var(--control-padding-lg);

    border-radius: var(--control-radius-lg);

    font-size: var(--font-body-lg);

}

.ui-input-sm,
.ui-select-sm {

    min-height: var(--control-height-sm);

    padding: var(--control-padding-sm);

    border-radius: var(--control-radius-sm);

    font-size: var(--font-caption);

}

.ui-input:hover:not(:disabled),
.ui-textarea:hover:not(:disabled),
.ui-select:hover:not(:disabled) {

    background-color: var(--control-bg-hover);

    box-shadow: var(--control-shadow-hover);

}

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {

    background-color: var(--control-bg-focus);

    box-shadow: var(--control-shadow-focus);

}

.ui-input::placeholder,
.ui-textarea::placeholder {

    color: var(--control-placeholder);

}

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled {

    cursor: not-allowed;

    opacity: .45;

}

.ui-character-field {
    min-width: 0;
    width: 100%;
}

.ui-character-field > .ui-input,
.ui-character-field > .ui-textarea {
    width: 100%;
}

.ui-character-counter {
    display: none;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: var(--font-meta);
    font-weight: var(--weight-medium);
    line-height: 1;
    text-align: right;
}

.ui-character-counter.is-visible {
    display: block;
}

.ui-character-counter.is-near-limit {
    color: var(--warning);
}

.ui-character-counter.is-at-limit,
.ui-character-counter.is-over-limit {
    color: var(--danger);
    font-weight: var(--weight-semibold);
}

.ui-collection-limit-note {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: var(--font-meta);
    line-height: 1.35;
}

.ui-collection-limit-note.is-at-limit {
    color: var(--warning);
}

.ui-select {

    appearance: none;

    padding-right: 42px;

    background-image:
        linear-gradient(45deg,
            transparent 50%,
            var(--text-muted) 50%),
        linear-gradient(135deg,
            var(--text-muted) 50%,
            transparent 50%);

    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);

    background-size: 5px 5px, 5px 5px;

    background-repeat: no-repeat;

    cursor: pointer;

}

.ui-select option {

    background: var(--bg-card);

    color: var(--text-primary);

}

/* Shared dropdown menus: compact by default, with size inherited from the control. */
.ui-dropdown {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ui-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.ui-dropdown-trigger.ui-select {
    display: flex;
    align-items: center;
    gap: 12px;
    background-image: none;
    text-align: left;
}

.ui-dropdown-value,
.ui-dropdown-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-dropdown-value {
    flex: 1;
}

.ui-dropdown-chevron {
    display: inline-flex;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: color .18s ease, transform .18s ease;
}

.ui-dropdown-chevron::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
}

.ui-dropdown.is-open .ui-dropdown-chevron,
.category-combobox[aria-expanded="true"] .ui-dropdown-chevron {
    color: var(--text-secondary);
    transform: rotate(180deg);
}

.ui-dropdown-menu {
    position: fixed;
    z-index: 1100;
    max-height: 260px;
    padding: 6px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border-radius: 11px;
    box-shadow: var(--shadow-menu);
}

.ui-dropdown-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-caption);
    font-weight: var(--weight-medium);
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.ui-dropdown-option:hover,
.ui-dropdown-option.is-highlighted {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.ui-dropdown-option[aria-selected="true"] {
    background: var(--surface-hover-subtle);
    color: var(--text-primary);
}

.ui-dropdown-option:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.ui-dropdown-check {
    margin-left: auto;
    color: var(--accent-hover);
    font-size: 11px;
    font-weight: var(--weight-bold);
    opacity: 0;
}

.ui-dropdown-option[aria-selected="true"] .ui-dropdown-check {
    opacity: 1;
}

.ui-dropdown-menu.is-compact {
    padding: 5px;
    border-radius: 10px;
}

.ui-dropdown-menu.is-compact .ui-dropdown-option {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
}

.ui-dropdown-menu.is-roomy .ui-dropdown-option {
    min-height: 42px;
    padding: 10px 12px;
    font-size: var(--font-body);
}

/* Shared number control: replaces browser-specific spinner arrows. */
.ui-number-control {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ui-number-control .ui-input[type="number"] {
    padding-right: 30px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ui-number-control .ui-input[type="number"]::-webkit-inner-spin-button,
.ui-number-control .ui-input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.ui-number-steppers {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    width: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, .035);
    border-radius: 6px;
}

.ui-number-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.ui-number-stepper:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.ui-number-stepper::before {
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(45deg) translate(1px, 1px);
}

.ui-number-stepper.is-decrement::before {
    transform: rotate(225deg) translate(1px, 1px);
}

.ui-control-elevated {

    box-shadow: var(--control-shadow);

}

.ui-control-elevated:focus {

    box-shadow: var(--control-shadow-focus);

}

.ui-control-card {

    background-color: rgba(17, 24, 39, .32);

}

.ui-control-edit {

    background-color: var(--control-bg);

    box-shadow: var(--control-shadow);

}

.ui-control-edit:focus {

    background-color: var(--control-bg-focus);

    box-shadow: var(--control-shadow-focus);

}

.ui-control-shell {

    background: var(--control-bg);

    border: none;

    box-shadow: var(--control-shadow);

    transition:
        background-color .2s ease,
        box-shadow .2s ease;

}

.ui-control-shell:hover {

    background: var(--control-bg-hover);

    box-shadow: var(--control-shadow-hover);

}

.ui-control-shell:focus-within {

    background: var(--control-bg-focus);

    box-shadow: var(--control-shadow-focus);

}

.ui-date-input {

    color-scheme: dark;

    cursor: pointer;

}

/* ===========================
   PILLS
   =========================== */

.ui-pill {

    display: inline-flex;

    align-items: center;

    gap: var(--pill-gap);

    width: fit-content;

    min-height: var(--pill-height);

    padding: var(--pill-padding);

    background: var(--bg-input);

    border: 1px solid transparent;

    border-radius: var(--pill-radius);

    color: var(--text-secondary);

    font-size: var(--pill-font-size);

    font-weight: var(--weight-medium);

    line-height: 1;

    white-space: nowrap;

    box-sizing: border-box;

}

.ui-pill-lg {

    min-height: 36px;

    padding: 8px 14px;

    font-size: var(--font-body);

}

.ui-pill-outline {

    border-color: var(--border-hover);

    color: var(--text-light);

}

/* ===========================
   COMPACT & ICON ACTIONS
   =========================== */

.ui-icon-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: var(--icon-button-size-md);

    height: var(--icon-button-size-md);

    flex: 0 0 auto;

    padding: 0;

    background: transparent;

    border: none;

    border-radius: var(--control-radius-sm);

    color: var(--text-muted);

    font-family: inherit;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        opacity .2s ease,
        transform .2s ease;

}

.ui-icon-button-sm {

    width: var(--icon-button-size-sm);

    height: var(--icon-button-size-sm);

}

.ui-icon-button-xs {

    width: var(--icon-button-size-xs);

    height: var(--icon-button-size-xs);

    border-radius: 50%;

}

.ui-icon-button:hover:not(:disabled) {

    color: var(--text-primary);

}

.ui-icon-button-danger:hover:not(:disabled) {

    background: var(--danger-surface);

    color: var(--danger);

    transform: scale(1.04);

}

.ui-icon-button:focus-visible {

    outline: none;

    box-shadow: var(--control-focus-ring);

}

.ui-icon-button:disabled {

    cursor: not-allowed;

    opacity: .28;

}

.ui-add-button {
    background: rgba(255, 255, 255, .025);
    border: 0;
    border-radius: 50%;
    color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

.ui-add-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.ui-add-button-neutral:hover:not(:disabled) {
    background: var(--accent-surface-medium);
    color: var(--accent);
}

.ui-add-button-positive {
    background: color-mix(in srgb, var(--success-surface) 58%, transparent);
    color: color-mix(in srgb, var(--success) 72%, transparent);
}

.ui-add-button-positive:hover:not(:disabled) {
    background: var(--success-surface);
    color: var(--success);
}

.ui-add-button-negative,
.ui-add-button-risk {
    background: color-mix(in srgb, var(--risk-surface) 58%, transparent);
    color: color-mix(in srgb, var(--danger) 72%, transparent);
}

.ui-add-button-negative:hover:not(:disabled),
.ui-add-button-risk:hover:not(:disabled) {
    background: var(--risk-surface);
    color: var(--danger);
}

.ui-add-button-priority {
    background: color-mix(in srgb, var(--priority-surface) 58%, transparent);
    color: color-mix(in srgb, var(--accent) 72%, transparent);
}

.ui-add-button-priority:hover:not(:disabled) {
    background: var(--priority-surface);
    color: var(--accent);
}

.ui-add-button-icon {
    display: block;
    font-size: 19px;
    font-weight: var(--weight-regular);
    line-height: 1;
    transform: translateY(-1px);
}

.ui-button-compact {

    min-height: var(--control-height-sm);

    padding: 0 13px;

    border-radius: 9px;

    font-size: var(--font-label);

}

/* ===========================
   CONTEXT PILLS
   =========================== */

.summary-pill-container {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.context-pill {

    max-width: 100%;

    border: 0;

    color: var(--text-light);

    font-weight: var(--weight-regular);

    line-height: 1.3;

    white-space: normal;

    overflow-wrap: anywhere;

}

.priority-pill {

    background: var(--priority-surface);

}

.risk-pill {

    background: var(--risk-surface);

}


/* ===========================
   CATEGORY PILL
   =========================== */

.decision-category-pill {

    max-width: 150px;

    letter-spacing: .03em;

}

.decision-category-pill-text {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ===========================
   STATUS PILL
   =========================== */

.decision-status {

    text-transform: capitalize;

}

.decision-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    flex-shrink: 0;

    box-shadow: none;

    transition:
        box-shadow .22s ease,
        transform .22s ease;

}


/* Pending */

.decision-status-pending {

    color: var(--accent);

    background: var(--accent-surface);

}

.decision-status-pending .decision-status-dot {

    background: var(--accent);

}


/* Decided */

.decision-status-decided {

    color: var(--success);

    background: var(--success-surface);

}

.decision-status-decided .decision-status-dot {

    background: var(--success);

}


/* Reviewed */

.decision-status-reviewed {

    color: var(--review);

    background: var(--review-surface);

}

.decision-status-reviewed .decision-status-dot {

    background: var(--review);

}

/* ===========================
   DEADLINE PILL
   =========================== */

.deadline-pill {

    position: relative;

    flex-shrink: 0;

    cursor: default;

    transition:
        background-color .2s ease,
        color .2s ease,
        filter .2s ease;

}


.deadline-chip-icon {

    position: relative;

    width: 12px;

    height: 11px;

    border: 1px solid currentColor;

    border-radius: 3px;

    color: inherit;

    flex-shrink: 0;

    opacity: .8;

}


.deadline-chip-icon::before {

    content: "";

    position: absolute;

    top: 3px;

    right: 1px;

    left: 1px;

    height: 1px;

    background: currentColor;

}


.deadline-chip-icon::after {

    content: "";

    position: absolute;

    top: -2px;

    left: 3px;

    width: 4px;

    height: 3px;

    border-right: 1px solid currentColor;

    border-left: 1px solid currentColor;

}


.deadline-pill-label {

    line-height: 1;

}


/* Tooltip */


.ui-tooltip-host {

    position: relative;

}

.ui-tooltip,
.deadline-pill-tooltip {

    position: absolute;

    left: 50%;

    bottom: calc(100% + 8px);

    z-index: 20;

    padding: 6px 9px;

    background: var(--bg-elevated);

    border: none;

    border-radius: 7px;

    color: var(--text-primary);

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    pointer-events: none;

    opacity: 0;

    transform:
        translate(-50%, 4px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .22);

    transition:
        opacity .16s ease,
        transform .16s ease;

}


.ui-tooltip-host:hover .ui-tooltip,
.ui-tooltip-host:focus-visible .ui-tooltip,
.deadline-pill:hover .deadline-pill-tooltip {

    opacity: 1;

    transform:
        translate(-50%, 0);

}

.ui-tooltip-below {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translate(-50%, -4px);
}

.ui-tooltip-right {
    top: 50%;
    bottom: auto;
    left: calc(100% + 8px);
    transform: translate(-4px, -50%);
}

.ui-tooltip-host:hover .ui-tooltip-right,
.ui-tooltip-host:focus-visible .ui-tooltip-right {
    transform: translate(0, -50%);
}


/* No timeline */

.ui-quiet-metadata,
.deadline-none {

    color: var(--text-muted);

    background: transparent;

}


/* Compact labeled scales — fixed geometry for dashboard and summary surfaces. */

.ui-compact-scale {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .025);
    border-radius: 11px;
}

.ui-compact-scale-body {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.ui-compact-scale-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: var(--weight-regular);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ui-compact-scale-value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 38px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
}

.ui-compact-scale-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    margin: 0 3px;
}

.ui-compact-scale-track::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
}

.ui-compact-scale-track span {
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    background: var(--bg-card);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--text-muted);
    transition: box-shadow .2s ease, filter .2s ease;
}

.ui-compact-scale-track span.selected {
    width: 12px;
    height: 12px;
}


/* Normal */

.deadline-normal {

    color: var(--text-secondary);

    background: var(--bg-input);

}


/* Approaching */

.deadline-approaching {

    color: var(--deadline-approaching);

    background:
        var(--deadline-approaching-surface);

}


/* Soon */

.deadline-soon {

    color: var(--deadline-soon);

    background:
        var(--deadline-soon-surface);

}


/* Today */

.deadline-today {

    color: var(--deadline-today);

    background:
        var(--deadline-today-surface);

}


/* Overdue */

.deadline-overdue {

    color: var(--danger);

    background:
        var(--danger-surface);

}

/* ===========================
   REVIEW DATE PILL
   =========================== */

.review-date-pill {

    position: relative;

    gap: 7px;

    background: var(--review-surface);

    color: var(--review);

    cursor: default;

    flex-shrink: 0;

    transition:
        background-color .2s ease,
        color .2s ease;

}

.review-date-pill-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 13px;

    height: 13px;

    color: inherit;

    font-size: 13px;

    line-height: 1;

    flex-shrink: 0;

}

.review-date-pill-label {

    line-height: 1;

}

.review-date-pill.is-due {

    background:
        rgba(139, 124, 255, .20);

    color: var(--review);

    font-weight: 700;

}

/* ===========================
   MODALS
   =========================== */

.modal-overlay {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background: var(--modal-overlay);

}

.modal-overlay.hidden {

    display: none;

}

.modal {

    width: 100%;

    max-width: 420px;

    padding: 26px;

    background: var(--bg-elevated);

    border: none;

    border-radius: 16px;

    box-shadow: var(--shadow-modal);

}

.modal-title {

    margin-bottom: 10px;

}

.modal-message {

    margin: 0;

}

.modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 24px;

}

.modal-button {

    font-size: 12px;

    font-weight: var(--weight-semibold);

}

/* ===========================
   CHECKBOX VISUAL
   =========================== */

.checkbox-box {

    width: 15px;

    height: 15px;

    margin-top: 1px;

    border: 1px solid var(--border-hover);

    border-radius: 4px;

    flex-shrink: 0;

    transition:
        background-color .2s ease,
        border-color .2s ease;

}

/* ===========================
   INLINE INPUT ACTIONS
   =========================== */

.inline-input-row {

    display: flex;

    gap: 8px;

    margin-top: 12px;

}

.inline-input-row.hidden {

    display: none;

}

.inline-input {

    flex: 1;

    min-width: 0;

    border-color: var(--border);

}

.inline-input:focus {

    border-color: var(--accent);

}

.inline-input-save {

    flex-shrink: 0;

}

.workflow-abandon-overlay {

    z-index: 160;

}

.modal-detail-list {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: var(--font-body-sm);
    line-height: var(--line-compact);
}

.global-undo-toast {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 180;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 13px 14px 13px 16px;
    background: var(--bg-elevated);
    border-radius: 12px;
    color: var(--text-primary);
    box-shadow: var(--shadow-modal);
}

.global-undo-message {
    font-size: var(--font-body-sm);
    line-height: var(--line-compact);
}

.global-undo-button {
    padding: 7px 9px;
    background: var(--accent-surface-medium);
    border: 0;
    border-radius: 7px;
    color: var(--accent-hover);
    font: inherit;
    font-size: var(--font-label);
    font-weight: var(--weight-bold);
    cursor: pointer;
}

/* Confidence is intentionally warm-to-green rather than danger-to-success:
   every value represents a choice the user has already made. */
.confidence-level-1 {
    --confidence-color: #d99a57;
    --confidence-surface: rgba(217, 154, 87, .15);
    --confidence-border: rgba(217, 154, 87, .34);
}

.confidence-level-2 {
    --confidence-color: #d2b45f;
    --confidence-surface: rgba(210, 180, 95, .14);
    --confidence-border: rgba(210, 180, 95, .32);
}

.confidence-level-3 {
    --confidence-color: #a9c56f;
    --confidence-surface: rgba(169, 197, 111, .14);
    --confidence-border: rgba(169, 197, 111, .32);
}

.confidence-level-4 {
    --confidence-color: #78c78e;
    --confidence-surface: rgba(120, 199, 142, .14);
    --confidence-border: rgba(120, 199, 142, .32);
}

.confidence-level-5 {
    --confidence-color: var(--success);
    --confidence-surface: var(--success-surface);
    --confidence-border: var(--success-border);
}

.confidence-level-unrecorded {
    --confidence-color: var(--text-muted);
    --confidence-surface: rgba(255, 255, 255, .045);
    --confidence-border: transparent;
}

.risk-label-unrated {
    --risk-color: var(--text-muted);
    --risk-surface: rgba(255, 255, 255, .045);
}

.risk-label-low {
    --risk-color: var(--success);
    --risk-surface: var(--success-surface);
}

.risk-label-moderate {
    --risk-color: var(--deadline-approaching);
    --risk-surface: rgba(232, 183, 92, .11);
}

.risk-label-high {
    --risk-color: var(--deadline-today);
    --risk-surface: var(--danger-surface);
}