/* StarterPad studio: the idea, the team, the sketch. Loads after sp.css and takes over its studio rules (same
   selectors, same breakpoints: the side pack shows from 1181 px, phones from 860 px down). */

/* ---------- the frame ---------- */
@media (min-width: 1181px) {
  .st-wrap { grid-template-columns: 220px minmax(0, 1fr) clamp(300px, 27vw, 420px); }
}
.st-main { padding-bottom: 0; }
.st-main h2:focus { outline: none; }
.st-main .sub b { font-weight: 600; color: var(--ink); }
.st-main .sub .outs { color: var(--ink); }
.st-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--greend); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.st-link:hover { color: var(--ink); }
.st-link:focus-visible, .rc-e:focus-visible, .idunly:focus-visible, .st-main summary:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(15,180,99,.45); }

/* the sticky action bar at the foot of every step */
.st-main .foot-act { position: sticky; bottom: 0; z-index: 3; margin: 32px -38px 0; padding: 14px 38px calc(14px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -18px 30px -26px rgba(13,19,16,.5); flex-wrap: wrap; }
.st-main .foot-act:empty { display: none; }
.fa-sum { flex: 1 1 220px; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--mute); }
.fa-sum b { color: var(--ink); font-weight: 700; }

/* ---------- the rail: one button per step ---------- */
.st-rail li, .st-rail li.on, .st-rail li.done { display: block; padding: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; cursor: default; }
.st-rail li::before, .st-rail li.on::before, .st-rail li.done::before { content: none; display: none; }
.st-rail li + li { margin-top: 2px; }
.st-rail li > button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-stretch: 80%; font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; color: var(--mute); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.st-rail li > button i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-style: normal; font-size: 14px; font-variant-numeric: tabular-nums; flex: none; }
.st-rail li > button:not(:disabled):hover { background: rgba(255,255,255,.7); color: var(--ink); }
.st-rail li > button:disabled { cursor: default; }
.st-rail li > button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15,180,99,.45); }
.st-rail li.on > button { color: var(--ink); background: #fff; box-shadow: var(--shadow); cursor: default; }
.st-rail li.on > button i { background: var(--ink); color: #fff; box-shadow: none; }
.st-rail li.done > button { color: var(--greend); }
.st-rail li.done > button i { background: var(--green); color: var(--ink); box-shadow: none; }
.st-rail li.later > button:disabled { color: var(--faint); }
.st-rail li.later > button:disabled i { box-shadow: inset 0 0 0 1.5px var(--line2); }
.st-rail .note { margin: 22px 10px 0; }
.st-rail .note b { display: block; color: var(--ink); font-stretch: 80%; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; line-height: 1.15; margin-bottom: 6px; }

/* ---------- 1. the idea ---------- */
.ifld > span label { cursor: pointer; }
#iIdea { min-height: 116px; font-size: 17px; line-height: 1.45; padding: 13px 14px; }
.st-main .fld textarea.bad, .st-main .fld textarea.bad:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(217,56,62,.16); }
.icount { min-height: 19px; }
.icount.bad { color: var(--red); font-weight: 600; }
.ichips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.ichips .lab { color: var(--mute); margin: 0 4px 0 0; }
.ichips .chip { background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 7px 11px; }
.ichips .chip:hover { background: var(--mint); box-shadow: inset 0 0 0 1px rgba(15,180,99,.4); }
.idunly { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--greend); text-decoration: none; }
.idunly .ic { width: 15px; height: 15px; }
.idunly:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ikind { margin-top: 28px; }
.kpick .kind[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.khint { margin: 10px 0 0; min-height: 21px; font-size: 14px; color: var(--ink2); }
.khint:focus { outline: none; }
.khint .st-link { margin-left: 4px; }
#iMore { margin-top: 26px; border-top: 1px solid var(--line); }
#iMore > summary { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; list-style: none; cursor: pointer; font-stretch: 80%; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; color: var(--greend); }
#iMore > summary::-webkit-details-marker { display: none; }
#iMore > summary::before, .tm-add > summary::before { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--mint); color: var(--greend); font-size: 17px; line-height: 1; font-stretch: 100%; flex: none; }
#iMore[open] > summary::before, .tm-add[open] > summary::before { content: '–'; }
#iMore .grid2 { margin-top: 12px; }
#iMore .wide { grid-column: 1 / -1; }
#iNotes { min-height: 0; }

/* a sketch that stopped part way */
.resume { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 30px; padding: 28px 22px 20px; background: var(--ink); color: #fff; }
.resume.pk.slot::before, .resume.pk.slot::after { background: var(--paper); }
.resume .lab { display: block; color: var(--green); margin-bottom: 6px; }
.resume b { display: block; font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.resume p { margin: 6px 0 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.resume .rs-a { display: flex; flex-wrap: wrap; gap: 10px; }
.resume .btn.ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.resume .btn.ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px #fff; }
.resume .stat { grid-column: 1 / -1; margin: 0; color: #FF8A8E; }
.resume .stat:empty { display: none; }

/* ---------- 2. the team ---------- */
.tm-head { flex-wrap: wrap; }
.tm-head .bigp b { display: block; font-weight: 700; }
.tm-head .bigp small { max-width: 11.5em; margin-top: 5px; line-height: 1.15; letter-spacing: .02em; }
.tm-head .rng { min-width: 180px; flex: 1; }
.tm-you { font-size: 13px; color: var(--mute); max-width: 260px; line-height: 1.4; }
.tm-you b { color: var(--ink); }
.tm-brain { margin: 6px 0 16px; }
.bpk { display: inline-flex; align-items: center; gap: 8px; text-transform: none; font-stretch: 90%; letter-spacing: 0; }
.tm-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink2); max-width: 46em; }
.tm-tbl { background: #fff; border-radius: 10px; box-shadow: var(--shadow); }
.tmrow { grid-template-columns: 46px minmax(110px, 140px) minmax(150px, 1fr) minmax(110px, 150px) 40px; background: transparent; }
.tmrow:first-child, .tmrow:last-child { border-radius: 0; }
#tRows > .tmrow:last-child { border-bottom: 0; }
.tm-hd { padding-top: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--line2); font-stretch: 82%; font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; line-height: 1.15; color: var(--mute); }
.tm-hd .c1 { grid-column: 1 / 3; }
.tm-hd .c5 { text-align: right; }
.tmrow.lead { background: linear-gradient(90deg, rgba(15,180,99,.07), transparent 60%); }
.tmrow.off { background: #F8F9F6; }
.tmm strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.tmm em.sk { margin-top: 3px; color: var(--mute); font-size: 11.5px; line-height: 1.25; }
.tmp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.tmp .rng { grid-column: 1; }
.tmp output { grid-column: 2; width: auto; min-width: 38px; }
.tmp output.off { grid-column: 1 / -1; text-align: left; color: var(--mute); font-weight: 600; }
.tmp .all { grid-column: 1 / -1; margin-top: 1px; text-align: right; font-size: 11px; line-height: 1.2; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tmp .fine { grid-column: 1 / -1; margin: 3px 0 0; font-size: 12px; line-height: 1.25; text-align: right; }
.tmnote:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15,180,99,.45); }
.tm-add { border-top: 1px solid var(--line); }
.tm-add > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; list-style: none; cursor: pointer; font-stretch: 80%; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .03em; color: var(--greend); }
.tm-add > summary::-webkit-details-marker { display: none; }
.tm-add > summary:hover { background: var(--paper); }
.tm-add[open] > summary { border-bottom: 1px solid var(--line); }
.tm-add > .tmrow:last-child { border-bottom: 0; border-radius: 0 0 10px 10px; }
.tm-foot { margin: 0; padding: 11px 14px; border-top: 1px solid var(--line2); font-size: 13px; color: var(--mute); }
.tm-fine { margin-top: 18px; }

/* the share sliders: the green ends under the thumb's centre, whatever the width */
.st-main .rng::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--green) calc(11px + (100% - 22px) * var(--f, .5)), #DCDFD7 0); }
.st-main .rng:focus-visible { outline: none; }
.st-main .rng:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(15,180,99,.4), 0 2px 6px rgba(0,0,0,.2); }
.st-main .rng:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(15,180,99,.4); }

/* ---------- 3. the sketch ---------- */
.recap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .75fr) minmax(0, 1.15fr); margin: 0 0 14px; padding: 0 18px; }
.recap .rc { min-width: 0; padding: 13px 14px 14px 0; }
.recap .rc + .rc:not(.rc-idea) { padding-left: 14px; }
.recap .rc:nth-child(2) { padding-left: 0; }
.recap .rc:nth-child(n+3) { border-left: 1px solid var(--line); }
.recap .rc-idea { grid-column: 1 / -1; padding-right: 0; border-bottom: 1px dashed var(--line2); }
.recap dt { display: flex; align-items: baseline; gap: 8px; font-stretch: 82%; font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; color: var(--mute); }
.recap dd { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 5px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.recap dd > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.recap .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; font-size: 16px; line-height: 1.4; }
.rc-e { margin-left: auto; font-stretch: 90%; font-size: 12px; letter-spacing: .02em; color: var(--greend); text-decoration: none; }
.rc-e:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.gate { flex-wrap: wrap; padding: 30px 24px 24px; }
.gate .gate-t { flex: 1 1 280px; min-width: 0; }
.gate .lab { font-size: 15px; }
.gate p { margin-top: 6px; max-width: 34em; }
.gate .stat { flex-basis: 100%; margin: 0; max-width: none; font-weight: 600; }
.gate .stat:empty { display: none; }
.gate .stat a { color: inherit; font-weight: 700; text-underline-offset: 2px; }
.gate-fine { margin: 14px 2px 0; font-size: 14px; color: var(--mute); }
.gate-fine p { margin: 0 0 4px; }
.gate-fine .full { color: var(--red); font-weight: 600; }

/* the team at work */
.wk .nm small { white-space: normal; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk .s { color: var(--mute); }
.wk .peek.fail { display: flex; align-items: center; gap: 10px; -webkit-line-clamp: unset; }
.wk .peek.fail span { min-width: 0; color: var(--red); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wkErr { margin: 12px 0 0; }
#wkErr:empty { display: none; }
.wk-more { margin: 18px 0 0; font-size: 14px; }
.wk-more:empty { display: none; }
.wk-act { justify-content: flex-end; }
.wk-act .wk-go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.fa-sum .fs-s { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 1180px) {
  .st-wrap { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* one column that never grows past the screen (the kind and brain strips scroll inside it) */
  .st-wrap { grid-template-columns: minmax(0, 1fr); }
  .st-main { min-width: 0; }
  .st-rail { padding: 10px max(12px, env(safe-area-inset-left)) 12px; }
  .st-rail ol { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .st-rail ol::-webkit-scrollbar { display: none; }
  .st-rail li { flex: none; }
  .st-rail li + li { margin-top: 0; }
  .st-rail li > button { gap: 8px; padding: 6px 9px 6px 6px; font-size: 14px; white-space: nowrap; }
  .st-rail li > button i { width: 24px; height: 24px; font-size: 12.5px; }
  .st-rail li:not(.on) > button { padding-right: 6px; }
  .st-rail li:not(.on) > button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .st-rail .note { display: block; font-size: 12.5px; margin: 8px 4px 0; }
  .st-rail .note b { display: inline; font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; margin: 0; }

  .st-main { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); padding-bottom: 0; }
  .st-main h2 { font-size: 40px; }
  .st-main .sub { font-size: 15px; margin-bottom: 20px; }
  .st-main details > summary { padding: 11px 0; }
  .st-main .foot-act { gap: 8px 10px; margin: 24px calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding: 10px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .st-main .foot-act .btn { padding: 12px 15px; }
  .fa-sum { flex: 1 1 0; font-size: 12.5px; line-height: 1.3; }

  #iKinds { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  #iKinds::-webkit-scrollbar { display: none; }
  #iKinds .kind { flex: none; }
  .ichips { flex-wrap: nowrap; overflow-x: auto; margin: 12px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; }
  .ichips::-webkit-scrollbar { display: none; }
  .ichips .chip, .ichips .lab { flex: none; }
  #iForm .foot-act .fa-sum { display: none; }
  #iForm .foot-act .btn { flex: 1; }
  .resume { padding: 26px 18px 18px; }
  .resume .rs-a { justify-content: stretch; }
  .resume .rs-a .btn { flex: 1 1 auto; }

  .tm-head { gap: 8px 16px; padding: 14px 16px 12px; }
  .tm-head .bigp { min-width: 0; font-size: 48px; }
  .tm-you { flex: 1 1 140px; max-width: none; }
  .tm-head .rng { flex: 1 1 100%; order: 3; min-width: 0; height: 40px; margin: 0; }
  #tBrain { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  #tBrain::-webkit-scrollbar { display: none; }
  #tBrain .kind { flex: none; }
  .tm-lead { font-size: 13px; }
  .tm-hd { display: none; }
  /* the switch and the orders button sit beside the name and the model; the share runs full width below */
  .tmrow { grid-template-columns: 52px minmax(0, 1fr) 40px; column-gap: 12px; row-gap: 3px; padding: 8px 12px; }
  .tmrow > .tgl, .tmrow > .tgl-sp { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .tmrow .tmn { grid-column: 2; grid-row: 1; min-width: 0; }
  .tmrow .tmn small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .tmrow .tmnote { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; width: 40px; height: 40px; }
  .tmrow .tmm { grid-column: 2; grid-row: 2; padding: 2px 6px 2px 0; margin-left: -1px; }
  .tmrow .tmm strong { line-height: 1.15; }
  .tmrow .tmm em.sk { margin-top: 1px; }
  .tmrow .tmp { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) auto; }
  .tmrow .tmp .rng { height: 40px; grid-row: 1 / 3; }
  .tmrow .tmp { align-content: center; min-height: 40px; }
  .tmrow .tmp output { grid-row: 1; align-self: end; text-align: right; line-height: 1.05; }
  .tmrow .tmp .all { grid-column: 2; grid-row: 2; align-self: start; margin: 2px 0 0; line-height: 1.1; }
  .tmrow .tmp .fine { grid-column: 1 / -1; text-align: left; }
  .tmrow .tmp output:only-child, .tmrow .tmp output + .fine { grid-row: auto; }
  .tmrow.off .tmp { display: none; }
  .tm-fine { font-size: 13px; }

  .recap { grid-template-columns: 1fr 1fr; padding: 0 16px; }
  .recap .rc:nth-child(n+3) { border-left: 0; }
  .recap .rc:nth-child(odd):not(.rc-idea) { border-left: 1px solid var(--line); padding-left: 14px; }
  .recap .rc:nth-child(2), .recap .rc:nth-child(3) { border-bottom: 1px solid var(--line); }
  .recap .rc:nth-child(even) { padding-left: 0; }
  .gate { flex-direction: column; align-items: stretch; padding: 28px 18px 18px; }
  .gate .gate-t { flex: none; }
  .gate .btn { width: 100%; }

  .wk-act { position: static; box-shadow: none; }
  .wk-act .wk-go { order: -1; flex: 1 1 100%; justify-content: stretch; }
  .wk-act .wk-go .btn { flex: 1 1 calc(50% - 5px); }
  .wk-act .wk-go #wkLaunch { order: -1; flex-basis: 100%; }
}
@media (max-width: 560px) {
  /* narrow phones: the seat's job is in its drawer; the bar says the share in short */
  .tmrow .tmn small { display: none; }
  .tmrow .tmn b { padding-top: 2px; }
  .fa-sum b { display: block; }
  .fa-sum .fs-l { display: none; }
  .fa-sum .fs-s { display: block; }
}