/* Shared controls and content surfaces. Layout and contextual variants live in main.css. */

:focus-visible { outline: none; box-shadow: var(--ob-focus-ring); }
a:focus-visible { border-radius: var(--ob-radius-md); }
/* Controls inside scroll containers use an inset ring so it is never clipped. */
.ob-main-nav-item:focus-visible, .ob-tab:focus-visible, .ob-tree-link:focus-visible, .ob-tree-toggle:focus-visible, .ob-table-sort:focus-visible, .ob-suggest-option:focus-visible, .ob-menu-item:focus-visible { box-shadow: var(--ob-focus-ring-inset); }

/* Buttons */
.ob-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ob-space-sm);
  height: var(--ob-control-height); padding: 0 var(--ob-space-md);
  border: var(--ob-border-width-xs) solid var(--ob-color-border-control); border-radius: var(--ob-radius-sm);
  background: var(--ob-color-bg); color: var(--ob-color-text);
  font-size: var(--ob-font-size-md); font-weight: var(--ob-font-weight-medium); letter-spacing: var(--ob-letter-spacing-wide);
  line-height: var(--ob-line-height-sm); white-space: nowrap; text-decoration: none; cursor: pointer;
}
a.ob-button:is(:hover, :focus, :active) { color: var(--ob-color-text); } /* link-styled recovery actions keep the button colour over the anchor states */
.ob-button:hover:not(:disabled) { background: var(--ob-color-surface); }
.ob-button:active:not(:disabled) { background: var(--ob-color-surface-hover); }
.ob-button:disabled { border-color: var(--ob-color-text-disabled); color: var(--ob-color-text-disabled); cursor: default; }
.ob-button > .ob-icon { flex: none; }
.ob-button-label { min-width: 0; }
.ob-button--menu { text-align: left; }
.ob-button--menu .ob-button-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-button--primary { background: var(--ob-color-action); border-color: var(--ob-color-action); color: var(--ob-color-text-inverse); }
.ob-button--primary:hover:not(:disabled) { background: var(--ob-color-action-hover); border-color: var(--ob-color-action-hover); }
.ob-button--primary:active:not(:disabled) { background: var(--ob-color-action-active); border-color: var(--ob-color-action-active); }
.ob-button--primary:disabled { background: var(--ob-color-surface); }
.ob-button--ghost { border-color: transparent; background: transparent; font-size: var(--ob-font-size-sm); gap: var(--ob-space-xs); }
.ob-button--link { height: auto; min-height: var(--ob-control-height); padding: var(--ob-space-xs) 0; border: 0; background: transparent; color: var(--ob-color-link); text-decoration: underline; white-space: normal; text-align: left; }
.ob-button--link:hover:not(:disabled) { background: transparent; color: var(--ob-color-link-hover); }
.ob-button--icon { width: var(--ob-control-height); padding: 0; border-color: transparent; background: transparent; }
.ob-button--icon.is-active { background: var(--ob-color-surface); }
.ob-button--icon.ob-button--outlined { border-color: var(--ob-color-border-control); background: var(--ob-color-bg); }
.ob-button--icon.ob-button--outlined:hover:not(:disabled) { background: var(--ob-color-surface); }
.ob-button--pager { width: var(--ob-control-height); height: var(--ob-control-height); padding: 0; } /* follows the shared control height like the page-size select beside it */
.ob-language-select { min-width: var(--ob-language-select-min-width); }

/* Badge / chip */
.ob-badge, .ob-chip {
  display: inline-block; padding: var(--ob-space-2xs) var(--ob-space-md); border-radius: var(--ob-radius-pill);
  color: var(--ob-color-text-inverse); background: var(--ob-color-neutral);
  font-size: var(--ob-font-size-xs); font-weight: var(--ob-font-weight-medium); line-height: var(--ob-line-height-xs);
  letter-spacing: var(--ob-letter-spacing-wider); white-space: nowrap;
}
.ob-chip--success { background: var(--ob-color-success); }
.ob-chip--warning { background: var(--ob-color-warning); }
.ob-chip--error { background: var(--ob-color-error); }
.ob-chip--info { background: var(--ob-color-info); }
.ob-chip--neutral { background: var(--ob-color-neutral); }

.ob-chip { padding: var(--ob-chip-padding-block) var(--ob-space-sm); letter-spacing: var(--ob-letter-spacing-wide); }
/* The outline is drawn inside the box, so every chip shares the 18px height and the same line box. */
.ob-chip--outline { color: var(--ob-color-text-secondary); background: var(--ob-color-bg); box-shadow: inset 0 0 0 var(--ob-border-width-xs) var(--ob-color-border-strong); font-weight: var(--ob-font-weight-regular); }

.ob-disclosure > summary { display: flex; align-items: center; gap: var(--ob-space-sm); max-width: 100%; cursor: pointer; font-weight: var(--ob-font-weight-semibold); line-height: var(--ob-line-height-md); list-style: none; overflow-wrap: anywhere; }
.ob-disclosure > summary::-webkit-details-marker { display: none; }
.ob-disclosure > summary::before { content: ''; flex: none; width: var(--ob-icon-size-xs); height: var(--ob-icon-size-xs); background: currentColor; mask: var(--ob-icon-chevron_down) center / contain no-repeat; }
.ob-disclosure[open] > summary::before { transform: rotate(180deg); }
.ob-disclosure > summary:focus-visible { box-shadow: var(--ob-focus-ring-inset); }

/* Shared input/select foundation; search owns its icon clearances. */
.ob-input, .ob-select {
  min-width: 0; max-width: 100%; height: var(--ob-control-height);
  border: var(--ob-border-width-xs) solid var(--ob-color-border-input);
  background: var(--ob-color-bg); color: var(--ob-color-text);
  font-family: var(--ob-font-family-body); font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md);
}
.ob-input { border-radius: var(--ob-radius-lg); padding-inline: var(--ob-space-sm); }
.ob-select { border-radius: var(--ob-radius-sm); padding: 0 var(--ob-space-sm); }
.ob-select-menu { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ob-select-menu > * { grid-area: 1 / 1; min-width: 0; width: 100%; }
/* The native control sizes the field by its options and remains the single value store. */
.ob-select-menu > select[aria-hidden] { visibility: hidden; pointer-events: none; }

/* Label/control rhythm. The containing block also keeps clipped labels local. */
.ob-form-field { position: relative; display: flex; flex-direction: column; gap: var(--ob-form-field-gap); min-width: 0; }

/* Small native modals share their surface, viewport bounds and responsive inset. */
.ob-dialog {
  position: fixed; inset: auto 0;
  top: calc(var(--ob-visual-viewport-top) + var(--ob-visual-viewport-height) / 2);
  transform: translateY(-50%); margin: 0 auto;
  width: var(--ob-dialog-width); max-width: calc(100% - 2 * var(--ob-dialog-gutter));
  max-height: calc(var(--ob-visual-viewport-height) - 2 * var(--ob-dialog-gutter));
  padding: var(--ob-dialog-padding); overflow: auto; overscroll-behavior: contain;
  border: var(--ob-border-width-xs) solid var(--ob-color-border-strong);
  border-radius: var(--ob-radius-lg); box-shadow: var(--ob-shadow-lg);
  background: var(--ob-color-bg); color: var(--ob-color-text); font: inherit; letter-spacing: inherit;
}
.ob-dialog::backdrop { background: var(--ob-color-modal-backdrop); }

/* Choice popovers share a fixed surface and a scrolling body above their actions.
   Positioning, available height and focus behavior remain with each controller. */
.ob-choice-popover {
  position: fixed; inset: auto; margin: 0;
  width: min(var(--ob-choice-popover-width, var(--ob-popover-width)), calc(100vw - var(--ob-space-default)));
  max-height: calc(var(--ob-visual-viewport-height) - var(--ob-space-default));
  padding: var(--ob-space-default); border: var(--ob-border-width-xs) solid var(--ob-color-border);
  background: var(--ob-color-bg); color: var(--ob-color-text); box-shadow: var(--ob-shadow-lg); overflow: hidden;
}
.ob-choice-popover:popover-open, .ob-choice-popover form { display: flex; flex-direction: column; min-height: 0; }
.ob-choice-popover h3 { flex: none; font-size: var(--ob-font-size-md); margin-bottom: var(--ob-space-default); }
.ob-choice-popover-body { display: flex; flex-direction: column; gap: var(--ob-space-sm); min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--ob-space-xs); }
.ob-choice-popover-body > * { flex: none; }
.ob-choice-popover-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--ob-space-sm); padding-top: var(--ob-space-default); }
.ob-choice-popover-actions .ob-button { height: auto; min-height: var(--ob-control-height); white-space: normal; }

/* Native checkboxes share spacing and touch sizing across filter groups. */
.ob-check { display: flex; align-items: center; gap: var(--ob-space-sm); min-height: var(--ob-control-height); padding-block: var(--ob-space-xs); cursor: pointer; }
.ob-check input, .ob-check-input { flex: none; width: var(--ob-icon-size-lg); height: var(--ob-icon-size-lg); margin: 0; accent-color: var(--ob-color-neutral); }
.ob-check > span { min-width: 0; overflow-wrap: anywhere; }

/* Quiet icon actions inside inputs and notices, with one interaction state. */
.ob-icon-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--ob-control-height-sm); height: var(--ob-control-height-sm); padding: 0;
  border: 0; border-radius: var(--ob-radius-sm); background: transparent;
  color: var(--ob-color-text-secondary); cursor: pointer;
}
.ob-icon-button:hover:not(:disabled) { background: var(--ob-color-surface); }
.ob-icon-button:disabled { color: var(--ob-color-text-disabled); cursor: default; }

/* Filled navigation cards: shared surface, wrapping and interaction states. */
.ob-card {
  display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere;
  border-radius: var(--ob-radius-sm); background: var(--ob-color-surface);
  color: var(--ob-color-text); text-decoration: none;
}
.ob-card:hover, .ob-card:focus-visible { background: var(--ob-color-surface-hover); color: var(--ob-color-text); }

.ob-panel { padding: var(--ob-panel-padding); background: var(--ob-color-surface); border: var(--ob-border-width-xs) solid var(--ob-color-border); border-radius: var(--ob-radius-lg); }

/* Empty states retain local recovery actions and share text hierarchy. */
.ob-empty { padding: var(--ob-space-3xl) var(--ob-space-lg); text-align: center; color: var(--ob-color-text-secondary); border: var(--ob-border-width-xs) solid var(--ob-color-border-strong); overflow-wrap: anywhere; }
.ob-empty-title { font-size: var(--ob-font-size-lg); font-weight: var(--ob-font-weight-bold); letter-spacing: 0; color: var(--ob-color-text); margin-bottom: var(--ob-space-sm); }
.ob-empty-action { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ob-space-sm); margin-top: var(--ob-space-md); }
.ob-empty-action .ob-button { height: auto; min-height: var(--ob-control-height); max-width: 100%; padding-block: var(--ob-space-xs); white-space: normal; }
.ob-empty--plain { padding: var(--ob-space-default); border: 0; }

/* Shared loading status; the overlay leaves navigation usable during exports. */
.ob-loading {
  display: flex; align-items: center; justify-content: center;
  padding: var(--ob-space-lg); color: var(--ob-color-text); text-align: center;
}
.ob-loading-content { display: flex; flex-direction: column; align-items: center; gap: var(--ob-space-default); max-width: 100%; overflow-wrap: anywhere; }
.ob-loading-label { font-weight: var(--ob-font-weight-medium); }
.ob-spinner {
  display: block; flex: none; width: var(--ob-spinner-size); height: var(--ob-spinner-size);
  border: var(--ob-border-width-lg) solid var(--ob-color-border);
  border-top-color: var(--ob-color-accent-strong); border-radius: var(--ob-radius-pill);
  animation: ob-spin var(--ob-spinner-duration) linear infinite;
}
.ob-loading--overlay {
  position: fixed; inset: var(--ob-visual-viewport-top) 0 auto; height: var(--ob-visual-viewport-height);
  z-index: var(--ob-z-overlay); pointer-events: none;
}
.ob-loading--overlay .ob-loading-content {
  padding: var(--ob-space-lg) var(--ob-space-xl); background: var(--ob-color-bg);
  border: var(--ob-border-width-xs) solid var(--ob-color-border); border-radius: var(--ob-radius-lg);
  box-shadow: var(--ob-shadow-lg);
}
.ob-loading[hidden] { display: none; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ob-spinner { animation: none; } }
@media (forced-colors: active) {
  .ob-spinner { border-color: CanvasText; border-top-color: Highlight; forced-color-adjust: none; }
}
@media print { .ob-loading { display: none !important; } }

/* The same input policy applies to tablets, phones and desktop touch screens. */
@media (any-pointer: coarse), (max-width: 960px) {
  .ob-button, .ob-tab, .ob-menu-item, .ob-group-header, .ob-disclosure > summary, .ob-input, .ob-select, .ob-icon-button, .ob-check { min-height: var(--ob-touch-target); }
  .ob-input, .ob-select { font-size: var(--ob-font-size-input); }
  .ob-button--icon, .ob-icon-button { min-width: var(--ob-touch-target); }
}