/**
 * Print Lab — research-dossier skin.
 *
 * Loaded alongside gw-hook-dossier.css, which supplies the tokens, page header,
 * and type scale. The Print Lab is a tool rather than a document, so the body is
 * laid out as a workbench: controls left, the sheet being made on the right.
 *
 * IMPORTANT — control rows are flex, not grid. The page script shows and hides
 * them with `style.display = 'flex' | 'none'` in ~39 places (updateTypeUI and
 * friends), so any row that JS can toggle must lay out correctly as a flex row.
 * Two rows are set to `flex` but stack their contents; they set
 * flex-direction: column here so the script does not need to know.
 *
 * @since 1.7.8
 */

/* The dossier header reserves a column for the hook silhouette; the Print Lab
   has none, so the header runs full width. */
html body .gw-entry.gw-dossier.gw-print-lab > .gw-page-header {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding-bottom: 22px !important;
}

#hc-print-lab { color: var(--gwd-ink); font-family: var(--gwd-sans); }

/* ── Search ────────────────────────────────────────────────────────────────── */
.pl-search-block { padding: 20px 0 0; }
.pl-search-label {
  display: block;
  margin-bottom: 7px;
  color: #767e7a;
  font: 850 8px/1 var(--gwd-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pl-search-row { display: flex; align-items: center; gap: 12px; }
#hpl-search {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
  color: var(--gwd-ink);
  background: #f7f6f2;
  border: 1px solid #aaaead;
  border-radius: 0;
  font: 14px/1 var(--gwd-serif);
}
#hpl-search:focus-visible { outline: 2px solid var(--gwd-orange); outline-offset: 1px; }
#hpl-status { flex-shrink: 0; color: #7a827e; font: 9px/1.3 var(--gwd-sans); white-space: nowrap; }

#hpl-results { position: relative; z-index: 50; }
#hpl-results-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #aaaead;
  border-top: 0;
  box-shadow: 0 14px 34px rgba(31, 38, 34, .16);
}

/* ── Loaded hook ───────────────────────────────────────────────────────────── */
.pl-loaded {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 14px 0 15px;
  border-top: 2px solid var(--gwd-ink);
  border-bottom: 1px solid var(--gwd-line);
}
.pl-loaded-meta { min-width: 0; }
.pl-loaded-eyebrow {
  display: block;
  color: #767e7a;
  font: 850 8px/1.3 var(--gwd-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}
#hpl-hook-name {
  margin: 5px 0 0 !important;
  color: var(--gwd-ink) !important;
  font: 750 22px/1.15 var(--gwd-sans) !important;
  letter-spacing: -.03em !important;
}
#hpl-hook-name:empty { display: none; }
.pl-loaded-links { margin: 0 !important; }
#hpl-ref-link { color: var(--gwd-green) !important; font: 850 9px/1 var(--gwd-sans); letter-spacing: .05em; text-transform: uppercase; }

/* ── Export type ───────────────────────────────────────────────────────────── */
/* Export type decides which other controls exist, so it leads rather than
   sitting mid-stack as one select among fifteen. The <select> stays in the DOM
   as the value the script reads; these buttons drive it. */
.pl-type-heading {
  margin: 30px 0 12px !important;
  color: var(--gwd-ink) !important;
  font: 750 21px/1.15 var(--gwd-sans) !important;
  letter-spacing: -.03em !important;
}
.pl-types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pl-type {
  display: grid;
  min-width: 0;
  padding: 11px 12px 12px;
  align-content: start;
  gap: 4px;
  color: #5e6763;
  background: transparent;
  border: 1px solid #aaaead;
  border-right: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}
.pl-type:last-child { border-right: 1px solid #aaaead; }
.pl-type strong { font: 850 10px/1.25 var(--gwd-sans); letter-spacing: .03em; }
.pl-type span { color: #7a827e; font: 9px/1.4 var(--gwd-serif); }
.pl-type:hover { background: #e3e0d9; }
.pl-type.is-on { color: #fff; background: var(--gwd-green); border-color: var(--gwd-green); }
.pl-type.is-on span { color: #b8d2c8; }
.pl-type:focus-visible { outline: 2px solid var(--gwd-orange); outline-offset: -2px; }

/* The select remains for the script; it is not shown twice. */
.pl-type-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Workbench ─────────────────────────────────────────────────────────────── */
.pl-bench {
  display: grid;
  grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
  align-items: start;
  gap: 38px;
  margin-top: 26px;
}
.pl-controls { min-width: 0; }
.pl-stage { min-width: 0; position: sticky; top: 14px; align-self: start; }

.pl-group { margin: 0 0 20px; border-top: 1px solid var(--gwd-line); }
.pl-group:first-child { border-top: 2px solid var(--gwd-ink); }
.pl-group > h3 {
  margin: 0 !important;
  padding: 10px 0 8px !important;
  color: #767e7a !important;
  font: 850 8px/1.3 var(--gwd-sans) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* Control rows — flex, because the script toggles them with display:flex. */
#hpl-size-row,
#hpl-rows-row,
#hpl-step-row,
#hpl-meas-row,
#hpl-photo-row,
#hpl-zoom-row,
#hpl-lab-card-row,
#hpl-lab-sizes-row,
#hpl-lab-copies-row,
#hpl-cmp-overlay-row,
#hpl-cmp-rows-row,
#hpl-land-row,
#hpl-sketch-perpage-row,
#hpl-sketch-grid-row,
#hpl-sketch-fliphook-row,
#hpl-sketch-fill-row,
.pl-field {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
/* These two are shown with display:flex but stack their contents. */
#hpl-sketch-recipe-row,
#hpl-sketch-overlay-row { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 12px; }

.pl-label {
  flex: 0 0 96px;
  width: 96px;
  color: #4d5752;
  font: 11px/1.35 var(--gwd-serif);
}
#hc-print-lab select,
#hc-print-lab input[type="text"] {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  color: var(--gwd-ink);
  background: #f7f6f2;
  border: 1px solid #aaaead;
  border-radius: 0;
  font-size: 11px;
}
#hc-print-lab select:focus-visible { outline: 2px solid var(--gwd-orange); outline-offset: 1px; }
.pl-check { display: flex; align-items: center; gap: 7px; color: #4d5752; font: 11px/1.35 var(--gwd-serif); }
.pl-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--gwd-green); }

/* Size picker */
#hpl-size-btn {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  color: var(--gwd-ink);
  background: #f7f6f2;
  border: 1px solid #aaaead;
  border-radius: 0;
  cursor: pointer;
  font: 12px/1 var(--gwd-serif);
  text-align: left;
}
#hpl-size-btn-label { font-weight: 700; }
#hpl-size-btn-dims { color: #7a827e; font: 9px/1 var(--gwd-sans); white-space: nowrap; }
.pl-size-wrap { position: relative; display: flex; flex: 1; min-width: 0; }
#hpl-size-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #aaaead;
  border-top: 0;
  box-shadow: 0 14px 30px rgba(31, 38, 34, .16);
}
#hpl-size-single { color: #616b66; font: 11px/1.5 var(--gwd-serif); }

/* Two-state choices read as switches. */
.pl-toggle { display: inline-flex; }
.pl-toggle button {
  min-width: 44px;
  min-height: 30px;
  color: #5e6763;
  background: transparent;
  border: 1px solid #aaaead;
  border-right: 0;
  border-radius: 0;
  cursor: pointer;
  font: 850 9px/1 var(--gwd-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pl-toggle button:last-child { border-right: 1px solid #aaaead; }
.pl-toggle button.hpl-unit-on,
.pl-toggle button.is-on { color: #fff; background: var(--gwd-green); border-color: var(--gwd-green); }

/* Queued hooks (comparison / labels / sketch) */
#hpl-multi { margin: 0 0 14px; }
#hpl-reset-row { margin: 0 0 14px; }
#hpl-reset,
.pl-ghost-btn {
  min-height: 30px;
  padding: 0 11px;
  color: #4d5752;
  background: transparent;
  border: 1px solid #aaaead;
  border-radius: 0;
  cursor: pointer;
  font: 800 9px/1 var(--gwd-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
#hpl-reset:hover,
.pl-ghost-btn:hover { color: #fff; background: var(--gwd-ink); border-color: var(--gwd-ink); }

/* Recipe editor */
#hpl-sketch-recipe-row > div:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#hpl-sketch-recipe-row .pl-label { flex: none; width: auto; }
#hpl-sketch-preset { flex: none; max-width: 150px; font-size: 10px; min-height: 28px; }
#hpl-sketch-recipe { display: flex; flex-direction: column; gap: 4px; }
#hpl-sketch-recipe-hint { margin: 0 !important; color: #7a827e; font: 10px/1.5 var(--gwd-serif) !important; }

/* ── Output ────────────────────────────────────────────────────────────────── */
.pl-output { padding: 15px; background: #e3e0d9; border-top: 2px solid var(--gwd-ink); }
#hpl-fit { margin: 0 0 10px !important; font: 11px/1.5 var(--gwd-serif) !important; }
#hpl-fit:empty { display: none; }
#hpl-export {
  width: 100%;
  min-height: 44px;
  color: #fff;
  background: var(--gwd-orange);
  border: 1px solid var(--gwd-orange);
  border-radius: 0;
  cursor: pointer;
  font: 850 12px/1 var(--gwd-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
#hpl-export:hover:not(:disabled) { background: #c74f28; border-color: #c74f28; }
#hpl-export:disabled { cursor: not-allowed; }
#hpl-extra-row { flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
#hpl-extra-row button,
#hpl-extra-row select {
  min-height: 30px;
  padding: 0 10px;
  flex: none;
  color: #4d5752;
  background: #f7f6f2;
  border: 1px solid #aaaead;
  border-radius: 0;
  cursor: pointer;
  font: 800 9px/1 var(--gwd-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
#hpl-extra-row button:hover { color: #fff; background: var(--gwd-ink); border-color: var(--gwd-ink); }
/* Room for the native select arrow, or "300 dpi" truncates. */
#hpl-dpi { min-width: 78px; padding-right: 4px; }

/* The one instruction that silently ruins the output. */
.pl-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #fdf3e0;
  border: 1px solid #e0b35c;
}
.pl-note b { color: #8a5a12; font: 850 8px/1.5 var(--gwd-sans); letter-spacing: .08em; text-transform: uppercase; }
.pl-note p { margin: 0 !important; color: #6f5a2e; font: 11px/1.5 var(--gwd-serif) !important; }

/* ── Stage ─────────────────────────────────────────────────────────────────── */
.pl-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--gwd-line);
}
.pl-stage-head h2 {
  margin: 0 !important;
  color: var(--gwd-ink) !important;
  font: 750 17px/1.15 var(--gwd-sans) !important;
  letter-spacing: -.02em !important;
}
#hpl-preview-note { color: #767e7a; font: 9px/1.4 var(--gwd-sans); letter-spacing: .05em; text-transform: uppercase; }
#hpl-preview {
  padding: 22px;
  overflow-x: auto;
  background: #d9d5cc;
  border: 0;
  border-radius: 0;
}
/* The figure the script injects is the printed sheet — show it as paper. */
#hpl-preview > * { background: #fff; box-shadow: 0 10px 30px rgba(31, 38, 34, .16); }

/* ── Status messages ───────────────────────────────────────────────────────── */
#hpl-loading, #hpl-error, #hpl-unmeasured { margin-top: 20px; font: 12px/1.6 var(--gwd-serif); }
#hpl-loading { color: #7a827e; }
#hpl-error { color: #a8341c; }
#hpl-unmeasured {
  padding: 12px 14px;
  color: #6f5a2e;
  background: #fdf3e0;
  border: 1px solid #e0b35c;
  border-radius: 0;
}

/* ── Help ──────────────────────────────────────────────────────────────────── */
#hpl-help-link { color: var(--gwd-green) !important; font: 850 9px/1 var(--gwd-sans); letter-spacing: .05em; text-transform: uppercase; }
#hpl-help {
  margin: 20px 0 0;
  padding: 22px 24px;
  background: #f4f2ed;
  border: 0;
  border-top: 2px solid var(--gwd-ink);
  border-radius: 0;
  box-shadow: none;
  color: #4d5752;
  font: 12px/1.7 var(--gwd-serif);
}
#hpl-help h2 { margin: 0 0 6px !important; color: var(--gwd-ink) !important; font: 750 20px/1.15 var(--gwd-sans) !important; letter-spacing: -.03em !important; }
#hpl-help h3 { margin: 18px 0 6px !important; color: #767e7a !important; font: 850 8px/1.3 var(--gwd-sans) !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
#hpl-help dt { margin: 12px 0 3px; color: var(--gwd-ink); font: 700 13px/1.3 var(--gwd-serif); }
#hpl-help dd { margin: 0; color: #4d5752; font: 11.5px/1.65 var(--gwd-serif); }
#hpl-help p, #hpl-help li { font: 12px/1.7 var(--gwd-serif); }

@media (max-width: 1080px) {
  .pl-bench { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pl-stage { position: static; }
  .pl-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-type:nth-child(3n) { border-right: 1px solid #aaaead; }
  .pl-type:nth-child(n+4) { border-top: 0; }
}
@media (max-width: 640px) {
  .pl-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-type:nth-child(3n) { border-right: 0; }
  .pl-type:nth-child(2n) { border-right: 1px solid #aaaead; }
  .pl-label { flex-basis: 82px; width: 82px; }
  #hpl-preview { padding: 12px; }
}

@media print {
  .pl-bench, .pl-types, .pl-search-block, .pl-loaded, #hpl-help { display: none !important; }
}