/* /rosie "CAD and simulation" section: per-robot kit downloads and the quickstart code tabs.
   Download rows reuse .iface-files / .iface-dl from rosie-interfaces.css; code and token colours follow
   assets/docs/docs.css so the snippets read the same as in the docs. */
#cad {
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --code-bg: var(--paper);
  --code-line: var(--line-2);
  --t-com: #566d76; --t-kw: #13294b; --t-str: #2b6a4e; --t-num: #94500a; --t-fn: #1d5a86;
  --t-ty: #5b4488; --t-prop: #0e5866; --t-var: #94500a; --t-meta: #7a3f66; --t-tag: #13294b; --t-op: #4e6068;
}
:root[data-theme="dark"] #cad {
  --t-com: #7f959c; --t-kw: #a9c4f2; --t-str: #9ed3b3; --t-num: #e6b877; --t-fn: #8fd0f0;
  --t-ty: #c9b3ef; --t-prop: #7fcfd6; --t-var: #e6b877; --t-meta: #deaacb; --t-tag: #a9c4f2; --t-op: #9bb0b7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #cad {
    --t-com: #7f959c; --t-kw: #a9c4f2; --t-str: #9ed3b3; --t-num: #e6b877; --t-fn: #8fd0f0;
    --t-ty: #c9b3ef; --t-prop: #7fcfd6; --t-var: #e6b877; --t-meta: #deaacb; --t-tag: #a9c4f2; --t-op: #9bb0b7;
  }
}

#cad .intro code, .simkit-note code { font: .9em var(--mono); }

.simkit-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.simkit-model { display: grid; gap: .9rem; align-content: start; padding: 1.25rem; border: 1px solid var(--line); background: var(--paper); }
.simkit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.simkit-head h3 { margin: 0; font-size: 1.35rem; }
.simkit-zip { justify-self: start; }
.simkit-model .iface-files { margin: 0; }
@media (max-width: 1000px) { .simkit-models { grid-template-columns: 1fr; } }

.simkit-code { margin-top: 2.25rem; min-width: 0; }
.simkit-code-title { margin: 0; font-size: 1.15rem; }
.simkit-code-sub { margin: .3rem 0 0; color: var(--ink-2); font-size: .95rem; }
.simkit-note { margin-top: 1.5rem; }

/* code blocks (the markup of tools/md.mjs) */
#cad .code { position: relative; margin: 0; background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 3px; min-width: 0; }
#cad .code-head { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; padding: .3rem .45rem .3rem .9rem; border-bottom: 1px solid var(--code-line); }
#cad .code-title { flex: 1; min-width: 0; font: 500 .8rem var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cad .code-lang { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
#cad .code pre {
  margin: 0; padding: 1rem 1.1rem 1.05rem; overflow-x: auto; overscroll-behavior-x: contain;
  font: .84rem/1.65 var(--mono); color: var(--ink); tab-size: 4; -moz-tab-size: 4;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#cad .code pre:focus-visible { outline-offset: -3px; }
#cad .code code { font: inherit; background: none; padding: 0; }
.simkit-copy {
  display: inline-flex; align-items: center; gap: .35rem; flex: none; height: 1.9rem; padding: 0 .6rem; cursor: pointer;
  font: 700 .6rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 2px;
}
.simkit-copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.simkit-copy:hover, .simkit-copy.is-done { color: var(--ink); border-color: var(--ink); }

#cad .t-com { color: var(--t-com); font-style: italic; }
#cad .t-kw { color: var(--t-kw); font-weight: 600; }
#cad .t-str { color: var(--t-str); }
#cad .t-num { color: var(--t-num); }
#cad .t-fn { color: var(--t-fn); }
#cad .t-ty { color: var(--t-ty); }
#cad .t-prop { color: var(--t-prop); }
#cad .t-var { color: var(--t-var); }
#cad .t-meta { color: var(--t-meta); }
#cad .t-tag { color: var(--t-tag); }
#cad .t-op { color: var(--t-op); }

/* tabs: every panel shows (labelled) until rosie-simkit.js marks the group .is-tabbed */
.simkit-tabs { margin-top: 1rem; }
.simkit-tabs .tabs-list { display: none; border-bottom: 1px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.simkit-tabs .tabs-list::-webkit-scrollbar { display: none; }
.simkit-tabs.is-tabbed .tabs-list { display: flex; }
.simkit-tabs .tabs-list button {
  flex: none; margin: 0 0 -1px; padding: .55rem .95rem .5rem; cursor: pointer; white-space: nowrap;
  font: 600 .9rem var(--sans); color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent;
}
.simkit-tabs .tabs-list button:hover { color: var(--ink); }
.simkit-tabs .tabs-list button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.simkit-tabs .tabs-list button:focus-visible { outline-offset: -3px; }
.simkit-tabs .tabs-panel + .tabs-panel { margin-top: 1rem; }
.simkit-tabs:not(.is-tabbed) .tabs-panel::before {
  content: attr(data-label); display: block; margin: 0 0 .4rem;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-2);
}
.simkit-tabs.is-tabbed .tabs-panel { margin-top: 0; }
.simkit-tabs.is-tabbed .tabs-panel:not(.is-active) { display: none; }
.simkit-tabs.is-tabbed .tabs-panel > .code { border-top: 0; border-radius: 0 0 3px 3px; }