raffel 1.1.81 → 1.1.82-next.951a336

package/dist/docs/ui/assets/raffel-docs.css

@@ -22,17 +22,17 @@
       --code-panel-header: #37474f;
 
       /* Compact documentation type scale. */
-      --font-size-body: 14px;
-      --font-size-small: 13px;
-      --font-size-xs: 11px;
-      --font-size-h1: 30px;
-      --font-size-h2: 24px;
-      --font-size-h3: 19px;
-      --font-size-h4: 16px;
-      --font-size-h5: 14px;
-      --font-size-h6: 13px;
-      --font-size-code: 12px;
-      --line-height-body: 1.6;
+      --font-size-body: 13px;
+      --font-size-small: 12px;
+      --font-size-xs: 10px;
+      --font-size-h1: 28px;
+      --font-size-h2: 22px;
+      --font-size-h3: 18px;
+      --font-size-h4: 15px;
+      --font-size-h5: 13px;
+      --font-size-h6: 12px;
+      --font-size-code: 11px;
+      --line-height-body: 1.5;
       --line-height-tight: 1.25;
     }
 
@@ -134,7 +134,7 @@
       background: var(--bg-color);
       color: var(--text-color);
       font-size: var(--font-size-body);
-      line-height: 1.6;
+      line-height: var(--line-height-body);
     }
 
     code,
@@ -149,9 +149,9 @@
       z-index: 50;
       display: flex;
       align-items: center;
-      gap: 24px;
-      min-height: 56px;
-      padding: 0 24px;
+      gap: 20px;
+      min-height: 48px;
+      padding: 0 20px;
       border-bottom: 1px solid var(--border-color);
       background: color-mix(in srgb, var(--bg-color) 92%, transparent);
       backdrop-filter: blur(10px);
@@ -183,7 +183,7 @@
     .top-nav-menu summary {
       color: var(--text-color);
       text-decoration: none;
-      font-size: 14px;
+      font-size: var(--font-size-body);
       font-weight: 500;
       white-space: nowrap;
     }
@@ -280,23 +280,23 @@
     .docs-state-pill {
       display: inline-flex;
       align-items: center;
-      gap: 5px;
+      gap: 4px;
       min-width: 0;
-      height: 26px;
-      padding: 0 8px;
+      height: 22px;
+      padding: 0 6px;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       background: color-mix(in srgb, var(--surface-color) 84%, transparent);
       color: var(--text-secondary);
-      font-size: 11px;
+      font-size: var(--font-size-xs);
       font-weight: 600;
       line-height: 1;
       white-space: nowrap;
     }
 
     .docs-state-dot {
-      width: 7px;
-      height: 7px;
+      width: 6px;
+      height: 6px;
       border-radius: 999px;
       background: var(--text-muted);
       flex: 0 0 auto;
@@ -675,7 +675,7 @@
 
     .app-container {
       display: grid;
-      grid-template-columns: 300px 1fr;
+      grid-template-columns: 280px 1fr;
       min-height: calc(100vh - 300px);
     }
 
@@ -705,7 +705,7 @@
     .sidebar {
       background: var(--sidebar-bg);
       border-right: 1px solid var(--border-color);
-      padding: 24px 0;
+      padding: 18px 0;
       overflow-y: auto;
       position: sticky;
       top: 0;
@@ -717,9 +717,9 @@
     }
 
     .sidebar-header {
-      padding: 0 20px 20px;
+      padding: 0 14px 14px;
       border-bottom: 1px solid var(--border-color);
-      margin-bottom: 16px;
+      margin-bottom: 12px;
     }
 
     .sidebar-logo {
@@ -738,10 +738,10 @@
 
     .sidebar-search input {
       width: 100%;
-      padding: 10px 12px 10px 36px;
+      padding: 8px 10px 8px 32px;
       border: 1px solid var(--border-color);
       border-radius: 8px;
-      font-size: 14px;
+      font-size: var(--font-size-small);
       background: var(--bg-color);
       color: var(--text-color);
       outline: none;
@@ -755,24 +755,24 @@
     .sidebar-search::before {
       content: '🔍';
       position: absolute;
-      left: 12px;
+      left: 10px;
       top: 50%;
       transform: translateY(-50%);
-      font-size: 14px;
+      font-size: var(--font-size-small);
     }
 
     .protocol-tabs {
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
-      padding: 0 20px;
-      margin-bottom: 20px;
+      gap: 5px;
+      padding: 0 14px;
+      margin-bottom: 14px;
     }
 
     .protocol-tab {
-      padding: 6px 12px;
+      padding: 5px 10px;
       border-radius: 20px;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 500;
       cursor: pointer;
       background: var(--code-bg);
@@ -810,7 +810,7 @@
 
     /* ========== TAG GROUPS ========== */
     .sidebar-nav {
-      padding: 0 12px;
+      padding: 0 10px;
     }
 
     .tag-group {
@@ -820,11 +820,11 @@
     .tag-group-header {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 10px 12px;
+      gap: 6px;
+      padding: 8px 10px;
       border-radius: 8px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 600;
       color: var(--text-secondary);
       transition: all 0.2s;
@@ -868,8 +868,8 @@
     .nav-item {
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 6px 12px 6px 14px;
+      gap: 8px;
+      padding: 4px 10px 4px 12px;
       border-left: 2px solid transparent;
       border-radius: 0;
       text-decoration: none;
@@ -904,9 +904,9 @@
       color: var(--text-muted);
       cursor: pointer;
       font: inherit;
-      font-size: 12px;
+      font-size: 11px;
       line-height: 1.35;
-      padding: 5px 8px;
+      padding: 4px 7px;
       text-align: left;
       border-radius: 5px;
       overflow: hidden;
@@ -939,8 +939,8 @@
     .docs-sidebar-depth-6 { margin-left: 16px; }
 
     .nav-item-intro {
-      margin-bottom: 16px;
-      padding: 10px 12px;
+      margin-bottom: 12px;
+      padding: 8px 10px;
       background: var(--surface-color);
       border: 1px solid var(--border-color);
       font-weight: 500;
@@ -956,11 +956,11 @@
     }
 
     .nav-item-intro .nav-item-text {
-      font-size: 14px;
+      font-size: 13px;
     }
 
     .nav-item-method {
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
       padding: 1px 4px;
       border: 1px solid var(--border-color);
@@ -996,7 +996,7 @@
 
     .nav-item-path {
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-      font-size: 13px;
+      font-size: 12px;
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1324,7 +1324,7 @@
 
     /* ========== MAIN CONTENT ========== */
     .main {
-      padding: 40px;
+      padding: 32px;
       overflow-y: auto;
       width: 100%;
     }
@@ -1429,10 +1429,10 @@
 
     /* ========== INTRODUCTION SECTION ========== */
     .intro-section {
-      padding: 32px 40px;
+      padding: 24px 32px;
       background: var(--surface-color);
       border-bottom: 1px solid var(--border-color);
-      margin: -40px -40px 40px -40px;
+      margin: -32px -32px 32px -32px;
     }
 
     .intro-section .markdown-content {
@@ -1600,7 +1600,7 @@
 
     /* ========== ENDPOINT SECTIONS (Redoc-style) ========== */
     .endpoint-section {
-      padding: 32px 0;
+      padding: 24px 0;
       border-bottom: 1px solid var(--border-color);
     }
 
@@ -1611,23 +1611,23 @@
     .endpoint-header {
       display: flex;
       align-items: flex-start;
-      gap: 16px;
-      margin-bottom: 20px;
+      gap: 12px;
+      margin-bottom: 14px;
     }
 
     .endpoint-method-path {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 10px;
       flex-wrap: wrap;
     }
 
     .badge {
       display: inline-flex;
       align-items: center;
-      padding: 6px 12px;
+      padding: 4px 9px;
       border-radius: 4px;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       font-family: 'SF Mono', 'Monaco', monospace;
@@ -1642,23 +1642,24 @@
 
     .endpoint-path {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 500;
       color: var(--text-color);
     }
 
     .endpoint-title {
-      font-size: 24px;
+      font-size: 21px;
       font-weight: 600;
-      margin-bottom: 8px;
+      line-height: 1.3;
+      margin-bottom: 6px;
       color: var(--text-color);
     }
 
     .endpoint-description {
       color: var(--text-muted);
-      font-size: 15px;
-      line-height: 1.7;
-      margin-bottom: 24px;
+      font-size: 13px;
+      line-height: 1.55;
+      margin-bottom: 18px;
     }
 
     /* Markdown content styles */
@@ -2291,7 +2292,7 @@
     .endpoint-content {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 40px;
+      gap: 32px;
     }
 
     @media (min-width: 1400px) {
@@ -2318,18 +2319,18 @@
       min-width: 0; /* Prevent overflow */
       background: var(--code-panel-bg);
       border-radius: 8px;
-      padding: 20px;
+      padding: 16px;
       color: var(--code-panel-text);
     }
 
     .endpoint-right-header {
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: #90a4ae;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
+      margin-bottom: 12px;
+      padding-bottom: 7px;
       border-bottom: 1px solid rgba(255,255,255,0.1);
     }
 
@@ -2340,17 +2341,17 @@
     }
 
     .endpoint-subsection {
-      margin-bottom: 28px;
+      margin-bottom: 20px;
     }
 
     .endpoint-subsection-title {
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 12px;
-      padding-bottom: 8px;
+      margin-bottom: 8px;
+      padding-bottom: 6px;
       border-bottom: 1px solid var(--border-color);
     }
 
@@ -2361,12 +2362,12 @@
 
     /* ========== REDOC-STYLE PARAMETER LABELS ========== */
     .subsection-label {
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 16px;
+      margin-bottom: 10px;
     }
 
     .content-type {
@@ -2385,8 +2386,8 @@
     /* ========== REDOC-STYLE PARAMETERS ========== */
     .param-row {
       display: flex;
-      padding: 12px;
-      margin-bottom: 12px;
+      padding: 8px 10px;
+      margin-bottom: 8px;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       background: var(--surface-color);
@@ -2425,14 +2426,14 @@
     .param-header {
       display: flex;
       align-items: center;
-      gap: 12px;
-      margin-bottom: 8px;
+      gap: 8px;
+      margin-bottom: 4px;
       flex-wrap: wrap;
     }
 
     .param-name-text {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--text-color);
     }
@@ -2440,7 +2441,7 @@
     .param-required-badge {
       font-size: 10px;
       font-weight: 700;
-      padding: 3px 8px;
+      padding: 2px 6px;
       border-radius: 4px;
       background: #fee2e2;
       color: #991b1b;
@@ -2522,17 +2523,17 @@
     }
 
     .param-description {
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-color);
-      line-height: 1.5;
-      margin-top: 8px;
+      line-height: 1.4;
+      margin-top: 4px;
     }
 
     /* ========== REDOC-STYLE RESPONSES ========== */
     .response-item {
       border: 1px solid var(--border-color);
       border-radius: 6px;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
       overflow: hidden;
       transition: border-color 0.15s, box-shadow 0.15s;
     }
@@ -2544,8 +2545,8 @@
     .response-header {
       display: flex;
       align-items: center;
-      gap: 12px;
-      padding: 14px 16px;
+      gap: 8px;
+      padding: 10px 12px;
       cursor: pointer;
       transition: background 0.15s;
       background: var(--surface-color);
@@ -2568,9 +2569,9 @@
     }
 
     .response-status {
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 700;
-      padding: 4px 10px;
+      padding: 3px 8px;
       border-radius: 4px;
       min-width: 50px;
       text-align: center;
@@ -2609,13 +2610,13 @@
     }
 
     .response-desc {
-      font-size: 14px;
+      font-size: 12px;
       color: var(--text-color);
     }
 
     .response-body {
       display: none;
-      padding: 16px;
+      padding: 12px;
       border-top: 1px solid var(--border-color);
       background: var(--code-bg);
     }
@@ -2629,7 +2630,7 @@
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
     }
 
     .response-schema-label .content-type {
@@ -2637,8 +2638,8 @@
     }
 
     .response-headers-section {
-      margin-bottom: 20px;
-      padding-bottom: 16px;
+      margin-bottom: 14px;
+      padding-bottom: 10px;
       border-bottom: 1px solid var(--border-color);
     }
 
@@ -2647,13 +2648,13 @@
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
     }
 
     .response-header-row {
       display: flex;
       align-items: flex-start;
-      padding: 8px 0;
+      padding: 5px 0;
       border-bottom: 1px solid var(--border-color);
     }
 
@@ -2663,11 +2664,11 @@
 
     .response-header-name {
       font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--text-color);
-      min-width: 180px;
-      margin-right: 16px;
+      min-width: 150px;
+      margin-right: 12px;
     }
 
     .response-header-info {
@@ -2675,13 +2676,13 @@
     }
 
     .response-header-type {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--primary-color);
       margin-bottom: 4px;
     }
 
     .response-header-desc {
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-muted);
     }
 
@@ -2878,11 +2879,11 @@
     }
     /* ========== RESPONSE SAMPLES (Right Panel) ========== */
     .response-samples {
-      margin-top: 20px;
+      margin-top: 16px;
     }
 
     .response-samples-header {
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--code-panel-text);
       margin-bottom: 12px;
@@ -2890,14 +2891,14 @@
 
     .sample-tabs {
       display: flex;
-      gap: 8px;
-      margin-bottom: 16px;
+      gap: 6px;
+      margin-bottom: 12px;
     }
 
     .sample-tab {
-      padding: 6px 14px;
+      padding: 4px 10px;
       border-radius: 4px;
-      font-size: 13px;
+      font-size: 11px;
       font-weight: 500;
       cursor: pointer;
       background: transparent;
@@ -2928,19 +2929,19 @@
     }
 
     .sample-content-type {
-      font-size: 12px;
+      font-size: 11px;
       color: #90a4ae;
       margin-bottom: 8px;
     }
 
     .sample-actions {
       display: flex;
-      gap: 16px;
-      margin-bottom: 12px;
+      gap: 12px;
+      margin-bottom: 8px;
     }
 
     .sample-action {
-      font-size: 12px;
+      font-size: 11px;
       color: #90a4ae;
       cursor: pointer;
       background: none;
@@ -2956,10 +2957,10 @@
     .sample-json {
       background: rgba(0,0,0,0.3);
       border-radius: 6px;
-      padding: 14px;
+      padding: 10px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
-      line-height: 1.5;
+      font-size: 11px;
+      line-height: 1.4;
       color: #e2e8f0;
       overflow-x: auto;
       white-space: pre-wrap;
@@ -2976,7 +2977,7 @@
     .right-panel-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: 18px;
     }
 
     .right-section {
@@ -2984,13 +2985,13 @@
     }
 
     .right-section-header {
-      font-size: 13px;
+      font-size: 11px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 16px;
-      padding-bottom: 8px;
+      margin-bottom: 12px;
+      padding-bottom: 6px;
       border-bottom: 1px solid rgba(255,255,255,0.1);
     }
 
@@ -3035,9 +3036,9 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 10px 14px;
+      padding: 8px 10px;
       background: var(--code-panel-header);
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -3050,32 +3051,33 @@
       border: none;
       border-radius: 0;
       color: #e2e8f0;
-      padding: 14px;
+      padding: 10px;
     }
 
     .code-example code {
       color: #e2e8f0;
       white-space: pre-wrap;
       word-break: break-word;
-      font-size: 12px;
+      font-size: 11px;
+      line-height: 1.4;
     }
 
     /* Code language tabs */
     .code-tabs {
       display: flex;
       gap: 2px;
-      padding: 8px 14px;
+      padding: 6px 10px;
       background: var(--code-panel-header);
       border-bottom: 1px solid rgba(255,255,255,0.1);
     }
 
     .code-tab {
-      padding: 6px 12px;
+      padding: 4px 9px;
       border: none;
       border-radius: 4px;
       background: transparent;
       color: #90a4ae;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.15s;
@@ -3105,12 +3107,12 @@
 
     pre {
       background: var(--code-bg);
-      padding: 16px;
+      padding: 12px;
       border-radius: 8px;
       overflow-x: auto;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 13px;
-      line-height: 1.5;
+      font-size: 11px;
+      line-height: 1.45;
       border: 1px solid var(--border-color);
     }
 
@@ -3125,7 +3127,7 @@
     .schema-row {
       display: flex;
       align-items: flex-start;
-      padding: 12px 16px;
+      padding: 8px 12px;
       border-bottom: 1px solid var(--border-color);
       transition: background 0.15s;
     }
@@ -3152,7 +3154,7 @@
 
     .schema-name {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--text-color);
     }
@@ -3160,17 +3162,17 @@
     .schema-required {
       color: #ef4444;
       font-weight: 700;
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .schema-type {
       display: inline-flex;
       align-items: center;
       gap: 4px;
-      padding: 2px 8px;
+      padding: 1px 6px;
       border-radius: 4px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 500;
     }
 
@@ -3197,10 +3199,175 @@
 
     .schema-desc {
       color: var(--text-muted);
-      font-size: 13px;
+      font-size: 12px;
       margin-bottom: 4px;
     }
 
+    /* Compact ReDoc-style contract tree. Names and requiredness stay in a
+       narrow left rail; type, examples, constraints and prose share the
+       wider detail column. */
+    .schema-tree-root {
+      margin-top: 4px;
+      border-left: 1px solid var(--border-color);
+      border-left-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
+    }
+
+    .schema-tree-nested {
+      margin-left: 14px;
+      border-left: 1px solid var(--border-color);
+    }
+
+    .schema-tree-row {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(120px, 28%) minmax(0, 1fr);
+      gap: 14px;
+      padding: 7px 0 7px 10px;
+      border-bottom: 1px solid var(--border-color);
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    .schema-tree-row::before {
+      position: absolute;
+      top: 13px;
+      left: 0;
+      width: 9px;
+      border-top: 1px solid var(--border-color);
+      border-top-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
+      content: '';
+    }
+
+    .schema-tree-key {
+      position: relative;
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1px;
+      padding-left: 8px;
+    }
+
+    .schema-tree-name {
+      overflow-wrap: anywhere;
+      background: transparent;
+      font-family: 'SF Mono', 'Monaco', monospace;
+      font-size: 11px;
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+
+    .schema-tree-required,
+    .schema-tree-optional,
+    .schema-tree-deprecated {
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 0.35px;
+      line-height: 1.35;
+      text-transform: uppercase;
+    }
+
+    .schema-tree-required {
+      color: #ef4444;
+    }
+
+    .schema-tree-optional { color: var(--text-muted); }
+    .schema-tree-deprecated { color: #d97706; }
+
+    .schema-tree-toggle {
+      position: absolute;
+      top: -1px;
+      left: -8px;
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      transform: rotate(0deg);
+      border: 0;
+      background: transparent;
+      color: var(--primary-color);
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 14px;
+      transition: transform 120ms ease;
+    }
+
+    .schema-tree-toggle.open { transform: rotate(90deg); }
+
+    .schema-tree-details { min-width: 0; }
+
+    .schema-tree-type {
+      color: var(--text-muted);
+      font-size: 11px;
+      line-height: 1.35;
+    }
+
+    .schema-tree-description {
+      margin-top: 3px;
+      color: var(--text-color);
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    .schema-tree-description.markdown-content p {
+      margin: 0 0 3px;
+      color: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .schema-tree-description.markdown-content p:last-child { margin-bottom: 0; }
+
+    .schema-tree-description.markdown-content ul,
+    .schema-tree-description.markdown-content ol {
+      margin: 4px 0 2px 16px;
+      padding: 0;
+    }
+
+    .schema-tree-description.markdown-content li { margin: 1px 0; }
+
+    .schema-tree-example {
+      display: flex;
+      min-width: 0;
+      align-items: baseline;
+      gap: 5px;
+      margin-top: 2px;
+      color: var(--text-muted);
+      font-size: 11px;
+    }
+
+    .schema-tree-example code {
+      overflow: hidden;
+      padding: 0 3px;
+      border: 1px solid var(--border-color);
+      border-radius: 2px;
+      background: var(--code-bg);
+      color: var(--text-color);
+      font-size: 10px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .schema-tree-items-label {
+      display: inline-block;
+      margin-top: 3px;
+      color: var(--text-muted);
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .schema-tree-children.collapsed { display: none; }
+
+    .schema-tree-meta {
+      display: block;
+      color: var(--text-secondary);
+    }
+
+    .schema-tree-unresolved {
+      color: var(--text-muted);
+      font-style: italic;
+    }
+
     .schema-constraints {
       display: flex;
       flex-wrap: wrap;
@@ -3447,27 +3614,28 @@
 
     /* ========== HTTP ENDPOINT (ReDoc-style) ========== */
     .http-param-group {
-      margin-bottom: 20px;
+      margin-bottom: 14px;
     }
 
     .http-param-group-title {
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--text-muted);
-      margin-bottom: 8px;
+      margin-bottom: 0;
+      padding-bottom: 5px;
+      border-bottom: 1px solid var(--border-color);
     }
 
     .http-params {
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
-      overflow: hidden;
+      overflow: visible;
     }
 
     .http-param {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border-color);
+      padding-top: 7px;
+      padding-right: 0;
+      padding-bottom: 7px;
     }
 
     .http-param:last-child { border-bottom: none; }
@@ -3476,12 +3644,12 @@
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 6px;
     }
 
     .http-param-name {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--text-color);
     }
@@ -3504,22 +3672,22 @@
 
     .http-param-desc {
       color: var(--text-muted);
-      font-size: 13px;
-      margin-top: 6px;
-      line-height: 1.5;
+      font-size: 12px;
+      margin-top: 4px;
+      line-height: 1.4;
     }
 
     /* Validation constraint chips (reuses .schema-constraint look) */
     .constraint-chips {
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
-      margin-top: 8px;
+      gap: 4px;
+      margin-top: 5px;
     }
 
     .constraint-chip {
-      font-size: 11px;
-      padding: 2px 8px;
+      font-size: 10px;
+      padding: 1px 6px;
       border-radius: 4px;
       background: var(--code-bg);
       color: var(--text-muted);
@@ -3540,29 +3708,34 @@
 
     /* Response accordions */
     .response-accordion {
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
-      margin-bottom: 10px;
+      border: 0;
+      border-radius: 3px;
+      margin-bottom: 8px;
       overflow: hidden;
     }
 
     .response-accordion-header {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
       width: 100%;
-      padding: 12px 14px;
+      padding: 8px 10px;
       background: var(--code-bg);
       border: none;
       cursor: pointer;
       text-align: left;
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-color);
       transition: background 0.15s;
     }
 
     .response-accordion-header:hover { background: var(--hover-bg); }
 
+    .response-accordion-header.status-2xx { background: rgba(16,185,129,0.08); }
+    .response-accordion-header.status-3xx { background: rgba(59,130,246,0.08); }
+    .response-accordion-header.status-4xx { background: rgba(245,158,11,0.09); }
+    .response-accordion-header.status-5xx { background: rgba(239,68,68,0.09); }
+
     .response-accordion-caret {
       flex-shrink: 0;
       font-size: 10px;
@@ -3575,8 +3748,8 @@
     }
 
     .response-status-dot {
-      width: 9px;
-      height: 9px;
+      width: 8px;
+      height: 8px;
       border-radius: 50%;
       flex-shrink: 0;
     }
@@ -3596,23 +3769,32 @@
     }
 
     .response-accordion-body {
-      padding: 14px;
-      border-top: 1px solid var(--border-color);
+      padding: 9px 8px 5px;
+      border-top: 0;
       display: none;
     }
 
     .response-accordion.open .response-accordion-body { display: block; }
 
     .response-subhead {
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--text-muted);
-      margin: 0 0 8px;
+      margin: 0;
+      padding-bottom: 5px;
+      border-bottom: 1px solid var(--border-color);
     }
 
-    .response-block + .response-block { margin-top: 16px; }
+    .response-block + .response-block { margin-top: 10px; }
+
+    @media (max-width: 640px) {
+      .schema-tree-row {
+        grid-template-columns: minmax(100px, 35%) minmax(0, 1fr);
+        gap: 8px;
+      }
+    }
 
     /* Multi-language code samples */
     .http-code-samples {
@@ -3634,14 +3816,14 @@
 
     .http-code-sample-pre {
       margin: 0;
-      padding: 14px;
+      padding: 10px;
       background: transparent;
       border: none;
       border-radius: 0;
       overflow-x: auto;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 12px;
-      line-height: 1.55;
+      font-size: 11px;
+      line-height: 1.4;
       color: var(--text-color);
       white-space: pre;
     }
@@ -3649,12 +3831,12 @@
     .http-code-copy,
     .sample-code-copy {
       margin-left: auto;
-      padding: 4px 10px;
+      padding: 3px 8px;
       background: transparent;
       border: 1px solid var(--border-color);
       border-radius: 4px;
       color: var(--text-muted);
-      font-size: 11px;
+      font-size: 10px;
       cursor: pointer;
       transition: all 0.15s;
     }
@@ -3668,7 +3850,7 @@
     /* Right panel (third column): keep request/response samples dark & legible
        regardless of the active theme, matching ReDoc's sample column. */
     .endpoint-right .endpoint-right-section + .endpoint-right-section {
-      margin-top: 24px;
+      margin-top: 18px;
     }
 
     .endpoint-right .http-code-samples {
@@ -3688,9 +3870,9 @@
     .response-example-toolbar {
       display: flex;
       align-items: center;
-      gap: 12px;
-      min-height: 28px;
-      margin: 4px 0 8px;
+      gap: 8px;
+      min-height: 24px;
+      margin: 2px 0 6px;
     }
 
     .response-example-toolbar .response-example-name {
@@ -3699,7 +3881,7 @@
 
     .endpoint-right .sample-code {
       margin: 0;
-      padding: 14px;
+      padding: 10px;
       overflow-x: auto;
       border: 1px solid rgba(255,255,255,0.1);
       border-radius: 6px;
@@ -3712,8 +3894,8 @@
     .endpoint-right .sample-code code {
       color: inherit;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 12px;
-      line-height: 1.55;
+      font-size: 11px;
+      line-height: 1.4;
       white-space: inherit;
     }