/* One expanded procedure at a time; completed steps become editable summaries. */ .issue-flow-progressive .issue-guided-form { padding: 0; border: 0; } .issue-wizard-fields { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; } .issue-procedure-step { min-width: 0; border-bottom: 1px solid var(--ops-line-soft); } .issue-procedure-step:last-child { border-bottom: 0; } .issue-procedure-step.is-current { padding: 16px 0 8px; } .issue-procedure-step .issue-flow-heading { align-items: center; margin-bottom: 18px; } .issue-procedure-step h2 { scroll-margin-top: 130px; } .issue-procedure-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; animation: issue-step-enter 150ms ease-out; } .issue-flow-progressive .issue-category-card { min-height: 122px; gap: 6px; padding: 14px; } .issue-flow-progressive .issue-media-finder { padding: 0; border: 0; background: transparent; } .page .issue-flow-progressive .issue-step-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0 !important; background: transparent !important; text-align: left; color: var(--ops-text) !important; box-shadow: none; text-transform: none; } .issue-step-summary .issue-step-number { width: 28px; height: 28px; color: var(--ops-primary-2); } .issue-step-summary-copy { display: grid; gap: 3px; min-width: 0; } .issue-step-summary-copy small { color: var(--ops-muted); font-size: 11px; font-weight: 500; } .issue-step-summary-copy strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .issue-step-change { color: var(--ops-primary-2); font-size: 12px; } .issue-step-summary:hover .issue-step-change { text-decoration: underline; } .issue-procedure-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; } .issue-procedure-actions button { min-height: 44px; } .page .issue-procedure-actions > button:not(.ghost-button) { background: #c7bdff !important; border-color: #c7bdff !important; color: #1c172c !important; } .issue-procedure-actions button:disabled { opacity: .4; } .issue-selection-count { margin-right: auto; color: var(--ops-muted); font-size: 12px; } .issue-flow-progressive .issue-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .issue-flow-progressive .issue-choice-row button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; } .issue-device-check { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid currentColor; border-radius: 6px; } /* Legacy global button colours are !important; scoped overrides keep toggles visible. */ .page .issue-flow-progressive button[aria-pressed='true'] { border-color: #c7bdff !important; background: #373147 !important; color: #f5f0ff !important; box-shadow: inset 0 0 0 1px #c7bdff; } .issue-device-feedback { margin: 4px 0 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; } .issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr) auto; padding: 0; border: 0; } .issue-flow-progressive .issue-resolution-card h3 { margin: 0; font-size: 19px; line-height: 1.4; } .issue-flow-progressive .issue-resolution-card p { margin-top: 8px; font-size: 13px; } .issue-flow-progressive .status-banner { display: grid; gap: 10px; } .issue-flow-progressive .status-banner button { justify-self: start; } @keyframes issue-step-enter { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 680px) { .issue-flow-progressive .issue-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .issue-flow-progressive .issue-category-card { min-height: 112px; padding: 12px; } .issue-flow-progressive .issue-category-card p { display: none; } .issue-flow-progressive .issue-category-card strong { font-size: 13px; } .issue-procedure-step .issue-flow-heading h2 { font-size: 19px; } .issue-flow-progressive .issue-step-summary { gap: 8px; } .issue-flow-progressive .issue-choice-row button { font-size: 12px; padding: 10px; } .issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .issue-procedure-content { animation: none; } }