Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209.rich-editor { position: relative; margin-top: 18px; }.editor-surface { position: relative; }.editor-toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 18px; padding: 6px 0; background: rgba(251,250,246,.96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}.toolbar-spacer { flex: 1; }.tool-button { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; color: #68736d; background: transparent; border-radius: 3px; }.tool-button:hover, .tool-button.active { color: var(--green); background: var(--green-soft); }.tool-button:disabled { color: #b6bbb8; cursor: not-allowed; background: transparent;}.tool-button svg { width: 14px; }.tiptap { min-height: 420px; outline: none; color: #313a35; font-size: 16px; line-height: 1.75; }.compact .tiptap { min-height: 150px; }.preview .tiptap { cursor: default; }.tiptap h1, .tiptap h2, .tiptap h3 { font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 400; line-height: 1.08; }.tiptap h2 { margin: 1.5em 0 .55em; font-size: 31px; }.tiptap p { margin: .75em 0; }.tiptap p.is-editor-empty:first-child::before { height: 0; float: left; color: #a8afaa; content: attr(data-placeholder); pointer-events: none; }.tiptap a { color: var(--green); text-underline-offset: 3px; }.tiptap img { max-width: 100%; display: block; margin: 22px auto; border: 1px solid var(--line); }.image-insert-options { display: flex; align-items: center; gap: 10px; margin-top: 12px; }.image-insert-options button { min-height: 34px; }.image-insert-options button svg { width: 14px; }.image-insert-options > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }.image-insert-options > span svg { width: 13px; }.image-upload-panel { display: grid; justify-items: center; gap: 7px; margin-bottom: 15px; padding: 22px 18px 18px; color: var(--muted); background: #f5f6f1; border: 1px dashed #b9c7bc; border-radius: 7px; text-align: center; transition: border-color 120ms ease, background 120ms ease;}.image-upload-panel:hover,.image-upload-panel:focus-within { background: #f1f5ef; border-color: var(--green);}.image-upload-panel.uploading { opacity: .76; }.image-upload-panel > svg { width: 22px; height: 22px; color: var(--green); }.image-upload-panel strong { color: var(--ink); font-size: 14px; }.image-upload-panel > span { max-width: 320px; font-size: 12px; line-height: 1.45; }.image-upload-panel button { margin-top: 5px; }.image-upload-panel button svg { width: 14px; }.image-upload-panel small { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 11px; }.image-upload-panel small svg { width: 12px; height: 12px; }.image-url-field { margin-top: 4px; }.excalidraw-diagram { position: relative; display: flex; justify-content: center; margin: 30px 0; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px;}.excalidraw-diagram.selected { border-color: rgba(54, 105, 78, .32); box-shadow: 0 0 0 3px rgba(54, 105, 78, .08);}.excalidraw-diagram img { width: auto; max-width: 100%; max-height: min(72vh, 760px); height: auto; margin: 0; border: 0; object-fit: contain;}.diagram-edit-button { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; color: #fff; background: rgba(31, 48, 40, .86); border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; font: 600 13px "DM Sans", ui-sans-serif, system-ui, sans-serif; box-shadow: 0 4px 16px rgba(22, 31, 27, .14); opacity: 0; transform: translateY(3px); transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;}.excalidraw-diagram:hover .diagram-edit-button,.excalidraw-diagram.selected .diagram-edit-button,.diagram-edit-button:focus-visible { opacity: 1; transform: translateY(0);}.diagram-edit-button:hover { background: #1f3028; }.diagram-edit-button svg { width: 15px; height: 15px; }.tiptap code { padding: 2px 4px; color: #744b33; background: #f1e8df; border-radius: 3px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .88em; }.tiptap pre { overflow-x: auto; margin: 20px 0; padding: 17px; color: #dfe8e2; background: #1e2b26; border-radius: 4px; }.tiptap pre code { padding: 0; color: inherit; background: transparent; }.tiptap .code-window { position: relative; overflow: hidden; margin: 24px 0; background: #1f2b26; border: 1px solid #395044; border-radius: 9px; box-shadow: 0 10px 26px rgba(26, 40, 32, .13); transition: margin 160ms ease, box-shadow 160ms ease;}.tiptap .code-window.expanded { margin-inline: 0; box-shadow: 0 16px 34px rgba(26, 40, 32, .18);}.code-window-header { position: sticky; top: 0; z-index: 2; min-height: 34px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 11px; color: #b8c6bd; background: #293a32; border-bottom: 1px solid rgba(190, 213, 199, .13); user-select: none;}.code-window-controls { display: flex; align-items: center; gap: 6px; }.code-window-dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(25, 36, 30, .2);}.code-window-dot.close { background: #ee8175; }.code-window-dot.minimize { background: #e9bd68; }.code-window-dot.maximize { background: #7fca8c; }.code-window-dot:disabled { cursor: default; opacity: .8; }.code-window-dot:not(:disabled):hover { filter: brightness(1.08); }.code-window-language,.code-window-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px;}.code-window-language { color: #d8e4dc; font-family: "SFMono-Regular", Consolas, monospace; }.code-window-title { color: #91a398; text-align: right; }.tiptap .code-window-body { min-height: 0; overflow-x: auto; margin: 0; padding: 17px; color: #dfe8e2; background: #1f2b26; border-radius: 0;}.tiptap .code-window.expanded .code-window-body { min-height: 240px; }.tiptap .code-window.collapsed .code-window-body { display: none; }.tiptap .code-window-body code { display: block; min-height: 1.5em; white-space: pre;}.tiptap blockquote { margin-left: 0; padding-left: 16px; color: #5f6d66; border-left: 2px solid #8eaa99; }.tiptap ul[data-type="taskList"] { padding: 0; list-style: none; }.tiptap ul[data-type="taskList"] li { display: flex; gap: 8px; }.latex-node { color: var(--ink); cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease;}.latex-node.inline { display: inline-block; margin-inline: 2px; padding: 0 4px; background: #f0eee6; border-radius: 3px;}.latex-node.display { display: block; overflow-x: auto; margin: 24px 0; padding: 17px 24px; text-align: center; border-block: 1px solid transparent;}.latex-node:hover,.latex-node.selected { background: var(--green-soft); box-shadow: inset 0 0 0 1px rgba(54,105,78,.18);}.latex-node.display:hover,.latex-node.display.selected { border-block-color: rgba(54,105,78,.22); box-shadow: none;}.annotation-highlight { margin-inline: -1px; padding-inline: 1px; background: linear-gradient( to bottom, transparent 82%, rgba(177, 146, 42, .42) 82%, rgba(177, 146, 42, .42) 100% ); border-radius: 2px; cursor: text; transition: background 120ms ease; box-decoration-break: clone; -webkit-box-decoration-break: clone;}.annotation-highlight:hover { background: linear-gradient( to bottom, transparent 68%, rgba(203, 183, 91, .24) 68%, rgba(177, 146, 42, .52) 100% );}.selection-comment-action { position: absolute; z-index: 20; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #fff; background: #24352d; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; box-shadow: 0 6px 20px rgba(26, 39, 33, .2); font-size: 12px; font-weight: 650;}.selection-comment-action:hover { background: #18271f; }.selection-comment-action svg { width: 13px; height: 13px; }.annotation-gutter-marker { position: absolute; right: -35px; z-index: 8; width: 25px; height: 28px; display: grid; place-items: center; padding: 0; color: #8a7530; background: transparent; border: 0; border-left: 2px solid #c8b260; border-radius: 0 4px 4px 0; transition: color 120ms ease, transform 120ms ease, border-color 120ms ease;}.annotation-gutter-marker svg { width: 14px; height: 14px;}.annotation-gutter-marker:hover,.annotation-gutter-marker:focus-visible { color: var(--green); border-left-color: var(--green); transform: translateX(-2px);}.annotation-gutter-marker.active { color: #fff; background: var(--green); border-left-color: var(--green);}.inspector-title-group { min-width: 0; display: flex; align-items: flex-start; gap: 9px;}.document-inspector .inspector-back { width: 28px; height: 28px; flex: 0 0 auto; margin-top: 1px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px;}.editor-loading { padding: 20px 0; color: var(--muted); font-size: 14px; }.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: 18px; background: rgba(23,31,27,.68);}.forge-dialog { width: min(560px, 100%); max-height: min(720px, 100%); overflow: auto; padding: 24px; color: var(--ink); background: var(--paper-pure); border: 1px solid #56635c; box-shadow: 0 24px 70px rgba(18, 27, 22, .28);}.forge-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;}.forge-dialog-header h2 { margin-top: 0; font: 600 25px/1.08 "DM Sans", ui-sans-serif, system-ui, sans-serif;}.forge-dialog-header p { max-width: 440px; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.45;}.forge-dialog-form { display: grid; gap: 16px; margin-top: 22px;}.forge-dialog-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650;}.forge-dialog-field em { color: var(--faint); font-size: 11px; font-style: normal; font-weight: 500;}.forge-dialog-field input,.forge-dialog-field textarea,.forge-dialog-field select { width: 100%; min-height: 40px; padding: 9px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 5px; outline: 0; font: inherit; font-weight: 500;}.forge-dialog-field textarea { min-height: 112px; resize: vertical; }.forge-dialog-field input:focus,.forge-dialog-field textarea:focus,.forge-dialog-field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(63,118,94,.12);}.forge-dialog-error { margin: -4px 0 0; color: var(--danger); font-size: 12px; line-height: 1.4;}.forge-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px;}.forge-dialog-code { display: block; max-width: 100%; margin-top: 16px; padding: 12px; overflow-x: auto; color: var(--ink); background: #f1f0eb; border: 1px solid var(--line); font: 12px/1.45 "IBM Plex Mono", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere;}.latex-backdrop { z-index: 110; }.latex-composer { width: min(620px, 100%); padding: 20px; color: var(--ink); background: var(--paper-pure); border: 1px solid #56635c; box-shadow: 0 24px 70px rgba(18, 27, 22, .28);}.latex-composer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;}.latex-composer h2 { margin-top: 4px; font: 600 28px/1.05 "DM Sans", ui-sans-serif, system-ui, sans-serif;}.latex-composer .icon-button { width: 31px; height: 31px; display: grid; place-items: center; color: var(--muted); background: transparent; border-radius: 4px;}.latex-composer .icon-button:hover { background: var(--green-soft); }.latex-composer .icon-button svg { width: 15px; }.latex-mode-switch { display: inline-flex; margin-top: 18px; border: 1px solid var(--line-strong); border-radius: 4px;}.latex-mode-switch button { min-height: 32px; padding: 0 12px; color: var(--muted); background: transparent; font-size: 12px;}.latex-mode-switch button + button { border-left: 1px solid var(--line-strong); }.latex-mode-switch button.active { color: var(--green); background: var(--green-soft); }.latex-composer > label { display: block; margin-top: 15px; color: var(--ink-soft); font-size: 12px; font-weight: 600;}.latex-composer textarea { width: 100%; min-height: 118px; margin-top: 7px; resize: vertical; padding: 12px; color: #dfe8e2; background: #1e2b26; border: 1px solid #263b32; border-radius: 4px; outline: 0; font: 14px/1.55 "SFMono-Regular", Consolas, monospace;}.latex-composer textarea:focus { border-color: #86aa94; }.latex-preview { min-height: 72px; display: flex; align-items: center; margin-top: 13px; padding: 14px 16px; overflow-x: auto; background: #f4f3ed; border-block: 1px solid var(--line);}.latex-preview.display { justify-content: center; min-height: 96px; }.latex-composer > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px;}.latex-footer-context { display: flex; align-items: center; gap: 11px;}.latex-footer-context > span { color: var(--faint); font-size: 12px; }.latex-remove { padding: 5px 0; color: var(--danger); background: transparent; font-size: 12px; font-weight: 600;}.latex-remove:hover { text-decoration: underline; }.latex-composer .button-row { display: flex; gap: 7px; }.diagram-modal { min-width: 0; min-height: 0; width: min(1180px, 100%); height: min(780px, 100%); max-height: 100%; display: flex; flex-direction: column; padding: 12px; background: white; border: 1px solid #39463f; }.diagram-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 4px 12px; }.diagram-modal h2 { margin-top: 3px; font: 600 28px "DM Sans", ui-sans-serif, system-ui, sans-serif; }.diagram-modal .button-row { display: flex; align-items: center; gap: 6px; }.diagram-modal .icon-button { display: none; }.spatial-document-controls { min-width: min(680px, 62vw); display: flex; align-items: center; gap: 9px; margin-top: 7px;}.spatial-document-controls > label:not(.spatial-listed-control) { min-width: 0; display: grid; grid-template-columns: auto minmax(130px, 1fr); align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 650;}.spatial-document-controls > label:first-child { flex: 1 1 250px;}.spatial-attach-control { flex: 1 1 250px;}.spatial-document-controls input[type="text"],.spatial-document-controls > label:first-child input,.spatial-attach-control select { min-width: 0; height: 30px; padding: 0 9px; color: var(--ink-soft); background: var(--paper-pure); border: 1px solid var(--line-strong); border-radius: 4px; outline: 0; font: 600 12px Inter, ui-sans-serif, system-ui, sans-serif;}.spatial-attach-control select { padding-right: 28px;}.spatial-listed-control { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 650;}.spatial-listed-control input { accent-color: var(--green);}.spatial-document-controls > label:first-child input:focus,.spatial-attach-control select:focus { border-color: rgba(54, 105, 78, .55); box-shadow: 0 0 0 3px rgba(54, 105, 78, .09);}.diagram-error { margin: 0 4px 10px; padding: 9px 11px; color: #8c352e; background: #fff1ee; border: 1px solid #ebc7c1; font-size: 13px;}.diagram-loading { flex: 1; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line);}.excalidraw-frame { min-height: 0; flex: 1; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 700px) { .modal-backdrop { padding: 0; } .forge-dialog { width: 100%; max-height: 100%; padding: 22px 18px; border: 0; } .workspace-resource-dialog { width: 100%; min-height: 100%; padding: 22px 18px; border: 0; } .workspace-resource-dialog > footer { margin-top: auto; } .diagram-modal { width: 100%; height: 100%; border: 0; } .diagram-modal > header { align-items: flex-start; } .diagram-modal h2 { font-size: 23px; } .spatial-document-controls { min-width: 0; display: none; } .diagram-modal .icon-button { display: grid; } .diagram-modal .diagram-cancel { display: none; } .diagram-edit-button { right: 10px; bottom: 10px; } .annotation-gutter-marker { right: 2px; width: 26px; height: 26px; background: rgba(243, 235, 199, .94); }}
@media (max-width: 1180px) { .today-grid { grid-template-columns: 1fr; gap: 30px; } .today-context { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); border-top: 1px solid var(--line); border-left: 0; } .today-context > section { padding: 28px 24px 30px 0; } .today-context > section + section { padding-left: 28px; border-top: 0; border-left: 1px solid var(--line); } .problem-detail { grid-template-columns: minmax(0, 1fr) 300px; } .workspace-panes.with-agent { grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) 290px; } .provider-fields { grid-template-columns: 1fr 1fr; } .provider-fields .secondary-button { justify-self: start; }}
/* The Forge shell already consumes a 240px navigation rail. At a 1280px browser width the remaining problem editor is too narrow for a permanent document + consultation split. Keep the document readable and only add a compact companion column while the owner has explicitly opened Agent. */@media (min-width: 1051px) and (max-width: 1400px) { .problems-layout { grid-template-columns: 280px minmax(0, 1fr); }
.problems-layout .problem-detail.agent-open { position: relative; grid-template-columns: minmax(0, 1fr) minmax(300px, 320px); }
.problems-layout .problem-detail.agent-open > .agent-panel { position: static; width: auto; display: flex; border-left: 1px solid var(--line); box-shadow: none; }
.problems-layout .problem-canvas { width: min(780px, calc(100% - 72px)); }
.problems-layout .problem-detail.agent-open .problem-canvas .document-title-input { font-size: clamp(36px, 4vw, 48px); }}
@media (min-width: 821px) and (max-width: 1050px) { .app-shell, .app-shell.sidebar-collapsed { padding-left: var(--sidebar-collapsed); }
.app-sidebar, .sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed); }
.brand-copy, .command-search span, .command-search kbd, .nav-group-label, .nav-group button span, .sidebar-footer > button span { display: none; }
.sidebar-header { justify-content: center; padding-inline: 10px; }
.brand-button { flex: none; }
.command-search, .nav-group button, .sidebar-footer > button { justify-content: center; padding: 0; }
.command-search { margin-inline: 10px; }
.sidebar-collapse { display: none; }
.notes-layout, .problems-layout, .whiteboard-layout { grid-template-columns: 310px minmax(0, 1fr); }
.document-commandbar { gap: 10px; padding-inline: 12px; }
.commandbar-actions { min-width: 0; }
.commandbar-actions > button:not(.primary-button):not(.secondary-button) span { display: inline; }
.notes-layout .commandbar-actions > button:not(.primary-button):not(.secondary-button) span { display: none; }
.document-title-input { font-size: clamp(36px, 4.5vw, 44px); line-height: 1.04; }
.problem-detail, .problem-detail.agent-open { position: relative; grid-template-columns: minmax(0, 1fr); }
.problem-detail.agent-open > .agent-panel { position: absolute; z-index: 30; inset: 56px 0 0 auto; width: min(380px, 84%); display: flex; border-left: 1px solid var(--line-strong); box-shadow: -14px 0 40px rgba(30, 40, 35, .14); }
.problem-canvas { width: min(720px, calc(100% - 72px)); }
.learning-workbench { grid-template-columns: 220px minmax(0, 1fr); }
.course-workspace > header { min-height: 0; padding: 20px 22px; }
.course-workspace h2 { font-size: 28px; line-height: 1.2; }
.course-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.lesson-outline { display: flex; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
.lesson-outline > button { min-width: 168px; flex: 1 1 0; border-right: 1px solid var(--line); border-bottom: 0; }
.lesson-outline { scrollbar-width: thin; scrollbar-color: #b7c5bb transparent; }
.lesson-scroll { padding-inline: 28px; }
.workspace-panes.with-agent { position: relative; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr); }
.workspace-panes > .agent-panel { position: absolute; z-index: 30; inset: 0 0 0 auto; width: min(380px, 84%); border-left: 1px solid var(--line-strong); box-shadow: -14px 0 40px rgba(30, 40, 35, .14); }}
@media (max-width: 820px) { /* Mobile pages must own the full viewport. The desktop shell keeps a compact rail through padding-left; if that width survives into a narrow viewport, every master list is rendered as a clipped column with a dead strip beside it. */ .app-shell, .app-shell.sidebar-collapsed { width: 100%; min-width: 0; padding-left: 0; } .app-content { width: 100%; min-width: 0; } .notes-layout, .problems-layout, .whiteboard-layout { width: 100%; min-width: 0; } .app-sidebar, .sidebar-collapsed .app-sidebar { width: var(--sidebar-width); transform: translateX(-100%); } .app-sidebar.mobile-open { transform: translateX(0); box-shadow: 20px 0 70px rgba(13,23,18,.28); } .sidebar-collapsed .brand-copy, .sidebar-collapsed .command-search span, .sidebar-collapsed .command-search kbd, .sidebar-collapsed .nav-group-label, .sidebar-collapsed .nav-group button span, .sidebar-collapsed .sidebar-footer > button span { display: block; } .sidebar-collapsed .command-search, .sidebar-collapsed .nav-group button, .sidebar-collapsed .sidebar-footer > button { justify-content: flex-start; padding: 0 10px; } .sidebar-collapse { display: none; } .sidebar-close-mobile { width: 32px; height: 32px; display: grid; place-items: center; margin-left: auto; color: white; background: transparent; } .mobile-navigation-button { position: fixed; top: 12px; left: 12px; z-index: 44; width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); background: rgba(251,250,246,.95); border: 1px solid var(--line-strong); border-radius: 5px; } .mobile-navigation-scrim { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(18,27,22,.42); } .standard-page { padding-top: 68px; } .notes-layout, .problems-layout, .whiteboard-layout { padding-top: 48px; } .library-pane, .board-list-pane, .document-pane, .problem-detail, .board-main { height: calc(100vh - 48px); } .graph-page { padding-top: 68px; } .workspace-layout { padding-top: 48px; grid-template-rows: 62px 42px minmax(0, 1fr); } .workspace-panes.with-agent { grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); } .workspace-panes > .agent-panel { position: absolute; z-index: 30; inset: 0 0 0 auto; width: min(360px, 92vw); border-left: 1px solid var(--line-strong); box-shadow: -12px 0 36px rgba(30,40,35,.12); } .settings-block { grid-template-columns: 220px minmax(0, 1fr); }
/* Graph keeps its own spatial shell, so it does not inherit the regular app-shell:not(.graph-focus) drawer rules above. Keep the closed rail out of the accessibility tree and pointer hit-testing on narrow screens too. */ .app-shell .app-sidebar { visibility: hidden; pointer-events: none; }
.app-shell .app-sidebar.mobile-open { visibility: visible; pointer-events: auto; }}
/* The app shell still reserves the compact navigation rail at medium widths. Three fixed minimum columns would therefore push the note pane outside the viewport as soon as Agent Companion is opened. Keep both base panes in the grid and let the optional agent surface sit above the note pane instead. */@media (min-width: 821px) and (max-width: 980px) { .workspace-panes.with-agent { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.workspace-panes.with-agent > .agent-panel { position: absolute; z-index: 30; inset: 0 0 0 auto; width: min(380px, 84%); border-left: 1px solid var(--line-strong); box-shadow: -14px 0 40px rgba(30, 40, 35, .14); }}
@media (max-width: 760px) { .page-title { align-items: flex-start; flex-direction: column; gap: 18px; } .page-title h1 { font-size: 42px; } .page-actions { width: 100%; overflow-x: auto; } .today-actions { grid-template-columns: 1fr; } .today-actions > button + button { border-left: 0; border-top: 1px solid var(--line); } .today-grid { grid-template-columns: 1fr; } .today-context { border-top: 1px solid var(--line); border-left: 0; } .today-context > section { padding-left: 0; } .recent-notes > button { grid-template-columns: 32px minmax(0, 1fr) 42px; } .recent-note-tags { display: none; }
.notes-layout, .problems-layout { width: 100%; min-width: 0; height: 100dvh; grid-template-columns: minmax(0, 1fr); overflow: hidden; } .notes-layout:not(.mobile-detail-open) .document-pane, .problems-layout:not(.mobile-detail-open) .problem-detail { display: none; } .notes-layout.mobile-detail-open .library-pane, .problems-layout.mobile-detail-open .library-pane { display: none; }
/* Problems is a mobile master list, not a squeezed desktop sidebar. Keep the list visually intentional when the detail pane is hidden: give the header and search field breathing room, and use cards that can carry a real problem title instead of truncating it to one line. */ .problems-layout:not(.mobile-detail-open) .problem-library { width: 100%; min-width: 0; height: 100%; background: var(--paper); } .problems-layout:not(.mobile-detail-open) .problem-library .pane-titlebar { min-height: 84px; padding: 18px 16px 14px; background: var(--paper); } .problems-layout:not(.mobile-detail-open) .problem-library .pane-titlebar h1 { font-size: 34px; line-height: 1.08; } .problems-layout:not(.mobile-detail-open) .problem-library .library-tools { padding: 12px 16px 10px; background: var(--paper); } .problems-layout:not(.mobile-detail-open) .problem-library .problem-list { min-width: 0; padding: 10px 14px 28px; background: var(--paper); } .problems-layout:not(.mobile-detail-open) .problem-library .problem-list > button { min-height: 76px; grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 10px; margin-bottom: 8px; padding: 12px 11px; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 10px; } .problems-layout:not(.mobile-detail-open) .problem-library .problem-list > button:hover, .problems-layout:not(.mobile-detail-open) .problem-library .problem-list > button.active { background: #f4f8f4; border-color: #b8cdbd; } .problems-layout:not(.mobile-detail-open) .problem-library .problem-list strong { display: -webkit-box; overflow: hidden; font-size: 15px; line-height: 1.3; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .problems-layout:not(.mobile-detail-open) .problem-library .problem-list small { overflow: hidden; margin-top: 5px; line-height: 1.3; white-space: normal; } .problems-layout:not(.mobile-detail-open) .problem-library .problem-list > button > svg { width: 16px; }
.mobile-back { min-height: 32px; display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 0; color: var(--green); background: transparent; font-size: 13px; font-weight: 600; } .mobile-back svg { width: 14px; } .save-indicator { margin-right: auto; } .document-commandbar { min-height: 52px; padding: 7px 9px; } .commandbar-actions > button:not(.primary-button):not(.secondary-button) span, .commandbar-actions > .secondary-button { display: none; } .commandbar-actions .primary-button { min-width: 34px; padding: 0 8px; } .commandbar-actions .primary-button:not(:last-of-type) span { display: none; } .notes-layout .commandbar-actions .primary-button { width: 38px; min-width: 38px; padding-inline: 0; justify-content: center; } .notes-layout .commandbar-actions .primary-button span { display: none; } .problems-layout .commandbar-actions > button[aria-label*="agent"] { width: 34px; min-width: 34px; display: inline-flex; justify-content: center; padding: 0; } .problems-layout .commandbar-actions > button[aria-label*="agent"] span { display: none; } .document-canvas, .problem-canvas { width: calc(100% - 32px); padding-top: 30px; } .document-title-input { font-size: 42px; } .document-properties { flex-wrap: wrap; } .document-properties time { width: 100%; margin-left: 0; } .document-inspector { width: 100%; }
.problem-detail { grid-template-columns: 1fr; } .problem-detail > .agent-panel { position: fixed; z-index: 28; inset: 100px 0 0 auto; width: min(360px, 94vw); display: none; } .problem-detail.agent-open > .agent-panel { display: flex; border-left: 1px solid var(--line-strong); box-shadow: -14px 0 40px rgba(30, 40, 35, .18); }
.shelf-workbench, .learning-workbench { grid-template-columns: 1fr; } .folder-rail, .learning-rail { display: flex; overflow-x: auto; padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--line); } .folder-rail header, .learning-rail > span { display: none; } .folder-rail > button { min-width: 150px; } .learning-rail > button { min-width: 190px; border-right: 1px solid var(--line); border-bottom: 0; } .course-workspace > header { flex-direction: column; gap: 14px; padding: 18px 16px; } .course-workspace > header .secondary-button { align-self: flex-start; } .course-workspace h2 { font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; } .resource-table article { grid-template-columns: 38px minmax(0, 1fr) 60px; } .resource-table time { display: none; } .course-body { grid-template-columns: 1fr; } .lesson-outline { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .lesson-outline > button { min-width: 200px; border-right: 1px solid var(--line); border-bottom: 0; } .lesson-editor { min-height: 620px; }
.settings-block { grid-template-columns: 1fr; gap: 18px; } .provider-fields { grid-template-columns: 1fr; } .boundary-flow { grid-template-columns: 1fr; } .boundary-flow > svg { transform: rotate(90deg); justify-self: center; }
.graph-page { height: auto; min-height: 100vh; display: block; padding-inline: 14px; } .graph-workspace { grid-template-columns: 1fr; min-height: 720px; } .graph-stage { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--line); } .graph-inspector { min-height: 260px; } .graph-legend { left: 8px; right: 8px; flex-wrap: wrap; }
.whiteboard-layout { grid-template-columns: 1fr; grid-template-rows: 66px minmax(0, 1fr); } .board-list-pane { height: 66px; display: grid; grid-template-columns: 180px minmax(0, 1fr); border-right: 0; border-bottom: 1px solid var(--line); } .board-list-pane .pane-titlebar { min-height: 66px; padding: 9px 12px; border-bottom: 0; border-right: 1px solid var(--line); } .board-list-pane .pane-titlebar h1 { font-size: 22px; } .board-list { display: flex; overflow-x: auto; padding: 5px; } .board-list > button { min-width: 170px; min-height: 54px; border-right: 1px solid var(--line); border-bottom: 0; } .board-main { height: calc(100vh - 114px); grid-template-rows: auto minmax(0, 1fr); } .board-commandbar { align-items: flex-start; flex-direction: column; } .board-actions { width: 100%; justify-content: flex-end; } .board-breadcrumb input { width: min(260px, 54vw); } .board-inspector { inset-top: 90px; width: 100%; }
.workspace-appbar { align-items: flex-start; } .workspace-appbar h1 { font-size: 14px; } .workspace-appbar { gap: 8px; padding-inline: 10px; } .workspace-appbar > div:first-child { min-width: 0; flex: 1; } .workspace-actions { flex: none; } .workspace-note-picker > summary, .workspace-actions > .secondary-button { width: 38px; min-width: 38px; padding-inline: 0; justify-content: center; } .workspace-actions .secondary-button span { display: none; } .workspace-panes, .workspace-panes.with-agent { display: block; overflow-y: auto; } .resource-pane, .workspace-note-pane { min-height: calc(100vh - 152px); border-right: 0; border-bottom: 1px solid var(--line); } .workspace-panes > .agent-panel { position: static; width: auto; min-height: 500px; box-shadow: none; }}
@media (max-width: 480px) { .standard-page { padding-inline: 14px; } .page-title h1 { font-size: 38px; } .today-actions > button { padding-inline: 10px; } .recent-notes > button { padding-inline: 0; } .commandbar-actions > button:not(.primary-button):not(.secondary-button) { display: none; } .problems-layout .commandbar-actions > button[aria-label*="agent"] { width: 34px; min-width: 34px; display: inline-flex; justify-content: center; padding: 0; } .problems-layout .commandbar-actions > button[aria-label*="agent"] span { display: none; } .problems-layout .commandbar-actions .primary-button { width: 34px; min-width: 34px; justify-content: center; padding: 0; } .problems-layout .commandbar-actions .primary-button span { display: none; } .document-commandbar .more-menu { display: block; } .notes-layout .commandbar-actions .primary-button { width: auto; min-width: 0; padding-inline: 10px; gap: 6px; } .notes-layout .commandbar-actions .primary-button span { display: inline; } .problems-layout .commandbar-actions .primary-button { width: auto; min-width: 62px; padding-inline: 10px; gap: 6px; } .problems-layout .commandbar-actions .primary-button span { display: inline; } .document-canvas { width: calc(100% - 24px); } .document-title-input { font-size: 38px; } .editor-toolbar { overflow-x: auto; flex-wrap: nowrap; } .tool-button { flex: none; } .resource-table article { grid-template-columns: 34px minmax(0, 1fr) 32px; } .row-actions a { display: none; } .section-toolbar { align-items: flex-start; flex-direction: column; } .section-toolbar .search-field { width: 100%; } .settings-actions { align-items: flex-start; flex-direction: column; } .settings-actions code { max-width: 100%; overflow-x: auto; margin-left: 0; }}
@media (max-width: 820px) { .app-content > .graph-page { height: 100dvh; min-height: 0; display: grid; grid-template-rows: 60px minmax(0, 1fr); padding-top: 0; } .app-content > .graph-page .graph-workspace, .app-content > .graph-page .graph-stage { min-height: 0; height: 100%; }}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }}
/* Some responsive browser/device emulators expose the device width through `device-width` while keeping a wider CSS layout viewport. In that case the ordinary max-width media queries do not run and the collapsed desktop rail steals the first 76px of the page. Keep the narrow shell contract explicit for those environments as well. This is intentionally limited to shell and master/detail geometry; it does not alter the approved desktop layouts. */@media (max-device-width: 760px) { html, body, #root { width: 100%; min-width: 0; }
.app-shell, .app-shell.sidebar-collapsed { width: 100vw; max-width: 100vw; min-width: 0; padding-left: 0 !important; }
.app-content { width: 100vw; max-width: 100vw; min-width: 0; }
.app-sidebar, .sidebar-collapsed .app-sidebar { width: var(--sidebar-width); transform: translateX(-100%); }
.app-sidebar.mobile-open { transform: translateX(0); }
.mobile-navigation-button { display: grid; }
.notes-layout, .problems-layout, .whiteboard-layout { width: 100vw; max-width: 100vw; min-width: 0; grid-template-columns: minmax(0, 1fr) !important; overflow: hidden; }
.notes-layout:not(.mobile-detail-open) .document-pane, .problems-layout:not(.mobile-detail-open) .problem-detail { display: none; }
.notes-layout.mobile-detail-open .library-pane, .problems-layout.mobile-detail-open .library-pane { display: none; }
.problems-layout:not(.mobile-detail-open) .problem-library { width: 100%; min-width: 0; }}