/* Breakpoints (layout.css describes them). Loaded last: a component rule
   of equal specificity loaded after a container query would silently win
   over it. */

@container app (max-width: 1439px) {
  .tb .lbl,
  .aid .lbl { display: none; }
  .tb { min-width: var(--touch); height: var(--touch); }
  .cmd input { width: 140px; }
}

@container app (max-width: 1279px) {
  .dock { --dock-l: calc(var(--safe-l) + 52px + 2 * var(--gap) + 8px); }
  .rail { display: flex; }
  .nav { left: calc(var(--safe-l) + var(--gap) + 52px + 8px); width: 264px; z-index: 7; }
  .nav:not(.open) { display: none; }
  .nav-close { display: inline-grid; }
  /* Overlay panels end above the tool bar instead of covering it. */
  .overlay-l { left: calc(var(--safe-l) + var(--gap) + 52px + 8px); bottom: calc(var(--safe-b) + 88px); }
  .cmd input { width: 100px; }
  .cmd kbd { display: none; }
}

@container app (max-width: 1023px) {
  .dock { --dock-r: calc(var(--safe-r) + var(--gap)); }
  /* As tall as its content, up to the room above the tool bar. */
  .inspector {
    top: auto;
    height: auto;
    max-height: min(560px, calc(100% - var(--panel-top) - 96px));
    bottom: calc(var(--safe-b) + 88px);
    z-index: 7;
  }
  .inspector:not(.open) { display: none; }
  .tablet-up { display: inline-grid; }
  /* Messages and the prompt move left of the open properties card. */
  #app[data-open~="inspector"] .dock > .prompt {
    align-self: flex-start;
    max-width: calc(100% - var(--right-w) - var(--gap));
  }
  .hide-tablet { display: none !important; }
  /* The command field folds into an icon; tapping it opens the field. */
  .cmd { width: var(--touch); justify-content: center; padding: 0; cursor: pointer; }
  .cmd input { display: none; }
  .cmd.open { width: auto; justify-content: flex-start; padding: 0 8px 0 10px; }
  .cmd.open input { display: block; width: 160px; }
}

@container app (max-width: 599px) {
  /* Secondary tools leave the tool bar for "더보기" (not the sheet itself). */
  .rail,
  .hide-phone,
  .toolbar > .tb.secondary,
  .toolbar > .aid.secondary,
  .fname-sub { display: none !important; }
  .phone-only { display: inline-grid; }
  .top-l { padding-right: 4px; }

  /* Panels become bottom sheets above the tool bar, one at a time. */
  .nav,
  .inspector,
  .overlay-l,
  .overlay-r {
    left: calc(var(--safe-l) + 8px);
    right: calc(var(--safe-r) + 8px);
    top: auto;
    bottom: calc(var(--safe-b) + 80px);
    width: auto;
    max-width: none;
    height: 58%;
    max-height: calc(100% - var(--panel-top) - 80px);
    border-radius: 16px;
  }
  .overlay-l { height: calc(100% - var(--panel-top) - 88px); }
  .inspector,
  .overlay-r { height: auto; }
  .handle { display: block; }

  .dock { --dock-l: calc(var(--safe-l) + 8px); --dock-r: calc(var(--safe-r) + 8px); bottom: calc(var(--safe-b) + 8px); align-items: stretch; }
  .toolbar { justify-content: space-around; border-radius: 16px; }
  .tb { min-width: 52px; height: 52px; }
  .tb .lbl { display: block; }
  .tb.more { display: inline-flex; }
  .toolbar > .vsep { display: none; }
  .prompt { justify-content: space-between; }
  /* Messages stay above the docked edit bar. */
  #app.has-ctx .prompt { margin-bottom: 68px; }
  .cmd.open { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: var(--panel); box-shadow: var(--shadow); height: 48px; }
  .cmd.open input { flex: 1; width: auto; font-size: 16px; }
  #app.drawing:not(.keypad-off) .keypad { display: flex; }

  /* The edit bar docks above the tool bar, with labels. */
  .ctx {
    left: calc(var(--safe-l) + 8px);
    right: calc(var(--safe-r) + 8px);
    top: auto;
    bottom: calc(var(--safe-b) + 80px);
    transform: none;
    overflow-x: auto;
  }
  .ctx .chip-count { display: none; }
  .ctx .tb { min-width: 56px; height: 52px; padding: 0 4px; }
  .ctx .tb .lbl { display: block; }
  .ctx .vsep { display: none; }
}