/* The picker owns its popup and layout; native fields retain the office Field skin. */
.kit-picker { min-inline-size:0; }
.kit-pick-panel { z-index:1000; overflow:auto; box-sizing:border-box; background:var(--field-bg,var(--ec-surface,var(--surface))); color:var(--field-fg,var(--ec-fg,var(--fg))); border:1px solid var(--select-border); border-radius:var(--field-radius,8px); box-shadow:var(--shadow); overscroll-behavior:contain; }
.kit-pick-panel[hidden], .kit-pick-list[hidden] { display:none; }
.kit-pick-panel .kit-pick-list { position:static; margin:0; padding:4px; list-style:none; max-height:none; border:0; border-radius:0; box-shadow:none; background:transparent; }
.kit-pick-opt { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; padding:10px 12px; min-height:44px; box-sizing:border-box; border-radius:4px; cursor:pointer; overflow-wrap:normal; word-break:normal; font-weight:400; }
.kit-pick-name { flex:1 1 auto; min-inline-size:0; font-weight:400; white-space:normal; }
.kit-pick-meta, .kit-pick-status { color:var(--field-muted,var(--ec-muted,var(--muted))); font-size:var(--field-helper-size,12px); line-height:var(--field-helper-line,18px); overflow-wrap:normal; }
.kit-pick-opt:hover { background:var(--select-active-fill); }
.kit-pick-opt[aria-selected="true"] { background:var(--select-option-chosen); }
.kit-pick-opt[aria-disabled="true"] { cursor:default; color:var(--field-disabled-fg,var(--muted)); }
.kit-pick-create { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.kit-pick-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
.kit-pick-actions > button { min-block-size:44px; }
.kit-pick-chips { display:flex; flex-wrap:wrap; gap:4px; }
@media(max-width:599px) { .kit-pick-create { grid-template-columns:minmax(0,1fr); } .kit-pick-actions > button { inline-size:100%; } }
.kit-pick-opt[data-active="true"] { background:var(--select-option-active); box-shadow:var(--select-option-active-mark); color:var(--select-option-ink); }
.kit-pick-more { display:block; inline-size:100%; min-block-size:44px; }
.kit-pick-chips > span { display:inline-flex; align-items:center; gap:4px; min-inline-size:0; max-inline-size:100%; }
.kit-pick-chip-label { min-inline-size:0; overflow-wrap:anywhere; }
.kit-pick-chips button { flex:0 0 auto; min-block-size:44px; }
@media(forced-colors:active) { .kit-pick-opt[aria-selected="true"], .kit-pick-opt[data-active="true"] { outline-color:Highlight; } }

.kit-picker [hidden], .kit-pick-panel [hidden] { display:none!important; }

.kit-pick-query { -webkit-text-fill-color:currentColor!important; inline-size:100%; min-inline-size:0; max-inline-size:100%; }

/* Inline creation shares the native Field height; labels/errors stay above it. */
@layer kit-office-controls { @media screen {
body.kp-office[data-field-system="office"] .kit-pick-create {
  display:flex!important; flex-wrap:wrap!important; align-items:flex-end!important; gap:var(--s3)!important;
}
body.kp-office[data-field-system="office"] .kit-pick-create>:not(.kit-pick-actions) {
  flex:1 1 12rem; min-inline-size:0; margin:0!important;
}
body.kp-office[data-field-system="office"] .kit-pick-create>.kit-pick-actions {
  display:flex; flex:1 0 100%; flex-wrap:wrap; align-items:center;
  gap:var(--s2); margin:0!important; padding:0;
}
body.kp-office[data-field-system="office"] .kit-pick-create>.kit-pick-actions>button {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  height:var(--field-height-md)!important; min-height:var(--field-height-md)!important;
  margin:0!important; padding-block:0!important; line-height:var(--field-line-height);
}
@media(max-width:599px) {
body.kp-office[data-field-system="office"] .kit-pick-create>:not(.kit-pick-actions),
body.kp-office[data-field-system="office"] .kit-pick-create>.kit-pick-actions { flex-basis:100%; }
body.kp-office[data-field-system="office"] .kit-pick-create>.kit-pick-actions>button { flex:1 1 auto; }
}
} }

/* Inline creation actions use the same green family as the form they belong to. */
body.kp-office[data-field-system="office"] .kit-pick-actions>button {
  min-block-size:var(--field-height-md); padding:var(--s2) var(--s3);
  border:var(--line) solid var(--accent); border-radius:var(--field-radius);
  background:var(--action-quiet-bg,var(--panel-tint)); color:var(--action-quiet-ink,var(--accent));
  font:var(--field-weight) var(--field-font-size)/var(--field-line-height) var(--field-font); cursor:pointer;
}
body.kp-office[data-field-system="office"] .kit-pick-actions>button:is(:hover,:active) {
  background:var(--action-hover,var(--accent)); color:var(--on-accent);
}

/* Small fixed choices share the Field line, with no search or clear action. */
body[data-field-system="office"] .kit-small-choice {
  display:inline-flex; flex-wrap:wrap; align-items:stretch; gap:0; min-inline-size:0; max-inline-size:100%;
  box-sizing:border-box; border:var(--field-edge-width) solid var(--field-line);
  border-bottom-width:var(--field-line-width); border-radius:var(--field-corner);
  background:var(--field-surface); color:var(--field-fg);
}
body[data-field-system="office"] .kit-small-choice>button {
  flex:1 1 auto; min-block-size:44px; min-inline-size:44px; margin:0; padding:var(--s2) var(--s3);
  border:0; border-radius:0; background:transparent; color:var(--field-fg); box-shadow:none;
  font:var(--field-weight) var(--field-font-size)/var(--field-line-height) var(--field-font); cursor:pointer;
}
body[data-field-system="office"] .kit-small-choice>button[aria-checked="true"] { background:var(--field-choice-selected-bg); color:var(--field-choice-selected-fg); font-weight:750; }
body[data-field-system="office"] .kit-small-choice>button:disabled { color:var(--field-disabled-fg); cursor:default; }
body[data-field-system="office"] .kit-small-choice:focus-within { border-color:var(--field-line-focus); border-bottom-width:var(--field-line-width-focus); }
body[data-field-system="office"] .kit-small-choice>button:focus { outline:none; }
body[data-field-system="office"] .kit-small-choice>button:focus-visible { text-decoration:underline; text-underline-offset:4px; }
body[data-field-system="office"] input.kit-pick-choice {
  box-sizing:border-box; inline-size:100%; min-block-size:var(--field-height-md); margin:0;
  padding:var(--field-pad-y-md) calc(var(--field-pad-x-md) + var(--field-adornment-slot)) var(--field-pad-y-md) var(--field-pad-x-md);
  border:var(--field-edge-width) solid var(--field-line); border-bottom-width:var(--field-line-width); border-radius:var(--field-corner);
  background:var(--field-chevron) right var(--field-pad-x-md) center / var(--field-icon) var(--field-icon) no-repeat var(--field-surface);
  color:var(--field-fg); font:var(--field-weight) var(--field-font-size)/var(--field-line-height) var(--field-font); text-align:start; cursor:pointer; box-shadow:none;
}
body[data-field-system="office"] input.kit-pick-choice:focus { outline:none; border-color:var(--field-line-focus); border-bottom-width:var(--field-line-width-focus); }
body[data-field-system="office"] input.kit-pick-choice:disabled { color:var(--field-disabled-fg); }
body[data-field-system="office"] .kit-small-choice:has(+[data-kit-choice-money]) { flex:0 0 auto; border:0; }
body[data-field-system="office"] .nl-ag-v:has([data-kit-choice-money]) { border-bottom:var(--field-line-width) solid var(--field-line); box-shadow:none; }
body[data-field-system="office"] .nl-ag-v:has([data-kit-choice-money]):focus-within { border-color:var(--field-line-focus); border-bottom-width:var(--field-line-width-focus); }
body[data-field-system="office"] .nl-ag-v:has([data-kit-choice-money]) input { border:0!important; }
body[data-field-system="office"] [hidden]+[aria-hidden="true"][hidden] { display:none!important; }
body[data-field-system="office"] .nl-vatf:has(.kit-small-choice) { display:flex; flex-wrap:wrap; }
body[data-field-system="office"] [data-kit-small-choice][hidden] { display:none!important; }
.kit-choice-decoration[hidden], .kit-pick-status:empty { display:none!important; }
@layer kit-office-controls {
body[data-field-system="office"] input.kit-pick-choice {
  --field-pad-x:var(--field-pad-x-md);
  border:var(--field-edge-width) solid var(--field-line)!important;
  border-bottom-width:var(--field-line-width)!important;
  border-radius:var(--field-corner)!important; background-color:var(--field-surface)!important;
  padding-inline:var(--field-pad-x-md) calc(var(--field-pad-x-md) + var(--field-adornment-slot))!important;
  background-position:right var(--field-pad-x-md) center!important;
}
body[data-field-system="office"] input.kit-pick-choice:focus {
  border-color:var(--field-line-focus)!important; border-bottom-width:var(--field-line-width-focus)!important;
}
body[data-field-system="office"] .nl-ag-v:has([data-kit-choice-money]) {
  border-bottom:var(--field-line-width) solid var(--field-line)!important; box-shadow:none!important;
}
body[data-field-system="office"] .nl-ag-v:has([data-kit-choice-money]):focus-within {
  border-bottom:var(--field-line-width-focus) solid var(--field-line-focus)!important;
}
body[data-field-system="office"] .nl-ag-v:has([data-kit-choice-money]) input { border:0!important; }
}
/* Header choices retain the shell's compact geometry. */
body[data-field-system="office"] .top .brform input.kit-pick-query {
  inline-size:auto; width:max-content; max-inline-size:10rem; flex:0 0 auto;
}

/* Choice selection is a snug pill inside a stable touch target row. */
body[data-field-system="office"] .kit-small-choice { align-items:center; gap:4px; min-block-size:44px; background:transparent; border:0; }
body[data-field-system="office"] .kit-small-choice>button { flex:0 0 auto; min-inline-size:0; min-block-size:30px; padding:4px 10px; border-radius:999px; font-size:.875rem; line-height:1.4; }
body[data-field-system="office"] .kit-small-choice>button:not([aria-checked="true"]):hover { background:color-mix(in srgb,var(--field-choice-selected-bg) 8%,transparent); color:var(--field-fg); }
body[data-field-system="office"] .kit-small-choice>button[aria-checked="true"]:hover { background:var(--field-choice-selected-bg); color:var(--field-choice-selected-fg); }
@layer kit-office-controls {
  body.kp-office #main .kit-small-choice>button { flex:0 1 auto!important; width:auto!important; height:auto!important; min-height:30px!important; min-width:0!important; padding:4px 10px!important; border-radius:999px!important; }
}

.kit-pick-panel > .kit-pick-status:not(:empty) { padding:4px 16px 8px; }
/* Board 586: every selectable kit-pick row reserves its checkmark slot; the check shows only when chosen (no chosen tint). The menu variant keeps its own tick. */
.kit-pick-opt:not(.kit-pick-menu .kit-pick-opt) { position:relative; padding-inline-end:36px; }
.kit-pick-opt:not(.kit-pick-menu .kit-pick-opt)::after { content:"✓" / ""; position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); visibility:hidden; color:var(--select-option-ink); }
.kit-pick-opt:not(.kit-pick-menu .kit-pick-opt)[aria-selected="true"]::after { visibility:visible; }

/* A paper branch is a named lock with an explanation, rather than a dead select. */
.kit-branch-locked { font-weight:400; cursor:help; }
/* One branch control everywhere: a paper's fixed branch is the same box as the top bar's branch select (the same field tokens: height, border, radius, fill, 14px text), with the lock as a quiet mark inside, never a green outlined button. */
html[data-layout] .top .brform .btn.kit-branch-locked{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:32px;min-height:32px;padding:0 10px;border:1px solid var(--field-border,var(--border));border-radius:var(--field-radius,8px);background:var(--field-bg,var(--surface));color:var(--field-fg,var(--fg));box-shadow:none;font-size:14px;font-weight:400;line-height:1;width:max-content;max-width:none;flex:0 0 auto}
html[data-layout] .top .brform .btn.kit-branch-locked:hover{background:var(--field-bg,var(--surface));border-color:var(--field-border,var(--border))}
html[data-layout] .top .brform .btn.kit-branch-locked .i{width:14px;height:14px;flex:none;color:var(--muted,var(--fg));opacity:.7}
.kit-branch-reason { position:fixed; z-index:1001; box-sizing:border-box; inline-size:max-content; max-inline-size:min(360px,calc(100vw - 8px)); padding:10px 12px; border:1px solid var(--field-border,var(--border)); border-radius:8px; background:var(--field-bg,var(--surface)); color:var(--field-fg,var(--fg)); box-shadow:var(--shadow); white-space:normal; font-size:14px; font-weight:400; line-height:1.5; }
.kit-branch-reason[hidden] { display:none!important; }

.brform[data-paper] > [hidden] { display:none!important; }

.kit-pick-status:empty { display:none; }

/* Result announcements never occupy space beside a field. */
.kit-pick-status, .kit-pick-status-sr { position:absolute!important; inline-size:1px!important; block-size:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
.kit-pick-menu .kit-pick-name { white-space:nowrap; overflow-wrap:normal; }
/* Board 596: the menu row reserves the same 36px check slot; two classes plus the row beat the office row padding (body.kp-office .kit-pick-opt), which had left it at 12px. */
.kit-pick-menu.kit-pick-panel .kit-pick-opt { position:relative; padding-inline-end:36px; }
.kit-pick-menu .kit-pick-opt[aria-selected="true"] { color:var(--accent); background:var(--select-option-chosen); }
/* Board 596: the chosen tick is drawn on the row, with empty alt text, so it never enters the option name. */
.kit-pick-menu .kit-pick-opt[aria-selected="true"]::after { content:"✓" / ""; position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); }

/* A short choice keeps every value visible, with an explicit unchosen boundary. */
body[data-field-system="office"] .kit-small-choice { flex-wrap:nowrap; }
body[data-field-system="office"] .kit-small-choice>button { border:1px solid var(--border); background:var(--surface); color:var(--fg); }
body[data-field-system="office"] .kit-small-choice>button[aria-checked="true"] { border-color:var(--accent); background:var(--accent); color:var(--component-on-accent,#fff); }

.kit-js [data-sale-branch-move] { display:none!important; }
.sa-branch-readout { display:inline-block; color:var(--muted); font-weight:400; }

/* Selected records share the app field treatment and remain removable by touch. */
body[data-field-system="office"] .kit-pick-chips:not(:empty) { margin-block:4px; }
body[data-field-system="office"] .kit-pick-chips>span { padding-inline:8px 0; border:1px solid var(--border); border-radius:var(--field-radius,8px); background:var(--field-surface,var(--surface)); }
body[data-field-system="office"] .kit-pick-chips button { min-inline-size:44px; min-block-size:44px; margin:0; padding:4px 8px; border:0; border-radius:var(--field-radius,8px); background:transparent; color:var(--accent); font:inherit; cursor:pointer; }
body[data-field-system="office"] .kit-pick-chips button:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
body[data-field-system="office"] .kit-pick-chips button:disabled { opacity:.5; cursor:default; }
/* Keep all short options side by side inside their field, including long labels. */
body[data-field-system="office"] .kit-small-choice>button { flex:0 1 auto; min-inline-size:0; white-space:normal; overflow-wrap:anywhere; }

[data-kit-pick-fallback][hidden] { display:none!important; }

/* Paper pages: the picker's suggestions look like the paper's own suggestion list (kp-suggestions). */
.kit-pick-panel.kit-pick-paper{padding:5px;border:1px solid var(--select-border);border-radius:6px;background:var(--component-surface,#fff);box-shadow:0 6px 20px #0002;font-family:inherit}
.kit-pick-paper .kit-pick-list{padding:0}
.kit-pick-paper .kit-pick-opt{min-height:32px;padding:10px;gap:0 12px;border-radius:4px;align-items:center;font-size:15px;font-weight:400;line-height:1.5;color:var(--component-ink,#232923)}
.kit-pick-paper .kit-pick-opt:hover{background:var(--select-active-fill)}
.kit-pick-paper .kit-pick-opt[aria-selected="true"]{background:var(--select-option-chosen)}
.kit-pick-paper .kit-pick-opt[data-active="true"]{background:var(--select-option-active);box-shadow:var(--select-option-active-mark);color:var(--select-option-ink)}
.kit-pick-paper .kit-pick-name{font-size:15px;font-weight:400}
.kit-pick-paper .kit-pick-meta{font-size:13px;line-height:1.5;color:var(--component-muted,#5c6370)}
.kit-pick-paper .kit-pick-more{min-block-size:32px;font-size:13px}
.kit-pick-paper .kit-pick-actions>button{min-block-size:32px}

/* Every picker box is 32px visible: a module rule such as `.in{height:40px}` reaches type=button boxes (not in the office input guard) and made them 44px. The branch switcher keeps its own size. */
body[data-field-system="office"] input.kit-pick-query:not(.brsel):not(.palrow *):not([data-sa-page="sale.new"] *) { box-sizing:border-box; block-size:var(--field-height-md); min-block-size:var(--field-height-md); }

/* Phone: the picker search input stays 32px visible; its 44px tap comes from the wrapper (an input cannot take ::after).
   Padding and negative margin cancel, as in the Field phone rule, so the layout does not move. */
@media(max-width:1199px) {
body[data-field-system="office"] .f.kit-picker:has(>input.kit-pick-query:not(.kit-pick-choice,.brsel)) { box-sizing:border-box; min-height:44px; padding-block:6px; margin-block:-6px; }
}

.kit-pick-opt.kit-pick-opt--create{font-weight:600;border-top:1px solid var(--component-border,var(--border));color:var(--component-accent,var(--accent))}