@font-face {
  font-family: "Outfit";
  src: url("./assets/fonts/Outfit-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* THESIS: Kera's real photo workspace is the care interface, with one clear path from capture to review.
   OWN-WORLD: Neutral gray canvas, white reading sheets, charcoal capture stage and geometric typography echoing the Kera wordmark.
   STORY: Capture a real photo, understand what can be reviewed, then choose whether to continue.
   FIRST VIEWPORT: Compact brand and mode navigation above a large camera stage beside the review guide.
   FORM: Monochrome Kera identity applied to the existing responsive camera workflow. */
:root {
  --bg: #f5f5f5;
  --ink: #181818;
  --surface: #e9e9e9;
  --muted: #595959;
  --accent: #202020;
  --accent-hover: #383838;
  --mint: #efefef;
  --line: #dedede;
  --stage: #191919;
  --stage-muted: #d0d0d0;
  --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
::selection { background: #d6d6d6; color: #262626; }
.header { height: 92px; border-bottom: 1px solid var(--line); background: white; max-width: none; padding-inline: max(40px, calc((100vw - 1360px) / 2)); }
.header .mode-tabs { align-self: center; gap: 4px; padding: 5px; background: #f1f1f1; border-radius: 12px; }
.mode-tabs button { border: 0; border-radius: 8px; padding: 14px 22px; min-height: 50px; }
.mode-tabs button[aria-selected=true] { background: var(--accent); color: white; }
.mode-tabs button:hover:not([aria-selected=true]) { background: #e5e5e5; }
.guide-button { padding: 8px 0 8px 16px; color: var(--accent); }
.guide-mark { border-color: var(--line); background: #f5f5f5; }
main { padding-top: 28px; }
.workspace-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
.workspace-intro p { margin: 0; font-size: clamp(38px,4vw,56px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.workspace-intro > span { font-size: 14px; color: #545454; background: #ececec; padding: 9px 14px; border-radius: 6px; }
.workspace-context { font-size: 14px; letter-spacing: 0; text-transform: none; margin-bottom: 20px; color: var(--muted); }
.workspace-context span:first-child { font-weight: 600; color: var(--ink); }
.workspace { gap: 32px; grid-template-columns: minmax(0,1.5fr) minmax(340px,1fr); }
.camera-panel { padding: 20px; background: white; border-radius: 16px; box-shadow: 0 8px 32px rgb(0 0 0 / .07); }
.view-heading { margin: 0 2px 16px; }
.view-heading h2 { font-weight: 600; }
.viewfinder { border-radius: 12px; height: clamp(340px,47vh,560px); background: var(--stage); }
.viewfinder:has(#empty-state:not([hidden])) {
  container-type: inline-size;
  height: auto;
  min-height: clamp(360px, 47vh, 560px);
  aspect-ratio: auto;
}
.viewfinder:has(#empty-state:not([hidden]))::before { content: ""; position: absolute; inset: 22px; border: 1px solid #727272; border-radius: 12px; pointer-events: none; }
.empty-state { width: 100%; padding: 44px 28px; }
.empty-state h3 { font-size: clamp(24px,4.5cqw,32px); font-weight: 600; letter-spacing: -.025em; margin-bottom: 14px; }
.empty-state .nail-mark { color: #d5d5d5; width: 36px; height: 42px; margin-bottom: 18px; flex-shrink: 0; }
.empty-state p { font-size: 16px; color: var(--stage-muted); margin-bottom: 22px; }
.empty-state .button { min-height: 52px; font-size: 17px; background: #e8e8e8; color: #333333; }
.camera-toolbar { margin-top: 14px; gap: 16px; }
.camera-toolbar #upload-button { text-decoration: underline; text-underline-offset: 5px; }
.button { border-radius: 10px; font-size: 17px; font-weight: 600; background: var(--accent); color: white; }
.button:hover:not(:disabled) { background: var(--accent-hover); }
.button:disabled { background: var(--surface); color: var(--muted); }
.button.secondary-button { color: var(--accent); background: transparent; border-color: var(--accent); }
.button.secondary-button:hover:not(:disabled) { background: var(--mint); }
.button.secondary-button:disabled { border-color: var(--line); }
.light-button:hover:not(:disabled) { background: #d7d7d7; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.scan-details { padding: 8px 4px 24px 8px; background: transparent; min-height: 0; }
.visual-intro h1 { font-size: 36px; letter-spacing: -.025em; }
.skin-review-steps { list-style: none; counter-reset: care-step; padding: 0; margin: 30px 0; }
.skin-review-steps li { counter-increment: care-step; position: relative; padding: 0 0 24px 46px; margin: 0; }
.skin-review-steps li:last-child { padding-bottom: 0; }
.skin-review-steps li::before { content: counter(care-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-size: 15px; font-weight: 600; }
.skin-review-steps strong { font-size: 18px; }
.skin-review-steps span { margin-top: 6px; }
.review-categories { margin: 26px 0; border-block: 1px solid var(--line); }
.review-categories > summary { padding-block: 18px; font-weight: 600; }
.review-action .button { border-radius: 10px; }
.review-action { padding-top: 4px; background: transparent; }
.scan-details h2, .dialog-header h2 { letter-spacing: -.025em; }
.guidance strong { font-weight: 600; }
.region-button[aria-pressed=true] { background: var(--mint); }
.footer { margin-top: 12px; }
/* The review is a reading surface, with an overview distinct from optional detail. */
.care-overview { background: var(--mint); color: var(--ink); border-radius: 12px; padding: 28px; margin-bottom: 32px; }
.care-overview h2 { color: #454545; font-size: 20px; letter-spacing: 0; }
.care-overview .care-headline { font-size: 28px; line-height: 1.25; letter-spacing: -.02em; }
.care-overview .care-summary-copy { color: #434343; }
.care-overview .care-text-size { border-color: #858585; color: var(--accent); background: transparent; }
.care-overview .care-text-size[aria-pressed=true] { background: var(--accent); color: white; }
.care-overview button:focus-visible, .care-overview summary:focus-visible { outline-color: var(--accent); }
.care-next-step { padding-top: 22px; border-top: 1px solid #c4c4c4; }
.care-next-step h3 { color: #454545; }
.care-overview-actions .button { background: var(--accent); color: white; width: 100%; padding-inline: 16px; }
.care-quality-detail > summary { color: var(--ink); }
.care-finding > summary { padding: 20px 4px; }
.care-finding[open] > summary { padding-bottom: 12px; }
.care-finding-body { padding: 6px 4px 24px 22px; }
.care-context { background: #f1f1f1; border-radius: 10px; padding: 0 16px; }
.care-explanation { padding-bottom: 16px; }
.care-note > summary { font-size: 23px; }
.care-note textarea { background: white; border-radius: 8px; }
.care-provenance > summary { color: var(--muted); }
.care-header { border-bottom: 1px solid var(--line); }
.care-main { padding-top: 40px; max-width: 1120px; }
.care-title h1 { font-size: clamp(36px,4.6vw,56px); font-weight: 400; letter-spacing: -.025em; }
.care-title p { color: var(--muted); }
.care-demo-notice { background: #eeeeee; border-radius: 12px; }
.care-example-controls { align-items: center; gap: 28px; }
.care-example-controls select { background: white; border-radius: 8px; }
.care-preview .care-review { background: white; padding: 28px; border-radius: 16px; }
@media (max-width: 1050px) {
  .workspace { grid-template-columns: minmax(0,1.1fr) minmax(300px,1fr); gap: 24px; }
  .scan-details { padding: 8px 0 24px; }
  .camera-panel { padding: 16px; }
  .care-overview { padding: 22px; }
  .care-overview-top { flex-wrap: wrap; }
}
@media (min-width: 741px) and (max-width: 900px) {
  .workspace { grid-template-columns: minmax(0,1fr); }
  .viewfinder { height: clamp(340px,47vh,500px); }
}
@media (max-width: 740px) {
  .header { padding-inline: 22px; min-height: 140px; height: auto; padding-top: 20px; padding-bottom: 12px; row-gap: 18px; }
  .header .mode-tabs { padding: 4px; border-radius: 10px; gap: 4px; }
  .mode-tabs button { min-height: 50px; padding: 12px 8px; border-radius: 7px; }
  .workspace-intro { margin: 0 0 24px; display: block; }
  .workspace-intro p { font-size: 38px; }
  .workspace-intro > span { display: inline-block; margin-top: 12px; font-size: 13px; }
  main { padding-top: 16px; }
  .workspace { gap: 24px; }
  .camera-panel { padding: 14px; }
  .viewfinder { height: auto; aspect-ratio: 1.1; }
  .viewfinder:has(#empty-state:not([hidden])) { min-height: 320px; aspect-ratio: auto; }
  .empty-state .nail-mark { width: 30px; height: 36px; margin-bottom: 16px; }
  .empty-state p { font-size: 14px; margin-bottom: 18px; }
  .empty-state .button { font-size: 15px; min-height: 48px; padding-inline: 16px; }
  .camera-toolbar { gap: 0 12px; }
  .camera-toolbar .button { padding-inline: 12px; font-size: 14px; }
  .camera-tools { min-width: 0; }
  .scan-details { padding: 6px 0 24px; }
  .visual-intro h1 { font-size: 30px; }
  .care-overview { padding: 22px 18px; }
  .care-overview .care-headline { font-size: 25px; }
  .care-finding-body { padding-left: 4px; }
  .care-context { padding-inline: 12px; }
  .care-main { padding-top: 28px; }
  .care-preview .care-review { padding: 18px 14px; }
  .care-header { padding-block: 20px; }
  .care-example-controls { gap: 8px 24px; }
}
@media (max-width: 374px) {
  .camera-panel { padding: 10px; }
  .scan-details { padding: 6px 0 24px; }
  .camera-toolbar { column-gap: 8px; }
  .camera-toolbar .button { padding-inline: 10px; }
  .empty-state { padding-inline: 24px; }
}

/* Monochrome surfaces keep capture, guidance and actions distinct. */
:root {
  --bg: #f5f5f5;
  --ink: #181818;
  --surface: #e9e9e9;
  --muted: #595959;
  --accent: #202020;
  --accent-hover: #383838;
  --mint: #efefef;
  --line: #dedede;
  --stage: #191919;
  --stage-muted: #d0d0d0;
  --powder: #f0f0f0;
}
::selection { background: #d6d6d6; color: #262626; }
.header {
  background: #fff;
  border-bottom-color: #e9e9e9;
  box-shadow: 0 2px 12px rgb(0 0 0 / .035);
}
.header .mode-tabs { background: #f1f1f1; border-radius: 999px; padding: 5px; }
.mode-tabs button { border-radius: 999px; }
.mode-tabs button[aria-selected=true] { background: var(--accent); }
.mode-tabs button:hover:not([aria-selected=true]) { background: #e5e5e5; }
.guide-button { color: var(--accent); }
.guide-mark { background: var(--powder); border-color: var(--line); border-radius: 50%; }
main { max-width: 1440px; }
.workspace-intro > span { color: #454545; background: #ececec; border-radius: 999px; }
.workspace-context { color: var(--muted); }
.workspace-context span:first-child { color: var(--ink); }
.camera-panel {
  padding: 22px;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgb(0 0 0 / .075);
}
.view-heading h2 { color: var(--ink); }
.camera-status { color: var(--muted); }
.camera-status.is-live { color: #505050; }
.viewfinder { background: var(--stage); border-radius: 18px; }
.viewfinder:has(#empty-state:not([hidden]))::before { border-color: #636363; border-radius: 14px; }
.empty-state .nail-mark { color: #cacaca; }
.empty-state h3 { color: #fff; }
.empty-state p { color: var(--stage-muted); }
.empty-state .button { color: #2a2a2a; background: #ececec; border-radius: 999px; }
.empty-state .button:hover:not(:disabled) { background: #dfdfdf; }
.button { border-radius: 14px; background: var(--accent); }
.button:hover:not(:disabled) { background: var(--accent-hover); }
.button.secondary-button { color: var(--accent); border-color: #bdbdbd; }
.button.secondary-button:hover:not(:disabled) { background: var(--powder); }
.text-button { color: #484848; }
.scan-details {
  padding: 26px 28px;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgb(0 0 0 / .06);
}
.visual-intro h1, .scan-details h2, .dialog-header h2 { color: var(--ink); }
.visual-intro h1 { letter-spacing: -.025em; }
.visual-intro p, .panel-copy { color: #545454; }
.skin-review-steps { margin: 24px 0; padding: 0; }
.skin-review-steps li {
  padding: 15px 16px 15px 54px;
  margin: 0 0 10px;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  background: #f9f9f9;
}
.skin-review-steps li:last-child { padding-bottom: 15px; }
.skin-review-steps li::before { left: 14px; top: 15px; background: #e7e7e7; color: #343434; }
.skin-review-steps strong { font-size: 16px; }
.skin-review-steps span { color: #626262; font-size: 15px; }
.review-categories { padding: 0 18px; border: 1px solid #e6e6e6; border-radius: 16px; background: #fafafa; }
.review-categories > summary { color: var(--ink); }
.review-categories > p, .review-categories li { color: #545454; }
.review-categories li { border-color: #e7e7e7; }
.review-action { margin-top: 22px; }
.review-action .button, .care-overview-actions .button { border-radius: 16px; }
.review-action .button:hover:not(:disabled), .care-overview-actions .button:hover:not(:disabled) { background: var(--accent-hover); }
.review-limitation, .permission-note, .notice, .model-note { color: #626262; }
.care-overview { background: #f0f0f0; border: 1px solid #e5e5e5; border-radius: 18px; }
.care-overview h2, .care-next-step h3, .care-context h4 { color: #454545; }
.care-overview .care-headline, .care-overview .care-summary-copy { color: var(--ink); }
.care-overview .care-text-size { border-color: #bdbdbd; color: var(--accent); border-radius: 999px; }
.care-overview .care-text-size[aria-pressed=true] { background: var(--accent); color: #fff; }
.care-next-step { border-color: #d5d5d5; }
.care-finding { border-color: var(--line); }
.care-review .care-state, .care-columns .care-caution, .care-provenance { color: #626262; }
.care-note { border-color: #dadada; }
.care-note textarea { border-color: #c6c6c6; border-radius: 12px; }
.care-context { background: #f7f7f7; border-radius: 14px; }
.care-context a, .care-provenance a { color: #464646; }
.care-review summary:focus-visible, .care-review button:focus-visible, .care-review textarea:focus-visible { outline-color: #686868; }
.region-button, .touch-regions button, .touch-tools button, .touch-zoom button, .touch-adjust button { border-radius: 12px; }
.region-button[aria-pressed=true], .touch-regions button[aria-pressed=true], .touch-tools button[aria-pressed=true] { background: #ededed; color: var(--accent); }
.region-check { border-color: #939393; }
.region-button.is-marked .region-check { background: var(--accent); border-color: var(--accent); }
#torch-button, #torch-button[aria-pressed=true] { background: var(--powder); color: var(--accent); border-radius: 12px; }
#torch-button[aria-pressed=true] { background: var(--accent); color: #fff; }
.mobile-scan-dock:not([hidden]) { background: #fff; box-shadow: 0 -6px 22px rgb(0 0 0 / .09); }
.footer { border-color: var(--line); }
.footer p, .footer .text-button { color: #626262; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline-color: #686868;
}
@media (max-width: 740px) {
  .header { background: #fff; }
  .camera-panel, .scan-details { border-radius: 22px; }
  .camera-panel { padding: 14px; }
  .scan-details { padding: 22px 18px; }
  .workspace-intro > span { display: inline-block; margin-top: 10px; }
  .skin-review-steps li { padding: 13px 12px 13px 48px; }
  .skin-review-steps li::before { left: 11px; top: 13px; }
  .care-overview { border-radius: 16px; }
  .review-action .button { border-radius: 999px; }
}

/* Shared action, input and reading states keep color tied to purpose. */
.text-button { color: var(--accent); }
.button:focus-visible, .text-button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: var(--accent); }
.care-context a, .care-provenance a { color: #464646; }
.care-finding { border-color: var(--line); }
.care-review .care-state { color: #5c5c5c; }
.care-note { border-color: #cacaca; }
.care-note textarea { border-color: #8f8f8f; color: var(--ink); font-family: var(--font); }
.care-context h4 { color: #454545; }
.care-text-size:hover { background: #dfdfdf; }
.care-overview-actions .button:hover:not(:disabled) { background: var(--accent-hover); }
.care-text-size[aria-pressed=true]:hover { background: var(--accent-hover); }
.review-categories li { border-color: var(--line); }
.skin-review-steps span, .review-limitation, .permission-note, .notice { color: var(--muted); }
.camera-status { color: #626262; }
.camera-status.is-live { color: var(--accent); }
#torch-button { background: var(--mint); color: var(--accent); }
#torch-button[aria-pressed=true] { background: var(--accent); color: white; }
.touch-regions button[aria-pressed=true], .touch-tools button[aria-pressed=true] { background: var(--accent); color: white; }
.region-check { border-color: #858585; }
.region-button.is-marked .region-check { background: var(--accent); border-color: var(--accent); }
.mobile-scan-dock:not([hidden]) { background: #fff; }
.vision-consent input, .coordinate-inputs input, .touch-zoom input { accent-color: var(--accent); }
.footer { border-top: 1px solid var(--line); padding-top: 20px; }
@media (max-width: 740px) { .header { padding-inline: 22px; } .camera-panel { box-shadow: none; } }
@media (max-width: 374px) { .header { padding-inline: 16px; } .viewfinder:has(#empty-state:not([hidden]))::before { inset: 12px; } }

/* One geometric family echoes the circular forms and clean strokes in the Kera logo. */
:root { --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { font-family: var(--font); letter-spacing: -.01em; }
button, input, select, textarea { font-family: inherit; }
.workspace-intro > p {
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.workspace-intro > span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.mode-tabs button { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.mode-tabs button[aria-selected=true] { font-weight: 600; }
.view-heading h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.camera-status { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.visual-intro h1, .scan-details h2, .dialog-header h2 {
  font-size: clamp(26px, 2.5vw, 31px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.025em;
}
.visual-intro p, .panel-copy { font-size: 16px; line-height: 1.55; letter-spacing: -.01em; }
.skin-review-steps li { font-size: 15px; line-height: 1.5; }
.skin-review-steps strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.skin-review-steps span { font-size: 16px; line-height: 1.5; letter-spacing: -.01em; }
.review-categories > summary { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.review-action .button, .care-overview-actions .button {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.button { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.camera-toolbar .text-button, .guide-button { font-size: 15px; font-weight: 550; }
.care-review { font-family: var(--font); }
.care-review .care-state, .care-columns .care-caution, .care-provenance { color: #626262; }
.care-note textarea { font-family: var(--font); }
.care-note { border-color: #dadada; }
.care-note textarea { border-color: #c6c6c6; }
.care-context h4 { color: #454545; }
.care-text-size:hover { background: #e3e3e3; }
.region-check { border-color: #939393; }
@media (max-width: 740px) {
  .workspace-intro > p { font-size: 32px; }
  .visual-intro h1, .scan-details h2, .dialog-header h2 { font-size: 26px; }
  .mode-tabs button { font-size: 15px; }
}
@media (min-width: 1100px) {
  .workspace {
    grid-template-columns: minmax(0, 1.45fr) minmax(390px, .95fr);
    gap: 28px;
    align-items: start;
  }
  .camera-panel { padding: 24px; }
  .scan-details { padding: 26px; }
}

/* Error text and shape carry the warning without a separate accent color. */
:root { --error: #292929; --error-bg: #ededed; }
.error { border: 1px solid #8a8a8a; }
.care-overview-actions .button:disabled { background: var(--surface); color: var(--muted); }

/* Secondary actions retain a light surface before, during and after hover. */
.button.secondary-button { background: #f5f5f5; color: #202020; border: 1px solid #a0a0a0; }
.button.secondary-button:hover:not(:disabled) { background: #e8e8e8; color: #202020; }
.button.secondary-button:disabled { background: #ededed; color: #626262; border-color: #cecece; }
.hb-study-context { margin: 26px 0; padding-block: 24px; border-block: 1px solid var(--line); }
.hb-study-context h3 { font-size: 20px; margin: 0 0 12px; }
.hb-study-context p { font-size: 16px; line-height: 1.6; }
.hb-study-context a { font-size: 15px; text-underline-offset: 4px; }
.hb-study-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.hb-study-metrics dt { font-size: 14px; color: var(--muted); }
.hb-study-metrics dd { margin: 6px 0 0; font-size: 28px; font-weight: 600; }
.hb-study-metrics dd span { font-size: 15px; font-weight: 400; }
.review-page { max-width: 1080px; padding-bottom: 48px; }
.review-page-title { margin: 24px 0 32px; }
.review-page-title h1 { font-size: clamp(32px,4vw,48px); letter-spacing: -.025em; line-height: 1.12; margin: 8px 0 14px; font-weight: 600; }
.review-page-title > p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.review-page .care-overview { padding: 28px; background: #fff; }
.review-page .care-columns { display: block; }
.review-page .care-finding { padding: 20px 24px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.review-page .care-finding > summary { padding: 4px 0; }
.review-page .care-context { padding: 20px; margin-top: 24px; }
.care-context > h4 { font-size: 18px; margin-top: 0; }
.review-page .care-findings > h2 { margin-top: 32px; }
.review-page .care-uncertain-group, .review-page .care-clear-group { margin-block: 24px; }
.review-page .care-note { margin-top: 32px; }
.review-page-privacy { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 28px; }
@media (max-width: 740px) {
  .review-page .care-overview { padding: 22px 18px; }
  .review-page .care-finding { padding: 18px 14px; }
  .review-page .care-context { padding: 16px; }
}

.care-further-context { margin-top: 16px; }
.care-further-context > summary { font-size: 15px; }

.scan-history { margin-block: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.scan-history h3 { font-size: 20px; margin: 0 0 10px; }
.scan-history > p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.scan-history-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: 12px; padding: 0; list-style: none; }
.scan-history-list li { min-width: 0; }
.scan-history-list button { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; min-height: 74px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f6f6f6; color: var(--ink); text-align: left; }
.scan-history-list button:hover { background: #e9e9e9; border-color: #888; }
.scan-history-list img { width: 100%; height: 74px; object-fit: contain; border-radius: 6px; background: #e9e9e9; }
.scan-history-list strong { font-size: 15px; font-weight: 600; }
.scan-history-list span { font-size: 13px; color: var(--muted); }

.region-editor-help { margin: -6px 0 22px; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Session photos stay near the capture stage and on the results page. */
#photo-history-slot .scan-history { margin: 0 0 18px; padding: 0 0 16px; border-top: 0; border-bottom: 1px solid var(--line); }
.scan-history-list { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 8px; scroll-snap-type: x proximity; }
.scan-history-list li { flex: 0 0 128px; scroll-snap-align: start; }
.scan-history-list button[aria-pressed=true] { border-color: #202020; background: #e8e8e8; }
.history-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.history-navigation .button { min-height: 44px; padding: 10px 14px; font-size: 14px; }
#saved-photo-position { white-space: nowrap; font-size: 14px; color: var(--muted); }
@media (max-width: 374px) { .history-navigation .button { padding-inline: 8px; font-size: 13px; } }

.history-navigation { position: sticky; top: 0; z-index: 1; background: #fff; padding-block: 10px; }

/* Stacked review: a short overview, prominent warning when flagged, then observations. */
.care-icon { width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; }
.care-review .care-overview, .review-page .care-overview { display: block; background: #fff; border: 1px solid var(--line); padding: 28px; border-radius: 16px; }
.care-overview-top { align-items: center; }
.care-overview h2 { color: var(--ink); font-size: 22px; font-weight: 600; }
.care-overview .care-headline { font-size: 24px; margin: 20px 0; line-height: 1.35; }
.care-at-glance { list-style: none; padding: 0; margin: 0 0 16px; }
.care-review .care-at-glance li { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.care-at-glance li > span { flex: 1; }
.care-at-glance strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.care-overview .care-summary-copy { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.care-review .care-quality-detail > summary { font-size: 16px; min-height: 44px; padding-block: 10px; }
.care-review .care-next-step { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.care-overview-actions { margin-top: 8px; }
.care-overview-actions .text-button { font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.care-priority { margin: 0 0 24px; padding: 28px; border-radius: 16px; background: #202020; color: #fff; }
.care-priority-title { display: flex; align-items: flex-start; gap: 18px; }
.care-priority .care-icon { width: 38px; height: 38px; flex-basis: 38px; }
.care-priority h2 { margin: 0; font-size: clamp(26px,3vw,34px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.care-priority p { margin: 18px 0 0; color: #eee; }
.care-priority .care-priority-action { color: #fff; font-weight: 600; }
.care-priority a { display: inline-block; color: #fff; padding-block: 14px 2px; text-underline-offset: 4px; }
.care-review .care-finding { margin-bottom: 18px; padding: 22px 24px; border: 1px solid var(--line); background: #fff; border-radius: 16px; }
.care-review .care-finding > summary { display: flex; align-items: flex-start; gap: 14px; list-style: none; padding: 0; }
.care-finding > summary::-webkit-details-marker { display: none; }
.care-finding > summary::after { content: '+'; margin-left: auto; color: var(--muted); font-size: 24px; line-height: 1; }
.care-finding[open] > summary::after { content: '−'; }
.care-review .care-finding-title { display: block; flex: 1; }
.care-review .care-finding-title > span:first-child { font-size: 21px; font-weight: 600; line-height: 1.25; }
.care-review .care-state { padding-left: 0; margin-top: 6px; font-size: 14px; color: var(--muted); }
.care-review .care-finding-body { padding: 18px 0 0; }
.care-finding-body h3, .care-review .care-context > h4 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.care-review .care-context, .review-page .care-context { background: transparent; padding: 0; margin-top: 20px; border-radius: 0; }
.care-review .care-explanation { padding: 0; }
.care-review .care-finding-priority { border: 2px solid #202020; }
.care-review .care-finding-priority .care-finding-title > span:first-child { font-size: 26px; }
.care-source-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.care-source-label { font-size: 14px; color: var(--muted); }
.care-review .care-source-links a { font-size: 16px; padding-block: 8px; }
.care-review .care-further-context > summary { font-size: 15px; }
.care-review .care-note { margin-top: 28px; }
@media (max-width: 740px) {
  .care-review .care-overview, .review-page .care-overview, .care-priority { padding: 22px 18px; }
  .care-review .care-finding, .review-page .care-finding { padding: 20px 18px; }
  .care-overview-top { flex-wrap: wrap; gap: 12px; }
  .care-overview .care-headline { font-size: 22px; }
  .care-review .care-finding-title > span:first-child { font-size: 20px; }
  .care-priority-title { gap: 12px; }
  .care-priority .care-icon { width: 30px; height: 30px; flex-basis: 30px; }
}

.review-photo-disclosure { margin: 0 0 24px; border-block: 1px solid var(--line); }
.review-photo-disclosure > summary { min-height: 48px; padding: 14px 0; cursor: pointer; font-size: 16px; }
.review-photo-disclosure .scan-history { border-top: 0; margin-top: 0; padding-top: 8px; }

.care-review .care-review-disclaimer { font-size: 16px; line-height: 1.55; color: var(--ink); margin: -8px 0 20px; }

/* Put the touch editor beside the photo title on small screens. */
#mobile-region-editor-slot:empty { display: none; }
@media (max-width: 740px) {
  #mobile-region-editor-slot { margin-left: auto; }
  #mobile-region-editor-slot:has(#touch-editor-button[hidden]) { display: none; }
  .view-heading:has(#touch-editor-button:not([hidden])) .camera-status { display: none; }
  #mobile-region-editor-slot #touch-editor-button {
    width: auto; min-height: 44px; margin: 0; padding: 10px 16px;
    background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
    border-radius: 12px; font-size: 14px; gap: 8px;
  }
}