/* The Printing problems window (admin/print-help.js) and the stage's crop
   guide (stage/cropguide.js). Solid panels and ink lines like the rest of the
   admin layer; the crop guide is two plain shades and nothing else. */
.modal.print-help { width: min(940px, 94vw); max-width: none; height: min(720px, 90vh); padding: 16px 18px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; }
.ph-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph-head h2 { margin: 0; }
.ph-statusbar { display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink-line); border-radius: 6px; padding: 6px 10px; background: var(--surface-2); }
.modal .ph-status { margin: 0; flex: 1; font-weight: 800; color: var(--ink); }
.modal .ph-status.ok { color: var(--ok); }
.modal .ph-status.bad { color: var(--danger); }
.ph-main { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; min-height: 0; }
.ph-nav { display: flex; flex-direction: column; gap: 6px; overflow: auto; padding: 2px 8px 6px 2px; }
.ph-nav button { text-align: left; font: inherit; font-weight: 700; color: var(--ink); background: var(--surface); border: 2px solid var(--ink-line); border-radius: 6px; padding: 8px 10px; cursor: pointer; line-height: 1.25; }
.ph-nav button:hover { background: var(--yellow-light); color: #14162B; }
.ph-nav button[aria-selected="true"] { background: var(--yellow); color: #14162B; box-shadow: var(--pop); }
.ph-nav button:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.ph-body { overflow: auto; min-height: 0; padding: 0 10px 8px 2px; scrollbar-gutter: stable; }
.ph-topic h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.ph-topic h4 { margin: 12px 0 4px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.ph-says { margin: 0; padding-left: 20px; color: var(--ink-2); line-height: 1.5; }
.ph-says li { margin: 0 0 7px; }
.ph-rows { border-top: 2px dashed var(--line); margin-top: 10px; }
.ph-rows .row:not(.check) { grid-template-columns: 220px 1fr; }
.modal.print-help .actions { justify-content: flex-start; }
.modal.print-help .log { max-height: 150px; margin-top: 10px; }
.ph-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 2px solid var(--line); padding-top: 8px; }
.modal .ph-foot .hint { margin: 0; flex: 1; }
.ph-foot .actions { margin: 0; flex: none; }
@media (max-width: 760px) {
  .ph-main { grid-template-columns: 1fr; grid-template-rows: 130px minmax(0, 1fr); }
  .ph-foot { flex-direction: column; align-items: stretch; }
}

#layer-crop { pointer-events: none; }
#layer-crop[hidden] { display: none; }
#layer-crop i { position: absolute; display: block; background: rgba(0, 0, 0, .55); }
#layer-crop i:first-child { left: 0; top: 0; }
#layer-crop i:last-child { right: 0; bottom: 0; }
#stage:not([data-state="idle"]):not([data-state="countdown"]) #layer-crop { display: none; }