/* The project cover and explorer share one photograph and the same annotations. */
.project-card .art-road-photo { height:auto; aspect-ratio:1.5; background:var(--forest); }
.road-cover-scene { position:absolute; inset:0; }
.road-cover-scene img { display:block; width:100%; height:100%; object-fit:contain; }
.road-cover-detection { position:absolute; border:2px solid var(--road-cover-colour); border-radius:3px; box-shadow:0 0 0 1px color-mix(in srgb,var(--forest) 44%,transparent); }
.road-cover-detection b { position:absolute; top:0; left:-2px; transform:translateY(-100%); padding:4px 6px; border-radius:2px 2px 0 0; color:var(--ink); background:var(--road-cover-colour); font:700 10px/1.2 Arial,sans-serif; letter-spacing:.025em; text-transform:uppercase; white-space:nowrap; }
.road-cover-pothole { left:5.5%; top:61.3%; width:35.3%; height:22%; --road-cover-colour:var(--citron); }
.road-cover-puddle { left:60.5%; top:60.5%; width:39.2%; height:23%; --road-cover-colour:var(--sky); }
.road-cover-bump { left:5.8%; top:33.4%; width:90.5%; height:11%; --road-cover-colour:var(--clay); }
.art-road-photo .art-label,.art-road-photo .art-foot { width:fit-content; max-width:calc(100% - 24px); left:12px; right:auto; padding:5px 7px; border-radius:3px; background:color-mix(in srgb,var(--forest) 91%,transparent); color:var(--ivory); font:500 10px/1.4 Arial,sans-serif; letter-spacing:.04em; }
.art-road-photo .art-label { top:12px; }
.art-road-photo .art-foot { bottom:10px; }
#demo-potholes.road-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(285px, 1fr);
  align-items: stretch;
  background: var(--forest);
;color:var(--ivory);--text:var(--ivory);--muted:var(--mist);--line:var(--forest-line);--accent:var(--citron);--button-text:var(--ink);--hover-surface:var(--forest-raised)}
.road-visual { min-width: 0; padding: 22px; background: var(--forest); }
.road-visual-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 17px; }
.road-demo-kicker { color: var(--mist); font-size: .57rem; line-height: 1.6; letter-spacing: .14em; font-weight: 700; }
.road-generated-badge { flex-shrink: 0; border: 1px solid var(--forest-line); border-radius: 3px; padding: 4px 7px; color: var(--mist); font-size: .57rem; line-height: 1.4; }
.road-photo-stage { position: relative; margin: 0; aspect-ratio: var(--road-aspect, 1.5); width: 100%; overflow: hidden; background: var(--forest); border: 1px solid var(--forest-line); border-radius: 7px; }
.road-photo { display: block; width: 100%; height: 100%; object-fit: contain; }
.road-detections { position: absolute; inset: 0; pointer-events: none; }
.road-detection { position: absolute; border: 2px solid var(--detection-color, var(--citron)); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb,var(--forest) 38%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--forest) 38%,transparent); }
.road-detection::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--detection-color, var(--citron)); opacity: .2; border-radius: 5px; }
.road-detection.is-muted { opacity: .66; }
.road-detection.is-selected { border-width: 3px; box-shadow: 0 0 0 1px color-mix(in srgb,var(--forest) 50%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--forest) 50%,transparent), 0 0 15px color-mix(in srgb,var(--forest) 27%,transparent); }
.road-detection.is-selected::after { opacity: .6; }
.road-detection-label { position: absolute; top: -6px; left: -2px; transform: translateY(-100%); color:var(--ink); background: var(--detection-color, var(--citron)); border: 1px solid color-mix(in srgb,var(--forest-line) 33%,transparent); border-radius: 2px; padding: 4px 7px; font: 700 .59rem/1.15 Arial, sans-serif; letter-spacing: .055em; white-space: nowrap; text-transform: uppercase; box-shadow: 0 2px 8px color-mix(in srgb,var(--forest) 33%,transparent); }
.road-labels-hidden .road-detection-label { display: none; }
.road-photo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 13px 16px; }
.road-photo-caption { color: var(--mist); font-size: .66rem; line-height: 1.5; }
.road-image-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.road-image-button { border: 1px solid var(--forest-line); color: var(--ivory); background: var(--forest); border-radius: 4px; padding: 7px 10px; font-size: .62rem; line-height: 1.5; min-height: 34px; white-space: nowrap; }
.road-image-button:hover { border-color:var(--sage); background:var(--forest-raised); }
.road-image-button[aria-pressed="true"] { border-color: var(--forest-line); color: var(--citron); }
.road-image-button:disabled { opacity: .45; cursor: default; }
.road-class-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.road-class-button { min-width: 0; padding: 13px 12px; background: var(--forest); border: 1px solid var(--forest-line); border-radius: 5px; text-align: left; transition: border-color .15s, background .15s; }
.road-class-button:hover { border-color:var(--sage); background:var(--forest-raised); }
.road-class-button[aria-pressed="true"] { border-color: var(--road-choice-color); box-shadow: 0 0 0 1px color-mix(in srgb,var(--forest) 4%,transparent); background: var(--forest-panel); }
.road-class-number { display: block; color: var(--road-choice-color); font-size: .55rem; margin-bottom: 5px; }
.road-class-button strong { display: block; color: var(--ivory); font-size: .78rem; font-weight: 500; line-height: 1.4; }
.road-class-cue { display: block; font-size: .58rem; line-height: 1.55; color: var(--mist); margin-top: 7px; }
.road-disclosure { margin-top: 14px; color: var(--mist); font-size: .65rem; line-height: 1.7; max-width: 65em; }
.road-explorer-sidebar { padding: 28px 27px; min-width: 0; border-left: 1px solid var(--forest-line); display: flex; flex-direction: column; align-items: flex-start; }
.road-explorer-sidebar > .eyebrow { font-size: .58rem; }
.road-class-badge { display: inline-flex; gap: 7px; align-items: center; margin-top: 19px; color: var(--road-class-color, var(--citron)); font-size: .7rem; font-weight: 700; }
.road-class-badge::before { content: ""; display: block; width: 7px; height: 7px; border: 1px solid var(--road-class-color, var(--citron)); background: var(--road-class-color, var(--citron)); border-radius: 2px; }
.road-journey { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 22px 0 24px; }
.road-journey-step { min-width: 0; background: var(--forest); color: var(--mist); padding: 10px 3px; border: 1px solid var(--forest-line); border-radius: 4px; text-align: center; font-size: .57rem; line-height: 1.45; }
.road-journey-number { display: block; font-size: .82rem; line-height: 1; margin-bottom: 6px; color: var(--ivory); }
.road-journey-step[aria-selected="true"] { color: var(--citron); background: color-mix(in srgb,var(--citron) 3%,transparent); border-color: var(--citron); }
.road-journey-step[aria-selected="true"] .road-journey-number { color: var(--citron); }
.road-journey-step:hover { background:var(--forest-raised); }
.road-journey-content { width: 100%; }
.road-explorer-title { font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.12; letter-spacing: -.045em; margin: 0 0 16px; }
.road-explorer-description { font-size: .82rem; line-height: 1.8; color: var(--mist); margin: 0; }
.road-observation, .road-outcome { padding: 15px 15px 16px; margin-top: 22px; border: 1px solid var(--forest-line); border-radius: 5px; background: var(--forest-panel); }
.road-observation-label { display: block; color: var(--mist); font-size: .51rem; line-height: 1.5; font-weight: 700; letter-spacing: .1em; margin-bottom: 6px; }
.road-observation p { color: var(--ivory); font-size: .77rem; line-height: 1.7; margin: 0; }
.road-outcome { border-color: color-mix(in srgb,var(--forest-line) 40%,transparent); background: color-mix(in srgb,var(--citron) 2%,transparent); }
.road-outcome strong { display: block; color: var(--citron); font-size: .83rem; line-height: 1.6; font-weight: 500; }
.road-next-button { margin-top: 25px; font-size: .73rem; max-width: 100%; }
.road-wider-intent { color: var(--mist); font-size: .69rem; line-height: 1.8; margin-top: 20px; padding-top: 19px; border-top: 1px solid var(--forest-line); }
.road-photo-dialog { width: min(1220px, calc(100% - 36px)); max-height: 92vh; padding: 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.road-photo-dialog::backdrop { background:color-mix(in srgb,var(--forest) 88%,transparent); backdrop-filter: blur(8px); }
.road-photo-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 17px; }
.road-photo-dialog-header > p { font-size: .85rem; color: var(--ink); }
.road-photo-close { width: 39px; height: 39px; flex: 0 0 39px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); background: var(--sage-soft); font: 1.7rem/1 Arial, sans-serif; }
.road-large-image .road-photo-stage { width: min(100%, calc(73vh * var(--road-aspect, 1.5))); margin-inline: auto; }
.road-large-image .road-detection-label { font-size: .75rem; padding: 5px 8px; }
@media (max-width: 1100px) {
  #demo-potholes.road-explorer { grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); ;color:var(--ivory);--text:var(--ivory);--muted:var(--mist);--line:var(--forest-line);--accent:var(--citron);--button-text:var(--ink);--hover-surface:var(--forest-raised)}
  .road-visual { padding: 18px; }
  .road-explorer-sidebar { padding: 24px 21px; }
  .road-visual-header { flex-wrap: wrap; gap: 8px; }
  .road-photo-toolbar { align-items: flex-start; flex-direction: column; gap: 9px; }
  .road-class-button { padding-inline: 10px; }
  .road-class-button strong { font-size: .68rem; }
}
@media (max-width: 760px) {
  #demo-potholes.road-explorer { grid-template-columns: minmax(0, 1fr); ;color:var(--ivory);--text:var(--ivory);--muted:var(--mist);--line:var(--forest-line);--accent:var(--citron);--button-text:var(--ink);--hover-surface:var(--forest-raised)}
  .road-explorer-sidebar { border-left: 0; border-top: 1px solid var(--forest-line); padding: 26px; }
  .road-visual { padding: 20px; }
  .road-visual-header { flex-wrap: nowrap; }
  .road-photo-toolbar { flex-direction: row; align-items: center; }
  .road-explorer-title { font-size: 1.85rem; }
  .road-explorer-description { font-size: .88rem; }
  .road-journey { margin-top: 18px; margin-bottom: 24px; gap: 8px; }
  .road-journey-step { font-size: .67rem; padding: 12px 5px; }
  .road-journey-number { font-size: .9rem; }
  .road-class-badge { margin-top: 15px; }
  .road-class-button { padding: 13px 12px; }
  .road-class-button strong { font-size: .78rem; }
  .road-class-cue { font-size: .63rem; }
  .road-next-button { font-size: .78rem; }
  .road-observation p { font-size: .82rem; }
  .road-wider-intent { font-size: .74rem; }
  .road-disclosure { font-size: .7rem; }
}
@media (max-width: 460px) {
  .road-visual { padding: 15px; }
  .road-visual-header { align-items: flex-start; gap: 8px; }
  .road-demo-kicker { font-size: .49rem; max-width: 145px; }
  .road-generated-badge { font-size: .5rem; padding: 4px 5px; }
  .road-photo-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .road-image-actions { width: 100%; justify-content: space-between; }
  .road-image-button { min-height: 38px; font-size: .65rem; }
  .road-class-picker { gap: 7px; }
  .road-class-button { padding: 10px 8px; }
  .road-class-button strong { font-size: .7rem; }
  .road-class-cue { font-size: .55rem; }
  .road-detection-label { font-size: .6rem; padding: 3px 4px; ;color:var(--ink)}
  .road-disclosure { font-size: .67rem; }
  .road-explorer-sidebar { padding: 24px 20px; }
  .road-explorer-title { font-size: 1.7rem; }
  .road-explorer-description { font-size: .84rem; }
  .road-journey { gap: 5px; }
  .road-journey-step { font-size: .59rem; }
  .road-photo-dialog { width: calc(100% - 18px); padding: 13px; }
  .road-photo-dialog-header > p { font-size: .72rem; }
  .road-large-image .road-detection-label { font-size: .6rem; padding: 3px 4px; }
}
@media (max-width: 360px) {
  .road-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .road-class-button { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .road-explorer * { transition: none !important; } }

/* Review and submission are illustrative states; no external report is sent. */
.road-confidence-note { position:absolute; bottom:10px; left:10px; max-width:calc(100% - 20px); padding:6px 9px; border-radius:4px; background:color-mix(in srgb,var(--forest) 92%,transparent); color:var(--ivory); font-size:11px; line-height:1.4; box-shadow:0 3px 12px color-mix(in srgb,var(--forest) 27%,transparent); }
.road-confidence-note[hidden],.road-analysis[hidden],.road-submission[hidden],.road-submission-actions button[hidden],.road-phase-card[hidden],.road-phase-progress[hidden] { display:none!important; }
.road-scene-workbench { position:relative; }
.road-phase-card { position:absolute; z-index:2; right:14px; top:14px; width:min(330px,47%); padding:10px 13px; color:var(--ivory); background:color-mix(in srgb,var(--forest) 95%,transparent); border:1px solid color-mix(in srgb,var(--forest-line) 53%,transparent); border-radius:7px; box-shadow:0 8px 26px color-mix(in srgb,var(--forest) 27%,transparent); }
.road-phase-kicker { display:block; color:var(--mist); font-size:10px; line-height:1.4; letter-spacing:.08em; font-weight:700; margin-bottom:5px; }
.road-phase-card h4 { font-size:18px; line-height:1.25; letter-spacing:-.025em; margin:0 0 5px; }
.road-phase-card > p { margin:0; font-size:12px; line-height:1.55; color:var(--mist); }
.road-phase-card .road-phase-notice { margin-top:8px; color:var(--clay); font-size:10px; }
.road-phase-card[data-mode='report'] .road-phase-description { display:none; }
.road-phase-action { padding:0; margin-top:4px; min-height:28px; border:0; border-bottom:1px solid var(--forest-line); background:none; color:var(--citron); font-size:12px; line-height:1.5; text-align:left; }
.road-phase-progress { display:flex; gap:7px; margin:12px 0 0; }
.road-phase-progress span { flex:1; min-width:0; padding-top:7px; border-top:3px solid var(--forest-line); color:var(--mist); font-size:10px; line-height:1.4; }
.road-phase-progress .is-reached { border-color:var(--citron); color:var(--citron); }
.road-analysis { margin-top:22px; border:1px solid var(--forest-line); border-radius:9px; padding:18px; background:linear-gradient(140deg,var(--forest-panel),var(--forest)); }
.road-analysis-header,.road-submission-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.road-analysis-kicker { color:var(--mist); font-size:10px; line-height:1.5; font-weight:700; letter-spacing:.1em; }
.road-example-pill { display:inline-block; flex-shrink:0; padding:4px 7px; border:1px solid var(--forest-line); border-radius:20px; color:var(--ivory); font-size:10px; line-height:1.4; white-space:nowrap; }
.road-analysis h4 { margin:0 0 18px; color:var(--ivory); font-size:18px; line-height:1.35; letter-spacing:-.02em; }
.road-score-label { color:var(--mist); font-size:12px; line-height:1.5; margin:0 0 8px; }
.road-disclosure { font-size:12px; line-height:1.65; }
.road-confidence-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:20px; }
.road-confidence-item { min-width:0; padding:10px 7px; border:1px solid var(--forest-line); background:var(--forest); border-radius:5px; }
.road-confidence-item.is-selected { border-color:var(--confidence-color); }
.road-confidence-item > span:first-child { display:block; color:var(--mist); font-size:11px; line-height:1.5; min-height:33px; }
.road-confidence-item strong { display:block; font-size:23px; line-height:1.3; font-weight:600; color:var(--confidence-color); }
.road-confidence-meter { display:block; height:4px; overflow:hidden; margin-top:10px; border-radius:3px; background:var(--forest-panel); }
.road-confidence-meter i { display:block; width:var(--confidence-value); height:100%; border-radius:3px; background:var(--confidence-color); transform-origin:left; }
.road-entering .road-confidence-meter i { animation:road-confidence-fill .65s ease-out both; }
.road-ai-draft { border-top:1px solid var(--forest-line); padding-top:17px; }
.road-ai-draft h5 { color:var(--ivory); font-size:16px; line-height:1.45; font-weight:600; margin:0 0 10px; }
.road-ai-draft p { color:var(--mist); font-size:14px; line-height:1.7; margin:0; }
.road-draft-label { display:block; color:var(--mist); font-size:12px; line-height:1.5; margin-bottom:8px; }
.road-draft-input { display:block; width:100%; min-height:180px; resize:vertical; padding:12px; border:1px solid var(--forest-line); border-radius:5px; background:var(--forest); color:var(--ivory); font:14px/1.65 Arial,sans-serif; }
.road-draft-input:focus-visible { outline:2px solid var(--citron); outline-offset:3px; }
.road-ai-draft .road-draft-edit-note { margin:8px 0 14px; color:var(--mist); font-size:11px; line-height:1.6; }
.road-draft-approval { display:flex; align-items:flex-start; gap:10px; color:var(--ivory); font-size:13px; line-height:1.6; padding:10px 0; cursor:pointer; }
.road-draft-approval input { width:18px; height:18px; margin:1px 0 0; flex-shrink:0; accent-color:var(--citron); }
.road-approval-status { color:var(--clay); font-size:12px; line-height:1.6; margin:0 0 12px; }
.road-approval-status.is-approved { color:var(--citron); }
.road-review-draft-link { margin-bottom:14px; min-height:42px; font-size:12px; white-space:normal; }
.road-review-draft-link[hidden] { display:none!important; }
.road-report-draft-details { border-block:1px solid var(--forest-line); padding:12px 0; margin-bottom:20px; }
.road-report-draft-details summary { color:var(--mist); font-size:12px; line-height:1.6; cursor:pointer; }
.road-report-draft-details p { color:var(--mist); font-size:13px; line-height:1.65; margin:12px 0 0; overflow-wrap:anywhere; }
.road-submit-example:disabled,.road-next-button:disabled { opacity:.45; cursor:default; }
.road-review-flag { padding:12px 13px; margin:17px 0 0; border-left:3px solid var(--clay); background:color-mix(in srgb,var(--clay) 5%,transparent); color:var(--ivory); font-size:13px; line-height:1.65; }
.road-analysis-note { color:var(--mist); font-size:11px; line-height:1.65; margin:15px 0 0; }
.road-submission { width:100%; margin-top:22px; padding:18px; background:var(--forest); border:1px solid var(--forest-line); border-radius:9px; }
.road-fixmystreet-mark { margin:0; font:700 22px/1.3 Arial,sans-serif; color:var(--ivory); letter-spacing:-.045em; }
.road-demonstration-notice { padding:10px 12px; color:var(--clay); background:color-mix(in srgb,var(--clay) 6%,transparent); border:1px solid color-mix(in srgb,var(--clay) 45%,transparent); border-radius:4px; font-size:13px; line-height:1.5; margin:0 0 17px; }
.road-prepared-report { display:flex; align-items:center; gap:11px; padding-bottom:17px; margin-bottom:18px; border-bottom:1px solid var(--forest-line); }
.road-report-thumbnail { width:68px; height:61px; border-radius:5px; object-fit:cover; object-position:left bottom; flex-shrink:0; }
.road-report-fields { min-width:0; }
.road-report-fields strong { display:block; color:var(--ivory); font-size:13px; line-height:1.45; margin-bottom:6px; }
.road-report-fields span { display:block; color:var(--mist); font-size:11px; line-height:1.6; }
.road-submission-steps { list-style:none; margin:0; padding:0; }
.road-submission-steps li { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:11px; padding:0 0 20px; opacity:1; transition:opacity .25s; }
.road-submission-steps li:not(:last-child)::after { content:''; position:absolute; left:13px; top:31px; width:1px; height:calc(100% - 33px); background:var(--forest-raised); }
.road-submission-steps li[data-state='current'],.road-submission-steps li[data-state='complete'] { opacity:1; }
.road-submission-number { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1px solid var(--forest-line); color:var(--mist); font-size:12px; background:var(--forest-panel); }
.road-submission-steps li[data-state='current'] .road-submission-number { border-color:var(--citron); color:var(--citron); }
.road-submission-steps li[data-state='complete'] .road-submission-number { border-color:var(--citron); color:var(--ink); background:var(--citron); }
.road-submission-steps strong { display:block; padding-top:2px; font-size:14px; line-height:1.5; color:var(--ivory); }
.road-submission-steps p { color:var(--mist); font-size:12px; line-height:1.65; margin:5px 0 0; }
.road-submission-message { border-top:1px solid var(--forest-line); padding-top:14px; min-height:81px; color:var(--mist); font-size:13px; line-height:1.65; margin:0 0 16px; }
.road-submission[data-stage='2'] .road-submission-message { color:var(--citron); }
.road-submission-actions { display:flex; flex-wrap:wrap; gap:8px; }
.road-submission-actions .button { min-height:44px; padding:12px 14px; font-size:12px; white-space:normal; text-align:left; line-height:1.5; }
.road-submission-actions .road-image-button { min-height:42px; font-size:12px; white-space:normal; text-align:left; }
.road-service-link { display:inline-block; color:var(--citron); font-size:12px; line-height:1.6; margin-top:16px; text-underline-offset:3px; }
.road-entering { animation:road-review-entry .32s ease-out both; }
.road-submission.is-paused * { animation-play-state:paused; }
.motion-paused #demo-potholes * { animation:none!important; transition:none!important; }
@keyframes road-review-entry { from { opacity:.4; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes road-confidence-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(min-width:761px) { .road-visual { align-self:start; position:sticky; top:18px; } }
@media(max-width:460px) {
  .road-confidence-note { font-size:9px; padding:4px 6px; bottom:7px; left:7px; }
  .road-detection-label { font-size:9px; letter-spacing:.02em; ;color:var(--ink)}
  .road-analysis,.road-submission { padding:14px; }
  .road-analysis-header,.road-submission-header { flex-wrap:wrap; gap:7px; }
  .road-analysis h4 { font-size:17px; }
  .road-confidence-grid { gap:5px; }
  .road-confidence-item { padding:8px 5px; }
  .road-confidence-item strong { font-size:21px; }
  .road-prepared-report { align-items:flex-start; }
  .road-report-thumbnail { width:54px; height:54px; }
  .road-submission-actions { flex-direction:column; align-items:stretch; }
}
@media(max-width:1100px) { .road-phase-card { position:static; width:100%; margin-top:12px; padding:14px; } }
@media(max-width:760px) { .road-phase-card { position:static; width:100%; margin-top:12px; padding:16px; }.road-phase-card>p{font-size:14px}.road-phase-card .road-phase-notice{font-size:12px;color:var(--clay)}.road-phase-action{font-size:13px;min-height:40px}.road-phase-progress span{font-size:11px}.road-phase-card h4{font-size:20px} }
@media(prefers-reduced-motion:reduce) { #demo-potholes * { animation:none!important; transition:none!important; } }

.road-photo-close:hover{border-color:var(--jade);background:var(--sage-soft)}