/* ai-disclosure: ai-generated */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 16px/1.55 var(--sans);
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--accent); }
code, pre { font-family: var(--mono); font-size: 0.9em; }
pre { overflow-x: auto; }
main pre:not(.source):not(.rendered) { background: var(--panel); padding: 0.6rem 0.8rem; border-radius: 6px; }
button, select, input { font: inherit; color: inherit; }
button, select, input:not([type="checkbox"]) {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0.15rem 0.5rem;
}
button { cursor: pointer; }
button:hover { border-color: var(--muted); }

header {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--line);
}
header a { text-decoration: none; }
header .brand { font-weight: 700; color: var(--fg); }
header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
header .tools { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
header .github { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--fg); }
footer { padding: 2rem 1rem 1rem; color: var(--muted); font-size: 0.75rem; text-align: center; }
footer a { color: inherit; }
main { flex: 1; width: 100%; max-width: 56rem; margin: 0 auto; padding: 1rem; }
main.wide { max-width: none; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; margin-top: 2.2rem; }
h3 { font-size: 1.05rem; margin-top: 1.6rem; } h4 { font-size: 0.95rem; }

/* A page with a list of its sections beside it. */
.with-contents {
  flex: 1; display: grid; grid-template-columns: minmax(0, 56rem) 14rem;
  gap: 2rem; justify-content: center; align-items: start;
}
.with-contents main { margin: 0; }
.contents {
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1rem 1rem 1rem 0; margin-top: 1.5rem; font-size: 0.85rem;
}
.contents a { text-decoration: none; }
.contents a.level2 { color: var(--fg); font-weight: 600; margin-top: 0.5rem; }
.contents a.level3 { color: var(--muted); padding-left: 0.8rem; }
.contents a:hover { color: var(--accent); }
@media (max-width: 72rem) {
  .with-contents { display: block; }
  .contents { display: none; }
}

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; vertical-align: top; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); }
td.status { font-weight: 600; }
td.status small { display: block; font-weight: 400; color: var(--muted); }
.proved, .conditional { color: var(--ok); }
.broken { color: var(--bad); }
.conjectured { color: var(--warn); }
.unknown, .inapplicable { color: var(--muted); }
dl.versions, dl.legend { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; }
dl.versions dd, dl.legend dd { margin: 0; }
dl.legend { font-size: 0.9rem; }
dl.legend dt { font-weight: 600; }
.example {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem;
  margin: 1rem 0; padding: 0.6rem 0.8rem; background: var(--panel); border-radius: 6px;
}
.example pre { margin: 0; white-space: pre-wrap; }
.example pre.rendered { border-left: 1px solid var(--line); padding-left: 1rem; color: var(--muted); }
.example a { grid-column: 1 / -1; font-size: 0.8rem; margin-top: 0.5rem; }
@media (max-width: 40rem) {
  .example { grid-template-columns: 1fr; }
  .example pre.rendered { border-left: 0; border-top: 1px solid var(--line); padding: 0.5rem 0 0; margin-top: 0.5rem; }
}

/* Playground */
#playground {
  display: grid; grid-template-columns: 17rem 21rem 1fr 1fr; gap: 1rem;
  padding: 1rem; align-items: stretch; height: calc(100vh - 6.5rem); min-height: 30rem;
}
#playground aside { overflow-y: auto; padding-right: 0.5rem; }
#playground h2 { font-size: 1rem; margin: 0 0 0.5rem; }
#playground h3 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin: 1rem 0 0.3rem;
}
.panel { margin-bottom: 1.5rem; font-size: 0.85rem; }
.changes { color: var(--warn); }
.switch { display: block; padding: 0.1rem 0 0.1rem 1.4rem; text-indent: -1.4rem; cursor: pointer; }
.switch input { margin: 0 0.35rem 0 0; }
.switch .name { font-family: var(--mono); }
.switch .doc { color: var(--muted); font-size: 0.8rem; margin-left: 0.4rem; }
.switch.differs .name { color: var(--warn); }
.delimiter { display: grid; grid-template-columns: 6.2rem 3.2rem 1fr; font-family: var(--mono); gap: 0.4rem; align-items: center; padding: 0.1rem 0; }
.delimiter .name { font-family: var(--mono); }
.delimiter input { font-family: var(--mono); width: 100%; }
.delimiter .error, pre.error { color: var(--bad); }
.delimiter .error { grid-column: 1 / -1; }
.summary { color: var(--muted); margin: 0; }
.property { border-bottom: 1px solid var(--line); padding: 0.25rem 0; color: var(--fg); }
.property summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 2.2rem 1fr; }
.property summary::-webkit-details-marker { display: none; }
.property p { margin: 0.3rem 0 0.3rem 2.2rem; color: var(--muted); }
.property p.note { color: var(--fg); }
.property button { margin-left: 2.2rem; }
.property .theorems a { margin-right: 0.3rem; }
.property .status { font-weight: 700; font-family: var(--mono); }
.property.proved .status, .property.conditional .status { color: var(--ok); }
.property.broken .status { color: var(--bad); }
.property.conjectured .status { color: var(--warn); }
.property.unknown .status, .property.inapplicable .status { color: var(--muted); }
.property.moved { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.editor, .result { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.editor textarea {
  flex: 1; width: 100%; resize: none; padding: 0.7rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--fg);
  font: 0.9rem/1.5 var(--mono); tab-size: 2;
}
.tabs { display: flex; gap: 0.25rem; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; }
.tab { font-size: 0.85rem; padding: 0.2rem 0.6rem; }
.tab.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.positions { font-size: 0.8rem; color: var(--muted); margin-left: 0.5rem; }
.timing { margin-left: auto; color: var(--muted); font-size: 0.8rem; font-family: var(--mono); }
.output { flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: 6px; overflow: auto; }
.output pre { margin: 0; padding: 0.7rem; white-space: pre-wrap; word-break: break-word; }
.output iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 88rem) {
  #playground { grid-template-columns: 1fr 1fr; height: auto; }
  #playground aside { order: 3; overflow: visible; }
  .editor textarea, .output { min-height: 22rem; }
}
@media (max-width: 44rem) {
  #playground { grid-template-columns: 1fr; }
}