/* The API reference page only, loaded from templates/api.html alongside
   legal.css — which already supplies the reading measure, the heading rhythm,
   the caveat box and the summary panel. This sheet adds the four things a
   reference page needs that a policy page does not.

   The design argument: reference documentation is a table people scan, not
   prose they read. So the measure widens where a table lives and stays narrow
   where sentences do, and the three licence layers get a colour each so a
   reader skimming the field lists can see at a glance which side of the line a
   field falls on. That is the one job this page has to do well.

   Colours come from site.css tokens. No new palette. */

/* Endpoint and layer tables run wider than the 70ch prose measure — a route
   plus a summary plus a parameter list does not fit in a reading column. */
.policy table.routes,
.policy table.layers,
.policy table.counts{width:100%; max-width:none; border-collapse:collapse}

/* Wide tables scroll rather than squashing. A route is a URL and a URL that
   wraps mid-path is unreadable. */
.policy table.routes{display:block; overflow-x:auto}

.policy .routes td{padding:calc(var(--u)*.9) calc(var(--u)*2)
  calc(var(--u)*.9) 0; border-bottom:1px solid var(--hair);
  vertical-align:top; font-size:var(--t-small); line-height:1.5}
.policy .routes td.path{white-space:nowrap; width:1%}
.policy .routes td.path code{background:none; padding:0; font-size:.95em}

/* Query parameters, under the summary they belong to. Deliberately quiet:
   they are a reminder that the parameter exists, not its documentation. */
.params{margin-top:4px}
.params code{background:var(--sunk); font-size:.85em; margin-right:4px;
  color:var(--grey)}

.policy .counts td{padding:calc(var(--u)*.8) calc(var(--u)*3)
  calc(var(--u)*.8) 0; border-bottom:1px solid var(--hair)}
.policy .counts td:nth-child(2){text-align:right; font-variant-numeric:tabular-nums;
  font-weight:600; white-space:nowrap}
.policy .counts td:last-child{color:var(--grey); font-size:var(--t-small)}

.policy .layers td{padding:calc(var(--u)*1.4) calc(var(--u)*3)
  calc(var(--u)*1.4) 0; border-bottom:1px solid var(--hair);
  vertical-align:top; line-height:1.5}

/* Entity name above each group of routes and each field list. Set as a label
   rather than a heading — there are eleven of them and eleven h3s in a row
   reads as an outline nobody asked for. */
.policy h3.group{font-family:inherit; font-size:var(--t-cap); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--grey);
  margin:calc(var(--u)*4) 0 var(--u)}

/* The field classification. A definition list rather than a table because the
   left column is three fixed values and the right is a run of code spans that
   should wrap freely. */
.layerfields{margin:0 0 calc(var(--u)*3); display:grid;
  grid-template-columns:12ch 1fr; gap:calc(var(--u)*.75) calc(var(--u)*2);
  align-items:baseline}
.layerfields dt{font-size:var(--t-cap); font-weight:600; letter-spacing:.03em;
  white-space:nowrap}
.layerfields dd{margin:0; line-height:2}
.layerfields dd code{font-size:.85em}

/* One colour per licence layer, and the same three everywhere on the page.
   --alert is already the site's "read this" colour; open takes the plain ink so
   the default case does not shout. */
.layerfields dt.open{color:var(--ink)}
.layerfields dt.prose{color:var(--grey)}
.layerfields dt.withheld{color:var(--alert)}

/* Inline gloss — the licence id beside a prose field, the example fields under
   a layer name. */
.eg{color:var(--mute); font-size:var(--t-cap)}

/* Request and response samples. The page has six and they carry most of its
   weight, so they get real room and a horizontal scroll rather than a wrap. */
.policy pre{background:var(--sunk); padding:calc(var(--u)*2);
  margin:0 0 calc(var(--u)*2.5); overflow-x:auto; max-width:none;
  font-size:var(--t-small); line-height:1.55}
.policy pre code{background:none; padding:0; font-size:1em;
  white-space:pre; color:var(--ink)}

/* Phones. The two-column field list collapses to a labelled block; the route
   table keeps its own scroller and does not need one. */
@media (max-width:640px){
  .layerfields{grid-template-columns:1fr; gap:2px calc(var(--u)*2)}
  .layerfields dt{margin-top:var(--u)}
  .policy .layers td, .policy .counts td{padding-right:calc(var(--u)*1.5)}
}