/* Writing-specific styles; the shared shell and existing workspaces stay intact. */
.writing-workspace { padding-block: var(--space-5) var(--space-7); }
.writing-workspace .write-heading { margin-bottom: var(--space-6); }
.writing-workspace .write-heading p { margin: 0 0 var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-caption); letter-spacing: 1px; }
.writing-workspace h1 { font: 500 28px/var(--line-height-heading) var(--font-family-display); margin: 0; }
.writing-workspace .write-layout { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: var(--space-7); align-items: start; }
.writing-workspace .write-library { position: sticky; top: var(--space-5); min-width: 0; border-right: 1px solid var(--color-border); padding-right: var(--space-5); }
.writing-workspace .write-library h2 { font-size: var(--font-size-h3); font-weight: 500; margin: 0 0 var(--space-5); }
.writing-workspace #write-library-count { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.writing-workspace #write-library-details > summary { display: none; }
.writing-workspace .write-new { width: 100%; margin-bottom: var(--space-3); }
.writing-workspace #write-list-status { color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: var(--line-height-body); }
.writing-workspace #write-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; max-height: 65vh; overflow-y: auto; scrollbar-gutter: stable; }
.writing-workspace .write-document { display: block; width: 100%; text-align: left; padding: var(--space-4) var(--space-3); border: 0; border-bottom: 1px solid var(--color-border); border-left: 2px solid transparent; background: transparent; color: var(--color-text-primary); }
.writing-workspace .write-document strong { display: block; font-size: var(--font-size-body-small); font-weight: 500; line-height: var(--line-height-body); overflow-wrap: anywhere; }
.writing-workspace .write-document span { display: block; margin-top: var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-secondary); line-height: var(--line-height-caption); }
.writing-workspace .write-document[aria-current="true"] { border-left-color: var(--color-brand); background: var(--color-brand-soft); }
.writing-workspace .write-document:hover:not(:disabled) { background: var(--color-bg-subtle); }
.writing-workspace .write-document:disabled { opacity: .65; cursor: wait; }
.writing-workspace .write-main { min-width: 0; width: 100%; max-width: var(--reading-max-width); }
.writing-workspace .write-welcome { padding: var(--space-8) 0; }
.writing-workspace .write-welcome h2 { font: 500 var(--font-size-h2)/var(--line-height-heading) var(--font-family-display); margin: 0 0 var(--space-4); }
.writing-workspace .write-welcome p { font-size: var(--font-size-body-small); line-height: var(--line-height-body); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.writing-workspace .write-field-label { display: block; font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.writing-workspace #write-title { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0 var(--space-4); margin-bottom: var(--space-5); border-radius: 0; background: transparent; color: var(--color-text-primary); font: 500 var(--font-size-h2)/var(--line-height-heading) var(--font-family-display); }
.writing-workspace #write-title::placeholder, .writing-workspace #write-body::placeholder { color: var(--color-text-muted); }
.writing-workspace #write-body { width: 100%; height: 62vh; min-height: 480px; margin: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-bg-surface); color: var(--color-text-primary); font: var(--font-size-body)/2.1 var(--font-family-body); letter-spacing: .3px; resize: vertical; white-space: pre-wrap; overflow-wrap: break-word; overflow-y: auto; scrollbar-gutter: stable; tab-size: 4; }
.writing-workspace :is(button,input,textarea,summary):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-1); }
.writing-workspace .write-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.writing-workspace #write-save-status { margin: 0; }
.writing-workspace #write-save-status[data-state="saved"] { color: var(--color-success); }
.writing-workspace #write-save-status[data-state="failed"] { color: var(--color-danger); }
.writing-workspace #write-save-status[data-state="waiting"], .writing-workspace #write-save-status[data-state="saving"] { color: var(--color-warning); }
.writing-workspace #write-saved-time { margin-left: auto; }
.writing-workspace .write-count-rule { margin-top: var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: var(--line-height-caption); }
.writing-workspace .write-error { border-left: 2px solid var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); padding: var(--space-3) var(--space-4); line-height: var(--line-height-body); font-size: var(--font-size-body-small); }
.writing-workspace .write-tab-warning { color: var(--color-warning); font-size: var(--font-size-body-small); line-height: var(--line-height-body); }
@media(max-width:1100px) {
  .writing-workspace .write-layout { grid-template-columns: 216px minmax(0,1fr); gap: var(--space-5); }
}
@media(max-width:650px) {
  .writing-workspace .write-heading { margin-bottom: var(--space-5); }
  .writing-workspace .write-layout { grid-template-columns: minmax(0,1fr); }
  .writing-workspace .write-library { position: static; padding: 0 0 var(--space-4); border-right: 0; border-bottom: 1px solid var(--color-border); }
  .writing-workspace .write-library h2 { margin-bottom: var(--space-2); }
  .writing-workspace #write-library-details > summary { display: list-item; color: var(--color-brand); font-size: var(--font-size-body-small); cursor: pointer; padding-block: var(--space-2); }
  .writing-workspace #write-list { max-height: 35vh; }
  .writing-workspace .write-welcome { padding: var(--space-5) 0; }
  .writing-workspace #write-body { height: 60vh; min-height: 400px; }
  .writing-workspace #write-saved-time { flex-basis: 100%; margin-left: 0; }
}