/* ───────────────────────────────────────────────────────────────────────────
   V9 geometry — GLOBAL control styles for RE-HOSTED live pages.

   The presentational preview (V9GeometryForm) carries its own scoped copy. THIS
   file dresses REAL Blazor form controls (<input>/<select>/<button>/grids) that
   a re-hosted page positions absolutely at the faithful DFM coordinates inside a
   <GeoCanvas>. ZDIV2 Fortune-500 dimensional palette (navy #071426 / blue var(--zd-accent)).
   ──────────────────────────────────────────────────────────────────────────── */

.geo-outer { position: relative; width: 100%; overflow: visible; }

/* geo-cell — a positioned wrapper inside a GeoCanvas whose single control fills it.
   Lets a re-hosted form place ANY control type (input/select/textarea/value/lookup)
   at its DFM coord uniformly via style="@GeoCanvas.AtL(l,t,w,h)". (2026-06-23) */
.geo-canvas .geo-cell > input, .geo-canvas .geo-cell > textarea,
.geo-canvas .geo-cell > select, .geo-canvas .geo-cell > .gf-val,
.geo-canvas .geo-cell > .lk-input, .geo-canvas .geo-cell .lk-input,
.geo-canvas .geo-cell > .geo-in {
  width: 100%; height: 100%; box-sizing: border-box; margin: 0; }
.geo-canvas .geo-cell > textarea { resize: none; }
.geo-canvas .geo-cell { display: flex; }
.geo-canvas .geo-cell > * { font-size: 12px; }
/* Numeric fields = plain numeric input, NO spinner/roller picker (Craig 2026-07-17):
   "we don't want pickers in any numeric field — numeric characters only, no picker." */
.geo-canvas input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.geo-canvas input[type="number"]::-webkit-outer-spin-button,
.geo-canvas input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* bounded grid box inside the canvas — scrolls WITHIN, never stretches the canvas */
.geo-canvas .geo-gridbox { overflow: auto; border: 1px solid #C5D9F1; border-radius: 6px; background:#fff; }

/* GeoFit — flowing-block scale-to-fill (variable-height content, e.g. modals). */
.geo-fit { transform-origin: top left; }

/* ── GLOBAL modal overlay (2026-06-23) — the po-li-* modal shell, promoted from
   PurchaseOrder.razor's scoped <style> so EVERY form (SO/Quote/Invoice) can open a
   real overlay. Without this, a reused .po-li-overlay had no position:fixed and the
   modal content flowed beneath the form (Craig: SO EditPanel/ShippingInfo not modal). */
.po-li-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(7,20,38,.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.po-li-modal { background: #FCFDFF; border: 1px solid #C5D9F1; border-radius: 10px;
  box-shadow: 0 14px 44px rgba(7,20,38,.38); overflow: hidden; }
.po-li-modal-head { background: var(--zd-bluebar); color: #fff; padding: 9px 14px; display: flex;
  align-items: center; justify-content: space-between; }
.po-li-modal-title { font-weight: 700; font-size: 13px; }
.po-li-x { background: transparent; border: none; color: #9FB4CE; font-size: 16px; cursor: pointer; line-height: 1; }
.po-li-x:hover { color: #fff; }
.po-li-body { border: 0; margin: 0; padding: 0; }

/* ── In-canvas overlay panel (2026-06-23) — the V9 way: a panel positioned INSIDE
   the GeoCanvas, OVER the grid/form, scaling WITH the canvas (EditPanel.Top:=0 covers
   the form; ShippingInfoPanel at 152,176 sits over the grid). NOT a full-screen modal.
   Direct canvas child → already position:absolute; -full fills the canvas via inset. */
.geo-canvas .geo-overpanel { background:#FCFDFF; border:1px solid var(--zd-bluebar); border-radius:8px;
  box-shadow:0 12px 40px rgba(7,20,38,.40); z-index:60; display:flex; flex-direction:column; overflow:hidden; }
.geo-canvas .geo-overpanel-full { inset:0; }
.geo-overpanel-head { background:var(--zd-bluebar); color:#fff; padding:8px 12px; display:flex; align-items:center;
  justify-content:space-between; font-weight:700; font-size:12px; flex:0 0 auto; }
.geo-overpanel-head span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.geo-overpanel-x { background:transparent; border:0; color:#9FB4CE; font-size:15px; cursor:pointer; line-height:1; }
.geo-overpanel-x:hover { color:#fff; }
.geo-overpanel-body { border:0; margin:0; padding:8px; overflow:auto; flex:1 1 auto; min-height:0; }

/* SO ShippingInfo modal grid */
.so-shipinfo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; padding: 6px 10px; }
.so-shipinfo > label { display: flex; flex-direction: column; gap: 3px; }
.so-shipinfo .gf-bar { position: static; }
.so-shipinfo input, .so-shipinfo .lk-input, .so-shipinfo .gf-val { font-size: 12px; width: 100%; box-sizing: border-box; }
.so-shipinfo-foot { display: flex; justify-content: flex-end; padding: 10px; }

/* SO EditPanel (double-click line editor) modal layout. */
.so-edit { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px; }
.so-edit .gf-card { background:#FCFDFF; border:1px solid var(--zd-hairline-2); border-radius:10px; padding:12px 14px; }
.so-edit-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px 12px; }
.so-edit-grid > label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: #475569; min-width: 0; }
.so-edit-grid > label.col2 { grid-column: span 2; }
.so-edit-grid > label.col3 { grid-column: span 3; }
.so-edit-grid input, .so-edit-grid select, .so-edit-grid textarea, .so-edit-grid .lk-input,
.so-edit-grid .gf-val { font-size: 12px; width: 100%; box-sizing: border-box; }
.so-edit-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
.so-edit-checks .po-check { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.so-edit-subtabs { font-size: 11px; color: var(--zd-bluebar); font-weight: 600; padding: 8px 4px 0; border-top: 1px solid var(--zd-hairline-2); }
.so-edit-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 4px 4px; }
/* EditPanel 6 EQP sub-tabs */
.so-edit-tabstrip { margin-top: 10px; border-bottom: 1px solid var(--zd-hairline-2); }
.so-edit-tabbody { padding: 8px 2px; font-size: 12px; max-height: 260px; overflow: auto; }
/* exact-DFM tabbody (SO EditPanel PageControl2, 2026-07-16) — the At() rect bounds it,
   not the flowing max-height */
.geo-abshost .so-edit-tabbody { max-height: none; padding: 6px 8px; }

/* ── Exact-coordinate abs host (SO EditPanel / ShippingInfo, 2026-07-16) — a fieldset
   INSIDE an overpanel whose children sit at raw DFM rel coords via GeoCanvas.At(...,false).
   Mirrors the .geo-canvas > * rule one level down. */
.geo-canvas .geo-abshost { position: relative; display: block; border: 0; margin: 0;
  padding: 0; width: 100%; height: 100%; min-width: 0; }
.geo-canvas .geo-abshost > * { position: absolute; box-sizing: border-box; }
/* Delphi MS Sans Serif 8pt fits its design-time rects; web text runs wider — clip to
   the DFM cell instead of overlapping the neighbor (checkbox stack vs DBMemo2). */
.geo-abshost .po-check { font-size: 11px; overflow: hidden; }
.geo-abshost .geo-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* V9 required-field header — clRed bold flat label (no blue bar) on the SO EditPanel */
.geo-canvas .geo-lbl--req { color: var(--zd-bad); font-weight: 700; }

/* V9 LIGrid dimensional tablature — fixed column widths from the DFM Columns list;
   scrolls horizontally inside its geo-gridbox exactly like the Delphi DBGrid */
.so-table.so-v9grid { table-layout: fixed; width: max-content; min-width: 100%; }
.so-v9grid th, .so-v9grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-edit-availhdr { font-size: 12px; font-weight: 600; color: var(--zd-bluebar); margin-bottom: 6px; }
.so-edit-podetail { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px 14px; margin-bottom: 8px; }
.so-edit-podetail > div { font-size: 12px; min-width: 0; }
.so-edit-podetail > div.col3 { grid-column: span 3; }
.so-edit-podetail .gf-bar { position: static; display: inline-block; margin-right: 6px; padding: 1px 6px; }
.so-edit-subh { margin: 10px 0 4px; font-size: 12px; color: var(--zd-bluebar); }

/* In-canvas labels/buttons must NOT wrap (a wrapped line overflows its DFM cell
   and overlaps the row below — the PO carrier/footer overlap, 2026-06-23). */
.geo-canvas .po-check { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
/* clickable record links (SO CompanyName label): clip to the DFM cell — a long
   company name wrapped onto the contact line below it (SO 48834, 2026-07-16) */
.geo-canvas .so-co-link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-canvas .geo-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center; }
.geo-canvas {
  position: relative; background: #F4F8FC; border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px; box-shadow: 0 6px 22px rgba(7,20,38,.12);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #1a2535;
  transform-origin: top left;
}
/* every direct child a re-host positions is absolute */
.geo-canvas > * { position: absolute; box-sizing: border-box; }

/* Page/form HEADER band — was a navy #071426 fill (the dark banner); now a clean
   light header (white + bottom hairline + navy bold) per the light Gold Standard.
   Values come from design-tokens.css so it matches the shell. (Craig 2026-06-28) */
.geo-title {
  left: 0; top: 0; height: 34px;
  background: var(--zd-caption-bg); color: var(--zd-caption-ink);
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--zd-hairline);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; padding: 0 16px;
}

/* section card / bevel / panel */
.geo-card { background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(7,20,38,.06); }
.geo-grp  { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(7,20,38,.05); }

/* labels */
.geo-lbl { font-size: 11px; color: #4a6a8a; display: flex; align-items: center; }
.geo-sec { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--zd-accent); background: #F4F8FC; padding: 0 5px; white-space: nowrap;
  height: 14px; line-height: 14px; }

/* real text / select / date inputs */
.geo-in, .geo-cmb {
  background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 6px;
  font-size: 11px; color: #1a2535; padding: 0 7px; font-family: inherit;
  outline: none;
}
.geo-in:focus, .geo-cmb:focus { border-color: #2178D4; box-shadow: 0 0 0 2px rgba(33,120,212,.15); }
.geo-cmb { padding: 0 4px; }

/* DB display value (read-only, light blue) */
.geo-dbt { background: #EDF4FB; border: 1px solid rgba(33,120,212,.18); border-radius: 5px;
  font-size: 11px; color: #0D1E38; font-weight: 500; display: flex; align-items: center;
  padding: 0 7px; white-space: nowrap; overflow: hidden; }

/* radio group / checkbox-list boxes (page fills real radios/checks inside) */
.geo-radiobox, .geo-listbox {
  background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 6px;
  font-size: 11px; color: #1a2535; padding: 4px 8px; overflow: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.geo-radiobox.geo-row { flex-direction: row; gap: 14px; align-items: center; }
.geo-radiobox label, .geo-listbox label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.geo-radiobox.is-disabled, .geo-listbox.is-disabled { opacity: .5; background: #F1F5F9; }

/* checkbox */
.geo-chk { font-size: 11px; color: #1a2535; display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* buttons */
.geo-btn {
  background: #fff; border: 1px solid rgba(0,0,0,.16); border-radius: 7px;
  font-size: 11px; font-weight: 500; color: #1a2535; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 1px 2px rgba(7,20,38,.08); white-space: nowrap;
  cursor: pointer; font-family: inherit;
}
.geo-btn:hover:not(:disabled) { border-color: #2178D4; }
.geo-btn:disabled { opacity: .55; cursor: not-allowed; }
.geo-btn.pri { background: var(--zd-accent); border-color: var(--zd-accent); color: #fff; }
.geo-btn.pri:hover:not(:disabled) { background: #1257a3; }

/* reserved status / toast zone — a card area that stays BLANK until a hold
   fires or the document is sealed/locked, then a small chip populates it.
   (ERA/credit holds, the seal/lock toast.) Used on the spine forms' Card B. */
.geo-statuszone { display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 4px; overflow: hidden; }
.geo-toast { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.1;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.geo-toast-stop { background: #FDE7E7; color: #B42318; border: 1px solid #F4B9B4; }
.geo-toast-warn { background: #FFF3E0; color: #9A5B00; border: 1px solid #FFD9A0; }
.geo-toast-lock { background: #EAF1FB; color: #1257A3; border: 1px solid #BBD3F0; }
.geo-toast-link { background: transparent; border: 0; padding: 0 2px; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit; text-decoration: underline;
  text-underline-offset: 2px; opacity: .85; }
.geo-toast-link:hover { opacity: 1; }
.geo-toast-lockbtn { background: transparent; border: 1px solid #CBD9EC; cursor: pointer;
  font-size: 10px; font-weight: 600; color: #64748B; border-radius: 999px;
  padding: 2px 8px; opacity: .7; }
.geo-toast-lockbtn:hover { opacity: 1; border-color: var(--zd-accent); color: #1257A3; }

/* grid */
.geo-grid { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(7,20,38,.06); overflow: hidden; }

/* validation strip + small helpers re-hosts reuse */
.geo-validation { background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 6px;
  color: #991B1B; font-weight: 500; font-size: 11px; padding: 6px 9px; }

/* ───────────────────────────────────────────────────────────────────────────
   INTER CLEAN KIT — promoted from the Contact Manager proof (2026-06-18, Craig-approved).
   Every GeoCanvas re-host page inherits the fresh look: Inter, crisper fields, slate labels,
   flat clean buttons (no shadowed round buttons). LAYOUT stays the faithful V9 geometry; only
   the dressing is modern. Applied globally so the form sweep is consistent with zero per-page CSS.
   ──────────────────────────────────────────────────────────────────────────── */
.geo-canvas { font-family: var(--zd-font), -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #FFFFFF; border: 1px solid var(--zd-hairline-2); box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.geo-card { border: 1px solid var(--zd-hairline-2); box-shadow: none; background: #FCFDFF; }
.geo-sec { color: #4A78B5; font-size: 11px; font-weight: 700; background: transparent;
  letter-spacing: .03em; height: auto; }
.geo-lbl { color: #475569; font-size: 11px; font-weight: 600; }
.geo-in, .geo-cmb { border: 1px solid #C5D9F1; border-radius: 6px; font-size: 12px; color: #0F172A; background: #FFFFFF; }
.geo-in:focus, .geo-cmb:focus { border-color: var(--zd-accent); box-shadow: 0 0 0 2px rgba(21,101,190,.15); }
.geo-dbt { background: var(--zd-readonly-bg); border: 1px solid var(--zd-hairline-2); color: #0F172A; font-size: 12px; font-weight: 500; }
.geo-chk { font-size: 12px; color: #334155; }
/* Footer/action buttons — soft & DIMENSIONAL (the legacy raised-button feel, modernized).
   No dark navy: secondary = tonal white that lifts on hover; primary (Save) = friendly brand
   blue gradient; danger (Delete) = soft red. Forgiving, less obtrusive, on-theme. (Craig 2026-06-22) */
.geo-btn { border: 1px solid #CBD9EC; border-radius: 8px; font-size: 12px; font-weight: 600;
  color: #1F4E87; background: linear-gradient(#FFFFFF, #F3F8FD); box-shadow: 0 1px 2px rgba(7,20,38,.07);
  transition: background .12s, box-shadow .12s, transform .08s ease, border-color .12s; }
.geo-btn:hover:not(:disabled) { background: linear-gradient(#FFFFFF, #E9F2FC); border-color: var(--zd-accent);
  box-shadow: 0 2px 6px rgba(21,101,190,.18); transform: translateY(-1px); }
.geo-btn:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(7,20,38,.13); }
.geo-btn.pri { color: #FFFFFF; border-color: #1A6FC8; background: linear-gradient(#2C7BD6, var(--zd-accent));
  box-shadow: 0 1px 2px rgba(21,101,190,.30); }
.geo-btn.pri:hover:not(:disabled) { background: linear-gradient(#3A8AE4, #1A6FC8);
  box-shadow: 0 3px 8px rgba(21,101,190,.32); transform: translateY(-1px); }
.geo-btn.danger { color: #A32D2D; border-color: #E3B7B7; background: linear-gradient(#FFFFFF, #FBEFEF); }
.geo-btn.danger:hover:not(:disabled) { background: linear-gradient(#FFFFFF, #F6E1E1);
  border-color: #C0392B; box-shadow: 0 2px 6px rgba(160,45,45,.16); transform: translateY(-1px); }
.geo-hold { color: #B91C1C; font-weight: 700; }
/* tab strips (top PageControl + nested sub-tabs) */
.geo-tabstrip { display: flex; gap: 2px; align-items: flex-end; overflow: hidden; }
.geo-tab { padding: 3px 9px; border: 1px solid var(--zd-hairline-2); border-bottom: 0; border-radius: 5px 5px 0 0;
  background: var(--zd-readonly-bg); font-size: 11px; font-weight: 600; color: #4A78B5; cursor: pointer; white-space: nowrap; }
.geo-tab.is-active { background: #FFFFFF; color: var(--zd-bluebar); border-color: var(--zd-accent); }
.geo-subtabs { gap: 1px; } .geo-subtab { font-size: 10px; padding: 2px 6px; }
/* restrained, scrollable grid box (V9 grd — scrolls WITHIN, never stretches the page) */
.geo-gridbox { border: 1px solid #C5D9F1; border-radius: 4px; background: #FFFFFF; overflow: auto; }
/* fresh emoji icon button (envelope / globe etc.) */
.geo-iconbtn { display: flex; align-items: center; justify-content: center; border: 1px solid var(--zd-hairline-2);
  border-radius: 7px; background: #FFFFFF; font-size: 13px; cursor: pointer; padding: 0; line-height: 1; }
.geo-iconbtn:hover { background: #EDF4FB; border-color: var(--zd-accent); }
/* LookupSelect (datalist combo) — constrain to its slot, single caret, matches geo-cmb */
.geo-canvas .lk-input { width: 100%; height: 100%; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.geo-canvas .lk-input::-webkit-calendar-picker-indicator { opacity: 0; width: 0; margin: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   GOLD-STANDARD FLOWING KIT (gf-*) — 2026-06-22. The geo-* visual DNA applied to
   FLOWING forms (no fixed canvas that clips). One reusable kit so every V9 form
   is mechanical: header band → titled section cards (one per DFM GroupBox) →
   tab strip → panels. See docs/scope/FORM_GOLD_STANDARD.md.
   ──────────────────────────────────────────────────────────────────────────── */
.gf-page { background: var(--zd-canvas); padding: 16px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--zd-font), -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Header command band — title + subtitle + status pills + action bar. Navy top accent. */
.gf-header { background: #FFFFFF; border: 1px solid #D4E2F4; border-top: 3px solid var(--zd-accent);
  border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(7,20,38,.08), 0 6px 18px rgba(7,20,38,.07); }

/* Section card — ONE per DFM GroupBox / logical field group. White, lifts off the tint. */
.gf-card { background: #FCFDFF; border: 1px solid var(--zd-hairline-2); border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(7,20,38,.06), 0 6px 20px rgba(7,20,38,.07); }
.gf-card-title { font: 700 11px var(--zd-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--zd-accent); margin: 0 0 11px; padding-bottom: 8px; border-bottom: 1px solid #E3ECF9; }

/* Field grid inside a card — labelled fields (geo-lbl + geo-in), faithful DFM order. */
.gf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px 16px; }
.gf-grid .gf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gf-grid .gf-field.col2, .gf-grid .gf-bar-field.col2 { grid-column: span 2; }
.gf-grid .gf-field.col3, .gf-grid .gf-bar-field.col3 { grid-column: span 3; }
.gf-grid .gf-field.col6, .gf-grid .gf-bar-field.col6 { grid-column: span 6; }
.gf-field > label, .gf-field .geo-lbl { font-size: 11px; font-weight: 600; color: #475569; }
.gf-field input, .gf-field textarea, .gf-field select, .gf-field .lk-input {
  width: 100%; box-sizing: border-box; min-height: 34px;
  border: 1px solid #C5D9F1; border-radius: 6px; font: inherit; font-size: 12px;
  color: #0F172A; background: #FFFFFF; padding: 5px 8px; }
.gf-field input:focus, .gf-field textarea:focus, .gf-field .lk-input:focus {
  outline: none; border-color: var(--zd-accent); box-shadow: 0 0 0 3px rgba(21,101,190,.14); }

/* ── THE V9 ESSENCE: the navy BLUE-BAR field label + flush value box ──
   The defining V9 look — a filled navy bar (caption) with the value directly below.
   Use everywhere a V9 form shows label-over-value. Mechanical; see FORM_GOLD_STANDARD.md. */
.gf-bar-field { display: flex; flex-direction: column; min-width: 0; }
.gf-bar { background: var(--zd-bluebar); color: #FFFFFF; font: 700 10px var(--zd-font);
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 5px 5px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-bar-field > input, .gf-bar-field > select, .gf-bar-field > textarea,
.gf-bar-field > .lk-input, .gf-bar-field > .gf-val {
  border: 1px solid #C5D9F1; border-top: 0; border-radius: 0 0 6px 6px;
  font: inherit; font-size: 12px; color: #0F172A; background: #FFFFFF;
  padding: 6px 8px; min-height: 32px; box-sizing: border-box; width: 100%; }
.gf-bar-field > textarea { resize: vertical; }
.gf-bar-field > .gf-val { background: var(--zd-readonly-bg); display: flex; align-items: center; } /* read-only (V9 TDBText) */
.gf-bar-field > input:focus, .gf-bar-field > select:focus, .gf-bar-field > textarea:focus,
.gf-bar-field > .lk-input:focus { outline: none; border-color: var(--zd-accent); box-shadow: 0 0 0 2px rgba(21,101,190,.18); }

/* ─────────────────────────────────────────────────────────────────────────────
   ABSOLUTE CANVAS TYPE — opt-in per form via <GeoCanvas AbsoluteType="true">.
   GeoCanvas renders each form with transform: scale(S), S = column / CanvasWidth
   (v9-geometry-r2.js) — which scales the TEXT too, so a wide canvas (scaled DOWN)
   reads smaller than the rails and a narrow one reads bigger. This block counter-
   scales the canvas typography against the live --geo-scale the scaler publishes,
   so every text surface renders at a CONSTANT on-screen px (rail baseline ~13px),
   regardless of form width or whether a rail is open/closed. Geometry (box
   positions) still fills the column; only type is pinned. Covers the shared geo-*
   and gf-* kits, generic form controls, AND inherited/bare text (the base rule).
   Roll out one wide form at a time. See docs/scope/FORM_GOLD_STANDARD.md § Typography. */
.geo-abstype                        { font-size: calc(13px / var(--geo-scale, 1)); }  /* base: inherited + bare text */
.geo-abstype .geo-title             { font-size: calc(15px / var(--geo-scale, 1)); }
.geo-abstype .geo-sec,
.geo-abstype .gf-bar                { font-size: calc(11px / var(--geo-scale, 1)); }  /* section / blue-bar captions */
.geo-abstype .geo-lbl               { font-size: calc(12px / var(--geo-scale, 1)); }
.geo-abstype .geo-btn               { font-size: calc(13px / var(--geo-scale, 1)); }
.geo-abstype .geo-in,
.geo-abstype .geo-cmb,
.geo-abstype .geo-dbt,
.geo-abstype .geo-chk,
.geo-abstype .gf-bar-field > input,
.geo-abstype .gf-bar-field > select,
.geo-abstype .gf-bar-field > textarea,
.geo-abstype .gf-bar-field > .gf-val,
.geo-abstype .gf-bar-field > .lk-input,
.geo-abstype input,
.geo-abstype select,
.geo-abstype textarea,
.geo-abstype button                 { font-size: calc(13px / var(--geo-scale, 1)); }