/* Tool-specific layout only. Faces, buttons, fields, the title and the toolbar
   come from ../assets/base.css over the vendored system. This file styles the
   page grid. */

/* Several actions share one label, so they sit on their own row rather than
   each claiming a labelled group. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The page count and the link into the viewer travel together at the right
   end. */
.result-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The grid is sized by the thumbnails: a column is one page wide, and the
   column count follows the viewport. */
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--pp-gutter, 16px);
  margin: 18px 0 24px;
}

.page-grid:empty {
  display: none;
}

.page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 6px;
  background: var(--pp-paper);
  border: var(--pp-rule-line) solid var(--pp-line);
  cursor: var(--pp-cursor-point, pointer);
}

/* Selection takes both signals the laws allow, a tint and a firmer edge, and
   neither a lift nor a shadow. The border width is left alone: widening it
   changes the card height, which shifts every row below and rescales the
   thumbnail. */
.page-card.is-selected {
  background: var(--pp-tint);
  border-color: var(--pp-edge);
}

/* The page being dragged and the gap it would drop into read differently: one
   is lifted, the other is a hole in the row. */
.page-card.is-dragging {
  opacity: 0.35;
}

.page-card.is-drop-before {
  box-shadow: -3px 0 0 0 var(--pp-ink);
}

.page-card.is-drop-after {
  box-shadow: 3px 0 0 0 var(--pp-ink);
}

/* A fixed box, so the grid does not reflow as thumbnails arrive and portrait
   and landscape pages share a baseline. */
.page-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 148px;
  background: var(--pp-paper);
  border: var(--pp-rule-line) solid var(--pp-hair);
  overflow: hidden;
}

.page-thumb canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* A page is a sheet of paper and keeps its white in dark mode. */
  background: #fff;
}

.page-thumb.is-pending {
  color: var(--pp-faint);
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
}

.page-cap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
  color: var(--pp-muted);
}

.page-cap .n {
  color: var(--pp-ink);
}

.page-cap .src {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pp-faint);
}

/* Rotation is visible in the thumbnail only if the original orientation is
   known, so it is also stated in words. */
.page-cap .turn {
  margin-left: auto;
  color: var(--pp-ink);
}

.save-bar {
  margin-top: 4px;
}

/* The viewer. The shell is the system's: .modal, .scrim, .modal__panel,
   .modal__bar and .modal__body carry the scrim, the edge and the cast. What is
   here is only what this tool adds: a caption naming the page and a sheet to
   draw it on. */

/* The panel fills the window rather than shrinking to the page, so the
   available size can be measured: a panel sized by the sheet cannot report how
   much room the sheet has. */
#viewer .modal__panel {
  width: 100%;
  height: 100%;
}

.viewer-bar {
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
  color: var(--pp-muted);
}

.viewer-bar .btn-row {
  margin-left: auto;
}

.scrim {
  cursor: var(--pp-cursor-point, pointer);
}

.viewer-count {
  color: var(--pp-ink);
  white-space: nowrap;
}

.viewer-src {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pp-faint);
}

/* Only there when something is in hand, so it is a count and not a label. */
.viewer-marked {
  white-space: nowrap;
  color: var(--pp-plate-1);
}

/* The tools sit under the page, in reach and out of the way of reading it. */
.viewer-tools {
  flex-wrap: wrap;
}

/* Marking is the same claim the grid's selection makes, so it takes the same
   two signals: a tint and a firmer edge. */
.viewer-mark.is-on {
  background: var(--pp-tint);
  border-color: var(--pp-edge);
}

/* .modal__body already scrolls. Taking the leftover height and centring the
   sheet in it is this tool's. */
.viewer-stage {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

/* Card anatomy, at reading size: a frame that carries the state, and paper
   inside it that stays paper. Marking tints the frame and leaves the page
   itself alone, exactly as it does in the grid — and the padding never moves,
   so a mark cannot resize the page under you. */
.viewer-sheet {
  display: flex;
  flex: none;
  /* Wider than the card's 8px: at reading size a thin band of tint is a signal
     you have to hunt for, and this is the one that says the page is in hand. */
  padding: 14px;
  background: var(--pp-paper);
  border: var(--pp-rule-line) solid var(--pp-line);
}

.viewer-sheet.is-selected {
  background: var(--pp-tint);
  border-color: var(--pp-edge);
}

/* Sized by the script, because how big a page can be drawn is a question about
   the stage rather than about the stylesheet. */
.viewer-paper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: #fff;
  border: var(--pp-rule-line) solid var(--pp-hair);
  color: var(--pp-faint);
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
}

/* Centred on the paper so that a quarter turn spins about the middle rather
   than swinging the page out of its own frame. */
.viewer-paper canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
}

/* Files loaded from more than one document get a colour per source, so a
   merged pile can still be read at a glance. */
.page-card[data-src='0'] .page-cap .src { color: var(--pp-plate-1); }
.page-card[data-src='1'] .page-cap .src { color: var(--pp-plate-2); }
.page-card[data-src='2'] .page-cap .src { color: var(--pp-plate-3); }

/* How many marks a card carries, in the caption beside the page number. It
   takes the ink colour rather than a plate: a count is not a category. */
.page-cap .marks {
  margin-left: auto;
  color: var(--pp-ink);
}

.page-cap .turn + .marks {
  margin-left: 0;
}

/* The pens ---------------------------------------------------------------- */

.viewer-pens {
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
  color: var(--pp-muted);
}

.pen-label {
  color: var(--pp-ink);
  white-space: nowrap;
}

/* Says what the pen in hand will do, so the instruction changes with the
   decision rather than sitting there as a permanent notice. */
.pen-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pp-faint);
}

.viewer-pens .btn-ghost:last-child {
  margin-left: auto;
}

.pen.is-on {
  background: var(--pp-tint);
  border-color: var(--pp-edge);
}

.swatches {
  display: flex;
  gap: 4px;
}

/* A swatch is the colour itself, so the button is a frame around a field and
   carries no label. The chosen one takes the ink edge, the same signal a
   pressed pen takes. */
.swatch {
  width: 26px;
  height: 22px;
  padding: 2px;
  background: var(--pp-surface);
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  cursor: var(--pp-cursor-point, pointer);
}

.swatch:hover {
  border-color: var(--pp-edge);
}

.swatch:active {
  transform: translate(1px, 1px);
}

.swatch.is-on {
  border-color: var(--pp-edge);
  box-shadow: inset 0 0 0 1px var(--pp-edge);
}

.swatch i {
  display: block;
  width: 100%;
  height: 100%;
}

/* Marks on the page being read. The layer sits over the canvas and is given
   the canvas's own size and turn by the script, so a mark stays on the words
   it was drawn over however the page is turned. */
/* The blend belongs on the layer and not on the highlights inside it, which is
   not a style choice. The layer is transformed — centred, and turned with the
   page — and a transform makes a stacking context, so a child asking to
   multiply would have multiplied against this layer's own empty backdrop and
   come out as flat opaque paint over the canvas. Blending the whole layer
   instead puts the canvas back in front of it. Blackouts survive the change
   untouched: black multiplied by anything is black, which is exactly the claim
   a blackout makes. */
.mark-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  mix-blend-mode: multiply;
}

.mark-layer.is-drawing {
  cursor: var(--pp-cursor-cross, crosshair);
}

.mark {
  position: absolute;
}

.mark--censor {
  background: #000;
}

/* The pen is a filter rather than a coat of paint, here and in the file: the
   words underneath stay black. The multiply that does it is on .mark-layer,
   for the reason given there. */

.mark:hover {
  outline: var(--pp-rule-structure) solid var(--pp-edge);
  outline-offset: 1px;
}

/* The rectangle under the pointer, before the button comes up. */
.mark-draft {
  position: absolute;
  border: var(--pp-rule-line) dashed var(--pp-edge);
  background: var(--pp-tint);
}

/* The metadata sheet ------------------------------------------------------- */

.meta-tools {
  margin-bottom: 0.85rem;
}

.sheet-meta {
  --w-sheet-min: 620px;
}

.sheet-meta td,
.sheet-meta th {
  vertical-align: top;
}

.sheet-meta .col-keep {
  width: 52px;
  text-align: center;
}

.sheet-meta td.col-keep {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.sheet-meta .col-name {
  width: 32%;
}

/* Sized to the longest word it holds plus the cell's padding, rather than
   guessed. */
.sheet-meta .col-note {
  width: 118px;
}

.sheet-meta .th-keep {
  font-size: var(--pp-size-label);
}

/* A group is a named rule rather than a box: the sheet already has an edge,
   and a second frame inside it would be two boundaries around one thing. */
.sheet-meta .grp-row td {
  padding: 0.35rem 0.8rem;
  background: var(--pp-sunk);
  border-top: var(--pp-rule-line) solid var(--pp-line);
  border-bottom: var(--pp-rule-line) solid var(--pp-line);
  color: var(--pp-muted);
}

.sheet-meta tbody:first-of-type .grp-row td {
  border-top: 0;
}

.grp-title {
  color: var(--pp-ink);
}

.grp-blurb {
  margin-left: 0.6rem;
  color: var(--pp-faint);
}

.fld-name {
  font-weight: 400;
  text-align: left;
}

.fld-key {
  display: block;
  color: var(--pp-faint);
}

/* A field on its way out is struck through where it stands, so the table
   reads as the file will be rather than as it is. */
.fld.is-cut .fld-name,
.fld.is-cut .val {
  color: var(--pp-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.val {
  display: block;
  max-height: 3.2em;
  overflow: hidden;
  word-break: break-word;
}

.val-blank {
  color: var(--pp-faint);
}

/* Nothing to decide, so no switch: what the dash stands for is in the legend
   under the sheet. */
.fld.is-fixed .col-keep::after {
  content: '\2014';
  color: var(--pp-faint);
}

/* What a field gives away, in one word. Named .risk because core's .mark is
   the system's own, and this page links core. */
.risk {
  display: inline-flex;
  align-items: center;
  padding: 0.06rem 0.42rem;
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  color: var(--pp-muted);
  white-space: nowrap;
}

/* The reader's own pen over the lines that matter: a marker field rather than
   a plate. A marked pill drops its edge, because the field is the boundary. */
.risk.is-high,
.legend .tag.is-marked {
  border-color: transparent;
  color: var(--pp-ink);
}

.legend {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--pp-faint);
}

.meta-file.is-on {
  background: var(--pp-tint);
  border-color: var(--pp-edge);
}