/* HHD C04-I04 Navigation Center R5 — FIX20-FIX01.
   Canonical UX correction. The approved R5 visual governs structure, hierarchy and density;
   all runtime content remains sourced from governed Guide/Saved Objective authorities. */

.hhd-navigation-center-r5-dialog.e-dialog {
    width: min(1580px, calc(100vw - 2rem)) !important;
    max-width: min(1580px, calc(100vw - 2rem));
    max-height: min(94dvh, 980px);
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-xl);
    background: var(--hhd-surface-page);
    box-shadow: var(--hhd-shadow-lg);
    overflow: hidden;
}

.hhd-navigation-center-r5-dialog.e-dialog .e-dlg-header-content {
    padding: 0;
    border-bottom: 0;
    background: var(--hhd-surface-page);
}

.hhd-navigation-center-r5-dialog.e-dialog .e-dlg-header {
    width: 100%;
    padding: 0;
}

.hhd-navigation-center-r5-dialog.e-dialog .e-dlg-content {
    padding: 0 var(--hhd-space-6) var(--hhd-space-5);
    max-height: calc(min(94dvh, 980px) - 6.1rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--hhd-surface-page);
}

.hhd-navigation-center-r5-dialog .hhd-r5-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hhd-space-5);
    padding: var(--hhd-space-5) var(--hhd-space-7) var(--hhd-space-4);
    color: var(--hhd-text-primary);
    background: var(--hhd-surface-page);
}

.hhd-navigation-center-r5-dialog .hhd-r5-header > div {
    min-width: 0;
}

.hhd-navigation-center-r5-dialog .hhd-r5-header h2 {
    margin: 0;
    color: var(--hhd-text-primary);
    font-size: clamp(1.72rem, 2.35vw, 2.35rem);
    font-weight: var(--hhd-weight-bold);
    line-height: var(--hhd-line-title);
    letter-spacing: -.035em;
}

.hhd-navigation-center-r5-dialog .hhd-r5-header p {
    margin: .2rem 0 0;
    max-width: 74ch;
    color: var(--hhd-text-secondary);
    font-size: clamp(.84rem, 1vw, .98rem);
    line-height: 1.35;
}

.hhd-navigation-center-r5-dialog .hhd-navigation-center-close.e-btn {
    flex: 0 0 auto;
    width: 2.6rem;
    min-width: 2.6rem;
    height: 2.6rem;
    min-height: 2.6rem;
    padding: 0;
    border: 1px solid var(--hhd-border-strong);
    border-radius: var(--hhd-radius-pill);
    color: var(--hhd-text-secondary);
    background: var(--hhd-surface-elevated);
    font-size: 1.28rem;
    line-height: 1;
    box-shadow: var(--hhd-shadow-xs);
}

.hhd-navigation-center-r5-dialog .hhd-navigation-center-close.e-btn:hover,
.hhd-navigation-center-r5-dialog .hhd-navigation-center-close.e-btn:focus-visible {
    border-color: var(--hhd-accent);
    color: var(--hhd-accent-strong);
    background: var(--hhd-accent-soft);
}

.hhd-navigation-center-r5,
.hhd-r5-landing,
.hhd-r5-composer {
    min-width: 0;
}

.hhd-navigation-center-r5 {
    display: block;
    max-height: none;
    background: transparent;
}

.hhd-r5-composer {
    display: grid;
    gap: var(--hhd-space-3);
}

.hhd-r5-band,
.hhd-r5-selection-band {
    min-width: 0;
    padding: .78rem .9rem;
    border: 1px solid var(--hhd-border-subtle);
    border-radius: var(--hhd-radius-md);
    background: var(--hhd-surface-panel);
    box-shadow: var(--hhd-shadow-xs);
}

.hhd-r5-section-heading {
    display: flex;
    align-items: center;
    gap: .62rem;
    min-width: 0;
    margin-bottom: .62rem;
}

.hhd-r5-section-heading.is-inline {
    justify-content: space-between;
}

.hhd-r5-section-leading {
    display: flex;
    align-items: center;
    gap: .62rem;
    min-width: 0;
}

.hhd-r5-section-copy {
    min-width: 0;
}

.hhd-r5-section-copy h3 {
    margin: 0;
    color: var(--hhd-text-primary);
    font-size: clamp(.9rem, 1vw, 1.02rem);
    font-weight: var(--hhd-weight-bold);
    line-height: 1.18;
}

.hhd-r5-section-copy p {
    margin: .12rem 0 0;
    color: var(--hhd-text-secondary);
    font-size: .73rem;
    line-height: 1.32;
}

.hhd-r5-section-symbol,
.hhd-r5-section-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--hhd-accent);
}

.hhd-r5-section-icon .hhd-visual-icon,
.hhd-r5-section-icon img,
.hhd-r5-card-icon .hhd-visual-icon,
.hhd-r5-card-icon img,
.hhd-r5-suggestion-icon .hhd-visual-icon,
.hhd-r5-suggestion-icon img,
.hhd-r5-guide-icon .hhd-visual-icon,
.hhd-r5-guide-icon img,
.hhd-r5-selection-icon .hhd-visual-icon,
.hhd-r5-selection-icon img {
    width: 100%;
    height: 100%;
}

.hhd-r5-section-symbol.is-expression { color: var(--hhd-info); font-size: 1.45rem; }
.hhd-r5-section-symbol.is-guide { color: var(--hhd-accent); font-size: 1.45rem; }
.hhd-r5-section-symbol.is-selection { color: var(--hhd-accent); font-size: 1.42rem; }

.hhd-r5-empty {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 2.45rem;
    padding: .52rem .72rem;
    border: 1px dashed var(--hhd-border);
    border-radius: var(--hhd-radius-sm);
    color: var(--hhd-text-secondary);
    background: var(--hhd-surface-subtle);
    font-size: .72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.hhd-r5-empty.is-compact {
    min-height: 2.2rem;
}

/* Saved objectives: one compact, horizontally reusable strip. */
.hhd-r5-saved .hhd-r5-section-heading {
    margin-bottom: .5rem;
}

.hhd-r5-horizontal-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    grid-template-rows: 1fr;
    gap: .48rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
    padding-bottom: .12rem;
}

.hhd-r5-saved-card {
    position: relative;
    min-width: 0;
    scroll-snap-align: start;
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-sm);
    background: var(--hhd-surface-elevated);
    overflow: hidden;
    transition: border-color var(--hhd-transition-fast), background var(--hhd-transition-fast), box-shadow var(--hhd-transition-fast);
}

.hhd-r5-saved-card:hover,
.hhd-r5-saved-card:focus-within {
    border-color: color-mix(in srgb, var(--hhd-accent) 55%, var(--hhd-border));
    background: var(--hhd-surface-selected);
    box-shadow: var(--hhd-shadow-xs);
}

.hhd-r5-card-button.e-btn,
.hhd-r5-suggestion-card.e-btn,
.hhd-r5-guide-tile.e-btn {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--hhd-font-family);
}

.hhd-r5-card-button.e-btn {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .52rem;
    width: 100%;
    min-height: 3.35rem;
    padding: .55rem 2.35rem .55rem .65rem;
    border: 0;
    color: var(--hhd-text-primary);
    background: transparent;
    white-space: normal;
}

.hhd-r5-card-icon,
.hhd-r5-suggestion-icon,
.hhd-r5-guide-icon,
.hhd-r5-selection-icon {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    color: var(--hhd-accent);
}

.hhd-r5-card-copy {
    display: grid;
    min-width: 0;
    gap: .08rem;
    text-align: left;
}

.hhd-r5-card-copy strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hhd-text-primary);
    font-size: .75rem;
    font-weight: var(--hhd-weight-semibold);
}

.hhd-r5-card-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hhd-text-secondary);
    font-size: .63rem;
}

.hhd-r5-card-chevron,
.hhd-r5-card-arrow {
    flex: 0 0 auto;
    color: var(--hhd-accent-strong);
    font-size: 1.2rem;
    font-weight: var(--hhd-weight-semibold);
}

.hhd-r5-card-retire.e-btn {
    position: absolute;
    top: 50%;
    right: .18rem;
    transform: translateY(-50%);
    width: 1.85rem;
    min-width: 1.85rem;
    height: 1.85rem;
    min-height: 1.85rem;
    padding: 0;
    border-radius: var(--hhd-radius-pill);
    color: var(--hhd-text-tertiary);
    opacity: 0;
}

.hhd-r5-saved-card:hover .hhd-r5-card-retire,
.hhd-r5-saved-card:focus-within .hhd-r5-card-retire {
    opacity: 1;
}

/* Suggestions: high-density capability cards. */
.hhd-r5-suggestions .hhd-r5-section-symbol { color: var(--hhd-warning); }

.hhd-r5-suggestion-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 28vw);
    grid-template-columns: none;
    gap: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
    padding-bottom: .18rem;
    max-width: 100%;
}

.hhd-r5-suggestion-card.e-btn {
    display: grid;
    grid-template-columns: 2.55rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    min-height: 5rem;
    padding: .62rem .78rem;
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-sm);
    color: var(--hhd-text-primary);
    background: var(--hhd-surface-elevated);
    white-space: normal;
    box-shadow: none;
    text-align: left;
    scroll-snap-align: start;
}

.hhd-r5-suggestion-card.e-btn:hover,
.hhd-r5-suggestion-card.e-btn:focus-visible {
    border-color: color-mix(in srgb, var(--hhd-accent) 58%, var(--hhd-border));
    background: var(--hhd-surface-selected);
}

.hhd-r5-suggestion-card .hhd-r5-suggestion-icon {
    width: 2.45rem;
    height: 2.45rem;
    padding: .45rem;
    border-radius: var(--hhd-radius-sm);
    color: var(--hhd-accent);
    background: var(--hhd-accent-soft);
}

.hhd-r5-suggestion-card:nth-child(2n) .hhd-r5-suggestion-icon {
    color: var(--hhd-success);
    background: var(--hhd-success-soft);
}

.hhd-r5-suggestion-card:nth-child(3n) .hhd-r5-suggestion-icon {
    color: var(--hhd-warning);
    background: var(--hhd-warning-soft);
}

.hhd-r5-suggestion-card .hhd-r5-card-copy strong {
    font-size: .8rem;
    white-space: normal;
    overflow: visible;
}

.hhd-r5-suggestion-card .hhd-r5-card-copy small {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .68rem;
    line-height: 1.3;
}

.hhd-r5-context-note {
    display: inline-flex;
    width: fit-content;
    margin-top: .15rem;
    padding: .12rem .38rem;
    border-radius: var(--hhd-radius-pill);
    color: var(--hhd-status-warning-fg);
    background: var(--hhd-status-warning-bg);
    font-size: .58rem;
    font-weight: var(--hhd-weight-semibold);
    line-height: 1.25;
}

.hhd-r5-card-chevron {
    align-self: center;
    font-size: 1.35rem;
}

/* Human expression: one clear surface, voice integrated into the same input gesture. */
.hhd-r5-expression {
    padding-bottom: .75rem;
}

.hhd-r5-expression .hhd-r5-section-heading {
    margin-bottom: .45rem;
}

.hhd-r5-expression-box {
    position: relative;
    min-width: 0;
}

.hhd-r5-expression-box .e-float-input,
.hhd-r5-expression-box .e-input-group,
.hhd-r5-expression-box .e-control-wrapper {
    width: 100%;
}

.hhd-r5-expression-box .e-textarea.e-input,
.hhd-r5-expression-box textarea {
    width: 100%;
    min-height: 4.6rem;
    max-height: 8.5rem;
    padding: .72rem 4.7rem .72rem .85rem !important;
    border-color: color-mix(in srgb, var(--hhd-accent) 28%, var(--hhd-border)) !important;
    border-radius: var(--hhd-radius-sm) !important;
    resize: none;
    color: var(--hhd-text-primary);
    background: var(--hhd-surface-elevated);
    line-height: 1.4;
}

.hhd-r5-expression-box .e-textarea.e-input:focus,
.hhd-r5-expression-box textarea:focus {
    border-color: var(--hhd-accent) !important;
}

.hhd-r5-voice-action {
    position: absolute;
    right: .65rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

.hhd-r5-voice-action .hhd-r3-voice {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.hhd-r5-voice-action .hhd-r3-icon-action {
    display: grid;
    place-items: center;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--hhd-accent) 35%, var(--hhd-border));
    border-radius: var(--hhd-radius-pill);
    color: var(--hhd-action-primary-fg);
    background: var(--hhd-action-primary-bg);
    box-shadow: var(--hhd-shadow-sm);
    font-size: 1.25rem;
}

.hhd-r5-voice-action .hhd-r3-icon-action:hover:not(:disabled),
.hhd-r5-voice-action .hhd-r3-icon-action:focus-visible {
    background: var(--hhd-action-primary-hover-bg);
}

.hhd-r5-voice-action .hhd-r3-icon-action.is-recording {
    width: auto;
    padding: 0 .75rem;
    border-radius: var(--hhd-radius-pill);
    background: var(--hhd-danger);
}

.hhd-r5-voice-action .hhd-r3-voice-status {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    width: max-content;
    max-width: 18rem;
    padding: .25rem .45rem;
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-xs);
    color: var(--hhd-text-secondary);
    background: var(--hhd-surface-elevated);
    box-shadow: var(--hhd-shadow-xs);
    font-size: .62rem;
}

/* Guide: compact conceptual navigation tiles, not a menu/sidebar. */
.hhd-r5-guide .hhd-r5-section-heading {
    margin-bottom: .5rem;
}

.hhd-r5-more-button.e-btn {
    flex: 0 0 auto;
    min-height: 2rem;
    color: var(--hhd-accent-strong);
    text-transform: none;
}

.hhd-r5-guide-tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 14vw);
    grid-template-columns: none;
    gap: .48rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
    padding-bottom: .18rem;
    max-width: 100%;
}

.hhd-r5-guide-tile.e-btn {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: .45rem;
    min-width: 0;
    min-height: 4.25rem;
    padding: .55rem .65rem;
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-sm);
    color: var(--hhd-text-primary);
    background: var(--hhd-surface-elevated);
    white-space: normal;
    text-align: center;
    box-shadow: none;
    scroll-snap-align: start;
}

.hhd-r5-guide-tile.e-btn > span:last-child {
    min-width: 0;
    font-size: .72rem;
    font-weight: var(--hhd-weight-semibold);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.hhd-r5-guide-tile.e-btn:hover,
.hhd-r5-guide-tile.e-btn:focus-visible {
    border-color: color-mix(in srgb, var(--hhd-accent) 55%, var(--hhd-border));
    background: var(--hhd-surface-selected);
}

.hhd-r5-guide-tile.e-btn.is-selected {
    border-color: var(--hhd-accent);
    color: var(--hhd-accent-strong);
    background: var(--hhd-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hhd-accent) 30%, transparent);
}

.hhd-r5-guide-tile.is-all {
    grid-template-columns: 1.7rem minmax(0, 1fr);
}

.hhd-r5-guide-all-mark {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    color: var(--hhd-accent);
    font-size: 1.3rem;
}

/* Live composition: horizontal, reorderable and action-oriented. */
.hhd-r5-selection-band {
    padding-bottom: .78rem;
}

.hhd-r5-selection-hint {
    flex: 0 1 auto;
    color: var(--hhd-text-secondary);
    font-size: .65rem;
    line-height: 1.25;
    text-align: right;
}

.hhd-r5-selection-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: stretch;
    min-width: 0;
    padding: .48rem;
    border-radius: var(--hhd-radius-sm);
    background: linear-gradient(90deg, var(--hhd-surface-subtle), var(--hhd-surface-selected));
}

.hhd-r5-selection-track {
    display: flex;
    align-items: center;
    gap: .42rem;
    min-width: 0;
    min-height: 4rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    padding: .18rem;
}

.hhd-r5-selection-empty {
    flex: 0 1 auto;
    align-self: center;
    min-width: 0;
    padding: .42rem .7rem;
    border: 1px dashed var(--hhd-border);
    border-radius: var(--hhd-radius-sm);
    color: var(--hhd-text-secondary);
    background: color-mix(in srgb, var(--hhd-surface-elevated) 72%, transparent);
    font-size: .68rem;
    white-space: nowrap;
}

.hhd-r5-selection-connector {
    flex: 0 0 auto;
    color: var(--hhd-accent);
    font-size: 1.25rem;
    font-weight: var(--hhd-weight-bold);
}

.hhd-r5-selection-item {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .32rem;
    min-height: 3rem;
    padding: .25rem .3rem .25rem .38rem;
    border: 1px solid color-mix(in srgb, var(--hhd-accent) 28%, var(--hhd-border));
    border-radius: var(--hhd-radius-md);
    background: var(--hhd-surface-elevated);
    box-shadow: var(--hhd-shadow-sm);
    cursor: grab;
    user-select: none;
    transition: transform var(--hhd-transition-fast), box-shadow var(--hhd-transition-fast), opacity var(--hhd-transition-fast);
}

.hhd-r5-selection-item:nth-of-type(4n+1) {
    background: color-mix(in srgb, var(--hhd-accent-soft) 55%, var(--hhd-surface-elevated));
}

.hhd-r5-selection-item:nth-of-type(4n+3) {
    background: color-mix(in srgb, var(--hhd-success-soft) 55%, var(--hhd-surface-elevated));
}

.hhd-r5-selection-item.requires-context {
    border-color: var(--hhd-status-warning-border);
    background: color-mix(in srgb, var(--hhd-status-warning-bg) 55%, var(--hhd-surface-elevated));
}

.hhd-r5-selection-item.is-pointer-reordering {
    z-index: 3;
    cursor: grabbing;
    box-shadow: var(--hhd-shadow-md);
    opacity: .96;
    touch-action: none;
}

.hhd-r5-drag-handle {
    flex: 0 0 auto;
    color: var(--hhd-accent);
    font-size: .92rem;
    letter-spacing: -.18em;
}

.hhd-r5-selection-chip.e-chip-list {
    min-width: 0;
    border: 0;
    background: transparent;
}

.hhd-r5-selection-chip .e-chip {
    max-width: 15rem;
    border: 0;
    color: var(--hhd-text-primary);
    background: transparent;
    font-size: .75rem;
    font-weight: var(--hhd-weight-semibold);
}

.hhd-r5-selection-chip .e-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hhd-r5-selection-controls {
    display: inline-flex;
    align-items: center;
    gap: .08rem;
}

.hhd-r5-selection-controls button {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 0;
    border-radius: var(--hhd-radius-pill);
    color: var(--hhd-text-tertiary);
    background: transparent;
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
}

.hhd-r5-selection-controls button:not(.is-remove) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.hhd-r5-selection-item:focus-within .hhd-r5-selection-controls button:not(.is-remove) {
    position: static;
    width: 1.7rem;
    height: 1.7rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.hhd-r5-selection-controls button:hover:not(:disabled),
.hhd-r5-selection-controls button:focus-visible {
    color: var(--hhd-text-primary);
    background: var(--hhd-accent-soft);
}

.hhd-r5-selection-controls button.is-remove {
    color: var(--hhd-text-secondary);
    background: var(--hhd-surface-muted);
    font-size: 1rem;
}

.hhd-r5-selection-controls button:disabled {
    opacity: .35;
    cursor: default;
}

.hhd-r5-selection-add.e-btn {
    flex: 0 0 auto;
    width: 5.2rem;
    min-width: 5.2rem;
    min-height: 3rem;
    padding: 0;
    border: 1px dashed var(--hhd-accent);
    border-radius: var(--hhd-radius-md);
    color: var(--hhd-accent-strong);
    background: color-mix(in srgb, var(--hhd-surface-elevated) 65%, transparent);
    font-size: 1.35rem;
}

.hhd-r5-define-button.e-btn {
    align-self: stretch;
    min-width: 13.4rem;
    min-height: 4rem;
    padding: .5rem .95rem;
    border-radius: var(--hhd-radius-md);
    text-transform: none;
    font-weight: var(--hhd-weight-bold);
    white-space: normal;
}

.hhd-r5-define-copy {
    display: grid;
    gap: .08rem;
    text-align: left;
}

.hhd-r5-define-copy strong {
    font-size: .86rem;
    line-height: 1.1;
}

.hhd-r5-define-copy small {
    font-size: .62rem;
    font-weight: var(--hhd-weight-regular);
    line-height: 1.2;
    opacity: .85;
}

.hhd-r5-status-line {
    min-height: .9rem;
    padding: 0 .25rem;
    color: var(--hhd-text-secondary);
    font-size: .64rem;
    line-height: 1.25;
}

.hhd-r5-loading {
    display: grid;
    gap: var(--hhd-space-2);
    padding: var(--hhd-space-4);
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-md);
    color: var(--hhd-text-secondary);
    background: var(--hhd-surface-panel);
}

.hhd-r5-secondary-dialog.e-dialog {
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-lg);
    background: var(--hhd-surface-panel);
    box-shadow: var(--hhd-shadow-lg);
}

.hhd-r5-more-list .e-list-item {
    min-height: 3rem;
}

.hhd-r5-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--hhd-space-2);
    margin-top: var(--hhd-space-4);
}

@media (max-width: 1280px) {
    .hhd-navigation-center-r5-dialog.e-dialog {
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem);
    }

    .hhd-navigation-center-r5-dialog.e-dialog .e-dlg-content {
        padding-inline: var(--hhd-space-4);
    }

    .hhd-navigation-center-r5-dialog .hhd-r5-header {
        padding-inline: var(--hhd-space-5);
    }

    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(9rem, 17vw);
    }
}

@media (max-width: 1024px) {
    .hhd-r5-suggestion-grid {
        grid-auto-columns: minmax(16rem, 42vw);
    }

    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(9rem, 24vw);
    }

    .hhd-r5-selection-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .hhd-r5-define-button.e-btn {
        width: 100%;
        min-width: 0;
        min-height: 3.2rem;
    }

    .hhd-r5-define-copy {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .hhd-navigation-center-r5-dialog.e-dialog {
        width: calc(100vw - .75rem) !important;
        max-width: calc(100vw - .75rem);
        max-height: calc(100dvh - .75rem);
        border-radius: var(--hhd-radius-lg);
    }

    .hhd-navigation-center-r5-dialog.e-dialog .e-dlg-content {
        max-height: calc(100dvh - 6.8rem);
        padding: 0 var(--hhd-space-3) var(--hhd-space-3);
    }

    .hhd-navigation-center-r5-dialog .hhd-r5-header {
        padding: var(--hhd-space-4) var(--hhd-space-3) var(--hhd-space-3);
    }

    .hhd-navigation-center-r5-dialog .hhd-r5-header h2 {
        font-size: 1.45rem;
    }

    .hhd-r5-composer {
        gap: var(--hhd-space-2);
    }

    .hhd-r5-band,
    .hhd-r5-selection-band {
        padding: .72rem;
    }

    .hhd-r5-section-heading,
    .hhd-r5-section-heading.is-inline {
        align-items: flex-start;
    }

    .hhd-r5-section-heading.is-inline {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .hhd-r5-selection-hint {
        text-align: left;
        padding-left: 2.35rem;
    }

    .hhd-r5-suggestion-grid {
        grid-auto-columns: minmax(15rem, 72vw);
    }

    .hhd-r5-horizontal-strip {
        grid-auto-columns: minmax(215px, 74vw);
    }

    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(142px, 40vw);
    }

    .hhd-r5-guide-tile.e-btn {
        min-height: 3.8rem;
    }

    .hhd-r5-selection-track {
        min-height: 3.6rem;
    }
}

@media (max-width: 430px) {
    .hhd-navigation-center-r5-dialog.e-dialog {
        width: 100vw !important;
        max-width: none;
        height: 100dvh !important;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .hhd-navigation-center-r5-dialog.e-dialog .e-dlg-content {
        max-height: calc(100dvh - 6.25rem);
        padding-inline: .55rem;
    }

    .hhd-navigation-center-r5-dialog .hhd-r5-header {
        padding: .8rem .65rem .65rem;
    }

    .hhd-navigation-center-r5-dialog .hhd-r5-header h2 {
        font-size: 1.28rem;
    }

    .hhd-navigation-center-r5-dialog .hhd-r5-header p {
        font-size: .74rem;
    }

    .hhd-navigation-center-r5-dialog .hhd-navigation-center-close.e-btn {
        width: 2.35rem;
        min-width: 2.35rem;
        height: 2.35rem;
        min-height: 2.35rem;
    }

    .hhd-r5-section-copy h3 { font-size: .84rem; }
    .hhd-r5-section-copy p { font-size: .67rem; }

    .hhd-r5-horizontal-strip {
        grid-auto-columns: minmax(205px, 86vw);
    }

    .hhd-r5-expression-box .e-textarea.e-input,
    .hhd-r5-expression-box textarea {
        min-height: 5.4rem;
        padding-right: .78rem !important;
        padding-bottom: 3.7rem !important;
    }

    .hhd-r5-voice-action {
        top: auto;
        right: .55rem;
        bottom: .45rem;
        transform: none;
    }

    .hhd-r5-voice-action .hhd-r3-icon-action {
        width: 2.85rem;
        min-width: 2.85rem;
        height: 2.85rem;
        min-height: 2.85rem;
    }

    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(135px, 58vw);
    }

    .hhd-r5-selection-empty {
        max-width: 75vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hhd-r5-selection-add.e-btn {
        width: 4rem;
        min-width: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hhd-r5-selection-item,
    .hhd-r5-saved-card {
        transition: none;
    }
}


/* HHD-C04-I04-FIX20-FIX01-FIX02 — Runtime UX correction.
   This layer fixes defects physically observed during User Validation:
   - no visible R5 preparation surface;
   - full-width human-expression composer with explicit human gesture;
   - readable selected/disabled states in light and dark;
   - stable density without changing R5 authority semantics. */

.hhd-r5-expression-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.hhd-r5-expression-input,
.hhd-r5-expression-input > .e-control-wrapper,
.hhd-r5-expression-input > .e-input-group,
.hhd-r5-expression-input > .e-float-input,
.hhd-r5-expression-input .e-control-wrapper,
.hhd-r5-expression-input .e-input-group,
.hhd-r5-expression-input .e-float-input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.hhd-r5-expression-input .e-textarea.e-input,
.hhd-r5-expression-input textarea {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 5.2rem;
    padding: .78rem .9rem !important;
    box-sizing: border-box !important;
    overflow-y: auto;
}

.hhd-r5-expression-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-width: max-content;
}

.hhd-r5-expression-actions .hhd-r3-voice {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.hhd-r5-expression-actions .hhd-r3-icon-action {
    display: grid;
    place-items: center;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--hhd-accent) 35%, var(--hhd-border));
    border-radius: var(--hhd-radius-pill);
    color: var(--hhd-action-primary-fg) !important;
    -webkit-text-fill-color: var(--hhd-action-primary-fg) !important;
    background: var(--hhd-action-primary-bg) !important;
    box-shadow: var(--hhd-shadow-sm);
    font-size: 1.25rem;
}

.hhd-r5-expression-actions .hhd-r3-icon-action:hover:not(:disabled),
.hhd-r5-expression-actions .hhd-r3-icon-action:focus-visible {
    background: var(--hhd-action-primary-hover-bg) !important;
}

.hhd-r5-expression-actions .hhd-r3-icon-action.is-recording {
    width: auto;
    padding: 0 .75rem;
    background: var(--hhd-danger) !important;
}

.hhd-r5-expression-actions .hhd-r3-voice-status {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 4;
    width: max-content;
    max-width: 20rem;
    padding: .3rem .5rem;
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-xs);
    color: var(--hhd-text-secondary);
    background: var(--hhd-surface-elevated);
    box-shadow: var(--hhd-shadow-xs);
    font-size: .66rem;
    white-space: normal;
}

.hhd-r5-expression-apply.e-btn {
    min-width: 9.8rem;
    min-height: 3.2rem;
    padding: .55rem .9rem;
    border-radius: var(--hhd-radius-sm);
    text-transform: none;
    font-weight: var(--hhd-weight-semibold);
    white-space: normal;
}

.hhd-r5-expression-apply.e-btn:disabled,
.hhd-r5-expression-apply.e-btn.e-disabled,
.hhd-r5-define-button.e-btn:disabled,
.hhd-r5-define-button.e-btn.e-disabled {
    opacity: 1 !important;
    color: var(--hhd-text-secondary) !important;
    -webkit-text-fill-color: var(--hhd-text-secondary) !important;
    background: var(--hhd-action-disabled-bg) !important;
    border-color: var(--hhd-border-strong) !important;
}

.hhd-r5-guide-tile.e-btn,
.hhd-r5-guide-tile.e-btn .e-btn-content,
.hhd-r5-guide-tile.e-btn > span:last-child {
    color: var(--hhd-text-primary) !important;
    -webkit-text-fill-color: var(--hhd-text-primary) !important;
}

.hhd-r5-guide-tile.e-btn.is-selected,
.hhd-r5-guide-tile.e-btn.is-selected .e-btn-content,
.hhd-r5-guide-tile.e-btn.is-selected > span:last-child {
    border-color: var(--hhd-status-info-border) !important;
    color: var(--hhd-status-info-fg) !important;
    -webkit-text-fill-color: var(--hhd-status-info-fg) !important;
    background: var(--hhd-status-info-bg) !important;
    opacity: 1 !important;
}

.hhd-r5-guide-tile.e-btn.is-selected .hhd-r5-guide-all-mark,
.hhd-r5-guide-tile.e-btn.is-selected .hhd-r5-guide-icon {
    color: var(--hhd-status-info-fg) !important;
    -webkit-text-fill-color: var(--hhd-status-info-fg) !important;
}

.hhd-r5-guide-tile.e-btn:focus-visible,
.hhd-r5-suggestion-card.e-btn:focus-visible,
.hhd-r5-expression-apply.e-btn:focus-visible,
.hhd-r5-define-button.e-btn:focus-visible {
    outline: 3px solid var(--hhd-focus) !important;
    outline-offset: 2px;
}

.hhd-r5-section-copy h3 {
    font-size: clamp(.96rem, 1.05vw, 1.08rem);
}

.hhd-r5-section-copy p {
    font-size: .76rem;
}

.hhd-r5-guide-tile.e-btn > span:last-child {
    font-size: .76rem;
}

.hhd-r5-loading {
    display: none !important;
}

@media (max-width: 768px) {
    .hhd-r5-expression-box {
        grid-template-columns: minmax(0, 1fr);
    }

    .hhd-r5-expression-actions {
        justify-content: flex-end;
        min-width: 0;
    }

    .hhd-r5-expression-apply.e-btn {
        min-width: 9rem;
    }
}

@media (max-width: 430px) {
    .hhd-r5-expression-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .hhd-r5-expression-apply.e-btn {
        width: 100%;
        min-width: 0;
    }

    .hhd-r5-expression-input .e-textarea.e-input,
    .hhd-r5-expression-input textarea {
        min-height: 6rem;
        padding: .75rem !important;
    }
}

/* HHD-C04-I04-FIX20-FIX01-FIX03 — localized busy + governed voice interaction.
   Runtime findings 15/09/2026: global disabled flash, R3 voice presentation leakage,
   overlapping technical localization text and opaque transcription failure. */

.hhd-r5-expression-actions .hhd-voice-input {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .28rem;
    min-width: 3.2rem;
    max-width: 16rem;
}

.hhd-r5-expression-actions .hhd-voice-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .42rem;
    flex-wrap: nowrap;
}

.hhd-r5-expression-actions .hhd-voice-action.hhd-r3-icon-action {
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
}

.hhd-r5-expression-actions .hhd-voice-action.hhd-voice-stop,
.hhd-r5-expression-actions .hhd-voice-action.hhd-voice-cancel {
    width: auto;
    min-width: 5.25rem;
    padding-inline: .75rem;
    font-size: .78rem;
    font-weight: var(--hhd-weight-semibold);
}

.hhd-r5-expression-actions .hhd-voice-action.hhd-voice-stop {
    border-color: var(--hhd-danger) !important;
    color: var(--hhd-action-primary-fg) !important;
    -webkit-text-fill-color: var(--hhd-action-primary-fg) !important;
    background: var(--hhd-danger) !important;
}

.hhd-r5-expression-actions .hhd-voice-action.hhd-voice-cancel {
    border-color: var(--hhd-border-strong) !important;
    color: var(--hhd-text-primary) !important;
    -webkit-text-fill-color: var(--hhd-text-primary) !important;
    background: var(--hhd-surface-elevated) !important;
}

.hhd-r5-expression-actions .hhd-voice-status.hhd-r3-voice-status {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    width: auto;
    max-width: 16rem;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--hhd-text-secondary) !important;
    -webkit-text-fill-color: var(--hhd-text-secondary) !important;
    background: transparent !important;
    box-shadow: none;
    font-size: .68rem;
    line-height: 1.25;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

.hhd-r5-expression-actions .hhd-voice-diagnostic {
    max-width: 16rem;
    font-size: .68rem;
    color: var(--hhd-text-secondary);
}

.hhd-r5-expression-actions .hhd-voice-diagnostic code {
    overflow-wrap: anywhere;
}

/* Async operations remain visually local. The composer must never regress to a global grey flash. */
.hhd-r5-composer[aria-busy="true"] .hhd-r5-band,
.hhd-r5-composer[aria-busy="true"] .hhd-r5-guide-tile,
.hhd-r5-composer[aria-busy="true"] .hhd-r5-suggestion-card,
.hhd-r5-composer[aria-busy="true"] .hhd-r5-selection-item {
    opacity: 1 !important;
    filter: none !important;
}

@media (max-width: 768px) {
    .hhd-r5-expression-actions .hhd-voice-input {
        max-width: min(100%, 18rem);
    }
}

@media (max-width: 430px) {
    .hhd-r5-expression-actions .hhd-voice-input {
        align-items: stretch;
        max-width: 100%;
    }

    .hhd-r5-expression-actions .hhd-voice-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .hhd-r5-expression-actions .hhd-voice-status.hhd-r3-voice-status {
        max-width: 100%;
        text-align: left;
    }
}

/* HHD-C04-I04-FIX22 — R5 UX scale/readability delta.
   UI-only projection over the governed Guide V3: hierarchy, local filtering,
   visible saved-objective removal and a taller viewport-bounded workspace. */

/* ~15% more desktop height when the viewport allows it; never escape the viewport. */
.hhd-navigation-center-r5-dialog.e-dialog {
    max-height: min(98dvh, 1127px);
}

.hhd-navigation-center-r5-dialog.e-dialog .e-dlg-content {
    max-height: calc(min(98dvh, 1127px) - 6.1rem);
}

.hhd-r5-band-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    min-width: 0;
}

.hhd-r5-filter-button.e-btn,
.hhd-r5-more-button.e-btn {
    min-height: 2rem;
    padding-inline: .58rem;
    border-radius: var(--hhd-radius-sm);
    text-transform: none;
    white-space: nowrap;
}

.hhd-r5-filter-button.e-btn {
    color: var(--hhd-text-secondary);
}

.hhd-r5-filter-button.e-btn.is-active {
    border-color: color-mix(in srgb, var(--hhd-accent) 38%, var(--hhd-border));
    color: var(--hhd-accent-strong);
    background: var(--hhd-accent-soft);
}

.hhd-r5-hierarchy-path {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hhd-text-secondary);
    font-size: .6rem;
    font-weight: var(--hhd-weight-regular);
    line-height: 1.22;
}

.hhd-r5-hierarchy-path.is-action {
    color: var(--hhd-accent-strong);
    font-weight: var(--hhd-weight-semibold);
}

.hhd-r5-hierarchy-path.is-saved {
    color: var(--hhd-text-tertiary);
}

/* Saved-objective removal is a discoverable action, not a hover-only secret. */
.hhd-r5-card-button.e-btn {
    min-height: 3.85rem;
}

.hhd-r5-card-retire.e-btn {
    opacity: 1;
    color: var(--hhd-danger, #b42318);
    background: color-mix(in srgb, var(--hhd-danger, #b42318) 7%, transparent);
}

.hhd-r5-card-retire.e-btn:hover:not(:disabled),
.hhd-r5-card-retire.e-btn:focus-visible {
    color: var(--hhd-danger, #b42318);
    background: color-mix(in srgb, var(--hhd-danger, #b42318) 14%, var(--hhd-surface-elevated));
    outline: 2px solid color-mix(in srgb, var(--hhd-danger, #b42318) 55%, transparent);
    outline-offset: 1px;
}

/* Suggestions keep relevance ordering; hierarchy makes every BCI recognisable. */
.hhd-r5-suggestion-grid {
    grid-auto-columns: minmax(19rem, 30vw);
}

.hhd-r5-suggestion-card.e-btn {
    min-height: 5.75rem;
}

/* The main guide track now presents actual Business Capabilities, ordered by
   Domain -> Family -> Capability. Domains/Families remain navigation authority,
   surfaced by More options and local filters rather than masquerading as BCIs. */
.hhd-r5-guide-tiles {
    grid-auto-columns: minmax(18rem, 25vw);
}

.hhd-r5-guide-tile.e-btn {
    grid-template-columns: 1.7rem minmax(0, 1fr) auto;
    gap: .52rem;
    min-height: 4.7rem;
    text-align: left;
}

.hhd-r5-guide-tile.e-btn .hhd-r5-card-copy {
    min-width: 0;
    text-align: left;
}

.hhd-r5-guide-tile.e-btn .hhd-r5-card-copy strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .74rem;
    line-height: 1.18;
}

.hhd-r5-guide-tile.e-btn > span.hhd-r5-card-chevron:last-child {
    color: var(--hhd-accent-strong) !important;
    -webkit-text-fill-color: var(--hhd-accent-strong) !important;
    font-size: 1.25rem !important;
}

/* Secondary hierarchy and filter façades stay inside the existing R5 modal model. */
.hhd-r5-hierarchy-dialog.e-dialog .e-dlg-content,
.hhd-r5-filter-dialog.e-dialog .e-dlg-content {
    max-height: min(72dvh, 760px);
    overflow: auto;
}

.hhd-r5-hierarchy-tree {
    display: block;
    max-height: min(64dvh, 680px);
    overflow: auto;
}

.hhd-r5-hierarchy-tree .e-list-text {
    overflow-wrap: anywhere;
}

.hhd-r5-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    min-width: 0;
}

.hhd-r5-filter-field {
    display: grid;
    gap: .32rem;
    min-width: 0;
}

.hhd-r5-filter-field.is-wide {
    grid-column: 1 / -1;
}

.hhd-r5-filter-field label {
    color: var(--hhd-text-secondary);
    font-size: .72rem;
    font-weight: var(--hhd-weight-semibold);
}

@media (max-width: 1280px) {
    .hhd-r5-suggestion-grid {
        grid-auto-columns: minmax(18rem, 36vw);
    }

    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(17rem, 33vw);
    }
}

@media (max-width: 1024px) {
    .hhd-r5-suggestion-grid {
        grid-auto-columns: minmax(17rem, 48vw);
    }

    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(16rem, 45vw);
    }
}

@media (max-width: 768px) {
    .hhd-navigation-center-r5-dialog.e-dialog {
        max-height: calc(100dvh - .75rem);
    }

    .hhd-navigation-center-r5-dialog.e-dialog .e-dlg-content {
        max-height: calc(100dvh - 6.8rem);
    }

    .hhd-r5-band-actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 2.35rem;
        flex-wrap: wrap;
    }

    .hhd-r5-suggestion-grid,
    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(16rem, 76vw);
    }

    .hhd-r5-filter-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .hhd-r5-filter-field.is-wide {
        grid-column: auto;
    }
}

@media (max-width: 430px) {
    .hhd-navigation-center-r5-dialog.e-dialog {
        max-height: 100dvh;
    }

    .hhd-navigation-center-r5-dialog.e-dialog .e-dlg-content {
        max-height: calc(100dvh - 6.25rem);
    }

    .hhd-r5-band-actions {
        padding-left: 0;
    }

    .hhd-r5-filter-button.e-btn,
    .hhd-r5-more-button.e-btn {
        flex: 1 1 auto;
    }

    .hhd-r5-suggestion-grid,
    .hhd-r5-guide-tiles {
        grid-auto-columns: minmax(15rem, 86vw);
    }
}