/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * Note: Font @font-face declarations are now generated dynamically via FontHelper
 * and included in the layout files. See app/helpers/font_helper.rb
 */

/* Publication editing chrome: keep navigation within reach of the canvas. */
#main-content:has(.publication-workspace) { padding: 0 1.5rem 6rem; --publication-sidebar-width: 0px; --publication-right-panel-width: 16.8rem; }
.publication-workspace { max-width: none; }
.publication-titlebar { display: grid; grid-template-columns: 1fr minmax(0, 1fr) 1fr; align-items: center; gap: 1rem; min-height: 3.5rem; border-bottom: 1px solid #e5e7eb; }
.publication-titlebar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: .95rem; font-weight: 600; }
.publication-back { display: flex; align-items: center; gap: .65rem; color: #6b7280; font-size: .8rem; }
.publication-dimensions { text-align: right; font-size: .75rem; color: #6b7280; white-space: nowrap; }
.publication-bottom-bar { position: fixed; bottom: 1rem; left: calc(50% + var(--publication-sidebar-width) / 2); right: auto; z-index: 35; display: flex; width: max-content; max-width: calc(100vw - 2rem); transform: translateX(-50%); align-items: center; justify-content: center; gap: 1.25rem; min-height: 4rem; padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; box-shadow: 0 4px 18px #11182712; }
.sidebar:not([data-sidebar-ready="true"]) { transition: none !important; }
.publication-workflow, .publication-tools { display: flex; align-items: center; gap: .25rem; }
.publication-tools { border-left: 1px solid #e5e7eb; padding-left: 1rem; }
.publication-ad-counts { display: flex; align-items: center; gap: .45rem; border-left: 1px solid #e5e7eb; padding-left: .75rem; color: #6b7280; font-size: .6875rem; line-height: 1; white-space: nowrap; }
.publication-ad-counts strong { color: #111827; font-weight: 700; }
.publication-tools-separator { width: 1px; height: 2rem; background: #e5e7eb; margin-left: .5rem; }
.publication-view-bar { display: flex; align-items: center; gap: .1rem; }
.publication-view-bar .publication-tool { flex: 0 0 2.5rem; padding: 0; }
.publication-tool { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; color: #6b7280; cursor: pointer; }
.publication-tool svg { width: 1.25rem; height: 1.25rem; }
.publication-tool:hover { background: #f3f4f6; color: #111827; }
.publication-tool:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.publication-tool[aria-expanded="true"] { background: #eff6ff; color: #2563eb; }
.publication-tool[aria-pressed="true"] { background: #111827; color: #fff; }
.publication-ai-instructions { padding-right: .75rem; }
.publication-comments-panel, .publication-side-panel { position: fixed; right: 0; top: 3rem; bottom: calc(4rem + env(safe-area-inset-bottom)); z-index: 34; display: flex; flex-direction: column; width: var(--publication-right-panel-width); max-width: calc(100vw - 1rem); background: white; border-left: 1px solid #e5e7eb; box-shadow: -4px 0 18px #11182708; }
.publication-comments-panel[hidden], .publication-side-panel[hidden] { display: none; }
.publication-side-panel { font-size: .8125rem; }
.publication-side-panel form label { font-size: .75rem; }
.publication-side-panel input:is([type="text"], [type="number"], [type="email"], [type="url"]), .publication-side-panel select, .publication-side-panel textarea { min-height: 2rem; padding: .375rem .5rem; font-size: .8125rem; }
@media (min-width: 768px) {
  #main-content:has(.publication-workspace) { --publication-sidebar-width: 16rem; }
  #main-content.md\:ml-16:has(.publication-workspace) { --publication-sidebar-width: 4rem; }
}
@media (min-width: 1280px) {
  #main-content:has(.publication-workspace) { padding-right: calc(1.5rem + var(--publication-right-panel-width)); }
}
@media (max-width: 640px) {
  #main-content:has(.publication-workspace) { padding-inline: .75rem; padding-bottom: 8rem; }
  .publication-titlebar { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; padding-block: .65rem; }
  .publication-back span:last-child { display: none; }
  .publication-dimensions { grid-column: 2; text-align: center; }
  .publication-bottom-bar { bottom: .5rem; flex-wrap: wrap; gap: .25rem; padding-inline: .25rem; }
  .publication-workflow a { padding: .5rem; font-size: .75rem; }
  .publication-workflow a span { display: none; }
  .publication-tools { padding-left: .25rem; }
  .publication-ad-counts { gap: .3rem; padding-left: .4rem; font-size: .625rem; }
  .publication-tool, .publication-view-bar .publication-tool { width: 2rem; flex-basis: 2rem; }
}