/* Bàn học: the Máy in screen (js/print-view.js) and what the print flow draws (js/print-flow.js, which uses the
   host-*, btn and link-btn classes so the scan's done screen draws it too). Same tokens as app.css. */
.app-icon--print { background: var(--paper); }
.print-box { margin: 0; font-size: 0.92rem; }
.print-box[hidden] { display: none; }
.print-line { margin: 0; color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.print-line[hidden] { display: none; }
.print-pick { display: grid; gap: 10px; }
.print-pick[hidden] { display: none; }
.print-pick .print-line { text-align: center; }
.print-full { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); color: #d8d1c4; font-size: 0.94rem; }
.print-full[hidden] { display: none; }
.print-flow:empty { display: none; }
.print-flow .host-card { background: var(--ink-2); }
.print-flow .host-card p { overflow-wrap: anywhere; }
.print-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* the picker: one row per mode, picture on the left */
.print-modes { display: grid; gap: 8px; }
.print-modes[hidden] { display: none; }
.print-mode {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.print-mode.is-on { border-color: var(--lamp); box-shadow: inset 0 0 0 1px var(--lamp); }
.print-mode.is-locked { cursor: default; }
.print-mode.is-locked .print-mode-art, .print-mode.is-out .print-mode-art { opacity: 0.45; }
.print-mode.is-locked .print-mode-name, .print-mode.is-out .print-mode-name { color: var(--muted); }
.print-mode-art { flex: none; display: grid; place-items: center; width: 56px; height: 56px; }
.print-mode-text { display: grid; gap: 2px; min-width: 0; }
.print-mode-name { font-weight: 600; overflow-wrap: anywhere; }
.print-mode-size { font-weight: 400; font-size: 0.86rem; color: var(--muted); white-space: nowrap; }
.print-mode-left { font-size: 0.88rem; color: #d8d1c4; overflow-wrap: anywhere; }
.print-mode.is-locked .print-mode-left { color: var(--lamp); }

/* the pictures (js/print-art.js) */
.print-art { display: block; width: 56px; height: 56px; }
.pa-sheet { fill: var(--paper); stroke: rgba(15, 14, 12, 0.25); stroke-width: 0.6; }
.pa-sheet--back { fill: #cfc8ba; }
.pa-ink { fill: #6b655a; }
.pa-frame { fill: #dfe9ee; stroke: none; }
.pa-sun { fill: #f2c14e; }
.pa-hill { fill: #4f8f6a; }
.pa-hill--2 { fill: #2f6b57; }
.pa-phone { fill: #2b2823; stroke: #8a8375; stroke-width: 0.8; }
.pa-screen { fill: #1a1815; }
.pa-notch { fill: #0f0e0c; }

/* the photo that came from the camera and waits for "In ảnh này" */
.print-photo { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.print-photo[hidden] { display: none; }
.print-photo-img { flex: none; width: 72px; height: 96px; object-fit: cover; border-radius: 8px; background: var(--ink-3); }
.print-photo-text { display: grid; gap: 4px; min-width: 0; }
.print-photo-name { margin: 0; font-weight: 600; }
.print-bill { display: grid; gap: 10px; }