/*
 * Proportional desktop canvas.
 *
 * Small desktop and landscape-tablet viewports (901px through 1527px) render
 * the 1500px desktop composition as one unit.  The scale stops at two-thirds;
 * narrower desktop-class viewports then scroll horizontally.  Widths at 900px
 * and below intentionally stay on the existing portrait-tablet / phone UI.
 */

html.is-site-proportional-canvas {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Final phone manual-control arrangement: keep the preview controls and the
   editing inputs in exactly two compact rows.  The brand selector is promoted
   into the first row, while the second row keeps size, brush color, import,
   and trace controls with enough width for their actual values. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns:
      repeat(3, minmax(40px, 1fr))
      minmax(62px, 1.35fr)
      24px 32px 24px 24px minmax(40px, .8fr);
    grid-template-rows: 30px;
    grid-template-areas: "grid labels ruler brand zoomout zoomtext zoomin reset meta";
    align-items: stretch;
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle {
    min-width: 0;
    min-height: 30px;
    height: 30px;
    gap: 2px;
    padding-inline: 2px;
    font-size: 8px;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle input {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field {
    display: grid;
    grid-area: brand;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 0 2px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 6px;
    background: #fffdf9;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field > span {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field .select-input {
    min-width: 0;
    width: 100%;
    min-height: 26px;
    height: 26px;
    padding: 0 13px 0 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 8px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomOutBtn {
    grid-area: zoomout;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    grid-area: zoomtext;
    min-width: 0;
    justify-self: center;
    font-size: 9px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomInBtn {
    grid-area: zoomin;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomResetBtn {
    grid-area: reset;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #patternPreviewMeta {
    grid-area: meta;
    min-width: 0;
    overflow: hidden;
    padding-inline: 1px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 24px;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 84px minmax(90px, 1fr) 52px 52px;
    grid-template-rows: 44px;
    grid-template-areas: "size color import trace";
    gap: 3px;
    padding: 2px;
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar .brand-select-field {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-field {
    grid-area: size;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs .select-input,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs input.select-input {
    min-width: 0;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding-inline: 4px;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-field {
    grid-area: color;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-combobox {
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 22px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-search {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding-left: 22px !important;
    padding-right: 2px !important;
    font-size: 9px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-toggle {
    min-width: 22px;
    min-height: 40px;
    height: 40px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import {
    grid-area: import;
    min-width: 0;
    width: 100%;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field {
    grid-area: trace;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field > span:not(.sr-only) {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import .manual-import-menu-trigger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field .select-input {
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding-inline: 3px;
    font-size: 9px;
  }
}

/* Public profile mirrors the self-profile rhythm on portrait screens while
 * keeping private controls and private content out of the public surface. */
@media (max-width: 900px) {
  #view-user,
  #view-user .public-profile-page,
  #view-user .public-profile-hero,
  #view-user .public-profile-post-panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #view-user {
    overflow-x: hidden;
  }

  #view-user .public-profile-page {
    width: 100%;
    gap: 10px;
  }

  #view-user .public-profile-nav {
    min-height: 40px;
  }

  #view-user .public-profile-hero {
    min-height: 0;
    padding: 20px 18px 16px;
  }

  #view-user .public-profile-identity {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px 16px;
    align-items: center;
  }

  #view-user .public-profile-avatar-wrap {
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #view-user .avatar-mark.public-user-avatar {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
    border-width: 5px;
    font-size: 28px;
  }

  #view-user .public-profile-copy h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 23px;
  }

  #view-user .public-profile-copy p {
    max-width: none;
    margin: 7px 0 5px;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #view-user .public-profile-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }

  #view-user .public-profile-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #view-user .public-profile-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-user .public-profile-stats {
    width: 100%;
    margin: 16px 0 0;
    gap: 8px;
  }

  #view-user .public-profile-stats span,
  #view-user .public-profile-stats button {
    min-width: 0;
    padding-inline: 4px;
  }

  #view-user .public-profile-stats strong {
    font-size: 17px;
  }

  #view-user .public-profile-post-panel {
    padding: 14px;
  }

  #view-user .public-profile-content-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #view-user .public-profile-content-tabs button {
    min-width: 0;
    padding-inline: 8px;
  }

  #view-user .public-profile-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  #view-user .public-user-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 620px) {
  #view-user .public-profile-hero {
    padding: 18px 14px 15px;
  }

  #view-user .public-profile-identity {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px 13px;
  }

  #view-user .avatar-mark.public-user-avatar {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  #view-user .public-profile-copy h1 {
    font-size: 21px;
  }

  #view-user .public-profile-actions .button {
    font-size: 13px;
  }

  #view-user .public-profile-post-panel {
    padding: 12px;
  }

  #view-user .public-profile-content-tabs button {
    min-height: 42px;
    font-size: 13px;
  }
}

html.is-site-proportional-canvas body {
  min-width: var(--site-outer-width) !important;
  overflow-x: visible;
}

html.is-site-proportional-canvas .app-shell {
  box-sizing: border-box;
  width: 1500px !important;
  min-width: 1500px !important;
  max-width: 1500px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  zoom: var(--site-content-scale);
}

html.is-site-proportional-canvas #mainContent {
  width: 1500px !important;
  min-width: 1500px !important;
  max-width: 1500px !important;
  padding: 36px 44px 72px;
  zoom: 1 !important;
  transform: none !important;
}

html.is-site-proportional-canvas .topbar {
  box-sizing: border-box;
  width: 1500px !important;
  min-width: 1500px !important;
  max-width: 1500px !important;
  margin: 0 !important;
  grid-template-columns: minmax(190px, auto) minmax(360px, 1fr) auto !important;
  gap: 20px !important;
  padding: 10px 60px !important;
}

html.is-site-proportional-canvas .topbar .brand {
  min-width: 164px !important;
}

html.is-site-proportional-canvas .main-nav {
  display: flex !important;
  min-width: max-content;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  white-space: nowrap;
}

html.is-site-proportional-canvas .mobile-nav-toggle {
  display: none !important;
}

html.is-site-proportional-canvas .topbar-tools {
  display: flex !important;
  min-width: max-content;
}

html.is-site-proportional-canvas .top-search {
  display: flex !important;
  width: 238px !important;
  max-width: 238px !important;
  flex: 0 0 238px;
}

html.is-site-proportional-canvas .topbar :is(.auth-pill, .quota-pill):not(.is-hidden) {
  display: inline-flex !important;
}

/* The scaled canvas owns width, not document height.  Let entry pages grow
 * naturally when text wraps or the viewport becomes short. */
html.is-site-proportional-canvas body.home-route-active,
html.is-site-proportional-canvas body.creation-hub-route-active {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
}

html.is-site-proportional-canvas body.home-route-active .app-shell,
html.is-site-proportional-canvas body.creation-hub-route-active .app-shell {
  height: auto !important;
  min-height: 100dvh;
  display: block;
}

html.is-site-proportional-canvas body.home-route-active #mainContent,
html.is-site-proportional-canvas body.creation-hub-route-active #mainContent,
html.is-site-proportional-canvas body.home-route-active #view-home.is-active,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate.is-active,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate[data-generator-mode="landing"] .flow-grid,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate[data-generator-mode="landing"] .generator-panel,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate[data-generator-mode="landing"] .section-block[data-stage="upload"] {
  height: auto !important;
  min-height: 0;
  overflow: visible;
}

/* The homepage community preview is content, not a fixed-height viewport.
 * Keep the hero and preview in normal document flow so a wrapped heading or
 * empty-state message can never be clipped by the old 190px grid row. */
#view-home.is-active {
  display: block;
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}

#view-home.is-active .home-community-preview,
#view-home.is-active .home-section-head,
#view-home.is-active .home-preview-grid,
#view-home.is-active .home-preview-grid .empty-state {
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
}

#view-home.is-active .home-section-head {
  align-items: flex-start;
}

#view-home.is-active .home-section-head h2 {
  height: auto !important;
  max-width: 100%;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* The removed hero subtitle must not leave a large orphaned gap above the
 * primary actions. */
#view-home.is-active .home-actions {
  margin-top: 18px;
}

/* Desktop home screen: fit the fixed landing content into one viewport.
 * Content-heavy routes keep their own scrolling; this rule is limited to the
 * home route and uses a three-row layout for hero, community preview and
 * legal footer so no implicit grid row pushes the footer below the fold. */
@media (min-width: 901px) and (min-height: 760px) {
  body.home-route-active {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body.home-route-active .app-shell {
    height: 100dvh;
    min-height: 0;
    padding-bottom: 0 !important;
    display: grid;
    grid-template-rows: max-content minmax(0, 1fr);
  }

  body.home-route-active #mainContent {
    height: 100%;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: visible;
  }

  body.home-route-active #view-home.is-active {
    height: 100% !important;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 8px;
    overflow: visible !important;
  }

  body.home-route-active #view-home .home-cover {
    height: 100%;
    min-height: 0;
    gap: clamp(20px, 2.8vw, 44px);
    padding: clamp(20px, 2.6dvh, 34px) clamp(30px, 3.4vw, 54px);
  }

  body.home-route-active #view-home .home-visual {
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  body.home-route-active #view-home .home-saturn-art {
    max-height: min(42dvh, 440px);
  }

  body.home-route-active #view-home .home-copy h1 {
    margin-top: 8px;
    margin-bottom: 10px;
  }

  body.home-route-active #view-home .home-copy p {
    margin-bottom: 0;
  }

  body.home-route-active #view-home .home-actions {
    margin-top: 16px;
  }

  body.home-route-active #view-home .home-community-preview {
    margin-top: 0;
    padding: 10px 18px;
  }

  body.home-route-active #view-home .community-unavailable-banner {
    min-height: 30px;
    margin-bottom: 4px;
    padding-block: 3px;
  }

  body.home-route-active #view-home .home-section-head {
    margin-bottom: 4px;
  }

  body.home-route-active #view-home .home-preview-grid .empty-state {
    min-height: 38px;
    padding-block: 6px;
  }

  body.home-route-active #view-home .site-legal-footer {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 2px;
    gap: 6px 18px;
    font-size: 12px;
    line-height: 1.45;
  }
}

/* The proportional canvas is zoomed in CSS pixels.  Convert the physical
 * viewport height back to the canvas coordinate system before fitting it. */
@media (min-width: 901px) and (min-height: 760px) {
  html.is-site-proportional-canvas body.home-route-active .app-shell {
    height: var(--site-layout-viewport-height);
  }
}

/* Fixed dialogs inherit the shell zoom.  Give their layout viewport the inverse
 * size so the scaled backdrop still covers the physical viewport edge-to-edge. */
html.is-site-proportional-canvas .modal-shell,
html.is-site-proportional-canvas body > .modal-shell,
html.is-site-proportional-canvas body > #profileRuleBox:not(.is-hidden) {
  box-sizing: border-box;
  width: var(--site-layout-viewport-width) !important;
  height: var(--site-layout-viewport-height) !important;
  max-width: none !important;
  max-height: none !important;
}

html.is-site-proportional-canvas .modal-shell > .modal-panel,
html.is-site-proportional-canvas .modal-shell > .modal-card {
  max-width: calc(var(--site-layout-viewport-width) - 64px);
  max-height: calc(var(--site-layout-viewport-height) - 64px);
}

/* These surfaces are deliberately mounted at document.body to escape local
 * clipping.  Match the shell zoom so menus, toolbars and tooltips keep the same
 * proportion as their anchors.  Their viewport coordinates are converted by JS. */
html.is-site-proportional-canvas body > :is(
  #publicRecoveryDialog,
  #profileRuleBox,
  #manualFloatingToolbar,
  #workbenchColorContextMenu,
  #workbenchTitlePopover,
  .site-export-floating-menu,
  .profile-card-menu-floating,
  .manual-trace-color-suggestions
) {
  zoom: var(--site-content-scale);
}

@supports not (zoom: 1) {
  html.is-site-proportional-canvas .app-shell {
    transform: scale(var(--site-content-scale));
    transform-origin: top left;
  }
}

/*
 * Touch scroll handoff for page-owned collections.
 *
 * Works, colors, messages and palette entries remain independently
 * scrollable, but reaching their top/bottom must hand the gesture back to
 * the surrounding page.  Dialogs are mounted outside .app-shell and keep
 * their deliberate scroll containment.
 */
@media (max-width: 900px) {
  html.is-viewport-touch body.contained-route-active .app-shell .view.is-active .contained-scroll-region {
    overscroll-behavior-y: auto !important;
  }
}

/*
 * Creation hub recent works: the desktop three-column cards become a compact
 * list on phones.  Keeping a real text column (instead of squeezing three
 * cards into one row) prevents CJK titles and dimensions from becoming
 * character-by-character vertical text.
 */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="landing"] .generator-recent-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list > a,
  #view-generate[data-generator-mode="landing"] .generator-recent-list > button {
    min-width: 0;
    min-height: 68px;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 10px;
    padding: 8px 10px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list .home-preview-thumb {
    width: 56px;
    height: 52px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong,
  #view-generate[data-generator-mode="landing"] .generator-recent-list small {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong {
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list small {
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Manual color summary: the manual view only renders two summary metrics.
   Keep them as two equal columns so the unused third desktop column cannot
   leave a blank strip on phones or tablets.  Color cards use a compact,
   proportional size in the same breakpoints instead of the desktop card
   width that is needed for wide editing layouts. */
@media (max-width: 900px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(5px, 1vw, 8px) !important;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row .metric {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row {
    box-sizing: border-box;
    flex: 0 0 clamp(152px, 24vw, 190px);
    width: clamp(152px, 24vw, 190px);
    min-width: 152px;
    min-height: clamp(88px, 12vw, 108px);
    height: clamp(88px, 12vw, 108px);
    padding: clamp(5px, .8vw, 7px);
    grid-template-columns: clamp(12px, 1.8vw, 16px) minmax(0, 1fr) auto;
    grid-template-rows: minmax(34px, 1fr) 36px;
    gap: clamp(4px, .7vw, 6px);
    font-size: clamp(10px, 1.45vw, 12px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row .swatch {
    width: clamp(12px, 1.8vw, 16px);
    height: clamp(12px, 1.8vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name {
    min-width: 0;
    align-self: center;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name strong {
    min-width: 0;
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name small {
    min-width: 0;
    margin-top: 2px;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-count {
    font-size: clamp(14px, 2vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions {
    min-width: 0;
    gap: clamp(4px, .7vw, 6px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-danger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-action {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding-inline: 4px;
    font-size: clamp(10px, 1.5vw, 12px);
  }
}

/* Final phone manual-control arrangement: two rows only. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(40px, 1fr)) minmax(62px, 1.35fr) 24px 32px 24px 24px minmax(40px, .8fr);
    grid-template-rows: 30px;
    grid-template-areas: "grid labels ruler brand zoomout zoomtext zoomin reset meta";
    align-items: stretch;
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle {
    min-width: 0;
    min-height: 30px;
    height: 30px;
    gap: 2px;
    padding-inline: 2px;
    font-size: 8px;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle input {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field {
    display: grid;
    grid-area: brand;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 0 2px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 6px;
    background: #fffdf9;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field > span {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field .select-input {
    min-width: 0;
    width: 100%;
    min-height: 26px;
    height: 26px;
    padding: 0 13px 0 2px;
    border: 0;
    background: transparent;
    font-size: 8px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomOutBtn { grid-area: zoomout; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText { grid-area: zoomtext; min-width: 0; justify-self: center; font-size: 9px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomInBtn { grid-area: zoomin; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomResetBtn { grid-area: reset; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #patternPreviewMeta { grid-area: meta; min-width: 0; overflow: hidden; padding-inline: 1px; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 24px;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 84px minmax(90px, 1fr) 52px 52px;
    grid-template-rows: 44px;
    grid-template-areas: "size color import trace";
    gap: 3px;
    padding: 2px;
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar .brand-select-field { display: none; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-field { grid-area: size; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs .select-input,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs input.select-input { min-width: 0; width: 100%; height: 40px; min-height: 40px; padding-inline: 4px; font-size: 11px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-field { grid-area: color; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-combobox { min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr) 22px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-search { min-width: 0; width: 100%; min-height: 40px; height: 40px; padding-left: 22px !important; padding-right: 2px !important; font-size: 9px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-toggle { min-width: 22px; min-height: 40px; height: 40px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import { grid-area: import; min-width: 0; width: 100%; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field { grid-area: trace; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field > span:not(.sr-only) { display: none; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import .manual-import-menu-trigger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field .select-input { width: 100%; min-width: 0; height: 40px; min-height: 40px; padding-inline: 3px; font-size: 9px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  #view-generate[data-generator-mode="landing"] .generator-recent-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Crop controls share one action vocabulary across the image and avatar
 * editors.  The quarter-turn action is explicit; the existing center control
 * remains available for fine, free-form rotation. */
.crop-toolbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.workbench-missing-beads.is-dragover {
  border-color: var(--pink-deep, #a8345d);
  background: rgba(255, 245, 250, .98);
  box-shadow: 0 0 0 3px rgba(185, 130, 158, .18), 0 12px 24px rgba(83, 69, 92, .1);
}

.crop-quarter-turn-button,
.avatar-crop-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  gap: 6px;
  white-space: nowrap;
  touch-action: manipulation;
}

.crop-quarter-turn-button svg,
.avatar-crop-actions .button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar-crop-rotation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(203, 184, 201, .66));
  border-radius: 10px;
  color: var(--muted, #756b78);
  font-size: 13px;
  font-weight: 750;
}

#avatarCropRotationValue {
  color: var(--pink-deep, #a8345d);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.avatar-crop-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.avatar-crop-actions .button {
  min-width: 0;
  padding-inline: 10px;
}

@media (max-width: 900px) {
  .avatar-crop-panel {
    width: min(calc(100vw - 16px), 560px);
    max-height: calc(100dvh - 16px);
    padding: 16px;
    overflow-y: auto;
  }

  .avatar-crop-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .avatar-crop-canvas-shell {
    width: min(100%, 420px);
  }

  .avatar-crop-controls {
    width: min(100%, 480px);
    justify-self: center;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  #view-generate[data-active-stage="crop"] .crop-canvas-toolbar {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.9fr) !important;
    min-height: 44px;
    height: 44px;
    gap: 6px;
  }

  #view-generate[data-active-stage="crop"] .crop-rotation-readout {
    min-height: 40px;
    padding-inline: 8px;
    gap: 4px;
    font-size: 10px;
  }

  #view-generate[data-active-stage="crop"] .crop-rotate-handle {
    width: 44px;
    height: 44px;
  }

  #view-generate[data-active-stage="crop"] .crop-toolbar-actions {
    gap: 4px;
  }

  #view-generate[data-active-stage="crop"] .crop-quarter-turn-button,
  #view-generate[data-active-stage="crop"] .crop-reset-button {
    min-width: 0;
    min-height: 40px;
    height: 40px;
    padding-inline: 7px;
    gap: 3px;
    font-size: 10px;
  }

  #view-generate[data-active-stage="crop"] .crop-quarter-turn-button svg,
  #view-generate[data-active-stage="crop"] .crop-reset-button svg {
    width: 15px;
    height: 15px;
  }

  .avatar-crop-panel {
    width: calc(100vw - 16px);
    padding: 14px;
    gap: 12px;
  }

  .avatar-crop-actions {
    gap: 6px;
  }

  .avatar-crop-actions .button {
    min-height: 44px;
    padding-inline: 7px;
    font-size: 12px;
  }

  /* Manual editor: give the color picker a real reading width on phones.
   * The color menu stays dense enough to show two touchable choices per row
   * without turning each short color code into a full-width empty card. */
  /* Keep the five manual-editor controls in one compact touch row on phones.
   * The row can scroll horizontally on very narrow screens, so controls never
   * collapse into a second line or become too small to use. */
  #view-generate[data-generator-mode="manual"] .preview-card {
    grid-template-rows: 52px minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar {
    grid-template-columns: 78px 100px 78px 48px 58px;
    grid-template-rows: 44px;
    grid-template-areas: "size color brand import trace";
    gap: 4px;
    padding: 2px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar::-webkit-scrollbar {
    display: none;
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar > * {
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar:has(.editor-color-picker.is-open),
  #view-generate[data-generator-mode="manual"] .editor-toolbar:has(.manual-unified-import.is-open) {
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"] .compact-select-field {
    min-height: 44px;
    height: 44px;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    font-size: 9px;
    line-height: 1;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-field {
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"] .editor-color-picker,
  #view-generate[data-generator-mode="manual"] .editor-color-combobox {
    width: 100%;
    min-width: 0;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-combobox {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 42px;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-search {
    min-width: 0;
    min-height: 42px;
    padding-left: 30px !important;
    padding-right: 8px !important;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-current-swatch {
    left: 7px;
    width: 16px;
    height: 16px;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-toggle {
    min-width: 44px;
    min-height: 42px;
  }

  #view-generate[data-generator-mode="manual"] .brand-select-field,
  #view-generate[data-generator-mode="manual"] .manual-trace-mode-field {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"] .brand-select-field .select-input,
  #view-generate[data-generator-mode="manual"] .manual-trace-mode-field .select-input {
    min-width: 0;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding-inline: 5px 16px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"] .manual-toolbar-width-inputs {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"] .manual-toolbar-width-inputs .select-input,
  #view-generate[data-generator-mode="manual"] .manual-toolbar-width-inputs input.select-input {
    min-width: 0;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding-inline: 5px;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"] .manual-import-menu-trigger {
    width: 100%;
    min-width: 0 !important;
    min-height: 44px;
    height: 44px;
    max-width: 100%;
    justify-content: center;
    padding-inline: 4px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: clip;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-palette {
    top: calc(100% + 6px);
    right: auto;
    width: 100%;
    min-width: 100%;
    max-height: min(38dvh, 320px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 8px;
    padding: 8px;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-chip {
    min-height: 44px;
    height: auto;
    padding: 6px 8px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-swatch {
    width: 20px;
    height: 20px;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-code,
  #view-workbench #workbenchColorList .color-chip-code,
  .missing-bead-color-code {
    display: block;
    min-width: 3ch;
    color: var(--ink, #403343);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    letter-spacing: .02em;
    line-height: 1.25;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  #view-workbench #workbenchColorList .color-chip-code {
    font-size: 13px;
  }

  .manual-trace-upload-panel {
    gap: 10px;
    padding: 14px;
  }

  .manual-trace-upload-panel #manualTraceUploadDescription,
  .manual-trace-upload-zone > span:not(.manual-trace-upload-mark),
  .manual-trace-upload-zone > small {
    display: none;
  }

  .manual-trace-upload-zone {
    min-height: clamp(156px, 28dvh, 220px);
    padding: 24px 16px;
    gap: 8px;
  }

  .manual-trace-upload-zone > strong {
    font-size: 18px;
  }

  .manual-trace-upload-status:empty {
    display: none;
  }

  .manual-trace-upload-status {
    min-height: 0;
    font-size: 13px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list,
  html.is-viewport-phone #view-generate .generator-recent-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100%;
    min-width: 0;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list > a,
  #view-generate[data-generator-mode="landing"] .generator-recent-list > button,
  html.is-viewport-phone #view-generate .generator-recent-list > a,
  html.is-viewport-phone #view-generate .generator-recent-list > button {
    width: 100%;
    min-width: 0 !important;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: row;
    align-items: center;
    gap: 3px 10px !important;
    padding: 8px 10px !important;
    overflow: hidden;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list .home-preview-thumb,
  html.is-viewport-phone #view-generate .generator-recent-list .home-preview-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 52px;
    min-width: 0;
    min-height: 0;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong,
  #view-generate[data-generator-mode="landing"] .generator-recent-list small,
  html.is-viewport-phone #view-generate .generator-recent-list strong,
  html.is-viewport-phone #view-generate .generator-recent-list small {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong,
  html.is-viewport-phone #view-generate .generator-recent-list strong {
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list small,
  html.is-viewport-phone #view-generate .generator-recent-list small {
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row {
    grid-template-columns: minmax(0, .82fr) minmax(0, .82fr) minmax(0, 1.36fr) !important;
    gap: 5px !important;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row .metric,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row .metric {
    min-width: 0;
    padding-inline: 7px;
    gap: 5px;
    font-size: 10px;
    line-height: 1.1;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row .metric > span,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row .metric > span {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    word-break: keep-all;
    writing-mode: horizontal-tb;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row .metric > strong,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row .metric > strong {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Manual color cards contain two actions in addition to the code, HEX and
   * count.  The compact workspace previously reserved only 52px for this
   * region, so the action row was clipped by the preview panel.  Give the
   * collection a real touch-sized row and let each card breathe horizontally. */
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel:has(> .stats-list:not(:empty)) {
    grid-template-rows: 64px minmax(0, 1fr) 44px 104px !important;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 6px 3px 6px 0;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row {
    flex: 0 0 min(224px, calc(100vw - 34px));
    width: min(224px, calc(100vw - 34px));
    min-width: 190px;
    min-height: 92px;
    height: 92px;
    padding: 8px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-rows: minmax(40px, auto) 36px;
    gap: 7px 6px;
    align-content: stretch;
    font-size: 12px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row .swatch {
    width: 18px;
    height: 18px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name {
    min-width: 0;
    align-self: center;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name small {
    min-width: 0;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-count {
    align-self: center;
    font-size: 16px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions {
    min-width: 0;
    gap: 6px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-danger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-action {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 5px 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #view-messages .interaction-message {
    height: 64px;
    min-height: 64px;
    padding: 8px 10px;
    grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.45fr) minmax(0, 76px);
    gap: 0 8px;
  }

  #view-messages .interaction-message > span {
    min-width: 40px;
    padding: 4px 6px;
    font-size: 11px;
  }

  #view-messages .interaction-message > strong {
    font-size: 14px;
  }

  #view-messages .interaction-message > small,
  #view-messages .interaction-message > em {
    font-size: 11px;
  }

  #view-messages .interaction-message > em {
    text-align: right;
  }

  /* Message work picker: keep two readable columns without horizontal overflow. */
  .message-pattern-dialog-panel {
    width: min(calc(100vw - 20px), 560px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .message-pattern-dialog-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }

  .message-pattern-view-tabs {
    width: 100%;
  }

  .message-pattern-search-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  #messagePatternSelectionStatus {
    justify-self: start;
  }

  .message-pattern-dialog-body {
    min-height: 180px;
    max-height: min(52dvh, 520px);
    padding: 2px 1px;
  }

  .message-pattern-dialog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .message-pattern-dialog-card {
    min-height: 0;
    padding: 10px 8px;
    gap: 8px;
  }

  .message-pattern-dialog-card:has(> .content-pin-badge) {
    padding-top: 32px;
  }

  .message-pattern-dialog-thumb {
    width: 100%;
    max-width: none;
  }

  .message-pattern-dialog-copy strong {
    font-size: 14px;
  }

  .message-pattern-dialog-copy small {
    font-size: 11px;
  }

  .message-pattern-dialog-state {
    min-height: 44px;
    padding-inline: 4px;
    font-size: 12px;
  }

  .message-pattern-dialog-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .message-pattern-dialog-footer > p {
    line-height: 1.45;
  }

  .message-pattern-dialog-footer .button-row {
    width: 100%;
  }

  .message-pattern-dialog-footer .button-row .button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
  }
}

/* Mobile search follows the familiar app pattern: a compact icon in the
 * header opens the full, grouped search surface with a focused input. */
.mobile-global-search-button {
  display: none;
}

@media (max-width: 640px) {
  .mobile-global-search-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(203, 184, 201, .72);
    border-radius: 14px;
    background: rgba(255, 255, 255, .74);
    color: #695866;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }

  .mobile-global-search-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-global-search-button:hover,
  .mobile-global-search-button:focus-visible,
  .mobile-global-search-button:active {
    border-color: rgba(176, 48, 97, .42);
    background: rgba(248, 200, 200, .3);
    color: #a6335d;
  }

  .mobile-global-search-button:focus-visible {
    outline: 2px solid rgba(176, 48, 97, .5);
    outline-offset: 2px;
  }

  .topbar-tools {
    gap: 6px !important;
  }

  .topbar-tools .top-search {
    display: none !important;
  }

  #view-search .global-search-layout {
    width: 100%;
    min-width: 0;
  }

  #view-search .global-search-panel {
    min-height: 0;
    padding: 16px 12px;
  }

  #view-search .global-search-head {
    margin-bottom: 14px;
  }

  #view-search .global-search-head h1 {
    font-size: 24px;
  }

  #view-search .global-search-head p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
  }

  #view-search .global-search-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  #view-search .global-search-form .search-input {
    min-height: 46px;
    min-width: 0;
    font-size: 16px;
  }

  #view-search .global-search-form .button {
    min-height: 46px;
    padding-inline: 15px;
  }

  #view-search .global-search-tabs {
    margin-top: 14px;
    gap: 16px;
    scrollbar-width: none;
  }

  #view-search .global-search-tabs::-webkit-scrollbar,
  #view-search .global-search-personal-tabs::-webkit-scrollbar {
    display: none;
  }

  #view-search .global-search-tabs button {
    min-height: 44px;
    font-size: 14px;
  }

  #view-search .global-search-status {
    min-height: 30px;
    padding-top: 10px;
    font-size: 12px;
  }

  #view-search .global-search-user-row {
    min-height: 76px;
    padding: 10px 2px;
    gap: 8px;
  }

  #view-search .global-search-user-main {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  #view-search .global-search-user-main .avatar-mark {
    width: 48px;
    height: 48px;
  }

  #view-search .global-search-user-actions,
  #view-search .global-search-content-actions {
    gap: 6px;
  }

  #view-search .global-search-user-actions .button,
  #view-search .global-search-content-actions .button {
    min-height: 42px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  #view-search .global-search-content-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    min-height: 88px;
    padding: 10px 2px;
  }

  #view-search .global-search-content-thumb,
  #view-search .global-search-missing-preview {
    width: 64px;
    height: 64px;
    min-height: 64px;
  }

  #view-search .global-search-content-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  #view-search .global-search-personal-tabs {
    padding-bottom: 6px;
    gap: 7px;
    scrollbar-width: none;
  }

  #view-search .global-search-personal-tabs button {
    min-height: 40px;
    padding-inline: 12px;
  }
}

/* Palette cards: expose counts only and keep the visible hierarchy stable across widths. */
#view-palette .palette-brand-copy {
  min-width: 0;
  align-content: center;
}

#view-palette .palette-brand-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-palette .palette-brand-count {
  font-weight: 700;
}

#view-palette .palette-brand-match {
  color: var(--muted);
}

#view-palette .palette-detail-head > div:nth-child(2) {
  min-width: 0;
}

#view-palette #paletteDetailMeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #view-palette .palette-brand-card,
  #view-palette .palette-brand-open {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  #view-palette .palette-brand-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
  }

  #view-palette .palette-brand-copy {
    gap: 2px;
  }

  #view-palette .palette-brand-copy small {
    max-width: 100%;
  }

  #view-palette .palette-brand-copy > .palette-brand-match {
    display: block;
    font-size: 10px !important;
    line-height: 1.3;
  }

  #view-palette .palette-brand-action,
  #view-palette .palette-default-button {
    white-space: nowrap;
  }

  #view-palette .palette-detail-head {
    min-width: 0;
  }

  #view-palette #paletteDetailMeta {
    font-size: 12px;
  }
}

/*
 * Adaptive manual workspace.
 *
 * A short landscape viewport must not turn a square bead canvas into a
 * shallow strip.  Keep the editor canvas proportional, then let that canvas
 * and the color collection scroll inside their own regions.  The surrounding
 * page remains a normal document so the header, controls, cards and text can
 * keep their readable size instead of being squeezed into a fixed-height
 * desktop composition.
 */
html:is(.is-viewport-tablet, .is-viewport-desktop) body.manual-editor-active {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) body.manual-editor-active .app-shell,
html:is(.is-viewport-tablet, .is-viewport-desktop) body.manual-editor-active #mainContent,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"],
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .flow-grid {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: clamp(8px, 1vw, 16px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(10px, 1.2vw, 20px) !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-panel > .panel-head {
  min-height: clamp(48px, 4.5vw, 68px);
  margin-bottom: 0;
  padding-bottom: clamp(8px, .8vw, 14px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-stack,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-card,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .original-preview-split {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-card:not(.crop-preview-card) {
  display: grid;
  grid-template-rows: auto auto;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar {
  min-height: clamp(48px, 4.2vw, 64px);
  height: auto;
  padding: clamp(6px, .8vw, 10px);
  gap: clamp(6px, .8vw, 12px);
  align-items: stretch;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar > .compact-select-field,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar > .manual-unified-import {
  flex: 1 1 clamp(150px, 16vw, 280px);
  min-width: min(100%, clamp(150px, 16vw, 280px));
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar > .editor-color-field {
  flex: 2 1 clamp(220px, 24vw, 380px);
  min-width: min(100%, clamp(220px, 24vw, 380px));
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar .select-input,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar .editor-color-search,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar .manual-import-menu-trigger {
  min-height: clamp(44px, 3.4vw, 52px);
  height: clamp(44px, 3.4vw, 52px);
  font-size: clamp(12px, .95vw, 15px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .pattern-preview-viewport {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1;
  overflow: auto !important;
  align-items: flex-start;
  overscroll-behavior: contain;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .manual-preview-stage,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] #patternPreviewCanvas {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-metric-row {
  min-height: clamp(52px, 4.5vw, 72px);
  height: auto !important;
  gap: clamp(6px, .8vw, 12px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-metric-row .metric {
  min-height: clamp(52px, 4.5vw, 72px);
  height: auto !important;
  padding: clamp(8px, .8vw, 12px);
  font-size: clamp(12px, .95vw, 15px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] > .flow-grid > .preview-panel > .stats-list {
  height: auto !important;
  min-height: clamp(96px, 9vw, 136px);
  max-height: min(260px, 28dvh) !important;
  padding: clamp(6px, .8vw, 10px) 3px clamp(6px, .8vw, 10px) 0;
  overflow-x: auto;
  overflow-y: auto;
}

/* Phone feedback layer: keep transient messages above the fixed bottom nav
   with enough clearance for both the nav surface and the safe-area inset. */
@media (max-width: 640px) {
  .toast {
    bottom: calc(var(--mobile-nav-height) + 22px + env(safe-area-inset-bottom));
    z-index: 2147483647;
    min-width: min(240px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

/* Phone workbench palette: give each color chip enough horizontal room for
   four-digit codes and keep the whole control comfortably touchable. */
@media (max-width: 640px) {
  #view-workbench #workbenchColorList,
  #view-workbench .color-filter-panel.is-missing-collapsed #workbenchColorList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 4px 6px 0;
  }

  #view-workbench #workbenchColorList .color-chip-shell .color-chip,
  #view-workbench #workbenchColorList .color-chip {
    min-width: 0;
    min-height: 44px !important;
    height: auto;
    padding: 7px 8px;
    grid-template-columns: 18px minmax(4ch, 1fr) minmax(3ch, max-content);
    column-gap: 5px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
  }

  #view-workbench #workbenchColorList .color-chip .swatch {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }

  #view-workbench #workbenchColorList .color-chip-code,
  #view-workbench #workbenchColorList .color-chip strong {
    min-width: 0;
    font-size: 12px;
    line-height: 1.2;
  }

  #view-workbench #workbenchColorList .color-chip-code {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  #view-workbench #workbenchColorList .color-chip strong {
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

/* Phone one-click creation selects: use an opaque control surface and reserve
   a clear arrow lane so the selected label never blends into the panel. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-parameter-select,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-compact-width-select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 19px 0 6px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 10px;
    background-color: #fffdf9 !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23403343' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 4px center;
    background-size: 14px 8px;
    background-repeat: no-repeat;
    color: #403343 !important;
    -webkit-text-fill-color: #403343;
    opacity: 1;
    font-size: 10px;
    font-weight: 700;
    line-height: normal;
    text-align: left;
    text-indent: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    color-scheme: light;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input {
    box-sizing: border-box;
    min-width: 0;
    padding: 0 4px;
    font-size: 12px;
    text-align: left;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input {
    appearance: textfield;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input::-webkit-inner-spin-button,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .mobile-compact-width-select {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    font-size: 0;
    text-align: center;
    background-position: right 2px center;
    background-size: 8px;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .mobile-compact-width-select option {
    font-size: 12px;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-parameter-select:focus-visible,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-compact-width-select:focus-visible {
    outline: 0;
    border-color: rgba(128, 127, 201, .72);
    box-shadow: 0 0 0 3px rgba(128, 127, 201, .18);
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-parameter-select option,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-compact-width-select option {
    background: #fffdf9;
    color: #403343;
  }
}

/* Phone workbench toolbar: separate primary canvas actions from display
   toggles so the four state controls never collapse into distorted pills. */
@media (max-width: 640px) {
  #view-workbench .workbench-main > .toolbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 6px;
    padding: 6px 4px 8px;
    overflow: visible;
  }

  #view-workbench .workbench-main > .toolbar > .tool-group:first-child,
  #view-workbench .workbench-main > .toolbar > .display-toggle-group,
  #view-workbench .workbench-main > .toolbar > .tool-group:last-child {
    grid-column: 1;
    width: 100%;
  }

  #view-workbench .workbench-main > .toolbar > .tool-group:first-child {
    grid-row: 1;
    gap: 6px;
    overflow: visible;
  }

  #view-workbench .workbench-main > .toolbar > .display-toggle-group {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
    overflow: visible;
  }

  #view-workbench .workbench-main > .toolbar > .tool-group:last-child {
    grid-row: 3;
  }

  #view-workbench .workbench-main > .toolbar > #workbenchShareActions:not(.is-hidden) {
    grid-column: 1;
    grid-row: 4;
  }

  #view-workbench .workbench-main > .toolbar .button,
  #view-workbench .workbench-main > .toolbar .icon-button,
  #view-workbench .workbench-main > .toolbar .mini-toggle,
  #view-workbench .workbench-main > .toolbar .workbench-count-control {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.15;
  }

  #view-workbench #exitWorkbenchBtn {
    width: 56px !important;
    min-width: 56px !important;
    padding-inline: 8px;
  }

  #view-workbench #zoomOutBtn,
  #view-workbench #zoomInBtn,
  #view-workbench #fitBtn,
  #view-workbench #fullscreenBtn {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0;
    font-size: 16px;
  }

  #view-workbench .display-toggle-group .mini-toggle,
  #view-workbench .display-toggle-group .workbench-count-control {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    justify-content: center;
    gap: 5px;
    padding-inline: 6px;
    white-space: nowrap;
  }

  #view-workbench .display-toggle-group .mini-toggle input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  #view-workbench .display-toggle-group .mini-toggle span,
  #view-workbench .workbench-count-control > span {
    width: auto;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
  }

  #view-workbench .workbench-count-control {
    gap: 4px;
    padding-inline: 6px;
  }

  #view-workbench .workbench-count-control select {
    width: auto;
    min-width: 0;
    max-width: 52px;
    min-height: 32px;
    padding: 0 16px 0 4px;
    font-size: 11px;
  }
}

/* Phone creation hub cards: keep the copy and CTA in separate grid rows so
   the action surface can never cover the muted description text. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="landing"] .generator-entry-card {
    min-height: 204px;
    height: auto;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    row-gap: 8px;
    overflow: visible;
  }

  #view-generate[data-generator-mode="landing"] .generator-entry-card > small {
    min-height: 0;
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    line-height: 1.5;
  }

  #view-generate[data-generator-mode="landing"] .generator-entry-action {
    position: static;
    align-self: end;
    min-height: 44px;
    padding: 8px 12px;
    white-space: nowrap;
  }
}

/* Phone manual editor: move the wide brand selector into the first control
   row beside the three display toggles.  The original editor-toolbar field
   remains available on larger layouts and is hidden only on phones. */
.manual-mobile-brand-field {
  display: none;
}

@media (max-width: 640px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel > .panel-head {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-heading-block,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar .brand-select-field {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr) 28px 34px 28px 28px;
    grid-template-rows: 28px 28px;
    grid-template-areas:
      "grid labels ruler brand brand brand brand brand"
      "zoomout zoomtext zoomin reset meta meta meta meta";
    align-items: stretch;
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-grid-control {
    grid-area: grid;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-labels-control {
    grid-area: labels;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-ruler-control {
    grid-area: ruler;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field {
    display: grid;
    grid-area: brand;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    padding: 0 3px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 6px;
    background: #fffdf9;
    font-size: 8px;
    line-height: 1;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field .select-input {
    min-width: 0;
    width: 100%;
    min-height: 24px;
    height: 24px;
    padding: 0 14px 0 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 9px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle {
    min-width: 0;
    min-height: 28px;
    height: 28px;
    gap: 2px;
    padding-inline: 2px;
    font-size: 9px;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle input {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomOutBtn {
    grid-area: zoomout;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    grid-area: zoomtext;
    min-width: 0;
    justify-self: center;
    font-size: 10px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomInBtn {
    grid-area: zoomin;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomResetBtn {
    grid-area: reset;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #patternPreviewMeta {
    grid-area: meta;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 28px;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    padding: 0;
    font-size: 12px;
  }
}

/* Final responsive sizing for manual summary cards.  This block is kept at
   the end of the proportional stylesheet so it wins over the earlier phone
   action-row sizing rules. */
@media (max-width: 900px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(5px, 1vw, 8px) !important;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row .metric {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row {
    box-sizing: border-box;
    flex: 0 0 clamp(152px, 24vw, 190px);
    width: clamp(152px, 24vw, 190px);
    min-width: 152px;
    min-height: clamp(88px, 12vw, 108px);
    height: clamp(88px, 12vw, 108px);
    padding: clamp(5px, .8vw, 7px);
    grid-template-columns: clamp(12px, 1.8vw, 16px) minmax(0, 1fr) auto;
    grid-template-rows: minmax(34px, 1fr) 36px;
    gap: clamp(4px, .7vw, 6px);
    font-size: clamp(10px, 1.45vw, 12px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row .swatch {
    width: clamp(12px, 1.8vw, 16px);
    height: clamp(12px, 1.8vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name strong {
    min-width: 0;
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name small {
    min-width: 0;
    margin-top: 2px;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-count {
    font-size: clamp(14px, 2vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions {
    min-width: 0;
    gap: clamp(4px, .7vw, 6px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-danger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-action {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding-inline: 4px;
    font-size: clamp(10px, 1.5vw, 12px);
  }
}