/* Hallmark · route: custom (tuned) · macrostructure: Workbench · tone: atmospheric terminal.
 * Vibe: imperial violet, brushed metal, disciplined market instrument.
 * Paper: oklch(12.5% .027 300) · accent: oklch(76% .185 315).
 * Fonts: Onest / Unbounded · axes: dark / geometric-sans / violet.
 * Pre-emit critique: P5 H5 E5 S5 R5 V4. */
@import url('./tokens.css');
@import url('./shared/generation.css');
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font: 14px/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; }
button, select { font: inherit; color: inherit; touch-action: manipulation; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
button:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
button:active:enabled { transform: translateY(1px); }
a { color: inherit; text-underline-offset: 3px; }
:where(.masthead, .level-chip, .pair-select, .current-signal, .control-heading, .primary, .chart-zoom) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
p, h1, h2 { margin: 0; }
h1 { overflow-wrap: anywhere; min-width: 0; font: 600 13px/1.3 var(--font-ui); letter-spacing: .7px; text-transform: uppercase; }
h2 { font-size: 13px; font-weight: 500; }
[hidden] { display: none !important; }
.sr-only, .native-control { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.workbench { width: 100%; max-width: 520px; margin-inline: auto; padding: max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(var(--dock-height) + 24px) max(16px,env(safe-area-inset-left)); }
.brand-hero { position: relative; isolation: isolate; margin-top: 12px; aspect-ratio: 3 / 1; border: 1px solid var(--color-clear); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface-panel) padding-box, var(--surface-edge) border-box; box-shadow: var(--shadow-panel); }
.brand-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-wordmark { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--color-ink); font: 500 clamp(20px,6vw,28px)/1.12 var(--font-brand); letter-spacing: -.6px; }
.hero-wordmark span { display: block; color: var(--color-accent-bright); }
.brand-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,var(--color-clear) 32%,var(--color-rim) 48%,var(--color-clear) 64%); transform: translateX(-120%); }
body[data-generating='true'] .brand-hero::after { animation: seal-light 2.4s ease-in-out; }
@keyframes seal-light { to { transform: translateX(120%); } }
.masthead { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 8px; padding: 4px 8px; border: 1px solid var(--color-clear); border-radius: 16px; background: var(--surface-panel) padding-box, var(--surface-edge) border-box; box-shadow: var(--shadow-panel); }
.identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.masthead .brand-mark { width: 26px; height: 26px; }
.mark-frame { fill: var(--color-field); stroke: var(--color-accent-rim); stroke-width: .8; }
.metal-light { stop-color: var(--color-metal-light); }
.metal-mid { stop-color: var(--color-metal-mid); }
.mark-main { fill: url(#magic-metal); stroke: none; }
.mark-cut { fill: var(--color-accent); stroke: none; }
.header-tools { position: relative; z-index: 20; display: flex; flex-shrink: 0; border: 1px solid var(--color-rim-faint); border-radius: 10px; background: var(--color-paper); }
/* Hallmark · component: language menu · genre: dark terminal · theme: MagicTrade violet
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: token-verified */
.language { position: relative; display: flex; min-width: 68px; }
.language-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 68px; min-height: 44px; padding: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--color-ink); background: var(--color-clear); font-size: 12px; font-weight: 600; letter-spacing: .35px; white-space: nowrap; }
.language-toggle > .language-code { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); }
.language-code { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; font-variant-numeric: tabular-nums; }
.language-chevron { position: absolute; inset-inline-end: 10px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.language[data-open='true'] .language-toggle { color: var(--color-accent-bright); background: var(--color-accent-soft); box-shadow: inset 0 -1px 0 var(--color-accent-rim), inset 0 1px 0 var(--color-rim-faint); }
.language[data-open='true'] .language-chevron { transform: rotate(180deg); }
.language-menu { position: absolute; z-index: 1; top: calc(100% + 8px); inset-inline-end: 0; width: 172px; padding: 4px; border: 1px solid var(--color-clear); border-radius: 12px; overflow: clip; background: var(--surface-panel) padding-box, var(--surface-edge) border-box; box-shadow: var(--shadow-panel); }
.language-option { width: 100%; min-height: 46px; display: grid; grid-template-columns: 32px minmax(0,1fr) 20px; align-items: center; gap: 8px; padding: 0 9px; border-radius: 8px; color: var(--color-muted); text-align: start; white-space: nowrap; }
.language-option .language-code { min-height: 24px; border: 1px solid var(--color-rule); border-radius: 6px; color: var(--color-ink); background: var(--color-field); font-size: 10px; font-weight: 700; letter-spacing: .4px; }
.language-name { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; }
.language-check { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.language-option[aria-checked='true'] { color: var(--color-accent-bright); background: var(--color-accent-soft); }
.language-option[aria-checked='true'] .language-code { border-color: var(--color-accent-rim); color: var(--color-accent-bright); background: var(--color-control); }
.language-option[aria-checked='true'] .language-check { opacity: 1; }
.language-toggle:hover, .language-toggle.is-hover, .language-option:hover, .language-option.is-hover { color: var(--color-accent-bright); background: var(--color-accent-soft); }
.language-toggle:focus-visible, .language-toggle.is-focus, .language-option:focus-visible, .language-option.is-focus { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.language-toggle:active:enabled, .language-toggle.is-active, .language-option:active:enabled, .language-option.is-active { transform: translateY(1px); }
.language-toggle:disabled, .language[data-state='loading'] .language-toggle { color: var(--color-muted); }
.language[data-state='error'] .language-toggle { color: var(--color-warning); box-shadow: inset 0 0 0 1px var(--color-warning); }
.language[data-state='success'] .language-toggle { color: var(--color-up); box-shadow: inset 0 0 0 1px var(--color-up); }
.level-chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 8px; border-right: 1px solid var(--color-grid); color: var(--color-tier); font-size: 11px; font-weight: 500; white-space: nowrap; }
.level-chip svg { width: 12px; height: 16px; }
.connection { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; }
.connection i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
body[data-feed='live'] .connection i { color: var(--color-up); }
body[data-feed='stale'] .connection, body[data-feed='error'] .connection { color: var(--color-warning); }
#signal-form { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.terminal-surface { border: 1px solid var(--color-clear); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface-panel) padding-box, var(--surface-edge) border-box; box-shadow: var(--shadow-panel); }
.chart-board { position: relative; background: var(--color-clear); }
.market-header { padding: 4px 12px 0; background: var(--color-accent-soft); border-bottom: 1px solid var(--color-rim-faint); }
.pair-select { display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; text-align: left; white-space: nowrap; }
.pair-select strong { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.pair-select svg { margin-left: auto; width: 18px; height: 18px; color: var(--color-muted); }
.pair-flags img { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; border: 1px solid var(--color-panel); }
.pair-flags img + img { margin-left: -6px; }
.pair-flags { display: inline-flex; flex-shrink: 0; align-items: center; width: 42px; }
.market-tag { font-size: 10px; font-weight: 500; letter-spacing: .2px; color: var(--color-muted); background: var(--color-control); padding: 3px 6px; border-radius: 5px; }
.quote-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 12px 8px; gap: 8px; }
.quote-main { display: flex; flex-direction: column; gap: 1px; }
.eyebrow { font-size: 12px; color: var(--color-muted); }
#market-price { font: 500 30px/1.15 var(--font-numeric); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.quote-change { display: flex; align-items: flex-end; flex-direction: column; gap: 1px; padding-bottom: 3px; color: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.quote-change strong { font-size: 13px; font-weight: 500; }
[data-change='up'] #candle-change { color: var(--color-up); }
[data-change='down'] #candle-change { color: var(--color-down); }
.ohlc { position: absolute; z-index: 2; top: 8px; left: 12px; right: 12px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 8px; border: 1px solid var(--color-grid); border-radius: 6px; background: var(--color-panel); color: var(--color-muted); font-size: 10px; font-variant-numeric: tabular-nums; pointer-events: none; }
.ohlc span { display: flex; flex-direction: column; gap: 1px; }
.ohlc b { font-size: 11px; font-weight: 400; color: var(--color-ink); }
.ohlc span:last-child { text-align: right; }
.chart-wrap { position: relative; height: clamp(168px,calc(100svh - var(--dock-height) - var(--brand-height) - 400px),276px); background: var(--color-panel); }
#chart { position: absolute; inset: 0; z-index: 0; }
.chart-cover { position: absolute; inset: 0; z-index: 3; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px; background: var(--color-panel); color: var(--color-muted); font-size: 13px; padding: 24px; text-align: center; }
.chart-cover button { min-height: 44px; min-width: 100px; padding-inline: 12px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); color: var(--color-accent); }
.chart-loader { width: 28px; height: 28px; border: 1px solid var(--color-rule); border-top-color: var(--color-accent); border-radius: 50%; animation: rotate 1.2s linear infinite; }
body[data-feed='error'] .chart-loader, body[data-feed='locked'] .chart-loader { display: none; }
.chart-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; }
#chart-interval { min-width: 64px; min-height: 44px; border: 0; border-radius: 6px; padding-left: 8px; background: var(--color-clear); color: var(--color-ink); font-size: 12px; }
.timeframes { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--color-muted); }
.chart-zoom { display: flex; }
.chart-zoom button { min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--color-muted); font-size: 20px; font-weight: 400; }
.chart-zoom svg { width: 16px; height: 16px; }
.chart-caption { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 12px; padding: 0; border-top: 1px solid var(--color-grid); font-size: 10px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.chart-source-button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; white-space: nowrap; }
.chart-source-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.chart-credits { color: var(--color-muted); font-size: 12px; line-height: 1.6; padding-bottom: 8px; }
.chart-credits a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); white-space: nowrap; }
.current-signal { position: relative; min-height: 116px; padding: 12px; border-top: 1px solid var(--color-rim-faint); background: var(--surface-panel); scroll-margin-block: 12px; }
.signal-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.signal-top h2 { color: var(--color-muted); font-size: 12px; font-weight: 400; }
.signal-status { color: var(--color-muted); font-size: 11px; }
.empty { display: flex; align-items: center; gap: 12px; min-height: 90px; }
.empty > svg { width: 30px; height: 30px; color: var(--color-muted); }
.empty p { font-size: 13px; font-weight: 500; }
.empty-hint { display: block; font-size: 11px; color: var(--color-muted); margin-top: 2px; }
.current-signal:has(#active[hidden]) { padding: 12px; }
.current-signal:has(#active[hidden]) .signal-top { display: none; }
.signal-ticket { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; }
.direction-row { display: flex; align-items: center; gap: 8px; color: var(--color-up); min-width: 0; }
.direction-symbol { display: grid; place-items: center; width: 32px; height: 36px; border-radius: 8px; border: 1px solid color-mix(in oklch, currentColor 30%, var(--color-clear)); background: var(--surface-control); box-shadow: inset 0 1px 0 var(--color-rim-faint); flex-shrink: 0; }
.direction-symbol .direction-icon { width: 24px; height: 24px; }
.direction { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.5px; line-height: 1.2; }
#signal-pair { display: block; font-size: 12px; font-weight: 500; color: var(--color-ink); white-space: nowrap; }
body[data-direction='down'] .direction-row { color: var(--color-down); }
body[data-direction='down'] .direction-icon { transform: rotate(90deg); }
.countdown { display: flex; flex-direction: column; align-items: flex-end; }
#timer { font: 500 28px/1.15 var(--font-numeric); font-variant-numeric: tabular-nums; letter-spacing: -.7px; }
.countdown > span { color: var(--color-muted); font-size: 10px; }
.confidence-row { display: flex; align-items: baseline; gap: 6px; padding-top: 2px; color: var(--color-muted); font-size: 11px; }
#confidence { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-ink); padding: 1px 5px; border-radius: 4px; background: var(--color-accent-soft); }
progress { display: block; width: 100%; max-width: 88px; height: 2px; margin: 5px 0 6px; border: 0; border-radius: 3px; overflow: hidden; background: var(--color-rule); }
progress::-webkit-progress-bar { background: var(--color-rule); } progress::-webkit-progress-value { background: var(--color-accent); } progress::-moz-progress-bar { background: var(--color-accent); }
.signal-outcome { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 88px; font-size: 10px; color: var(--color-muted); text-align: right; scroll-margin-block-end: calc(var(--dock-height) + 12px); }
.signal-outcome strong { font-size: 18px; font-weight: 600; color: var(--color-ink); }
body[data-state='result'] .countdown, body[data-state='result'] #progress { display: none; }
body[data-outcome='win'] .signal-outcome strong { color: var(--color-up); }
body[data-outcome='loss'] .signal-outcome strong { color: var(--color-down); }
body[data-outcome='draw'] .signal-outcome strong { color: var(--color-accent); }
.duration-controls { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 12px; align-items: center; }
.control-heading { display: flex; align-items: center; color: var(--color-muted); }
.control-heading h2 { font-size: 12px; font-weight: 400; }
.control-heading svg { display: none; }
.duration-buttons { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-panel); box-shadow: inset 0 2px 8px var(--color-shadow); }
.duration-buttons button { min-width: 44px; min-height: 44px; flex: 1; border: 0; border-radius: 5px; font-size: 13px; font-weight: 500; color: var(--color-muted); background: var(--color-clear); }
.duration-buttons button[aria-pressed='true'] { color: var(--color-accent-bright); background: var(--surface-control); box-shadow: inset 0 1px 0 var(--color-rim), inset 0 -2px 0 var(--color-accent); }
.execution-dock { position: fixed; z-index: 10; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%,520px); padding: 12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); border-top: 1px solid var(--color-rim-faint); background: var(--color-paper); }
html { scroll-padding-bottom: calc(var(--dock-height) + 12px); }
.action-dock { margin-top: 12px; }
.primary { position: relative; overflow: hidden; min-height: 52px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid var(--color-accent-bright); border-radius: var(--radius-control); color: var(--color-action-ink); background: var(--surface-action); box-shadow: inset 0 1px 0 var(--color-metal-light), inset 0 -2px 0 var(--color-accent-deep), 0 0 20px var(--color-accent-soft); font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; transition: transform .15s ease; }
.primary .action-wave { width: 26px; height: 24px; }
body[data-generating='true'] .action-wave { animation: pulse .8s ease-in-out infinite alternate; }
.demo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; padding-top: 8px; color: var(--color-muted); font-size: 12px; }
.segments { display: flex; gap: 4px; }
.segments button { min-width: 44px; min-height: 44px; border-radius: 10px; }
.segments button[aria-pressed='true'] { background: var(--color-accent-soft); color: var(--color-accent); }
.notice { padding: 16px; margin-block: 8px; border: 1px solid var(--color-warning); border-radius: var(--radius-control); color: var(--color-ink); font-size: 13px; }
.notice button, .notice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--color-accent); }
dialog { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(100%,520px); max-height: 85svh; overflow-y: auto; padding: 12px 20px max(24px,env(safe-area-inset-bottom)); border: 1px solid var(--color-clear); border-radius: 20px 20px 0 0; background: var(--surface-panel) padding-box, var(--surface-edge) border-box; color: var(--color-ink); box-shadow: 0 -16px 60px var(--color-shadow); }
dialog::backdrop { background: var(--color-backdrop); backdrop-filter: blur(4px); }
.sheet-handle { width: 32px; height: 4px; border-radius: 4px; background: var(--color-rule); margin: 0 auto 8px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.sheet-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -.5px; }
.sheet-head button { min-height: 44px; padding: 0 8px; color: var(--color-accent); }
.level-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 12px; border-top: 1px solid var(--color-rule); gap: 16px; }
.level-row small { display: block; color: var(--color-muted); padding-top: 4px; font-size: 12px; }
.level-row b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.level-row[data-current='true'] { background: var(--color-accent-soft); color: var(--color-accent); }
.sheet-note { font-size: 12px; color: var(--color-muted); padding: 16px 0; }
.pair-group { color: var(--color-muted); font-size: 12px; padding: 12px 0 4px; }
.pair-option { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--color-rule); border-radius: 0; text-align: left; }
.pair-option strong { font-size: 15px; font-weight: 500; }
.pair-option[aria-pressed='true'] { border-radius: 12px; border-color: var(--color-clear); background: var(--color-accent-soft); color: var(--color-accent); }
.pair-option .market-tag { margin-left: auto; }
.generation { position: absolute; z-index: 4; inset: 0; min-height: 0; display: grid; grid-template-columns: 56px minmax(0,1fr); align-content: center; column-gap: 12px; padding: 12px; text-align: left; background: var(--surface-panel); }
.generation-visual { width: 52px; height: 52px; display: grid; place-items: center; align-self: center; grid-row: 1 / 4; margin: 0; border-radius: 50%; background: var(--brand-art) 85% 50% / auto 100% no-repeat; }
.generation-visual .brand-mark { display: none; }
.generation-ring { position: absolute; inset: 0; border: 1px solid var(--color-rule); border-top-color: var(--color-accent); border-radius: 50%; animation: rotate 4s linear infinite; }
.generation-ring.inner { inset: 5px; border-top-color: var(--color-rule); border-bottom-color: var(--color-accent); animation-duration: 3s; animation-direction: reverse; }
.generation-title { font: 500 13px/1.4 var(--font-ui); }
.generation-pair { font: 11px/1.5 var(--font-ui); margin: 2px 0 6px; }
.generation-steps { gap: 6px; }
.generation-steps i { width: 18px; height: 2px; }
/* Retain the measured ticket height while the shared layer hides its contents. */
body[data-generating='true'] .current-signal > :not(.generation) { visibility: hidden; }
body[data-generating='true'] .current-signal { visibility: visible; }
body[data-generating='true'] .current-signal #active:not([hidden]) { display: block !important; }
body[data-generating='true'] .current-signal #empty:not([hidden]) { display: flex !important; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulse { to { opacity: .5; } }
@media (min-width: 600px) { .workbench { padding-top: 20px; } .chart-wrap { height: 248px; } }
@media (max-width: 350px) {
  .workbench { padding-inline: 12px; }
  h1 { font-size: 12px; letter-spacing: .3px; }
  .masthead .brand-mark { width: 24px; height: 24px; }
  .identity { gap: 8px; }
  .language, .language-toggle { min-width: 64px; }
  .language-toggle { padding-inline: 8px; }
  .market-header { padding-inline: 12px; }
  .quote-row { padding-inline: 12px; }
  #market-price { font-size: 30px; }
  .quote-change strong { font-size: 12px; }
  .ohlc { padding-inline: 12px; }
  .chart-toolbar { padding-inline: 10px; }
  .timeframes { gap: 0; }
  .chart-caption { margin-inline: 12px; }
  .quote-time > span { display: none; }
  .duration-controls { grid-template-columns: 72px minmax(0,1fr); gap: 8px; }
  .execution-dock { padding-inline: 12px; }
  .direction-symbol { width: 32px; height: 36px; }
  .direction-row { gap: 8px; }
  .direction { font-size: 23px; }
  #timer { font-size: 27px; }
}
@media (hover: hover) { button:hover:enabled { filter: brightness(1.14); } a:hover { color: var(--color-ink); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.duration-buttons { overflow-x: auto; scrollbar-width: thin; max-width: 100%; }
.duration-buttons button { flex: 1 0 64px; white-space: nowrap; }