Jesse_Chen
27 lines
3.0 KiB
CSS
27 lines
3.0 KiB
CSS
.birth-time-question-progress { flex-wrap: wrap; gap: var(--space-2) var(--space-4); line-height: 1.5; }
|
|
.birth-time-question-progress b { color: var(--color-ink); font-weight: 600; }
|
|
.birth-time-choice-surface { min-width: 0; display: grid; gap: var(--space-4); }
|
|
.birth-time-choice-question { min-width: 0; display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
|
|
.birth-time-choice-question legend { width: 100%; margin: 0 0 var(--space-1); color: var(--color-ink); font-family: var(--font-display); font-size: var(--type-title-md); font-weight: 400; line-height: 1.55; text-wrap: pretty; word-break: auto-phrase; }
|
|
.birth-time-primary-choices { display: grid; gap: var(--space-2); }
|
|
.birth-time-special-choices, .birth-time-reframe-actions, .birth-time-journey-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
.birth-time-choice-option { min-height: 52px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); color: var(--color-ink); cursor: pointer; font-size: var(--type-body-sm); line-height: 1.5; text-align: left; text-wrap: pretty; word-break: auto-phrase; transition: border-color 120ms ease-out, background-color 120ms ease-out, transform 120ms ease-out; }
|
|
.birth-time-choice-option.is-primary { width: 100%; padding: var(--space-3) var(--space-4); }
|
|
.birth-time-choice-option.is-secondary { min-height: 44px; flex: 1 1 0; padding: var(--space-2) var(--space-4); color: var(--color-ink-secondary); text-align: center; }
|
|
.birth-time-choice-option:hover:not(:disabled) { border-color: var(--color-border-strong); background: var(--color-canvas-soft); }
|
|
.birth-time-choice-option:active:not(:disabled) { transform: translateY(1px); }
|
|
.birth-time-choice-option[data-selected="true"] { border-color: var(--color-action); background: var(--color-action-soft); color: var(--color-ink); }
|
|
.birth-time-choice-option:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
|
|
.birth-time-choice-question:disabled .birth-time-choice-option { cursor: wait; opacity: .62; }
|
|
.birth-time-choice-pending { margin: 0; color: var(--color-action); font-size: var(--type-caption); }
|
|
.birth-time-unmatched-note { display: grid; gap: var(--space-2); color: var(--color-ink-secondary); font-size: var(--type-caption); font-weight: 600; }
|
|
.birth-time-unmatched-note textarea { min-height: var(--space-24); resize: vertical; color: var(--color-ink); font-size: var(--type-body-sm); font-weight: 400; line-height: 1.55; }
|
|
.birth-time-reframe-actions, .birth-time-journey-controls { justify-content: flex-end; }
|
|
.birth-time-new-assessment { display: grid; justify-items: start; gap: var(--space-2); }
|
|
.birth-time-new-assessment small { color: var(--color-ink-secondary); font-size: var(--type-caption); line-height: 1.5; }
|
|
|
|
@media (max-width: 767px) {
|
|
.birth-time-special-choices, .birth-time-reframe-actions, .birth-time-journey-controls { display: grid; grid-template-columns: 1fr; }
|
|
.birth-time-choice-option.is-secondary, .birth-time-reframe-actions > button, .birth-time-journey-controls > button { width: 100%; }
|
|
}
|