/* Shared screen defaults for Office, Garage and their dialogs. Dedicated controls keep precedence. */
@media screen {
  :where(.portal-shell, dialog, .modal-overlay) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [hidden]), select:not([hidden]), textarea:not([hidden])) {
    box-sizing:border-box;
    width:100%; min-width:0; max-width:100%; min-height:2.75rem;
    padding:.65rem .8rem;
    border:1px solid var(--line); border-radius:10px;
    color:var(--ink-900); background:var(--surface);
    font-family:inherit; font-size:1rem; font-weight:400; line-height:1.35;
    text-transform:none; letter-spacing:normal;
  }
  /* Beat the element-level font reset, while component classes still set their own typography. */
  :where(.portal-shell, dialog, .modal-overlay) :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [hidden])) { font-family:inherit; font-size:1rem; font-weight:400; line-height:1.35; }
  :where(.portal-shell, dialog, .modal-overlay) :where(textarea:not([hidden])) { min-height:6rem; resize:vertical; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input, textarea)::placeholder { color:var(--ink-500); opacity:1; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input, select, textarea):focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input, select, textarea):disabled { cursor:not-allowed; opacity:.65; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input[readonly], textarea[readonly]) { background:var(--surface-soft); }
  :where(.portal-shell, dialog, .modal-overlay) :where(input, select, textarea)[aria-invalid="true"] { border-color:var(--bad); }
  :where(.portal-shell, dialog, .modal-overlay) :where(input, select, textarea):user-invalid { border-color:var(--bad); }

  /* Only labels that actually own a text field are stacked; checkbox cards stay horizontal. */
  :where(.portal-shell, dialog, .modal-overlay) :where(.form-grid, .field-row, .filter-grid) > :where(label:has(> input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), > select, > textarea)) {
    display:flex; flex-direction:column; align-items:stretch; min-width:0;
    color:var(--ink-700); font-size:.875rem; font-weight:600;
  }
  :where(.portal-shell, dialog, .modal-overlay) :where(.form-grid, .field-row, .filter-grid) > :where(label:has(> input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), > select, > textarea)) > :where(span:first-child) { display:block; margin-bottom:.4rem; }
  :where(.portal-shell, dialog, .modal-overlay) :where(.form-grid, .field-row, .filter-grid) > :where(label:has(> input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), > select, > textarea)) > :where(.field-hint, .field-error) { margin-top:.35rem; font-weight:400; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input[type="checkbox"], input[type="radio"]) { width:1.125rem; height:1.125rem; margin:0; accent-color:var(--primary); vertical-align:middle; flex-shrink:0; }
  :where(.portal-shell, dialog, .modal-overlay) :where(.checkbox-row) { min-height:2.75rem; cursor:pointer; }
  :where(.portal-shell, dialog, .modal-overlay) .checkbox-row input[type="checkbox"] { width:1.125rem; height:1.125rem; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input[type="file"]) { max-width:100%; color:var(--ink-700); font:inherit; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input[type="file"])::file-selector-button { margin-right:.75rem; padding:.6rem .8rem; min-height:2.75rem; border:1px solid var(--line); border-radius:8px; color:var(--ink-900); background:var(--surface-soft); font:inherit; cursor:pointer; }

  .document-library-filters { container-type:inline-size; }
  .document-library-filters h3 { margin:0 0 1.15rem; }
  .document-library-filter-grid { grid-template-columns:minmax(0,1fr); gap:1rem; }
  .document-library-filter-grid :is(input, select) { min-height:2.875rem; }
  .document-library-filters .checkbox-row { margin:1rem 0 0; color:var(--ink-700); font-size:.9rem; }
  @container (min-width:32rem) {
    .document-library-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @container (min-width:50rem) {
    .document-library-filter-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,1.6fr); }
  }
}