/* Comfortable touch targets and layouts without hiding wheel features. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
button, a, summary { touch-action: manipulation; }
button, input, select, textarea { min-width: 0; }
.stage-header > div, .wheels > div, .saved-row strong { min-width: 0; }
.stage-header h2, .stage-header p, .wheel-label, .last-result { overflow-wrap: anywhere; }
.stage-header .icon-button { flex-shrink: 0; }
.wheels > div { max-width: 100%; }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
dialog input, dialog textarea, dialog select { font-size: 16px; }
dialog .check { min-height: 44px; }
dialog input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
#toast { bottom: max(18px, env(safe-area-inset-bottom)); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  body { font-size: 16px; }
  button { min-height: 44px; }
  header { height: 68px; padding: 0 16px; gap: 12px; }
  nav { display: none; }
  .mobile-tools { display: block; }
  .library { min-width: 44px; }
  .library span { display: inline; font-size: 14px; }
  .intro { padding: 18px 16px 20px; }
  .intro .eyebrow { display: none; }
  .intro h1 { font-size: clamp(28px, 5vw, 38px); margin: 0 0 8px; letter-spacing: -1px; }
  .intro p { font-size: 14px; max-width: 38rem; }
  .spark { font-size: 25px; margin-left: 5px; }
  .workspace, .quick-start, .how, .faq { margin-left: 12px; margin-right: 12px; }
  .workbar { flex-wrap: wrap; padding: 10px; gap: 10px; }
  .wheel-tabs { max-width: 100%; width: 100%; scrollbar-width: thin; }
  .wheel-tab { font-size: 14px; flex-shrink: 0; max-width: 220px; }
  .work-actions { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; white-space: normal; }
  .work-actions button, .work-actions .share-button { font-size: 14px; padding: 8px 6px; line-height: 1.3; }
  .playground { display: block; }
  .stage { padding: 18px 14px; }
  .stage-header h2 { font-size: 20px; }
  .stage-header p { font-size: 14px; }
  .stage-header .icon-button { width: 44px; height: 44px; margin-left: 8px; }
  .wheels { padding: 18px 3px 12px; }
  .wheel-wrap { width: min(100%, 380px); }
  .wheels > div:only-child { width: 100%; display: grid; justify-items: center; }
  .wheel-small { width: 250px; }
  .wheel-small .wheel-center { font-size: 14px; }
  .spin-hint { font-size: 14px; }
  kbd { font-size: 12px; }
  .stage-tools { gap: 8px; }
  .stage-tools button { font-size: 14px; padding: 8px 12px; }
  .last-result { font-size: 14px; }
  .editor { border-left: 0; border-top: 1px solid var(--line); padding: 0 16px 18px; }
  .editor-tabs button { font-size: 16px; }
  .editor-tabs span { font-size: 13px; }
  .editor-note { font-size: 14px; flex-wrap: wrap; }
  .editor-note span { font-size: 12px; }
  #entryInput, #search, .entry .entry-name, .advanced-entry input, .mode-row select { font-size: 16px; }
  #entryInput { min-height: 100px; }
  .primary, .subtle { font-size: 16px; }
  .list-toolbar { gap: 4px; flex-wrap: wrap; }
  .list-toolbar button { font-size: 14px; padding: 8px; }
  .entry-list { height: auto; max-height: 360px; }
  .entry { gap: 4px; min-height: 52px; }
  .entry .entry-name { min-height: 44px; }
  .entry button { min-width: 44px; font-size: 20px; }
  .mode-row { flex-wrap: wrap; font-size: 14px; gap: 8px; }
  .mode-row select { min-height: 44px; flex: 1; }
  .editor-bottom { font-size: 12px; flex-wrap: wrap; }
  .editor-bottom button { font-size: 14px; padding: 8px; }
  .advanced-entry { grid-template-columns: 44px minmax(0,1fr) 68px 44px 44px; gap: 6px; align-items: center; }
  .advanced-entry input:not([type=checkbox]), .advanced-entry button { min-height: 44px; }
  .advanced-entry input[type=checkbox] { width: 44px; height: 44px; margin: 0; }
  .advanced-entry input[type=color] { height: 44px; }
  .advanced-entry .entry-extras { grid-column: 1/-1; }
  .advanced-entry button[data-entryaction=delete] { font-size: 20px; }
  .advanced-entry .entry-extras button { min-width: 44px; font-size: 18px; }
  .quick-start p, .how-heading p, .steps p, .faq details p { font-size: 16px; }
  .quick-start > button, .faq summary { font-size: 16px; }
  .template strong { font-size: 18px; }
  .template small { font-size: 13px; }
  footer p, footer button { font-size: 14px; }
  footer small { font-size: 12px; }
  dialog { padding: 26px 20px 20px; width: calc(100% - 24px); }
  dialog h2 { padding-right: 30px; }
  dialog p, dialog label, .result-row, .empty, .mini-stat { font-size: 16px; }
  dialog .modal-close { min-width: 44px; min-height: 44px; right: 6px; top: 6px; }
  .dialog-grid button { min-width: 0; overflow-wrap: anywhere; }
  .dialog-grid button small, .file-label input { font-size: 14px; }
  .saved-row { flex-wrap: wrap; }
  .saved-row strong { flex-basis: 100%; }
  .saved-row button { font-size: 14px; min-width: 44px; }
  .result-row { align-items: start; }
  #resultsPanel { max-height: none; }
  body.focus .wheel-wrap { width: min(78vw, 60dvh); }
}

@media (max-width: 480px) {
  .work-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .advanced-entry { grid-template-columns: 32px minmax(0,1fr) 64px 44px; }
  .advanced-entry input[data-field=text] { grid-column: 2/4; }
  .advanced-entry button[data-entryaction=delete] { grid-column: 4; grid-row: 1; }
  .advanced-entry input[data-field=weight] { grid-column: 2; grid-row: 2; }
  .advanced-entry input[data-field=color] { grid-column: 3/5; grid-row: 2; width: 100%; }
  .advanced-entry .entry-extras { flex-wrap: wrap; }
  .advanced-entry .entry-extras input { flex-basis: 100%; }
  dialog .grid2, .dialog-grid { grid-template-columns: minmax(0,1fr); }
  dialog .actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .template-grid { grid-template-columns: minmax(0,1fr); }
  .template { min-height: 110px; }
  .intro .mobile-break { display: none; }
}