/* Mobile field guidance and a compact no-scroll creation canvas. */
@media (max-width: 760px) {
  .m-page[data-mobile-view="create"] {
    gap: 10px;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  .m-page[data-mobile-view="create"] .m-page-heading { display: none; }
  .m-page[data-mobile-view="create"] .m-mode-rail,
  .m-page[data-mobile-view="create"] .m-upload-tile,
  .m-page[data-mobile-view="create"] .m-field-group,
  .m-page[data-mobile-view="create"] .m-settings-grid,
  .m-page[data-mobile-view="create"] .m-generate-row,
  .m-page[data-mobile-view="create"] .m-template-section { margin: 0; }
  .m-page[data-mobile-view="create"] .m-mode-rail { min-height: 34px; margin-bottom: 6px; }
  .m-page[data-mobile-view="create"] .m-mode-pill { min-height: 34px; padding-inline: 10px; }
  .m-page[data-mobile-view="create"] .m-upload-tile { min-height: 78px; }
  .m-page[data-mobile-view="create"] .m-field-group { margin: 0; }
  .m-page[data-mobile-view="create"] .m-field-tile { min-height: 56px; }
  .m-page[data-mobile-view="create"] .m-name-tile { min-height: 60px; }
  .m-page[data-mobile-view="create"] .m-description-tile { min-height: 78px; }
  .m-page[data-mobile-view="create"] .m-description-tile textarea { min-height: 55px; }
  .m-page[data-mobile-view="create"] .m-setting-tile { height: 66px; }
  .m-page[data-mobile-view="create"] .m-generate-row { min-height: 44px; }
  .m-page[data-mobile-view="create"] .m-cost,
  .m-page[data-mobile-view="create"] .m-generate-button { min-height: 44px; }
  .m-page[data-mobile-view="create"] .m-template-section { min-height: 86px; margin-top: 14px; padding: 0 0 10px; }
  .m-page[data-mobile-view="create"] .m-template-label {
    min-height: 18px;
    margin: 0 0 2px;
  }
  .m-page[data-mobile-view="create"] .m-template-list { height: 66px; padding-top: 5px; padding-bottom: 9px; }
  .m-page[data-mobile-view="create"] .m-template-card { height: 58px; min-width: 142px; }
  .m-page[data-mobile-view="create"] .m-template-card img { width: 42px; height: 42px; border-radius: 13px; }

  .m-field-tile {
    isolation: isolate;
    overflow: hidden !important;
  }
  .m-field-tile input,
  .m-field-tile textarea {
    position: relative;
    z-index: 2;
    padding-left: 0 !important;
    color: var(--m-ink);
    font-style: normal;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }
  .m-field-tile textarea::-webkit-scrollbar { width: 0; height: 0; }
  .m-name-tile textarea { min-height: 38px; max-height: 38px; line-height: 1.3; }
  .m-field-group {
    display: grid;
    gap: 5px;
  }
  .m-form-label {
    display: block;
    color: var(--m-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }
  .m-field-group .m-field-tile {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 9px;
  }
  .m-field-group .m-field-tile input,
  .m-field-group .m-field-tile textarea { margin-top: 0; }
  .m-field-placeholder {
    position: absolute;
    z-index: 1;
    top: 11px;
    right: 28px;
    left: 14px;
    display: block;
    overflow: hidden;
    color: rgba(114,117,127,.58);
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.35;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 140ms ease;
  }
  .m-field-tile.is-placeholder-visible .m-field-placeholder { opacity: 1; }
  .m-name-tile .m-field-placeholder {
    right: 23px;
    top: 11px;
    bottom: 11px;
    height: 38px;
    white-space: normal;
    transform: none;
    transition: opacity 140ms ease;
  }
  .m-description-tile .m-field-placeholder {
    top: 11px;
    right: 23px;
    bottom: 11px;
    height: 55px;
    overflow: hidden;
    white-space: normal;
    transform: none;
    transition: opacity 140ms ease;
  }
  .m-field-scrollbar,
  .m-description-scrollbar {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 8px;
    bottom: 28px;
    width: 3px;
    border-radius: 999px;
    background: rgba(6,93,253,.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }
  .m-field-scrollbar i,
  .m-description-scrollbar i {
    display: block;
    width: 100%;
    height: var(--m-field-thumb-size, 14px);
    border-radius: inherit;
    background: var(--m-blue);
    transform: translateY(var(--m-field-thumb-offset, 0px));
    transition: height 100ms ease, transform 100ms linear;
  }
  .m-field-tile.is-field-scrollable .m-field-scrollbar,
  .m-description-tile.is-description-scrollable .m-description-scrollbar { opacity: .9; }
  .m-description-tile textarea { scrollbar-width: none; }
  .m-description-tile textarea::-webkit-scrollbar { width: 0; height: 0; }
  .m-field-tile > small {
    right: 10px !important;
    bottom: 8px;
    z-index: 4;
    padding: 3px 6px;
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    box-shadow: 0 4px 12px rgba(21,30,48,.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .m-field-tile > .m-field-caption {
    position: relative;
    z-index: 4;
    width: fit-content;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    box-shadow: 0 4px 12px rgba(21,30,48,.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .m-projects-tab .project-nav-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    top: 1px;
    right: calc(50% - 22px);
    font-size: 9px;
  }

  @media (max-height: 720px) {
    .m-page[data-mobile-view="create"] { gap: 7px; padding-top: 3px; }
    .m-page[data-mobile-view="create"] .m-mode-rail { min-height: 30px; margin-bottom: 5px; }
    .m-page[data-mobile-view="create"] .m-mode-pill { min-height: 30px; padding-inline: 9px; font-size: 10px; }
    .m-page[data-mobile-view="create"] .m-upload-tile { min-height: 66px; padding-block: 9px; }
    .m-page[data-mobile-view="create"] .m-upload-icon { width: 42px; height: 42px; }
    .m-page[data-mobile-view="create"] .m-field-tile { min-height: 49px; padding-block: 8px; }
    .m-page[data-mobile-view="create"] .m-name-tile { min-height: 54px; }
    .m-page[data-mobile-view="create"] .m-description-tile { min-height: 66px; }
    .m-page[data-mobile-view="create"] .m-description-tile textarea { min-height: 43px; }
    .m-page[data-mobile-view="create"] .m-setting-tile { height: 58px; }
    .m-page[data-mobile-view="create"] .m-setting-tile > .material-symbols-outlined { margin-top: 4px; font-size: 20px; }
    .m-page[data-mobile-view="create"] .m-generate-row { min-height: 40px; }
    .m-page[data-mobile-view="create"] .m-cost,
    .m-page[data-mobile-view="create"] .m-generate-button { min-height: 40px; }
    .m-page[data-mobile-view="create"] .m-template-section { min-height: 68px; margin-top: 10px; }
    .m-page[data-mobile-view="create"] .m-template-list { height: 54px; padding-top: 3px; }
    .m-page[data-mobile-view="create"] .m-template-card { height: 48px; min-width: 126px; }
    .m-page[data-mobile-view="create"] .m-template-card img { width: 34px; height: 34px; }
    .m-field-placeholder { top: 9px; font-size: 12px; }
    .m-name-tile textarea { min-height: 32px; max-height: 32px; }
    .m-name-tile .m-field-placeholder { top: 9px; bottom: 8px; max-height: 32px; }
    .m-description-tile .m-field-placeholder { top: 9px; bottom: 8px; height: 43px; }
    .m-field-scrollbar, .m-description-scrollbar { top: 8px; bottom: 24px; }
  }
}