/* Shared guide salon receipt. Existing pilot owns authoritative style selection. */
.salon-jump {display:block;text-align:center;color:var(--ht-color-muted);font-size:14px;line-height:1.6;margin:-10px auto 0;padding:10px;min-height:44px;text-underline-offset:5px}
.salon-jump:hover {color:var(--ht-color-ink)}
/* Follow the same parent frame as the try-on section at every breakpoint. */
.salon-feature {width:100%;max-width:none;margin:0 0 52px;scroll-margin-top:28px}
.salon-intro {display:flex;align-items:center;gap:32px;margin-bottom:24px}
.salon-intro > div {min-width:0}
.salon-intro img {width:190px;height:190px;object-fit:contain;flex:none}
.salon-intro h2 {font-size:clamp(28px,3vw,38px);line-height:1.2;margin-bottom:12px}
.salon-intro p {max-width:460px;color:var(--ht-color-muted);font-size:16px}
/* The section matches the guide frame; the paper stays receipt-sized on PCs too. */
/* Keep the outline primary; a low-offset, faint shadow adds only subtle depth. */
.salon-note-card {--receipt-paper:#fff;--receipt-ink:var(--ht-color-ink);position:relative;width:100%;max-width:420px;margin:36px auto 0;background:var(--receipt-paper);color:var(--receipt-ink);border:1px solid #d6dadb;border-bottom:0;border-radius:0;box-shadow:0 2px 16px rgba(27,35,42,.06);font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace}
/* Repeated teeth stay the same size on mobile and desktop. No clipping of text,
   focus rings or status; the paper edge is purely decorative. */
.salon-note-card::after {content:"";position:absolute;left:-1px;right:-1px;bottom:-9px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0H16V1L8 9L0 1Z' fill='white'/%3E%3Cpath d='M0 1L8 9L16 1' fill='none' stroke='%23d6dadb' stroke-width='1'/%3E%3C/svg%3E") repeat-x;pointer-events:none}
.salon-card-header {display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px;border-bottom:1px dashed #acafa5;margin:0 32px;padding-left:0;padding-right:0}
/* Large enough to show the cut at a consultation, not just identify a thumbnail.
   Keep the original 3:4 portrait, color and uncropped hairstyle. */
.salon-thermal-photo {position:relative;display:block;width:min(100%,280px);height:auto;aspect-ratio:3/4;flex:none;isolation:isolate;background:var(--receipt-paper)}
.salon-style-photo {display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
/* Receipt-only warm, gently faded color. Never grade gallery/hero/result images
   or the saved PNG; preserve hair/skin hue rather than simulating monochrome ink. */
.salon-note-card .salon-style-photo {filter:sepia(.16) saturate(.82) contrast(.93) brightness(1.03)}
/* Light static grain is a presentation overlay, not a destructive photo edit.
   Keep the saved consultation PNG clean; texture never covers the note text. */
.salon-thermal-photo::after {content:"";position:absolute;inset:0;pointer-events:none;background:url('/design-assets/receipt-grain-v1.svg') repeat;background-size:160px 160px;mix-blend-mode:soft-light;opacity:.48}
.salon-card-summary {min-width:0;text-align:center;max-width:100%;overflow-wrap:anywhere}
.salon-card-label {margin:0 0 10px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#65695f}
.salon-card-summary h3 {margin:0;font-family:inherit;font-size:26px;line-height:1.3;font-weight:600;letter-spacing:-.04em}
.salon-card-body {padding:28px 32px}
.salon-note-card blockquote {margin:0;max-width:78ch;font-size:16px;line-height:1.85}
/* Usage guidance belongs with the external action, not the stylist-facing note. */
.salon-receipt-tip {margin:0;font-size:13px;line-height:1.7;color:#65695f;text-align:center}
.salon-note-actions {display:flex;align-items:center;flex-direction:column;gap:12px;width:100%;max-width:420px;margin:32px auto 0}
.salon-note-actions .button {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font-family:inherit;font-size:14px;padding:12px 24px;flex:none}
.salon-note-actions .button svg {flex:none}
.salon-note-actions #save-salon-status {margin:0;text-align:center;max-width:42ch}
.salon-note-actions #save-salon-status:empty {display:none}
.salon-note-actions .button:disabled {opacity:.6;cursor:wait}
@media(max-width:600px) {.salon-intro {gap:16px;align-items:center}.salon-intro img {width:100px;height:120px}.salon-intro h2 {font-size:27px}.salon-intro p {font-size:14px;line-height:1.7}.salon-card-header {margin:0 20px;padding:24px 0;gap:18px;align-items:center;flex-direction:column}.salon-thermal-photo {width:min(100%,280px);height:auto;aspect-ratio:3/4}.salon-card-summary {text-align:center}.salon-card-summary h3 {font-size:21px}.salon-card-label {font-size:10px;letter-spacing:.06em}.salon-card-body {padding:22px 20px}.salon-note-card blockquote {font-size:14px;line-height:1.8}.salon-note-actions {align-items:stretch;flex-direction:column;gap:14px}.salon-note-actions .button {width:100%}.salon-jump {font-size:13px}}
@media(forced-colors:active) {.salon-note-card {border:1px solid CanvasText}}
@media(forced-colors:active) {.salon-thermal-photo::after {display:none}}
/* Narrow phones need the full line for localized headings, not a text sliver
   beside the illustration. Do not solve German/Japanese wrapping by clipping. */
@media(max-width:400px) {.salon-intro {flex-direction:column;align-items:flex-start;gap:12px}.salon-intro img {width:100px;height:80px}.salon-intro h2 {overflow-wrap:anywhere}}