/* Obrys — print & publishing, Photoshop presets, media, Liquid Glass UI */

/* A-format button in the top bar */
.btn.aformat { display: inline-flex; align-items: center; gap: 6px; background: var(--topbar-2); color: var(--topbar-fg); border-color: transparent; }
.btn.aformat:hover { background: #3A3A44; }
.btn.aformat b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--acc); color: #fff; font-size: 11px; font-weight: 800; }
.btn.aformat .ic { opacity: .7; }
@media (max-width: 720px) { .btn.aformat .lbl { display: none; } }

/* Photoshop-style new document */
.dlg.psn-dlg { width: min(980px, 100%); }
.psn-cats { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.psn-cats button { border: 0; background: none; color: var(--fg-2); font: inherit; font-weight: 600; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.psn-cats button:hover { background: var(--panel-2); color: var(--fg); }
.psn-cats button.on { background: var(--acc-soft); color: var(--acc); }
.psn-main { display: grid; grid-template-columns: 1fr 280px; gap: 14px; min-height: 0; }
.psn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; align-content: start; padding: 2px; }
.psn-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 10px; padding: 8px 10px 10px; cursor: pointer; font: inherit; }
.psn-card:hover { border-color: var(--fg-3); }
.psn-card.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.psn-card b { font-size: 12px; line-height: 1.3; }
.psn-card em { font-style: normal; font-size: 11px; color: var(--fg-3); }
.psn-th { width: 100%; height: 56px; display: grid; place-items: center; margin-bottom: 4px; }
.psn-th i { display: block; background: var(--panel-2); border: 1px solid var(--fg-3); border-radius: 2px; }
.psn-side { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--line); padding-left: 14px; }
.psn-side .dlg-row { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; }
.psn-side .dlg-row > span:first-child { font-size: 11px; color: var(--fg-2); }
.psn-side input, .psn-side select { width: 100%; min-width: 0; }
.psn-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psn-or { display: flex; gap: 4px; }
.psn-or .ib.on { background: var(--acc-soft); color: var(--acc); }
.psn-px { font-size: 11px; color: var(--fg-2); background: var(--panel-2); border-radius: 6px; padding: 6px 8px; }
@media (max-width: 760px) { .psn-main { grid-template-columns: 1fr; } .psn-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; } .psn-grid { max-height: 34vh; } }

/* publication dialog: fields in two columns */
.dlg.two-col .dlg-b { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start; }
.dlg.two-col .dlg-b > .dlg-text { grid-column: 1 / -1; }
@media (max-width: 640px) { .dlg.two-col .dlg-b { grid-template-columns: 1fr; } }

/* website device chooser */
.dev-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.dev-tips { margin: 6px 0 0; padding-left: 18px; color: var(--fg-2); line-height: 1.5; }

/* media */
.md-prev { width: 100%; max-height: 180px; border-radius: 8px; background: #000; display: block; margin: 4px 0 8px; }
audio.md-prev { background: transparent; height: 36px; }
.pr-media { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); z-index: 1; }
.ps-x.note { font-size: 11px; color: var(--fg-3); }

/* text frames & preflight */
.warn { color: var(--danger); font-weight: 600; }
.pf-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.pf-it { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; }
.pf-it:hover { border-color: var(--acc); }
.pf-it span { color: var(--danger); font-size: 12px; }
.fp-foot .link { font-size: inherit; }

/* drag & drop of files anywhere in the window */
#drop-hint { position: fixed; inset: 8px; z-index: 3000; border: 2px dashed var(--acc); border-radius: 14px; background: rgba(13, 153, 255, .08); display: grid; place-items: center; pointer-events: none; }
#drop-hint div { background: var(--panel); color: var(--fg); box-shadow: var(--shadow); padding: 14px 20px; border-radius: 10px; font-weight: 600; max-width: min(560px, 90vw); text-align: center; }
#app img, .pm img, .dlg img { -webkit-user-drag: none; }

.pm-tip { color: var(--fg-3); font-size: 12px; margin: 0 auto 0 16px; }
@media (max-width: 720px) { .pm-tip { display: none; } }

/* Code tab: HTML */
.code-actions { display: flex; gap: 4px; }