/* Shared density contract, loaded after feature styles. Keep mobile targets
   comfortable while desktop chrome uses the same 14px / 36px control scale. */
.app-shell { font-size: 14px; }
.app-shell .app-page-heading h1,
.app-shell .credential-heading h1 { font-size: 28px; line-height: 1.25; letter-spacing: -.035em; }
.app-shell .app-page-heading p { font-size: 14px; line-height: 1.5; }
.app-shell .app-page-heading { margin-bottom: 24px; }
.app-shell :where(button, input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 36px; }
.app-shell .app-main { padding: 32px 32px 48px; }
.app-shell .app-main.credential-main,
.app-shell.app-page-connections .app-main { padding: 0; }
.app-shell .credential-heading { height: 96px; padding: 20px 24px; }
.app-shell .credential-heading h1 { margin-top: 0; }
.app-shell .credential-workspace { min-height: calc(100dvh - 96px); }
.app-shell .settings-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
.app-shell .settings-nav button { font-size: 14px; padding: 10px 12px; }
.app-shell .settings-panes [data-settings-pane] > h2,
.app-shell .custom-integrations h2,
.app-shell .provider-settings-card h2 { font-size: 22px; }
.app-shell .custom-integrations p,
.app-shell .custom-integrations a,
.app-shell .provider-settings-card > p,
.app-shell .provider-settings-card label,
.app-shell .provider-settings-card input,
.app-shell .provider-key-row button,
.app-shell .provider-check-row button,
.app-shell .provider-state { font-size: 14px; }
.app-shell .provider-settings-card input { padding: 10px 12px; margin-bottom: 16px; }
.app-shell .provider-key-row button,
.app-shell .provider-check-row button { padding: 9px 14px; }
.app-shell .provider-settings-card .provider-billing-note { font-size: 13px; }
.app-shell #catalog-custom { font-size: 14px; padding: 9px 14px; min-height: 36px; border-radius: 8px; margin: 0; }
.app-shell .provider-banner { gap: 16px; min-height: 64px; padding: 14px 18px; border-radius: 10px; }
.app-shell .provider-banner strong { font-size: 16px; }
.app-shell .provider-symbol { width: 40px; font-size: 27px; }
.app-shell .provider-banner button { font-size: 14px; padding: 8px 16px; }
.app-shell .catalog-search-label { height: 42px; margin: 24px 0 16px; padding: 0 14px; gap: 12px; border-radius: 8px; }
.app-shell .catalog-search-label input { font-size: 14px; }
.app-shell .catalog-search-label > span { font-size: 26px; }
.app-shell .catalog-categories { gap: 8px; margin-bottom: 24px; }
.app-shell .catalog-categories button { font-size: 13px; min-height: 34px; padding: 7px 14px; border-radius: 8px; }
.app-shell .app-catalog { margin: 0; gap: 16px; }
.app-shell .app-card { grid-template-columns: 40px minmax(0, 1fr); padding: 18px; gap: 12px; min-height: 144px; border-radius: 10px; }
.app-shell .app-icon, .app-shell .app-icon img { width: 40px; height: 40px; }
.app-shell .app-card h2 { font-size: 16px; letter-spacing: -.02em; }
.app-shell .app-card p { font-size: 13px; margin-top: 7px; }
.app-shell .app-card > button { grid-column: 2; justify-self: start; font-size: 12px; min-height: 30px; padding: 6px 10px; }
.app-shell .app-card-heading { gap: 6px; }
.app-shell .catalog-badge { font-size: 10px; padding: 3px 7px; }
.app-shell .export-panel h2 { font-size: 20px; }
.app-shell .export-panel legend,
.app-shell .export-panel label,
.app-shell .field-label,
.app-shell .export-choice { font-size: 14px; }
.app-shell .scope-picker > summary,
.app-shell .fixed-format,
.app-shell .export-panel select,
.app-shell .export-panel input[type="password"] { font-size: 14px; min-height: 38px; padding: 8px 12px; }
.app-shell .choice-indicator { width: 20px; height: 20px; flex-basis: 20px; font-size: 16px; }
.app-shell #search-home { max-width: 760px; padding-top: 25vh; }
.app-shell #search-title { font-size: clamp(32px, 3vw, 44px); }
.app-shell .search-subtitle { font-size: 16px; margin: 14px 0 32px; }
.app-shell #search-home .quick-top { min-height: 56px; padding: 12px 18px; border-radius: 12px; gap: 14px; }
.app-shell #search-home .quick-top input { font-size: 16px; }
.app-shell #search-home .quick-shortcut { font-size: 13px; }

/* Delayed, quiet page skeleton; never a full-window authorization interstitial. */
#workspace-loading { position: fixed; top: 36px; left: calc(var(--app-rail, 224px) + 32px); right: 32px; visibility: hidden; pointer-events: none; }
#workspace-loading::before, #workspace-loading::after { content: ''; display: block; border-radius: 8px; background: var(--workspace-skeleton, #edf1ef); }
#workspace-loading::before { width: min(260px, 65%); height: 28px; margin-bottom: 28px; }
#workspace-loading::after { height: 150px; }
html[data-workspace-auth="pending"] #workspace-loading { animation: workspace-loading-reveal 0s 250ms forwards; }
@keyframes workspace-loading-reveal { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { html[data-workspace-auth="pending"] #workspace-loading { animation: none; visibility: visible; } }
@media (max-width: 1000px) { .app-shell .app-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .app-shell .settings-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .app-shell .app-main { padding: 24px 16px 40px; }
  .app-shell .app-page-heading h1, .app-shell .credential-heading h1 { font-size: 26px; }
  .app-shell .app-page-heading p { font-size: 14px; }
  .app-shell :where(button, input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 40px; }
  .app-shell .catalog-categories button { min-height: 40px; }
  .app-shell .app-card > button { min-height: 40px; }
  .app-shell #search-home { padding-top: 12vh; }
  #workspace-loading { top: 88px; left: 16px; right: 16px; }
}
@media (max-width: 540px) { .app-shell .app-catalog { grid-template-columns: minmax(0, 1fr); } }

html[data-workspace-auth="error"] #workspace-loading { visibility: visible; pointer-events: auto; max-width: 440px; line-height: 1.6; }
html[data-workspace-auth="error"] #workspace-loading::before, html[data-workspace-auth="error"] #workspace-loading::after { display: none; }
#workspace-loading button { display: block; margin-top: 16px; padding: 8px 16px; border: 1px solid var(--border, #d6ddda); border-radius: 8px; color: inherit; background: var(--surface, #fff); font: inherit; cursor: pointer; }