/* Shared action sizes. Navigation, scientific drawings and editor toolbars
   keep their component-specific dimensions. Loaded after component styles. */
:root {
  --control-normal-size:28px;
  --control-compact-size:24px;
  --control-size:var(--control-normal-size);
  --control-icon:14px;
  --control-small-icon:12px;
  --control-footprint:28px;
  --control-row-footprint:24px;
}

/* Shared settings controls.  A switch always wraps a native checkbox so its
   keyboard and form behaviour remain available without JavaScript. */
.ui-row {
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-width:0;padding:8px 0;color:var(--text);
}
.ui-row-copy {display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:2px}
.ui-row-title {font-size:var(--ui-body);font-weight:500;line-height:1.35}
.ui-row-hint {font-size:var(--ui-caption);line-height:1.4;color:var(--text3)}
.ui-row-control {display:flex;flex:0 0 auto;align-items:center;gap:8px;min-width:0}
.ui-control-status {min-width:0;font-size:var(--ui-caption);color:var(--text3)}
.ui-control-status:empty {display:none}
.ui-row[data-state="saving"] .ui-control-status {color:var(--text2)}
.ui-row[data-state="saved"] .ui-control-status {color:var(--green-ink,var(--green))}
.ui-row[data-state="error"] .ui-control-status {color:var(--red);font-weight:600}

.ui-switch {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:38px;height:22px;margin:0;cursor:pointer;
}
.ui-switch>input {
  appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:38px;height:22px;
  margin:0;border:1px solid var(--border2);border-radius:999px;
  background:var(--bg4,var(--border2));cursor:pointer;
  transition:background var(--mo-fast) var(--mo-io),border-color var(--mo-fast) var(--mo-io),box-shadow var(--mo-fast) var(--mo-io);
}
.ui-switch>span {
  position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:1px solid var(--border);box-sizing:border-box;
  pointer-events:none;transition:transform var(--mo-fast) var(--mo-io),background var(--mo-fast) var(--mo-io);
}
.ui-switch>input:checked {background:var(--accent-ink);border-color:var(--accent-ink)}
.ui-switch>input:checked+span {transform:translateX(16px);background:var(--bg2)}
.ui-switch>input:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.ui-switch>input:disabled {cursor:not-allowed;opacity:.55}
.ui-switch:has(>input:disabled) {cursor:not-allowed}
.ui-switch[aria-busy="true"]>input {cursor:progress;opacity:.72}
.ui-switch[aria-invalid="true"]>input {border-color:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 18%,transparent)}

.ui-seg {
  display:inline-flex;align-items:stretch;max-width:100%;padding:2px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);
}
.ui-seg button {
  min-height:var(--control-compact-size);padding:3px 10px;border:0;border-radius:calc(var(--r-md) - 2px);
  background:transparent;color:var(--text3);font:inherit;font-size:var(--ui-action);font-weight:500;
  cursor:pointer;white-space:nowrap;transition:background var(--mo-fast) var(--mo-io),color var(--mo-fast) var(--mo-io),box-shadow var(--mo-fast) var(--mo-io);
}
.ui-seg button:hover:not(:disabled):not([aria-checked="true"]) {background:var(--bg3);color:var(--text2)}
.ui-seg button[aria-checked="true"] {background:var(--accent-light);color:var(--accent-ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.ui-seg button:focus-visible {outline:2px solid var(--accent);outline-offset:1px}
.ui-seg button:disabled {cursor:not-allowed;opacity:.55}
.ui-seg[aria-busy="true"] {cursor:progress;opacity:.72}
.ui-seg[aria-invalid="true"] {border-color:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 18%,transparent)}

@media (forced-colors:active) {
  .ui-switch>input {border:2px solid ButtonText;background:Canvas}
  .ui-switch>input:checked {background:Highlight}
  .ui-switch>span {background:ButtonText;border-color:ButtonText}
  .ui-switch>input:checked+span {background:HighlightText}
  .ui-switch[aria-invalid="true"]>input,.ui-seg[aria-invalid="true"] {border-color:Mark}
  .ui-seg button[aria-checked="true"] {background:Highlight;color:HighlightText;forced-color-adjust:none}
}

@media (prefers-reduced-motion:reduce) {
  .ui-switch>input,.ui-switch>span,.ui-seg button {transition:none}
}
:is(.icon-btn,.close-btn,.rxn-draw-row-btn,.eq-star,.home-relations-icon,.mq-add-chip,.mq-add-plus,.av-color,.av-tab,button.ui-unit,.record-more>summary) {
  --control-size:var(--control-normal-size);
  --control-icon:14px;
  position:relative;
  box-sizing:border-box;
  flex-shrink:0;
}
:is(.icon-btn-sm,.rxn-draw-row-btn,.eq-star,.home-relations-icon,.mq-add-chip,.mq-add-plus,.av-color,.av-tab,button.ui-unit),
#eln-editor .eln-file-main .icon-btn,
#detail-panel .lib-stock-actions .icon-btn,
#boxes-grid .box-card-footer>.btn {
  --control-size:var(--control-compact-size);
  --control-icon:var(--control-small-icon);
}
.icon-btn,.close-btn,.record-more>summary,
#detail-panel .icon-btn,#detail-panel .dp-header-actions>.close-btn,
.record-actions .icon-btn,.record-card-heading .icon-btn,.purchase-detail .icon-btn,#rdr-submit,
#eln-editor .eln-file-main .icon-btn:not(.eln-action-menu-items .icon-btn),
#boxes-grid .box-card-footer>.btn {
  width:var(--control-size);min-width:var(--control-size);
  height:var(--control-size);min-height:var(--control-size);padding:0;
}
:is(.icon-btn,.rxn-draw-row-btn,.eq-star,.home-relations-icon,.mq-add-chip,.mq-add-plus,.record-more>summary)>svg,
#detail-panel .icon-btn>svg,.purchase-detail .icon-btn>svg {
  width:var(--control-icon);height:var(--control-icon);flex-shrink:0;
}
:is(.eq-star,.home-relations-icon,.mq-add-plus,.av-color) {
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--control-size);min-width:var(--control-size);height:var(--control-size);padding:0;
}
:is(.rxn-draw-row-btn,.mq-add-chip,.av-tab,button.ui-unit) {
  min-width:var(--control-size);min-height:var(--control-size);height:auto;
  padding:2px 5px;line-height:1.25;
}
@media(min-width:821px) {
  .btn {min-height:var(--control-normal-size)}
  .btn-sm {min-height:var(--control-compact-size)}
}
.lib-detail-docking-row {grid-template-columns:minmax(0,1fr) auto auto var(--control-footprint)}
.purchase-line-actions-inner {grid-template-columns:repeat(4,var(--control-row-footprint))}
.purchase-table td.purchase-line-actions {width:calc(4 * var(--control-row-footprint) + 4px)}
.purchase-table .purchase-line-actions .icon-btn {--control-size:var(--control-compact-size);--control-icon:12px}

/* Detail action sizing must not turn a menu row into an icon square. */
.purchase-detail .purchase-menu .icon-btn {
  width:100%;height:auto;min-height:36px;margin:0;padding:8px;
}

@media(max-width:820px) {
  :root {
    --control-normal-size:32px;--control-compact-size:32px;--control-small-icon:14px;
    --control-footprint:44px;--control-row-footprint:44px;
  }
  /* Six pixels of reserved layout space on every side make each transparent
     extension a separate 44px touch target, including compact table actions. */
  :is(.icon-btn,.close-btn,.rxn-draw-row-btn,.eq-star,.home-relations-icon,.mq-add-chip,.mq-add-plus,.av-color,.av-tab,button.ui-unit,.record-more>summary),
  #detail-panel .icon-btn,#detail-panel .dp-header-actions>.close-btn,
  .record-actions .icon-btn,.record-card-heading .icon-btn,.purchase-detail .icon-btn,#rdr-submit,
  #eln-editor .eln-file-main .icon-btn:not(.eln-action-menu-items .icon-btn),
  #boxes-grid .box-card-footer>.btn {
    --control-icon:14px;
    position:relative;width:var(--control-size);min-width:var(--control-size);
    height:var(--control-size);min-height:var(--control-size);
    padding:0;margin:6px;overflow:visible;vertical-align:middle;
  }
  :is(.rxn-draw-row-btn,.mq-add-chip,.av-tab,button.ui-unit) {
    width:auto;padding:2px 6px;
  }
  :is(.icon-btn,.close-btn,.rxn-draw-row-btn,.eq-star,.home-relations-icon,.mq-add-chip,.mq-add-plus,.av-color,.av-tab,button.ui-unit,.record-more>summary)::before,
  #boxes-grid .box-card-footer>.btn::before {
    content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;
    min-width:44px;min-height:44px;transform:translate(-50%,-50%);pointer-events:auto;
  }
  .purchase-table .purchase-line-actions .icon-btn {margin:6px;--control-icon:14px}
  .equipment-record-row>.eq-star {margin:6px}
  .lc-actions .icon-btn {width:var(--control-size);min-width:var(--control-size)}
  .av-color {flex-shrink:0}
  /* Menus already provide full-width touch rows; retain their native targets. */
  .purchase-detail .purchase-menu .icon-btn,#eln-editor .eln-action-menu-items>.icon-btn {
    width:100%;height:auto;min-height:44px;margin:0;padding:8px;
  }
  .purchase-menu .icon-btn::before,#eln-editor .eln-action-menu-items>.icon-btn::before {content:none}
  .ui-row {align-items:flex-start;gap:10px;padding:10px 0}
  .ui-row-control {min-height:44px;align-items:center}
  .ui-switch {width:44px;height:44px;margin:-11px -3px}
  .ui-switch>input {left:3px;right:auto;top:11px;bottom:auto}
  .ui-switch>span {left:6px;top:14px}
  .ui-seg button {min-height:44px;padding:5px 12px;font-size:var(--ui-action)}
}