/* Shared native fields. Width belongs to the form grid; browser semantics,
   autocomplete, input type, constraints and picker UI remain native. */
:root {
  --field-height:25px;
  --field-font-size:12px;
  --field-line-height:18px;
  --field-paper-surface:#f2f2f2;
  --field-canvas-surface:#ffffff;
  --field-surface:var(--field-paper-surface);
  --field-text:#000000;
  --field-muted:#636963;
  --field-focus:#e1c16e;
  --field-error:#b73535;
  --field-radius:3px;
  --field-padding-x:10px;
  --field-select-icon-size:10px;
  --field-border-width:1px;
  --field-content-inset:calc(var(--field-padding-x) + var(--field-border-width));
  --field-row-gap:var(--ui-space,25px);
  --field-action-gap:var(--ui-space-compact,10px);
  --field-inline-min-width:150px;
}
/* Surface owners, not individual fields, establish contrast. Keep the white
   application shell/panels distinct from the gray workspace and navigation.
   Explicit surface declarations below override these semantic defaults. */
:where(body,.layout,#stagingSidebar,.sidebar-column,.sidebar-profile-tabs,
  .staging-task-editor-menu,.portal-module-drawer,
  .staging-sidebar-enabled .employee-rail-settings-tabs) {
  --field-surface:var(--field-canvas-surface);
}
:where(.app,.panel,.card,dialog,.system-standard-dialog,.confirm-card,
  .employee-rail-settings-panel,.employee-rail-global-stats-panel,
  #employeeRailThirdPanel,#employeeRailPasswordPanel,#employeeRailAddClientPanel,
  #employeeRailAddTaskPanel,#clientInfoPanel,#taskFormPanel,#reportingSectionEditorPanel,
  .annual-document-group article) {
  --field-surface:var(--field-paper-surface);
}
/* A gray dialog and gray subnavigation are exceptions to the paper defaults. */
:where(.portal-balance-detail,
  .staging-sidebar-enabled .staging-client-editor-drawer .client-edit-tabbar) {
  --field-surface:var(--field-canvas-surface);
}
[data-field-surface="paper"] {
  --field-surface:var(--field-paper-surface);
}
[data-field-surface="canvas"] { --field-surface:var(--field-canvas-surface); }
/* Inline fields may contract, but never into an unreadable icon-width slot.
   The owning content scroller handles rows that no longer fit. */
.system-standard-field-actions,
.annual-answer-actions,
.missing-file-actions,
.client-editor-selector-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  flex:none;
  gap:var(--field-action-gap);
  min-width:max-content;
}
.system-standard-field-actions > *,
.annual-answer-actions > *,
.missing-file-actions > *,
.client-editor-selector-actions > * { flex-shrink:0; }
.system-standard-field-with-actions { display:flex; align-items:center; flex-wrap:nowrap; gap:var(--ui-space,25px); min-width:0; }
.system-standard-field-with-actions > :is(input,select,textarea,.system-standard-value) { flex:1 0 var(--field-inline-min-width); min-width:var(--field-inline-min-width); }
.system-standard-field-with-actions > .system-standard-field-actions { margin-left:auto; }
.annual-question-input > :is(input,select,textarea,.annual-response),
.annual-question-input > select:not([multiple]):not([size]),
.system-standard-field-with-actions > select:not([multiple]):not([size]),
.agreement-field:has(> .system-standard-raised-control) > :is(input,select,textarea) {
  min-width:var(--field-inline-min-width) !important;
}
.employee-rail-settings-admin-row--sync > button { justify-self:end; }
/* Component-owned appearance overrides old per-panel field declarations.
   Layout-specific widths and textarea heights intentionally remain external. */
.system-standard-field {
  box-sizing:border-box !important;
  min-width:0;
  max-width:100%;
  border:var(--field-border-width) solid transparent !important;
  border-radius:var(--field-radius) !important;
  background-color:var(--field-surface) !important;
  color:var(--field-text) !important;
  font:400 var(--field-font-size)/var(--field-line-height) Raleway,sans-serif !important;
  padding:2px var(--field-padding-x) !important;
  box-shadow:none !important;
}
input.system-standard-field, select.system-standard-field:not([multiple]):not([size]) {
  height:var(--field-height) !important;
  min-height:var(--field-height) !important;
}
select.system-standard-field:not([multiple]):not([size]) {
  appearance:none !important;
  -webkit-appearance:none !important;
  background-image:url("./dropdown-chevron.svg?v=20261017-select-arrow-inset-247") !important;
  background-repeat:no-repeat !important;
  background-position:right var(--field-padding-x) center !important;
  background-size:var(--field-select-icon-size) var(--field-select-icon-size) !important;
  background-origin:padding-box !important;
  padding-right:calc(var(--field-padding-x) * 2 + var(--field-select-icon-size)) !important;
}
textarea.system-standard-field { min-height:75px; padding:var(--ui-space-compact,10px) !important; resize:vertical; }
.system-standard-field::placeholder { color:var(--field-muted); opacity:1; }
/* Compact native fields retain their existing focus border. */
.system-standard-field:focus-visible { outline:2px solid var(--field-focus) !important; outline-offset:-2px !important; }
.system-standard-field:is([aria-invalid="true"],[data-native-invalid="true"],.is-invalid) { border-color:var(--field-error) !important; }
.system-standard-field:is([aria-invalid="true"],[data-native-invalid="true"],.is-invalid):focus-visible { outline-color:var(--field-error) !important; }
.system-standard-field:disabled { opacity:var(--action-disabled-opacity,.5) !important; cursor:not-allowed; }
.system-standard-field[readonly] { color:var(--field-muted) !important; }
/* Read-only source values are information, not editable fields or date pickers. */
.system-standard-field[readonly][aria-readonly="true"] {
  background-color:transparent !important;
  color:var(--field-text) !important;
  cursor:default;
}
/* Plain form values share the field's content edge without an input surface. */
.system-standard-value,
.annual-answer-value,
.annual-document-inline .annual-filename,
.annual-field > small.annual-muted {
  box-sizing:border-box;
  padding-inline:var(--field-content-inset);
}
@media (forced-colors:active) {
  .system-standard-field { border-color:CanvasText !important; background:Canvas !important; color:CanvasText !important; }
  .system-standard-field:disabled { color:GrayText !important; opacity:1 !important; }
  select.system-standard-field:not([multiple]):not([size]) { appearance:auto !important; -webkit-appearance:auto !important; background-image:none !important; }
}

/* Formatting is the compact, fixed text-control variant, not a new icon set. */
.rich-text-toolbar.system-standard-rich-toolbar {
  display:flex !important;
  box-sizing:border-box;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  justify-content:safe flex-end !important;
  gap:var(--ui-action-row-gap,25px) !important;
  padding:0 !important;
  margin:0 !important;
  min-height:25px !important;
  height:25px !important;
  max-height:25px !important;
  border:0 !important;
  background:transparent !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.rich-text-toolbar.system-standard-rich-toolbar::-webkit-scrollbar { display:none; }
.rich-text-toolbar.system-standard-rich-toolbar:is([hidden],.hidden) { display:none !important; }
.rich-text-toolbar.system-standard-rich-toolbar::after { content:none !important; }
.system-standard-rich-toolbar .system-standard-format-button {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:25px;
  height:25px;
  padding:0 5px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--ui-subtle-heading-color,#636963);
  font:400 10px/25px Raleway,sans-serif;
  box-shadow:none;
  cursor:pointer;
  transition:transform 120ms ease;
}
.system-standard-format-button strong { font-weight:600; }
.system-standard-format-button[aria-pressed="true"] { color:var(--field-text); text-decoration:underline; text-underline-offset:3px; }
.system-standard-format-button:active:not(:disabled) { color:var(--field-text); }
.system-standard-format-button:focus-visible { outline:2px solid var(--field-focus); outline-offset:-2px; }
.system-standard-format-button:disabled { opacity:var(--action-disabled-opacity,.5); cursor:not-allowed; }
@media (prefers-reduced-motion:reduce) { .system-standard-rich-toolbar .system-standard-format-button { transition:none; } }
@media (forced-colors:active) {
  .system-standard-rich-toolbar .system-standard-format-button { border:1px solid ButtonText; }
  .system-standard-format-button[aria-pressed="true"] { outline:2px solid Highlight; }
}

/* One field face encloses text and formatting chrome. Specific legacy panel
   selectors also set padding/background, so those properties use the same
   component-owned precedence as native fields above. */
.system-standard-rich-field.system-standard-rich-field {
  box-sizing:border-box; display:flex !important; flex-direction:column; min-width:0;
  padding:10px 10px 0 !important; gap:0 !important;
  border:var(--field-border-width) solid transparent; border-radius:var(--field-radius);
  background:var(--field-surface) !important;
}
.system-standard-rich-field.system-standard-rich-field.system-standard-rich-field > .rich-text-editor {
  order:0; flex:1 1 var(--rich-text-content-basis,96px); box-sizing:border-box; width:100% !important; min-width:0;
  min-height:0 !important; overflow:auto !important;
  margin:0; padding:0 !important; border:0 !important;
  background:transparent !important; box-shadow:none;
  color:var(--field-text); font:400 var(--field-font-size)/var(--field-line-height) Raleway,sans-serif;
}
.system-standard-rich-field > .rich-text-toolbar.system-standard-rich-toolbar {
  order:1; flex:none; width:100% !important; min-width:0;
}
.system-standard-text-editor { --rich-text-content-basis:200px; }
.system-standard-rich-field:focus-within { outline:2px solid var(--field-focus); outline-offset:0; }
/* Both native and viewport-ported merge pickers share the field width. */
:is(.agreement-merge,.portal-email-merge,.employee-rail-merge-tags,.employee-rail-merge-tag-select) {
  --standard-dropdown-width:100%; width:100%; min-width:0; max-width:100%;
}
.employee-rail-merge-tag-select > .employee-rail-merge-tag-trigger { width:100%; }
:is(.agreement-merge,.portal-email-merge) small,
.employee-rail-merge-tags > span,
.employee-rail-merge-tag-option-description {
  color:var(--ui-description-color,#636963); font:400 var(--ui-description-size,12px)/18px Raleway,sans-serif;
}

.employee-rail-merge-tag-option-description { white-space:normal; overflow-wrap:anywhere; text-align:left; }
.employee-rail-merge-tag-option-tag { overflow-wrap:anywhere; white-space:normal; }
.employee-rail-merge-tag-option { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }


/* Rich fields have one accessible outer focus ring, never an inner text outline.
   Padding remains owned by the existing shared field so carets cannot be clipped. */
.system-standard-rich-field > .rich-text-editor:is(:focus,:focus-visible) {
  outline:none !important; box-shadow:none !important;
}
.system-standard-rich-field:has(> .rich-text-editor:is([aria-invalid="true"],[data-native-invalid="true"],.is-invalid)):focus-within { outline-color:var(--field-error); }
textarea.system-standard-field:focus-visible { outline-offset:0 !important; }