/* Length question + options ("How long do you have right now?" 1 minute · 5 minutes · Full), sits in .page-controls beside the
   Dark/Light toggle. Markup: length-switch.html; current page: length-switch.js */
.length-switch{display:flex;align-items:center;gap:10px;font:10px Duo,monospace;white-space:nowrap;color:var(--opening-ink,currentColor)}
.length-q{color:var(--opening-muted,currentColor);opacity:.9}
.length-opts{display:inline-flex;align-items:stretch;border:1px solid #87927a;border-radius:20px;min-height:32px;overflow:hidden}
.length-opts a{display:flex;align-items:center;padding:0 11px;color:inherit;text-decoration:none;transition:background .15s ease-out,color .15s ease-out}
.length-opts a+a{border-left:1px solid #87927a}
.length-opts a:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.length-opts a[aria-current=page]{background:var(--opening-ink,#26302a);color:var(--opening-surface,#f4f0e6)}
.length-opts a:focus-visible{outline:1.5px solid currentColor;outline-offset:-3px;border-radius:20px}
/* phone: length-switch.js moves it under the name and deck (.is-inline); question on its own line, options below */
.length-switch.is-inline{flex-wrap:wrap;justify-content:flex-start;row-gap:8px;margin:18px 0 0;font-size:10px;white-space:normal}
.length-switch.is-inline .length-q{flex-basis:100%}
.length-switch.is-inline .length-opts{min-height:30px}
.length-switch.is-inline .length-opts a{padding:0 10px}