/* The Lab (lab.js): a big prompt box, chips, the thread, beat cards with pens, recent chats. The desk's tokens, a little more play. */
.lab { display: grid; gap: 24px; max-width: 1040px; margin: 0 auto; padding: 8px 0 40px; --tone: var(--ink); }
.lab-hero { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: left; margin-top: 8px; }
.lab-mascot { width: 72px; height: 72px; flex: none; image-rendering: pixelated; animation: lab-bob 3.2s ease-in-out infinite; }
.lab-title { margin: 0; font: italic 500 clamp(40px, 7vw, 60px)/1 var(--serif); color: var(--ink); }
.lab-dek { margin: 6px 0 0; max-width: 34rem; font: 16px/1.5 var(--sans); color: var(--ink-soft); }
@keyframes lab-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .lab-mascot { animation: none; } .lab * { transition: none !important; } }

.lab-box { display: grid; gap: 12px; padding: 18px; border: 2px solid var(--ink); border-radius: 28px; background: var(--paper-2); box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 18%, transparent); max-width: 820px; width: 100%; margin: 0 auto; }
.lab-box[data-locked="1"] { border-style: dashed; box-shadow: none; }
.lab-prompt { width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border: 0; background: transparent; font: 500 20px/1.45 var(--sans); color: var(--ink); }
.lab-prompt:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; border-radius: 12px; }
.lab-prompt:disabled { cursor: not-allowed; }
.lab-prompt::placeholder { color: var(--ink-faint); }
.lab-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lab-chip { --tone: var(--ink); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1.5px solid var(--tone); border-radius: 999px; background: color-mix(in srgb, var(--tone) 8%, #fff); font: 14px/1.2 var(--sans); color: var(--ink); cursor: pointer; transition: transform .12s; }
.lab-chip b { color: var(--tone); font-weight: 700; }
.lab-chip:hover:not(:disabled) { transform: translateY(-1px); }
.lab-chip:disabled { opacity: .55; cursor: default; }
.lab-chip.is-ask { animation: lab-ask 1.8s ease-in-out infinite; }
@keyframes lab-ask { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--berry) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--berry) 0%, transparent); } }
.lab-chip select { border: 0; background: transparent; font: inherit; color: inherit; min-height: 32px; padding: 0 2px; cursor: pointer; }
.tone-berry { --tone: var(--berry); } .tone-teal { --tone: var(--teal); } .tone-sky { --tone: var(--sky); } .tone-plum { --tone: var(--plum); }
.tone-lemon { --tone: #9a7b10; } .tone-leaf { --tone: #4f7a2d; } .tone-oxblood { --tone: var(--oxblood); } .tone-plain { --tone: var(--ink-soft); }
.lab-go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 22px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lemon); color: var(--ink); font: 700 16px/1 var(--sans); cursor: pointer; transition: transform .12s, box-shadow .12s; box-shadow: 3px 3px 0 var(--ink); }
.lab-go:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.lab-go:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lab-go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.lab-go:focus-visible, .lab-pen:focus-visible, .lab-pick:focus-visible, .lab-menu-item:focus-visible, .lab-chip:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.lab-note { margin: 0; min-height: 1.2em; }
.lab-note:empty { display: none; }

.lab-sheet { display: grid; gap: 14px; max-width: 820px; width: 100%; margin: 0 auto; padding: 16px; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; }
.lab-sheet[hidden] { display: none; }
.lab-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-tab { min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; font: 600 14px/1 var(--sans); cursor: pointer; }
.lab-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.lab-close { margin-left: auto; }
.lab-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lab-pick { width: 100%; display: grid; gap: 2px; text-align: left; padding: 10px 14px; min-height: 56px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--paper-2); font: 14px/1.35 var(--sans); cursor: pointer; }
.lab-pick:hover { border-color: var(--ink); }
.lab-pick span { color: var(--ink-soft); font-size: 13px; }
.lab-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.lab-form label { display: grid; gap: 4px; font: 600 14px/1.3 var(--sans); min-width: 0; }
.lab-form :is(input, select) { width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; font: 16px/1.4 var(--sans); background: #fff; }
.lab-form .btn { grid-column: 1 / -1; justify-self: start; }

.lab-h { margin: 0; font: 600 20px/1.3 var(--sans); }
.lab-thread { display: grid; gap: 20px; max-width: 820px; width: 100%; margin: 0 auto; }
.lab-thread[hidden] { display: none; }
.lab-turn { display: grid; gap: 12px; }
.lab-you { justify-self: end; max-width: 88%; padding: 12px 16px; border-radius: 20px 20px 4px 20px; background: var(--ink); color: #fff; overflow-wrap: anywhere; }
.lab-you p { margin: 0; font: 16px/1.45 var(--sans); }
.lab-you .small { margin-top: 4px; opacity: .75; font-size: 12px; }
.lab-nell { display: grid; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 20px 20px 20px 4px; background: #fff; min-width: 0; }
.lab-eye { margin: 0; font: 700 12px/1 var(--sans); text-transform: uppercase; color: var(--ink-faint); }
.lab-brief p { margin: 4px 0; }
.lab-flag { display: inline-block; margin: 6px 0 0; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--plum) 14%, #fff); color: var(--plum); font: 700 13px/1.3 var(--sans); }
.lab-nodes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.lab-nodes details { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; background: var(--paper-2); }
.lab-nodes summary { cursor: pointer; font: 600 14px/1.4 var(--sans); }
.lab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lab-step { padding: 6px 10px 6px 34px; position: relative; border-radius: 10px; font: 14px/1.4 var(--sans); background: var(--paper-2); overflow-wrap: anywhere; }
.lab-step::before { content: ""; position: absolute; left: 12px; top: 11px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); }
.lab-step[data-state="done"]::before { background: var(--leaf); border-color: var(--leaf); }
.lab-step[data-state="running"]::before { border-color: var(--sky); animation: lab-spin 1s linear infinite; border-top-color: transparent; }
.lab-step[data-state="waiting"]::before { border-style: dotted; border-color: var(--sky); }
.lab-step[data-state="failed"]::before { background: var(--oxblood); border-color: var(--oxblood); }
@keyframes lab-spin { to { transform: rotate(360deg); } }
.lab-state { margin: 0; font: 600 15px/1.4 var(--sans); color: var(--tone); overflow-wrap: anywhere; }
.lab-mission { margin: 4px 0 0; font: 600 22px/1.3 var(--serif); }
.lab-beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lab-beat { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px 14px 12px; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--paper-2); min-width: 0; transition: transform .12s, border-color .12s; }
.lab-beat:hover { transform: translateY(-2px); border-color: var(--ink); }
.lab-pen { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.lab-pen:hover:not(:disabled), .lab-pen[aria-expanded="true"] { background: var(--lemon); color: var(--ink); }
.lab-pen:disabled { opacity: .4; cursor: not-allowed; }
.lab-beat-kind { margin: 0; padding-right: 40px; font: 700 12px/1.2 var(--sans); text-transform: uppercase; color: var(--teal); }
.lab-beat-pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.lab-beat-words { margin: 0; font: 15px/1.45 var(--sans); overflow-wrap: anywhere; }
.lab-edit { display: grid; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1.5px dashed var(--line-strong); }
.lab-edit textarea { width: 100%; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; font: 16px/1.4 var(--sans); background: #fff; resize: vertical; }
.lab-edit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lab-cap { display: inline-flex; gap: 6px; align-items: center; }
.lab-publish.is-muted { opacity: .55; }

.lab-recent { display: grid; gap: 12px; }
.lab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.lab-card { display: grid; gap: 8px; align-content: start; text-align: left; padding: 12px; border: 1.5px solid var(--line-strong); border-radius: 20px; background: #fff; font: 14px/1.35 var(--sans); transition: transform .12s, border-color .12s; min-width: 0; }
.lab-card:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--ink); }
.lab-card-open { display: grid; gap: 6px; align-content: start; text-align: left; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.lab-card-open:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; border-radius: 14px; }
.lab-card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-card-acts .tool { min-height: 40px; }
.lab-recent-note:empty { display: none; }
.lab-card-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--paper-2); overflow: hidden; }
.lab-card-pic img { width: 100%; height: 100%; object-fit: cover; }
.lab-card-pic .lab-card-dragon { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.lab-card-title { font: 600 17px/1.3 var(--sans); overflow-wrap: anywhere; }
.lab-pill { justify-self: start; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, #fff); color: var(--tone); font: 600 12px/1.35 var(--sans); overflow-wrap: anywhere; }

/* The Kind chip's menu: a short list that opens under the chip, twelve beats and two missions. */
.lab-menu-wrap { position: relative; display: inline-flex; }
.lab-chip svg { flex: none; }
.lab-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(340px, 86vw); max-height: min(70vh, 460px); overflow: auto; display: grid; gap: 2px; padding: 8px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 18%, transparent); }
.lab-menu-h { margin: 6px 8px 2px; font: 700 12px/1 var(--sans); text-transform: uppercase; color: var(--ink-faint); }
.lab-menu-item { display: grid; gap: 1px; text-align: left; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; font: 15px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.lab-menu-item:hover, .lab-menu-item[aria-checked="true"] { background: color-mix(in srgb, var(--sky) 14%, #fff); }
.lab-menu-item span { color: var(--ink-soft); font-size: 12px; }

/* What the chosen kind needs, under the box. */
.lab-more:empty { display: none; }
.lab-more { display: grid; gap: 10px; padding-top: 4px; border-top: 1.5px dashed var(--line-strong); }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.lab-grid label { display: grid; gap: 4px; font: 600 14px/1.3 var(--sans); min-width: 0; }
.lab-grid .lab-wide, .lab-wide { grid-column: 1 / -1; }
.lab-grid :is(input:not([type=checkbox]), select, textarea), .lab-fold textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; font: 16px/1.4 var(--sans); background: #fff; }
.lab-grid .small, .lab-hint { font-weight: 400; color: var(--ink-soft); }
.lab-hint { margin: 0; }
.lab-fold { border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 6px 12px; background: var(--paper-2); }
.lab-fold > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font: 600 15px/1.3 var(--sans); }
.lab-fold[open] > summary { margin-bottom: 8px; }
.lab-nodelist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.lab-node { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 44px; font: 14px/1.35 var(--sans); }
.lab-node input { grid-row: 1 / span 2; width: 20px; height: 20px; min-height: 0; margin: 0; }
.lab-node b, .lab-node span { grid-column: 2; }
.lab-pictures { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.lab-pictures label { flex: 1 1 220px; }
.lab-pics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.lab-pic { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 12%, #fff); font: 14px/1.4 var(--sans); }
.lab-pic-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font: 18px/1 var(--sans); cursor: pointer; }
.lab-tape { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px; }
.lab-examples { display: grid; gap: 6px; }
.lab-examples .lab-nodes li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.lab-box[data-kind="maths"] .lab-prompt, .lab-box[data-kind="maths"] .lab-go { display: none; }
.lab-box[data-kind="maths"] .lab-chips { justify-content: flex-start; }

/* Daily maths: the daily maths studio itself, in the Lab's frame; the child is the profile. */
.lab-maths { display: grid; gap: 10px; max-width: 820px; width: 100%; margin: 0 auto; padding: 16px; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; }
.lab-maths[hidden] { display: none; }
.lab-maths-note:empty { display: none; }
.lab-maths .dms-context > label:first-child { display: none; }
.lab-maths .dms > h2 { font: 600 20px/1.3 var(--sans); margin: 0 0 8px; }

/* The mission's actions, its preview and the folds under the beats. */
.lab-acts .lab-withdraw { margin-left: auto; }
.lab-context { margin-top: 0; }
.lab-preview { display: grid; gap: 8px; }
.lab-preview iframe { width: 100%; height: min(70vh, 560px); border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; }
.lab-ask { display: grid; gap: 8px; padding: 10px 12px; border: 1.5px dashed var(--oxblood); border-radius: 14px; }
.lab-budget-lines { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.lab-budget-lines [data-over="1"] { color: var(--oxblood); }
.lab-cand { display: grid; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1.5px dashed var(--line-strong); }
.lab-cand .cand-frame { width: 100%; height: 260px; border: 1.5px solid var(--line-strong); border-radius: 10px; }
.lab-cand .rv-form { display: grid; gap: 8px; }
.lab-cand .rv-form :is(select, textarea) { width: 100%; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; font: 16px/1.4 var(--sans); }

@media (max-width: 700px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the Kind menu is a sheet from the bottom, so it can never run off the side. */
  .lab-menu { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: 66vh; }
  .lab-acts .lab-withdraw { margin-left: 0; }
  .lab { gap: 18px; }
  .lab-hero { flex-direction: column; text-align: center; gap: 8px; }
  .lab-mascot { width: 56px; height: 56px; }
  .lab-box { border-radius: 22px; padding: 14px; }
  .lab-prompt { font-size: 18px; }
  .lab-go { margin-left: 0; width: 100%; justify-content: center; }
  .lab-list, .lab-form { grid-template-columns: minmax(0, 1fr); }
  .lab-you { max-width: 100%; }
  .lab-beats, .lab-cards { grid-template-columns: minmax(0, 1fr); }
}