/* WATA visual polish 1.0 — host adapters define surfaces; no preference/data logic. */
html { -webkit-text-size-adjust: 100%; }
:where(button, a, input, select, textarea) { touch-action: manipulation; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--polish-focus, #087ea0);
  outline-offset: 3px;
}
:where(input, select, textarea) { max-width: 100%; }
:where(h1, h2, h3) { overflow-wrap: break-word; }
/* Opaque base works without backdrop-filter. Glass is an enhancement. */
:is(.topbar, #fieldLanguagePopover) {
  background: var(--polish-surface);
  border-color: var(--polish-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 12px 32px -24px rgb(0 0 0 / .45);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.topbar, #fieldLanguagePopover) {
    background: color-mix(in srgb, var(--polish-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :is(.topbar, #fieldLanguagePopover) {
    background: var(--polish-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.topbar, #fieldLanguagePopover) { animation: none; transition: none; }
}
@media (max-width: 700px) {
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) {
    font-size: 16px;
  }
}
@media (forced-colors: active) {
  :is(.topbar, #fieldLanguagePopover) { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
}

/* Host: field */
/* Field Kit / Surveyor: quiet chrome, solid capture surfaces. */
:root { --polish-surface:var(--black); --polish-line:var(--line); --polish-focus:#35b4e5; }
.topbar { gap:12px; }
.topbar .brand { min-width:0; }
.topbar-actions { flex:none; gap:8px; }
.topbar .status { max-width:110px; line-height:1.4; white-space:normal; }
#fieldLanguagePopover { --polish-surface:var(--card); }
#fieldLanguagePopover button { min-height:44px; }
.sf-field { min-width:0; }
.sf-field>span { line-height:1.5; }
.sf-field :is(input,select,textarea) { font-size:16px; }
.sf-form-actions button { white-space:normal; line-height:1.45; min-height:48px; }
@media(max-width:480px) {
  .topbar .status { font-size:11px; max-width:82px; padding:4px; }
  .sf-manual-code form { grid-template-columns:minmax(0,1fr); }
  #sf-form[data-kind="distribution"] .sf-form-actions { grid-template-columns:minmax(0,1fr); }
}

/* Keep the content panel aligned with the desktop rail; back belongs to its heading. */
.page-heading-with-back { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; align-items:start; }
.page-heading-with-back > .back { grid-column:1; grid-row:1 / span 2; width:44px; min-height:44px; margin:0; align-self:start; }
.page-heading-with-back > .eyebrow { grid-column:2; justify-self:start; }
.page-heading-with-back > h1 { grid-column:2; min-width:0; }
.page-heading-with-back > .intro, .page-heading-with-back::after { grid-column:1 / -1; }

/* One return control and one placement throughout Field Kit, including Surveyor. */
body #app :is(.back,.sf-back-icon) {
  display:flex!important; align-items:center; justify-content:center;
  box-sizing:border-box; flex:none; width:44px; height:44px; min-width:44px; min-height:44px;
  padding:0; margin:0 0 16px; border:1px solid var(--line); border-radius:13px;
  background:var(--card); color:var(--ink); box-shadow:none;
  text-decoration:none; cursor:pointer;
}
body #app :is(.back,.sf-back-icon) svg { width:22px; height:22px; flex:none; }
body #app :is(.back,.sf-back-icon):focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.page-heading-with-back { display:block; }
.page-heading-with-back>.back { margin:0 0 16px; }
body #app .sf-heading:has(>.sf-back-icon) { display:block; }
body #app .sf-heading>.sf-back-icon { display:flex!important; }
body #app .sf-workspace-heading { display:block; }
body #app .sf-capture-header { display:block; }
body #app .sf-capture-header .sf-survey-identity { width:100%; }

/* Stable icon slots and gaps in both primary navigation placements. */
body #bottomNav button { box-sizing:border-box; }
body #bottomNav .bottom-nav-icon { display:grid; place-items:center; width:24px; height:24px; }
body #bottomNav .bottom-nav-icon svg { display:block; width:24px; height:24px; }
@media(min-width:1100px) {
 body .topbar>#bottomNav { max-width:600px; gap:4px; }
 body .topbar>#bottomNav button { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; min-height:48px; }
 body .topbar>#bottomNav :is(.bottom-nav-icon,.agua-egg) { flex:0 0 24px; width:24px; height:24px; margin:0; }
 body .field-workspace { width:calc(100% - 64px); max-width:1440px; }
 body .topbar { grid-template-columns:minmax(150px,1fr) minmax(500px,600px) minmax(150px,1fr); }
}
@media(min-width:1100px) and (max-height:600px) {
 body .field-workspace { margin-top:16px; }
 body .home-panel { padding:24px!important; }
 body .home-panel .action-card { min-height:128px!important; }
}