/* Lalakai models page: the spec sheet and the run-it-locally panel under the
   model cards. Loaded last, on models.html only. */

:root {
  /* the terminal is navy ink in both themes; dark mode only deepens it */
  --ll-term-bg: #0f1b2e;
  --ll-term-edge: transparent;
  --ll-term-line: rgba(231, 238, 251, 0.09);
  --ll-term-fg: #e7eefb;
  --ll-term-muted: #8597b5;
  --ll-term-arg: #a6dcff;
  --ll-term-key: #86b4ff;
}

:root[data-theme="dark"] {
  --ll-term-bg: #0c121b;
  --ll-term-edge: #283242;
}

/* one rhythm for everything under the cards */
#skip-nav > div {
  gap: clamp(48px, 4.5vw, 64px);
}

.site-shell {
  row-gap: 88px;
}

.ll-mx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.ll-mx-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- spec sheet
   Two columns that sit exactly under the two cards: the table is widened by
   one card gap on each side and spaced by the same gap, so each column lines
   up with its card. Each cell carries its own small label, so every value
   reads on its own. */

.ll-spec {
  width: calc(100% + 32px);
  margin: 0 -16px;
  border-collapse: separate;
  border-spacing: 16px 0;
  table-layout: fixed;
}

.ll-spec thead th {
  padding: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
}

.ll-spec tbody td {
  padding: 11px 0;
  border-top: 1px solid var(--color-divider-subtle);
}

.ll-spec tbody tr:last-child td {
  border-bottom: 1px solid var(--color-divider-subtle);
}

/* label and value are centred against each other, so a label sits at the
   same height in both columns whether or not its value wraps */
.ll-spec-label {
  display: inline-block;
  width: 100px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-secondary);
}

.ll-spec-value {
  display: inline-block;
  width: calc(100% - 108px);
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-primary);
  text-wrap: pretty;
}

.ll-spec .is-key td {
  padding: 12px 0;
}

/* the large figures never wrap; they keep a shared baseline with their label */
.ll-spec .is-key .ll-spec-label,
.ll-spec .is-key .ll-spec-value {
  vertical-align: baseline;
}

.ll-spec .is-key .ll-spec-value {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* ---------- run it locally */

.ll-run-tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  margin-bottom: 20px;
  padding: 3px;
  border: 1px solid var(--color-divider-subtle);
  border-radius: 999px;
  background: var(--color-mono-200);
}

.ll-run-tab {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ll-run-tab:hover {
  color: var(--color-primary);
}

.ll-run-tab {
  position: relative;
  z-index: 1;
}

.ll-run-tab[aria-selected="true"] {
  background: var(--color-background);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(16, 28, 56, 0.14);
}

/* with script, one indicator glides between the tabs instead */
.ll-run-tabs.has-ind .ll-run-tab[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}

.ll-run-ind {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  z-index: 0;
  width: var(--w, 0);
  border-radius: 999px;
  background: var(--color-background);
  box-shadow: 0 1px 3px rgba(16, 28, 56, 0.14);
  transform: translateX(var(--x, 0));
}

.ll-run-ind.is-ready {
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.ll-run-tab:focus-visible,
.ll-copy:focus-visible {
  outline: 2px solid var(--color-pri-800);
  outline-offset: 2px;
}

.ll-run-panel {
  display: grid;
  gap: 32px;
  align-items: start;
}

.ll-run-panel[hidden] {
  display: none;
}

@media (min-width: 1000px) {
  .ll-run-panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
  }
}

/* a switch prints the command in, left to right, and fades the side panel in
   behind it. It only runs after a click; the first view has no animation. */

@media (prefers-reduced-motion: no-preference) {
  .ll-run-panel.is-fresh .ll-term-code {
    animation: ll-run-print 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
  }

  .ll-run-panel.is-fresh .ll-run-needs {
    animation: ll-run-fade 0.4s ease-out 0.15s both;
  }
}

@keyframes ll-run-print {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ll-run-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* the terminal */

.ll-term {
  overflow: hidden;
  border: 1px solid var(--ll-term-edge);
  border-radius: 12px;
  background: var(--ll-term-bg);
  color: var(--ll-term-fg);
}

.ll-term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px 8px 18px;
  border-bottom: 1px solid var(--ll-term-line);
}

.ll-term-title {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  color: var(--ll-term-muted);
}

.ll-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 12.5px;
  line-height: 1;
  color: var(--ll-term-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ll-copy:hover {
  background: rgba(231, 238, 251, 0.08);
  color: var(--ll-term-fg);
}

.ll-copy.is-copied {
  color: var(--ll-term-arg);
}

.ll-term-code {
  margin: 0;
  padding: 20px 20px 22px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}

.ll-term-code ::selection {
  background: rgba(166, 220, 255, 0.3);
}

.ll-term .tok-prompt {
  color: var(--ll-term-muted);
  user-select: none;
}

.ll-term .tok-arg {
  color: var(--ll-term-arg);
}

.ll-term .tok-key {
  color: var(--ll-term-key);
}

/* what it needs */

.ll-run-needs h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ll-req {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.ll-req th,
.ll-req td {
  padding: 11px 14px 11px 0;
  border-top: 1px solid var(--color-divider-subtle);
  text-align: left;
  vertical-align: top;
}

.ll-req thead th {
  padding-top: 0;
  border-top: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-secondary);
}

.ll-req tbody th {
  font-weight: 500;
  white-space: nowrap;
}

.ll-req tbody tr:last-child > * {
  border-bottom: 1px solid var(--color-divider-subtle);
}

.ll-run-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-secondary);
  text-wrap: pretty;
}

.ll-req-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}

.ll-req-list li {
  padding: 11px 0;
  border-top: 1px solid var(--color-divider-subtle);
}

.ll-req-list li:last-child {
  border-bottom: 1px solid var(--color-divider-subtle);
}

.ll-req-list code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-mono-200);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.ll-req-list a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-mono-500);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.ll-req-list a:hover,
.ll-req-list a:focus-visible {
  color: var(--color-pri-800);
  text-decoration-color: var(--color-pri-800);
}

/* phones: a slightly tighter sheet, same structure */

@media (max-width: 599px) {
  .ll-spec {
    width: calc(100% + 24px);
    margin: 0 -12px;
    border-spacing: 12px 0;
  }

  .ll-spec thead th {
    font-size: 18px;
  }

  .ll-spec-value {
    font-size: 14.5px;
  }

  .ll-spec .is-key .ll-spec-value {
    font-size: 20px;
  }

  .ll-spec-label,
  .ll-spec-value {
    display: block;
    width: auto;
  }

  .ll-spec-label {
    margin-bottom: 2px;
  }

  .ll-spec .is-key .ll-spec-value {
    font-size: 20px;
  }

  .ll-term-code {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-run-tab,
  .ll-copy,
  .ll-req-list a,
  .ll-run-ind {
    transition: none;
  }
}