/* WoundB 2.0.8: focused, thumb-friendly capture and measurement flow. */
:root {
  --flow-ink: #1c2c28;
  --flow-muted: #65736e;
  --flow-green: #176b58;
  --flow-green-dark: #105344;
  --flow-mist: #f5f8f6;
  --flow-line: #e1e8e4;
}

button, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, select, summary { touch-action: manipulation; }
summary { cursor: pointer; }
summary::marker { color: var(--flow-green); }
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.measure-card { scroll-margin-top: 84px; }
.measure-card .measure-image-slot:empty { display: none; }
.patient-options summary,
.alternate-capture summary,
.practice-tools summary,
.recent-details > summary,
.patient-more > summary {
  color: var(--flow-green);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}
.patient-options summary,
.recent-details > summary { list-style: none; }
.patient-options summary::-webkit-details-marker,
.recent-details > summary::-webkit-details-marker { display: none; }
.patient-option-actions { display: flex; gap: 16px; padding: 10px 0 0; }
.alternate-capture { margin-top: 5px; }
.alternate-capture-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 10px; }
.practice-tools { margin-top: 12px; }
.practice-tools .test-image-button { display: block; margin: 8px 0 0; }
.receipt-details { font-size: 12px; }
.receipt-details summary { color: #39685a; font-weight: 700; }
.receipt-details div { margin-top: 6px; overflow-wrap: anywhere; }
.recent-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recent-details > summary > span:first-child { display: grid; gap: 3px; }
.recent-details > summary strong { color: var(--flow-ink); font-size: 16px; }
.recent-details[open] .capture-list { margin-top: 12px; }
.patient-more-content { padding-top: 10px; }
.patient-more-content > p { color: var(--flow-muted); font-size: 13px; line-height: 1.55; }
.measurement-practice { border: 1px solid var(--flow-line); border-radius: 11px; background: #fbfcfb; padding: 9px 11px; }
.measurement-practice summary { color: var(--flow-green); font-size: 12px; font-weight: 750; }
.measurement-practice p { margin: 8px 0; color: var(--flow-muted); font-size: 12px; line-height: 1.5; }
.measurement-practice a { color: var(--flow-green-dark); font-size: 12px; font-weight: 750; }
.measurement-marker-download .marker-link { display: grid; gap: 3px; }
.measurement-marker-download .marker-image-download { min-height: 36px; }
body.native-capture-app .capture-help a { display: none; }

@media (max-width: 680px) {
  body { background: #f5f7f6; color: var(--flow-ink); }
  .env-banner { min-height: 28px; padding: 5px 10px; font-size: 9px; letter-spacing: .025em; }
  .topbar { height: 58px; padding: 0 12px; gap: 8px; }
  .brand { gap: 7px; font-size: 15px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand small { display: none; }
  .account-area { min-width: 0; gap: 6px; }
  .account-label { display: none; }
  .meta-status-chip { max-width: 130px; padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
  .account-area .secondary-button { min-height: 38px; padding: 7px 10px; font-size: 11px; }
  .account-area .text-button { padding: 7px 4px; font-size: 11px; }
  .app-shell { max-width: 600px; padding: 15px 12px 26px; }
  .page-heading { flex-direction: row; align-items: center; gap: 8px; margin: 0 0 11px; }
  .page-heading .eyebrow, .page-heading p, .page-heading .test-pill { display: none; }
  .page-heading h1 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
  .heading-actions { width: auto; margin-left: auto; }
  #refreshCases { min-height: 36px; padding: 6px 9px; font-size: 10px; }
  .patient-context { display: grid; gap: 8px; margin-bottom: 11px; padding: 12px; border-radius: 15px; }
  .context-main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: 10px; width: 100%; }
  .patient-avatar, .context-divider { display: none; }
  .patient-fields { min-width: 0; }
  .patient-fields label { margin-bottom: 3px; font-size: 10px; }
  .patient-fields select { width: 100%; min-height: 42px; padding: 0 8px; font-size: 12px; }
  .context-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
  .visit-status { padding: 0; border: 0; font-size: 11px; }
  .patient-options summary { padding: 7px 0; font-size: 11px; }
  .patient-option-actions { gap: 12px; justify-content: flex-end; }
  .patient-option-actions .text-button { font-size: 11px; }
  .clinician-grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
  .capture-card, .measure-card, .patient-upload-card, .patient-side-card { padding: 15px; border-radius: 17px; }
  .card-title-row { gap: 8px; }
  .card-title-row h2 { margin: 0; font-size: 17px; }
  .capture-card .card-title-row .eyebrow,
  .measure-card .card-title-row .eyebrow,
  .patient-upload-card .card-title-row .eyebrow { display: none; }
  .phase-toggle { padding: 3px; }
  .phase-button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .capture-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
  .capture-option { min-height: 52px; align-items: center; gap: 9px; padding: 9px; border-radius: 12px; }
  .capture-option strong { font-size: 12px; }
  .capture-option small { margin-top: 2px; font-size: 10px; }
  .capture-option .arrow { top: 50%; right: 11px; transform: translateY(-50%); }
  .primary-capture { min-height: 62px; border-color: var(--flow-green); background: var(--flow-green); color: white; box-shadow: 0 5px 14px rgba(23,107,88,.15); }
  .primary-capture strong { color: white; font-size: 14px; }
  .primary-capture small { color: rgba(255,255,255,.82); }
  .primary-capture .option-icon { background: rgba(255,255,255,.16); color: white; }
  .primary-capture .arrow { color: white; }
  .alternate-capture { padding: 3px 2px; }
  .alternate-capture summary { padding: 6px 2px; font-size: 12px; }
  .alternate-capture-actions { grid-template-columns: 1fr 1fr; gap: 7px; }
  .alternate-capture-actions .capture-option { min-height: 54px; }
  .alternate-capture-actions .option-icon { width: 26px; height: 26px; flex-basis: 26px; font-size: 14px; }
  .capture-help { margin-top: 7px; padding: 8px 9px; font-size: 11px; }
  .capture-help summary { font-size: 11px; }
  .empty-image { min-height: 104px; margin-top: 11px; padding: 12px; }
  .empty-image .empty-icon { display: none; }
  .empty-image strong { font-size: 12px; }
  .empty-image p { max-width: none; font-size: 10px; }
  .image-panel { margin-top: 10px; border-radius: 13px; }
  .image-stage { max-height: 46vh; }
  .image-stage canvas { max-height: 46vh; }
  .image-meta { padding: 8px 10px; }
  .image-meta strong { font-size: 11px; }
  .image-meta span { font-size: 9px; }
  .receipt-box { margin-top: 8px; padding: 8px 9px; font-size: 10px; }
  .receipt-title { margin-bottom: 3px; font-size: 11px; }
  .section-footer { align-items: stretch; gap: 8px; margin-top: 10px; padding-top: 10px; font-size: 10px; }
  .section-footer button { min-height: 46px; font-size: 13px; }
  .measure-card { gap: 10px; margin-top: 0; }
  .measure-card .card-intro { margin: 0; font-size: 12px; line-height: 1.45; }
  .marker-link { min-height: 44px; padding: 9px 10px; font-size: 11px; }
  .marker-link span { font-size: 9px; }
  .measurement-practice { padding: 8px 9px; }
  .measurement-practice summary, .measurement-practice p, .measurement-practice a { font-size: 11px; }
  .measure-image-slot:not(:empty) { margin: 0; }
  .measurement-controls { position: static; display: grid; gap: 7px; padding: 0; border: 0; background: transparent; }
  .measure-tools { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0; }
  .measure-tools .tool-button { min-height: 52px; padding: 8px 9px; }
  .tool-num { width: 30px; height: 30px; font-size: 12px; }
  .measure-tools .tool-button strong { font-size: 12px; }
  .measure-tools .tool-button small { font-size: 10px; }
  .tool-instructions { min-height: 42px; margin: 0; padding: 9px 10px; font-size: 11px; }
  .measure-readout { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 0; border-radius: 12px; }
  .measure-value { min-width: 0; padding: 9px 7px; }
  .measure-value span { font-size: 9px; }
  .measure-value input { width: 68px; font-size: 18px; }
  .measure-value small { font-size: 9px; }
  .quality-checks { margin-top: 0; padding: 9px 10px; font-size: 11px; }
  .quality-checks input { width: 18px; height: 18px; flex: 0 0 auto; }
  .accuracy-details { margin-top: 0; padding: 9px 10px; font-size: 11px; }
  .accuracy-details summary { font-size: 11px; }
  .recent-card { margin-top: 11px; padding: 13px 15px; border-radius: 15px; }
  .recent-details > summary strong { font-size: 14px; }
  .recent-details .quiet-label { display: none; }
  .patient-heading { margin-bottom: 10px; }
  .patient-heading h1 { max-width: none; font-size: 23px; }
  .patient-grid { gap: 10px; }
  .patient-upload-card h2 { font-size: 17px; }
  .patient-instructions { margin-top: 7px; padding: 8px 9px; }
  .patient-instructions .instruction-number { width: 24px; height: 24px; }
  .patient-instructions p { font-size: 11px; }
  .patient-photo-actions { gap: 7px; margin-top: 10px; }
  .upload-tile { min-height: 55px; padding: 8px; }
  .upload-tile strong { font-size: 11px; }
  .upload-tile small { font-size: 9px; }
  .patient-form-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
  .patient-form-row label { font-size: 10px; }
  .patient-form-row select { min-height: 42px; font-size: 12px; }
  .consent-row { margin: 11px 0; font-size: 11px; }
  .consent-row input { width: 18px; height: 18px; flex: 0 0 auto; }
  #sendPatientPhoto { min-height: 48px; font-size: 14px; }
  .patient-more > summary { font-size: 12px; }
  .patient-more-content > p { font-size: 11px; }
  .auth-shell { min-height: calc(100vh - 92px); padding: 16px 12px; }
  .auth-card { padding: 20px; border-radius: 18px; }
  .auth-card h1 { font-size: 25px; }
  .auth-card > p { font-size: 12px; }
  .auth-fields { gap: 10px; margin-top: 16px; }
  .auth-fields input { min-height: 46px; font-size: 15px; }
  .demo-account { min-height: 48px; padding: 9px 10px; }
  .demo-account span { font-size: 12px; }
  .demo-account small { font-size: 10px; }
  .demo-password { font-size: 10px; }
  .app-foot { margin-top: 13px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}