/* =============================================================================
   Numery stron w PDF - the page preview with its switcher, the 3 x 3 position
   grid and the "which page first" fields. Size, colour, margin, the first
   number and odd/even fold away under "Więcej ustawień". The rest is shared.
   ============================================================================= */

/* ---- preview: the page as paper on the dark stage ---- */
.pn-view{gap:14px}
.pn-sheet{display:flex;justify-content:center;width:100%}
.pn-canvas{
  display:block;max-width:100%;background:#fff;border-radius:2px;
  box-shadow:0 22px 48px -22px rgba(0,0,0,.9),0 0 0 1px rgba(250,250,247,.07);
  /* Canvas text picks these up from the page in some browsers; the PDF has none. */
  letter-spacing:0;font-feature-settings:normal;font-kerning:none;
}
.pn-nav{display:flex;align-items:center;justify-content:center;gap:14px}
.pn-navBtn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule-d);color:var(--fg);font-size:20px;line-height:1;text-align:center;
  transition:border-color .2s var(--ease),color .2s var(--ease),transform 160ms var(--ease-out);
}
.pn-navBtn:active{transform:scale(.94)}
.pn-navBtn:disabled{opacity:.3;cursor:default;transform:none}
.pn-navNum{min-width:8ch;text-align:center;font-size:12px;letter-spacing:.08em;color:var(--fg-2)}
#pnStatus a{color:var(--olive);text-decoration:underline;text-underline-offset:3px}

/* ---- 3 x 3 grid of positions, shaped like a page with a dot for the number ---- */
.pn-place{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.pn-grid{
  display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,40px);gap:3px;padding:5px;
  border:1px solid var(--rule-d);border-radius:var(--r-xs);background:rgba(250,250,247,.03);
}
.pn-pos{position:relative;display:grid;place-items:center;border-radius:4px;cursor:pointer;transition:background .2s var(--ease)}
.pn-pos input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.pn-pos::before{
  content:"";width:8px;height:8px;border-radius:50%;background:rgba(250,250,247,.4);
  transition:background .2s var(--ease),transform .2s var(--ease-out);
}
.pn-pos:has(input:checked){background:rgba(204,211,118,.16)}
.pn-pos:has(input:checked)::before{background:var(--olive);transform:scale(1.5)}
.pn-pos:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:1px}
.pn-posName{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}

/* Formats are shown as they will print, not shouted in capitals. */
.pn-fmt .pill > span{text-transform:none;letter-spacing:.04em}

/* A page number is a short number: the field is as wide as one, not the panel. */
.pn-from input{width:128px;max-width:100%}
.pn-hint{margin-top:2px;font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--fg-3)}
.pn-hint.is-error{color:#ff8a7a}
#pnFirst[aria-invalid="true"]{border-color:#ff8a7a}

/* Lit when the picker, not a swatch, holds the colour. The shared rule only
   knows the splitter's swatch name, so it is undone here first. */
.pn .swatches:has(input[type="radio"]:checked) .swatch-custom{border-color:var(--rule-d)}
.pn .swatches:not(:has(input[name="pnColor"]:checked)) .swatch-custom{border-color:var(--olive)}
/* White is a real choice here, so its swatch needs an edge on the dark panel. */
.pn .swatch{border-color:rgba(250,250,247,.34)}

@media (hover:hover){
  .pn-navBtn:not(:disabled):hover{border-color:var(--olive);color:var(--olive)}
  .pn-pos:hover{background:rgba(250,250,247,.07)}
  .pn-pos:hover::before{background:var(--bone)}
}

/* iOS zooms into any field under 16px. */
@media (max-width:640px){
  .pn .field input{font-size:16px}
}