/* Relationship-first workbench, Graphite Gallery tokens. */
#builder [hidden]{display:none!important}
#composer{color:var(--fg)}
#composer *{box-sizing:border-box;min-width:0}
#composer button,#composer input,#composer select,#composer textarea{font:inherit}
#composer button{min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:8px;color:var(--fg);background:var(--surface-2);cursor:pointer;white-space:normal}
#composer button:hover{background:var(--surface-3)}
#composer button:disabled{opacity:.45;cursor:default}
#composer button:focus-visible,#composer input:focus-visible,#composer select:focus-visible,#composer textarea:focus-visible,#composer summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#composer button[aria-pressed=true],#composer .co-primary{border-color:var(--accent);color:var(--accent)}
#composer .co-primary{background:var(--accent);color:var(--bg);font-weight:700}
#composer input:not([type=checkbox]):not([type=radio]):not([type=file]),#composer select,#composer textarea{width:100%;background:var(--lcd);color:var(--fg);border:1px solid var(--border-strong);border-radius:8px;padding:var(--s3);min-height:44px}
#composer textarea{resize:vertical;line-height:1.6}
#composer input[type=checkbox],#composer input[type=radio]{accent-color:var(--accent);width:16px;height:16px;flex:none}
#composer label{display:flex;align-items:center;gap:var(--s2);font-size:14px;margin:var(--s2) 0;min-height:24px}
#composer h2{font-size:24px;margin:0 0 var(--s2);line-height:1.4}
#composer h3{font-size:20px;margin:0;line-height:1.4}
#composer p{line-height:1.6}
#composer small,.co-note{color:var(--muted);font-size:14px;line-height:1.6}
.co-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s6);margin-bottom:var(--s4)}
.co-top p{margin:0;color:var(--muted)}
.co-tools,.co-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.co-row{justify-content:space-between}
.co-top .co-tools{justify-content:flex-end;max-width:600px}
.co-tabs{display:flex;gap:var(--s2);padding:var(--s2);background:var(--surface);border-radius:12px}
.co-tabs button{flex:1;font-size:20px!important;font-weight:700}
.co-tabs small{display:block;font-weight:400}
.co-workspace{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:var(--s6);align-items:start}
.co-roster,.co-editor,.co-output{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:var(--s4)}
.co-roster,.co-output{position:sticky;top:96px}
.co-person{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);border-bottom:1px solid var(--border)}
.co-person>label{padding:var(--s2);min-height:44px!important}
#composer .co-person-edit{display:flex;align-items:center;gap:var(--s2);text-align:left;flex:1;border:0;background:transparent;padding:var(--s2) 0}
.co-person img{width:64px;height:64px;object-fit:contain;background:var(--lcd);border-radius:8px}
.co-person strong,.co-person small{display:block;overflow-wrap:anywhere}
.co-person.is-active{border-bottom-color:var(--accent)}
.co-person.is-child{padding-left:var(--s3)}
#composer .co-legacy{margin-top:var(--s6);font-size:12px;width:100%}
.co-editor-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);align-items:center;margin-bottom:var(--s4)}
.co-editor-head>img{width:96px;height:96px;object-fit:contain;background:var(--lcd);border-radius:8px}
.co-block{border-top:1px solid var(--border);margin-top:var(--s6);padding-top:var(--s6)}
.co-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--s2)}
.co-form{border:1px solid var(--border);border-radius:8px;padding:var(--s2);display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.co-form.editing{border-color:var(--accent)}
#composer .co-form-edit{display:flex;flex-direction:column;align-items:center;gap:var(--s2);width:100%;border:0;background:transparent;padding:0}
.co-form img{width:96px;height:96px;object-fit:contain}
.co-form strong{font-size:14px;overflow-wrap:anywhere}
.co-form small{font-size:12px}
.co-form .co-tools{justify-content:center;gap:var(--s1)}
#composer .co-form .co-tools button{padding:var(--s1) var(--s2);font-size:12px}
.co-details{margin-top:var(--s4);border-top:1px solid var(--border);padding-top:var(--s4)}
.co-details summary{cursor:pointer;min-height:44px;padding:var(--s2) 0}
.co-empty{text-align:center;color:var(--muted);padding:var(--s6) var(--s2)}
.co-output pre,#coUtilityText{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.8 'Malgun Gothic',system-ui,sans-serif;background:var(--lcd);padding:var(--s4);border-radius:8px;max-height:600px;overflow:auto}
#composer .co-output .co-tools{margin-top:var(--s4)}
#composer .co-output .co-primary{flex:1}
#composer dialog{width:min(960px,calc(100% - 32px));max-height:90dvh;margin:auto;background:var(--surface);color:var(--fg);border:1px solid var(--border-strong);border-radius:12px;padding:var(--s6);overflow:auto}
#composer dialog::backdrop{background:color-mix(in srgb,var(--bg) 80%,transparent)}
.co-filters{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) 0}
#composer .co-filters button{font-size:14px}
.co-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
#composer .co-choice{display:flex;flex-direction:column;align-items:center;gap:var(--s2);background:transparent;padding:var(--s2)}
.co-choice img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px}
.co-choice strong{font-size:16px;overflow-wrap:anywhere}
#coPages{margin-top:var(--s4)}
#coNotice:empty{display:none}
#coNotice{padding:var(--s3);background:var(--surface-2);border-radius:8px}
@media(max-width:1100px){.co-workspace{grid-template-columns:minmax(0,1fr) 320px}.co-roster{grid-column:1/-1;position:static}#coRoster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}.co-top{display:block}.co-top .co-tools{justify-content:flex-start;margin-top:var(--s4)}}
@media(max-width:900px){.co-workspace{grid-template-columns:minmax(0,1fr)}.co-output{position:static}.co-output pre{max-height:440px}}
@media(max-width:600px){#coRoster{display:block}.co-roster,.co-editor,.co-output{padding:var(--s3)}.co-workspace{gap:var(--s4)}#composer dialog{padding:var(--s4)}.co-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}.co-tabs button{font-size:16px!important}.co-tabs small{font-size:12px}.co-editor-head{grid-template-columns:64px minmax(0,1fr)}.co-editor-head>img{width:64px;height:64px}.co-forms{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Reordering handles retain keyboard alternatives. */
#composer .co-drag{cursor:grab;min-width:24px;padding:0;background:transparent;border:0;color:var(--muted);font-size:20px;}
#composer .co-drag:active{cursor:grabbing;}
#composer .co-drop{outline:2px solid var(--accent);outline-offset:2px;}
#composer .co-person{grid-template-columns:24px 20px minmax(0,1fr);}