/* PDF Desk (D-02). Layout only; color, type, and chrome come from ../shared/aa.css. */

.pdf-page { height: 100vh; overflow: hidden; }
.pdf-page .desk { min-height: 0; overflow: hidden; }
.pd-main { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.desk-title .actions { flex-wrap: wrap; }

.pd-bars { border-bottom: var(--rule); }
.toolbar {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 6px var(--s4);
  background: var(--band);
  border-bottom: var(--rule-minor);
}
.toolbar:last-child { border-bottom: 0; }
/* [hidden] is display:none !important. Keep this row's height so the page does not jump. */
#fillBar[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}
.bar-key { color: var(--ink2); }
.bar-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); min-width: 0; }
.bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
.bar-end { margin-left: auto; }

.form-inline { display: flex; align-items: center; gap: 6px; }
.form-inline label,
.form-inline {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}
.input, .select {
  min-height: 30px;
  padding: 0 var(--s2);
  border: var(--rule-minor);
  background: var(--field);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0;
}
.input:focus, .select:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.w-page { width: 52px; text-align: right; }
.w-search { width: 140px; }
.w-output { width: 160px; }
.w-author { width: 120px; }
.zoom-readout { min-width: 48px; font-size: 13px; font-weight: 500; }

.btn-ghost, .view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--s2);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t14);
  color: var(--navy);
  cursor: pointer;
}
.btn-ghost:hover, .view-btn:hover { border-color: var(--minor); background: var(--field); }
.btn-ghost:disabled, .view-btn:disabled { color: var(--ink3); opacity: 0.55; cursor: default; }
.view-toggle { display: flex; flex-wrap: wrap; border: var(--rule-minor); background: var(--field); }
.view-btn { border: 0; border-right: var(--rule-minor); }
.view-btn:last-child { border-right: 0; }
.view-btn.is-active { background: var(--navy); color: var(--field); }
.view-btn.is-active:hover { background: var(--navy); color: var(--field); }

.pd-status {
  margin: 0;
  padding: 6px var(--s4);
  border-bottom: var(--rule-minor);
  font-family: var(--f-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink2);
}
#work { position: relative; }
.msg { margin: 0; border-left: 0; border-right: 0; }

.work {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 300px;
}

.thumbs {
  overflow: auto;
  border-right: var(--rule-minor);
  background: var(--margin);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.thumb {
  display: grid;
  gap: 4px;
  padding: 4px;
  border: var(--rule-minor);
  background: var(--field);
  cursor: pointer;
  text-align: center;
}
.thumb.is-current { box-shadow: inset 3px 0 0 var(--redline); }
.thumb canvas { display: block; width: 100%; height: auto; background: var(--field); border: var(--rule-minor); }
.thumb .mono { font-size: 11px; color: var(--ink2); }
.thumb.is-drop { outline: 2px solid var(--focus); outline-offset: -2px; }

.stage {
  position: relative;
  overflow: auto;
  background: var(--margin);
  min-width: 0;
  outline: none;
}
.stage.is-drop { box-shadow: inset 3px 0 0 var(--redline); }
.stage.is-pan, .stage.is-pan .sheet { cursor: grab; }
.stage.is-inking { cursor: crosshair; }
.pages { padding: var(--s4) 0 var(--s6); }
.sheet { width: max-content; margin: 0 auto var(--s4); }
.sheet-inner {
  position: relative;
  background: var(--field);
  border: var(--rule);
  box-shadow: 0 0 0 8px var(--margin);
}
.sheet.is-current .sheet-inner { box-shadow: inset 0 3px 0 var(--redline), 0 0 0 8px var(--margin); }
.sheet canvas { display: block; }
.mark-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fill-layer, .text-layer, .overlay { position: absolute; inset: 0; }
.fill-layer { overflow: visible; pointer-events: none; }
.text-layer { overflow: hidden; }
.overlay { overflow: visible; }
.text-layer { line-height: 1; user-select: none; pointer-events: none; }
.tool-highlight .text-layer, .tool-select .text-layer { user-select: text; pointer-events: auto; }
.text-layer span {
  position: absolute;
  white-space: pre;
  color: transparent;
  transform-origin: 0 0;
  cursor: text;
}
.text-layer span::selection { background: rgba(29, 95, 209, 0.28); }
.overlay { pointer-events: none; }
.overlay .flash { fill: none; stroke: var(--redline); stroke-width: 1.5; }
.overlay .mark-stroke { fill: none; stroke-width: 1.5; }
.overlay .mark-selected { fill: none; stroke: var(--focus); stroke-width: 2; }
.overlay .handle { fill: var(--focus); stroke: var(--field); stroke-width: 2; }
.overlay .resize-grip { fill: var(--focus); stroke: var(--field); }
.overlay .move-grip { fill: var(--field); stroke: var(--focus); stroke-width: 2; }
.image-swatch {
  width: 36px;
  height: 36px;
  border: var(--rule-minor);
  background-color: var(--field);
  background-image:
    linear-gradient(45deg, var(--margin) 25%, transparent 25%),
    linear-gradient(-45deg, var(--margin) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--margin) 75%),
    linear-gradient(-45deg, transparent 75%, var(--margin) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.image-swatch canvas { display: block; width: 36px; height: 36px; }
#imageBar input[type="range"] { width: 88px; accent-color: var(--focus); border-radius: 0; }
#imageKeyNote { max-width: 280px; }
.color-choices { gap: var(--s1); }
.swatch {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1.5px solid var(--navy);
  background: var(--field);
  cursor: pointer;
}
.swatch.swatch-navy { background: #16233F; }
.swatch.swatch-gold { background: #FFD933; }
.swatch.swatch-redline { background: #C0341D; }
.swatch.swatch-blue { background: #1D5FD1; }
.swatch.swatch-green { background: #27643F; }
.swatch.swatch-white { background: #FFFFFF; }
.swatch.swatch-black { background: #000000; }
.fill-note {
  margin: 0;
  flex: 1 0 100%;
  max-width: 72rem;
  font-size: var(--t14);
  line-height: 1.35;
  color: var(--ink2);
}
.swatch.is-on { outline: 2px solid var(--focus); outline-offset: 1px; }
.swatch.custom { display: grid; place-items: center; }
.swatch input[type="color"] {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input[type="color"]::-webkit-color-swatch { border: 0; }

.empty-state { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: var(--s6) var(--s4); }
.empty-panel {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  width: min(520px, 100%);
  padding: var(--s6) var(--s5);
  border: 1.5px dashed var(--navy);
  background: var(--field);
  text-align: center;
}
.empty-title { font-family: var(--f-title); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.empty-sub { max-width: 46ch; font-size: var(--t14); color: var(--ink2); }
.empty-note { margin: 0; padding: var(--s3); color: var(--ink2); font-size: var(--t14); }

.comments {
  min-width: 0;
  overflow: auto;
  border-left: var(--rule);
  background: var(--field);
  display: flex;
  flex-direction: column;
}
.comments-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3);
  border-bottom: var(--rule-minor);
  background: var(--band);
}
.comments-head .caption b { color: var(--navy); font-weight: 600; }
.composer, .selection-bar { padding: var(--s3); border-bottom: var(--rule-minor); display: grid; gap: var(--s2); }
.composer textarea, .reply-box {
  width: 100%;
  min-height: 64px;
  padding: var(--s2);
  border: var(--rule-minor);
  background: var(--field);
  font: 400 var(--t14)/1.4 var(--f-ui);
  color: var(--navy);
  resize: vertical;
}
.composer textarea:focus, .reply-box:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.comment-list { display: flex; flex-direction: column; }
.thread { padding: var(--s3); border-bottom: var(--rule-minor); display: grid; gap: 6px; }
.thread.is-current { box-shadow: inset 3px 0 0 var(--redline); }
.thread-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--navy);
}
.thread p { font-size: var(--t14); color: var(--ink2); }
.thread .reply { margin-left: var(--s3); padding-left: var(--s2); border-left: var(--rule-minor); }
.thread-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.thread-actions .btn { min-height: 32px; padding: 0 var(--s3); font-size: var(--t14); }
.selection-bar { font-size: var(--t14); color: var(--ink2); }

@media (max-width: 900px) {
  .pdf-page { height: auto; overflow: auto; }
  .pdf-page .desk { overflow: visible; }
  .pd-main { height: auto; }
  .work { grid-template-columns: 1fr; grid-template-rows: 112px minmax(420px, 70vh) auto; }
  .thumbs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: var(--rule-minor); }
  .thumb { width: 88px; flex: none; }
  .comments { border-left: 0; border-top: var(--rule); max-height: none; }
  .bar-end { margin-left: 0; }
  .toolbar { grid-template-columns: 1fr; }
}