/* Shared bottom tab bar (Home / Copy / Montage / Enhance) for pages that do
 * not already carry it in their own stylesheet. Same markup and look as the
 * bar on Photo Montage and Photo Enhance (.cf-tbar), on the LYRC tokens.
 * Phones only (< 900px). Full-screen editors (beat editor, montage editor)
 * keep their own tool dock instead. */

@media (max-width: 899px) {
  .cf-tbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 8px) max(10px, env(safe-area-inset-left, 0px));
    background: #0A0A0D; border-top: 1px solid var(--cf-border, #2A2C36);
    view-transition-name: cf-tabbar;
  }
  .cf-tbar-inner {
    max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  }
  .cf-tbar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 8px 6px 6px; min-height: 56px; border-radius: var(--cf-r-panel, 12px);
    color: var(--cf-text-3, rgba(255,255,255,.5)); text-decoration: none; position: relative; z-index: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .cf-tbar-ic {
    width: 34px; height: 34px; border-radius: var(--cf-r-card, 8px);
    display: flex; align-items: center; justify-content: center;
    background: var(--cf-surface, #15161C); border: 1px solid var(--cf-border, #2A2C36); color: var(--cf-text, #fff);
  }
  .cf-tbar-ic svg { width: 18px; height: 18px; }
  .cf-tbar-lbl { font: 600 10.5px/1.1 var(--cf-font, 'Inter', sans-serif); color: var(--cf-text-3, rgba(255,255,255,.5)); }
  .cf-tbar-item.is-on .cf-tbar-ic { background: var(--cf-accent, #3B82F6); border-color: var(--cf-accent, #3B82F6); color: #fff; }
  .cf-tbar-item.is-on .cf-tbar-lbl { color: var(--cf-text, #fff); }
}
@media (max-width: 360px) {
  .cf-tbar-lbl { font-size: 9.5px; }
  .cf-tbar-ic { width: 32px; height: 32px; }
}
@media (min-width: 900px) { .cf-tbar { display: none !important; } }

/* Copy an Edit: make room for the bar on the intro and in the tool. */
@media (max-width: 899px) {
  body.cf-copy-page { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  body.cf-copy-page .ce-cover { bottom: calc(env(safe-area-inset-bottom, 0px) + 73px); }
  body.cf-copy-page .cf-editmore { bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important; }
}