| main { |
| max-width: 48rem; |
| margin: 0 auto; |
| padding: 3.5rem 1rem 2.5rem; |
| display: grid; |
| gap: 1rem; |
| } |
|
|
| label { |
| font-size: 0.875rem; |
| font-weight: 550; |
| color: var(--ink-soft); |
| } |
|
|
| label .muted { |
| font-weight: 400; |
| } |
|
|
| .wordmark { |
| font-size: 1.375rem; |
| font-weight: 650; |
| letter-spacing: -0.02em; |
| } |
|
|
| .field { |
| width: 100%; |
| border: 1px solid var(--hairline); |
| border-radius: 0.75rem; |
| background: var(--canvas); |
| color: var(--ink); |
| padding: 0.625rem 0.875rem; |
| font: inherit; |
| resize: vertical; |
| } |
|
|
| .mono, |
| code, |
| .text { |
| font-family: ui-monospace, "SF Mono", Menlo, monospace; |
| } |
|
|
| .field.mono { |
| font-size: 0.8125rem; |
| } |
|
|
| code { |
| font-size: 0.85em; |
| } |
|
|
| .request { |
| gap: 0.625rem; |
| } |
|
|
| fieldset { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| display: grid; |
| gap: 0.5rem; |
| } |
|
|
| legend { |
| padding: 0; |
| font-size: 0.875rem; |
| font-weight: 550; |
| color: var(--ink-soft); |
| } |
|
|
| .choices { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| } |
|
|
| .chip { |
| border: 1px solid var(--hairline); |
| border-radius: 999px; |
| padding: 0.3rem 0.875rem; |
| background: none; |
| color: var(--ink-soft); |
| font: inherit; |
| font-size: 0.875rem; |
| font-weight: 550; |
| cursor: pointer; |
| transition: background-color 0.2s, color 0.2s; |
| } |
|
|
| .chip:hover { |
| background: var(--surface); |
| } |
|
|
| fieldset:disabled .chip { |
| cursor: not-allowed; |
| opacity: 0.5; |
| } |
|
|
| .media { |
| display: grid; |
| gap: 0.5rem; |
| } |
|
|
| .drop { |
| position: relative; |
| display: grid; |
| place-items: center; |
| min-height: 4.5rem; |
| border: 1px dashed var(--hairline); |
| border-radius: 0.875rem; |
| background: var(--surface); |
| cursor: pointer; |
| } |
|
|
| .drop[data-disabled="true"] { |
| cursor: not-allowed; |
| } |
|
|
| .drop:focus-within { |
| outline: 2px solid var(--accent); |
| outline-offset: 2px; |
| } |
|
|
| .drop input { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| opacity: 0; |
| pointer-events: none; |
| } |
|
|
| .hint { |
| color: var(--ink-faint); |
| font-size: 0.9rem; |
| font-weight: 400; |
| } |
|
|
| .thumbs { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.625rem; |
| } |
|
|
| .thumbs:empty { |
| display: none; |
| } |
|
|
| .thumb { |
| margin: 0; |
| display: grid; |
| gap: 0.25rem; |
| } |
|
|
| .thumb canvas { |
| display: block; |
| height: 6rem; |
| border-radius: 0.5rem; |
| background: var(--surface); |
| } |
|
|
| .thumb figcaption { |
| font-size: 0.75rem; |
| } |
|
|
| .request .row { |
| justify-content: flex-start; |
| } |
|
|
| #reading { |
| flex: 1; |
| min-width: 6rem; |
| } |
|
|
| .dot { |
| display: inline-block; |
| width: 0.5rem; |
| height: 0.5rem; |
| margin-right: 0.5rem; |
| border-radius: 50%; |
| background: currentColor; |
| vertical-align: 0.1em; |
| } |
|
|
| .request[data-phase="deciding"] .dot { |
| animation: pulse 1.2s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse { |
| 50% { |
| opacity: 0.3; |
| } |
| } |
|
|
| .answers { |
| gap: 1.25rem; |
| } |
|
|
| .questions { |
| display: grid; |
| gap: 0.875rem; |
| } |
|
|
| .questions:empty { |
| display: none; |
| } |
|
|
| .question { |
| background: var(--surface); |
| border-radius: 0.875rem; |
| padding: 0.875rem 1rem; |
| display: grid; |
| gap: 0.375rem; |
| } |
|
|
| .question header { |
| justify-content: space-between; |
| } |
|
|
| .name { |
| font-family: ui-monospace, "SF Mono", Menlo, monospace; |
| font-size: 0.9375rem; |
| } |
|
|
| .kind { |
| font-size: 0.75rem; |
| font-weight: 550; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| color: var(--ink-faint); |
| } |
|
|
| .decision { |
| margin: 0; |
| } |
|
|
| .decision .value { |
| font-size: 1.375rem; |
| font-weight: 650; |
| letter-spacing: -0.02em; |
| } |
|
|
| |
| .options { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| display: grid; |
| gap: 0.375rem; |
| } |
|
|
| .option { |
| display: grid; |
| grid-template-columns: minmax(6rem, 14rem) 1fr 3.75rem; |
| align-items: center; |
| gap: 0.625rem; |
| font-size: 0.875rem; |
| } |
|
|
| .option .label { |
| overflow-wrap: anywhere; |
| color: var(--ink-soft); |
| } |
|
|
| .track { |
| height: 0.5rem; |
| border-radius: 999px; |
| background: var(--hairline); |
| overflow: hidden; |
| } |
|
|
| .bar { |
| display: block; |
| height: 100%; |
| border-radius: 999px; |
| background: var(--ink-faint); |
| transition: width 0.4s var(--ease-spring); |
| } |
|
|
| .option[data-chosen="true"] .label { |
| color: var(--ink); |
| font-weight: 600; |
| } |
|
|
| .option[data-chosen="true"] .bar { |
| background: var(--accent); |
| } |
|
|
| .percent { |
| text-align: right; |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .metrics { |
| margin: 0; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(7.75rem, 1fr)); |
| gap: 0.625rem; |
| } |
|
|
| .metrics > div { |
| background: var(--surface); |
| border-radius: 0.875rem; |
| padding: 0.75rem 0.875rem; |
| display: grid; |
| gap: 0.125rem; |
| align-content: start; |
| } |
|
|
| .metrics dt { |
| font-size: 0.75rem; |
| font-weight: 550; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| color: var(--ink-faint); |
| } |
|
|
| .metrics dd { |
| margin: 0; |
| } |
|
|
| .metrics dd:not(.muted) { |
| font-size: 1.5rem; |
| font-weight: 650; |
| letter-spacing: -0.02em; |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .metrics dd.muted { |
| font-size: 0.75rem; |
| line-height: 1.35; |
| } |
|
|
| |
| .json summary { |
| cursor: pointer; |
| font-size: 0.875rem; |
| font-weight: 550; |
| color: var(--ink-soft); |
| } |
|
|
| .text { |
| margin: 0.5rem 0 0; |
| max-height: 16rem; |
| overflow-y: auto; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| font-size: 0.8125rem; |
| color: var(--ink-faint); |
| } |
|
|
| .placeholder { |
| margin: 0; |
| } |
|
|
| |
| .sizes { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| margin-top: 0.75rem; |
| } |
|
|
| .sizes .chip { |
| text-decoration: none; |
| } |
|
|
| .sizes .chip[data-current="true"] { |
| background: var(--ink); |
| border-color: var(--ink); |
| color: var(--canvas); |
| } |
|
|
