/* Passport photo maker (/tools/passport-photo-maker/). Linked only on that page; js/webtools/passport-photo.js builds
   the markup inside [data-webtool="passport"]. Site tokens only, so light and dark mode follow the page. The guide lines
   and legend swatches sit on (or stand for) the photo, so they use fixed high-contrast colours with a dark outline.
   This file loads before tools-premium.css, so selectors carry .tool[data-webtool="passport"] to win over it. */
.tool[data-webtool="passport"] [hidden] { display: none !important; }
.tool[data-webtool="passport"] { min-width: 0; }

/* steps and text */
.tool[data-webtool="passport"] .pp-step { display: grid; gap: 0.75rem; min-width: 0; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.tool[data-webtool="passport"] .pp-privacy + .pp-step { padding-top: 0; border-top: 0; }
.tool[data-webtool="passport"] .pp-work { display: grid; gap: 0.9rem; min-width: 0; }
.tool[data-webtool="passport"] .pp-h { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.tool[data-webtool="passport"] .pp-h4 { margin: 0.35rem 0 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.tool[data-webtool="passport"] .pp-privacy { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-2); }
.tool[data-webtool="passport"] .pp-rule { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--text); }
.tool[data-webtool="passport"] .pp-note,
.tool[data-webtool="passport"] .pp-hint { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-2); }
.tool[data-webtool="passport"] .pp-rule:empty,
.tool[data-webtool="passport"] .pp-note:empty,
.tool[data-webtool="passport"] .pp-readout:empty,
.tool[data-webtool="passport"] .pp-sheet-info:empty { display: none; }

/* fields */
.tool[data-webtool="passport"] .pp-field { min-width: 0; }
.tool[data-webtool="passport"] .pp-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.tool[data-webtool="passport"] .pp-field output { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.tool[data-webtool="passport"] input[type="range"] { display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; accent-color: var(--accent); cursor: pointer; }
.tool[data-webtool="passport"] .wt-check { margin: 0; color: var(--text); }
.tool[data-webtool="passport"] .wt-check input { margin: 0; padding: 0; accent-color: var(--accent); }

/* step 2: open or take a photo. The real file inputs stay in the page, only visually hidden. */
.tool[data-webtool="passport"] .pp-drop { display: grid; justify-items: start; gap: 0.6rem; padding: 1rem; border: 2px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.tool[data-webtool="passport"] .pp-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; font-size: 0.98rem; font-weight: 500; line-height: 1; cursor: pointer; }
.tool[data-webtool="passport"] .pp-pick.pp-pick-main { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tool[data-webtool="passport"] .pp-file { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.tool[data-webtool="passport"] .pp-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
@supports selector(:has(*)) {
  .tool[data-webtool="passport"] .pp-pick:focus-within { outline: none; }
  .tool[data-webtool="passport"] .pp-pick:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* step 3: the photo with its guides, beside the preview */
.tool[data-webtool="passport"] .pp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 1rem 1.25rem; }
.tool[data-webtool="passport"] .pp-editor { display: flex; justify-content: center; min-width: 0; }
.tool[data-webtool="passport"] .pp-stage { position: relative; flex: none; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg); box-shadow: 0 0 0 1px var(--border); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tool[data-webtool="passport"] .pp-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.tool[data-webtool="passport"] .pp-guide { position: absolute; top: 0; left: 0; z-index: 2; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tool[data-webtool="passport"] .pp-guide.is-h { width: 100%; height: 44px; cursor: ns-resize; }
.tool[data-webtool="passport"] .pp-guide.is-v { z-index: 1; width: 44px; height: 100%; cursor: ew-resize; }
.tool[data-webtool="passport"] .pp-guide.is-drag { z-index: 3; }
.tool[data-webtool="passport"] .pp-guide-crown { --pp-c: #ffd60a; }
.tool[data-webtool="passport"] .pp-guide-chin { --pp-c: #64d2ff; }
.tool[data-webtool="passport"] .pp-guide-mid { --pp-c: #ff6bd6; }
.tool[data-webtool="passport"] .pp-guide-line { position: absolute; background: var(--pp-c); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65); pointer-events: none; }
.tool[data-webtool="passport"] .is-h .pp-guide-line { top: 21px; right: 0; left: 0; height: 2px; }
.tool[data-webtool="passport"] .is-v .pp-guide-line { top: 0; bottom: 0; left: 21px; width: 2px; }
.tool[data-webtool="passport"] .pp-guide-tag { position: absolute; left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--pp-c); color: #000; font-size: 0.72rem; font-weight: 600; line-height: 1.35; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65); }
.tool[data-webtool="passport"] .pp-guide-crown .pp-guide-tag { bottom: 25px; }
.tool[data-webtool="passport"] .pp-guide-chin .pp-guide-tag { top: 25px; }
.tool[data-webtool="passport"] .pp-guide-mid .pp-guide-tag { bottom: 8px; left: 26px; }
.tool[data-webtool="passport"] .is-h:focus-visible .pp-guide-line,
.tool[data-webtool="passport"] .is-h.is-drag .pp-guide-line { top: 20px; height: 4px; }
.tool[data-webtool="passport"] .is-v:focus-visible .pp-guide-line,
.tool[data-webtool="passport"] .is-v.is-drag .pp-guide-line { left: 20px; width: 4px; }
.tool[data-webtool="passport"] .pp-guide:focus-visible .pp-guide-line { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 10px 2px var(--pp-c); }
.tool[data-webtool="passport"] .pp-guide:focus-visible .pp-guide-tag { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }

.tool[data-webtool="passport"] .pp-side { display: grid; align-content: start; gap: 0.65rem; min-width: 0; }
.tool[data-webtool="passport"] .pp-prev-box { display: flex; justify-content: center; min-width: 0; }
.tool[data-webtool="passport"] .pp-prev,
.tool[data-webtool="passport"] .pp-sheet { display: block; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tool[data-webtool="passport"] .pp-prev,
  .tool[data-webtool="passport"] .pp-sheet { box-shadow: 0 0 0 1px var(--border), 0 6px 18px color-mix(in srgb, var(--text) 14%, transparent); }
}
.tool[data-webtool="passport"] .pp-readout { margin: 0; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--text); }
.tool[data-webtool="passport"] .pp-readout.is-ok { color: var(--ok); }
.tool[data-webtool="passport"] .pp-readout.is-ok::before { content: "\2713\00a0"; }
.tool[data-webtool="passport"] .pp-readout.is-warn { color: var(--bad); }
.tool[data-webtool="passport"] .pp-warn { margin: 0; padding: 0.6rem 0.75rem; border-left: 3px solid var(--star); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg); font-size: 0.86rem; line-height: 1.45; color: var(--text); }
.tool[data-webtool="passport"] .pp-legend { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.82rem; line-height: 1.35; color: var(--text-2); }
.tool[data-webtool="passport"] .pp-legend li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.tool[data-webtool="passport"] .pp-sw { flex: none; box-sizing: border-box; width: 22px; height: 12px; border-block: 2px solid var(--pp-c); background: var(--pp-f); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.tool[data-webtool="passport"] .pp-l-crown { --pp-c: #ffd60a; --pp-f: rgba(255, 214, 10, 0.22); }
.tool[data-webtool="passport"] .pp-l-chin { --pp-c: #64d2ff; --pp-f: rgba(100, 210, 255, 0.22); }
.tool[data-webtool="passport"] .pp-l-eye { --pp-c: #30d158; --pp-f: rgba(48, 209, 88, 0.2); }
.tool[data-webtool="passport"] .pp-l-oval .pp-sw { width: 14px; height: 18px; margin-inline: 4px; border: 2px dashed #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
.tool[data-webtool="passport"] .pp-guide-line,
.tool[data-webtool="passport"] .pp-guide-tag,
.tool[data-webtool="passport"] .pp-sw { forced-color-adjust: none; }

/* fine-tune: move the face */
.tool[data-webtool="passport"] .pp-move { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.tool[data-webtool="passport"] .pp-move-label { font-size: 0.82rem; color: var(--text-2); }
.tool[data-webtool="passport"] .pp-nudge { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); grid-template-areas: ". up ." "left centre right" ". down ."; gap: 4px; }
.tool[data-webtool="passport"] .pp-nudge .btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1; }
.tool[data-webtool="passport"] .pp-nudge .pp-up { grid-area: up; }
.tool[data-webtool="passport"] .pp-nudge .pp-left { grid-area: left; }
.tool[data-webtool="passport"] .pp-nudge .pp-centre { grid-area: centre; }
.tool[data-webtool="passport"] .pp-nudge .pp-right { grid-area: right; }
.tool[data-webtool="passport"] .pp-nudge .pp-down { grid-area: down; }

/* step 4: stats tiles (same look as .wt-stats / .cc-stat on pages that load that sheet) and the print sheet */
.tool[data-webtool="passport"] .wt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
.tool[data-webtool="passport"] .cc-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.tool[data-webtool="passport"] .cc-stat span { font-size: 0.8rem; color: var(--text-2); }
.tool[data-webtool="passport"] .cc-stat strong { font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--text); }
.tool[data-webtool="passport"] .cc-stat.is-over { border-color: var(--bad); }
.tool[data-webtool="passport"] .cc-stat.is-over strong { color: var(--bad); }
.tool[data-webtool="passport"] .pp-sheet-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.25rem; }
.tool[data-webtool="passport"] .pp-sheet-box { flex: 0 1 240px; min-width: 0; }
.tool[data-webtool="passport"] .pp-sheet-side { display: grid; flex: 1 1 220px; align-content: start; gap: 0.6rem; min-width: 0; }
.tool[data-webtool="passport"] .pp-sheet-info { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-2); }

/* before you print */
.tool[data-webtool="passport"] .pp-checklist ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0.45rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.tool[data-webtool="passport"] .pp-checklist li { position: relative; margin: 0; padding-left: 1.75rem; font-size: 0.92rem; line-height: 1.45; color: var(--text); }
.tool[data-webtool="passport"] .pp-checklist li::before { content: ""; position: absolute; top: 0.15em; left: 0; box-sizing: border-box; width: 1.1em; height: 1.1em; border: 1.5px solid var(--text-3); border-radius: 4px; }
.tool[data-webtool="passport"] .pp-checklist li:last-child { font-weight: 600; }

@media (max-width: 640px) {
  .tool[data-webtool="passport"] .pp-cols { grid-template-columns: minmax(0, 1fr); }
  .tool[data-webtool="passport"] .pp-drop { padding: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tool[data-webtool="passport"] *,
  .tool[data-webtool="passport"] *::before,
  .tool[data-webtool="passport"] *::after { transition: none !important; animation: none !important; }
  .tool[data-webtool="passport"] .btn:active { transform: none; }
}