/* Intentions supplies the motion and palette. Names and project entry lead;
   source relationships and maintenance are secondary. Creation gets a separate workspace. */
:root{font:var(--ui-type-body)/1.6 var(--ui-font)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
main{position:relative;z-index:1;max-width:1280px;margin:auto;padding:var(--ui-space-12) var(--ui-space-8)}
.hub-header{display:flex;align-items:baseline;gap:var(--ui-space-6);flex-wrap:wrap;border-bottom:1px solid var(--ui-border);padding-bottom:var(--ui-space-6);margin-bottom:var(--ui-space-8)}
h1{font:600 var(--ui-type-heading)/1.25 var(--ui-serif);letter-spacing:.06em;margin:0;color:var(--ui-text)}
h1::before{content:'';display:inline-block;width:4px;height:.75em;background:var(--ui-red);margin-right:var(--ui-space-4)}
.hub-header #blueprint-system-version{position:static;margin-left:auto;padding:0;border:0;background:transparent;font:var(--ui-type-body)/1.5 var(--ui-font);color:var(--ui-muted)}
h2{font:600 var(--ui-type-title)/1.5 var(--ui-serif);letter-spacing:.08em;margin:0}
section{min-width:0;margin:0}
.hosted-workspace{margin-top:var(--ui-space-6);border-top:1px solid var(--ui-border);padding-top:var(--ui-space-4)}
.hosted-workspace summary,.hosted-workspace-actions a{color:var(--ui-accent);cursor:pointer}
#hosted-binding-entry:empty{display:none}
.hosted-workspace-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-3)}
.hosted-workspace [role=status]:empty{display:none}
p{color:var(--ui-muted);margin:var(--ui-space-3) 0;overflow-wrap:anywhere}
label{display:block;margin:var(--ui-space-6) 0 var(--ui-space-2);color:var(--ui-muted)}
label:first-child{margin-top:0}
.create-row,.list-heading,.project,.create-heading{display:flex;gap:var(--ui-space-3);align-items:center}
.create-row{flex-wrap:wrap}
input{width:100%;min-width:0}
button,input,.project-open{font:inherit;background:var(--ui-control);color:var(--ui-text);border:1px solid var(--ui-input-border);border-radius:var(--ui-control-radius);padding:var(--ui-space-2) var(--ui-space-3);min-height:var(--ui-control-h)}
input::placeholder,textarea::placeholder{color:var(--ui-subtle);opacity:1}
button{cursor:pointer;white-space:nowrap}
button:hover,.project-open:hover{background:var(--ui-hover);border-color:var(--ui-accent)}
button:disabled{opacity:.45;cursor:default}
.list-heading{margin-bottom:var(--ui-space-6);flex-wrap:wrap}
.list-heading h2{margin-right:auto}
#refresh{background:transparent;border-color:transparent;color:var(--ui-muted)}
/* §2.8: creation is the page's primary action; each project keeps one workbench entry. */
#new-project,#create button[type=submit]{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-bg);font-weight:600}
#new-project{min-height:calc(var(--ui-control-h) + var(--ui-space-4));padding:var(--ui-space-3) var(--ui-space-8);font-size:var(--ui-type-label)}
#new-project:hover,#create button[type=submit]:hover{background:var(--ui-text)}
.project{flex-wrap:wrap;padding:var(--ui-space-6);background:color-mix(in srgb,var(--ui-surface) 92%,transparent);border:1px solid var(--ui-border);border-radius:var(--ui-radius)}
.project>span{flex:1 1 320px;min-width:0;overflow-wrap:anywhere;font:600 var(--ui-type-title)/1.5 var(--ui-serif);letter-spacing:.04em}
.project small{display:block;font:var(--ui-type-small)/1.6 var(--ui-font);letter-spacing:0;color:var(--ui-subtle)}
.project>span small:first-child{margin:var(--ui-space-2) 0;color:var(--ui-muted)}
.project button,.project-open{font-size:var(--ui-type-body);padding:var(--ui-space-2) var(--ui-space-3)}
.project button{background:transparent;border-color:transparent;color:var(--ui-muted)}
.project button:hover{background:var(--ui-control);color:var(--ui-text)}
.project .project-delete-button{color:var(--ui-danger)}
.project .project-delete-button:hover{background:var(--ui-danger-bg)}
.project-open{display:inline-block;text-decoration:none;white-space:nowrap;color:var(--ui-accent);background:transparent}
#status,#create-status{color:var(--ui-warning);padding:var(--ui-space-3) var(--ui-space-4);border-left:2px solid var(--ui-warning);background:var(--ui-surface)}
#status{margin:0 0 var(--ui-space-6)}
/* The native dialog supplies focus containment and Esc. The form stays in the page for request recovery. */
#create-dialog{width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:var(--ui-space-6);overflow:auto;scrollbar-gutter:stable;scroll-padding-block:calc(var(--ui-control-h) + var(--ui-space-6)) var(--ui-space-6)}
#create-dialog::backdrop{background:var(--ui-backdrop)}
.create-heading{position:sticky;top:calc(-1 * var(--ui-space-6));z-index:1;background:var(--ui-surface);padding-bottom:var(--ui-space-4);border-bottom:1px solid var(--ui-border);margin-bottom:var(--ui-space-6)}
.create-heading h2{flex:1}
#create-close,#browse{background:transparent}
#directory{flex:1 1 320px}
#directory-status{font-size:var(--ui-type-small)}
#directory-status:empty{display:none}
#directory-status[data-state=ok]{color:var(--ui-success)}
#directory-status[data-state=error]{color:var(--ui-danger)}
/* Keep submit in normal flow so scrolling to Add question cannot land underneath a different action. */
.create-actions{padding-top:var(--ui-space-4);margin-top:var(--ui-space-6);text-align:right}
#create button[type=submit]{min-width:200px}
#create-questions{margin:var(--ui-space-8) 0 0;border-top:1px solid var(--ui-border);padding-top:var(--ui-space-6)}
#create-questions summary{cursor:pointer;color:var(--ui-text);font-weight:600;font-size:var(--ui-type-label)}
#create-questions .create-note{color:var(--ui-muted);margin:var(--ui-space-2) 0 var(--ui-space-6)}
#create-question-list{display:grid;gap:var(--ui-space-4);margin-bottom:var(--ui-space-4)}
/* Question and hint each get a readable column, full width on narrow screens; text grows with its content. */
.create-question{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-4);padding:var(--ui-space-4);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-control)}
.create-question-head{grid-column:1/-1;display:flex;align-items:center;gap:var(--ui-space-3);flex-wrap:wrap}
.create-question-head>input{flex:1 1 160px;width:auto;min-width:0;max-width:320px}
.create-question .create-question-required{display:flex;align-items:center;gap:var(--ui-space-2);white-space:nowrap;margin:0;font-size:var(--ui-type-small);cursor:pointer}
.create-question .create-question-required input{width:auto;flex:none;margin:0;padding:0;min-height:0}
.create-question-head .create-question-remove{margin-left:auto;min-height:var(--ui-control-h-dense);padding:var(--ui-space-1) var(--ui-space-2);font-size:var(--ui-type-small);background:transparent;color:var(--ui-danger);border-color:transparent}
.create-question-head .create-question-remove:hover{background:var(--ui-danger-bg)}
.create-question-field{display:flex;flex-direction:column;gap:var(--ui-space-2);margin:0;min-width:0;font-size:var(--ui-type-small)}
.create-question input,.create-question textarea{font:inherit;border:1px solid var(--ui-input-border);border-radius:var(--ui-control-radius);background:var(--ui-surface);color:var(--ui-text)}
.create-question textarea{width:100%;min-height:6em;padding:var(--ui-space-3);font-size:var(--ui-type-body);line-height:1.6;resize:vertical;overflow:hidden}
.create-question input:focus,.create-question textarea:focus{border-color:var(--ui-accent)}
@media(max-width:720px){main{padding:var(--ui-space-6) var(--ui-space-4)}h1{font-size:24px}.hub-header{gap:var(--ui-space-3)}.hub-header h1{flex-basis:100%}.hub-header #blueprint-system-version{margin-left:0;margin-right:auto}#new-project{flex-basis:100%}.project{padding:var(--ui-space-4);gap:var(--ui-space-2)}.project>span{flex-basis:100%}.project button,.project-open{padding:var(--ui-space-2)}.project-open{margin-right:auto}#create-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:var(--ui-space-4)}.create-heading{top:calc(-1 * var(--ui-space-4))}.create-question{grid-template-columns:minmax(0,1fr)}#create button[type=submit]{width:100%}}