/* TOOL STUDIO BUILDER (tool-studio-builder.js). On the app's :root tokens and components; dark only. */

/* The title row: Back, the icon, the name as a field, Undo and Share. */
.studio-builder-title{gap:8px}
.studio-builder-title .studio-name{flex:1 1 auto;min-width:0;min-height:44px;margin:0;font-size:17px;font-weight:600}
.studio-icon-btn{display:grid;flex:none;place-items:center;width:44px;height:44px;padding:0}
.studio-icon-btn .icon{width:22px;height:22px}
.studio-builder-tools{display:flex;align-items:center;gap:8px;margin-top:10px}
.studio-builder-tools .btn{flex:none;min-height:40px;padding:0 14px}
.studio-builder-status{flex:1 1 auto;min-width:0;margin:0 2px;font-size:12.5px}
#studioBuilderMessage:empty{display:none}
#studioProblems{margin-top:8px}
.studio-problems,.studio-step-problems{display:grid;gap:4px;margin:0;padding-left:18px;color:var(--bad);font-size:13px;line-height:1.4}
.studio-step-problems:empty{display:none}
.studio-assumptions{display:grid;gap:8px;margin-top:10px}
.studio-assumptions ul{display:grid;gap:4px;margin:0;padding-left:18px;line-height:1.45}
.studio-assumptions .btn{justify-self:end}

/* The steps. */
.studio-steps{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.studio-step{display:grid;gap:8px;margin:0}
.studio-step.is-selected{box-shadow:inset 0 0 0 2px var(--primary)}
.studio-step-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.studio-step-head:has(.studio-step-pick){grid-template-columns:auto minmax(0,1fr) auto}
.studio-step-pick{display:grid;place-items:center;width:32px;height:44px}
.studio-step-pick input{width:22px;height:22px;margin:0}
.studio-step-open{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-width:0;min-height:56px;padding:0;border:0;background:none;color:var(--text);font:inherit;text-align:start;cursor:pointer}
.studio-step-open:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:var(--ring-offset);border-radius:var(--r-inner)}
.studio-step-text{display:grid;gap:2px;min-width:0}
.studio-step-text small{color:var(--text-2);font-size:12px}
.studio-step-text b{overflow-wrap:anywhere}
.studio-step-summary{display:-webkit-box;overflow:hidden;color:var(--text-2);font-size:13px;line-height:1.35;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.studio-step-moves{display:flex;gap:4px}
.studio-step-moves .btn{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0}
.studio-step-moves .icon{width:18px;height:18px}
.studio-up .icon{transform:rotate(-90deg)}
.studio-down .icon{transform:rotate(90deg)}
.studio-step-out:empty{display:none}
.studio-step-out{display:grid;gap:4px;padding-top:8px;border-top:1px solid var(--hairline);font-size:13px}
.studio-step-out dl{margin:0}
.studio-step-out .tag{justify-self:start}
.studio-add-skill{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.studio-add-skill .icon{width:20px;height:20px}
.studio-select-bar{justify-content:flex-end;gap:8px;margin-top:10px}

/* Try it and the bar under the steps. */
.studio-trial{display:grid;gap:8px;margin-top:14px}
.studio-trial-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.studio-builder-bar{display:grid;gap:8px;margin-top:16px;padding:10px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--gloss),var(--fog),var(--glass-nav)}
.studio-change{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0}
.studio-change .field{min-height:44px;margin:0}
.studio-builder-bar .toolbar{justify-content:flex-end;gap:8px;margin:0}

/* Sheets: the icon grid, menus, the add list, settings. */
.studio-icons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.studio-icon-pick{display:grid;justify-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line);border-radius:var(--r-inner);color:var(--text-2);cursor:pointer}
.studio-icon-pick .icon{width:22px;height:22px;color:var(--text)}
.studio-icon-pick:has(input:checked){border-color:var(--primary);color:var(--text)}
.studio-icon-pick:has(input:focus-visible){outline:var(--ring-width) solid var(--ring);outline-offset:var(--ring-offset)}
.studio-menu{display:grid;gap:8px}
.studio-add .glist{margin-bottom:8px}
.studio-add .studio-request{margin-top:12px}
.studio-set{display:grid;gap:6px}
.studio-set .field{margin:0}
.studio-set>.field-label{margin-top:8px}
.studio-rows{display:grid;gap:10px}
.studio-row{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r-inner)}
.studio-row-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.studio-row-line.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.studio-row .checks{margin:0}
.studio-row .checks label{min-height:36px;padding:6px 0}
.studio-row-remove{justify-self:end}
.studio-insert{justify-self:start;min-height:36px;padding:0 12px;font-size:13px}
.studio-picker{display:grid;gap:4px;max-height:220px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:var(--r-inner)}
.studio-picker button{justify-content:flex-start;min-height:40px;text-align:start}
.studio-ref-preview{color:var(--text-2);font-size:12.5px;line-height:1.7;overflow-wrap:anywhere}
.studio-ref-preview:empty{display:none}
.studio-ref-preview .tag{margin:0 2px}
.studio-share-note{margin-top:10px}