/* Fields in Arc's manner (piece 7, group C, 2026-10-29).
 *
 * One text field for the whole portal: Arc input, search-field, textarea and
 * number-field on Cairn's compact scale (review §4.4, D1, D2).
 *
 * - 32px tall (28px in dense containers: table cells, toolbars, filter
 *   strips, .oc-dense), 40px on touch; 8px radius; --arc-border-strong edge;
 *   --arc-surface fill; muted placeholder.
 * - Hover firms the edge; focus answers with the accent edge and a soft
 *   accent ring; invalid turns both to danger; disabled and read-only sit
 *   on the muted surface. The field never changes size.
 * - Helper and error rows (.oc-field__msg) open on a smooth height spring
 *   with the grid-rows trick; they close faster than they open.
 * - Search fields: arc_fields.js lays a leading glass and a clear button
 *   over input[type=search] (the input stays where it is).
 * - Numbers read in tabular figures.
 *
 * Out of scope here: the chat composer and Helm input (group F), the top
 * bar launcher, the sidebar search (it only takes the focus ring), PM OS
 * plates (D7), chart-kit controls, and anything marked data-arc-field="off".
 * Selects: native selects take the same box until arc_select.js upgrades
 * them; multiple selects keep it.
 */

/* ---- The field ----------------------------------------------------------- */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], select, textarea):not(#chat-input, #helm-input, #th-chat-input, #an-input, #sb-ticker-search, #tb-ticker-search, .oc-cmdp__input, .oc-askbar__input, .oc-ss-input, .an-input, .s-rename-input, .oc-select-native, [data-arc-field="off"], [hidden]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .chat-input-wrap *, .im-composer *, .md-editor-wrap *, .st-preview__form *, .oc-askbar *, .oc-cmdp *, .oc-ss *, :is(.ck-shell, .ck-rail, .ck-rail-flyout, .ck-rail-flyout-menu, .ck-dd-menu, .ck-ctx-menu, .ck-tools-sheet, .ck-tools-grid, .ck-sheet__panel, .ck-object-bar, .ck-replay-bar, .ck-ohlc--toolbar) *, [data-arc-field="off"] *) {
  box-sizing: border-box;
  padding-inline-end: var(--arc-space-3);
  border: 1px solid var(--arc-border-strong) !important;
  border-radius: var(--arc-radius-button) !important;
  background-color: var(--arc-surface);
  color: var(--arc-foreground);
  font-family: inherit;
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight);
  letter-spacing: var(--arc-tracking);
  line-height: normal;
  box-shadow: none !important;
  outline: none !important;
  transition:
    border-color var(--arc-dur-fast) var(--arc-ease),
    box-shadow var(--arc-dur-fast) var(--arc-ease),
    background-color var(--arc-dur-fast) var(--arc-ease);
}
/* One-line fields and single selects: one height. (Textareas and list
   selects keep the height their page gives them.) */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], select:not([multiple], [size]:not([size="1"]))):not(#chat-input, #helm-input, #th-chat-input, #an-input, #sb-ticker-search, #tb-ticker-search, .oc-cmdp__input, .oc-askbar__input, .oc-ss-input, .an-input, .s-rename-input, .oc-select-native, [data-arc-field="off"], [hidden]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .chat-input-wrap *, .im-composer *, .md-editor-wrap *, .st-preview__form *, .oc-askbar *, .oc-cmdp *, .oc-ss *, :is(.ck-shell, .ck-rail, .ck-rail-flyout, .ck-rail-flyout-menu, .ck-dd-menu, .ck-ctx-menu, .ck-tools-sheet, .ck-tools-grid, .ck-sheet__panel, .ck-object-bar, .ck-replay-bar, .ck-ohlc--toolbar) *, [data-arc-field="off"] *) {
  height: var(--arc-control-md);
  min-height: var(--arc-control-md);
  padding-block: 0;
}
/* Start padding only where no icon of the page's own sits beside the field. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], select, textarea):not(#chat-input, #helm-input, #th-chat-input, #an-input, #sb-ticker-search, #tb-ticker-search, .oc-cmdp__input, .oc-askbar__input, .oc-ss-input, .an-input, .s-rename-input, .oc-select-native, .oc-search-field, [data-arc-field="off"], [hidden]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .chat-input-wrap *, .im-composer *, .md-editor-wrap *, .st-preview__form *, .oc-askbar *, .oc-cmdp *, .oc-ss *, :is(.ck-shell, .ck-rail, .ck-rail-flyout, .ck-rail-flyout-menu, .ck-dd-menu, .ck-ctx-menu, .ck-tools-sheet, .ck-tools-grid, .ck-sheet__panel, .ck-object-bar, .ck-replay-bar, .ck-ohlc--toolbar) *, [data-arc-field="off"] *, :is(svg, .oc-ico, [data-ico], [class*="icon"], [class*="-ico"]) ~ *) {
  padding-inline-start: var(--arc-space-3);
}

/* Textarea: the same edge and fill, its own height. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) textarea:not(#chat-input, #helm-input, #th-chat-input, #an-input, .an-input, [data-arc-field="off"], [hidden]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .chat-input-wrap *, .im-composer *, .md-editor-wrap *, .st-preview__form *, .oc-askbar *, [data-arc-field="off"] *) {
  padding-block: var(--arc-space-2);
  line-height: 1.5;
  resize: vertical;
}
/* A multiple select is a list, not a control row. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) select:is([multiple], [size]:not([size="1"])):not(:is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  padding: var(--arc-space-1);
}

/* Placeholder in muted ink. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input, textarea):not(#chat-input, #helm-input, #th-chat-input, #an-input, .oc-askbar__input, .oc-cmdp__input):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *)::placeholder {
  color: var(--arc-text-muted);
  opacity: 1;
}

/* Numbers align and change in place. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"]):not(:is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  font-variant-numeric: tabular-nums;
}

/* ---- Dense containers: 28px -------------------------------------------- */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(td, th, .ac-toolbar, .an-sessions__toolbar, .ar-toolbar, .cal-type-filters, .chat-toolbar, .ck-ohlc--toolbar, .dash-tl-toolbar, .filter-strip__bar, .finder-toolbar, .im-composer-toolbar, .mdl-toolbar, .md-toolbar, .mem-toolbar, .pp-toolbar, .pub-toolbar, .pw-activity-toolbar, .pw-cand-toolbar, .pw-claims-toolbar, .pw-notes-toolbar, .pw-th-toolbar, .pw-uni-toolbar, .research-filter-strip, .research-toolbar, .rl-toolbar, .scout-peer-toolbar, .sess-toolbar, .sx-toolbar, .thread-composer__md-toolbar, .thread-composer__toolbar, .tk-toolbar, .toolbar, .oc-dense) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], select:not([multiple])):not(.oc-cmdp__input, .oc-ss-input, [data-arc-field="off"], [hidden]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .oc-ss *, :is(.ck-shell, .ck-rail, .ck-rail-flyout, .ck-rail-flyout-menu, .ck-dd-menu, .ck-ctx-menu, .ck-tools-sheet, .ck-tools-grid, .ck-sheet__panel, .ck-object-bar, .ck-replay-bar, .ck-ohlc--toolbar) *) {
  height: var(--arc-control-sm);
  min-height: var(--arc-control-sm);
  padding-inline-end: calc(var(--arc-space-2) + 2px);
}

/* ---- States -------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], select, textarea):hover:not(:focus, :disabled, [readonly], [aria-invalid="true"], #chat-input, #helm-input, #th-chat-input, #an-input, #sb-ticker-search, #tb-ticker-search, .oc-cmdp__input, .oc-askbar__input, .oc-ss-input, .an-input, .s-rename-input, .oc-select-native, [data-arc-field="off"]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .chat-input-wrap *, .im-composer *, .md-editor-wrap *, .st-preview__form *, .oc-askbar *, .oc-cmdp *, .oc-ss *, :is(.ck-shell, .ck-rail, .ck-rail-flyout, .ck-rail-flyout-menu, .ck-dd-menu, .ck-ctx-menu, .ck-tools-sheet, .ck-tools-grid, .ck-sheet__panel, .ck-object-bar, .ck-replay-bar, .ck-ohlc--toolbar) *, [data-arc-field="off"] *) {
    border-color: color-mix(in srgb, var(--arc-foreground) 34%, transparent) !important;
  }
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], select, textarea):is(:focus, :focus-visible):not(#chat-input, #helm-input, #th-chat-input, #an-input, #sb-ticker-search, #tb-ticker-search, .oc-cmdp__input, .oc-askbar__input, .oc-ss-input, .an-input, .s-rename-input, .oc-select-native, [readonly], [data-arc-field="off"]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .chat-input-wrap *, .im-composer *, .md-editor-wrap *, .st-preview__form *, .oc-askbar *, .oc-cmdp *, .oc-ss *, :is(.ck-shell, .ck-rail, .ck-rail-flyout, .ck-rail-flyout-menu, .ck-dd-menu, .ck-ctx-menu, .ck-tools-sheet, .ck-tools-grid, .ck-sheet__panel, .ck-object-bar, .ck-replay-bar, .ck-ohlc--toolbar) *, [data-arc-field="off"] *) {
  border-color: var(--arc-accent) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Invalid: set by a script (aria-invalid) or by the browser after the reader has typed. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input, select, textarea):is([aria-invalid="true"], :user-invalid):not([type="checkbox"], [type="radio"], #chat-input, #helm-input, .oc-cmdp__input):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  border-color: var(--arc-danger) !important;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input, select, textarea):is([aria-invalid="true"], :user-invalid):focus:not([type="checkbox"], [type="radio"], #chat-input, #helm-input, .oc-cmdp__input):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  box-shadow: none !important;
  outline: none !important;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input, select, textarea):disabled:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  background-color: var(--arc-surface-muted);
  color: var(--arc-text-secondary);
  opacity: .6;
  cursor: not-allowed;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input, textarea)[readonly]:not([type="checkbox"], [type="radio"], #chat-input, #helm-input):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  background-color: var(--arc-surface-muted);
  border-color: var(--arc-border) !important;
}

/* The sidebar search keeps its look; focus is its own accent hairline, no ring. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) #sb-ticker-search:is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- Touch: 40px and 16px text (no zoom on focus) ----------------------- */
@media (pointer: coarse) {
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], select:not([multiple])):not(#chat-input, #helm-input, #th-chat-input, #an-input, #sb-ticker-search, #tb-ticker-search, .oc-cmdp__input, .oc-askbar__input, .oc-ss-input, .an-input, .s-rename-input, .oc-select-native, [data-arc-field="off"], [hidden]):not(.top-bar *, .sidebar *, #chat-drawer *, .content-right *, #helm-dock *, :is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *, .chat-input-wrap *, .im-composer *, .oc-askbar *, .oc-cmdp *, .oc-ss *, :is(.ck-shell, .ck-rail, .ck-rail-flyout, .ck-rail-flyout-menu, .ck-dd-menu, .ck-ctx-menu, .ck-tools-sheet, .ck-tools-grid, .ck-sheet__panel, .ck-object-bar, .ck-replay-bar, .ck-ohlc--toolbar) *, [data-arc-field="off"] *) {
    height: var(--arc-control-touch);
    min-height: var(--arc-control-touch);
    font-size: max(16px, var(--arc-text-lg));
  }
}

/* ---- Search fields (arc_fields.js adds the glass and the clear button) ---- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) input.oc-search-field {
  padding-inline-start: calc(var(--arc-space-3) + 20px);
  padding-inline-end: calc(var(--arc-space-2) + 24px);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) input.oc-search-field::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.oc-search-ico,
.oc-search-clear {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}
.oc-search-ico {
  width: 14px;
  height: 14px;
  background-color: var(--arc-text-muted);
  -webkit-mask: var(--ico-search) center / contain no-repeat;
          mask: var(--ico-search) center / contain no-repeat;
  transition: background-color var(--arc-dur-fast) var(--arc-ease);
}
.oc-search-ico.is-awake { background-color: var(--arc-foreground); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-search-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--arc-radius-chip);
  background: transparent;
  color: var(--arc-text-muted);
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(.85);
  transition:
    opacity var(--arc-dur-exit) var(--arc-ease-exit),
    transform var(--arc-dur-exit) var(--arc-ease-exit),
    visibility 0s linear var(--arc-dur-exit),
    background-color var(--arc-dur-fast) var(--arc-ease),
    color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-search-clear.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--arc-dur-fast) var(--arc-ease-enter),
    transform var(--arc-dur) var(--arc-ease-enter),
    visibility 0s,
    background-color var(--arc-dur-fast) var(--arc-ease),
    color var(--arc-dur-fast) var(--arc-ease);
}
.oc-search-clear::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--ico-x) center / contain no-repeat;
          mask: var(--ico-x) center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-search-clear:hover {
    background: var(--arc-hover);
    color: var(--arc-foreground);
  }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-search-clear:active { background: var(--arc-press); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-search-clear:focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 0;
  color: var(--arc-foreground);
}

/* ---- Field rows: label, control, helper / error ------------------------- */
.oc-field { display: grid; min-width: 0; }
.oc-field__label {
  margin-bottom: var(--arc-space-2);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
}
/* The row's height animates from a true zero: the space is padding inside
   the clipped slot, and the track goes 0fr → 1fr. */
.oc-field__msg {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--arc-dur-exit) var(--arc-smooth),
    opacity var(--arc-dur-exit) var(--arc-ease-exit);
}
.oc-field__msg > * { min-height: 0; overflow: hidden; }
.oc-field__msg.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--arc-dur) var(--arc-smooth),
    opacity var(--arc-dur) var(--arc-ease-enter);
}
.oc-field__msg-text {
  display: block;
  padding-top: var(--arc-space-1);
  color: var(--arc-text-muted);
  font-size: var(--arc-text-xs);
  line-height: 1.45;
  transform: translateY(-3px);
  transition: transform var(--arc-dur-exit) var(--arc-ease-exit);
}
.oc-field__msg.is-open .oc-field__msg-text {
  transform: none;
  transition: transform var(--arc-dur) var(--arc-ease-enter);
}
.oc-field__msg--error .oc-field__msg-text { color: var(--arc-danger); }

@media (prefers-reduced-motion: reduce) {
  .oc-field__msg, .oc-field__msg.is-open,
  .oc-field__msg-text, .oc-field__msg.is-open .oc-field__msg-text,
  .oc-search-ico,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-search-clear,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-search-clear.is-on {
    transition: none;
    transform: none;
  }
}