/* Workspace companion patterns; rules and limitations are in GUIDELINES.md. */
.pattern-list,.sortable-items,.activity-list,.pattern-tree,.pattern-tree ul { list-style: none; margin: 0; padding: 0; }
.pattern-list { margin-top: 20px; }
.pattern-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--pv-border); }
.pattern-copy { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; display: grid; gap: 6px; }
.pattern-list > li:last-child { border-bottom: 0; }
.pattern-tree [role=treeitem] { outline: none; border-radius: 12px; }
.pattern-tree [role=group] { padding-left: 20px; }
.tree-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; margin-bottom: 4px; border-radius: 12px; cursor: pointer; overflow-wrap: anywhere; }
.tree-label:hover { background: var(--pv-muted); }
[role=treeitem][aria-selected=true] > .tree-label { background: var(--pv-selection-bg); color: var(--pv-selection-fg); font-weight: 600; }
[role=treeitem]:focus-visible > .tree-label { outline: 2px solid var(--pv-focus); outline-offset: -2px; }
[role=treeitem][aria-disabled=true] > .tree-label { color: var(--pv-disabled-fg); cursor: not-allowed; }
.activity-list li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 14px; position: relative; padding: 0 0 24px; }
.activity-list li:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--pv-border); }
.activity-marker { margin-top: 5px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--pv-control); border-radius: 50%; background: var(--pv-surface); color: var(--pv-heading); font-size: 11px; z-index: 1; }
.activity-copy { display: grid; gap: 6px; }
.activity-copy time { color: var(--pv-secondary); font-size: 12px; }

.sortable-items { display: grid; gap: 12px; }
.sortable-items > li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px; border: 1px solid var(--pv-border); border-radius: 16px; background: var(--pv-surface); }
.sortable-items > li[data-drop-target] { outline: 2px solid var(--pv-focus); background: var(--pv-brand-soft); }
.reorder-handle { cursor: grab; }
.reorder-handle:active { cursor: grabbing; }
.reorder-title { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.reorder-actions { display: flex; gap: 6px; margin-left: auto; }
.rating-fieldset { margin: 0; padding: 0; border: 0; }
.rating-fieldset legend { font-size: 16px; color: var(--pv-heading); margin-bottom: 12px; }
.rating-options { display: flex; gap: 8px; margin: 20px 0 12px; }
.rating-choice { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; flex: 0 1 56px; cursor: pointer; }
.rating-choice input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; z-index: 1; }
.rating-star { display: grid; place-items: center; width: 100%; min-height: 44px; border: 1px solid var(--pv-control); border-radius: 12px; font-size: 26px; color: var(--pv-secondary); background: var(--pv-surface); }
.rating-choice:hover .rating-star { background: var(--pv-muted); }
.rating-choice:has(input:checked) .rating-star { color: var(--pv-selection-fg); background: var(--pv-selection-bg); border-color: var(--pv-selection-fg); }
.rating-choice:has(input:focus-visible) .rating-star { outline: 2px solid var(--pv-focus); outline-offset: 2px; }
.rating-choice:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.split-layout { --queue-width:35%; display: grid; grid-template-columns: minmax(0,var(--queue-width)) 16px minmax(0,1fr); border: 1px solid var(--pv-border); border-radius: 16px; overflow: hidden; min-height: 300px; }
.split-panel { padding: 20px; min-width: 0; }
.split-panel .member-row { margin-top: 12px; }
.split-divider { background: var(--pv-muted); cursor: col-resize; position: relative; touch-action: none; }
.split-divider::after { content: ''; position: absolute; top: 50%; left: 7px; width: 2px; height: 40px; transform: translateY(-50%); background: var(--pv-control); border-radius: 2px; }
.split-divider:hover,.split-divider:focus-visible { background: var(--pv-brand-soft); outline: 2px solid var(--pv-focus); outline-offset: -2px; }
.state-preview { min-height: 300px; padding: 32px 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 16px; }
.state-preview p { max-width: 480px; }
.state-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--pv-brand-soft); color: var(--pv-heading); font-size: 22px; }
.state-loading { width: min(100%,320px); }
.error-pages-heading,.error-page-brand,.error-page-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.error-pages-heading p { margin-top:8px; }
.error-page-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:24px 0; }
.error-page-option { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:72px; padding:12px; border:1px solid var(--pv-border); border-radius:12px; background:var(--pv-surface); color:var(--pv-text); text-align:left; overflow-wrap:anywhere; }
.error-page-option strong { font-size:16px; line-height:24px; }
.error-page-option span { font-size:12px; line-height:18px; color:var(--pv-secondary); }
.error-page-option:hover { background:var(--pv-muted); }
.error-page-option[aria-pressed="true"] { border-color:var(--pv-selection-fg); background:var(--pv-selection-bg); color:var(--pv-selection-fg); }
.error-page-preview { border:1px solid var(--pv-border); border-radius:16px; overflow:hidden; background:var(--pv-surface); }
.error-page-brand { padding:20px 24px; border-bottom:1px solid var(--pv-border); }
.error-page-brand img { width:80px; height:auto; }
.error-page-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:center; gap:48px; padding:48px 32px; min-height:360px; }
.error-page-art { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--pv-heading); background:var(--pv-brand-soft); border:1px solid var(--pv-border); border-radius:24px; padding:24px 16px; }
.error-page-art svg { width:64px; height:64px; color:var(--pv-secondary); }
#error-page-code { font-size:clamp(56px,7vw,104px); line-height:1; font-weight:700; letter-spacing:-.04em; }
.error-page-art[data-offline] #error-page-code { font-size:clamp(32px,4vw,52px); letter-spacing:-.02em; }
#error-page-kind { font-size:12px; line-height:18px; color:var(--pv-secondary); text-align:center; }
.error-page-copy { min-width:0; }
.error-page-copy h4 { font-size:24px; line-height:32px; font-weight:600; color:var(--pv-heading); margin:12px 0; }
.error-page-copy > p { color:var(--pv-secondary); max-width:480px; }
.error-page-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.error-page-footer { padding:16px 24px; background:var(--pv-muted); color:var(--pv-secondary); font-size:12px; line-height:18px; }
@media(max-width:1000px) {
 .error-page-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .error-page-body { gap:24px; padding:32px 24px; }
}
@media(max-width:640px) {
 .error-page-options { grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0; }
 .error-page-body { grid-template-columns:minmax(0,1fr); padding:24px 16px; }
 .error-page-art { padding:20px 16px; }
 .error-page-art svg { width:48px; height:48px; }
 .error-page-brand,.error-page-footer { padding:16px; }
 .error-page-actions { flex-direction:column; align-items:stretch; }
}
@media(max-width:640px) {
 .split-layout { grid-template-columns:minmax(0,1fr); }
 .split-divider { display:none; }
 .split-panel + .split-divider + .split-panel { border-top:1px solid var(--pv-border); }
 .split-panel { padding:16px; }
 .rating-options { gap:6px; }
}

/* Notification rows are separate compact cards, with a restrained unread marker. */
#notification-items { display:grid; gap:12px; margin:20px 0 0; }
#notification-items > li { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:start; gap:14px; padding:16px 18px; border:1px solid var(--pv-border); border-radius:14px; background:var(--pv-surface); }
#notification-items > li.notification-unread { box-shadow:inset 3px 0 0 var(--pv-red); }
.notification-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:var(--pv-secondary); background:var(--pv-muted); }
.notification-unread .notification-icon { color:var(--pv-selection-fg); background:var(--pv-selection-bg); }
.notification-copy { gap:6px; }
.notification-copy strong { font-size:14px; line-height:20px; font-weight:600; }
.notification-copy p { font-size:14px; line-height:20px; color:var(--pv-secondary); }
.notification-meta { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; color:var(--pv-secondary); font-size:12px; line-height:18px; }
.notification-read-state { display:inline-flex; align-items:center; gap:6px; }
.notification-unread .notification-read-state::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--pv-red); }
.notification-action { align-self:center; }
#notification-feedback { margin-top:16px; color:var(--pv-secondary); font-size:12px; line-height:18px; }
#notification-items:empty + #notification-feedback { padding:24px; border:1px dashed var(--pv-border); border-radius:14px; text-align:center; font-size:14px; line-height:20px; }
@media(max-width:640px) {
 #notification-items > li { grid-template-columns:32px minmax(0,1fr); padding:16px; gap:12px; }
 .notification-icon { width:32px; height:32px; border-radius:10px; }
 .notification-action { grid-column:2; justify-self:start; padding:6px 0; }
}