/* Hallmark · shape: app screen · genre: atmospheric · theme: brand · surface: absolute · signature: left-to-right folding exploration tree · states: draft/empty/expanded/importing/error · v2.0.0 */
/* Hallmark · pre-emit critique: one mission workspace, stable import frame and aligned source tools replace radial clutter and competing surfaces. */
/* Hallmark · waiver: compact 13–15px application text preserves room for real long question titles; no decorative captions. */
/* Hallmark · waive 7b · user explicitly requires pure black dialog backgrounds · Black surfaces unify the mission workspace and import dialog, while the garden keeps its existing atmosphere. */
/* Hallmark · waive 49b · entity titles are navigation links in a labelled tree · Tree labels wrap to preserve the meaning of real questions instead of truncating every question to a generic fragment. */
/* Hallmark · waive 80 · actual labelled data diagram · The tree renders saved questions and evidence relationships with interactive branches, not a decorative illustration. */
:root{--room-paper:#000;--room-surface:#101112;--room-raised:#191a1b;--room-rule:#2b2d2e;--room-muted:#999e9c;--room-secondary:#c0c4c1;--room-gold-soft:#222119;--trace-night:#101112;--mission-clear:transparent;--mission-edge:#48483f;--mission-faint:#17191a;--mission-font:var(--room-font);--mission-gold:var(--room-gold);--mission-ink:var(--room-ink);--mission-muted:var(--room-muted);--mission-line:var(--room-rule);--mission-surface:var(--room-surface)}
html,body{overflow-x:clip}
:is(dialog,.focus-room){background:var(--room-paper)!important;border-color:var(--room-rule)!important}
:is(dialog,.focus-room) :is(.modal-head,.panel-header,.room-navigation){background:var(--room-paper)!important;color:var(--mission-ink)}
:is(.mission-details,.mission-tabs,.mission-tree,.import-dialog) :is(button,textarea,input,select,[tabindex]):focus-visible{outline:2px solid var(--mission-gold);outline-offset:3px;transition:none}
.mission-entry{display:inline-flex;align-items:center;gap:16px;border:0;background:none;color:var(--mission-gold);font-size:16px;padding:12px;min-height:44px}
.mission-entry svg{width:24px;height:24px;transition:transform 180ms ease}.mission-entry:hover svg{transform:translateX(5px)}
.mission-entry:focus-visible{outline:2px solid var(--mission-gold);outline-offset:4px}
.focus-room[data-view=index]{width:min(1180px,calc(100% - 64px));height:min(820px,calc(var(--visible-height) - 64px));font-family:var(--mission-font)}
.focus-room[data-view=index] .panel-header{padding:24px 32px 12px!important}
.focus-room[data-view=index] #room-title{font-size:20px!important;line-height:1.5!important;margin:8px 0 0!important}
.focus-room[data-view=index] .panel-scroll{display:block;padding:0 32px 32px!important;min-height:0}
.mission-tabs{display:flex;gap:28px;padding:0 32px;border-bottom:1px solid var(--mission-line);flex-shrink:0}
.mission-tabs button{border:0;border-bottom:2px solid var(--mission-clear);background:none;font:inherit;font-size:14px;min-height:48px;padding:8px 0;color:var(--mission-muted)}
.mission-tabs button[aria-current=page]{border-color:var(--mission-gold);color:var(--mission-gold)}
.mission-details{max-width:100%;padding:24px 0 0;font-family:var(--mission-font)}
.mission-title-row{display:flex;align-items:flex-start;gap:24px;margin-bottom:28px}
.focus-room .mission-title-row h3{font-size:20px!important;line-height:1.6;font-weight:500;margin:0;flex:1;min-width:0;overflow-wrap:break-word;color:var(--mission-ink)}
.mission-title-row button{flex:none;font-size:13px;min-height:36px}
.mission-background{display:block;margin:0 0 28px}
.mission-section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;min-height:36px}
.focus-room .mission-section-heading :is(h3,label){margin:0;font-size:14px!important;font-weight:500;line-height:1.5;color:var(--mission-ink)}
.mission-section-heading button{min-height:36px;font-size:13px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px}
.mission-background textarea{display:block;width:100%;min-height:112px;max-height:240px;resize:vertical;padding:16px;font-size:14px;line-height:1.8;background:var(--mission-surface);color:var(--mission-ink);border:1px solid var(--mission-line);border-radius:10px}
.mission-no-materials{padding:20px 0;border-block:1px solid var(--mission-line);color:var(--mission-muted);font-size:13px}
.mission-generate{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin:24px 0;padding-top:20px;border-top:1px solid var(--mission-line)}
.mission-generate .primary{display:inline-flex;align-items:center;gap:12px;font-size:14px;min-height:44px}.mission-generate svg{width:24px;height:24px}.mission-generate .text-button{font-size:13px}
.mission-tree{position:relative;margin:0 -32px -32px;height:100%;min-height:340px;font-family:var(--mission-font)}
.tree-toolbar{height:52px;display:flex;align-items:center;justify-content:flex-end;padding:0 24px}
.tree-toolbar button{background:none;border:0;font:inherit;font-size:12px;min-height:40px;padding:8px;color:var(--mission-muted)}
.tree-viewport{overflow:auto;height:calc(100% - 52px);max-height:620px;min-height:300px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--mission-edge) var(--mission-clear);cursor:grab}
.tree-viewport:active{cursor:grabbing}.tree-canvas{position:relative;min-width:100%}.tree-lines{position:absolute;inset:0;pointer-events:none}.tree-lines path{fill:none;stroke:var(--mission-edge);stroke-width:1.2}
.tree-node{position:absolute;width:260px;min-height:80px;display:flex;align-items:center;background:var(--room-paper);border-bottom:1px solid var(--mission-edge);padding:0 8px 0 0}
.tree-label{display:block;text-decoration:none;flex:1;min-width:0;min-height:80px;padding:12px;border:0;background:none;color:var(--mission-ink);text-align:left;font:inherit;cursor:pointer}
.tree-label strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:400;line-height:1.55;overflow-wrap:anywhere}
.tree-stage{display:block;color:var(--mission-muted);font-size:11px;margin-bottom:4px;line-height:1.3}
.tree-mission{border-color:var(--mission-gold)}.tree-mission .tree-label strong{font-size:17px;color:var(--mission-gold);font-weight:500}.tree-axis .tree-label strong{font-size:15px;color:var(--mission-gold)}
.tree-fold{flex:none;display:flex;align-items:center;justify-content:center;gap:4px;min-height:40px;min-width:40px;background:var(--mission-surface);border:0;border-radius:6px;color:var(--mission-gold);font-size:12px;padding:4px}
.tree-fold svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform 180ms ease}.tree-fold[aria-expanded=true] svg{transform:rotate(90deg)}
.tree-remaining{border:0;min-height:48px}.tree-remaining .tree-label{display:block;text-decoration:none;min-height:48px;color:var(--mission-gold)}.tree-remaining strong{font-size:12px}
.tree-node:hover{border-color:var(--mission-gold)}.tree-label:hover strong{color:var(--mission-gold)}.tree-empty{position:absolute;left:350px;top:48px;background:none;border:0;color:var(--mission-gold);padding:16px;font:inherit;font-size:14px}
/* All three import modes use one frame. Only its body scrolls. */
dialog#modal.import-dialog{width:min(780px,calc(100% - 48px))!important;height:min(700px,calc(var(--visible-height,100dvh) - 48px))!important;max-width:none;max-height:none;border-radius:20px}
#modal.import-dialog>form{height:100%;display:flex;flex-direction:column;min-height:0}
#modal.import-dialog .modal-head{padding:24px 28px 16px;flex:none;min-height:80px;align-items:flex-start}
#modal.import-dialog .modal-head h2{font-size:20px!important;line-height:1.5;margin:0}
#modal.import-dialog .modal-body{flex:1;min-height:0;overflow:auto;padding:0 28px 24px!important}
#modal.import-dialog .modal-footer{padding:16px 28px;flex:none;min-height:76px;border-top:1px solid var(--mission-line)}
#modal.import-dialog .modal-footer button{font-size:14px;min-height:40px}
#modal.import-dialog .import-tabs{position:sticky;top:0;z-index:2;background:var(--room-paper);margin:0 0 20px;min-height:48px;display:flex;gap:28px;border-bottom:1px solid var(--mission-line)}
#modal.import-dialog .import-tabs button{font-size:14px;min-height:48px;padding:8px 0;border:0;border-bottom:2px solid var(--mission-clear);border-radius:0;background:none;color:var(--mission-muted)}
#modal.import-dialog .import-tabs button.active{color:var(--mission-gold);border-bottom-color:var(--mission-gold)}
#modal.import-dialog .material-destination{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;font-size:12px}
#modal.import-dialog .material-destination strong{font-size:13px;font-weight:400;line-height:1.7}.material-destination>span{flex:none}
#modal.import-dialog .material-drop{min-height:176px;padding:24px 16px;border-radius:10px}.import-dialog .material-drop strong{font-size:16px!important}.import-dialog .material-drop span{font-size:12px}.import-dialog .material-mark{font-size:28px!important}
#modal.import-dialog .paste-material{margin:20px 0 0}.import-dialog .paste-material summary{font-size:13px}
#modal.import-dialog :is(input,textarea,select){font-size:14px}#modal.import-dialog label{font-size:13px}
#modal.import-dialog .library-intro{justify-content:flex-end;margin:0 0 12px;padding:0;border:0}.import-dialog .library-capacity{font-size:12px}.import-dialog .library-capacity>span{display:none}
#modal.import-dialog .library-toolbar{gap:8px}.import-dialog .library-toolbar :is(button,label){font-size:13px}.import-dialog .library-hint{font-size:12px;margin:12px 0}.import-dialog .library-item{padding:16px 0}.import-dialog .library-item .library-title{font-size:14px}.import-dialog .library-empty{padding:24px 0}.import-dialog .library-empty p{display:none}
#modal.import-dialog .feishu-link-row{align-items:end;margin:24px 0}.import-dialog .feishu-link-row button{min-height:44px;font-size:14px}.import-dialog .feishu-route{display:flex;gap:12px;align-items:center;font-size:12px}.import-dialog .feishu-route select{min-width:0;flex:1}
/* Source titles, metadata and actions occupy stable columns, including long names. */
.source-document{grid-template-columns:24px minmax(0,1fr) 120px;gap:12px;padding:20px 0;align-items:start}
.source-document-main>header{display:block;min-height:40px}.source-document-main h4{font-size:14px!important;line-height:1.7;margin:0!important}.source-title-button{min-height:40px;padding:8px 0;font-size:14px}
.source-document-icon{min-height:40px}.source-document-meta{padding:4px 0;font-size:12px;gap:4px 16px}.source-document-destination{font-size:12px!important;margin:8px 0 0!important;line-height:1.7!important}
.source-document-actions{display:flex;gap:0;align-items:center;padding:0}
.source-preview-meta{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px}.source-preview-meta .source-ownership{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;margin:0;font-size:12px}.source-preview-meta .source-belongs{font-size:13px;line-height:1.7}.source-preview-meta .source-uploader{font-size:12px;color:var(--mission-muted)}
#modal .modal-head h2{font-size:20px!important;line-height:1.5!important;overflow-wrap:anywhere}#modal .source-original{font-family:var(--mission-font);font-size:14px;line-height:1.9;padding:20px;background:var(--mission-surface);border-radius:10px}
@media(max-width:700px){
 .focus-room[data-view=index]{width:calc(100% - 16px);height:calc(var(--visible-height) - 16px);border-radius:16px}.focus-room[data-view=index] .panel-header{padding:16px 16px 8px!important}.focus-room[data-view=index] .panel-scroll{padding:0 16px 20px!important}.mission-tabs{padding:0 16px;gap:24px}.mission-title-row{gap:12px;margin-bottom:20px}.focus-room .mission-title-row h3{font-size:17px!important}.mission-background textarea{font-size:14px}.mission-tree{margin:0 -16px -20px}.tree-toolbar{padding:0 12px}.tree-viewport{max-height:none}.mission-generate{gap:12px;justify-content:space-between}.mission-generate .primary{font-size:13px;padding:12px}
 dialog#modal.import-dialog{width:calc(100% - 20px)!important;height:calc(var(--visible-height,100dvh) - 32px)!important;border-radius:16px}#modal.import-dialog .modal-head{padding:20px 20px 12px;min-height:72px}#modal.import-dialog .modal-body{padding:0 20px 20px!important}#modal.import-dialog .modal-footer{padding:12px 20px}#modal.import-dialog .import-tabs{gap:24px}.import-dialog .library-toolbar{flex-wrap:wrap}.import-dialog .library-search{flex-basis:100%}
 .source-document{grid-template-columns:20px minmax(0,1fr);gap:8px}.source-document-actions{grid-column:2;justify-content:flex-end;gap:0}.source-document-kind{display:inline}.source-title-button{padding:8px 0}.source-document-destination{font-size:12px!important}.source-document-meta{font-size:11px;gap:4px 12px}.source-preview-meta{gap:8px}#modal .source-original{padding:16px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.mission-entry svg,.tree-fold svg{transition:none}}
.focus-room[data-view=index][data-mission-tab=overview] .panel-scroll{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0!important}
.focus-room[data-view=index] .mission-tree{display:flex;flex-direction:column;flex:1;height:auto;min-height:0;margin-bottom:0}
.mission-tree .tree-toolbar{flex:none}
.mission-tree .tree-viewport{flex:1;height:auto;min-height:0;max-height:none}

.mission-background textarea,#modal.import-dialog :is(input:not([type=file]),textarea,select){border-color:var(--room-input-edge)}
#modal .modal-head h2{text-wrap:balance}
@media(max-width:700px){.tree-node{width:200px}.tree-mission .tree-label strong{font-size:15px}}

.focus-room .mission-background textarea,#modal.import-dialog :is(input:not([type=file]),textarea,select){border-color:var(--room-input-edge)!important}
.source-document-main>header h4{padding:8px 0;min-height:40px}
#modal.import-dialog .material-destination{padding:0 0 16px;margin:0 0 20px;border-bottom:1px solid var(--mission-line)}