/* A responsive project board: writing surface and concurrently opened modules. */
#workspace {
    --pw-dock-reserve: 0px;
    min-width: 0;
    padding-bottom: 116px;
    transition: none;
}
#workspace.pw-docked {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-content: start;
    align-items: start;
}
#workspace > *,
#workspace .workspace-grid,
#workspace .wsm-content { min-width: 0; }
#workspace .pw-kicker { color: #a3a9b5; }
#workspace .pw-editor-status { color: #929aa8; }
#workspace.pw-docked .pw-editor-card,
#workspace.pw-docked #wsm-panel-notes.pw-editor-card {
    min-height: 0;
    gap: 16px;
    padding: 20px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px;
    background: #101216 !important;
}
#workspace.pw-docked .pw-editor-card #ws-notes,
#workspace.pw-docked #wsm-panel-notes.pw-editor-card #wsm-notes {
    flex: 0 0 auto !important;
    height: clamp(240px, 36svh, 360px);
    min-height: 240px !important;
    resize: vertical;
}
#workspace .pw-editor-card #ws-notes,
#workspace #wsm-panel-notes.pw-editor-card #wsm-notes,
#workspace .pw-editor-card #ws-notes:focus,
#workspace #wsm-panel-notes.pw-editor-card #wsm-notes:focus,
#workspace .pw-editor-card textarea:focus-visible {
    --pw-writing-line: 31.2px;
    box-sizing: border-box;
    padding: 10px 14px 24px;
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .008);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--pw-writing-line) - 1px),
        rgba(255, 255, 255, .075) calc(var(--pw-writing-line) - 1px),
        rgba(255, 255, 255, .075) var(--pw-writing-line)
    );
    background-origin: content-box;
    background-clip: padding-box;
    background-attachment: local;
    background-position: 0 0;
    box-shadow: none;
    outline: none;
    transition: border-color 200ms ease, background-color 200ms ease, color 180ms ease;
}
#workspace .pw-editor-card #ws-notes:hover,
#workspace #wsm-panel-notes.pw-editor-card #wsm-notes:hover {
    border-color: rgba(255, 255, 255, .075);
}
#workspace .pw-editor-card #ws-notes:focus,
#workspace #wsm-panel-notes.pw-editor-card #wsm-notes:focus,
#workspace .pw-editor-card textarea:focus-visible {
    border-color: rgba(190, 200, 218, .15);
    background-color: rgba(255, 255, 255, .012);
}

/* The dock participates in page layout; it never covers the writing surface. */
#pw-module-dock {
    position: static;
    inset: auto;
    z-index: auto;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
    transition: none;
}
#pw-module-dock.is-open {
    display: flex;
    transition: none;
}
#pw-module-dock .pw-dock-top { min-height: 36px; margin: 0 0 12px; color: #a3acba; }
#pw-module-dock .pw-dock-count { margin-left: auto; margin-right: 10px; color: #8d97a6; letter-spacing: 0; text-transform: none; }
#pw-module-dock .pw-dock-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-content: start;
    align-items: stretch;
    gap: 16px;
    padding-right: 0;
    overflow: visible;
}
#pw-module-dock .pw-dock-item,
#pw-module-dock .pw-dock-item.is-active,
#pw-module-dock .pw-dock-item.is-collapsed {
    order: 0;
    grid-column: auto;
    align-self: stretch;
    height: auto;
    min-height: 190px;
    max-height: 480px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 16px;
    background: #101216;
    overflow: hidden;
    animation: pw-multi-card-in 240ms var(--pw-ease) both;
}
#pw-module-dock .pw-dock-item:focus-within,
#pw-module-dock .pw-dock-item.is-active {
    border-color: rgba(190, 200, 218, .24);
}
#pw-module-dock .pw-dock-header,
#pw-module-dock .pw-dock-item.is-collapsed .pw-dock-header {
    flex: 0 0 52px;
    height: 52px;
    min-height: 52px;
}
#pw-module-dock .pw-dock-toggle,
#pw-module-dock .pw-dock-item.is-collapsed .pw-dock-toggle {
    gap: 9px;
    height: 52px;
    min-height: 52px;
    padding: 0 10px 0 16px;
    color: #d4d9e3;
    cursor: default;
}
#pw-module-dock .pw-dock-icon,
#pw-module-dock .is-active .pw-dock-icon,
#pw-module-dock .pw-dock-item.is-collapsed .pw-dock-icon {
    flex: 0 0 16px;
    width: 16px;
    font-size: 12px;
    color: #929bab;
}
#pw-module-dock .pw-dock-label,
#pw-module-dock .pw-dock-item.is-collapsed .pw-dock-label {
    font-size: 12px;
}
#pw-module-dock .pw-dock-chevron { display: none; }
#pw-module-dock .pw-dock-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    padding: 0 16px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    animation: none;
}
#pw-module-dock .pw-dock-body:not([hidden]) { animation: none; }
#pw-module-dock .pw-dock-panel {
    position: static !important;
    inset: auto !important;
    min-width: 0;
    max-height: none !important;
    overflow: visible !important;
}
#pw-module-dock .pw-dock-item.is-closing { animation: none; }
#pw-module-dock .mi-inbox-list {
    max-height: none;
    overflow: visible;
}
#pw-module-dock .mi-thread-msgs {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#pw-module-dock .v8-ph { gap: 9px; margin-right: 0; }
#pw-module-dock .v8-ph-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #242a34;
    color: #c1cbdd;
    box-shadow: none;
    font-size: 12px;
}
#pw-module-dock .v8-ph b { font-size: 12px; font-weight: 600; }
#pw-module-dock .v8-ph span { font-size: 10px; }
#pw-module-dock .v8-sec-t { font-size: 9px; font-weight: 600; letter-spacing: 1px; }
#pw-module-dock .v8-f { flex-wrap: wrap; }
#pw-module-dock .v8-f > label { font-size: 11px; font-weight: 500; }
#pw-module-dock .v8-in,
#pw-module-dock .v8-ta {
    min-width: 0;
    min-height: 40px;
    border-radius: 8px;
    background: #101216;
    border-color: rgba(255, 255, 255, .075);
    font-size: 11px;
    font-weight: 500;
}
#pw-module-dock .v8-in:focus,
#pw-module-dock .v8-ta:focus {
    border-color: rgba(190, 200, 218, .35);
    box-shadow: none;
}
#pw-module-dock .v8-seg { border-radius: 8px; }
#pw-module-dock .v8-seg button {
    min-height: 36px;
    padding: 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
}
#pw-module-dock .v8-btn {
    min-height: 40px;
    border-radius: 8px;
    padding: 8px;
    font-size: 10px;
    font-weight: 500;
}
#pw-module-dock .v8-chip { font-size: 9px; font-weight: 500; }
#pw-module-dock .v8-prog { height: 4px; }
#pw-module-dock .v8-saved { position: static; font-size: 9px; }
#pw-module-dock #mi-project-card .v8-sec { animation: none; }

@keyframes pw-multi-card-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}
@media (min-width: 769px) {
    #workspace.pw-docked { padding-right: 32px !important; }
    #workspace.pw-docked > .workspace-desktop-only { display: contents; }
    #workspace.pw-docked .workspace-nav { grid-column: 1 / -1; margin-bottom: 0 !important; }
    #workspace.pw-docked .workspace-grid > .left-col { max-width: none; }
    #workspace.pw-docked[data-module-layout="split"] { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.65fr); }
    #workspace.pw-docked[data-module-layout="split"][data-module-count="1"] { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
    #workspace.pw-docked[data-module-layout="split"] .workspace-grid { position: sticky; top: 24px; padding-top: 48px; }
    #workspace.pw-docked[data-module-layout="split"] .pw-editor-card #ws-notes { height: max(330px, calc(100svh - 335px)); }
    #pw-module-dock[data-count="1"] .pw-dock-item { max-height: max(480px, calc(100svh - 215px)); }
}
@media (max-width: 768px) {
    #workspace.view { padding: 0 16px calc(124px + env(safe-area-inset-bottom)) !important; }
    #workspace.pw-docked { gap: 20px; }
    #workspace .wsm-header { margin: 0 -16px 24px; padding: 18px 16px; }
    #workspace.pw-docked #wsm-panel-notes.pw-editor-card { padding: 16px !important; }
    #workspace.pw-docked #wsm-panel-notes.pw-editor-card #wsm-notes { min-height: 220px !important; height: 30svh; }
    #workspace #wsm-panel-notes.pw-editor-card #wsm-notes,
    #workspace #wsm-panel-notes.pw-editor-card #wsm-notes:focus {
        --pw-writing-line: 30.4px;
        padding: 10px 12px 24px;
    }
    #pw-module-dock {
        width: 100%;
        max-width: none;
        padding: 0;
        box-shadow: none;
    }
    #pw-module-dock .pw-dock-list { gap: 10px; padding-right: 0; }
    #pw-module-dock .pw-dock-item,
    #pw-module-dock .pw-dock-item.is-active,
    #pw-module-dock .pw-dock-item.is-collapsed { min-height: 180px; max-height: min(560px, 76svh); }
    #pw-module-dock .pw-dock-body { padding: 0 14px 14px; }
    #pw-module-dock .todo-input input { width: 100% !important; }
    #pw-module-dock .mi-thread-row input { min-height: 44px; font-size: 16px; }
    #pw-module-dock .mi-thread-row button { min-width: 44px; min-height: 44px; }
    #pw-module-dock .v8-in,
    #pw-module-dock .v8-ta { min-height: 44px; font-size: 16px; }
    #pw-module-dock .v8-seg button,
    #pw-module-dock .v8-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    #workspace,
    #workspace *,
    #pw-module-dock,
    #pw-module-dock * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

#workspace .pw-save-retry {
    background: #202329; color: #eee; border: 1px solid #3b404a;
    border-radius: 8px; padding: 8px 12px; min-height: 44px; cursor: pointer;
}

/* Compact mobile heading; module titles stay below it when brought into view. */
@media (max-width: 768px) {
    /* Sticky must be bounded by the complete workspace, not just the notes shell. */
    #workspace > #ws-mobile-shell { display: contents !important; }
    #workspace.pw-docked { gap: 12px; }
    #workspace.pw-docked .wsm-header { margin-bottom: 0; }

    #workspace .wsm-header {
        top: 0; margin-bottom: 12px; padding: 12px 16px;
    }
    #workspace .wsm-header::before {
        content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
        height: var(--app-safe-top, 0px); background: #090a0c;
        pointer-events: none;
    }
    #workspace .wsm-title { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.4; }
    #workspace .wsm-meta-row { flex-wrap: wrap; row-gap: 4px; }
    #workspace .wsm-status-pill, #workspace .wsm-deadline { white-space: normal; }
    #workspace #wsm-panel-notes.pw-editor-card { gap: 12px; }
    #pw-module-dock .pw-dock-toggle {
        scroll-margin-top: calc(var(--pw-sticky-header, 72px) + 12px);
        scroll-margin-bottom: 12px;
    }
}