/* blur-picture.com additions to the editor's own editor.css (unchanged). Layout only: the tools, their names
   and icons are the editor's. */
body.site-dragover .stage { outline: 3px dashed var(--accent); outline-offset: -10px; }

/* The trust line under Upload image (site only). */
.site-note { margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--muted); }
body:not(.overlay) .sec-download > .site-note { order: 13; }

/* Phones: the toolbar moves under the picture (within thumb reach) and its four blocks
   (Tool, Blur, Edit, Download) pack into a compact grid; the block names give way to save height. */
@media (max-width: 520px) {
  .head { min-height: 0; padding: 6px 12px; gap: 4px 12px; }
  .head h1 { font-size: 16px; }
  .head .check { font-size: 13px; gap: 6px; }
  .hint { order: 3; padding: 6px 12px; height: auto; min-height: 36px; font-size: 13px; }
  /* 2026-10-19: the hint wraps instead of ending in "..." next to the area count. */
  .hint #hint-text { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }
  .hint .status { flex: none; }
  .stage { order: 4; padding: 8px; }
  body:not(.overlay) .tools {
    order: 5;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
    min-height: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
  }
  body:not(.overlay) .tools .section { display: contents !important; }
  body:not(.overlay) .tools .side-label,
  body:not(.overlay) .tools > .spacer { display: none !important; }
  body:not(.overlay) .tools .seg { order: 1 !important; grid-column: span 3; }
  body:not(.overlay) .tools #whole-button { order: 2 !important; grid-column: span 3; height: 30px; padding: 0 6px; gap: 6px; font-size: 13px; min-width: 0; }
  body:not(.overlay) .tools .seg button { height: 30px; }
  body:not(.overlay) .tools .brush-options { order: 3 !important; grid-column: span 6; }
  body:not(.overlay) .tools .sec-strength > .slider { order: 4 !important; grid-column: span 3; }
  body:not(.overlay) .tools .sec-strength > .softness-options { order: 5 !important; }
  body:not(.overlay) .tools:has(.softness-options[hidden]) .sec-strength > .slider { grid-column: span 6; }
  body:not(.overlay) .tools .sec-strength > .check { order: 6 !important; grid-column: span 6; }
  body:not(.overlay) .tools .pair { order: 7 !important; grid-column: span 3; }
  body:not(.overlay) .tools .pair .btn { height: 34px; }
  body:not(.overlay) .tools .pair #clear-button { padding: 0 8px; gap: 6px; }
  body:not(.overlay) .tools #upload-button { order: 8 !important; grid-column: span 3; height: 34px; padding: 0 8px; gap: 6px; min-width: 0; }
  body:not(.overlay) .tools .split { order: 9 !important; grid-column: span 6; }
  body:not(.overlay) .tools .site-note { order: 10 !important; grid-column: span 6; text-align: center; margin-top: -2px; }
  body:not(.overlay) .tools .side-message { display: none !important; }
}