/* Product components use the shared theme.css foundation. */
body{background:var(--canvas);color:var(--ink)}
.primary-button{background:var(--action);border:1px solid var(--action);color:var(--color-white);border-radius:var(--radius-control);font-weight:var(--font-weight-semibold);box-shadow:none}
.primary-button:hover:not(:disabled){background:var(--action-hover);border-color:var(--action-hover)}
.secondary-button{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:none}
.secondary-button:hover:not(:disabled),.tool-button:hover:not(:disabled){background:var(--focus-soft);border-color:#98add6}
.text-link{color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.text-link:hover{text-decoration-color:currentColor}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
input:not([type=checkbox]):not([type=radio]),textarea,select{color:var(--ink);border-color:var(--border);border-radius:var(--radius-card)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* Header separates workspace identity from operations instead of wrapping randomly. */
.canvas-app .canvas-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-6);padding:var(--space-3) var(--space-6);background:var(--color-white);border-bottom:1px solid var(--border)}
.canvas-app .canvas-header .brand{font-size:23px;letter-spacing:-.7px}
.canvas-app .canvas-document{justify-self:end;min-width:0;display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-ui)}
.canvas-app .canvas-document-name{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canvas-app .canvas-document .pill{margin:0;border:0;border-radius:var(--radius-control);background:var(--canvas);color:var(--muted)}
.canvas-app .canvas-header-actions{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-2);margin:0;flex-wrap:wrap;padding-top:var(--space-1)}
.canvas-app .canvas-header-actions .text-link{padding:var(--space-2);font-size:var(--font-size-sm)}
.canvas-app .canvas-header-actions #cloud-button{margin-left:auto}
.canvas-app .canvas-header-actions button{min-height:40px;padding:var(--space-2) var(--space-3)}
.canvas-app .canvas-toolbar{min-height:52px;padding:var(--space-1-half) var(--space-6);gap:var(--space-3);background:var(--color-surface-subtle);border-bottom:1px solid var(--border)}
.canvas-app .canvas-toolbar .tool-button{min-height:36px;padding:var(--space-1-half) var(--space-2-half)}
.canvas-app #canvas-selection-status{color:var(--muted)}
.canvas-app .canvas-operation-guide{flex:1 1 360px;max-width:600px;min-width:0;margin:0;color:var(--muted);font-size:var(--font-size-xs);line-height:20px;text-align:center;text-wrap:pretty}
@media(max-width:1100px){.canvas-app .canvas-operation-guide{order:10;flex-basis:100%;max-width:none;text-align:left}}
.canvas-app .canvas-viewport,.ontology-stage{background-color:var(--canvas);background-image:radial-gradient(var(--color-border) .65px,transparent .65px);background-size:28px 28px}
.canvas-app .workspace-node{border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 2px 5px #252a340a;background:var(--color-white)}
.canvas-app .workspace-node.selected{border-color:var(--focus);box-shadow:0 0 0 2px var(--focus)}
.canvas-app .workspace-node img{background:var(--canvas)}
.canvas-app .workspace-node strong{padding:var(--space-3) var(--space-4) 0}.canvas-app .workspace-node small{border-top:1px solid var(--border);margin-top:var(--space-3);padding:var(--space-2) var(--space-4)}
.canvas-app .canvas-edge-label{border-radius:var(--radius-compact);box-shadow:none;background:var(--color-white);border-color:#91afa6;color:var(--logic)}
.canvas-app .canvas-edge-label.selected{color:var(--color-white);background:var(--focus);border-color:var(--focus)}
.canvas-app .canvas-bottom-note{border:0;border-radius:var(--radius-control);background:#ffffffef;padding:var(--space-1-half) var(--space-3);font-size:var(--font-size-xs);line-height:20px;bottom:12px}
.canvas-app .canvas-statusbar{background:var(--color-white);border-top:1px solid var(--border);padding:var(--space-1-half) var(--space-6);color:var(--muted)}
/* A single frame contains each task. Selected tabs use an underline, not a second primary button. */
.canvas-app #canvas-inspector.writing-open{box-shadow:var(--panel-shadow);border-left:2px solid var(--border)}
.canvas-app .inspector-header,#ontology-view .ontology-header{background:var(--color-surface-subtle);border-bottom:1px solid var(--border);min-height:70px}
.canvas-app .inspector-header strong,#ontology-view .ontology-header h2{font-size:20px;line-height:30px;font-weight:var(--font-weight-semibold)}
.writing-tabs,.canvas-app #cloud-dialog>.account-tabs{gap:var(--space-6);padding-bottom:0;border-bottom:1px solid var(--border)}
.writing-tabs .writing-tab,.canvas-app #cloud-dialog .account-tabs button{background:transparent;color:var(--muted);border:0;border-bottom:3px solid transparent;border-radius:0;padding:var(--space-3) var(--space-1);min-height:46px;font-weight:var(--font-weight-medium)}
.writing-tabs .writing-tab[aria-selected=true]{background:transparent;color:var(--action);border-bottom-color:var(--action);font-weight:var(--font-weight-bold)}
.writing-tabs .writing-tab:hover{color:var(--ink);background:var(--color-surface-hover)}
#cloud-dialog>.cloud-body{padding-top:var(--space-7)}
#cloud-dialog>.cloud-body>*{max-width:720px}#cloud-dialog #cloud-auth,#cloud-dialog #cloud-reset{max-width:720px}
#cloud-dialog .cloud-body h3{margin-top:var(--space-6);margin-bottom:var(--space-5)}
#cloud-dialog .cloud-body>p.workspace-note{background:var(--color-surface-subtle);border-left:3px solid #98add6;padding:var(--space-3) var(--space-4);margin-bottom:var(--space-7)}
#cloud-dialog .cloud-body label,.api-settings label{margin-top:var(--space-5);margin-bottom:var(--space-2)}
#cloud-dialog .cloud-body input,#cloud-dialog .cloud-body select,.api-settings input,.api-settings select{min-height:46px;background:var(--color-white);border-color:var(--color-border-input)}
#cloud-dialog #cloud-auth .cloud-actions{margin-top:var(--space-6);padding-top:var(--space-2)}
#cloud-dialog #cloud-status{font-size:var(--font-size-ui);line-height:24px}
#cloud-dialog #cloud-member>section,#collab-panel details,#personal-copies{border-color:var(--border)}
.canvas-app #canvas-inspector.floating-editor{border:1px solid var(--color-border-input);border-radius:var(--radius-card);box-shadow:0 6px 24px #252a3418}
.writing-open .writing-workbench{border-radius:var(--radius-card);border-color:var(--border)}
.writing-open .writing-materials{background:var(--color-surface-subtle)}.writing-open .writing-controls{background:var(--color-white)}
.writing-proposal,.writing-node-pair>div,.evidence-item,.discussion-comment,.proposal-card{border-radius:var(--radius-card);box-shadow:none}
#ai-result-text{border-radius:var(--radius-card);line-height:1.85;padding:var(--space-7);max-width:76ch}
#canvas-library{border-radius:var(--radius-card);border-color:var(--border);box-shadow:0 2px 6px #252a340a;padding:var(--space-2-half);background:var(--color-white)}
#canvas-library .canvas-library-title{color:var(--ink);font-weight:var(--font-weight-semibold);padding-bottom:var(--space-2-half);border-bottom:1px solid var(--border);margin:var(--space-half) var(--space-1) var(--space-2-half)}
#canvas-library .canvas-chip button{border-radius:var(--radius-card)}
#canvas-library .canvas-chip-open[aria-current=true]{background:var(--focus-soft);color:#284b9d;border-color:#98add6;font-weight:var(--font-weight-semibold)}
#canvas-library .canvas-chip-delete{border-color:transparent;color:var(--muted)}#canvas-library .canvas-chip-delete:hover{background:#fff1f0;border-color:#e6ada7;color:#9e3027}
/* Documentation is a reference manual rather than a marketing page. */
body[data-page=design-system] .sidebar,body[data-page=guide] .sidebar{width:224px;padding:26px var(--space-5);background:var(--color-white);border-right:1px solid var(--border)}
.sidebar .brand{font-size:var(--font-size-heading)}.sidebar .workspace-label{margin:var(--space-8) 0 var(--space-5);font-size:var(--font-size-xs);letter-spacing:.6px}.sidebar nav a{border-radius:var(--radius-compact);padding:var(--space-2-half) var(--space-3);font-size:var(--font-size-ui);border-left:3px solid transparent;color:var(--muted)}
.sidebar nav a.active{background:var(--action-soft);border-left-color:var(--action);color:var(--action);font-weight:var(--font-weight-semibold)}.sidebar nav a:hover{background:var(--color-surface-hover)}.sidebar nav a span{opacity:1;color:var(--muted)}
body[data-page=design-system] main,body[data-page=guide] main{margin-left:224px;padding:0 clamp(var(--space-6),4vw,var(--space-16));max-width:1540px;background:var(--color-white)}
.topbar{height:72px;background:var(--color-white);color:var(--ink);border-bottom:1px solid var(--border)}.viewer-notice{margin:var(--space-5) 0;padding:var(--space-3) var(--space-4);border-left:3px solid #98add6;background:var(--color-surface-subtle);font-size:var(--font-size-sm);line-height:22px;color:var(--muted)}
body[data-page=design-system] .overview{padding-top:var(--space-6)}.hero-heading{display:block;padding:var(--space-5) 0 var(--space-7)}.hero-heading h1{font-family:var(--font-sans);font-size:36px;line-height:1.4;letter-spacing:-1px;font-weight:var(--font-weight-bold);max-width:24ch}.hero-heading h1 em{font-style:normal;color:var(--focus)}
.hero-description{min-width:0;padding:var(--space-3) 0 0;max-width:76ch}.hero-description h2{font-size:20px;line-height:30px;letter-spacing:0;margin:var(--space-2-half) 0}.hero-description p{font-size:var(--font-size-body);line-height:26px}.hero-description .pill{border:0;border-radius:var(--radius-control);background:var(--focus-soft);color:#284b9d}
.eyebrow{font-size:var(--font-size-xs);letter-spacing:.7px;color:var(--muted)}.section{padding:var(--space-10) 0;border-color:var(--border)}.section-heading{gap:var(--space-6);margin-bottom:var(--space-6)}.section-heading>p{max-width:48ch;color:var(--muted)}
.network-preview,.type-panel,.component-grid,.relationship-panel{border-color:var(--border);border-radius:var(--radius-card);box-shadow:none}.network-preview{background:var(--canvas);background-image:none}.preview-meta,.preview-footer{background:var(--color-surface-subtle);padding:var(--space-3-half) var(--space-5);border-color:var(--border)}
.intro-strip{gap:var(--space-5);border:0;border-bottom:1px solid var(--border);padding:var(--space-5) 0}.intro-strip p{font-size:var(--font-size-ui);line-height:24px}.intro-strip p span{color:var(--focus);font-weight:var(--font-weight-bold)}
.type-specimen{background:var(--color-surface-subtle)}.type-large{font-family:var(--font-sans);font-weight:var(--font-weight-semibold)}.type-scale>div{border-color:var(--border)}
.doc-card{border:0;border-left:3px solid var(--border);border-radius:0;background:var(--color-surface);padding:var(--space-5)}.doc-card h3{font-size:var(--font-size-lead);line-height:28px}.doc-card p{font-size:15px;line-height:26px}
.doc-note{border-left-color:#98add6;background:var(--color-surface-subtle)}.doc-flow>span{border:1px solid var(--border);border-radius:var(--radius-compact);color:var(--ink);background:var(--color-surface-subtle);font-weight:var(--font-weight-semibold)}.doc-table th{background:#eef2f8}.doc-table td{background:var(--color-white)}
body[data-page=design-system] main>p,body[data-page=guide] main>p{max-width:80ch;line-height:1.8}.swatch{border-radius:var(--radius-card)}.swatch>span{border-radius:var(--radius-compact)}.mini-node,.example-node{border-radius:var(--radius-card);box-shadow:0 2px 5px #252a340a}
@media(max-width:1100px){.canvas-app .canvas-document-name{max-width:240px}.canvas-app .canvas-header-actions #cloud-button{margin-left:0}.canvas-app .canvas-header-actions .text-link{margin-left:0}.canvas-app #canvas-selection-status{display:none}}
@media(max-width:800px){body[data-page=design-system] .sidebar,body[data-page=guide] .sidebar{position:relative;inset:auto;width:auto;padding:var(--space-4);border-right:0;border-bottom:1px solid var(--border)}.sidebar .workspace-label,.sidebar .sidebar-bottom{display:none}.sidebar nav{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-4)}.sidebar nav a{font-size:var(--font-size-sm);padding:var(--space-1-half) var(--space-2)}.sidebar nav a span{margin-right:var(--space-1-half)}.sidebar .brand{font-size:22px}body[data-page=design-system] main,body[data-page=guide] main{margin:0;padding:0 var(--space-5)}.topbar{height:auto;min-height:64px}.hero-heading h1{font-size:30px}.hero-description p{font-size:var(--font-size-body)}.section{padding:var(--space-8) 0}.section-heading{display:block}.section-heading>p{margin-top:var(--space-3)}.writing-tabs,.canvas-app #cloud-dialog>.account-tabs{gap:var(--space-3-half)}}
@media(max-width:650px){.canvas-app .canvas-header{padding:var(--space-2-half) var(--space-3);gap:var(--space-1-half) var(--space-3);min-height:0}.canvas-app .canvas-document{display:none}.canvas-app .canvas-header .brand{grid-column:1/-1}.canvas-app .canvas-header-actions{display:flex;gap:var(--space-1-half)}.canvas-app .canvas-header-actions #canvas-new,.canvas-app .canvas-header-actions #canvas-writing{margin:0}.canvas-app .canvas-header-actions button{font-size:var(--font-size-sm);line-height:20px;padding:7px 9px;min-height:36px}.canvas-app .canvas-header-actions .text-link{font-size:var(--font-size-xs);padding:var(--space-1-half)}.canvas-app .canvas-toolbar{min-height:44px;padding:var(--space-1) var(--space-3);gap:var(--space-1)}.canvas-app .zoom-tools,.canvas-app .canvas-delete-tools{margin:0}.canvas-app .zoom-tools{margin-left:auto}.canvas-app .canvas-toolbar .tool-button{font-size:var(--font-size-sm);padding:5px 7px}.canvas-app .inspector-header,#ontology-view .ontology-header{min-height:60px}.canvas-app .inspector-header strong{font-size:var(--font-size-reading);line-height:26px}.writing-tabs .writing-tab,.canvas-app #cloud-dialog .account-tabs button{font-size:var(--font-size-ui);padding:var(--space-2-half) 3px}.canvas-app .writing-tabs{gap:var(--space-2-half)}#canvas-library{width:218px}.doc-grid{gap:var(--space-3)}.intro-strip{display:block}.canvas-app .canvas-bottom-note{max-width:calc(100% - 24px);font-size:var(--font-size-xs)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.canvas-app #cloud-dialog .account-tabs button[aria-selected=true]{color:var(--action);border-bottom-color:var(--action);font-weight:var(--font-weight-bold);background:transparent}
#cloud-dialog .cloud-body>p{max-width:720px}.hero-heading h1 em{font-weight:inherit}

/* Shared component sizing and spacing across editors and drawers. */
.primary-button,.secondary-button,input:not([type=checkbox]):not([type=radio]),textarea,select{border-radius:var(--control-radius)}
.canvas-app .canvas-header{background:var(--color-surface)}.canvas-app .canvas-header .brand{font-family:var(--font-heading-en)}
.canvas-app .canvas-header-actions button,.canvas-app .canvas-toolbar .tool-button,.canvas-app .text-link,.canvas-app .inspector-header button,.canvas-app #canvas-library button,.primary-button,.secondary-button{min-height:44px}
.canvas-app .canvas-header-actions .text-link{display:inline-flex;align-items:center;min-height:44px}
.canvas-app .tool-button.active{background:var(--action-soft);border-color:var(--action);color:var(--action)}
.canvas-app .inspector-header strong,#ontology-view .ontology-header h2{font-size:var(--font-size-heading);line-height:34px;font-weight:var(--font-weight-bold)}
.canvas-app .workspace-node{border-radius:var(--radius-card)}.canvas-app .workspace-node strong{font-family:var(--font-heading);font-weight:var(--font-weight-bold)}
.canvas-app .node-editor label,.canvas-app .relation-detail label{margin-bottom:var(--space-2)}.canvas-app .node-editor input,.canvas-app .node-editor textarea,.api-settings input,.api-settings select{font-size:var(--font-size-body);line-height:26px;min-height:44px}
.canvas-app .node-editor .primary-button,.canvas-app .relation-detail form>.primary-button{margin-top:var(--space-4)}
.canvas-app #cloud-dialog .cloud-body label,.api-settings label{margin-top:var(--space-4);margin-bottom:var(--space-2)}
.canvas-app .genre-options input:checked+span{border-color:var(--focus);background:var(--focus-soft)}
.canvas-app .canvas-bottom-note{font-size:var(--font-size-sm);line-height:21px}.canvas-app .canvas-chip-open[aria-current=true]{color:var(--focus)}
.doc-card{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--color-surface);padding:var(--space-6)}.doc-card p{font-size:var(--font-size-body);line-height:26px}.doc-card h3{font-family:var(--font-heading)}
body[data-page=guide] .hero-heading h1{font-family:var(--font-heading);font-size:var(--font-size-title);line-height:44px}.hero-heading h1 em{color:var(--action)}
body[data-page=guide] .sidebar{background:var(--color-surface)}.doc-note,.viewer-notice{background:var(--color-surface-subtle);border-left-color:var(--color-sky)}
@media(max-width:650px){.canvas-app .inspector-header strong,#ontology-view .ontology-header h2{font-size:20px;line-height:30px}.canvas-app .canvas-header-actions button{min-height:44px}.canvas-app .canvas-toolbar .tool-button{min-height:44px}.canvas-app .canvas-header-actions .text-link{font-size:var(--font-size-sm)}.canvas-app .canvas-bottom-note{font-size:var(--font-size-xs)}.doc-card{padding:var(--space-5)}}

/* Desktop library rail is visually separate from the interactive canvas. */
@media(min-width:801px){.canvas-app:has(#canvas-library:not([hidden])){background:var(--canvas-library-background)}.canvas-app:has(#canvas-library:not([hidden])) .canvas-viewport{margin-left:270px;border-left:1px solid var(--canvas-library-divider)}}
@media(max-width:800px){.canvas-app #canvas-library:not([hidden]){position:static;display:flex;align-items:center;gap:var(--space-2);width:auto;max-width:100%;max-height:88px;flex-shrink:0;overflow-x:auto;margin:0;padding:var(--space-1-half) var(--space-3);border-radius:0;box-shadow:none}.canvas-app #canvas-library .canvas-library-title{flex:none;margin:0}.canvas-app #canvas-library .canvas-chip{width:230px;flex:none;margin:0}.canvas-app #canvas-library .canvas-chip-open{white-space:nowrap}}

.canvas-empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-7);text-align:center;pointer-events:none;color:var(--ink)}
.canvas-empty-state strong{max-width:540px;font-size:clamp(var(--font-size-lead),2vw,var(--font-size-heading));line-height:1.5;font-weight:var(--font-weight-semibold);word-break:keep-all}.canvas-empty-state p{max-width:440px;margin:0;font-size:var(--font-size-ui);line-height:1.7;color:var(--muted);word-break:keep-all}
.canvas-viewport[inert] .canvas-empty-state,.canvas-viewport:has(#workspace-nodes .workspace-node) .canvas-empty-state,body[data-canvas-locked="true"] .canvas-empty-state{display:none}

.canvas-app .canvas-statusbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:var(--space-2) var(--space-5)}.canvas-statusbar #storage-status{min-width:0;overflow-wrap:anywhere}.canvas-copyright{font:inherit;text-align:right;white-space:nowrap}@media(max-width:800px){.canvas-app .canvas-statusbar{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);padding:var(--space-1-half) var(--space-3)}.canvas-statusbar #canvas-count{display:none}.canvas-copyright{grid-column:1/-1;white-space:normal;font-size:11px;line-height:18px}}

/* Compact relationship selection: name, family and explicit selected state. */
#relationship-panel #proposal-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
#relationship-panel .proposal-card{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:var(--space-3);width:100%;min-height:60px;padding:var(--space-3) var(--space-3-half);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:none;cursor:pointer}
#relationship-panel .proposal-card strong{grid-column:1;grid-row:1;min-width:0;font-size:15px;line-height:1.5;font-weight:var(--font-weight-semibold);color:var(--ink)}
#relationship-panel .proposal-card .pill{grid-column:2;grid-row:1;max-width:150px;min-width:0;margin:0;padding:3px var(--space-2);font-size:11px;line-height:1.5;font-weight:var(--font-weight-medium);white-space:normal;text-align:center}
#relationship-panel .proposal-card::after{content:'';grid-column:3;grid-row:1;width:18px;text-align:center;color:var(--focus);font-size:var(--font-size-body);font-weight:var(--font-weight-bold)}
#relationship-panel .proposal-card:hover{background:var(--focus-soft);border-color:#b2c2df}
#relationship-panel .proposal-card.active{background:var(--focus-soft);border-color:#98add6;box-shadow:inset 3px 0 0 var(--focus)}
#relationship-panel .proposal-card.active::after{content:'✓'}
#relationship-panel .proposal-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media(max-width:480px){#relationship-panel .proposal-card{gap:var(--space-2);padding:var(--space-2-half) var(--space-3)}#relationship-panel .proposal-card .pill{max-width:120px}}

.interpretation-manage{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-3) 0 var(--space-5)}#delete-interpretation{color:#a3372a}#edit-interpretation-form:not([hidden]){display:grid;gap:var(--space-2-half);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);margin-bottom:var(--space-5)}#edit-interpretation-form label{margin:0}#edit-interpretation-form select,#edit-interpretation-form textarea{width:100%;min-width:0;font:inherit}#edit-interpretation-form .interpretation-manage{margin:var(--space-1-half) 0 0}

.link-direction{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-3);margin:var(--space-3) 0 var(--space-5);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}.link-direction>.component-note{grid-column:1/-1;margin:0}.link-direction-names{display:flex;gap:var(--space-2);align-items:center;min-width:0;font-size:var(--font-size-sm)}.link-direction-names span:not(.link-direction-arrow){min-width:0;overflow-wrap:anywhere}.link-direction-arrow{flex:none;color:var(--muted)}#link-direction-status:empty{display:none}#reverse-link{align-self:center}@media(max-width:480px){.link-direction{grid-template-columns:minmax(0,1fr)}#reverse-link{justify-self:start}}

#app-confirmation{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:0 16px 64px #252a3433;overflow:auto;font-family:var(--font-sans)}
#app-confirmation::backdrop{background:#17233380}#app-confirmation header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border)}#app-confirmation h2{margin:0;font-size:20px;line-height:1.4}#app-confirmation-message{margin:0;padding:var(--space-6);font-size:15px;line-height:1.75;white-space:pre-line;overflow-wrap:anywhere}#app-confirmation footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-5) var(--space-6) var(--space-6);border-top:1px solid var(--border)}#app-confirmation button{min-height:44px;flex-shrink:0}#app-confirmation .confirmation-danger{background:var(--action);color:var(--surface)}@media(max-width:480px){#app-confirmation header{padding:var(--space-4)}#app-confirmation-message{padding:var(--space-5) var(--space-4)}#app-confirmation footer{padding:var(--space-4) var(--space-4) var(--space-5)}}

body[data-page="canvas"] .writing-open .writing-workbench{grid-template-columns:minmax(0,1fr)}
.materials-compact{border-right:0;border-bottom:1px solid var(--border)}.materials-compact>.cell-label,.materials-compact>.writing-hint,.materials-compact>.writing-node-pair,.materials-compact>.source-note,.materials-compact>.writing-source-fieldset,.materials-compact>.source-policy{display:none}.materials-compact>h3{margin:0 0 var(--space-3-half);font-size:var(--font-size-lead)}.material-counts{display:flex;gap:var(--space-3) var(--space-6);flex-wrap:wrap}.material-count{display:flex;align-items:baseline;gap:var(--space-1-half);color:var(--muted);font-size:var(--font-size-sm)}.material-count strong{font-size:21px;color:var(--ink);font-weight:var(--font-weight-semibold)}.material-groups{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4);align-items:start}.material-disclosure{min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.material-disclosure>summary{min-height:44px;padding:var(--space-3);cursor:pointer;font-size:var(--font-size-ui);overflow-wrap:anywhere;line-height:1.6}.material-disclosure>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.material-list{max-height:360px;overflow:auto;padding:0 var(--space-3) var(--space-3);display:grid;gap:var(--space-2)}.material-list>.material-disclosure>summary img{width:36px;height:36px;object-fit:contain;vertical-align:middle;margin-right:var(--space-2);border-radius:var(--radius-control);background:var(--canvas)}.material-title{overflow-wrap:anywhere}.material-arrow{padding:0 var(--space-2);color:var(--muted)}.material-detail{padding:0 var(--space-3) var(--space-3);font-size:var(--font-size-sm)}.material-detail p{white-space:pre-line;overflow-wrap:anywhere;line-height:1.7;margin:var(--space-1-half) 0 var(--space-3-half)}.material-detail strong{font-size:var(--font-size-sm)}.material-interpretation+.material-interpretation{border-top:1px solid var(--border);padding-top:var(--space-3);margin-top:var(--space-3)}.material-comment{padding:var(--space-3);border-top:1px solid var(--border)}.material-comment>.component-note{margin-left:var(--space-2)}.material-empty{font-size:var(--font-size-ui);color:var(--muted);padding:var(--space-3);line-height:1.7}@media(max-width:650px){.material-groups{grid-template-columns:1fr}.material-counts{gap:var(--space-2-half) var(--space-4)}}

body[data-page="canvas"] #canvas-writing-scope{display:none}

.guide-summary-fields{margin:var(--space-4) 0;display:grid;gap:0}.guide-summary-fields>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--border)}.guide-summary-fields dt{font-size:var(--font-size-sm);color:var(--muted);font-weight:var(--font-weight-medium)}.guide-summary-fields dd{margin:0;font-size:15px;line-height:1.7;overflow-wrap:anywhere;white-space:pre-line}.guide-summary-principles{margin:var(--space-5) 0;font-size:var(--font-size-ui)}.guide-summary-principles>strong{font-size:var(--font-size-sm);color:var(--muted)}.guide-summary-principles ul{margin:var(--space-2-half) 0;padding-left:var(--space-5);line-height:1.8}.guide-full{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin:var(--space-4) 0}.guide-full>summary{padding:var(--space-3) var(--space-4);font-size:var(--font-size-ui);cursor:pointer;min-height:44px}.guide-full>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}#guide-full #guide-preview{display:block;width:calc(100% - 32px);margin:0 var(--space-4) var(--space-4);box-sizing:border-box}#guide-snapshot-note{margin:var(--space-4) 0}@media(max-width:480px){.guide-summary-fields>div{grid-template-columns:1fr;gap:var(--space-1)}}

/* Node and relationship inspectors use the same surfaces, spacing and field rhythm. */
#canvas-inspector.floating-editor{border-radius:var(--radius)}.floating-editor .inspector-header{background:var(--color-surface-subtle);padding:var(--space-4);border-bottom:1px solid var(--border)}.floating-editor .inspector-header h2{font-size:20px;line-height:1.4}.floating-editor .inspector-panel{padding:var(--space-4);background:var(--surface)}
#node-panel .node-context{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);margin-bottom:var(--space-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--color-surface-subtle)}#node-panel #node-preview{width:80px;height:88px;max-height:88px;object-fit:contain;flex:none;margin:0;background:var(--surface);border-radius:var(--radius-control)}.node-context-caption{min-width:0;display:grid;gap:var(--space-1-half)}.node-context-caption strong{font-size:15px;line-height:1.6;overflow-wrap:anywhere}.node-context-caption .component-note{font-size:var(--font-size-xs);margin:0}
#node-panel .inspector-field{margin:0 0 var(--space-5)}#node-panel .inspector-field>label{display:block;margin:0 0 var(--space-2);font-size:var(--font-size-ui);font-weight:var(--font-weight-semibold)}#node-panel #node-source-note,#node-panel #node-text{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--surface);padding:var(--space-2-half) var(--space-3);font-size:15px;line-height:1.7}#node-panel #node-text{min-height:132px;resize:vertical}#node-text-count{justify-content:flex-end;display:flex;margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--font-size-xs)}#node-panel .action-row{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border)}#node-panel .action-row .primary-button{width:100%;margin:0;min-height:44px}#node-editor-status:empty{display:none}#node-editor-status{font-size:var(--font-size-sm);line-height:1.7;margin:var(--space-3) 0 0}
#relationship-panel .link-summary{padding:0 0 var(--space-2-half);border:0;background:transparent;margin:0;color:var(--muted);font-size:var(--font-size-xs)}#relationship-panel .link-summary>strong{display:none}#relationship-panel .link-direction{margin:0 0 var(--space-5);background:var(--color-surface-subtle)}#relationship-panel .link-direction-names{font-size:var(--font-size-ui);line-height:1.6}#relationship-panel .relation-picker{padding:0;margin-bottom:var(--space-5)}#relationship-panel #proposal-list{gap:var(--space-2);margin:var(--space-2) 0 0;max-height:208px;overflow:auto;padding:var(--space-half)}#relationship-panel .proposal-form{border:1px solid var(--border);border-radius:var(--radius);padding:0 var(--space-3);margin-bottom:var(--space-4);background:var(--surface)}#relationship-panel .proposal-form>summary{min-height:44px;padding:var(--space-3) 0;font-weight:var(--font-weight-semibold)}#relationship-panel .interpretation-fields{padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--color-surface-subtle);margin:var(--space-2) 0 var(--space-4)}#relationship-panel .interpretation-fields>label,#edit-interpretation-form>label{display:block;margin:var(--space-4) 0 var(--space-2);font-size:var(--font-size-ui);font-weight:var(--font-weight-semibold)}#relationship-panel select,#relationship-panel textarea{font-size:15px;line-height:1.7;border-radius:var(--control-radius)}
#relationship-panel #relation-detail{padding:0;border:0;background:var(--surface)}.interpretation-reading{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--color-surface-subtle);margin:0 0 var(--space-6)}.interpretation-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}#relationship-panel #relation-sentence{font-size:19px;line-height:1.5;margin:0}.interpretation-heading #interpretation-manage{margin:0;gap:var(--space-2);flex-wrap:wrap}.interpretation-heading button{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-2-half);min-height:40px}#relationship-panel #relation-definition{font-size:15px;line-height:1.8;margin:var(--space-4) 0 var(--space-3);white-space:pre-line;overflow-wrap:anywhere}#relationship-panel #proposal-author{margin:0;font-size:var(--font-size-xs);line-height:1.7;min-height:0;color:var(--muted)}#edit-interpretation-form{margin-top:var(--space-5);border-top:1px solid var(--border);padding-top:var(--space-1)}
#relationship-panel .opinion-compose{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-6);background:var(--surface)}#relationship-panel .opinion-compose>label{font-size:var(--font-size-ui);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2)}#relationship-panel .stance-options{display:grid;grid-template-columns:1fr;gap:var(--space-2);margin:var(--space-5) 0}#relationship-panel .stance-options label{padding:var(--space-2-half) var(--space-3);border:1px solid var(--border);border-radius:var(--control-radius);font-size:var(--font-size-ui);gap:var(--space-2);min-height:44px}#relationship-panel .stance-options label:has(input:checked){background:var(--focus-soft);border-color:var(--focus)}#relationship-panel .stance-options legend{font-size:var(--font-size-sm);color:var(--muted);margin-bottom:var(--space-2)}#relationship-panel #submit-relation-comment{margin-top:0}#relationship-panel .discussion-title{margin:0 0 var(--space-3);font-size:var(--font-size-body)}#relationship-panel #relation-comments{max-height:none;overflow:visible}#relationship-panel .discussion-comment{padding:var(--space-4);margin-bottom:var(--space-3);background:var(--surface)}#relationship-panel .discussion-comment p{font-size:var(--font-size-ui);line-height:1.8;margin:var(--space-3) 0}#relationship-panel .opinion-reactions{display:flex;flex-wrap:wrap;gap:var(--space-2)}#relationship-panel .opinion-reactions .delete-opinion{margin-left:auto}#relationship-panel .empty-discussion{padding:var(--space-4);background:var(--color-surface-subtle);border-radius:var(--radius);font-size:var(--font-size-sm);line-height:1.8}

#relationship-panel .opinion-compose-disclosure{border:1px solid var(--border);border-radius:var(--radius);margin:0 0 var(--space-6);background:var(--surface)}#relationship-panel .opinion-compose-disclosure>summary{padding:var(--space-3) var(--space-4);min-height:44px;font-size:var(--font-size-ui);font-weight:var(--font-weight-semibold);cursor:pointer}#relationship-panel .opinion-compose-disclosure .opinion-compose{border:0;border-top:1px solid var(--border);border-radius:0;margin:0}#relationship-panel .opinion-compose-disclosure>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

#relationship-panel .relation-picker>.cell-label{display:none}.interpretation-choice{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.interpretation-choice>summary{padding:var(--space-3);min-height:44px;cursor:pointer;font-size:var(--font-size-ui)}.interpretation-choice>summary>span{color:var(--muted);margin-right:var(--space-3)}.interpretation-choice>summary>strong{font-weight:var(--font-weight-semibold)}.interpretation-choice>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}#relationship-panel .interpretation-choice #proposal-list{margin:0 var(--space-2-half) var(--space-2-half)}

/* Readable AI output; exact response remains available separately. */
#ai-reading-view{max-width:76ch}
#ai-result-text{white-space:normal;max-width:none;font-size:var(--font-size-body);line-height:1.9;color:var(--ink)}
#ai-result-text>:first-child{margin-top:0}#ai-result-text>:last-child{margin-bottom:0}
#ai-result-text p{margin:0 0 1.3em}#ai-result-text h2{font-size:1.5em;line-height:1.5;margin:1.6em 0 .8em}#ai-result-text h3,#ai-result-text h4{font-size:1.2em;line-height:1.5;margin:1.5em 0 .7em}
#ai-result-text ul,#ai-result-text ol{padding-left:1.5em;margin:1em 0}#ai-result-text li+li{margin-top:.5em}
#ai-result-text blockquote{margin:1em 0;padding:var(--space-2) var(--space-4-half);border-left:3px solid var(--border);background:var(--color-surface-subtle)}
#ai-result-text pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--space-4);background:var(--color-surface-subtle)}#ai-result-text a{text-decoration:underline;color:var(--focus)}
#ai-result-references{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border);font-size:var(--font-size-ui);line-height:1.7;overflow-wrap:anywhere}
#ai-result-references>p{color:var(--muted)}#ai-result-references ol{padding-left:var(--space-6)}#ai-result-references li{padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--border)}#ai-result-references li span{display:block;color:var(--muted);font-size:var(--font-size-xs)}#ai-result-references li p{margin:var(--space-1-half) 0}
#ai-result-references summary{font-size:var(--font-size-xs);color:var(--muted);cursor:pointer}#ai-result-references code{display:block;margin:var(--space-2) 0;white-space:normal;overflow-wrap:anywhere}
#ai-original{max-width:76ch;margin:var(--space-6) 0;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4)}#ai-original summary{cursor:pointer;font-weight:var(--font-weight-semibold)}#ai-original-text{width:100%;min-height:220px;margin-top:var(--space-3);font-size:var(--font-size-sm);line-height:1.7}
@media(max-width:600px){#ai-result-text{padding:var(--space-4-half);font-size:15px}#ai-result-text h2{font-size:1.3em}}

.relation-help-link{display:inline-block;margin:var(--space-3) 0;text-underline-offset:3px}

/* Matches the homepage's filled floating action, above the canvas status bar. */
#homepage-link{position:fixed;left:24px;bottom:calc(var(--homepage-footer-height,40px) + 24px + env(safe-area-inset-bottom,0px));z-index:6;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--space-2-half) var(--space-4-half);border:1px solid var(--color-action);border-radius:var(--radius-pill);background:var(--color-action);color:var(--color-surface);font-family:var(--font-sans);font-size:var(--font-size-ui);font-weight:var(--font-weight-semibold);line-height:1.4;text-align:center;text-decoration:none;box-shadow:var(--shadow-floating);touch-action:manipulation}
#homepage-link:hover{background:var(--color-action-hover)}
#homepage-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:760px){#homepage-link{left:16px;bottom:calc(var(--homepage-footer-height,40px) + 16px + env(safe-area-inset-bottom,0px))}}

/* 412 × 914 phone workspace: one scrollable action rail leaves room for the canvas. */
@media(max-width:480px){
 .canvas-app .canvas-header{padding:var(--space-2) var(--space-3);gap:var(--space-1);flex-shrink:0}
 .canvas-app .canvas-header .brand{min-height:44px;display:flex;align-items:center}
 .canvas-app .canvas-header-actions{flex-wrap:nowrap;overflow-x:auto;max-width:100%;min-width:0;padding-bottom:var(--space-1-half);overscroll-behavior-x:contain}
 .canvas-app .canvas-header-actions>*{flex-shrink:0}.canvas-app .canvas-header-actions button,.canvas-app .canvas-header-actions .text-link{font-size:var(--font-size-ui);min-height:44px;white-space:nowrap}
 .canvas-app .canvas-toolbar{flex-shrink:0}.canvas-app .canvas-operation-guide{font-size:var(--font-size-xs);line-height:1.5}
 .canvas-app .canvas-statusbar{gap:var(--space-1) var(--space-3);flex-shrink:0;padding-bottom:calc(var(--space-1) + env(safe-area-inset-bottom,0px))}
 .canvas-app .canvas-statusbar a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--font-size-ui)}
 .canvas-app #canvas-inspector.writing-open{max-height:none;bottom:var(--homepage-footer-height,80px)}
 .writing-tabs{flex-wrap:wrap}.writing-tabs .writing-tab{min-height:44px;white-space:normal;font-size:var(--font-size-ui)}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:var(--font-size-body)!important;max-width:100%}
 #homepage-link{min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--font-size-ui)}
}