/* Viewport layout and typography. Text-size preferences never zoom the viewport.
   Pixel text in feature styles uses these tokens; rem text shares the root size. */
:root, :root[data-theme] {
  --grabr-viewport-scale: 1;
  --grabr-user-scale: 1;
  --grabr-caption-min: 10px;
  --grabr-type-scale: calc(var(--grabr-viewport-scale) * var(--grabr-user-scale));
  --grabr-text-floor: calc(var(--grabr-caption-min) * var(--grabr-user-scale));
  --workspace-max: 1500px;
  font-size: calc(16px * var(--grabr-type-scale));
}
[hidden] { display: none !important; }
.view, #view-search, #view-settings { max-width: var(--workspace-max); min-width: 0; }
.settings-heading { margin-bottom: 28px; }
.settings-heading .eyebrow { margin-bottom: 10px; }
.settings-layout, .settings-column { min-width: 0; }
.settings-column { display: flex; flex-direction: column; gap: 26px; }
.settings-column + .settings-column { margin-top: 26px; }
.settings-column .settings-section { margin: 0; min-width: 0; }
.setting-row { gap: 16px; flex-wrap: wrap; }
.setting-row > div { min-width: 0; }
.setting-row > div:first-child { flex: 1 1 220px; }
.setting-row .desc { max-width: 68ch; }
.scale-control, .scale-control .segmented { flex-wrap: wrap; }
.scale-control { gap: 6px; }
.saas-toolbar { margin-top: 18px; }
.saas-toolbar select { flex: 1 1 180px; }
.saas-security hr { border: 0; border-top: 1px solid var(--border-soft); margin-block: 22px; }
.mcp-key .mcp-meta { line-height: 1.7; }
.mcp-key .mcp-actions { flex-wrap: wrap; }
.nb-properties label { flex-wrap: wrap; }
.nb-modebar .segmented { flex-wrap: wrap; }
.view-head, .view-head > div, .workspace-heading > div { min-width: 0; }
.view-head .sub { max-width: 75ch; line-height: 1.65; }
.filter-input, .filter-input input { min-width: 0; }
.live-footer { flex-wrap: wrap; }

@media (min-width: 1200px) {
  .settings-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; align-items: start; }
  .settings-column + .settings-column { margin: 0; }
}
@media (min-width: 981px) {
  /* Each notebook pane owns its scroll instead of pushing the app below the screen. */
  #view-notes:not(.hidden) { height: 100%; display: flex; flex-direction: column; min-height: min(600px,100%); }
  .nb-heading { flex: 0 0 auto; }
  .nb-workbench { flex: 1 1 auto; min-height: 0; height: auto; }
  .nb-editor-empty { min-height: 0; height: 100%; }
}
@media (min-width: 1600px) {
  :root, :root[data-theme] { --grabr-viewport-scale: 1.15; --grabr-caption-min: 12px; --sidebar-w: 256px; --workspace-max: 2320px; }
  .sidebar { padding: 26px 18px 18px; }
  .brand { padding-inline: 6px; }
  .brand-caption { letter-spacing: .25px; }
  .nav-item { min-height: 46px; padding: 12px; }
  .nav-caption { margin-top: 22px; }
  .workspace-switch { padding: 13px 11px; }
  .command-trigger { min-height: 44px; }
  .topbar { min-height: 68px; padding-inline: 32px; }
  .operator-avatar { width: 36px; height: 36px; }
  .scroll { padding: 30px 32px 36px; }
  .btn { min-height: 40px; padding: 9px 15px; }
  .btn-sm { min-height: 34px; padding: 7px 11px; }
  .icon-button { width: 38px; height: 38px; }
  .seg { min-height: 36px; padding: 7px 12px; }
  .workspace-heading { margin-bottom: 24px; }
  .workspace-heading h2 { letter-spacing: -1.3px; }
  .workspace-metrics { margin-bottom: 24px; }
  .metric { padding: 20px 24px 17px; }
  .search-panel { padding: 24px 26px 0; }
  .search-row { grid-template-columns: minmax(0,1fr) 190px 176px; }
  .search-row #go { min-height: 52px; }
  .profile-row select { min-height: 36px; max-width: 340px; }
  .query-bottom { padding-bottom: 18px; }
  .query-types button { min-height: 32px; padding-inline: 10px; }
  .query-context { padding-block: 13px; }
  .workspace-overview { grid-template-columns: 1.1fr 1fr .85fr; gap: 20px; }
  .workflow-panel { grid-column: auto; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; }
  .workflow-panel > button { border-left: 0; border-top: 1px solid var(--border-soft); padding: 14px 0 0; width: 100%; }
  .workflow-title { padding-bottom: 4px; }
  .recent-profile { padding-block: 13px; }
  .recent-initial { width: 38px; height: 38px; }
  .coverage-row { grid-template-columns: 25px minmax(0,1fr) 85px 52px; padding-block: 12px; }
  .pgroup-body, .cards, .sources-grid, .tools-grid, .lab-tools, .sp-cards { grid-template-columns: repeat(auto-fill,minmax(min(100%,330px),1fr)); gap: 18px; }
  .pcard, .result-card, .mod, .tool-card, .lab-tool { padding: 20px; }
  .filter-input { max-width: 420px; }
  #detail-sections { column-gap: 20px; }
  #detail-sections .dsec { padding: 20px; margin-bottom: 20px; }
  .profile-hero { padding: 26px; }
  .hero-actions { gap: 10px; }
  .review-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .review-record { padding: 20px; }
  .settings-layout { gap: 30px; }
  .settings-column { gap: 30px; }
  .setting-row { padding: 20px 22px; }
  .saas-security { padding: 20px 22px; }
  .saas-fields { grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); }
  .saas-toolbar input { flex-basis: 250px; }
  .nb-workbench { grid-template-columns: 205px 300px minmax(0,1fr); }
  .nb-editor { padding: 22px 30px; }
  .nb-group-hint { padding-top: 18px; }
  .nb-note-row { padding: 16px; }
  .nb-formatbar button { min-height: 34px; min-width: 34px; }
  .sl-layout { grid-template-columns: 350px minmax(0,1fr); gap: 24px; }
  .sl-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; }
  .sl-card:has(.sl-stats:not(.hidden)) { grid-column: 1 / -1; }
  .sl-compose { padding: 24px; }
  .sl-filters { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .sl-filters input, .sl-filters select:last-child { grid-column: auto; }
  .ig-body { grid-template-columns: 220px minmax(0,1fr) 320px; height: min(72dvh,900px); min-height: 480px; }
  .ig-workspace .btn { min-height: 42px; }
  .login-card { max-width: 480px; padding: 38px; }
  .modal-card.form-grouped { width: min(760px,100%); }
}
@media (min-width: 2200px) {
  :root, :root[data-theme] { --grabr-viewport-scale: 1.3; --grabr-caption-min: 13px; --sidebar-w: 288px; }
  .topbar { min-height: 74px; padding-inline: 40px; }
  .scroll { padding: 32px 40px 38px; }
  .sidebar { padding: 28px 20px 20px; }
  .brand-logo { width: 42px; height: 42px; }
  .nav-item { min-height: 50px; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item .nav-meta { font-size: calc(11px * var(--grabr-type-scale)); }
  .btn { min-height: 44px; }
  .btn-sm, .seg { min-height: 38px; }
  .workspace-overview { gap: 24px; }
  .settings-layout { gap: 34px; }
  .nb-workbench { grid-template-columns: 240px 350px minmax(0,1fr); }
  .nb-editor { padding-inline: 36px; }
  #detail-sections { column-count: 3; }
  .sl-layout { grid-template-columns: 400px minmax(0,1fr); gap: 28px; }
  .ig-body { grid-template-columns: 250px minmax(0,1fr) 360px; }
}
@media (max-width: 860px) {
  :root, :root[data-theme] { --grabr-caption-min: 11px; }
  .settings-heading { margin-bottom: 24px; }
  .setting-row > div:first-child { flex-basis: 100%; }
  .setting-row .scale-control, .setting-row .hint { max-width: 100%; }
  .setting-row .label { line-height: 1.5; }
  .scale-control { width: 100%; align-items: stretch; }
  .scale-control > .btn { flex: 0 0 44px; }
  .scale-control .segmented { flex: 1 1 180px; }
  .settings-column { gap: 24px; }
  .view-head { flex-wrap: wrap; gap: 16px; }
  .view-head > .btn { flex-shrink: 1; }
  .query-context { align-items: start; line-height: 1.6; }
  .query-context > span { min-width: 0; overflow-wrap: anywhere; }
  .sl-card-meta, .sl-visit-meta { overflow-wrap: anywhere; }
  .modal-card { max-height: calc(100dvh - 32px); }
  .nb-properties label { align-items: start; }
}
@media (pointer: coarse) {
  .btn, .btn-sm, .seg, .nb-formatbar button, .ig-workspace .btn { min-height: 44px; }
  .icon-button { min-width: 44px; min-height: 44px; }
  input, textarea, select, .search-row #q, .search-row #type, .profile-row select,
  .filter-input input, .quick-add #qa-input, .nb-properties input, .nb-properties select,
  .nb-library-tools input, .nb-library-tools select, .sl-compose input, .sl-compose select,
  .sl-compose textarea, .sl-filters select, .sl-filters input, .ig-search input {
    font-size: max(16px,calc(16px * var(--grabr-user-scale)));
  }
}
/* Keep navigation and sign-out reachable on short desktop/ultrawide monitors. */
@media (min-width: 861px) and (max-height: 1000px) {
  .sidebar-note { display: none; }
  .sidebar { padding-top: 20px; }
  .brand { padding-bottom: 18px; }
  .nav-label { padding-top: 18px; }
  .nav-foot { padding-top: 16px; }
}