/* Carozel UI v1.0.5: mobile template access and theme-aware interface text. */
:root {
  --cz-label-bg: #eeedff;
  --cz-label-ink: #4338ca;
}
html[data-theme="dark"] {
  --cz-label-bg: #373359;
  --cz-label-ink: #ede9fe;
}

/* Apply the foreground and background together to the editor's slide badge. */
html .editor-page .panel-heading #slide-kind {
  color: var(--cz-label-ink);
  background: var(--cz-label-bg);
  font-weight: 600;
}

/* Supporting copy uses the same readable theme token as the gallery. */
html :is(.field-help, .sidebar-note, .workspace-note,
  .workspace-toolbar > span, .preview-controls > span, .panel-label > span,
  .field label > span, .upload-zone > span:last-child,
  .start-form-bottom > span, .hero-notes, .showcase-heading, .showcase-count,
  .platform-row > span:first-child, .history-toolbar p, .dashboard-footnote,
  .project-card time, .project-photo-note, .summary-note, .plan-pending) {
  color: var(--muted);
}
html .slide-item:not([aria-pressed="true"]) { color: var(--muted); }
html .template-format-section .format-tile:not(.active-format) span {
  color: var(--muted);
}
html .field :is(input, textarea)::placeholder,
html .start-form textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* These dialog buttons had a light background with light text in dark mode. */
html[data-theme="dark"] .format-row-actions button {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .format-row-actions button:hover {
  background: #334155;
}
html[data-theme="dark"] .format-editor fieldset {
  border-color: var(--line);
}
/* The quota card keeps its dark gradient in both themes. */
html[data-theme] .quota-card p { color: #e2ddff; }
/* Keep white CTA labels against the primary button color inside dialogs. */
html[data-theme="dark"] dialog .button-primary { color: #fff; }

@media (max-width: 640px) {
  /* The native type selector below already exposes every content format. */
  .template-format-section { display: none; }
  .template-gallery-section {
    border-top: 0;
    margin-top: 24px;
    padding-top: 0;
  }
  .template-gallery-section #template-type {
    min-height: 48px;
    font-size: 1rem;
  }
  .template-gallery-section .template-status { margin-bottom: 20px; }

  /* Align the closing text and CTA with the left edge of nearby card text. */
  .home-page .closing-strip {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  .home-page .closing-strip p {
    text-align: left;
    text-wrap: wrap;
  }
  .home-page .closing-strip .button { align-self: flex-start; }
}