/* Tool-specific layout tokens */
.api-mock-page {
  --api-rule-path-width: 260px;
  --api-rule-control-width: 180px;
  --api-rule-sample-width: 320px;
  --api-number-min-width: 78px;
  --api-number-width: 88px;
  --api-seed-min-width: 170px;
  --api-settings-gap: 10px;
  --api-rule-code-font: "Cascadia Code", Consolas, monospace;
}

/* Rule panel theme tokens */
.api-mock-page .api-mock-rule-panel {
  --api-rule-border: var(--json-border);
  --api-rule-background: var(--json-panel);
  --api-rule-header: var(--json-control);
  --api-rule-heading-background: transparent;
  --api-rule-heading-color: var(--json-text);
  --api-rule-help-background: var(--json-toolbar-background);
  --api-rule-help-color: var(--json-muted);
  color: var(--api-rule-heading-color);
  background: var(--api-rule-background);
}

.api-mock-page .api-mock-rule-panel[data-theme="dark"] {
  --api-rule-border: #3b414b;
  --api-rule-background: #1e1e1e;
  --api-rule-header: #181c22;
  --api-rule-heading-background: #181c22;
  --api-rule-heading-color: #d4d4d4;
  --api-rule-help-background: #181c22;
  --api-rule-help-color: #d4d4d4;
  --json-border-strong: #4b5563;
  --json-text: #d4d4d4;
  --json-control: #242a33;
  --json-disabled-text: #d4d4d4;
  --json-disabled-background: #242a33;
}

/* Generation settings */
.api-mock-page .api-mock-number {
  min-width: var(--api-number-min-width);
  width: var(--api-number-width);
}

.api-mock-page .api-mock-seed {
  min-width: var(--api-seed-min-width);
}

.api-mock-page .api-mock-pagination-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--api-settings-gap);
}

/* Dynamic panel visibility */
.api-mock-page .api-mock-pagination-settings[hidden],
.api-mock-page .api-mock-rule-panel[hidden] {
  display: none;
}

/* Rule table guidance and surface */
.api-mock-page .api-mock-rule-help {
  padding: 10px 14px;
  border-block-end: 1px solid var(--api-rule-border);
  color: var(--api-rule-help-color);
  background: var(--api-rule-help-background);
}

.api-mock-page .api-mock-rule-panel .json-format-panel-heading {
  border-color: var(--api-rule-border);
  color: var(--api-rule-heading-color);
  background: var(--api-rule-heading-background);
}

.api-mock-page .api-mock-table-scroll {
  overflow: auto;
}

.api-mock-page .api-mock-rule-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--api-rule-background);
}

.api-mock-page .api-mock-rule-table th,
.api-mock-page .api-mock-rule-table td {
  padding: 9px 12px;
  border-block-end: 1px solid var(--api-rule-border);
  text-align: start;
  vertical-align: middle;
}

.api-mock-page .api-mock-rule-table th {
  color: var(--json-muted);
  background: var(--api-rule-header);
  font-size: 12px;
  white-space: nowrap;
}

.api-mock-page .api-mock-rule-table tr:last-child td {
  border-block-end: 0;
}

/* Rule table columns */
.api-mock-page .api-mock-rule-code {
  font-family: var(--api-rule-code-font);
  overflow-wrap: anywhere;
}

.api-mock-page .api-mock-rule-path {
  min-width: var(--api-rule-path-width);
}

.api-mock-page .api-mock-rule-type {
  white-space: nowrap;
}

.api-mock-page .api-mock-rule-select,
.api-mock-page .api-mock-rule-option {
  min-width: var(--api-rule-control-width);
  width: 100%;
}

.api-mock-page .api-mock-sample-value {
  max-width: var(--api-rule-sample-width);
  color: var(--json-muted);
}

/* Result statistics */
.api-mock-page .api-mock-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Responsive layout */
@media (max-width: 900px) {
  .api-mock-page .api-mock-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .api-mock-page .api-mock-settings-group {
    align-items: stretch;
    flex-direction: column;
  }

  .api-mock-page .api-mock-number,
  .api-mock-page .api-mock-seed {
    width: 100%;
  }

  .api-mock-page .api-mock-stats {
    grid-template-columns: 1fr;
  }
}