/* docs.css — Documentation page styles (worksby.design) */

/* ── Code blocks ─────────────────────────────────────────────────────────────── */

.code-block {
  background: var(--surface-2);
  border: 1px solid var(--border-em);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .83rem;
  line-height: 1.65;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  margin: .75rem 0;
}

code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1em .4em;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .85em;
  color: var(--coral);
}

.code-block code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ── HTTP method badges ──────────────────────────────────────────────────────── */

.method {
  display: inline-block;
  padding: .15em .55em;
  border-radius: var(--r-sm);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-right: .35rem;
}
.method-get  { background: rgba(34,197,94,.12);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.method-post { background: rgba(96,165,250,.12); color: #60a5fa; border: 1px solid rgba(96,165,250,.3); }

/* ── Quick navigation ────────────────────────────────────────────────────────── */

.doc-nav {
  background: var(--surface-1);
  border: 1px solid var(--border-em);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}

.doc-nav-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .65rem;
}

.doc-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.25rem;
}

.doc-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .875rem;
  transition: color var(--t);
}
.doc-nav a:hover { color: var(--coral); }

/* ── Document sections ───────────────────────────────────────────────────────── */

.doc-section {
  margin-bottom: 2.75rem;
  scroll-margin-top: 1.5rem;
}

.doc-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text);
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border-em);
  margin-bottom: 1.15rem;
}

.doc-section p {
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: .75rem;
}

.doc-section h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin: 1.5rem 0 .5rem;
}

/* ── Endpoint cards ──────────────────────────────────────────────────────────── */

.endpoint {
  background: var(--surface-1);
  border: 1px solid var(--border-em);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 1.5rem;
}

.endpoint-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .65rem;
}

.endpoint-path {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}

.endpoint-desc {
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.endpoint-sub {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1rem 0 .4rem;
}

/* ── Parameter / property tables ─────────────────────────────────────────────── */

.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: .5rem 0 1rem;
}

.param-table th {
  text-align: left;
  padding: .4rem .75rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-em);
}

.param-table td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  line-height: 1.5;
}

.param-table tr:last-child td { border-bottom: none; }

.param-table td:first-child {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .825rem;
  color: var(--coral);
  white-space: nowrap;
}

.param-table .type {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .775rem;
  color: var(--text-dim);
}

.param-table .desc {
  color: var(--text-muted);
  font-size: .845rem;
}

.req {
  display: inline-block;
  background: rgba(248,113,113,.12);
  border: 1px solid rgba(248,113,113,.3);
  color: #f87171;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .1em .4em;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: .35rem;
}

/* ── Enum value chips ────────────────────────────────────────────────────────── */

.enum-values {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .3rem;
}

.enum-val {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .05em .4em;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── Check-in decision colors ────────────────────────────────────────────────── */

.d-grant   { color: #4ade80; font-weight: 700; }
.d-deny    { color: #f87171; font-weight: 700; }
.d-already { color: #fbbf24; font-weight: 700; }
.d-error   { color: var(--text-muted); font-weight: 700; }

/* ── Schema object panels ────────────────────────────────────────────────────── */

.schema-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-em);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.schema-panel-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.schema-panel-title .obj-name {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .95rem;
  color: var(--coral);
}

/* ── Docs index article cards ────────────────────────────────────────────────── */

.doc-card {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border-em);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color var(--t), transform var(--t);
}

.doc-card:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
}

.doc-card-icon {
  font-size: 1.75rem;
  margin-bottom: .75rem;
}

.doc-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
}

.doc-card-desc {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.doc-card-meta {
  margin-top: .75rem;
  font-size: .78rem;
  color: var(--text-dim);
}

/* ── Callout / note box ──────────────────────────────────────────────────────── */

.callout {
  background: var(--surface-2);
  border: 1px solid var(--border-em);
  border-left: 3px solid var(--navy-light);
  border-radius: var(--r-sm);
  padding: .875rem 1.1rem;
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: .75rem 0;
}

.callout strong { color: var(--text); }