/* Shared desktop interface typography. Touch layouts retain their own font stack. */
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])),
html:root[data-app-layout]:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) {
  --font-ui:"Google Sans Text","Noto Sans TC UI",Arial,sans-serif;
  --font-body:var(--font-ui);
  --font-title:var(--font-ui);
  --font-display:var(--font-ui);
  --font-layer-control:var(--font-ui);
  --ui-map-font:var(--font-ui);
  --calcite-font-family:var(--font-ui);
  font-family:var(--font-ui);
}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) body {
  font-family:var(--font-ui);
}
/* Native controls otherwise retain Bootstrap, browser or legacy panel fonts.
   Explicit font previews and authored map-text editors keep their chosen face. */
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) :is(button,input,select,textarea,option):not([style*="font-family"]):not([style*="font:"]):not([class*="esri-icon"]):not([class*="material-icons"]) {
  font-family:var(--font-ui)!important;
}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) .map-search__input::placeholder {
  font-family:var(--font-ui)!important;
}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) :is(.esri-widget,.esri-popup,.app-search-result,.ws-sheet,.ws-style-popover,.release-notes-dialog) {
  font-family:var(--font-ui);
}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) :is(.flight-panel,.flight-sim-hud,.flight-cockpit) :is(h1,h2,h3,strong,b,small,span,dt,dd,label,output,kbd):not([class*="icon"]) {
  font-family:var(--font-ui)!important;
}
/* Category names have different widths. Reserve their actual text width rather
   than clipping the longer names inside six equal columns. */
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) :is(#optionPanel .feature-panel-tabs,#rightLayerPanel .right-layer-heading-tabs) {
  display:flex;
  flex-wrap:wrap;
  overflow:visible;
  gap:2px;
}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) :is(#optionPanel .feature-panel-tab,#rightLayerPanel .right-layer-heading-tab) {
  flex:1 0 auto;
  width:auto;
  min-width:max-content;
  padding-inline:1px;
  overflow:visible;
}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) #optionPanel .feature-panel-tab.user-layer-category {flex-basis:100%;}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) #workspacePanel .ws-layer-tool {flex:1 0 auto;min-width:max-content;padding-inline:5px;}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) #workspacePanel .ws-layer-tool small {width:auto;overflow:visible;}
/* Use the value's rendered width, including after fonts finish loading or the
   denominator changes. This overrides the legacy fixed character-count width. */
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) #mainScaleBar {
  display:inline-flex;
  align-items:center;
  gap:0;
}
.cursor-scale-value {display:contents;}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) .cursor-scale-value {
  display:inline-flex;
  align-items:baseline;
  font:inherit;
  line-height:inherit;
}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) #mapScaleInput {
  field-sizing:content;
  width:auto!important;
  min-width:1ch;
  font:inherit;
  letter-spacing:inherit;
  height:auto;
  min-height:0;
  margin:0;
  line-height:inherit;
  appearance:none;
}
html[data-app-layout=desktop] .site-copyright-symbol {font-family:Arial,sans-serif;font-size:1em;line-height:1;}

/* Keep the anchor stable while fitting the visible pill to its text. */
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) #cursorStatusReadout.cursor-status-slot {flex:0 0 auto;max-width:calc(100vw - 210px);padding:0;background:transparent!important;border:0;box-shadow:none;border-radius:0;overflow:visible;justify-content:flex-end;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.cursor-status-value {display:inline-block;flex:0 0 auto;box-sizing:border-box;width:100%;padding:0 8px;height:100%;line-height:inherit;text-align:left;align-content:center;white-space:nowrap;border-radius:8px;}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) .cursor-status-bar {gap:8px;}
html:root:not(:is([data-app-layout="phone"],[data-app-layout="tablet"])) .cursor-status-bar :is(.cursor-crs-button,.cursor-status-value,#mainScaleBar) {background:var(--ui-map-glass,rgba(255,255,255,.8))!important;color:var(--ui-text,#18212b);border:1px solid var(--ui-map-edge,rgba(45,51,57,.22));box-shadow:0 2px 10px #18212b26,inset 0 1px 0 #ffffff38;backdrop-filter:blur(16px) saturate(110%);-webkit-backdrop-filter:blur(16px) saturate(110%);}