/* Phone layout: paste box first, settings next, result and Copy right after. */
@media (max-width: 850px) {
  /* Tool picker on the home page: a row of buttons instead of a drop-down. */
  .editor:not([data-focused]) .tool-shelf { display: block; padding: 8px 0 8px 9px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .editor:not([data-focused]) .shelf-heading, .editor:not([data-focused]) .tool-group p { display: none; }
  .editor:not([data-focused]) .tool-group { display: contents; }
  .editor:not([data-focused]) .tool-group button { display: inline-block; width: auto; min-height: 40px; margin: 0 6px 0 0; padding: 6px 12px; border: 1px solid var(--line); background: var(--white); white-space: nowrap; font-size: .9rem; box-shadow: none; }
  .editor:not([data-focused]) .tool-group button[aria-pressed="true"] { background: var(--acid); border-color: var(--rule); box-shadow: none; }
  .editor:not([data-focused]) .mobile-tools { display: none; }
  .editor:not([data-focused]) .toolbar-more { width: auto; }
  .editor:not([data-focused]) { display: flex; flex-direction: column; }
  .editor:not([data-focused]) .tool-shelf { order: -1; }

  /* Order of things inside the editor. */
  .bench-content { display: flex; flex-direction: column; }
  .bench-content > * { order: 20; }
  .editor-panes, .editor-actions { display: contents; }
  .editor-toolbar { order: 1; padding-block: 8px; }
  .editor-panes > .pane:not(.pane-output) { order: 2; }
  .tool-settings { order: 3; }
  .editor-actions .options { order: 4; padding: 0 9px; }
  .editor-panes > .pane-output { order: 5; }
  .diff-result { order: 6; }
  .editor-actions .output-actions { order: 7; padding: 10px 9px; width: auto; margin: 0; }
  .undo-row { order: 8; }
  .editor .status { order: 9; }

  .bench-heading { flex: 1 1 auto; }
  .bench-heading p { display: none; }
  .bench-heading h2 { font-size: 1rem; }
  .pane-header { min-height: 40px; }
  .pane-output, .pane-header { border-left: 0; }
  .editor-panes > .pane { border-top: 1px solid var(--line); }
  .output-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .output-actions .button.primary { grid-column: 1 / -1; order: -1; min-height: 48px; font-size: 1rem; }
  .case-switch { display: flex; flex-wrap: wrap; gap: 6px; }
  .case-switch button { flex: 1 1 calc(50% - 6px); }
}

@media (max-width: 620px) {
  /* Less text above the paste box. */
  .hero { padding: 14px 0 10px; }
  .eyebrow { display: none; }
  h1 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); line-height: 1.05; }
  .home-hero .lede { display: none; }
  .focus-hero { padding: 12px 0 10px; }
  .focus-hero h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .focus-hero .lede { margin-top: 6px; font-size: .92rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .crumbs { display: none; }
  .pane textarea { min-height: 150px; }
  .editor-panes > .pane-output textarea { min-height: 130px; }
  .tool-settings { padding-block: 6px; }
  .privacy-note { font-size: .8rem; }

  /* Compact cookie banner. */
  .analytics-banner { inset-inline: .5rem; inset-block-end: max(.5rem, env(safe-area-inset-bottom)); padding: .65rem .75rem; }
  .analytics-banner h2 { font-size: .95rem; margin: 0 0 4px; }
  .analytics-banner p { font-size: .8rem; line-height: 1.4; margin: 0 0 6px; }
  .analytics-actions { display: flex; gap: 8px; }
  .analytics-actions button { flex: 1 1 0; min-height: 44px; font-size: .85rem; }
}