/* Writing uses the same workspace surfaces, primary action and card spacing as Projects and History. */
#workspace [data-app-view="writing"] {
  container: writing-room / inline-size;
  --wc-accent: #a7b7ff;
  --wc-green: #84d8bc;
  --wc-amber: #efbe8d;
  --wc-button: #bfcbff;
  --wc-button-ink: #182347;
  --wc-hero: linear-gradient(110deg,#192638,#192337 52%,#282744);
}
body[data-theme="light"] #workspace [data-app-view="writing"] {
  --wc-accent: #445eae;
  --wc-green: #267458;
  --wc-amber: #885515;
  --wc-button: #455eaa;
  --wc-button-ink: #fff;
  --wc-hero: linear-gradient(110deg,#edf3fd,#eaf0fc 52%,#ebe8fa);
}
#workspace [data-app-view="writing"]:has(.kw-documents) { max-width: 1360px; margin-inline: auto; }
#workspace [data-app-view="writing"]:has(.kw-writing-head) > .page-head { display: none; }
#kw-writing {
  --panel: var(--card);
  --panel2: var(--flow-surface-2,var(--card));
  --text: var(--ink);
  --kw-surface: var(--card);
  --kw-border: var(--line);
}
#kw-writing .kw-writing-head {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 0 0 20px; padding: 23px clamp(18px,2vw,32px); min-height: 112px;
  border: 1px solid color-mix(in srgb,var(--wc-accent) 22%,var(--line)); border-radius: 16px;
  background: var(--wc-hero); color: var(--ink);
}
#kw-writing .kw-heading-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
#kw-writing .kw-heading-main h1 { margin: 0; font-size: clamp(26px,2.15vw,34px); font-weight: 700; line-height: 1.3; letter-spacing: -.035em; }
#kw-writing .kw-heading-mark, #kw-writing .kw-doc-icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid color-mix(in srgb,var(--wc-accent) 22%,transparent);
  background: color-mix(in srgb,var(--wc-accent) 11%,var(--card)); color: var(--wc-accent);
}
#kw-writing .kw-heading-mark { width: 46px; height: 46px; border-radius: 13px; }
#workspace #kw-writing .kw-heading-mark svg { width: 25px; height: 25px; }
#kw-writing .kw-head-stats { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 7px 0 0; }
#kw-writing .kw-head-stats > div { display: inline-flex; align-items: baseline; gap: 6px; }
#kw-writing .kw-head-stats > div + div { border-inline-start: 1px solid color-mix(in srgb,var(--wc-accent) 32%,transparent); padding-inline-start: 12px; }
#kw-writing .kw-head-stats dt { color: var(--muted); font-size: 13px; }
#kw-writing .kw-head-stats dd { margin: 0; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
#kw-writing .kw-writing-head .kw-heading-actions {
  display: flex; flex: none; align-items: center; gap: 7px;
  margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent;
}
#kw-writing .kw-writing-head :is(.kw-primary,.kw-head-back,.kw-doc-menu > summary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
  color: var(--ink); background: var(--card); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
#kw-writing .kw-writing-head button.kw-primary { background: var(--wc-button); color: var(--wc-button-ink); border-color: transparent; }
#kw-writing .kw-writing-head button.kw-primary:hover { background: color-mix(in srgb,var(--wc-button) 91%,var(--wc-button-ink)); }
#workspace #kw-writing .kw-heading-actions svg { width: 17px; height: 17px; }
#kw-writing .kw-writing-head :is(button,summary):focus-visible, #kw-writing .kw-documents :is(button,input,select):focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; }

#kw-writing .kw-list-filters {
  display: grid; align-items: center; grid-template-columns: minmax(max-content,1fr) minmax(155px,268px) max-content;
  gap: 10px; margin: 0 0 15px;
}
#kw-writing .kw-list-filters h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; line-height: 1.45; }
#kw-doc-count {
  display: inline-grid; place-items: center; min-width: 23px; height: 22px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--muted);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
#kw-writing :is(.kw-list-search,.kw-list-filter) { position: relative; display: flex; align-items: center; min-width: 0; margin: 0; color: var(--muted); }
#kw-writing :is(#kw-doc-search,#kw-doc-status) {
  width: 100%; min-width: 0; height: 40px; margin: 0; padding: 0 12px 0 36px;
  border: 1px solid var(--line); border-radius: 9px; box-shadow: none; background: var(--card); color: var(--ink); font: inherit; font-size: 13px;
}
#kw-writing #kw-doc-search::placeholder { color: var(--muted); opacity: 1; }
#kw-writing #kw-doc-status { appearance: none; padding: 0 34px 0 12px; cursor: pointer; }
#workspace #kw-writing :is(.kw-list-search,.kw-list-filter) svg { position: absolute; width: 16px; height: 16px; pointer-events: none; }
#kw-writing .kw-list-search svg { inset-inline-start: 12px; }
#kw-writing .kw-list-filter svg { inset-inline-end: 11px; }
#kw-writing .kw-doc-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
@container writing-room (min-width: 590px) { #kw-writing .kw-doc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@container writing-room (min-width: 900px) { #kw-writing .kw-doc-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@container writing-room (min-width: 1210px) { #kw-writing .kw-doc-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
#kw-writing .kw-doc-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 19px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
#kw-writing .kw-doc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#workspace #kw-writing .kw-doc-icon svg { width: 19px; height: 19px; }
#kw-writing .kw-doc-badge, #kw-writing .kw-doc-review {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb,currentColor 11%,var(--card)); color: var(--wc-accent); font-size: 12px; line-height: 1.45; font-weight: 600;
}
#kw-writing .kw-doc-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#kw-writing .kw-doc-badge[data-status="final"] { color: var(--wc-green); }
#kw-writing .kw-doc-badge[data-status="archived"] { color: var(--muted); }
#kw-writing .kw-doc-review { color: var(--wc-amber); }
#kw-writing .kw-doc-version { margin-inline-start: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#kw-writing .kw-doc-card h3 { margin: 12px 0 0; font-size: 18px; line-height: 1.45; }
#kw-writing .kw-card-open {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 0; border: 0;
  background: transparent; color: var(--ink); text-align: start; font: inherit; font-weight: 650; cursor: pointer;
}
#kw-writing .kw-card-open::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
#kw-writing .kw-card-open span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
#workspace #kw-writing .kw-card-open svg { align-self: flex-start; width: 17px; height: 17px; margin-top: .28em; color: var(--wc-accent); }
#kw-writing .kw-doc-type { flex: 1; margin: 5px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#kw-writing .kw-doc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }
#kw-writing .kw-doc-meta > * { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
#kw-writing .kw-doc-meta time { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
#kw-writing .kw-doc-project span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#workspace #kw-writing .kw-doc-meta svg { width: 14px; height: 14px; }
#workspace #kw-writing .kw-card-open:focus-visible { outline: none; }
#kw-writing .kw-doc-card:focus-within { outline: 2px solid var(--wc-accent); outline-offset: 2px; }
@media (hover:hover) { #kw-writing .kw-doc-card:hover { border-color: color-mix(in srgb,var(--wc-accent) 55%,var(--line)); background: color-mix(in srgb,var(--wc-accent) 4%,var(--card)); } }
#kw-writing .kw-doc-empty {
  grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 9px; min-height: 175px; padding: 24px;
  border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center;
}
#kw-writing .kw-doc-empty h3 { margin: 0; color: var(--ink); font-size: 16px; }
#kw-writing .kw-doc-empty p, #kw-writing .kw-list-notice { margin: 0; color: var(--muted); font-size: 14px; }
#workspace #kw-writing .kw-doc-empty > svg { width: 28px; height: 28px; color: var(--wc-accent); }
#kw-writing .kw-doc-empty button, #kw-writing .kw-doc-more {
  display: block; min-height: 40px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--wc-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
#kw-writing .kw-doc-more { margin: 16px auto 0; }
@container writing-room (max-width: 600px) {
  #kw-writing .kw-writing-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px 9px; min-height: 0; padding: 16px; margin-bottom: 15px; }
  #kw-writing .kw-heading-main, #kw-writing .kw-heading-main > div { display: contents; }
  #kw-writing .kw-heading-mark { grid-area: 1 / 1; width: 32px; height: 32px; border-radius: 9px; }
  #workspace #kw-writing .kw-heading-mark svg { width: 19px; height: 19px; }
  #kw-writing .kw-heading-main h1 { grid-area: 1 / 2; font-size: 24px; overflow-wrap: anywhere; }
  #kw-writing .kw-head-stats, #kw-writing .kw-heading-main .kw-save-state { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  #kw-writing .kw-heading-actions { grid-area: 1 / 3; }
  #kw-writing .kw-writing-head :is(.kw-primary,.kw-head-back,.kw-doc-menu > summary) { min-height: 44px; padding: 0 10px; font-size: 13px; }
  #kw-writing .kw-doc-grid { gap: 12px; }
  #kw-writing .kw-doc-card { padding: 15px 16px 12px; }
  #kw-writing .kw-list-filters { grid-template-columns: minmax(0,1fr) max-content; }
  #kw-writing .kw-list-filters h2 { grid-column: 1 / -1; }
  #kw-writing :is(#kw-doc-search,#kw-doc-status) { height: 44px; }
  #kw-writing #kw-doc-search { font-size: 16px; }
}