/* ADS-aligned reusable controls. */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-075);
  min-height:32px;padding:0 var(--ds-space-150);border:1px solid transparent;
  border-radius:var(--ds-border-radius-050);background:var(--ds-background-neutral);
  color:var(--ds-text);font:var(--ds-font-body);font-weight:var(--ds-font-weight-medium);text-align:center;text-decoration:none;white-space:nowrap;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.button:hover{background:var(--ds-background-neutral-hovered);text-decoration:none}
.button:active{background:var(--ds-background-neutral-pressed)}
.button.primary{background:var(--ds-background-brand-bold);color:var(--ds-text-inverse)}
.button.primary:hover{background:var(--ds-background-brand-bold-hovered)}
.button.primary:active{background:var(--ds-background-brand-bold-pressed)}
.button.danger{background:var(--ds-background-danger-bold);color:var(--ds-text-inverse-static)}
.button.danger:hover{background:var(--ds-background-danger-bold-hovered)}
.button.danger:active{background:var(--ds-background-danger-bold-pressed)}
.button.danger-soft{background:var(--ds-background-danger);color:var(--ds-text-danger);border-color:var(--ds-border-danger)}
.button.quiet{background:transparent;color:var(--ds-text-subtle)}
.button.quiet:hover{background:var(--ds-background-neutral-subtle-hovered)}
.button.quiet:active{background:var(--ds-background-neutral-subtle-pressed)}
.button.compact{min-height:32px;padding:0 var(--ds-space-100);font:var(--ds-font-body);font-weight:var(--ds-font-weight-medium)}
.button.wide{width:100%;margin-top:var(--ds-space-100)}
.button-row,.movement-controls{display:flex;align-items:center;gap:var(--ds-space-100);flex-wrap:wrap}

.icon-button{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border:0;border-radius:var(--ds-border-radius-050);background:transparent;color:var(--ds-icon);
  flex:0 0 auto;transition:background-color .12s ease,color .12s ease;
}
.icon-button:hover{background:var(--ds-background-neutral-hovered);color:var(--ds-text)}
.icon-button:active{background:var(--ds-background-neutral-pressed)}
.icon-button[aria-pressed="true"]{background:var(--ds-background-selected);color:var(--ds-text-brand)}
.text-button{display:inline-flex;align-items:center;gap:var(--ds-space-050);min-height:32px;padding:0;border:0;background:transparent;color:var(--ds-text-brand);font:var(--ds-font-body);font-weight:var(--ds-font-weight-medium)}
.text-button:hover{text-decoration:underline;text-underline-offset:2px}
.danger-text{color:var(--ds-text-danger)}

.brand{display:flex;align-items:center;gap:var(--ds-space-100);min-width:0;color:var(--ds-text);text-decoration:none}
.brand:hover{text-decoration:none}
.brand strong{display:block;min-width:0;font:var(--ds-font-body);font-weight:var(--ds-font-weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;margin-top:var(--ds-space-025);font:var(--ds-font-body-small);color:var(--ds-text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ds-border-radius-100);background:var(--ds-background-brand-bold);color:var(--ds-text-inverse-static);font:var(--ds-font-body-small);font-weight:var(--ds-font-weight-bold);letter-spacing:0;flex:0 0 auto}

.lozenge{
  display:inline-flex;align-items:center;min-height:20px;padding:0 var(--ds-space-050);border-radius:var(--ds-border-radius-050);
  background:var(--ds-background-neutral);color:var(--ds-text-subtle);font:var(--ds-font-body-small);font-weight:var(--ds-font-weight-bold);white-space:nowrap
}
.tag{
  display:inline-flex;align-items:center;min-height:24px;padding:0 var(--ds-space-100);border-radius:var(--ds-border-radius-050);
  background:var(--ds-background-neutral);color:var(--ds-text);font:var(--ds-font-body-small);font-weight:var(--ds-font-weight-medium);white-space:nowrap
}
.lozenge-critical,.lozenge-rejected{background:var(--ds-background-danger);color:var(--ds-text-danger)}
.lozenge-warning,.lozenge-high,.lozenge-watch{background:var(--ds-background-warning);color:var(--ds-text-warning)}
.lozenge-out_of_service{background:var(--ds-background-neutral);color:var(--ds-text-subtle)}
.lozenge-active,.lozenge-responding,.lozenge-open,.lozenge-available,.lozenge-verified{background:var(--ds-background-success);color:var(--ds-text-success)}
.lozenge-dispatched,.lozenge-on_scene,.lozenge-information{background:var(--ds-background-information);color:var(--ds-text-information)}
.lozenge-returning,.lozenge-resolved,.lozenge-closed,.lozenge-potential{background:var(--ds-background-neutral);color:var(--ds-text-subtle)}
.tag.tag-sample{background:var(--ds-background-discovery);color:var(--ds-text-discovery)}

.field{display:grid;gap:var(--ds-space-050);margin-bottom:var(--ds-space-150);font:var(--ds-font-body);font-weight:var(--ds-font-weight-medium);color:var(--ds-text)}
.field small{font-weight:var(--ds-font-weight-regular)}
.checkbox-field{display:flex;align-items:flex-start;gap:var(--ds-space-100);margin:var(--ds-space-100) 0 var(--ds-space-150);font:var(--ds-font-body);color:var(--ds-text)}
.checkbox-field input{margin-top:1px}

.notice,.form-error,.flash{padding:var(--ds-space-150);border-radius:var(--ds-border-radius-050);font:var(--ds-font-body)}
.notice{background:var(--ds-background-neutral);color:var(--ds-text-subtle)}
.form-error,.flash.error{background:var(--ds-background-danger);color:var(--ds-text-danger)}
.flash.success{background:var(--ds-background-success);color:var(--ds-text-success)}
.flash{display:flex;align-items:flex-start;gap:var(--ds-space-100);margin-bottom:var(--ds-space-200);border-left:3px solid currentColor}

/* Display preferences use a standard popup surface. */
.display-tools{position:fixed;right:var(--ds-space-200);bottom:var(--ds-space-200);z-index:240}
.display-tools-button{min-height:32px;padding:0 var(--ds-space-150);border:0;border-radius:var(--ds-border-radius-050);background:var(--ds-background-neutral);color:var(--ds-text);font:var(--ds-font-body);font-weight:var(--ds-font-weight-medium);box-shadow:var(--ds-shadow-raised)}
.display-tools-button:hover{background:var(--ds-background-neutral-hovered)}
.display-tools-panel{position:absolute;right:0;bottom:44px;width:272px;padding:var(--ds-space-200);border:1px solid var(--ds-border);border-radius:var(--ds-border-radius-200);background:var(--ds-surface-overlay);box-shadow:var(--ds-shadow-overlay)}
.display-tools-panel>strong{display:block;margin-bottom:var(--ds-space-100);font:var(--ds-font-heading-xsmall)}
.display-tools-panel label{display:grid;gap:var(--ds-space-050);margin-top:var(--ds-space-150);font:var(--ds-font-body);color:var(--ds-text-subtle)}
.display-tools-panel .checkbox-field{display:flex}

/* ADS-style switch/toggle. */
.ds-toggle{position:relative;display:inline-flex;align-items:center;min-width:40px;min-height:32px;cursor:pointer}
.ds-toggle input{position:absolute;width:1px;height:1px;min-height:1px;opacity:0;pointer-events:none}
.ds-toggle-track{position:relative;width:32px;height:20px;border-radius:var(--ds-border-radius-circle);background:var(--ds-background-neutral-pressed);border:1px solid var(--ds-border);transition:background-color .12s ease}
.ds-toggle-thumb{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:var(--ds-border-radius-circle);background:var(--ds-surface);box-shadow:var(--ds-shadow-raised);transition:transform .12s ease}
.ds-toggle input:checked+.ds-toggle-track{background:var(--ds-background-brand-bold)}
.ds-toggle input:checked+.ds-toggle-track .ds-toggle-thumb{transform:translateX(12px)}
.ds-toggle input:focus-visible+.ds-toggle-track{outline:2px solid var(--ds-border-focused);outline-offset:2px}
.button[aria-pressed="true"]{background:var(--ds-background-selected);color:var(--ds-text-brand)}

.section-message{display:flex;align-items:flex-start;gap:var(--ds-space-100);margin-top:var(--ds-space-200);padding:var(--ds-space-150);border-radius:var(--ds-border-radius-050);background:var(--ds-background-neutral);color:var(--ds-text-subtle)}
.section-message>.icon{flex:0 0 auto;margin-top:var(--ds-space-025);color:var(--ds-icon)}
.section-message strong{display:block;color:var(--ds-text)}
.section-message p{margin:var(--ds-space-050) 0 0}
.section-message.information{background:var(--ds-background-information)}
.section-message.information>.icon{color:var(--ds-icon-information)}
.settings-stack{display:grid;gap:var(--ds-space-200);max-width:920px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-300)}
.setting-copy{min-width:0;flex:1}
.setting-title-row{display:flex;align-items:center;gap:var(--ds-space-100);flex-wrap:wrap}
.setting-title-row h2{margin:0}
.setting-copy>p{margin:var(--ds-space-050) 0 0;color:var(--ds-text-subtle)}
.toggle-form{flex:0 0 auto}
.definition-list{margin:0}
.definition-list>div{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-200);padding:var(--ds-space-100) 0;border-top:1px solid var(--ds-border)}
.definition-list>div:first-child{border-top:0}
.definition-list dt{color:var(--ds-text-subtle)}
.definition-list dd{margin:0;font-weight:var(--ds-font-weight-semibold)}

/* Compact icon-triggered display preferences. */
.display-tools-button{width:36px;height:36px;min-height:36px;padding:0;border:1px solid var(--ds-border);border-radius:var(--ds-border-radius-100);background:var(--ds-surface);color:var(--ds-icon);box-shadow:none}
.display-tools-button:hover{background:var(--ds-background-neutral);color:var(--ds-text)}
.display-tools-button .icon{width:17px;height:17px}
.display-tools-panel{width:292px;padding:var(--ds-space-150);border-radius:var(--ds-border-radius-200);background:var(--ds-surface-overlay)}
.display-tools-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-100);margin-bottom:var(--ds-space-050)}
.display-tools-heading>strong{font:var(--ds-font-heading-xsmall)}
.display-tools-panel>strong{display:none}

/* Display settings are a real anchored surface, never an unbacked menu over page text. */
.display-tools-panel{
  position:fixed!important;
  top:calc(var(--app-banner-height) + var(--app-topnav-height) + var(--ds-space-100))!important;
  right:var(--ds-space-200)!important;
  bottom:auto!important;
  left:auto!important;
  z-index:520!important;
  width:min(304px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - var(--app-banner-height) - var(--app-topnav-height) - 32px);
  overflow:auto;
  box-sizing:border-box;
  padding:var(--ds-space-200)!important;
  border:1px solid var(--ds-border-bold);
  border-radius:var(--ds-border-radius-200);
  background:var(--ds-surface)!important;
  color:var(--ds-text);
  box-shadow:var(--ds-shadow-overlay);
  isolation:isolate;
}
.display-tools-panel label{margin-top:var(--ds-space-150);color:var(--ds-text);font-weight:var(--ds-font-weight-medium)}
.display-tools-panel select{width:100%;min-width:0;background:var(--ds-surface);color:var(--ds-text)}
.display-tools-heading{margin-bottom:var(--ds-space-100)}
@media (max-width:560px){
  .display-tools-panel{top:auto!important;right:var(--ds-space-100)!important;bottom:max(var(--ds-space-100),env(safe-area-inset-bottom))!important;left:var(--ds-space-100)!important;width:auto!important;max-height:70dvh}
}