/* ExpSoR UI, version 1: the components' default look (Salesforce Lightning-like).
   Everything sits in the "expsor-ui" cascade layer, so any rule a site writes outside a layer
   wins over it, whatever its specificity. To restyle every component at once, set the
   --expsor-* variables (e.g. :root { --expsor-brand: #2e844a; }); to restyle one part, target
   its expsor-* class. Load this file before the site's own stylesheet.
   Author: Chris Hoback */
@layer expsor-ui {
  :where(:root) {
    --expsor-brand: #0176d3;
    --expsor-brand-dark: #014486;
    --expsor-text: #181818;
    --expsor-muted: #5c5c5c;
    --expsor-border: #e5e5e5;
    --expsor-input-border: #c9c9c9;
    --expsor-surface: #fff;
    --expsor-hover: #f3f3f3;
    --expsor-danger: #ba0517;
    --expsor-success: #2e844a;
    --expsor-warning: #fe9339;
    --expsor-tooltip: #032d60;
    --expsor-radius: 0.25rem;
    --expsor-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    --expsor-font-size: 0.875rem;
  }

  /* Fields: label row (label, required star, help), the control, the error under it. */
  .expsor-field { display: grid; gap: 0.25rem; align-content: start; font-size: var(--expsor-font-size); color: var(--expsor-text); }
  expsor-input-field { display: block; }
  /* Author styles outrank the browser's own [hidden] rule, so restate it for the components. */
  :where(.expsor-field, expsor-input-field, expsor-record-form)[hidden] { display: none; }
  .expsor-label-row { display: flex; align-items: center; gap: 0.25rem; min-height: 1.125rem; }
  .expsor-label { font-size: 0.75rem; color: var(--expsor-muted); }
  .expsor-required::before { content: "* "; color: var(--expsor-danger); }
  .expsor-input-control {
    font: inherit; color: var(--expsor-text); width: 100%; box-sizing: border-box;
    padding: 0.375rem 0.5rem; border: 1px solid var(--expsor-input-border); border-radius: var(--expsor-radius); background: var(--expsor-surface);
  }
  textarea.expsor-input-control { min-height: 6rem; resize: vertical; }
  .expsor-input-control:focus { outline: 2px solid var(--expsor-brand); outline-offset: 0; border-color: var(--expsor-brand); }
  .expsor-checkbox { display: flex; align-items: center; gap: 0.375rem; }
  .expsor-checkbox .expsor-input-control { width: 1rem; height: 1rem; padding: 0; }
  .expsor-checkbox .expsor-label { font-size: var(--expsor-font-size); color: var(--expsor-text); }
  .expsor-checkbox-group { display: grid; gap: 0.375rem; margin: 0; padding: 0; border: 0; min-width: 0; }
  .expsor-checkbox-group legend { display: flex; align-items: center; gap: 0.25rem; padding: 0; margin-bottom: 0.25rem; }
  .expsor-invalid, .expsor-invalid:focus { border-color: var(--expsor-danger); box-shadow: 0 0 0 1px var(--expsor-danger); outline-color: var(--expsor-danger); }
  .expsor-error { color: var(--expsor-danger); font-size: 0.75rem; }
  .expsor-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Help: a "?" whose text shows on hover, focus or a tap. */
  .expsor-help { position: relative; display: inline-flex; }
  .expsor-help-icon {
    display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; padding: 0; border-radius: 50%;
    border: 1px solid var(--expsor-input-border); background: var(--expsor-surface); color: var(--expsor-muted);
    font: 700 0.6875rem/1 system-ui, sans-serif; cursor: help;
  }
  .expsor-tooltip {
    display: none; position: absolute; z-index: 45; left: -0.5rem; top: 1.5rem; width: max-content; max-width: min(18rem, 80vw);
    padding: 0.5rem 0.625rem; border-radius: var(--expsor-radius); background: var(--expsor-tooltip); color: #fff;
    font-size: 0.75rem; font-weight: normal; line-height: 1.35; text-transform: none; letter-spacing: normal; box-shadow: var(--expsor-shadow);
  }
  .expsor-help.expsor-open .expsor-tooltip { display: block; }

  /* Buttons the components draw. */
  .expsor-button {
    font: inherit; cursor: pointer; padding: 0.375rem 1rem; border-radius: var(--expsor-radius); line-height: 1.25;
    border: 1px solid var(--expsor-input-border); background: var(--expsor-surface); color: var(--expsor-brand);
  }
  .expsor-button:hover { background: var(--expsor-hover); }
  .expsor-button.expsor-brand { background: var(--expsor-brand); border-color: var(--expsor-brand); color: #fff; }
  .expsor-button.expsor-brand:hover { background: var(--expsor-brand-dark); }
  .expsor-button.expsor-destructive { background: var(--expsor-danger); border-color: var(--expsor-danger); color: #fff; }
  .expsor-button:disabled { opacity: 0.5; cursor: default; }
  .expsor-link { font: inherit; border: 0; background: none; padding: 0; color: var(--expsor-brand); cursor: pointer; text-align: left; }
  .expsor-link:hover { text-decoration: underline; }
  .expsor-alert { padding: 0.75rem 1rem; border-radius: var(--expsor-radius); background: #fef1ee; border: 1px solid #f3b7a9; color: var(--expsor-danger); }
  .expsor-success { padding: 0.75rem 1rem; border-radius: var(--expsor-radius); background: #ebf7e6; border: 1px solid #91db8b; color: #194e31; }

  /* Record form: fields in columns, actions at the bottom. */
  .expsor-record-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 0.75rem 2rem; }
  .expsor-form-message:empty { display: none; }
  .expsor-form-message, .expsor-form-actions { grid-column: 1 / -1; }
  .expsor-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px solid var(--expsor-border); }

  /* Lookups: a button that opens recents and a search row. */
  .expsor-lookup { position: relative; display: flex; align-items: center; gap: 0.25rem; }
  .expsor-lookup-value {
    flex: 1; min-height: 2.25rem; text-align: left; font: inherit; color: var(--expsor-text); cursor: pointer;
    padding: 0.375rem 0.5rem; border: 1px solid var(--expsor-input-border); border-radius: var(--expsor-radius); background: var(--expsor-surface);
  }
  .expsor-lookup-value.expsor-placeholder { color: var(--expsor-muted); }
  .expsor-lookup-clear { font: inherit; cursor: pointer; padding: 0.375rem 0.5rem; border: 1px solid var(--expsor-input-border); border-radius: var(--expsor-radius); background: var(--expsor-surface); color: var(--expsor-muted); }
  .expsor-lookup-panel[hidden], .expsor-lookup-clear[hidden] { display: none; }
  .expsor-lookup-panel {
    position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: 2px; display: grid; max-height: 24rem; overflow-y: auto;
    background: var(--expsor-surface); border: 1px solid var(--expsor-border); border-radius: var(--expsor-radius); box-shadow: var(--expsor-shadow);
  }
  .expsor-lookup-option {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: left;
    font: inherit; color: var(--expsor-text); border: 0; border-radius: 0; padding: 0.5rem 0.75rem; background: transparent; cursor: pointer;
  }
  .expsor-lookup-option:hover, .expsor-lookup-option:focus { background: var(--expsor-hover); outline: none; }
  .expsor-lookup-option:focus-visible { box-shadow: inset 3px 0 0 var(--expsor-brand); }
  .expsor-lookup-option.expsor-lookup-search { flex-direction: row; align-items: center; border-bottom: 1px solid var(--expsor-border); font-weight: 600; color: var(--expsor-brand); }
  .expsor-lookup-heading { padding: 0.25rem 0.75rem; font-size: 0.75rem; color: var(--expsor-muted); text-transform: uppercase; }
  /* Every row spans the list: the whole width is clickable and highlights. */
  .expsor-lookup-recents { display: grid; min-height: calc(5 * 3rem); align-content: start; }
  .expsor-lookup-option { width: 100%; box-sizing: border-box; }
  .expsor-lookup-recents .expsor-lookup-option { min-height: 3rem; justify-content: center; }
  .expsor-lookup-placeholder { gap: 0.35rem; cursor: default; }
  .expsor-lookup-secondary { color: var(--expsor-muted); font-size: 0.75rem; }
  .expsor-lookup-empty { padding: 0.5rem 0.75rem; color: var(--expsor-muted); font-size: 0.75rem; }
  .expsor-lookup-none { border-top: 1px solid var(--expsor-border); color: var(--expsor-muted); }
  .expsor-lookup-window { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; }
  .expsor-lookup-window table { table-layout: fixed; width: 100%; border-collapse: collapse; }
  .expsor-lookup-window th { text-align: left; font-size: 0.75rem; color: var(--expsor-muted); padding: 0.5rem; border-bottom: 1px solid var(--expsor-border); }
  .expsor-lookup-window td { padding: 0.5rem; border-bottom: 1px solid var(--expsor-border); }
  .expsor-lookup-window td, .expsor-lookup-window th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .expsor-lookup-status { min-height: 1.25rem; margin: 0; color: var(--expsor-muted); font-size: 0.75rem; }
  .expsor-lookup-result { cursor: pointer; }
  .expsor-lookup-result:hover td { background: var(--expsor-hover); }

  /* Files: a FILE field (button, name, ×) and a record's Files list. */
  .expsor-file { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 2.25rem; }
  .expsor-file-pick { font: inherit; cursor: pointer; padding: 0.375rem 0.75rem; border: 1px solid var(--expsor-input-border); border-radius: var(--expsor-radius); background: var(--expsor-surface); color: var(--expsor-brand); }
  .expsor-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .expsor-file .expsor-placeholder { color: var(--expsor-muted); }
  .expsor-files { display: block; background: var(--expsor-surface); border: 1px solid var(--expsor-border); border-radius: var(--expsor-radius); }
  .expsor-files-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--expsor-border); }
  .expsor-files-header h2 { flex: 1; margin: 0; font-size: 1rem; }
  .expsor-files-count { color: var(--expsor-muted); font-weight: 400; }
  .expsor-files-body { padding: 0.75rem 1rem; }
  .expsor-files-body table { width: 100%; border-collapse: collapse; }
  .expsor-files-body th { text-align: left; font-size: 0.75rem; color: var(--expsor-muted); padding: 0.5rem; border-bottom: 1px solid var(--expsor-border); }
  .expsor-files-body td { padding: 0.5rem; border-bottom: 1px solid var(--expsor-border); vertical-align: top; }
  .expsor-files-empty { margin: 0; color: var(--expsor-muted); }
  .expsor-nowrap { white-space: nowrap; }

  /* Modals: above an edit bar (z-index 30), below toasts. The page behind is inert. */
  .expsor-backdrop { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(8, 7, 7, 0.6); }
  .expsor-sentinel { position: fixed; width: 1px; height: 1px; overflow: hidden; outline: none; }
  .expsor-modal {
    display: flex; flex-direction: column; width: min(28rem, 92vw); max-height: 86vh;
    background: var(--expsor-surface); color: var(--expsor-text); border-radius: var(--expsor-radius); box-shadow: var(--expsor-shadow); font-size: var(--expsor-font-size);
  }
  /* Wide dialogs keep one size whatever they hold; their body scrolls. */
  .expsor-modal-wide { width: min(48rem, 94vw); height: min(36rem, 86vh); }
  .expsor-modal-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--expsor-border); }
  .expsor-modal-header h2 { margin: 0; font-size: 1rem; }
  .expsor-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 1rem; }
  .expsor-modal-body > p { margin: 0; }
  .expsor-modal-footer { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.75rem 1rem; border-top: 1px solid var(--expsor-border); }

  /* Toasts: at the top of the window, full width on phones. */
  .expsor-toasts { position: fixed; top: 0.5rem; left: 50%; transform: translateX(-50%); z-index: 40; display: grid; gap: 0.5rem; width: min(36rem, calc(100vw - 1rem)); }
  .expsor-toast {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1rem; border-radius: var(--expsor-radius);
    color: #fff; background: #706e6b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); animation: expsor-toast-in 0.2s ease-out; font-size: var(--expsor-font-size);
  }
  .expsor-toast-success { background: var(--expsor-success); }
  .expsor-toast-error { background: var(--expsor-danger); }
  .expsor-toast-warning { background: var(--expsor-warning); color: #181818; }
  .expsor-toast-icon { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border: 2px solid currentColor; border-radius: 50%; font-size: 0.75rem; font-weight: 700; }
  .expsor-toast-message { flex: 1; line-height: 1.4; }
  .expsor-toast-close { flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
  @keyframes expsor-toast-in { from { transform: translateY(-0.5rem); opacity: 0; } }

  /* Loading placeholders. */
  .expsor-skeleton {
    display: inline-block; height: 0.75rem; border-radius: 0.25rem;
    background: linear-gradient(90deg, #ecebea 25%, #f8f8f8 50%, #ecebea 75%); background-size: 200% 100%; animation: expsor-skeleton 1.2s ease-in-out infinite;
  }
  @keyframes expsor-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .expsor-toast, .expsor-skeleton { animation: none; } }
}