/* Sorellina Clinic — AI skin scanner page.
   The scanner is a black-glass station hung on the wall, and the scanner
   dialog (built by js/skin-scanner-app.js, styled first by css/ai-scanner.css)
   is re-dressed here as a paper card in a charcoal frame with a black-glass
   viewer. Only appearance changes; every id, class and data-* hook the
   script reads is untouched. Load after css/ai-scanner.css. */

/* ------------------------------------------------------------------ hero */
.hero-reviews { margin-top: 22px; font-size: .92rem; }
.hero-reviews a { color: var(--on-dark-2); text-underline-offset: .22em; text-decoration-color: rgba(185, 178, 162, .45); }
@media (hover: hover) and (pointer: fine) { .hero-reviews a:hover { color: var(--on-dark); text-decoration-color: currentColor; } }
.scanner-hero .hero-photo img { object-position: 50% 60%; }

/* ------------------------------------------------------ how it works */
.scanner-how { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .scanner-how { grid-template-columns: 1fr; } }

.scanner-steps { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; counter-reset: step; max-width: 36rem; }
.scanner-steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px;
  padding: 20px 0; border-top: 1px solid rgba(27, 28, 30, .16);
}
.scanner-steps li:last-child { border-bottom: 1px solid rgba(27, 28, 30, .16); }
.scanner-steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  font: 400 2.2rem/1 var(--serif); color: var(--gold-shade); font-variant-numeric: lining-nums;
}
.scanner-steps h3 { font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.15; }
.scanner-steps p { margin-top: 6px; color: var(--ink-2); }

/* the station: black glass in a charcoal frame, hung on the wall */
.scanner-station {
  padding: 14px; background: var(--charcoal); border-radius: 2px; color: var(--on-dark);
  box-shadow: inset 0 0 0 1px var(--charcoal-line), 0 18px 40px rgba(27, 28, 30, .14), 0 2px 4px rgba(27, 28, 30, .12);
  --focus: var(--gold);
}
.station-glass {
  padding: clamp(18px, 3vw, 32px);
  background-color: #121314;
  background-image: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, 0) 46%);
  box-shadow: 0 0 0 1px var(--charcoal-line), inset 0 0 50px rgba(0, 0, 0, .55);
  border-radius: 2px;
}
.station-face {
  width: 100%; aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 24px; font: inherit; color: var(--on-dark); text-align: center; cursor: pointer;
  background: transparent; border: 1.5px dashed rgba(201, 161, 74, .55); border-radius: 2px;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.station-face:active { transform: scale(.985); }
.station-icon { width: 34px; height: 34px; color: var(--gold); }
.station-line { font-size: 1.05rem; }
.station-small { font-size: .86rem; color: var(--on-dark-2); }
.station-actions { display: flex; justify-content: center; padding: 18px 0 4px; }
.station-note { padding: 10px 14px 6px; text-align: center; font-size: .86rem; line-height: 1.5; color: var(--on-dark-2); }
@media (hover: hover) and (pointer: fine) {
  .station-face:hover { border-color: var(--gold); border-style: solid; background: rgba(201, 161, 74, .06); }
}

/* --------------------------------------------------------- in clinic */
.scanner-clinic { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.scanner-clinic .hero-actions { margin-top: clamp(28px, 3vw, 40px); }
.scanner-clinic-photo { margin: 0; justify-self: center; width: min(100%, 380px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--fascia-2); box-shadow: 0 0 0 6px var(--gold), 0 0 0 7px var(--gold-shade), 0 16px 34px rgba(0, 0, 0, .45); }
.scanner-clinic-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .scanner-clinic { grid-template-columns: 1fr; } .scanner-clinic-photo { width: min(80%, 300px); } }

/* ------------------------------------------------- the scanner dialog */
.scanner-dialog {
  --muted: var(--ink-2); --focus: var(--blue);
  width: min(560px, calc(100% - 24px));
  background: var(--paper); color: var(--ink);
  border: 10px solid var(--charcoal); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(27, 28, 30, .12), 0 24px 60px rgba(0, 0, 0, .45);
  font: 400 1rem/1.6 var(--sans);
}
.scanner-dialog::backdrop { background: rgba(20, 21, 22, .82); }
.scanner-body { padding: 34px 30px 28px; }
.scanner-head .micro-label { display: none; }
.scanner-head h2 { margin: 0 44px 12px 0; font: 400 clamp(2rem, 5vw, 2.5rem)/1.05 var(--serif); }
.scanner-head h2 em { font-style: normal; color: var(--gold-shade); }
.scanner-head p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 22px; }

/* close: a drawn cross instead of the text glyph */
.scanner-close, .scanner-camera-close { font-size: 0; }
.scanner-close {
  width: 44px; height: 44px; top: 14px; right: 14px; border-radius: 50%;
  border: 1px solid rgba(27, 28, 30, .3); color: var(--ink);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.scanner-close::before, .scanner-close::after,
.scanner-camera-close::before, .scanner-camera-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; background: currentColor; border-radius: 1px;
}
.scanner-close::before, .scanner-camera-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.scanner-close::after, .scanner-camera-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.scanner-close:hover { background: transparent; color: var(--ink); border-color: rgba(27, 28, 30, .3); }
.scanner-close:active, .scanner-camera-close:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .scanner-close:hover { background: var(--fascia); color: var(--gold-light); border-color: var(--fascia); } }

/* the viewer: black glass, gilt dashed frame while empty */
.scanner-dropzone {
  aspect-ratio: 4 / 3; gap: 10px; color: var(--on-dark);
  background-color: #121314;
  background-image: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, 0) 46%);
  border: 0; border-radius: 2px;
  box-shadow: inset 0 0 0 12px #121314, inset 0 0 0 13.5px rgba(201, 161, 74, .5), inset 0 0 50px rgba(0, 0, 0, .5);
  transition: box-shadow 160ms ease;
}
.scanner-dropzone svg { width: 34px; height: 34px; color: var(--gold); }
.scanner-dropzone p { font-size: 1rem; color: var(--on-dark); }
.scanner-dropzone small { font-size: .86rem; color: var(--on-dark-2); }
.scanner-dropzone:hover { background-color: #121314; border-color: transparent; }
.scanner-dropzone.is-drag { background-color: #17181a; box-shadow: inset 0 0 0 12px #17181a, inset 0 0 0 13.5px var(--gold), inset 0 0 50px rgba(0, 0, 0, .5); }
@media (hover: hover) and (pointer: fine) {
  .scanner-dropzone:hover { box-shadow: inset 0 0 0 12px #121314, inset 0 0 0 13.5px var(--gold), inset 0 0 50px rgba(0, 0, 0, .5); }
}
.scanner-preview { background: var(--fascia-2); box-shadow: 0 0 0 1px var(--charcoal-line); }
.scanner-status { font: 500 .78rem/1.2 var(--sans); letter-spacing: .08em; color: var(--on-dark); }

/* buttons: gilt primary, ink-outline secondary */
.scanner-btn {
  min-height: 48px; padding: 13px 18px; border-radius: 2px;
  font: 500 .98rem/1 var(--sans); letter-spacing: 0;
  background: var(--gold); color: var(--ink); border: 1px solid var(--gold);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.scanner-btn:hover { background: var(--gold); }
.scanner-btn.is-outline { background: transparent; color: var(--ink); border-color: rgba(27, 28, 30, .45); }
.scanner-btn.is-outline:hover { background: transparent; color: var(--ink); }
.scanner-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .scanner-btn:hover { background: var(--gold-light); border-color: var(--gold-light); }
  .scanner-btn.is-outline:hover { background: var(--fascia); color: var(--gold-light); border-color: var(--fascia); }
}
.scanner-error { font-size: .95rem; color: #8e2b2b; }
.scanner-privacy { font-size: .86rem; color: var(--ink-2); }

/* camera */
.scanner-camera-dialog { background: var(--fascia); border: 10px solid var(--charcoal); }
.scanner-camera-dialog::backdrop { background: rgba(20, 21, 22, .88); }
.scanner-camera-controls { background: var(--fascia); }
.scanner-camera-shutter { width: 60px; height: 60px; background: var(--paper); border: 0; box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 6px var(--fascia), inset 0 0 0 7px rgba(201, 161, 74, .5); }
.scanner-camera-shutter:hover { transform: none; }
.scanner-camera-shutter:active { transform: scale(.94); }
.scanner-camera-close { width: 44px; height: 44px; background: rgba(20, 21, 22, .7); color: var(--on-dark); --focus: var(--gold); }

/* results, printed on the card */
.scanner-noface, .scanner-results-head { background: var(--wall); border-color: rgba(27, 28, 30, .14); }
.scanner-score-ring { background: conic-gradient(var(--gold) calc(var(--scanner-score) * 1%), var(--stone) 0); }
.scanner-score-ring::before { background: var(--paper); }
.scanner-score-label, .scanner-age-label { color: var(--ink-2); letter-spacing: .06em; }
.scanner-age-badge { background: var(--paper); }
.scanner-skin-type { color: var(--gold-shade); letter-spacing: .06em; font-size: .8rem; }
.scanner-summary p { font-size: 1rem; }
.concern-chip { background: var(--paper); border-color: rgba(27, 28, 30, .14); box-shadow: inset 0 2px 0 var(--gold); }
.concern-chip.is-moderate { box-shadow: inset 0 2px 0 var(--gold-shade); }
.concern-chip.is-notable { box-shadow: inset 0 2px 0 #8e2b2b; }
.concern-chip b { font: 400 1.1rem/1.2 var(--serif); }
.concern-chip span { color: var(--ink-2); letter-spacing: .06em; font-size: .72rem; }
.concern-chip p, .treatment-card p { font-size: .92rem; color: var(--ink-2); }
.scanner-treatments-title { font-size: 1.6rem; }
.scanner-treatments { background: rgba(27, 28, 30, .14); }
.treatment-card { background: var(--paper); }
.treatment-card-head .treatment-price { color: var(--gold-shade); font-size: .9rem; font-variant-numeric: tabular-nums; }
.treatment-card-actions a { font-size: .9rem; }
.treatment-card-actions .scanner-book { border-radius: 2px; background: var(--fascia); color: var(--gold-light); text-decoration: none; }
.scanner-dermalogica-title em { color: var(--gold-shade); font-style: normal; }
.dermalogica-card { background: var(--fascia); color: var(--on-dark); }
.dermalogica-card h4 { color: var(--on-dark); }
.dermalogica-card p { color: var(--on-dark-2); font-size: .92rem; }
.dermalogica-tag { color: var(--ink); }
.dermalogica-card .dermalogica-shop { border-radius: 2px; color: var(--ink); font-weight: 500; }
.scanner-disclaimer { font-size: .86rem; color: var(--ink-2); }

@media (max-width: 600px) {
  .scanner-dialog { border-width: 6px; }
  .scanner-body { padding: 26px 18px 22px; }
  .scanner-actions, .scanner-post-actions { flex-wrap: wrap; }
}