.damage-completion { position: relative; min-width: 0; width: 100%; }
.damage-field-frame{overflow:hidden;border:1px solid #cbd5e1;border-radius:1rem;margin-top:.5rem;background:#fff}
.damage-field-frame:focus-within{border-color:var(--field-focus,#008774);box-shadow:0 0 0 3px rgba(0,167,127,.15)}
html[data-ui-theme=dark] .damage-field-frame{border-color:#59676d;background:#1b2225}
#main_form .damage-field-frame .damage-viewport input{border:0;border-radius:0;outline:none;box-shadow:none;margin-top:0}
.damage-completion .damage-field-frame .damage-scroll{flex:1;min-width:0;width:0;margin:0;height:12px;min-height:12px}
.damage-scroll-controls{display:flex;align-items:center;gap:2px;padding:0 4px}
.damage-scroll-controls[hidden]{display:none}
.damage-completion .damage-scroll-arrow{display:grid;place-items:center;flex:0 0 16px;width:16px;height:16px;min-height:16px;padding:0;border:0;border-radius:3px;background:transparent;color:#888;cursor:pointer;touch-action:none}
.damage-scroll-arrow svg{width:12px;height:12px;stroke-width:3}
.damage-scroll-arrow:focus-visible{outline:2px solid #008774;outline-offset:-2px}
@media(any-pointer:coarse){.damage-completion .damage-scroll-arrow{flex-basis:24px;width:24px;height:24px;min-height:24px}}
.damage-field-frame .damage-scroll::-webkit-slider-runnable-track{background:#e0e0e0}
.damage-field-frame .damage-scroll::-webkit-slider-thumb{background:#888}
.damage-field-frame .damage-scroll::-moz-range-track{background:#e0e0e0}
.damage-field-frame .damage-scroll::-moz-range-thumb{background:#888}
.damage-completion input { position: relative; width: 100%; }
.damage-viewport { width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:3px; }
.damage-line { position:relative; min-width:100%; }
.damage-viewport::-webkit-scrollbar { display:none; }
.damage-completion .damage-scroll { display:block; appearance:none; width:100%; height:16px; min-height:16px; padding:0; margin:0; border:0; border-radius:0; background:transparent; cursor:ew-resize; touch-action:pan-y; }
.damage-scroll::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:#dce8e5; }
.damage-scroll::-moz-range-track { height:6px; border-radius:3px; background:#dce8e5; }
.damage-scroll::-webkit-slider-thumb { appearance:none; width:var(--damage-thumb-width,100%); height:6px; border:0; border-radius:3px; background:#769f99; }
.damage-scroll::-moz-range-thumb { width:var(--damage-thumb-width,100%); height:6px; border:0; border-radius:3px; background:#769f99; }
.damage-completion .damage-scroll:disabled { opacity:.65; cursor:default; }
.damage-completion .damage-scroll[hidden] { display:none; }
.damage-scroll:focus-visible { outline:2px solid #008774; outline-offset:1px; }
#main_form .damage-viewport input:is(:hover,:focus) { box-shadow:none; }
#main_form .damage-viewport input:focus { outline:none; }
html[data-ui-theme=dark] .damage-scroll::-webkit-slider-runnable-track { background:#354844; }
html[data-ui-theme=dark] .damage-scroll::-moz-range-track { background:#354844; }
.damage-viewport input { scroll-margin-inline:20px; }
.damage-ghost { position: absolute; inset: 0; pointer-events: none; overflow: hidden; white-space: pre; color: #728398; box-sizing: border-box; border: solid transparent; }
.damage-options { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 6px 18px #1726301a; max-height: 240px; overflow-y: auto; }
.damage-options[hidden] { display: none; }
.damage-options button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: #172630; font: inherit; font-size: 14px; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.damage-options button[aria-selected="true"] { background: #e5f6f1; color: #006e5c; }
#addDamageBtn:disabled, #addOtherDamageBtn:disabled { opacity: .5; cursor: not-allowed; }

:is(#geolocationConsent button, #detectLocationBtn, #addDamageBtn, #addOtherDamageBtn, .damage-remove, .damage-options button) {
  cursor:pointer;
  user-select:none;
  transition:background-color 140ms ease, border-color 140ms ease, transform 120ms ease;
}
:is(#geolocationConsent button, #detectLocationBtn, #addDamageBtn, #addOtherDamageBtn, .damage-remove, .damage-options button):focus-visible {
  outline:2px solid #008774;
  outline-offset:3px;
}
@media (hover:hover) and (pointer:fine) {
  :is(#geolocationConsent button, #detectLocationBtn, #addDamageBtn, #addOtherDamageBtn, .damage-remove, .damage-options button):not(:disabled):hover {
    background:#e5f3ef;
    color:#163d35;
    border-color:#008774;
  }
  #geolocationConsent .signature-action-primary:not(:disabled):hover { background:#006c5d; color:#fff; }
  html[data-ui-theme=dark] :is(#geolocationConsent button, #detectLocationBtn, #addDamageBtn, #addOtherDamageBtn, .damage-remove, .damage-options button):not(:disabled):hover {
    background:#354740;
    color:#f2f7f5;
    border-color:#70c4ad;
  }
}
:is(#geolocationConsent button, #detectLocationBtn, #addDamageBtn, #addOtherDamageBtn, .damage-remove, .damage-options button):not(:disabled):active { transform:scale(.97); }
html[data-ui-theme=dark] .damage-options { background:#222a2d; border-color:#536568; }
html[data-ui-theme=dark] #geolocationConsent button:not(.signature-action-primary) { background:#293438; color:#edf1f2; border-color:#536568; }
html[data-ui-theme=dark] .damage-options button { color:#edf1f2; }
html[data-ui-theme=dark] .damage-options button[aria-selected=true] { background:#31483f; color:#b5e9d9; }
@media (prefers-reduced-motion:reduce) {
  :is(#geolocationConsent button, #detectLocationBtn, #addDamageBtn, #addOtherDamageBtn, .damage-remove, .damage-options button) { transition:none; }
  :is(#geolocationConsent button, #detectLocationBtn, #addDamageBtn, #addOtherDamageBtn, .damage-remove, .damage-options button):active { transform:none; }
}