/* Passport photo — layout specific to this tool */

.pp-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:0;
}
@media (max-width:860px){ .pp-layout{grid-template-columns:1fr;} }

/* stage */
.pp-stage{
  background:#111413;
  display:grid;place-items:center;
  padding:20px;min-height:380px;
  position:relative;overflow:hidden;
}
.pp-canvas-wrap{position:relative;line-height:0;}
#ppCanvas{
  display:block;border-radius:4px;cursor:grab;touch-action:none;
  max-width:100%;height:auto;
}
#ppCanvas.dragging{cursor:grabbing;}

.pp-hint{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:.78rem;color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.45);padding:4px 11px;border-radius:100px;
  white-space:nowrap;pointer-events:none;
}

/* side panel */
.pp-side{
  border-left:1px solid var(--rule);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:16px;
}
@media (max-width:860px){ .pp-side{border-left:none;border-top:1px solid var(--rule);} }

.pp-block{display:flex;flex-direction:column;gap:7px;}
.pp-block > label,.pp-label{
  font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);
}

.spec-card{
  background:var(--surface-2);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:var(--f-mono);font-size:.78rem;
  line-height:1.65;color:var(--ink-2);
}
.spec-card b{color:var(--ink);font-weight:600;}
.spec-card .row{display:flex;justify-content:space-between;gap:10px;}

.zoom-row{display:flex;align-items:center;gap:10px;}
.zoom-row input[type="range"]{flex:1;}
.zoom-btn{
  width:28px;height:28px;flex-shrink:0;border-radius:var(--radius-sm);
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink-2);
  cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;padding:0;
}
.zoom-btn:hover{border-color:var(--accent);color:var(--accent);}

.bg-swatches{display:flex;gap:7px;}
.bg-swatch{
  width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;
  border:2px solid var(--rule-2);padding:0;
}
.bg-swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}

.pp-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;}
.pp-actions .btn{justify-content:center;}

/* country picker page-links */
.country-links{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;
}
.country-links a{
  font-size:.85rem;text-decoration:none;color:var(--ink-2);
  background:var(--surface-2);border-radius:100px;padding:5px 12px;
}
.country-links a:hover{background:var(--accent-soft);color:var(--accent);}

.sheet-note{
  font-size:.8rem;color:var(--ink-3);line-height:1.5;margin:0;
}

/* country page spec table */
.spec-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:420px;}
.spec-table td{
  padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);
  color:var(--ink-2);vertical-align:top;
}
.spec-table td:first-child{
  color:var(--ink);font-weight:500;white-space:nowrap;width:1%;
}
.spec-table strong{color:var(--ink);}