/* Compact settings row and accessible mobile option sheets. */
.compact-options { display: grid; grid-template-columns: minmax(0,2.15fr) minmax(0,1fr); gap: 8px; align-items: stretch; margin-top: 16px; }
.compact-options .native-option { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.option-control { display: flex; align-items: center; min-width: 0; gap: 8px; height: 48px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 14px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.25; cursor: pointer; text-align: left; }
.option-control:hover { border-color: var(--line-strong); }
.option-control:focus-visible, .options-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.option-control:disabled { opacity: .6; cursor: default; }
.style-control > span:first-child { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.count-control { justify-content: center; gap: 5px; padding-inline: 8px; white-space: nowrap; }
.count-control > span:first-child { font-size: 14px; flex: none; }
.count-control strong { font-size: 18px; font-weight: 600; }
.count-control > strong { flex: none; }
.count-control .option-chevron { width: 14px; height: 14px; }
.option-chevron { flex: none; width: 16px; height: 16px; background: currentColor; mask: url('/icons/chevron-down.svg') center/contain no-repeat; -webkit-mask: url('/icons/chevron-down.svg') center/contain no-repeat; }
.options-dialog { position: fixed; inset: 0; margin: auto; padding: 24px; width: min(520px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--card-border); border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); box-sizing: border-box; }
.options-dialog::backdrop { background: rgba(8,12,20,.68); backdrop-filter: blur(5px); }
.sheet-grip { display: none; }
.options-dialog-head { position: sticky; top: -24px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; background: var(--card); }
.options-dialog-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.options-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: transparent; color: var(--muted); border: 1px solid var(--card-border); border-radius: 12px; cursor: pointer; }
.options-close span { width: 24px; height: 24px; background: currentColor; mask: url('/icons/x-mark.svg') center/contain no-repeat; -webkit-mask: url('/icons/x-mark.svg') center/contain no-repeat; }
.sheet-help { color: var(--muted); margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.page-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 22px; }
.page-preset { min-height: 48px; padding: 10px 4px; border: 1px solid var(--card-border); border-radius: 14px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.page-preset[aria-pressed="true"], .style-choice[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft-strong); }
.custom-pages-label { display: block; font-size: 15px; margin-bottom: 10px; }
.custom-pages-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.custom-pages-row input { min-width: 0; width: 100%; height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--surface-2); color: var(--ink); }
.custom-pages-row .primary { min-height: 48px; padding: 0 22px; }
.page-error { color: var(--danger); font-size: 14px; margin: 8px 0 0; }
.page-limit { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 16px 0 0; }
.style-choices { display: grid; gap: 8px; }
.style-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; min-height: 72px; text-align: left; border: 1px solid transparent; border-radius: 18px; background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.style-choice > span:first-child { min-width: 0; flex: 1; }
.style-choice b { display: block; font-size: 17px; font-weight: 500; line-height: 1.4; }
.style-choice small { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 5px; }
.option-check { flex: none; width: 20px; height: 20px; background: currentColor; mask: url('/icons/check.svg') center/contain no-repeat; -webkit-mask: url('/icons/check.svg') center/contain no-repeat; }
.style-choice .option-check { visibility: hidden; }
.style-choice[aria-checked="true"] .option-check { visibility: visible; }
@media(max-width:760px) {
  .compact-options { grid-template-columns: minmax(0,2.15fr) minmax(0,1fr); }
  .options-dialog { inset: auto auto var(--options-bottom,0px) var(--options-left,0px); width: var(--options-width,100%); max-width: none; max-height: min(var(--options-max-height,82dvh),760px); margin: 0; padding: 10px 20px max(24px,env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .options-dialog[data-kind="style"] { max-height: min(var(--options-max-height,60dvh),480px); }
  .sheet-grip { display: block; width: 30px; height: 4px; border-radius: 4px; background: var(--muted); opacity: .45; margin: 0 auto 12px; }
  .options-dialog-head { top: -10px; margin-bottom: 20px; padding-block: 4px; }
}
@media(max-width:350px) {
  .option-control { padding-inline: 10px; gap: 5px; }
  .count-control { gap: 5px; padding-inline: 8px; }
  .count-control .option-chevron { display: none; }
  .options-dialog { padding-inline: 16px; }
}