/* ===================== CADabra tokens (round 4) =====================
   Light set on :root/body; dark set on body.calcite-mode-dark, which is the class EXB 1.20 puts on <body> when the
   built-in Theme Mode widget (widget_112, "תצוגה" in "כלים מתקדמים") switches mode (it also swaps --sys-color-* and
   loads the JS API dark/main.css). Every colour below goes through these tokens, so the toggle drives the whole skin. */
:root, body {
  --cad-teal:#0d8478; --cad-teal-500:#14a394; --cad-deep:#11544d; --cad-ink:#13302c; --cad-muted:#566c68;
  --cad-accent-text:#0b6f65;             /* teal used as text on light surfaces: 5.92:1 on #fff */
  --cad-placeholder:#5f726e;             /* 5.07:1 on #fff */
  --cad-bg:#f4faf9; --cad-surface:#ffffff; --cad-line:#dcebe8; --cad-input-line:#7a9590;
  --cad-glass:rgba(255,255,255,.92); --cad-glass-strong:rgba(255,255,255,.96); --cad-tint:#e9f5f3; --cad-tint-strong:#d3ece8;
  --cad-focus:#0d8478; --cad-halo:#ffffff; --cad-sidebar:#00695f; --cad-on-accent:#ffffff;
  --cad-grad:linear-gradient(135deg,#0d8478,#14a394);
  /* AA gradient for white text: #0d8478 4.58:1, #0b6f65 6.04:1 (the #14a394 end of --cad-grad is only 3.14:1) */
  --cad-grad-aa:linear-gradient(135deg,#0d8478,#0b6f65);
  --cad-dark:linear-gradient(180deg,#11443f,#0c302c);
  --cad-card-border:rgba(19,48,44,.07);
  --cad-shadow:0 1px 3px rgba(16,40,36,.05), 0 12px 32px -14px rgba(16,40,36,.16);
  --cad-shadow-sm:0 1px 3px rgba(16,40,36,.06), 0 8px 20px -12px rgba(16,40,36,.28);
  --cad-radius:16px; --cad-radius-sm:10px;
  --cad-switch-off:#7a9590; }
body.calcite-mode-dark {
  --cad-teal:#4fc9b8; --cad-teal-500:#3bb3a3; --cad-deep:#9be3d8; --cad-ink:#e3f0ed; --cad-muted:#a9bfba;
  --cad-accent-text:#6fd9ca; --cad-placeholder:#97aea9;
  --cad-bg:#1d302c; --cad-surface:#172824; --cad-line:#2f4843; --cad-input-line:#5a7a73;
  --cad-glass:rgba(20,35,32,.94); --cad-glass-strong:rgba(20,35,32,.97); --cad-tint:#21403a; --cad-tint-strong:#285049;
  --cad-focus:#6fd9ca; --cad-halo:#0d1a18; --cad-sidebar:#0f2c28; --cad-on-accent:#ffffff;
  --cad-card-border:rgba(255,255,255,.08);
  --cad-shadow:0 1px 3px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.6);
  --cad-shadow-sm:0 1px 3px rgba(0,0,0,.35), 0 8px 20px -12px rgba(0,0,0,.55);
  --cad-switch-off:#5a7a73;
  /* EXB surfaces (panels, layer list, legend, dialogs) use a teal-tinted dark instead of the neutral grey defaults */
  --sys-color-surface-paper:#172824; --sys-color-surface-background:#0f1d1b; --sys-color-surface-overlay:#1d302c;
  --sys-color-surface-paper-text:#e3f0ed; --sys-color-surface-background-text:#e3f0ed; --sys-color-surface-overlay-text:#e3f0ed;
  --sys-color-divider-primary:#46655f; --sys-color-divider-secondary:#2f4843;
  --calcite-color-background:#0f1d1b; --calcite-color-foreground-1:#172824; --calcite-color-foreground-2:#1d302c; --calcite-color-foreground-3:#21403a;
  --calcite-color-border-1:#46655f; --calcite-color-border-2:#3a5751; --calcite-color-border-3:#2f4843;
  --calcite-color-text-1:#e3f0ed; --calcite-color-text-2:#c3d6d2; --calcite-color-text-3:#a9bfba;
  /* calcite accents follow the CADabra dark palette */
  --calcite-color-brand:#4fc9b8; --calcite-color-brand-hover:#6fd9ca; --calcite-color-brand-press:#9be3d8;
  --calcite-color-focus:#6fd9ca;
  color-scheme: dark; }
body, .jimu-widget, .jimu-btn, input, select, textarea { font-family: Heebo, Inter, 'Segoe UI', Arial, sans-serif !important; }
/* floating panels: CADabra glass cards */
.jimu-widget-controller .widget-controller-popper, .jimu-popper .popper-box, .panel-container, .jimu-panel {
  border-radius: var(--cad-radius) !important; border: 1px solid var(--cad-card-border) !important;
  box-shadow: var(--cad-shadow) !important; }
.jimu-btn.btn-primary { background-image: var(--cad-grad-aa) !important; border-color: transparent !important; color: #fff !important; }
.jimu-btn.btn-primary:hover { filter: brightness(.94); }
/* outlined (secondary) jimu buttons: teal outline instead of the theme default; tertiary/text buttons are left alone */
.jimu-btn.jimu-button-outlined:not(.btn-primary) { border-color: var(--cad-teal) !important; }
/* jimu links (e.g. the print template link had a blue underline) */
.jimu-link.jimu-link-link:not(.jimu-nav-link) { color: var(--cad-accent-text); border-bottom-color: var(--cad-teal) !important; }
/* calcite controls (switches, checkboxes, tabs, segmented controls) inside EXB/JS API widgets */
calcite-switch { --calcite-switch-background-color-checked: var(--cad-teal); --calcite-color-brand: var(--cad-teal); }
calcite-checkbox, calcite-tab-title, calcite-tab-nav, calcite-segmented-control, calcite-radio-button, calcite-slider,
calcite-action, calcite-button, calcite-chip, calcite-list-item, calcite-tree-item, calcite-combobox, calcite-input, calcite-select {
  --calcite-color-brand: var(--cad-teal); --calcite-color-brand-hover: var(--cad-deep); --calcite-color-brand-press: var(--cad-deep);
  --calcite-color-focus: var(--cad-focus); }
:root { --calcite-color-brand:#0d8478; --calcite-color-brand-hover:#11544d; --calcite-color-brand-press:#11544d; }
/* jimu switch/checkbox/radio (EXB's own controls) */
.jimu-switch.checked, .jimu-switch input:checked + span, .form-check-input:checked { background-color: var(--cad-teal) !important; border-color: var(--cad-teal) !important; }
.jimu-checkbox.checked, .jimu-checkbox[aria-checked="true"] { color: var(--cad-teal) !important; }

/* ArcGIS sign-in: CADabra split screen */
.esri-identity-modal calcite-dialog, .esri-identity-modal.calcite-mode-light calcite-dialog {
  --calcite-color-brand:#0d8478; --calcite-color-brand-hover:#11544d; --calcite-color-brand-press:#11544d;
  --calcite-color-focus:#0d8478; --calcite-font-family: Inter, Heebo, 'Segoe UI', Arial, sans-serif;
  --calcite-corner-radius:14px; --calcite-dialog-border-color:#dcebe8;
  --calcite-dialog-scrim-background-color:transparent; --calcite-scrim-background:transparent; }
.esri-identity-modal::before { content:""; position:fixed; inset:0; z-index:0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), transparent 50%) ,
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(160deg, #155a52 0%, #11443f 45%, #0c302c 100%); }
.esri-identity-modal::after { content:"HAMMER"; position:fixed; top:11vh; left:0; right:0; text-align:center;
  font:700 34px/1 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing:.06em; color:#fff; z-index:10; pointer-events:none; }
.esri-identity-modal form { position:relative; z-index:2; }

/* controller tool labels: dark-teal halo so they read over the aerial imagery */
.widget-controller .avatar-label,
.widget-controller .widget-card-name,
.avatar-card .avatar-label {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 3px #0c302c, 0 0 5px #0c302c, 0 0 9px #0c302c, 0 0 14px rgba(12,48,44,.85),
    1.5px 1.5px 0 #0c302c, -1.5px -1.5px 0 #0c302c, 1.5px -1.5px 0 #0c302c, -1.5px 1.5px 0 #0c302c, 0 1.5px 0 #0c302c, 0 -1.5px 0 #0c302c, 1.5px 0 0 #0c302c, -1.5px 0 0 #0c302c !important;
}
/* controller tool buttons follow the AA gradient in both modes (dark mode would otherwise use the light #76d7c9) */
.widget-controller .avatar-card .jimu-btn.btn-primary, .avatar-card .avatar-button.btn-primary { background-image: var(--cad-grad-aa) !important; background-color: #0d8478 !important; }

/* CAD import (DXF Uploader): blue -> CADabra teal, glass follows the mode */
.jimu-widget .dxf-uploader-widget, .dxf-uploader-widget {
  --dxf-button-blue: #0d8478 !important;
  --dxf-button-blue-hover: #0b6f65 !important;
  --dxf-drop-active: rgba(13,132,120,.22) !important;
  --dxf-text-dark: var(--cad-ink) !important; --dxf-text-light: var(--cad-muted) !important;
}
.dxf-uploader-widget .jimu-btn:hover { background: #0b6f65 !important; }
.dxf-uploader-widget .dxf-help-icon { background: rgba(13,132,120,.12) !important; color: var(--cad-teal) !important; }
.dxf-uploader-widget .dxf-help-icon:hover { background: rgba(13,132,120,.25) !important; }
.dxf-uploader-widget .dxf-help-panel { border-color: rgba(13,132,120,.18) !important; }
.dxf-uploader-widget .dxf-help-section code { background: rgba(13,132,120,.08) !important; }
.dxf-uploader-widget .dxf-list::-webkit-scrollbar-thumb,
.dxf-uploader-widget .dxf-help-panel::-webkit-scrollbar-thumb { background: rgba(13,132,120,.35) !important; }
.dxf-uploader-widget input:focus, .dxf-uploader-widget select.dxf-select:focus { box-shadow: 0 0 0 2px rgba(13,132,120,.3) !important; }
.dxf-uploader-widget .dxf-spinner { border-color: rgba(13,132,120,.25) !important; border-top-color: var(--cad-teal) !important; }
body.calcite-mode-dark .dxf-uploader-widget {
  --dxf-bg: var(--cad-glass) !important; --dxf-header-bg: var(--cad-bg) !important; --dxf-drop-bg: rgba(255,255,255,.04) !important;
  --dxf-item-bg: var(--cad-surface) !important; --dxf-item-border: var(--cad-line) !important; --dxf-border: var(--cad-line) !important;
  color: var(--cad-ink); }

/* ===================== Round 3: polish for round-2 additions ===================== */

/* --- Keyboard focus: teal ring + halo, readable on light/dark panels and on the teal sidebar --- */
:root:root { --calcite-color-focus:#0d8478; }
html body :is(button, a, input, select, textarea, summary, [role="button"], [role="tab"], [role="listitem"], [role="option"], [role="checkbox"], [tabindex="0"]):focus-visible,
html body.jimu-keyboard-nav :focus-visible {
  outline: 2px solid var(--cad-focus) !important; outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cad-halo); }
/* view navigator sits on the dark-teal sidebar: a teal ring would vanish there, use white */
html body .widget-view-navigation .jimu-nav-link:focus-visible,
html body .widget-view-navigation [role="tab"]:focus-visible { outline: 2px solid #ffffff !important; outline-offset: -3px; }
/* the jimu checkbox hides its native input; ring the visible box instead */
html body .jimu-checkbox:has(input:focus-visible),
html body .input-wrapper:has(> input:focus-visible) { outline: 2px solid var(--cad-focus); outline-offset: 2px; border-radius: 4px; }

/* --- Splash dialog (dialog_splash) --- */
.app-dialog-wrap-dialog_splash .modal-content {
  position: relative; overflow: hidden; border-radius: 18px !important; background-color: var(--cad-surface) !important;
  box-shadow: 0 2px 6px rgba(16,40,36,.08), 0 24px 60px -20px rgba(16,40,36,.45); }
.app-dialog-wrap-dialog_splash .modal-content::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cad-grad); z-index: 2; }
.app-dialog-wrap-dialog_splash .modal-body, .app-dialog-wrap-dialog_splash .modal-body * { border-color: var(--cad-line); }
.app-dialog-wrap-dialog_splash .rich-displayer { color: var(--cad-ink); font-size: 15px; line-height: 1.65; }
.app-dialog-wrap-dialog_splash .rich-displayer p { margin: 0 0 6px; }
.app-dialog-wrap-dialog_splash .rich-displayer p:first-child { margin-bottom: 8px; }
.app-dialog-wrap-dialog_splash .rich-displayer p:first-child span { color: var(--cad-deep); letter-spacing: -.01em; line-height: 1.25; }
.app-dialog-wrap-dialog_splash .rich-displayer p:nth-child(2) { color: var(--cad-muted); }
.app-dialog-wrap-dialog_splash .rich-displayer p:nth-child(2) strong { color: var(--cad-ink); }
.app-dialog-wrap-dialog_splash .rich-displayer p:nth-child(3) {
  margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--cad-line); color: var(--cad-deep); }
.app-dialog-wrap-dialog_splash .rich-displayer ul { margin: 0; padding-inline-start: 20px; padding-inline-end: 0; }
.app-dialog-wrap-dialog_splash .rich-displayer li { margin: 0 0 4px; }
.app-dialog-wrap-dialog_splash .rich-displayer li::marker { color: var(--cad-teal); }
.app-dialog-wrap-dialog_splash .modal-footer {
  background: var(--cad-bg); border-top: 1px solid var(--cad-line); padding: 12px 20px; gap: 12px; align-items: center;
  overflow: visible !important; /* EXB sets auto; sub-pixel rounding then shows a stray scrollbar */ }
.app-dialog-wrap-dialog_splash .modal-footer label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; color: var(--cad-ink); font-size: 14px !important; }
.app-dialog-wrap-dialog_splash .modal-footer .jimu-checkbox { margin: 0 !important; color: var(--cad-teal); }
.app-dialog-wrap-dialog_splash .modal-footer .jimu-btn.btn-primary {
  min-height: 40px; padding: 8px 26px; border-radius: 10px; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 16px -8px rgba(13,132,120,.7); }
.app-dialog-wrap-dialog_splash .modal-footer .jimu-btn.btn-primary:hover { filter: brightness(.94); }
.app-dialog-wrap-dialog_splash .modal-footer .jimu-btn.btn-primary:focus-visible { box-shadow: 0 0 0 2px var(--cad-halo); }

/* --- Bookmarks (Bookmark widget, LIST template): one card, items and the add row as one list --- */
.widget-bookmark .bookmark-container {
  background: var(--cad-glass); border: 1px solid var(--cad-card-border); border-radius: var(--cad-radius); padding: 12px;
  box-shadow: var(--cad-shadow); display: flex; flex-direction: column; gap: 6px; align-content: flex-start;
  max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(13,132,120,.4) transparent; }
.widget-bookmark .bookmark-container::before {
  content: "סימניות"; display: block; padding: 0 4px 6px; margin-bottom: 2px; border-bottom: 1px solid var(--cad-line);
  font: 700 15px/1.4 Heebo, Inter, sans-serif; color: var(--cad-deep); }
.widget-bookmark .bookmark-list-col {
  background: var(--cad-surface) !important; border: 1px solid var(--cad-line) !important; border-radius: 12px !important;
  min-height: 44px; align-items: center; padding: 0 12px !important; margin: 0 !important; width: 100% !important;
  box-shadow: 0 1px 2px rgba(16,40,36,.05); cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s; }
.widget-bookmark .bookmark-list-col:hover { background: var(--cad-tint) !important; border-color: var(--cad-teal) !important;
  box-shadow: 0 4px 12px -6px rgba(13,132,120,.45); }
.widget-bookmark .bookmark-list-col:active { background: var(--cad-tint-strong) !important; }
.widget-bookmark .bookmark-list-col svg { color: var(--cad-teal); fill: currentColor; flex: none; }
.widget-bookmark .bookmark-list-title {
  color: var(--cad-ink) !important; font-size: 15px; font-weight: 500; text-align: start; margin: 0 10px 0 0 !important; }
.widget-bookmark .bookmark-runtimeSeparator { display: none !important; }
/* "+" add row: same row shape as the items, dashed teal, with a text label */
.widget-bookmark .list-add {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 8px; width: 100% !important; margin: 4px 0 0 !important;
  border: 1.5px dashed var(--cad-teal) !important; border-radius: 12px !important; background: var(--cad-bg) !important;
  color: var(--cad-accent-text) !important; min-height: 44px; cursor: pointer; transition: background-color .15s; }
.widget-bookmark .list-add::after { content: "הוספת סימנייה"; font: 600 14px/1 Heebo, Inter, sans-serif; color: var(--cad-accent-text); }
.widget-bookmark .list-add .gallery-add-icon { width: auto !important; height: auto !important; display: inline-flex; align-items: center;
  position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 !important; }
.widget-bookmark .list-add svg { color: var(--cad-accent-text); fill: currentColor; width: 16px !important; height: 16px !important; margin: 0 !important; }
.widget-bookmark .list-add:hover { background: var(--cad-tint) !important; border-style: solid !important; }
.widget-bookmark .vertical-border { display: none; }

/* --- User guide (Text widget widget_213 in the guide view) --- */
[data-widgetid="widget_213"] .jimu-scrollable-scroll-container {
  scrollbar-width: thin !important; scrollbar-color: rgba(13,132,120,.45) transparent; }
[data-widgetid="widget_213"] .rich-displayer {
  padding: 8px 18px 24px 14px; color: var(--cad-ink); font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
[data-widgetid="widget_213"] .rich-displayer p { margin-bottom: 6px; }
[data-widgetid="widget_213"] .rich-displayer p:first-child span { color: var(--cad-deep); line-height: 1.3; }
[data-widgetid="widget_213"] .rich-displayer p:has(> span[style*="17px"]) {
  margin-top: 18px !important; padding-bottom: 4px; border-bottom: 1px solid var(--cad-line); }
[data-widgetid="widget_213"] .rich-displayer p > span[style*="17px"] { color: var(--cad-deep); }
[data-widgetid="widget_213"] .rich-displayer :is(ol, ul) { margin: 4px 0 8px; padding-inline-start: 22px; padding-inline-end: 0; }
[data-widgetid="widget_213"] .rich-displayer li { margin-bottom: 4px; }
[data-widgetid="widget_213"] .rich-displayer li::marker { color: var(--cad-teal); font-weight: 700; }
[data-widgetid="widget_213"] .rich-displayer a { color: var(--cad-accent-text); text-decoration: underline; }
/* app URL in the version line: keep it LTR and on one line inside the RTL paragraph */
[data-widgetid="widget_213"] .rich-displayer p:nth-child(2) > strong:first-of-type {
  unicode-bidi: isolate; direction: ltr; white-space: nowrap; }
/* text widgets in panels ("עוד" view widget_232, guide) follow the mode */
.jimu-widget.widget-text .rich-displayer { color: var(--cad-ink); }
.jimu-widget.widget-text .rich-displayer a { color: var(--cad-accent-text); }

/* --- Legend panel (classic esri-legend inside the EXB Legend widget) --- */
.jimu-widget .widget-legend .esri-legend { background: transparent; color: var(--cad-ink); padding: 6px 8px; }
.jimu-widget .widget-legend .esri-legend__service { padding: 8px 6px 10px; border-bottom: 1px solid var(--cad-line); }
.jimu-widget .widget-legend .esri-legend h3.esri-legend__service-label.esri-widget__heading {
  color: var(--cad-deep); font: 700 15px/1.35 Heebo, Inter, sans-serif; margin: 0 0 8px; }
.jimu-widget .widget-legend .esri-legend__layer-caption,
.jimu-widget .widget-legend .esri-legend__layer-label { color: var(--cad-muted); font-size: 13px; font-weight: 500; }
.jimu-widget .widget-legend .esri-legend__layer-cell--info { color: var(--cad-ink); font-size: 13.5px; }

/* --- Bottom status bar: coordinates, scale bar, overview map --- */
.jimu-widget-coordinates .coordinates-widget-container {
  background: var(--cad-glass) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--cad-card-border); border-radius: 10px; padding: 0 4px;
  box-shadow: var(--cad-shadow-sm);
  color: var(--cad-ink); align-items: center; }
.jimu-widget-coordinates .coordinates-info {
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cad-ink); direction: ltr; }
.jimu-widget-coordinates .jimu-btn { color: var(--cad-deep); }
.exbmap-ui-tool-shell-ScaleBar .scalebar-map-tool {
  background: var(--cad-glass); border: 1px solid var(--cad-card-border); border-radius: 8px; padding: 2px 8px;
  box-shadow: 0 1px 3px rgba(16,40,36,.06); color: var(--cad-ink); }
body.calcite-mode-dark .exbmap-ui-tool-shell-ScaleBar .esri-scale-bar__label { color: var(--cad-ink); }
body.calcite-mode-dark .exbmap-ui-tool-shell-ScaleBar .esri-scale-bar__line,
body.calcite-mode-dark .exbmap-ui-tool-shell-ScaleBar .esri-scale-bar__bar { border-color: var(--cad-ink); background-color: transparent; }
.exbmap-ui-group-bottom-line1 { padding-bottom: 6px; padding-inline: 6px; align-items: flex-end !important; }
.attribution-map-tool.esri-attribution { border-radius: 6px 0 0 0; background: var(--cad-glass); color: var(--cad-muted); }
/* overview map: lift above the scale bar and give it the glass-card frame */
.overview-map-group .overview-map-tool.bottom-left-corner .overview-window {
  left: 8px; bottom: 34px; border: 1px solid var(--cad-card-border) !important; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,40,36,.08), 0 12px 28px -12px rgba(16,40,36,.35); }
.overview-map-tool .overview-focus { background: rgba(13,132,120,.22) !important; border: 2px solid #0d8478 !important; }
/* toggle arrow follows the lifted window; 24px hit target instead of 14px */
.overview-map-group .overview-map-tool.bottom-left-corner .overview-map-arrow-icon-btn {
  left: 9px; bottom: 35px; width: 24px !important; height: 24px !important; border-radius: 0 10px 0 11px;
  background: var(--cad-glass) !important; color: var(--cad-deep); }

/* --- EXB notifications (e.g. "Restore experience state" from allowRestoreState) ---
   In RTL the slide-in transform leaves the card ~380px off the left edge; pin it in place. */
html[dir="rtl"] .jimu-notification > .jimu-surface { transform: none !important; max-width: calc(100vw - 40px); }
.jimu-notification > .jimu-surface { border: 1px solid var(--cad-card-border); border-radius: 12px; }

/* --- Narrow screens (< 768px) --- */
@media (max-width: 767.98px) {
  .app-dialog-wrap-dialog_splash .rich-displayer { font-size: 13.5px; }
  .app-dialog-wrap-dialog_splash .modal-footer { flex-wrap: wrap; padding: 10px 14px; }
  .app-dialog-wrap-dialog_splash .modal-footer .jimu-btn.btn-primary { min-height: 44px; }
  .overview-map-group .overview-map-tool.bottom-left-corner .overview-window { transform: scale(.7); transform-origin: left bottom; }
  .jimu-widget-coordinates .coordinates-info { font-size: 12px; }
  .widget-bookmark .bookmark-list-col, .widget-bookmark .list-add { min-height: 44px; }
}

/* Round 3 (lead): the map/table sidebar (widget_97) keeps the collapsed attribute table 250px below the viewport.
   Focusing a control near the bottom (scale field, search) made the browser scroll that hidden overflow into view,
   pushing the map up. clip (unlike hidden) also blocks programmatic/focus scrolling. */
[data-widgetid="widget_97"] .widget-sidebar-layout > .flex-column { overflow: clip !important; }
/* Round 3 (lead): visible-layers-count sits above the layer card on top of the map - give it the same glass card. */
[data-widgetid="widget_221"] { background: rgba(255,255,255,.94); border: 1px solid #dcebe8; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(16,40,36,.06); color: #13302c; display: flex; align-items: center; padding: 0 10px; }
/* Round 3 (lead): phones (<768px) now get the desktop layout with the map (MEDIUM/SMALL layouts dropped in config).
   Keep the bottom of the map usable: hide the ITM bar and the overview map there; zoom/home/locate, previous/next extent
   and the scale bar stay. Known limit: the main side panel (widget_1, 505px in config) is wider than a phone; a CSS cap breaks its inner
   layout, so it needs a config/layout change in a later round. */
@media (max-width: 767.98px) {
  [data-widgetid="widget_212"], .exbmap-ui-group-overviewMapGroup { display: none !important; }
}
/* The scale field sits right of the centred ITM bar (fixed-layout "left" is mirrored in RTL); below ~1000px it would
   leave the map, so it is hidden there - the scale bar remains. */
@media (max-width: 999.98px) { [data-widgetid="widget_220"] { display: none !important; } }

/* ===================== Round 4 (design): Lior's review items 2,3,4,6,8 + light/dark ===================== */

/* --- Item 8: sidebar and panels - softer, more modern corners --- */
/* the sidebar is the page background showing right of the map; round the map's inner (sidebar-facing) edge */
.page { background-color: var(--cad-sidebar) !important; }
[data-widgetid="widget_98"].widget-renderer { border-radius: 0 22px 22px 0 !important; }
html[dir="rtl"] [data-widgetid="widget_98"].widget-renderer { border-radius: 0 22px 22px 0 !important; }
/* nav items: rounded pills inset from the sidebar edges instead of full-bleed rectangles */
.widget-view-navigation .jimu-nav-link { border-radius: 12px !important; margin-inline: 6px !important; width: auto !important;
  transition: background-color .15s; }
.widget-view-navigation .jimu-nav-link:hover:not(.active) { background-color: rgba(255,255,255,.12) !important; }
.widget-view-navigation .jimu-nav-link.active { background-color: rgba(255,255,255,.18) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.widget-view-navigation .jimu-nav-link, .widget-view-navigation .jimu-nav-link .jimu-icon { color: #ffffff !important; }
/* text-label panel (first panel of sidebar widget_92, buttons widget_102...234): config paints it with
   --sys-color-primary-dark, which EXB turns into light #59bbae in dark mode (white text 2.3:1). Pin it to the sidebar token. */
[data-widgetid="widget_92"] .side-collapsable > .side { background-color: var(--cad-sidebar) !important; }
[data-widgetid="widget_92"] .side-collapsable .jimu-btn {
  color: #ffffff !important; border: 1px solid rgba(255,255,255,.28) !important; background-color: transparent !important;
  border-radius: 10px !important; font-weight: 500; }
[data-widgetid="widget_92"] .side-collapsable .jimu-btn:hover { background-color: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.55) !important; }
[data-widgetid="widget_92"] .side-collapsable .jimu-btn:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 1px; box-shadow: none; }
/* panel views: every card uses the same 16px radius */
.layout-item.is-widget > .widget-renderer[data-widgetid] .jimu-widget.widget-layers,
.widget-renderer[data-widgetid] > .widget-content > .jimu-widget.widget-legend { border-radius: var(--cad-radius); }

/* sidebar header logo (widget_120, HAMMER CITY, next to the ">" toggle widget_91): fit inside its 100x50 slot with
   breathing room instead of touching the toggle; the box size itself is config (see report) */
[data-widgetid="widget_120"] .widget-image { display: flex; align-items: center; justify-content: center; padding: 6px 10px 6px 6px; box-sizing: border-box; }
[data-widgetid="widget_120"] .widget-image > div { display: flex; align-items: center; justify-content: center; width: 100% !important; height: 100% !important; }
[data-widgetid="widget_120"] img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 40px !important;
  object-fit: contain !important; object-position: center !important; }

/* --- Brand font: 'Hammer' (fonts.css, linked by index.html) for headings and branding; running text stays Heebo --- */
:root { --cad-font-brand: 'Hammer', Heebo, Inter, 'Segoe UI', Arial, sans-serif; }
html body .app-dialog-wrap-dialog_splash .rich-displayer p:first-child, html body .app-dialog-wrap-dialog_splash .rich-displayer p:first-child * ,
html body [data-widgetid="widget_213"] .rich-displayer p:first-child, html body [data-widgetid="widget_213"] .rich-displayer p:first-child *,
html body [data-widgetid="widget_213"] .rich-displayer p > span[style*="17px"],
html body .jimu-widget.widget-text .rich-displayer :is(h1, h2, h3, h4),
html body .jimu-widget.widget-text .rich-displayer p > strong:only-child,
html body .jimu-widget.widget-text .rich-displayer p > span[style*="font-size"]:only-child,
html body .widget-bookmark .bookmark-container::before,
html body .jimu-widget.cascade-search .cs-title,
html body .jimu-widget.widget-info-widget .feature-title,
html body .jimu-widget .widget-legend .esri-legend h3.esri-legend__service-label.esri-widget__heading,
html body .print-widget-container .fp-title {
  font-family: var(--cad-font-brand) !important; letter-spacing: 0; }

/* --- Item 3: info widget (custom infoWidget, widget_131) --- */
/* fits its content, grows with data up to the panel height, then the details area scrolls */
.jimu-widget.widget-info-widget { padding: 0 8px; pointer-events: none; display: flex; flex-direction: column; }
.jimu-widget.widget-info-widget > * { pointer-events: auto; }
.jimu-widget.widget-info-widget .card-shell.identify-results-widget {
  height: auto !important; max-height: 100% !important; flex: 0 1 auto;
  background: var(--cad-glass) !important; border: 1px solid var(--cad-card-border); border-radius: var(--cad-radius) !important;
  box-shadow: var(--cad-shadow) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--cad-ink); }
.jimu-widget.widget-info-widget .widget-scroll { flex: 0 1 auto !important; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(13,132,120,.4) transparent; }
.jimu-widget.widget-info-widget .card-inner.feature-wrap { flex: 0 1 auto !important; min-height: 0;
  background: var(--cad-surface) !important; border: 1px solid var(--cad-line) !important; border-radius: 12px !important; }
.jimu-widget.widget-info-widget .details-scroll { flex: 0 1 auto !important; min-height: 0; overflow-y: auto; }
/* header (coordinate copy) */
.jimu-widget.widget-info-widget .coord-copy-btn { color: var(--cad-ink); font-size: 12.5px; }
.jimu-widget.widget-info-widget .coord-copy-btn + .coord-copy-btn { border-right-color: var(--cad-line); }
.jimu-widget.widget-info-widget .coord-copy-btn:hover:not(:disabled) { color: var(--cad-accent-text); }
.jimu-widget.widget-info-widget .coord-copy-system { color: var(--cad-muted); }
.jimu-widget.widget-info-widget .coord-copy-values { color: var(--cad-ink); }
.jimu-widget.widget-info-widget .coord-copy-icon { color: var(--cad-teal); }
.jimu-widget.widget-info-widget .info-help-btn { color: var(--cad-teal); border-color: var(--cad-line); background: var(--cad-surface); border-radius: 8px; }
/* layer picker */
.jimu-widget.widget-info-widget .layer-label, .jimu-widget.widget-info-widget .feature-title { color: var(--cad-deep); font-size: 14px; }
.jimu-widget.widget-info-widget .layer-dropdown { background: var(--cad-surface); color: var(--cad-ink); border-color: var(--cad-input-line); }
.jimu-widget.widget-info-widget .layer-dropdown:focus { border-color: var(--cad-teal); box-shadow: 0 0 0 3px rgba(13,132,120,.2); outline: none; }
.jimu-widget.widget-info-widget .chip-count { background: var(--cad-tint); border-color: var(--cad-line); color: var(--cad-deep); }
.jimu-widget.widget-info-widget .chip-count.ok { background: var(--cad-teal); border-color: var(--cad-teal); color: var(--cad-halo); }
/* pager */
.jimu-widget.widget-info-widget .pager { color: var(--cad-muted); }
.jimu-widget.widget-info-widget .icon-btn { background: var(--cad-bg); color: var(--cad-deep); border-radius: 8px; }
.jimu-widget.widget-info-widget .icon-btn:hover:not(:disabled) { background: var(--cad-tint); color: var(--cad-accent-text); }
/* tabs: teal underline instead of blue */
.jimu-widget.widget-info-widget .tabs { border-bottom-color: var(--cad-line); }
.jimu-widget.widget-info-widget .tab-link { color: var(--cad-muted); font-size: 13.5px; font-weight: 600; }
.jimu-widget.widget-info-widget .tab-link:hover { color: var(--cad-ink); }
.jimu-widget.widget-info-widget .tab-link.active { color: var(--cad-accent-text); font-weight: 700; }
.jimu-widget.widget-info-widget .tab-link.active::after { background: var(--cad-teal); height: 3px; }
.jimu-widget.widget-info-widget .no-info { color: var(--cad-muted); font-size: 13.5px; }
/* attributes */
.jimu-widget.widget-info-widget .details-content { background: var(--cad-bg); border-color: var(--cad-line); }
.jimu-widget.widget-info-widget .attribute-row, .jimu-widget.widget-info-widget .info-table tr { border-bottom-color: var(--cad-line); }
.jimu-widget.widget-info-widget :is(.pager-text, .more-attrs) { color: var(--cad-muted); }
.jimu-widget.widget-info-widget .show-all-fields { color: var(--cad-accent-text); border-color: var(--cad-teal); background: var(--cad-surface); border-radius: 8px; }
.jimu-widget.widget-info-widget .show-all-fields:hover { background: var(--cad-tint); }
.jimu-widget.widget-info-widget .widget-title-pill { background: var(--cad-glass); color: var(--cad-ink); border-color: var(--cad-card-border); }
.jimu-widget.widget-info-widget .info-side-panel .panel-container { background: var(--cad-surface); color: var(--cad-ink); }
.jimu-widget.widget-info-widget .attribute-key { color: var(--cad-muted); font-size: 13px; }
.jimu-widget.widget-info-widget .attribute-value { color: var(--cad-ink); font-size: 13px; }
.jimu-widget.widget-info-widget .details-layer-header { border-bottom-color: var(--cad-line); }
.jimu-widget.widget-info-widget :is(.details-layer-header, .intersect-layer-header) strong { color: var(--cad-deep); font-size: 13px; }
.jimu-widget.widget-info-widget .info-table tr:hover { background: var(--cad-tint); }
.jimu-widget.widget-info-widget .intersect-layer-group { background: var(--cad-surface); border-color: var(--cad-line); }
.jimu-widget.widget-info-widget .intersect-feature-item { background: var(--cad-bg); border-color: var(--cad-line); }
.jimu-widget.widget-info-widget .intersect-count { background: var(--cad-grad-aa); color: #fff; }
/* link buttons (אתר הנדסי, דף מידע, מנהל התכנון / מפות גוגל, תצוגת רחוב, ...) */
.jimu-widget.widget-info-widget .action-btn { font-size: 12.5px; font-weight: 600; border-radius: 10px; }
.jimu-widget.widget-info-widget .action-btn.primary-action {
  background: var(--cad-grad-aa); color: #fff; border: 1px solid transparent; box-shadow: 0 4px 12px -6px rgba(13,132,120,.6); }
.jimu-widget.widget-info-widget .action-btn.primary-action:hover { background: #0b6f65; color: #fff; }
.jimu-widget.widget-info-widget .action-btn.map-action {
  background: var(--cad-surface); color: var(--cad-accent-text); border: 1px solid var(--cad-teal); box-shadow: none; }
.jimu-widget.widget-info-widget .action-btn.map-action:hover { background: var(--cad-tint); border-color: var(--cad-teal); }
.jimu-widget.widget-info-widget .action-btn:focus-visible { outline: 2px solid var(--cad-focus) !important; outline-offset: 2px; }
/* disabled (nothing selected yet): quiet teal outline, still readable */
.jimu-widget.widget-info-widget .action-btn.is-disabled,
.jimu-widget.widget-info-widget .action-btn.is-disabled:hover,
.jimu-widget.widget-info-widget .action-btn.is-disabled:active {
  background: var(--cad-bg); color: var(--cad-muted); border: 1px dashed var(--cad-input-line); box-shadow: none; opacity: 1; }
.jimu-widget.widget-info-widget .footer-row .jimu-btn { background: var(--cad-grad-aa) !important; box-shadow: 0 4px 12px -6px rgba(13,132,120,.6) !important; }
.jimu-widget.widget-info-widget .footer-row .jimu-btn:hover { background: #0b6f65 !important; }
.jimu-widget.widget-info-widget .checkbox-line { color: var(--cad-ink); }
.jimu-widget.widget-info-widget .checkbox-line span { color: var(--cad-ink); font-size: 13px; }
.jimu-widget.widget-info-widget .checkbox-line .checkbox-visual { border-color: var(--cad-input-line); background: var(--cad-surface); width: 16px; height: 16px; flex-basis: 16px; }
.jimu-widget.widget-info-widget .checkbox-line input[type="checkbox"]:checked + .checkbox-visual { background: var(--cad-teal); border-color: var(--cad-teal); }
.jimu-widget.widget-info-widget .checkbox-line input[type="checkbox"]:focus-visible + .checkbox-visual { outline: 2px solid var(--cad-focus); }
.jimu-widget.widget-info-widget .widget-title-pill svg { color: var(--cad-teal); }
.jimu-widget.widget-info-widget a.attr-link, .jimu-widget.widget-info-widget .attribute-value a { color: var(--cad-accent-text); text-decoration: underline; }

/* --- Items 4 + 6: cascade search ("איתור", widget_200): CADabra tokens, larger and darker text --- */
html body .jimu-widget.cascade-search {
  --cs-accent: var(--cad-teal); --cs-accent-2: #0b6f65; --cs-ink: var(--cad-ink); --cs-muted: var(--cad-muted);
  --cs-line: var(--cad-line); --cs-soft: var(--cad-bg); font-size: 15px; }
/* the title row sits directly on the map: give it a glass pill so it reads on any basemap in both modes */
html body .jimu-widget.cascade-search .cs-top { background: var(--cad-glass); border: 1px solid var(--cad-card-border); border-radius: 12px; padding: 4px 6px 4px 12px; box-shadow: var(--cad-shadow-sm); }
html body .jimu-widget.cascade-search .cs-title { font-size: 14px; color: var(--cad-deep); letter-spacing: 0; }
html body .jimu-widget.cascade-search .cs-help-btn { background: var(--cad-surface); width: 28px; height: 28px; line-height: 26px; }
html body .jimu-widget.cascade-search .cs-help { font-size: 13.5px; color: var(--cad-ink); }
html body .jimu-widget.cascade-search .cs-segmented { border-radius: 14px; background: var(--cad-bg); }
html body .jimu-widget.cascade-search .cs-seg { font-size: 14.5px; color: var(--cad-ink); font-weight: 600; padding: 7px 12px; border-radius: 10px; }
html body .jimu-widget.cascade-search .cs-seg:hover { background: var(--cad-tint); color: var(--cad-ink); }
html body .jimu-widget.cascade-search .cs-seg.is-active { color: #fff; background: var(--cad-grad-aa); }
html body .jimu-widget.cascade-search .cs-card { background: var(--cad-glass); border-color: var(--cad-card-border); border-radius: var(--cad-radius); box-shadow: var(--cad-shadow); }
html body .jimu-widget.cascade-search .cs-label { font-size: 13.5px; color: var(--cad-deep); letter-spacing: 0; }
html body .jimu-widget.cascade-search .cs-input { height: 42px; font-size: 15px; background: var(--cad-surface); color: var(--cad-ink); border-color: var(--cad-input-line); }
html body .jimu-widget.cascade-search .cs-input::placeholder { color: var(--cad-placeholder); opacity: 1; }
html body .jimu-widget.cascade-search .cs-input:hover:not(:disabled) { border-color: var(--cad-teal); }
html body .jimu-widget.cascade-search .cs-input:focus { border-color: var(--cad-teal); box-shadow: 0 0 0 3px rgba(13,132,120,.22); }
html body .jimu-widget.cascade-search .cs-input:disabled, html body .jimu-widget.cascade-search .is-disabled .cs-input {
  background: var(--cad-bg); color: var(--cad-muted); border-color: var(--cad-line); }
html body .jimu-widget.cascade-search .cs-input:disabled::placeholder { color: var(--cad-muted); }
html body .jimu-widget.cascade-search .cs-clear { color: var(--cad-muted); width: 24px; height: 24px; line-height: 24px; }
html body .jimu-widget.cascade-search .cs-list { background: var(--cad-surface); border-color: var(--cad-line); font-size: 15px; }
html body .jimu-widget.cascade-search .cs-option.is-active { background: var(--cad-tint); }
html body .jimu-widget.cascade-search .cs-option.is-selected { color: var(--cad-accent-text); }
html body .jimu-widget.cascade-search .cs-footer, html body .jimu-widget.cascade-search .cs-switch { font-size: 14px; color: var(--cad-ink); }
html body .jimu-widget.cascade-search .cs-count, html body .jimu-widget.cascade-search .cs-note, html body .jimu-widget.cascade-search .cs-empty { font-size: 13.5px; color: var(--cad-muted); }
html body .jimu-widget.cascade-search .cs-switch-track { background: var(--cad-switch-off); width: 34px; height: 20px; }
html body .jimu-widget.cascade-search .cs-switch-track::after { width: 16px; height: 16px; }
html body .jimu-widget.cascade-search .cs-switch input:checked + .cs-switch-track { background: var(--cad-teal); }
html body .jimu-widget.cascade-search .cs-switch input:checked + .cs-switch-track::after { inset-inline-start: 16px; }
html body .jimu-widget.cascade-search .cs-switch input:focus-visible + .cs-switch-track { outline: 2px solid var(--cad-focus); outline-offset: 2px; }
html body .jimu-widget.cascade-search .cs-reset {
  background: var(--cad-surface); color: var(--cad-accent-text); border: 1px solid var(--cad-teal); border-radius: 9px;
  font-size: 13.5px; font-weight: 600; padding: 5px 14px; }
html body .jimu-widget.cascade-search .cs-reset:hover { background: var(--cad-tint); color: var(--cad-accent-text); }
body.calcite-mode-dark .jimu-widget.cascade-search .cs-error { color: #ffb4b4; background: rgba(229,72,77,.18); }

/* --- Item 4: CAD measure (same design family as cascade search) --- */
html body .jimu-widget .cad-measure, html body .cad-measure {
  --cm-accent: var(--cad-teal); --cm-accent-2: #0b6f65; --cm-ink: var(--cad-ink); --cm-muted: var(--cad-muted);
  --cm-line: var(--cad-line); --cm-soft: var(--cad-bg); }
html body .cad-measure .cm-card { background: var(--cad-glass); border-color: var(--cad-card-border); box-shadow: var(--cad-shadow); }
html body .cad-measure :is(.cm-btn, .cm-icon-btn) { background: var(--cad-surface); }
html body .cad-measure .cm-tool.is-active, html body .cad-measure .cm-primary { background: var(--cad-grad-aa); color: #fff; }
html body .cad-measure .cm-seg button.is-active { background: var(--cad-surface); color: var(--cad-accent-text); }
html body .cad-measure .cm-status.is-on { background: var(--cad-tint); border-color: var(--cad-line); }
html body .cad-measure .cm-switch-track { background: var(--cad-switch-off); }
html body .cad-measure .cm-swatch { border-color: var(--cad-surface); }

/* --- Item 4: Custom Coordinates (gc-*) blue -> teal; glass follows the mode --- */
html body .jimu-widget :is(.gc-wrapper, .gc-card), html body :is(.gc-wrapper, .gc-card) {
  --gc-blue: #0d8478; --gc-blue-hover: #0b6f65; --gc-text-dark: var(--cad-ink); --gc-text-light: var(--cad-muted); }
html body .gc-btn-primary { background: var(--cad-grad-aa) !important; color: #fff !important; box-shadow: 0 4px 12px -6px rgba(13,132,120,.6) !important; }
html body .gc-btn-primary:hover { background: #0b6f65 !important; }
html body .gc-segmented button.on { background: #0d8478; color: #fff; }
html body .gc-toggle-on { background: #0d8478 !important; border-color: #0b6f65 !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(13,132,120,.25) !important; }
/* a11y F4: any custom-widget tab links (Custom Coordinates / infoWidget builds): muted 5.6:1, active 6.0:1 (dark 7.9 / 9.1) */
html body .jimu-widget .tab-link { color: var(--cad-muted) !important; }
html body .jimu-widget .tab-link.active { color: var(--cad-accent-text) !important; border-color: var(--cad-accent-text) !important; }
html body .jimu-widget .gc-btn-primary { background: #0d8478 !important; border-color: #0d8478 !important; color: #fff !important; }
html body :is(.gc-input, .gc-select):focus { box-shadow: 0 0 0 3px rgba(13,132,120,.25); border-color: var(--cad-teal); }
html body .gc-history-item:hover { background: var(--cad-tint); }
html body .gc-wrapper::-webkit-scrollbar-thumb { background: rgba(13,132,120,.4); }
html body .gc-msg-info { background: var(--cad-tint); color: var(--cad-deep); }
body.calcite-mode-dark :is(.gc-wrapper, .gc-card) {
  --gc-bg: var(--cad-glass); --gc-header-bg: var(--cad-bg); --gc-border: var(--cad-line); --gc-drop-bg: rgba(255,255,255,.04);
  --gc-item-bg: var(--cad-surface); --gc-item-border: var(--cad-line); color: var(--cad-ink); }
body.calcite-mode-dark :is(.gc-input, .gc-select, .gc-help, .gc-preview, .gc-history-dropdown, .gc-segmented button, .gc-section-row, .gc-info-form, .gc-list-item, .gc-csv, .gc-toggle, .gc-btn:not(.gc-btn-primary), .gc-collapse-btn) {
  background: var(--cad-surface); color: var(--cad-ink); border-color: var(--cad-line); }

/* --- DXF Uploader inner fields in dark mode (hard-coded white 0.8 fills) --- */
body.calcite-mode-dark .dxf-uploader-widget :is(input, select, .form-control, .dxf-select) { background: var(--cad-surface) !important; color: var(--cad-ink) !important; border-color: var(--cad-input-line) !important; }
body.calcite-mode-dark .dxf-uploader-widget :is(.dxf-exclude-row, .dxf-help-panel, .dxf-list-item, .dxf-item) { background: var(--cad-bg) !important; color: var(--cad-ink) !important; }
body.calcite-mode-dark .dxf-uploader-widget ::placeholder { color: var(--cad-placeholder); }

/* --- Custom Print (widget_126, .print-widget-container): tabs teal, glass follows the mode --- */
html body .print-widget-container .jimu-nav-link { border-bottom-color: transparent !important; }
html body .print-widget-container .jimu-nav-link.active, html body .print-widget-container .jimu-nav-link.active * {
  color: var(--cad-accent-text) !important; border-bottom-color: var(--cad-teal) !important;
  -webkit-text-fill-color: var(--cad-accent-text); /* the widget's own .fp-body .nav-link.active !important colour wins the cascade */ }
html body .print-widget-container .fp-header button, html body .print-widget-container .fp-header button svg { color: var(--cad-ink); fill: currentColor; }
html body .jimu-btn.custom-print-btn, html body .custom-print-btn {
  background: var(--cad-grad-aa) !important; color: #fff !important; box-shadow: 0 4px 12px -6px rgba(13,132,120,.6) !important; }
html body .jimu-btn.custom-print-btn:hover, html body .custom-print-btn:hover { background: #0b6f65 !important; }
body.calcite-mode-dark .print-widget-container .floating-panel { background: var(--cad-glass) !important; border-color: var(--cad-line) !important; color: var(--cad-ink); }
body.calcite-mode-dark .print-widget-container .fp-header { background: var(--cad-bg) !important; border-color: var(--cad-line) !important; }
body.calcite-mode-dark .print-widget-container :is(.fp-title, .title, .text-truncate, .d-inline-block, label, .jimu-nav-link:not(.active)) { color: var(--cad-ink) !important; }
body.calcite-mode-dark .print-widget-container :is(input, select, textarea, .clean-input) { background: var(--cad-surface) !important; color: var(--cad-ink) !important; border-color: var(--cad-input-line) !important; }

/* --- scale-input (widget_220): focus ring and border follow the tokens --- */
.hgis-scale-input :is(.si-input, .si-select) { border-color: var(--cad-input-line) !important; background: var(--cad-surface) !important; color: var(--cad-ink) !important; border-radius: 8px !important; }
.hgis-scale-input :is(.si-input, .si-select):focus-visible { outline: 2px solid var(--cad-focus) !important; }
.hgis-scale-input, .hgis-scale-input label { color: var(--cad-ink); }
body.calcite-mode-dark .hgis-scale-input .si-error { color: #ffb4b4; }

/* --- visible-layers-count (widget_221, lead's card above): follow the mode --- */
[data-widgetid="widget_221"][data-widgetid] { background: var(--cad-glass-strong); border-color: var(--cad-line); color: var(--cad-ink); border-radius: 12px; }
[data-widgetid="widget_221"] * { color: inherit; }

/* --- Dark mode: EXB panels and widgets that keep light surfaces from the template --- */
body.calcite-mode-dark .jimu-widget-coordinates .coordinates-widget-container * { color: var(--cad-ink); }
body.calcite-mode-dark .attribution-map-tool.esri-attribution a { color: var(--cad-ink); }
body.calcite-mode-dark .overview-map-group .overview-map-tool .overview-map-arrow-icon-btn { color: var(--cad-ink); }
/* widget containers on the map that the template paints with a light/translucent fill */
body.calcite-mode-dark .widget-renderer[data-widgetid] > .widget-content > :is(.widget-layers, .widget-legend, .widget-basemap-gallery, .widget-select, .widget-print, .jimu-widget-print) {
  background-color: var(--cad-glass) !important; color: var(--cad-ink); }
body.calcite-mode-dark .widget-renderer[data-widgetid="widget_3"], body.calcite-mode-dark .widget-renderer[data-widgetid="widget_4"],
body.calcite-mode-dark .widget-renderer[data-widgetid="widget_5"], body.calcite-mode-dark .widget-renderer[data-widgetid="widget_96"],
body.calcite-mode-dark .widget-renderer[data-widgetid="widget_213"], body.calcite-mode-dark .widget-renderer[data-widgetid="widget_232"] {
  background-color: var(--cad-glass) !important; border-color: var(--cad-line) !important; }
/* EXB bakes the theme colour into emotion classes at render time (#313030 for "paper"); repaint with the teal-dark surface */
body.calcite-mode-dark .jimu-surface.jimu-surface-level-paper:not(.arcgis-map) { background-color: var(--cad-surface) !important; color: var(--cad-ink); }
body.calcite-mode-dark .jimu-surface.jimu-surface-level-overlay { background-color: var(--sys-color-surface-overlay) !important; color: var(--cad-ink); }
body.calcite-mode-dark .jimu-widget .esri-widget,body.calcite-mode-dark .jimu-widget .esri-legend { background-color: transparent; color: var(--cad-ink); }
/* map search box (widget_122) */
body.calcite-mode-dark .jimu-widget.widget-search .search-container, body.calcite-mode-dark [data-widgetid="widget_122"] .jimu-widget { color: var(--cad-ink); }
/* splash: EXB paints the dialog from --sys-color-surface-overlay; keep CADabra surfaces */
/* splash: its layout paints a white body from config, and the mode is not remembered across loads (EXB keeps it in
   runtime state only), so the splash always opens in light; keep it on the light token set even if dark is active. */
body.calcite-mode-dark .app-dialog-wrap-dialog_splash {
  --cad-teal:#0d8478; --cad-deep:#11544d; --cad-ink:#13302c; --cad-muted:#566c68; --cad-accent-text:#0b6f65;
  --cad-bg:#f4faf9; --cad-surface:#ffffff; --cad-line:#dcebe8; --cad-focus:#0d8478; --cad-halo:#ffffff; }
body.calcite-mode-dark .app-dialog-wrap-dialog_splash .modal-content { box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); }
body.calcite-mode-dark .app-dialog-wrap-dialog_splash .rich-displayer :is(span, strong, li)[style*="color"] { color: inherit !important; }
body.calcite-mode-dark [data-widgetid="widget_213"] .rich-displayer [style*="color"],
body.calcite-mode-dark .jimu-widget.widget-text .rich-displayer [style*="color"] { color: inherit !important; }
body.calcite-mode-dark [data-widgetid="widget_213"] .rich-displayer p > span[style*="17px"],
body.calcite-mode-dark [data-widgetid="widget_213"] .rich-displayer p:first-child span { color: var(--cad-deep) !important; }
/* layer list: out-of-scale item labels use calcite text-3 (#8c8a8a) AND ~0.7 opacity (axe 3.25:1). With ink as text-3 the
   dimmed result is ~5.4:1 (light) / ~8:1 (dark); the opacity still marks the item as out of scale. */
.esri-layer-list calcite-list-item, .widget-layers calcite-list-item, .esri-layer-list {
  --calcite-color-text-3: var(--cad-ink); --calcite-list-label-text-color: var(--cad-ink); --calcite-list-description-text-color: var(--cad-muted); }
/* native radios/checkboxes (e.g. basemap list widget_222): the dark UA rendering is a dark-grey ring on a dark card;
   render them light so the control boundary stays visible, with the CADabra accent when checked */
input[type="radio"], input[type="checkbox"] { accent-color: #0d8478; }
body.calcite-mode-dark input[type="radio"], body.calcite-mode-dark input[type="checkbox"] { color-scheme: light; }
/* popups and dropdowns */
body.calcite-mode-dark .jimu-dropdown-menu, body.calcite-mode-dark .dropdown-menu { background: var(--cad-surface); color: var(--cad-ink); border-color: var(--cad-line); }

/* ===================== r4.1 ===================== */
/* sidebar header logo (widget_120): the 285x80 image has no transparent margin and is width-bound in the 100px column,
   so trim the side padding: 84x24 -> 94x26, keeping a 4px gap to the ">" toggle (widget_91). */
[data-widgetid="widget_120"] .widget-image { padding: 6px 4px 6px 2px; }

/* attribute table (widget_99) in dark mode: EXB 1.20's table CSS hard-codes neutral greys (#313030/#484646) and white
   rows; map them to the CADabra dark tokens. Light mode is untouched. */
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid {
  --vaadin-background-color: var(--cad-surface); --vaadin-text-color: var(--cad-ink);
  --vaadin-text-color-secondary: var(--cad-muted); --vaadin-border-color: var(--cad-input-line); --vaadin-border-color-secondary: var(--cad-line);
  --vaadin-background-container: var(--cad-bg); --vaadin-background-container-strong: var(--cad-tint);
  --_lumo-grid-border-color: var(--cad-line); --_focus-ring-color: var(--cad-focus); --vaadin-focus-ring-color: var(--cad-focus);
  background: var(--cad-surface); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid::part(row) { --sys-color-surface-paper: var(--cad-surface); background-color: var(--cad-surface); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid::part(header-cell),
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid::part(header-cell direction) {
  --calcite-color-foreground-1: var(--cad-bg); background-color: var(--cad-bg); color: var(--cad-ink); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid::part(body-cell) {
  --calcite-color-foreground-1: var(--cad-surface); --lumo-base-color: var(--cad-surface); background-color: var(--cad-surface); color: var(--cad-ink); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid::part(body-cell):hover { --calcite-color-foreground-2: var(--cad-tint); background-color: var(--cad-tint); color: var(--cad-ink); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid::part(selected-row-cell) { background-color: var(--cad-tint-strong); color: var(--cad-ink); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-widget vaadin-grid-cell-content:hover > a { color: var(--cad-accent-text); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-con .esri-feature-table__table-navigation {
  --calcite-color-foreground-1: var(--cad-bg); --calcite-action-background-color: var(--cad-bg); --calcite-action-text-color: var(--cad-ink); }
body.calcite-mode-dark [data-widgetid="widget_99"] :is(.nav-underline) { border-bottom-color: var(--cad-line); }
body.calcite-mode-dark [data-widgetid="widget_99"] .tool-dividing-line { background-color: var(--cad-line); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-header .top-button-list .jimu-btn.icon-btn {
  background-color: var(--cad-bg) !important; color: var(--cad-ink) !important; border-color: var(--cad-line) !important; }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-header .top-button-list .jimu-btn.icon-btn:hover:not(:disabled) { background-color: var(--cad-tint) !important; }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-header .top-button-list .jimu-btn.icon-btn:disabled { background-color: var(--cad-surface) !important; color: var(--cad-muted) !important; opacity: .6; }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-search .search-input .input-wrapper {
  background-color: var(--cad-surface) !important; color: var(--cad-ink) !important; border-color: var(--cad-input-line) !important; }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-search .search-input input::placeholder { color: var(--cad-placeholder); }
body.calcite-mode-dark [data-widgetid="widget_99"] .table-bottom-info .total-count-text { background-color: var(--cad-bg) !important; color: var(--cad-ink) !important; }
/* F7: the JS API sign-in sentence ends with the web map item id; show a generic line instead. Visual only: the original
   text stays in the DOM (the id is also in config.json, so this is presentation, not secrecy). */
.esri-identity-modal .esri-identity-modal__info { font-size: 0 !important; line-height: 0; }
.esri-identity-modal .esri-identity-modal__info::before { content: "יש להיכנס עם חשבון ArcGIS כדי לצפות במפה"; display: block;
  font-size: 14px; line-height: 1.5; }
/* N5: in the guide (widget_213) the brand font is for headings only (the 22px title and 17px section spans). Bold notes,
   the URL, the disclaimer and the "open the full guide" link go back to Heebo; unreadable on mobile in the display font. */
html body [data-widgetid="widget_213"] .rich-displayer :is(strong, a, p:first-child, p:first-child *):not(span[style*="font-size"]) {
  font-family: Heebo, Inter, 'Segoe UI', Arial, sans-serif !important; }
/* N1: CAD import hint in dark mode, #475569 on #1f2c29 was 1.91:1; #a9bcb8 gives 7.29:1. The hint has no class of its own. */
body.calcite-mode-dark .dxf-uploader-widget .dxf-dropzone > div:nth-child(2) { color: #a9bcb8 !important; }
/* a11y r4.1 retest P2: out-of-scale layer label in the layer list was 2.97:1 (light); calcite text-3 -> #5f6b69 (light).
   Dark keeps the token set above (#a9bfba). */
body:not(.calcite-mode-dark) :is(.esri-layer-list, arcgis-layer-list, calcite-list-item, calcite-list) { --calcite-color-text-3: #5f6b69; }
/* ===================== r4.3: 3D page buttons ===================== */
/* "3D" over the main map and "2D" on page_3d: same CADabra square as the r4.2 switch (52x52, gradient, white border). */
:is([data-widgetid="widget_3dbtn"], [data-widgetid="widget_2dbtn"]) .jimu-btn, :is([data-widgetid="widget_3dbtn"], [data-widgetid="widget_2dbtn"]) a.jimu-link {
  width: 52px !important; height: 52px !important; min-width: 0 !important; padding: 0 !important; border-radius: 14px !important;
  background-image: var(--cad-grad-aa) !important; background-color: #0d8478 !important; border: 2px solid #fff !important;
  box-shadow: var(--cad-shadow-sm) !important; color: #fff !important; font: 700 17px/1 var(--cad-font-brand) !important;
  display: flex !important; align-items: center; justify-content: center; letter-spacing: .02em; }
:is([data-widgetid="widget_3dbtn"], [data-widgetid="widget_2dbtn"]) .jimu-btn:hover { filter: brightness(.94); }
:is([data-widgetid="widget_3dbtn"], [data-widgetid="widget_2dbtn"]) .jimu-btn:focus-visible { outline: 3px solid var(--cad-focus) !important; outline-offset: 2px; }

/* ===================== r4.4 ===================== */
/* a11y P2: the out-of-scale layer row is dimmed by calcite-list-item's own opacity (--calcite-opacity-disabled 0.5,
   inside its shadow root): 2.98:1 light / 4.38:1 dark. 0.7 keeps it visibly dimmed at 5.28:1 / 7.16:1 (a11y-security). */
:is(.esri-layer-list, arcgis-layer-list) calcite-list-item { --calcite-opacity-disabled: 0.7; }

/* ===================== r4.6 ===================== */
/* icon bar (navigator widget_2): no scroll-arrow buttons any more (config scrollable=false), so short screens get a
   plain vertical scroll instead; the item box never changes size between default / hover / active. */
[data-widgetid="widget_2"] .widget-view-navigation .jimu-nav-vertical { max-height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
[data-widgetid="widget_2"] .jimu-nav-item > .jimu-button { height: 32px !important; min-height: 32px; transition: background-color .15s ease; }
/* label column (widget_92): the frame around each label at ~80% of the column, centred, instead of edge to edge */
[data-widgetid="widget_92"] .side-collapsable .jimu-btn { width: 80% !important; margin-inline: auto !important; display: flex !important; justify-content: center; }
/* r4.6b (Lior 21.10): on hover the glyph grows, the button around it does not - transform only, no layout change */
[data-widgetid="widget_2"] .jimu-nav-item > .jimu-button .jimu-icon-img { transition: transform .15s ease; transform-origin: center; }
[data-widgetid="widget_2"] .jimu-nav-item > .jimu-button:hover .jimu-icon-img,
[data-widgetid="widget_2"] .jimu-nav-item > .jimu-button:focus-visible .jimu-icon-img { transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { [data-widgetid="widget_2"] .jimu-nav-item > .jimu-button .jimu-icon-img { transition: none; } }

/* ===================== r4.7 ===================== */
/* #1 drawing tray (Draw widget_108 in the advanced-tools controller): large labelled tools from hc-draw.js; the
   Sketch create actions they replace are hidden (the "…" overflow menu holds only circle / text, both on the grid). */
.jimu-draw-tool .hc-draw-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.jimu-draw-tool .hc-draw-big__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px;
  border-radius: 10px; border: 1px solid var(--cad-line); background: var(--cad-surface); color: var(--cad-deep);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.jimu-draw-tool .hc-draw-big__btn:hover { border-color: var(--cad-teal); background: var(--cad-tint); }
.jimu-draw-tool .hc-draw-big__btn[aria-pressed="true"] { border-color: var(--cad-teal); background: var(--cad-teal); color: var(--cad-halo); }
.jimu-draw-tool .hc-draw-big__btn:focus-visible { outline: 2px solid var(--cad-teal); outline-offset: 2px; }
.jimu-draw-tool .hc-draw-big__btn.is-text { border-width: 2px; border-color: var(--cad-teal); font-size: 14px; }
.jimu-draw-tool .hc-draw-big__btn:disabled { opacity: .45; cursor: default; }
/* Sketch moves the active create tool between its toolbar and its "…" menu, so hide every create action wherever it is,
   and any menu that holds one (the selection-tools menu, with marquee / lasso, stays). */
.jimu-draw-tool.hc-draw-enhanced calcite-action[icon="pin"],
.jimu-draw-tool.hc-draw-enhanced calcite-action[icon="line"],
.jimu-draw-tool.hc-draw-enhanced calcite-action[icon="polygon"],
.jimu-draw-tool.hc-draw-enhanced calcite-action[icon="rectangle"],
.jimu-draw-tool.hc-draw-enhanced calcite-action[icon="circle"],
.jimu-draw-tool.hc-draw-enhanced calcite-action[icon="text"] { display: none !important; }
.jimu-draw-tool.hc-draw-enhanced calcite-action-menu:has(> calcite-action[icon="pin"]),
.jimu-draw-tool.hc-draw-enhanced calcite-action-menu:has(> calcite-action[icon="line"]),
.jimu-draw-tool.hc-draw-enhanced calcite-action-menu:has(> calcite-action[icon="polygon"]),
.jimu-draw-tool.hc-draw-enhanced calcite-action-menu:has(> calcite-action[icon="rectangle"]),
.jimu-draw-tool.hc-draw-enhanced calcite-action-menu:has(> calcite-action[icon="circle"]),
.jimu-draw-tool.hc-draw-enhanced calcite-action-menu:has(> calcite-action[icon="text"]) { display: none !important; }
.jimu-draw-tool.hc-draw-enhanced calcite-action { --calcite-action-indicator-color: var(--cad-teal); }

/* ===================== r4.6c (0.4 findings on r4.6) ===================== */
/* M: the active icon's pill alone was 1.48:1 against the bar (3:1 needed, WCAG 1.4.11): keep the pill, add a white
   inner ring, 6.59:1 light / 14.88:1 dark. */
.widget-view-navigation .jimu-nav-link.active { box-shadow: inset 0 0 0 2px #fff !important; }
/* L: on short screens, a shade at the edge of the icon list while more icons are hidden there (hc-sidebar.js) */
[data-widgetid="widget_2"] .widget-view-navigation .jimu-nav-vertical.hc-more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
[data-widgetid="widget_2"] .widget-view-navigation .jimu-nav-vertical.hc-more-above { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 28px), transparent); }
[data-widgetid="widget_2"] .widget-view-navigation .jimu-nav-vertical.hc-more-above.hc-more-below { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* ===================== r4.7b: one glass style for every tray panel (Lior) ===================== */
/* The look of Print / DWG / Coordinates (their own cards: warm 20% fill, 26px blur, light header) as shared tokens,
   applied to the panels that were opaque. Dark mode keeps the dark glass the other panels already use. */
:root, body {
  --hc-glass: rgba(245,242,195,.2); --hc-glass-blur: blur(26px) saturate(140%);
  --hc-glass-head: rgba(255,255,255,.72); --hc-glass-inner: rgba(255,255,255,.55);
  --hc-glass-border: rgba(255,255,255,.55); }
body.calcite-mode-dark {
  --hc-glass: var(--cad-glass); --hc-glass-head: var(--cad-bg); --hc-glass-inner: rgba(255,255,255,.04);
  --hc-glass-border: var(--cad-line); }

/* the panel surface */
:is([data-widgetid="widget_200"], [data-widgetid="widget_lt"], [data-widgetid="widget_3"], [data-widgetid="widget_222"],
    [data-widgetid="widget_213"], [data-widgetid="widget_215"], [data-widgetid="widget_232"]) {
  background: var(--hc-glass) !important; -webkit-backdrop-filter: var(--hc-glass-blur); backdrop-filter: var(--hc-glass-blur);
  border: 1px solid var(--hc-glass-border) !important; border-radius: var(--cad-radius) !important; box-shadow: var(--cad-shadow) !important;
  overflow: hidden; }
/* their own opaque fills become see-through, so the glass shows */
:is([data-widgetid="widget_200"], [data-widgetid="widget_lt"], [data-widgetid="widget_3"], [data-widgetid="widget_222"],
    [data-widgetid="widget_213"], [data-widgetid="widget_215"], [data-widgetid="widget_232"])
  :is(.jimu-widget, .jimu-surface, .widget-layer-tree, .esri-widget, .esri-legend, .esri-bookmarks, .cs-card, .cs-top) {
  background-color: transparent !important; }
:is([data-widgetid="widget_lt"], [data-widgetid="widget_200"]) :is(.lt-search, .cs-select, input, select) { background: var(--hc-glass-inner) !important; }
[data-widgetid="widget_lt"] .lt-menu { background: var(--hc-glass-inner) !important; }

/* INFO and the selection tray (infoWidget): the outer card is the glass, inner cards a lighter veil */
html body .jimu-widget.widget-info-widget .card-shell.identify-results-widget {
  background: var(--hc-glass) !important; -webkit-backdrop-filter: var(--hc-glass-blur) !important; backdrop-filter: var(--hc-glass-blur) !important;
  border-color: var(--hc-glass-border) !important; }
html body .jimu-widget.widget-info-widget .card-header { background: var(--hc-glass-head) !important; }
html body .jimu-widget.widget-info-widget .card-inner { background: var(--hc-glass-inner) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }



/* ===================== r4.7b: floating tray (hc-panels.js) ===================== */
[data-widgetid="widget_1"] .side-collapsable[data-hc-panel] .hc-panel-bar {
  position: absolute; top: 34px; inset-inline: 8px; z-index: 5; height: 36px; display: flex; align-items: center; gap: 4px;
  padding: 0 4px; border-radius: 10px; pointer-events: auto;
  background: var(--hc-glass-head, rgba(255,255,255,.72)); border: 1px solid var(--hc-glass-border, rgba(255,255,255,.55));
  -webkit-backdrop-filter: var(--hc-glass-blur, blur(26px)); backdrop-filter: var(--hc-glass-blur, blur(26px)); box-shadow: var(--cad-shadow-sm); }
[data-widgetid="widget_1"] .hc-panel-grip {
  flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--cad-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: grab; touch-action: none; text-align: start; }
[data-widgetid="widget_1"] [data-hc-moving] .hc-panel-grip { cursor: grabbing; }
[data-widgetid="widget_1"] .hc-panel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-widgetid="widget_1"] .hc-panel-dots { width: 10px; height: 16px; flex: none; opacity: .6;
  background: radial-gradient(circle, currentColor 1.3px, transparent 1.6px) 0 0 / 5px 5px; }
[data-widgetid="widget_1"] .hc-panel-btn {
  width: 30px; height: 30px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--cad-ink);
  font-size: 15px; line-height: 1; cursor: pointer; }
[data-widgetid="widget_1"] :is(.hc-panel-btn, .hc-panel-grip):hover { background: var(--cad-tint); color: var(--cad-deep); }
[data-widgetid="widget_1"] :is(.hc-panel-btn, .hc-panel-grip):focus-visible { outline: 2px solid var(--cad-focus); outline-offset: 1px; }
[data-widgetid="widget_1"] .side-collapsable[data-hc-panel] .hc-panel-resize {
  position: absolute; bottom: 4px; inset-inline-end: 4px; z-index: 5; width: 18px; height: 18px; pointer-events: auto; cursor: nesw-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 45%, var(--cad-teal) 45%, var(--cad-teal) 55%, transparent 55%, transparent 65%, var(--cad-teal) 65%, var(--cad-teal) 75%, transparent 75%);
  opacity: .7; border-radius: 0 0 0 6px; }
html:not([dir="rtl"]) [data-widgetid="widget_1"] .side-collapsable[data-hc-panel] .hc-panel-resize { cursor: nwse-resize; }
[data-widgetid="widget_1"] .side-collapsable[data-hc-panel][data-hc-narrow] :is(.hc-panel-resize, .hc-panel-reset) { display: none; }
[data-widgetid="widget_1"] .side-collapsable[data-hc-panel][data-hc-narrow] .hc-panel-grip { cursor: default; }

/* ===================== r4.9: transparent frosted glass, readable through a halo (Lior) ===================== */
/* Lior (r4.9): back towards the very transparent glass of the old DXF / Identify / Coordinates / Print panels, with a
   light milky frost (blur + a light tint) so it does not get too strong. Readability comes from a halo / soft backing
   right behind the text, not from a near-opaque panel (r4.8's 88% fill is gone).
   Same tokens as r4.8, so other widgets (INFO popup, 1.10) keep using them:
   --hc-read-bg (the panel fill), --hc-read-halo, --hc-read-ink, --hc-read-muted, --hc-read-accent. */
:root, body {
  --hc-read-bg: rgba(248,247,238,.34); --hc-read-blur: blur(14px) saturate(150%);
  --hc-read-halo: rgba(255,255,255,.96); --hc-read-back: rgba(255,255,255,.42);
  --hc-read-ink: #10302b; --hc-read-muted: #3f5450; --hc-read-accent: #08584f; }
body.calcite-mode-dark {
  --hc-read-bg: rgba(20,35,32,.42); --hc-read-halo: rgba(12,22,20,.96); --hc-read-back: rgba(12,22,20,.38);
  --hc-read-ink: #eef7f5; --hc-read-muted: #c3d6d1; --hc-read-accent: #8fe6da; }

/* the content surfaces: very transparent, milky frost */
html body :is([data-widgetid="widget_200"], [data-widgetid="widget_lt"], [data-widgetid="widget_3"], [data-widgetid="widget_222"],
    [data-widgetid="widget_213"], [data-widgetid="widget_215"], [data-widgetid="widget_232"]),
html body .jimu-widget.widget-info-widget .card-shell.identify-results-widget,
html body :is(.gc-card, .dxf-card),
html body [data-widgetid="widget_126"] .floating-panel {
  background: var(--hc-read-bg) !important; color: var(--hc-read-ink);
  -webkit-backdrop-filter: var(--hc-read-blur) !important; backdrop-filter: var(--hc-read-blur) !important;
  --cad-ink: var(--hc-read-ink); --cad-muted: var(--hc-read-muted); --cad-accent-text: var(--hc-read-accent); }
/* inner veils stay light, they group rows without closing the glass */
html body .jimu-widget.widget-info-widget .card-inner { background: var(--hc-read-back) !important; }

/* readability: a strong, soft halo behind every glyph (text-shadow inherits); a wide one gives a local backing */
html body :is([data-widgetid="widget_200"], [data-widgetid="widget_lt"], [data-widgetid="widget_3"], [data-widgetid="widget_222"],
    [data-widgetid="widget_213"], [data-widgetid="widget_215"], [data-widgetid="widget_232"],
    .card-shell.identify-results-widget, .gc-card, .dxf-card, [data-widgetid="widget_126"] .floating-panel) {
  text-shadow: 0 0 1px var(--hc-read-halo), 0 0 2px var(--hc-read-halo), 0 0 4px var(--hc-read-halo), 0 0 8px var(--hc-read-back); }
html body :is([data-widgetid="widget_200"], [data-widgetid="widget_lt"], [data-widgetid="widget_3"], [data-widgetid="widget_222"],
    [data-widgetid="widget_213"], [data-widgetid="widget_215"], [data-widgetid="widget_232"],
    .card-shell.identify-results-widget, .gc-card, .dxf-card, [data-widgetid="widget_126"] .floating-panel)
  :is(button, .btn, .jimu-btn, input, select, textarea, calcite-button, .action-btn) { text-shadow: none; }
/* the worst cases from Lior's screenshots (legend captions, layer names): full ink, a soft local backing behind the line */
html body [data-widgetid="widget_3"] :is(.esri-legend__layer-caption, .esri-legend__layer-cell--info, .esri-widget__heading),
html body [data-widgetid="widget_lt"] :is(.lt-name, .lt-title, label) {
  color: var(--hc-read-ink) !important; background: var(--hc-read-back); border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* fields keep a readable fill of their own */
html body :is([data-widgetid="widget_200"], [data-widgetid="widget_lt"], .gc-card, .dxf-card, [data-widgetid="widget_126"] .floating-panel) :is(input, select, textarea) {
  background: rgba(255,255,255,.78) !important; }
body.calcite-mode-dark :is([data-widgetid="widget_200"], [data-widgetid="widget_lt"], .gc-card, .dxf-card, [data-widgetid="widget_126"] .floating-panel) :is(input, select, textarea) {
  background: rgba(12,22,20,.7) !important; }

/* ===================== r4.9b: Liquid Glass windows, side bar controller, arrange menu (Lior) ===================== */
/* Lior (23.10, iOS 26 / macOS examples): very transparent surface, a strong blur of the map behind it, a light milky
   tint, a thin bright inner rim (highlight) with a soft outer shadow, rounded corners. Text stays readable through
   the halo of r4.9 (--hc-read-halo). One language for the windows, the service bar and the menus:
   --hc-glass-bg / --hc-glass-blur / --hc-glass-rim / --hc-glass-shadow. */
:root, body {
  --hc-glass-bg: linear-gradient(180deg, rgba(255,255,255,.30), rgba(246,248,244,.18));
  --hc-glass-blur: blur(28px) saturate(185%) brightness(1.04);
  --hc-glass-rim: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.18);
  --hc-glass-shadow: 0 22px 44px -22px rgba(6,30,26,.55), 0 2px 8px -4px rgba(6,30,26,.25);
  --hc-glass-veil: rgba(255,255,255,.26); --hc-glass-veil-strong: rgba(255,255,255,.4); }
body.calcite-mode-dark {
  --hc-glass-bg: linear-gradient(180deg, rgba(40,60,56,.42), rgba(16,28,26,.34));
  --hc-glass-rim: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.14);
  --hc-glass-veil: rgba(20,35,32,.34); --hc-glass-veil-strong: rgba(20,35,32,.5); }

/* the window: one glass surface (header + content); the widgets inside paint no fill of their own */
html body .panel-container[data-hc-layer] > .controller-panel[data-hc-win] {
  background: var(--hc-glass-bg) !important; -webkit-backdrop-filter: var(--hc-glass-blur); backdrop-filter: var(--hc-glass-blur);
  border: 0 !important; border-radius: 20px !important; box-shadow: var(--hc-glass-rim), var(--hc-glass-shadow) !important;
  color: var(--hc-read-ink);
  --cad-glass: var(--hc-glass-veil); --cad-glass-strong: var(--hc-glass-veil-strong); --cad-card-border: rgba(255,255,255,.45);
  --cad-shadow: none; --cad-shadow-sm: none; --hc-read-bg: transparent; --hc-read-blur: none; }
html body [data-hc-win] > .panel-header {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.4) !important;
  color: var(--hc-read-ink) !important; min-height: 40px; padding: 4px 8px 4px 6px !important;
  text-shadow: 0 0 2px var(--hc-read-halo), 0 0 6px var(--hc-read-halo); }
html body [data-hc-win] > .panel-content, html body [data-hc-win] > .panel-content > .widget-content,
html body [data-hc-win] > .panel-content [data-widgetid], html body [data-hc-win] .jimu-widget,
html body [data-hc-win] :is(.card-shell.identify-results-widget, .gc-card, .dxf-card, .floating-panel, .cs-card, .cs-top) {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important; }
html body [data-hc-win] :is(.cs-card, .gc-card, .dxf-card, .card-inner) { background: var(--hc-glass-veil) !important; border-color: rgba(255,255,255,.45) !important; }
/* readability on any map: the halo of r4.9 on everything inside a window, controls keep their own */
html body [data-hc-win] > .panel-content { text-shadow: 0 0 1px var(--hc-read-halo), 0 0 2px var(--hc-read-halo), 0 0 4px var(--hc-read-halo), 0 0 9px var(--hc-read-back); }
html body [data-hc-win] > .panel-content :is(button, .btn, .jimu-btn, input, select, textarea, calcite-button, .action-btn) { text-shadow: none; }
html body [data-hc-win] > .panel-content :is(input, select, textarea) { background: rgba(255,255,255,.8) !important; }
body.calcite-mode-dark [data-hc-win] > .panel-content :is(input, select, textarea) { background: rgba(12,22,20,.72) !important; }
html body [data-hc-win] .hc-win-help { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
/* the advanced tools window (widget_105) lists its tools as cards: they sit on the glass */
html body [data-hc-win="widget_105"] .avatar-card .avatar-button { box-shadow: 0 6px 14px -8px rgba(0,0,0,.45) !important; }

/* the side bar is a Widget Controller now (widget_2): white icons on the bar, no tile of their own, 52 px a row */
html body [data-widgetid="widget_2"] .avatar-card.layout-item { margin: 0 !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar { padding: 10px 19px !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important;
  transition: background-color .15s ease, transform .15s ease; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button:hover { background: rgba(255,255,255,.16) !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button:hover img { transform: scale(1.18); }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button img { transition: transform .15s ease; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
/* the controller's own "open" dot under an icon: the lit button says it already */
html body [data-widgetid="widget_2"] .avatar-card .avatar::after, html body [data-widgetid="widget_2"] .avatar-card .badge-dot { display: none !important; }
@media (prefers-reduced-motion: reduce) { html body [data-widgetid="widget_2"] .avatar-card .avatar-button, html body [data-widgetid="widget_2"] .avatar-card .avatar-button img { transition: none; } }
/* open / minimized windows on the side bar (Lior r4.9): lit white, or half-lit with a dot; the controller's own
   "active" frame is replaced by these */
html body [data-widgetid="widget_2"] .avatar-card .avatar.active, html body [data-widgetid="widget_2"] .avatar-card .avatar-button.active {
  border: 0 !important; outline: 0; box-shadow: none !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button.active:not([data-hc-state]) { background: transparent !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button[data-hc-state="open"] { background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.28) !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button[data-hc-state="open"] img { filter: brightness(0) saturate(100%) invert(22%) sepia(40%) saturate(900%) hue-rotate(130deg) !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button[data-hc-state="min"] { background: rgba(255,255,255,.3) !important; position: relative; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button[data-hc-state="min"]::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff; }
/* the advanced tools fly-out (widget_105 off panel): a glass menu, smaller tool buttons with their names */
html body .jimu-popper .popper-box:has([data-widgetid="widget_105"]) {
  background: var(--hc-glass-bg) !important; -webkit-backdrop-filter: var(--hc-glass-blur); backdrop-filter: var(--hc-glass-blur);
  border: 0 !important; border-radius: 18px !important; box-shadow: var(--hc-glass-rim), var(--hc-glass-shadow) !important; }
html body .jimu-popper [data-widgetid="widget_105"] .avatar-button { width: 46px !important; height: 46px !important; }
html body .jimu-popper [data-widgetid="widget_105"] .avatar-label, html body .jimu-popper [data-widgetid="widget_105"] .widget-name {
  color: var(--hc-read-ink) !important; text-shadow: 0 0 2px var(--hc-read-halo), 0 0 5px var(--hc-read-halo); font-size: 12px !important; }
/* r4.9 icons (Lior: Uicons Regular Rounded, inline SVG with fill="currentColor"): white on the bar, dark green on a lit
   (open) button, white on the half-lit (minimized) one; the old PNG recolouring is not needed for them */
html body [data-widgetid="widget_2"] .avatar-card .avatar-button svg { color: #fff !important; fill: currentColor; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button svg * { fill: currentColor; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button[data-hc-state="open"] svg { color: var(--cad-deep, #11544d) !important; }
html body [data-widgetid="widget_2"] .avatar-card .avatar-button:hover svg { transform: scale(1.18); transition: transform .15s ease; }
html body .jimu-popper [data-widgetid="widget_105"] .avatar-button svg { color: #fff !important; }
/* the Dock chips take the same SVG: ink with a light halo */
html body .hc-svc-chip svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(255,255,255,.9)) !important; color: var(--hc-read-ink, #13302c) !important; }
html body .hc-svc-chip svg * { fill: currentColor; }
/* ===== Victor's rule (23.10): glass and text do not go together. The glass is the frame; every text area sits in an
   inner cell with a medium-transparent white fill (like a Feature Card), so text is read on white, not on the map. ===== */
:root, body { --hc-cell: rgba(255,255,255,.76); --hc-cell-strong: rgba(255,255,255,.88); --hc-cell-line: rgba(255,255,255,.7); }
body.calcite-mode-dark { --hc-cell: rgba(18,32,29,.78); --hc-cell-strong: rgba(18,32,29,.9); --hc-cell-line: rgba(255,255,255,.14); }
/* window: the content is one cell inside the glass frame, the title a small cell in the header */
html body [data-hc-win] > .panel-header { border-bottom: 0 !important; text-shadow: none; }
html body [data-hc-win] > .panel-header .hc-win-grip > span { background: var(--hc-cell); padding: 3px 11px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hc-cell-line); }
html body .panel-container[data-hc-layer] > .controller-panel[data-hc-win] > .panel-content {
  background: var(--hc-cell) !important; margin: 0 8px 8px !important; border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px var(--hc-cell-line) !important; text-shadow: none !important; }
html body [data-hc-win] > .panel-content * { text-shadow: none !important; }
/* inner groups inside the cell: a hairline instead of another veil */
html body [data-hc-win] :is(.cs-card, .gc-card, .dxf-card, .card-inner) { background: rgba(255,255,255,.45) !important; border: 1px solid rgba(16,48,43,.08) !important; }
body.calcite-mode-dark [data-hc-win] :is(.cs-card, .gc-card, .dxf-card, .card-inner) { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; }
html body [data-widgetid="widget_3"] :is(.esri-legend__layer-caption, .esri-legend__layer-cell--info, .esri-widget__heading),
html body [data-widgetid="widget_lt"] :is(.lt-name, .lt-title, label) { background: transparent !important; }
/* the short labels, the Dock's names and its collapsed tab, the arrange menu: text on cells */
html body .hc-w-tip, html body .hc-svc-chip .hc-svc-lbl { background: var(--hc-cell-strong) !important; text-shadow: none !important; }
html body .hc-svc-tab { text-shadow: none !important; }
html body .hc-svc-tab::before { content: ""; position: absolute; inset: 3px 6px; border-radius: 8px; background: var(--hc-cell); z-index: -1; }
html body .hc-svc-tab { position: relative; isolation: isolate; }
html body .hc-arr { text-shadow: none !important; }
html body .hc-arr h3 { display: inline-block; background: var(--hc-cell); padding: 2px 9px; border-radius: 8px; opacity: 1 !important; }
html body .hc-arr-row { background: var(--hc-cell); border-radius: 12px; padding: 6px; }
html body .jimu-popper [data-widgetid="widget_105"] :is(.avatar-label, .widget-name) { background: var(--hc-cell); padding: 1px 7px; border-radius: 7px; text-shadow: none !important; }
/* ===== r4.9 Dock (Victor + Lior, 23.10): the Dock is the only launcher; the side bar goes. widget_2 stays mounted
   (it holds the windows) but is not shown; ">" (widget_91) and the label column go with it. The map is full width
   (to_dock.cjs). ===== */
html body [data-widgetid="widget_2"], html body [data-widgetid="widget_91"] { display: none !important; }
/* HAMMER CITY inside the emblem + search bar (widget_122), at its far end: the name only - HAMMER black, CITY thinner and
   green, Hammer font, on a white cell (Victor 23.10) */
.hc-brand { position: fixed; z-index: 1; display: flex; align-items: baseline; gap: 9px; padding: 9px 14px; border-radius: 14px; direction: ltr;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(16,48,43,.06); line-height: 1; }
.hc-brand b, .hc-brand i { font-family: 'Hammer', Heebo, Arial, sans-serif !important; font-size: 19px; letter-spacing: 1.4px; font-style: normal; white-space: nowrap; }
.hc-brand b { font-weight: 700; color: #111; }
.hc-brand i { font-weight: 400; color: #1fae5a; }
body.calcite-mode-dark .hc-brand { background: rgba(18,32,29,.9); } body.calcite-mode-dark .hc-brand b { color: #f1f5f4; } body.calcite-mode-dark .hc-brand i { color: #5fd88f; }
@media (max-width: 639px) { .hc-brand { display: none; } }
@media print { .hc-brand { display: none !important; } }
/* review 16: dark mode - the Dock's icons were dark-on-dark. White icons with a dark halo, darker glass, readable names */
body.calcite-mode-dark .hc-svc-pill, body.calcite-mode-dark .hc-svc-pop, body.calcite-mode-dark .hc-sel, body.calcite-mode-dark .hc-svc-tab {
  background: linear-gradient(180deg, rgba(30,48,44,.62), rgba(14,26,24,.55)) !important; }
body.calcite-mode-dark .hc-svc-b { color: #f4faf8 !important; }
body.calcite-mode-dark .hc-svc-b :is(svg, img) { filter: drop-shadow(0 0 2px rgba(0,0,0,.85)) drop-shadow(0 0 5px rgba(0,0,0,.5)) !important; opacity: 1; }
body.calcite-mode-dark .hc-svc-b img { filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(0,0,0,.85)) !important; }
body.calcite-mode-dark .hc-svc-b[data-state="min"] :is(svg, img) { opacity: .6; }
body.calcite-mode-dark .hc-svc-b[data-state="open"]::after { background: #f4faf8; box-shadow: 0 0 0 1.5px rgba(0,0,0,.6); }
body.calcite-mode-dark .hc-svc-b:hover, body.calcite-mode-dark .hc-svc-b:focus-visible { background: rgba(255,255,255,.14); }
body.calcite-mode-dark .hc-svc-b[data-lit], body.calcite-mode-dark .hc-svc-b[aria-expanded="true"] { background: rgba(255,255,255,.22); }
body.calcite-mode-dark .hc-svc-lbl { background: rgba(18,32,29,.94) !important; color: #f1f5f4 !important; }
body.calcite-mode-dark .hc-svc-lbl small { color: #c3d6d1 !important; }
body.calcite-mode-dark .hc-svc-it { background: rgba(18,32,29,.78) !important; color: #f1f5f4 !important; }
body.calcite-mode-dark .hc-svc-sep { background: rgba(255,255,255,.18); box-shadow: none; }
body.calcite-mode-dark .hc-svc-tool { color: #f4faf8; }
body.calcite-mode-dark .hc-sel-row { background: rgba(18,32,29,.82) !important; color: #f1f5f4 !important; }
/* dark mode: the emblem + search bar (widget_122, its config fill is light) follows the dark glass */
body.calcite-mode-dark [data-widgetid="widget_122"] { background: linear-gradient(180deg, rgba(30,48,44,.7), rgba(14,26,24,.62)) !important; }
/* r4.9d review 4: a window whose content is longer than the window scrolls inside it (INFO's own "height by content"
   rules must not switch that off) */
html body .panel-container[data-hc-layer] > .controller-panel[data-hc-win] > .panel-content { overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; }
.hc-brand { text-decoration: none !important; cursor: pointer; }
.hc-brand:hover { box-shadow: inset 0 0 0 1px rgba(16,48,43,.18), 0 2px 8px -4px rgba(0,0,0,.3); }
.hc-brand:focus-visible { outline: 2px solid var(--cad-focus, #0d8478); outline-offset: 2px; }
/* r4.9e: INFO's "?" lives in the window header (hc-panels.js); the inner one would repeat it */
html body .controller-panel[data-hc-win] .identify-results-widget .info-help-btn { display: none !important; }