notes-surface.css

/* Notes notebook chrome — shared by notes.html and kbatch ?embed=contrails-notes */
.nt-rainbow .r1{background:#c9a84c}.nt-rainbow .r2{background:#56d4dd}.nt-rainbow .r3{background:#58a6ff}
.nt-rainbow .r4{background:#a78bfa}.nt-rainbow .r5{background:#34d399}.nt-rainbow .r6{background:#64748b}
.nt-scene-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-bottom:10px;border:1px solid var(--qp-border);border-radius:12px;background:var(--qp-bg-secondary);}
.nt-scene-title{font:800 11px ui-monospace,monospace;color:var(--qp-accent);letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;}
.nt-body{display:flex;flex:1;min-height:0;gap:0;align-items:stretch;border:1px solid var(--qp-border);border-radius:14px;overflow:hidden;background:var(--qp-bg-secondary);}
.nt-notebook-col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.nt-rd-cell-toolbar{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--qp-border);flex-wrap:wrap;align-items:center;background:var(--qp-bg-tertiary);}
.nt-rd-cell-toolbar.nt-hidden{display:none;}
.nt-rd-cell-toolbar button{font:600 10px ui-monospace,monospace;color:var(--qp-text-muted);background:var(--qp-bg-secondary);border:1px solid var(--qp-border);padding:4px 10px;border-radius:6px;cursor:pointer;}
.nt-rd-cell-toolbar button:hover{color:var(--qp-accent);border-color:var(--qp-accent);}
.nt-rd-cell-toolbar .nt-tb-spacer{flex:1;min-width:8px;}
.nt-rd-cell-toolbar .nt-layout-btn{padding:4px 8px;font-size:13px;line-height:1;}
.nt-rd-cell-toolbar .nt-layout-btn.active{color:var(--qp-accent);border-color:rgba(88,166,255,.4);}
.nt-blocks{display:flex;flex-direction:column;gap:8px;padding:10px 10px 14px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.nt-blocks.split-view{flex-direction:row;flex-wrap:wrap;}
.nt-blocks.split-view .nt-cell{width:calc(50% - 4px);}
.nt-cell{background:var(--qp-bg);border:1px solid var(--qp-border);border-radius:10px;overflow:hidden;transition:border-color .15s;}
.nt-cell:focus-within{border-color:rgba(88,166,255,.35);}
.nt-cell-head{display:flex;align-items:center;padding:5px 10px;gap:8px;border-bottom:1px solid var(--qp-border);background:var(--qp-bg-tertiary);}
.nt-cell-prefix{font:800 10px ui-monospace,monospace;min-width:28px;text-align:center;padding:2px 6px;border-radius:4px;line-height:1.2;}
.nt-cell-prefix.nt-p-md{background:rgba(63,185,80,.2);color:#3fb950;}
.nt-cell-prefix.nt-p-code{background:rgba(88,166,255,.2);color:#58a6ff;}
.nt-cell-prefix.nt-p-math{background:rgba(210,168,255,.18);color:#d2a8ff;}
.nt-cell-prefix.nt-p-qasm{background:#1e293b;color:#e2e8f0;border:1px solid #334155;}
.nt-cell-type{font:700 9px ui-monospace,monospace;color:var(--qp-accent);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--qp-border);border-radius:4px;cursor:pointer;background:var(--qp-bg);}
.nt-cell-type:hover{border-color:var(--qp-accent);}
.nt-cell-spacer{flex:1;}
.nt-cell-run{font:600 9px ui-monospace,monospace;color:var(--qp-text-muted);background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.2);padding:2px 10px;border-radius:4px;cursor:pointer;}
.nt-cell-run:hover{color:#58a6ff;border-color:rgba(88,166,255,.45);}
.nt-cell-del{font-size:14px;color:var(--qp-text-muted);cursor:pointer;background:none;border:none;padding:0 6px;line-height:1;opacity:.6;}
.nt-cell-del:hover{opacity:1;color:#f85149;}
.nt-cell textarea.nt-cell-input{width:100%;display:block;min-height:100px;max-height:45vh;box-sizing:border-box;padding:10px 12px;border:none;resize:vertical;background:transparent;color:var(--qp-text);font:13px/1.55 ui-monospace,monospace;outline:none;}
.nt-cell-output{padding:8px 12px;font:11px/1.5 ui-monospace,monospace;color:var(--qp-text-muted);border-top:1px solid var(--qp-border);background:rgba(0,0,0,.12);white-space:pre-wrap;max-height:140px;overflow-y:auto;display:none;}
.nt-cell-output.has-output{display:block;}
.nt-cell-output .out-ok{color:#3fb950}.nt-cell-output .out-err{color:#f85149}
.nt-side-rail{flex:0 0 280px;max-width:100%;overflow-y:auto;padding:10px 12px;border-left:1px solid var(--qp-border);background:var(--qp-bg-tertiary);display:none;flex-direction:column;gap:8px;}
.nt-side-rail.visible{display:flex;}
.nt-math-section{margin-bottom:4px;}
.nt-math-section h4{font:700 11px ui-serif,Georgia,serif;color:var(--qp-accent);letter-spacing:.04em;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--qp-border);}
.nt-math-item{font:11px ui-monospace,monospace;color:var(--qp-text-muted);padding:5px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;}
.nt-math-item:hover{background:rgba(88,166,255,.08);color:var(--qp-text);}
.nt-math-item .mi-sym{color:var(--qp-accent);min-width:32px;text-align:center;font-weight:700;}
.nt-gate-card{background:var(--qp-bg);border:1px solid var(--qp-border);border-radius:8px;padding:8px 10px;cursor:pointer;transition:border-color .15s,background .15s;}
.nt-gate-card:hover{border-color:var(--qp-accent);background:rgba(88,166,255,.06);}
.nt-gate-card .gc-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
.nt-gate-card .gc-prefix{font:800 10px ui-monospace,monospace;min-width:26px;}
.nt-gate-card .gc-name{font:600 10px ui-monospace,monospace;color:var(--qp-accent);}
.nt-gate-card .gc-badge{font:600 8px ui-monospace,monospace;padding:1px 6px;border-radius:3px;border:1px solid;margin-left:auto;}
.nt-gate-card .gc-desc{font:10px/1.45 ui-monospace,monospace;color:var(--qp-text-muted);}
.nt-gate-card .gc-matrix{font:9px ui-monospace,monospace;color:rgba(201,168,76,.55);margin-top:4px;}
.nt-ctx h4{font:700 11px ui-serif,Georgia,serif;color:var(--qp-accent);margin:0 0 6px;}
.nt-ctx a{font:11px ui-monospace,monospace;color:var(--qp-accent);text-decoration:none;display:block;padding:3px 0;}
.nt-ctx a:hover{text-decoration:underline;}
.nt-ctx .ctx-state{font:11px ui-monospace,monospace;color:var(--qp-text-muted);line-height:1.55;}
.nt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;}
.nt-toolbar button{
  font:600 11px ui-monospace,monospace;padding:6px 12px;border-radius:8px;border:1px solid var(--qp-border);
  background:var(--qp-bg-tertiary);color:var(--qp-accent);cursor:pointer;
}
.nt-toolbar button:hover{border-color:var(--qp-accent);background:var(--qp-bg-hover);}
.nt-toolbar .nt-hint{margin-left:auto;font-size:11px;color:var(--qp-text-muted);}
.nt-glue-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding:10px 12px;border-top:1px solid var(--qp-border);background:var(--qp-bg);}
.nt-glue-toolbar button,.nt-glue-toolbar select{font:600 11px ui-monospace,monospace;padding:6px 10px;border-radius:8px;border:1px solid var(--qp-border);background:var(--qp-bg-secondary);color:var(--qp-accent);cursor:pointer;}
.nt-glue-toolbar button:hover{border-color:var(--qp-accent);background:var(--qp-bg-hover);}
.nt-glue-toolbar select{color:var(--qp-text);}
.nt-glue-label{font:600 11px ui-monospace,monospace;color:var(--qp-text-muted);margin-right:4px;}
.nt-glue-panel{margin:0 10px 10px;padding:12px 14px;border:1px solid var(--qp-border);border-radius:10px;background:var(--qp-bg);font:12px/1.5 ui-monospace,monospace;color:var(--qp-text);max-height:200px;overflow:auto;display:none;}
.nt-glue-panel.nt-show{display:block;}
.nt-glue-panel h3{margin:0 0 8px;font-size:11px;font-weight:700;color:var(--qp-accent);text-transform:uppercase;letter-spacing:.06em;}
.nt-glue-panel .pre{color:var(--qp-text-muted);white-space:pre-wrap;word-break:break-word;font-size:11px;}
[data-theme="light"] .nt-cell-prefix.nt-p-qasm{background:#f1f5f9;color:#0f172a;border-color:#cbd5e1;}
@media (max-width:900px){
  .nt-body{flex-direction:column;}
  .nt-side-rail{flex:1 1 auto;border-left:none;border-top:1px solid var(--qp-border);max-height:40vh;}
  .nt-blocks.split-view .nt-cell{width:100%;}
}
.nt-section{margin-bottom:18px;border:1px solid var(--qp-border);border-radius:12px;padding:16px 18px;background:var(--qp-bg-secondary);}
.nt-section h2{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--qp-accent);text-transform:uppercase;letter-spacing:.06em;}
.nt-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.nt-links a{
  display:inline-block;padding:8px 12px;border-radius:8px;border:1px solid var(--qp-border);background:var(--qp-bg-tertiary);
  color:var(--qp-accent);text-decoration:none;font:600 12px ui-monospace,monospace;
}
.nt-links a:hover{border-color:var(--qp-accent);background:var(--qp-bg-hover);}
.nt-note{font-size:12px;color:var(--qp-text-muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--qp-border);}
.nt-funnel-btn{color:var(--qp-accent);border-color:rgba(201,168,76,.35)!important;}
.nt-funnel-btn:hover{background:rgba(201,168,76,.1)!important;}
.nt-blocks.split-view .nt-cell{position:relative;}
.nt-blocks.split-view .nt-cell::after{
  content:'';position:absolute;right:-5px;top:50%;width:0;height:0;border:5px solid transparent;border-left:6px solid rgba(88,166,255,.35);
  transform:translateY(-50%);pointer-events:none;opacity:.65;display:none;
}
.nt-blocks.split-view .nt-cell:nth-child(odd):not(:last-child)::after{display:block;}
@media(max-width:900px){.nt-blocks.split-view .nt-cell::after{display:none!important;}}
#status-bar{
  display:flex;align-items:center;min-height:22px;background:var(--mueee-status-bar-bg);border-top:1px solid var(--mueee-status-bar-border);
  padding:0 10px;padding-bottom:max(0px,env(safe-area-inset-bottom));gap:12px;font-size:.5625rem;font-family:ui-monospace,monospace;
  color:var(--mueee-status-bar-text);flex-shrink:0;box-sizing:border-box;
}
#status-bar .val{color:var(--mueee-status-bar-accent);}
#status-bar .spacer{flex:1;}
.nt-contrails-panel{
  flex-shrink:0;margin-top:10px;border:1px solid var(--qp-border);border-radius:12px;
  overflow:hidden;background:var(--qp-bg-tertiary);display:flex;flex-direction:column;min-height:0;
}
.nt-contrails-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;
  border-bottom:1px solid var(--qp-border);background:var(--qp-bg-secondary);
}
.nt-contrails-title{font:800 11px ui-monospace,monospace;color:var(--qp-accent);letter-spacing:.08em;text-transform:uppercase;}
.nt-contrails-sub{font:11px ui-monospace,monospace;color:var(--qp-text-muted);flex:1;min-width:0;}
.nt-contrails-head a{
  font:600 10px ui-monospace,monospace;color:var(--qp-accent);text-decoration:none;
  padding:4px 10px;border:1px solid var(--qp-border);border-radius:6px;background:var(--qp-bg);
}
.nt-contrails-head a:hover{border-color:var(--qp-accent);}
.nt-contrails-frame{
  display:block;width:100%;height:min(52vh,520px);min-height:320px;border:0;background:#010409;
}
@media (max-width:600px){
  .nt-contrails-frame{min-height:280px;height:48vh;}
}
html.nt-hide-contrails #nt-contrails-panel{display:none!important;}

/* kbatch single-page: Contrails + Notes */
html.kbatch-embed-contrails-notes .kbatch-contrails-flow{
  flex:0 1 auto;
  max-height:min(48vh,520px);
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
html.kbatch-embed-contrails-notes #panel-contrails.tab-panel.active{
  overflow:hidden!important;
  flex-direction:column!important;
}
html.kbatch-embed-contrails-notes .kbatch-notes-in-contrails{
  display:flex!important;
  flex-direction:column;
  flex:1 1 auto;
  min-height:min(42vh,480px);
  overflow:hidden;
  border-top:1px solid var(--qp-border-muted);
  font-family:system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--qp-text);
  background:var(--qp-bg-secondary);
}
html.kbatch-embed-contrails-notes .kbatch-notes-in-contrails .kbatch-nt-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:10px 12px 12px;
  -webkit-overflow-scrolling:touch;
}
html.kbatch-embed-contrails-notes .kbatch-notes-in-contrails .nt-scene-header{margin-bottom:8px;}
html.kbatch-embed-contrails-notes .kbatch-notes-in-contrails .nt-body{min-height:240px;}
html.kbatch-embed-contrails-notes .kbatch-notes-in-contrails input,
html.kbatch-embed-contrails-notes .kbatch-notes-in-contrails textarea,
html.kbatch-embed-contrails-notes .kbatch-notes-in-contrails select{
  user-select:text;
  -webkit-user-select:text;
}
.kbatch-notes-in-contrails{display:none;}
html.kbatch-embed-contrails-notes .kbatch-nt-mini-status{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:6px 12px;font:600 10px ui-monospace,monospace;
  color:var(--qp-text-muted);border-top:1px solid var(--qp-border);
  background:var(--qp-bg-tertiary);flex-shrink:0;
}
html.kbatch-embed-contrails-notes .kbatch-nt-mini-status .val{color:var(--qp-accent);}