/*
 * mobile-polish.css
 *
 * Narrow screens are a distinct working context. This layer keeps the global
 * controls on one quiet rail, removes nested panel frames from form editors,
 * and gives long-running forms a reliable bottom clearance around the assistant.
 */

@media (max-width: 768px) {
  /* ── Global rail ─────────────────────────────────────────────────── */
  .toolbar {
    display: grid;
    grid-template-columns: 36px 20px minmax(0, 1fr) repeat(4, 36px);
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    align-items: center;
    min-height: 64px;
    height: 64px;
    max-height: 64px;
    gap: 5px;
    padding: 0 12px;
    overflow: hidden;
  }

  /* Direct button positions are deliberate fallbacks for a previously cached
     toolbar module. The stable markup order prevents a stale module from
     wrapping its global actions while the current module uses named classes. */
  .toolbar > button {
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .toolbar > :is(.toolbar__menu-btn, button:nth-of-type(1)) { grid-column: 1; }

  .toolbar__mark {
    grid-column: 2;
    grid-row: 1;
    width: 18px;
    height: 18px;
    border-width: 2px;
  }

  .toolbar__mark::after {
    width: 7px;
    height: 7px;
  }

  .toolbar__title {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--wb-rail-ink);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .toolbar__project,
  .toolbar__spacer {
    display: none;
  }

  .toolbar > :is(.toolbar__new-project, button:nth-of-type(2)) { grid-column: 4; }
  .toolbar > :is(.toolbar__assistant, button:nth-of-type(3)) { grid-column: 5; }
  .toolbar > :is(.toolbar__theme-button, button:nth-of-type(4)) { grid-column: 6; }
  .toolbar > :is(.toolbar__settings-button, button:nth-of-type(5)) { grid-column: 7; }

  .toolbar > :is(
    .toolbar__menu-btn,
    .toolbar__new-project,
    .toolbar__assistant,
    .toolbar__theme-button,
    .toolbar__settings-button,
    button:nth-of-type(1),
    button:nth-of-type(2),
    button:nth-of-type(3),
    button:nth-of-type(4),
    button:nth-of-type(5)
  ) {
    border: 0;
    background: transparent;
  }

  .toolbar > :is(.toolbar__menu-btn, button:nth-of-type(1)) {
    color: var(--wb-rail-soft);
    font-size: 20px;
  }

  .toolbar > :is(.toolbar__new-project, button:nth-of-type(2)),
  .toolbar > :is(.toolbar__assistant, button:nth-of-type(3)) {
    color: transparent;
    font-size: 0;
  }

  .toolbar > :is(.toolbar__new-project, button:nth-of-type(2))::before {
    content: "+";
    color: var(--wb-signal-strong);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
  }

  .toolbar > :is(.toolbar__assistant, button:nth-of-type(3))::before {
    content: "AI";
    color: var(--wb-field-strong);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .toolbar > :is(
    .toolbar__theme-button,
    .toolbar__settings-button,
    button:nth-of-type(4),
    button:nth-of-type(5)
  ) {
    color: var(--wb-rail-soft);
    font-size: 16px;
  }

  .toolbar > button:hover {
    background: var(--wb-rail-raised);
  }

  /* The statusbar has no actions on a phone. Removing it returns useful
     viewport height and avoids crowding the floating assistant. */
  .statusbar {
    display: none;
  }

  /* Every long editor finishes above the persistent assistant. This does not
     change scroll behaviour; it prevents the last field or action from ending
     beneath the launcher. */
  .item-editor,
  .container-editor,
  .spawner-editor,
  .entity-editor,
  .trade-editor,
  .npc-editor,
  .nbt-editor,
  .inspector,
  .converter,
  .settings,
  .project-manager,
  .studio {
    padding-bottom: 112px;
  }

  /* ── Dashboard orientation ───────────────────────────────────────── */
  .hero {
    display: block;
    min-height: 0;
    padding: 52px var(--wb-gutter) 44px;
  }

  .hero__content {
    padding-left: 16px;
  }

  .hero__title {
    max-width: 13ch;
    font-size: clamp(38px, 9.5vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.06em;
  }

  .hero__subtitle {
    max-width: 38ch;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.65;
  }

  /* The full studio ledger repeats information that does not help choose a
     tool on a narrow screen. It remains available on wider contexts. */
  .hero__ledger {
    display: none;
  }

  .tool-grid-section {
    padding-top: 26px;
  }

  .tool-grid__heading {
    margin-top: 38px;
    margin-bottom: 10px;
  }

  .tool-grid .card {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .tool-grid .card--clickable:hover {
    padding-left: 6px;
  }

  /* ── Form workspaces: one boundary per group, never a frame in a frame ─ */
  .spawner-identity,
  .spawner-fields {
    display: grid;
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .spawner-identity .setup-card,
  .spawner-fields .field-section {
    gap: 14px;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--wb-rule);
    border-radius: 10px;
    background: var(--wb-panel);
  }

  .spawner-editor .preset-picker {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--wb-rule-soft);
    background: transparent;
  }

  .spawner-editor .preset-picker__details summary {
    padding: 9px 0;
    border: 0;
    color: var(--wb-ink-soft);
    font-size: 12px;
  }

  .spawner-editor .preset-picker__hint {
    margin-top: 0;
  }

  .spawner-editor .field {
    min-width: 0;
  }

  .spawner-editor .field__label {
    margin-bottom: 6px;
  }

  .spawner-editor .text-input {
    width: 100%;
    min-height: 44px;
  }

  /* The entity icon belongs inside its input on a phone. Keeping it as a
     separate flex column was what made the field appear oddly indented. */
  .spawner-editor .entity-input-wrap {
    display: block;
    position: relative;
  }

  .spawner-editor .entity-icon-preview {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 11px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .spawner-editor .entity-input--with-icon {
    width: 100%;
    padding-left: 42px;
  }

  /* Page-level actions remain together but cannot demand more width than the
     card has. Import keeps the reading-width; history and sharing stay fixed. */
  .spawner-editor .setup-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    justify-content: normal;
    width: 100%;
    margin: 0 0 2px;
    gap: 8px;
  }

  .spawner-editor .setup-card__actions > .btn,
  .spawner-editor .setup-card__actions .undo-redo-bar__btn {
    min-width: 0;
    flex: 0 0 auto;
  }

  .spawner-editor .setup-card__actions .undo-redo-bar {
    width: auto;
    margin: 0;
    gap: 6px;
  }

  .spawner-editor .setup-card__actions .share-btn {
    justify-self: end;
  }

  .ai-assistant-launcher {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    color: var(--wb-rail-ink);
    background: var(--wb-field);
    box-shadow: 0 5px 14px var(--wb-shadow);
    font-size: 10px;
  }

  .ai-assistant-launcher:hover {
    color: var(--wb-rail-ink);
    background: var(--wb-field-strong);
  }

  .notification-center {
    bottom: 72px;
  }
}

@media (max-width: 480px) {
  .toolbar {
    grid-template-columns: 32px 18px minmax(0, 1fr) repeat(4, 32px);
    gap: 3px;
    padding: 0 10px;
  }

  .toolbar > button {
    width: 32px;
    min-width: 32px;
    height: 34px;
  }

  .toolbar__title {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .hero {
    padding-top: 44px;
    padding-bottom: 38px;
  }

  .hero__eyebrow {
    font-size: 8px;
    letter-spacing: 0.13em;
  }

  .hero__title {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  .spawner-identity .setup-card,
  .spawner-fields .field-section {
    padding: 16px;
  }

  /* The compact action rail has four clear targets, rather than four wide
     pills that clip past the left edge. Accessible names and handlers remain
     on the original controls. */
  .spawner-editor .setup-card__actions {
    grid-template-columns: minmax(0, 1fr) 34px 34px 36px;
    gap: 6px;
  }

  .spawner-editor .setup-card__actions .undo-redo-bar {
    display: grid;
    grid-column: 2 / span 2;
    grid-template-columns: 34px 34px;
    gap: 6px;
  }

  .spawner-editor .setup-card__actions .share-btn {
    grid-column: 4;
  }

  .spawner-editor .setup-card__actions > .btn:first-child {
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    color: transparent;
    font-size: 0;
  }

  .spawner-editor .setup-card__actions > .btn:first-child::before {
    content: "IMPORT";
    color: var(--wb-ink-soft);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  .spawner-editor .setup-card__actions .undo-redo-bar__btn {
    width: 34px;
    min-width: 34px;
    height: 36px;
    min-height: 36px;
    padding: 0;
  }

  .spawner-editor .setup-card__actions .undo-redo-bar__btn span,
  .spawner-editor .setup-card__actions .share-btn span {
    display: none;
  }

  .spawner-editor .setup-card__actions .share-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
  }
}