#kw-writing .kw-editor-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:10px 0;margin-top:4px;border-top:1px solid var(--line,#293747);border-bottom:1px solid var(--line,#293747)}
#kw-writing .kw-tool,#kw-writing .kw-tool-heading{height:32px;min-width:32px;box-sizing:border-box;padding:4px 8px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text,#edf3fb);font-family:inherit;font-size:13px;cursor:pointer}
#kw-writing .kw-tool:hover,#kw-writing .kw-tool-heading:hover{background:rgba(56,183,212,.1);border-color:var(--line,#293747)}
#kw-writing .kw-tool:disabled{opacity:.3;cursor:default}
#kw-writing .kw-tool[data-tool=bold]{font-weight:800}
#kw-writing .kw-tool[data-tool=italic]{font-style:italic}
#kw-writing .kw-tool[data-tool=citation]{color:#39bdd9;margin-left:auto}
#kw-writing .kw-tool-heading{max-width:120px;border-color:var(--line,#293747);background:var(--panel,#101923)}
#kw-writing .kw-editor-tools+.kw-editor{border-top:0}
.kw-citation-dialog{padding:24px;border:1px solid var(--line,#293747);border-radius:16px}
.kw-citation-choice{display:block;width:100%;padding:12px;margin:8px 0;border:1px solid var(--line,#293747);border-radius:9px;text-align:left;background:transparent;color:var(--text,#edf3fb);font:inherit;cursor:pointer;overflow-wrap:anywhere}
.kw-citation-choice:hover{border-color:#39bdd9;background:rgba(56,183,212,.08)}
@media(max-width:600px){#kw-writing .kw-tool[data-tool=citation]{margin-left:0}}
#kw-writing .kw-grid{align-items:stretch}
#kw-writing .kw-main{display:flex;flex-direction:column;align-self:stretch}
#kw-writing .kw-main>.kw-editor{flex:1 1 auto;height:auto;min-height:440px;max-height:none;resize:vertical}
#kw-writing .kw-main>:not(.kw-editor){flex-shrink:0}
#kw-writing .kw-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
#kw-writing .kw-panel-head h3{border:0;padding:0;margin:0;min-width:0}
#kw-writing .kw-panel-toggle{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--line,#293747);border-radius:7px;background:transparent;color:var(--text,#edf3fb);font:18px/1 system-ui;cursor:pointer}
#kw-writing .kw-panel-toggle:hover{border-color:#39bdd9;background:rgba(56,183,212,.1)}
#kw-writing .kw-panel-toggle:focus-visible{outline:2px solid #39bdd9;outline-offset:3px}
#kw-writing .kw-panel-body[hidden]{display:none}
#kw-writing .kw-grid aside{align-self:start}
#kw-writing .kw-panel-collapsed .kw-panel-head{margin-bottom:0}
@media(min-width:1251px){
 #kw-writing .kw-grid{grid-template-columns:var(--kw-context-width,minmax(180px,.85fr)) minmax(0,2.8fr) var(--kw-assistant-width,minmax(300px,1.25fr))}
 #kw-writing .kw-grid.kw-context-collapsed{--kw-context-width:48px}
 #kw-writing .kw-grid.kw-assistant-collapsed{--kw-assistant-width:48px}
 #kw-writing .kw-grid aside.kw-panel-collapsed{padding:10px 8px;box-sizing:border-box}
 #kw-writing .kw-panel-collapsed .kw-panel-head{flex-direction:column-reverse;gap:12px}
 #kw-writing .kw-panel-collapsed h3{writing-mode:vertical-rl;font-size:13px;letter-spacing:2px;white-space:nowrap;padding-bottom:4px}
}
@media(min-width:801px) and (max-width:1250px){
 #kw-writing .kw-grid.kw-assistant-collapsed{grid-template-columns:minmax(0,1fr) 48px}
 #kw-writing .kw-assistant.kw-panel-collapsed{padding:10px 8px}
 #kw-writing .kw-assistant.kw-panel-collapsed .kw-panel-head{flex-direction:column-reverse}
 #kw-writing .kw-assistant.kw-panel-collapsed h3{writing-mode:vertical-rl;font-size:13px;letter-spacing:2px;white-space:nowrap}
}
@media(max-width:800px){#kw-writing .kw-main>.kw-editor{min-height:340px}}
#kw-writing .kw-proposal-head{flex-wrap:wrap}
#kw-writing .kw-proposal-head strong{flex:1 0 100%}
#kw-writing .kw-proposal-expand{flex:1}
.kw-proposal-fullscreen{position:fixed;inset:0;margin:0;box-sizing:border-box;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;background:var(--panel,#101923);color:var(--text,#edf3fb);overflow:hidden}
.kw-proposal-fullscreen[open]{display:flex;flex-direction:column}
.kw-proposal-fullscreen::backdrop{background:#080d14ed}
.kw-fullscreen-header{flex-shrink:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px;padding:20px 32px;border-bottom:1px solid var(--line,#293747)}
.kw-fullscreen-header h2{margin:0;font:600 20px/1.5 system-ui}
.kw-fullscreen-header p{grid-column:1;margin:0;color:var(--muted,#a4b0c0);font-size:13px;line-height:1.6}
.kw-fullscreen-actions{grid-column:2;grid-row:1/3;display:flex;gap:10px}
.kw-fullscreen-editor{display:block;flex:1;min-height:0;width:min(1100px,100%);align-self:center;box-sizing:border-box;padding:32px 48px;resize:none;border:0;border-radius:0;outline:none;background:transparent;color:inherit;font:16px/1.95 system-ui,sans-serif;overflow:auto}
.kw-fullscreen-editor:focus-visible{box-shadow:inset 0 0 0 2px #39bdd955}
@media(max-width:700px){.kw-fullscreen-header{padding:14px 16px;display:flex;flex-direction:column;align-items:stretch;gap:10px}.kw-fullscreen-actions{flex-wrap:wrap}.kw-fullscreen-editor{padding:20px 16px;font-size:15px}}
#kw-writing .kw-tool.kw-body-expand{border-color:var(--line,#293747);color:#39bdd9;white-space:nowrap;margin-left:6px}
#kw-writing .kw-body-fullscreen{position:fixed;inset:0;margin:0;padding:0;width:100vw;max-width:none;height:100dvh;max-height:none;box-sizing:border-box;border:0;border-radius:0;overflow:hidden;background:var(--bg,#080d14);color:var(--text,#edf3fb)}
#kw-writing .kw-body-fullscreen[open]{display:flex;flex-direction:column}
.kw-body-fullscreen::backdrop{background:#080d14f5}
.kw-body-fullscreen-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 28px;border-bottom:1px solid var(--line,#293747);background:var(--panel,#101923);flex-shrink:0}
.kw-body-fullscreen-head>div:first-child{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.kw-body-fullscreen-head strong{font-size:16px}
.kw-body-fullscreen-state{font-size:12px;color:var(--muted,#a4b0c0)}
.kw-body-fullscreen-actions{display:flex;gap:10px;flex-shrink:0}
#kw-writing .kw-body-fullscreen>.kw-main{display:flex;flex-direction:column;flex:1;align-self:center;width:min(1120px,calc(100% - 64px));min-height:0;margin:22px auto;padding:24px 42px;border:1px solid var(--line,#293747);border-radius:14px;background:var(--panel,#101923);box-shadow:0 16px 50px #0002}
#kw-writing .kw-body-fullscreen .kw-fields,#kw-writing .kw-body-fullscreen .kw-body-expand{display:none}
#kw-writing .kw-body-fullscreen .kw-title-input{font-size:26px;margin-bottom:12px}
#kw-writing .kw-body-fullscreen .kw-editor-tools{flex-shrink:0}
#kw-writing .kw-body-fullscreen .kw-main>.kw-editor{flex:1;height:0;min-height:0;max-height:none;resize:none;font-size:16px;line-height:2;padding:22px 8px;overflow:auto;border:0}
@media(max-width:700px){.kw-body-fullscreen-head{padding:12px 16px;align-items:flex-start;flex-direction:column;gap:10px}.kw-body-fullscreen-actions{flex-wrap:wrap}#kw-writing .kw-body-fullscreen>.kw-main{width:100%;margin:0;border:0;border-radius:0;padding:16px}#kw-writing .kw-body-fullscreen .kw-title-input{font-size:21px}#kw-writing .kw-body-fullscreen .kw-main>.kw-editor{padding:16px 0;font-size:15px}}
#kw-writing .kw-body-fullscreen .kw-editor:focus-visible{outline:none;box-shadow:inset 2px 0 0 #39bdd955}

/* Keep native heading options readable in the dark workspace. */
#kw-writing .kw-tool-heading{color-scheme:dark;background-color:var(--panel,#101923);color:var(--text,#edf3fb)}
#kw-writing .kw-tool-heading option{background-color:var(--panel,#101923);color:var(--text,#edf3fb)}
html[data-theme=light] #kw-writing .kw-tool-heading,body[data-theme=light] #kw-writing .kw-tool-heading{color-scheme:light}
/* The document canvas fills the viewport below the persistent action header. */
#kw-writing .kw-body-fullscreen>main.kw-main{box-sizing:border-box;align-self:stretch;flex:1 1 0;width:100%;max-width:none;min-height:0;margin:0;padding:20px clamp(16px,2.5vw,48px);border:0;border-radius:0;box-shadow:none}
#kw-writing .kw-body-fullscreen .kw-main>.kw-editor{width:100%;box-sizing:border-box;padding-left:0;padding-right:0}
@media(max-width:700px){#kw-writing .kw-body-fullscreen>main.kw-main{padding:16px}}

/* The document canvas and its companion panels follow the available workspace width. */
#kw-writing .kw-writing-head .kw-save-state {
  display: flex; align-items: center; gap: 6px; margin: 7px 0 0; width: auto;
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
#kw-writing .kw-save-state::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--wc-amber); }
#kw-writing .kw-save-state[data-state="saved"]::before { background: var(--wc-green); }
#kw-writing .kw-save-state[data-state="saving"]::before { background: var(--wc-accent); }
#kw-writing .kw-doc-menu { position: relative; margin: 0; }
#kw-writing .kw-writing-head .kw-doc-menu > summary { list-style: none; min-width: 42px; padding: 0; }
#kw-writing :is(.kw-doc-menu,.kw-doc-settings) > summary::-webkit-details-marker { display: none; }
#kw-writing .kw-doc-menu > div {
  position: absolute; z-index: 6; inset-inline-end: 0; top: calc(100% + 6px);
  display: grid; gap: 2px; width: max-content; min-width: 155px; max-width: 82vw; padding: 5px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card); box-shadow: 0 10px 25px #0002;
}
#kw-writing .kw-doc-menu:not([open]) > div { display: none; }
#kw-writing .kw-doc-menu > div button { text-align: start; justify-content: flex-start; min-height: 39px; padding: 6px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); box-shadow: none; }
#kw-writing .kw-doc-menu > div button:hover { color: var(--wc-accent); background: var(--flow-hover); }
#workspace #kw-writing .kw-grid {
  display: grid; align-items: start; gap: 16px;
  grid-template-areas: "sheet" "sources" "assistant"; grid-template-columns: minmax(0,1fr);
}
#workspace #kw-writing .kw-grid > .kw-main { grid-area: sheet; align-self: stretch; }
#workspace #kw-writing .kw-grid > .kw-context { grid-area: sources; }
#workspace #kw-writing .kw-grid > .kw-assistant { grid-area: assistant; }
#workspace #kw-writing .kw-grid > :is(.kw-main,aside) {
  min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
#kw-writing .kw-grid .kw-panel-head { margin-bottom: 10px; }
#kw-writing .kw-grid .kw-panel-toggle { width: 34px; height: 34px; flex-basis: 34px; border-radius: 8px; color: var(--muted); }
#kw-writing .kw-grid .kw-panel-toggle:hover { color: var(--wc-accent); border-color: var(--wc-accent); background: var(--panel2); }
#kw-writing .kw-grid h3 { color: var(--ink); }
#kw-writing .kw-grid .kw-title-input { padding: 0 0 12px; min-height: 42px; font-size: clamp(20px,1.6vw,26px); color: var(--ink); }
#kw-writing .kw-sheet-title { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
#kw-writing .kw-sheet-title > .kw-title-input { flex: 1; min-width: 0; margin: 0; padding: 2px 0; border: 0; }
#kw-writing .kw-sheet-title .kw-body-expand { display: flex; align-items: center; justify-content: center; flex: none; gap: 5px; min-height: 35px; margin: 0; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--wc-accent); background: var(--panel2); }
#workspace #kw-writing .kw-sheet-title .kw-body-expand svg { width: 16px; height: 16px; }
#kw-writing .kw-body-fullscreen .kw-sheet-title .kw-body-expand { display: none; }
#kw-writing .kw-grid :is(.kw-assist-actions,.kw-proposal-head) .btn.outline { color: var(--ink); border: 1px solid var(--line); background: var(--card); box-shadow: none; }
#kw-writing .kw-doc-settings { margin: 0; }
#kw-writing .kw-doc-settings > summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 0; list-style: none; color: var(--muted); font-size: 13px; cursor: pointer; }
#kw-writing .kw-doc-settings strong { flex: none; color: var(--ink); font-weight: 600; }
#kw-settings-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#workspace #kw-writing .kw-doc-settings > summary svg { width: 15px; height: 15px; margin-inline-start: auto; }
#kw-writing .kw-doc-settings[open] > summary svg { transform: rotate(180deg); }
#kw-writing .kw-doc-settings .kw-fields { margin: 4px 0 14px; }
#kw-writing .kw-fields select, #kw-writing .kw-tool-heading, #kw-writing .kw-tool-heading option { background: var(--panel2); color: var(--ink); }
#kw-writing .kw-editor-tools { gap: 3px; margin: 0; padding: 7px 0; border-color: var(--line); }
#kw-writing .kw-editor-tools :is(.kw-body-expand,[data-tool="citation"]) { color: var(--wc-accent); }
#kw-writing .kw-grid .kw-main > .kw-editor { min-height: clamp(330px,50vh,650px); padding: 16px 0 0; border: 0; color: var(--ink); font-size: 16px; line-height: 1.9; }
#workspace #kw-writing .kw-grid :is([data-action="generate"],[data-kw="apply"]) { color: var(--wc-accent); border: 1px solid color-mix(in srgb,var(--wc-accent) 28%,var(--line)); background: color-mix(in srgb,var(--wc-accent) 10%,var(--card)); box-shadow: none; }
#kw-writing .kw-grid .kw-assist-state { color: var(--wc-accent); background: color-mix(in srgb,var(--wc-accent) 9%,var(--card)); }
#kw-writing .kw-grid .kw-requirements, #kw-writing .kw-grid .kw-proposal { color: var(--ink); }
#kw-writing .kw-grid .kw-proposal { min-height: 165px; height: 200px; }
#kw-writing .kw-body-fullscreen .kw-doc-settings { display: none; }
#kw-writing .kw-body-fullscreen .kw-body-fullscreen-actions .btn.gradient { color: var(--wc-button-ink); background: var(--wc-button); }
#kw-writing :is(.kw-grid,.kw-body-fullscreen) :is(input,select,summary,textarea,button):focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; }

@container writing-room (min-width: 720px) {
  #workspace #kw-writing .kw-grid {
    grid-template-columns: minmax(0,1fr) minmax(248px,30%); grid-template-areas: "sheet sources" "sheet assistant"; grid-template-rows: auto 1fr;
  }
}
@container writing-room (max-width: 1069px) {
  #workspace #kw-writing .kw-grid .kw-panel-collapsed .kw-panel-head { flex-direction: row; margin: 0; }
  #workspace #kw-writing .kw-grid .kw-panel-collapsed h3 { writing-mode: horizontal-tb; letter-spacing: normal; white-space: normal; padding: 0; font-size: 15px; }
}
@container writing-room (min-width: 1070px) {
  #workspace #kw-writing .kw-grid {
    grid-template-columns: var(--wc-sources,minmax(165px,.76fr)) minmax(0,2.65fr) var(--wc-assistant,minmax(250px,1.08fr));
    grid-template-areas: "sources sheet assistant"; grid-template-rows: auto;
  }
  #workspace #kw-writing .kw-grid.kw-context-collapsed { --wc-sources: 54px; }
  #workspace #kw-writing .kw-grid.kw-assistant-collapsed { --wc-assistant: 54px; }
  #workspace #kw-writing .kw-grid > aside.kw-panel-collapsed { padding: 10px 6px; }
  #workspace #kw-writing .kw-grid .kw-panel-collapsed .kw-panel-head { flex-direction: column-reverse; margin: 0; gap: 11px; }
  #workspace #kw-writing .kw-grid .kw-panel-collapsed h3 { writing-mode: vertical-rl; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
}
@container writing-room (max-width: 600px) {
  #workspace #kw-writing .kw-grid { gap: 12px; }
  #workspace #kw-writing .kw-grid > :is(.kw-main,aside) { padding: 14px; }
  #kw-writing .kw-fields select, #kw-writing .kw-grid .kw-requirements, #kw-writing .kw-grid .kw-proposal { font-size: 16px; }
  #kw-writing .kw-grid .kw-panel-toggle { width: 42px; height: 42px; flex-basis: 42px; }
  #kw-writing .kw-editor-tools .kw-tool, #kw-writing .kw-editor-tools .kw-tool-heading { min-height: 36px; }
  #kw-writing .kw-body-fullscreen .kw-editor-tools .kw-tool { min-height: 36px; }
  #kw-writing .kw-writing-head .kw-head-back span { display: none; }
  #kw-writing .kw-sheet-title .kw-body-expand span { display: none; }
  #kw-writing .kw-sheet-title .kw-body-expand { min-width: 38px; min-height: 40px; padding: 0; }
  #kw-writing .kw-writing-head .kw-head-back, #kw-writing .kw-writing-head .kw-doc-menu > summary { min-width: 38px; padding: 0; }
  #kw-writing .kw-writing-head .kw-actions { gap: 4px; }
}
@container writing-room (max-width: 400px) {
  #kw-writing .kw-writing-head:has(.kw-actions) { grid-template-columns: minmax(0,1fr) auto; }
  #kw-writing .kw-writing-head:has(.kw-actions) .kw-heading-mark { display: none; }
  #kw-writing .kw-writing-head:has(.kw-actions) h1 { grid-area: 1 / 1; font-size: 22px; }
  #kw-writing .kw-writing-head .kw-heading-actions.kw-actions { grid-area: 1 / 2; }
}

/* Writing dialogs also work outside the workspace element, in the browser's top layer. */
body.workspace-flow-active :is(.kw-write-dialog,.kw-proposal-fullscreen,.kw-citation-dialog,.kw-dialog:has([data-versions])) {
  --panel: var(--flow-surface); --panel2: var(--flow-surface-2); --line: var(--flow-line); --text: var(--flow-text); --muted: var(--flow-muted);
  background: var(--panel); color: var(--text);
}
body.workspace-flow-active :is(.kw-write-dialog,.kw-citation-dialog,.kw-dialog:has([data-versions])) { margin: auto; padding: 22px; width: min(620px,calc(100vw - 28px)); max-height: min(90dvh,820px); box-sizing: border-box; overflow: auto; border: 1px solid var(--line); border-radius: 16px; }
.kw-write-dialog::backdrop { background: #050b16a8; }
.kw-write-dialog form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 13px; }
.kw-write-dialog form > :is(h2,.field:first-of-type,details,p,.kw-toolbar) { grid-column: 1 / -1; }
.kw-write-dialog h2 { margin: 0 0 3px; color: var(--text); font-size: 22px; line-height: 1.4; }
.kw-write-dialog form > .field { display: grid; gap: 6px; min-width: 0; margin: 0; color: var(--muted); font-size: 13px; }
.kw-write-dialog .field :is(input,select) { width: 100%; min-width: 0; min-height: 42px; margin: 0; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font: inherit; }
.kw-write-dialog form > details { font-size: 13px; }
.kw-write-dialog form > details summary { cursor: pointer; padding: 5px 0; }
.kw-write-dialog .kw-error { margin: 0; }
.kw-write-dialog .kw-error:empty { display: none; }
.kw-write-dialog .kw-toolbar { justify-content: flex-end; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.kw-write-dialog .kw-toolbar button { min-height: 42px; border-radius: 9px; }
.kw-write-dialog .btn.gradient { background: #bfcbff; color: #182347; border: 1px solid transparent; box-shadow: none; }
body[data-theme="light"] .kw-write-dialog .btn.gradient { background: #455eaa; color: #fff; }
@media (max-width: 550px) {
  .kw-write-dialog form { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .kw-write-dialog .field :is(input,select) { font-size: 16px; }
}