/* The D visual system extends from discovery into reading and participation. */
.flow-page {padding-top:32px; padding-bottom:96px; min-height:70vh}
.account-layout {max-width:480px; margin-inline:auto}
.information-reading,.solutions-reading {max-width:720px}
.information-reading>.body-copy {margin-bottom:32px}
.information-reading .status-message h2 {margin-top:24px}
.information-reading .status-message h2:first-child {margin-top:0}
.solutions-reading .solution-entry:first-child {padding-top:0}
.solutions-reading h2 {font:600 26px/1.5 var(--display); overflow-wrap:anywhere}
.solutions-reading h2>button {font:inherit; text-align:left; min-height:44px}
.solutions-reading h2>button:hover {text-decoration:underline; text-underline-offset:5px}
.solutions-reading .solution-entry p {margin-top:16px}
.solution-update {padding-block:24px; border-bottom:1px solid var(--line)}
.solution-update time {font-size:13px; color:var(--muted)}
.feedback-context {margin-bottom:32px}
.feedback-context h2 {font:600 16px/1.75 var(--body)}
.feedback-context p {margin-top:8px; color:var(--muted); overflow-wrap:anywhere}
.desktop-nav [aria-current="page"] {font-weight:600; color:var(--ink)}
.flow-back {margin-bottom:24px; gap:12px}
.flow-back svg {transform:rotate(180deg)}
.flow-heading {max-width:40em; margin-bottom:32px}
.flow-heading h1 {font:600 32px/1.5 var(--display); letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere}
.flow-heading p {margin-top:12px; color:var(--muted)}
#view-title:focus {outline:none}
.detail-meta {display:flex; align-items:center; gap:16px; color:var(--muted); font-size:13px; flex-wrap:wrap; margin-bottom:48px}
.detail-layout {display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:64px; align-items:start}
.detail-reading {min-width:0}
.reading-section {margin-bottom:64px; scroll-margin-top:112px}
.reading-section h2,.editor-aside h2,.aside-reading h2,.profile-content>.content-title h2 {font:600 26px/1.5 var(--display)}
.reading-section p {max-width:40em; margin-top:16px; overflow-wrap:anywhere}
.reading-section .tags {margin-top:24px}
.lead-description {color:var(--muted)}
.body-copy {white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.75; max-width:40em}
.context-line {margin-top:24px}
.context-line h3 {font:600 16px/1.75 var(--body)}
.context-line p {margin-top:8px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere}
.participation-bar {display:flex; flex-wrap:wrap; align-items:center; gap:16px; border-block:1px solid var(--line); padding:16px 0; margin-bottom:64px}
.participation-bar .text-link {margin-left:auto}
.content-title {display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.content-title>span,.section-note {font-size:13px; color:var(--muted)}
.solution-entry {padding:32px 0; border-bottom:1px solid var(--line)}
.solution-top {display:flex; justify-content:space-between; gap:16px; align-items:start; flex-wrap:wrap}
.solution-top h3 {font:600 20px/1.5 var(--display)}
.solution-author,.solution-audience {color:var(--muted); font-size:13px}
details>summary {cursor:pointer; min-height:44px; padding-block:12px; color:var(--accent); font-size:13px}
details>summary:focus-visible {outline:2px solid var(--primary); outline-offset:3px; border-radius:4px}
.update-entry {padding:16px; background:var(--soft); border-radius:12px; margin:8px 0}
.update-entry time {font-size:13px; color:var(--muted)}
.update-entry p {margin-top:8px}
.detail-aside {padding-top:0}
.aside-reading {background:var(--warm); padding:24px; border-radius:16px}
.aside-reading h2 {font-size:20px}
.aside-reading p {color:var(--muted); margin-block:16px 24px}
.aside-reading nav {display:grid; gap:8px; margin-top:24px}
.aside-reading nav a {min-height:44px; display:flex; align-items:center; font-size:13px; color:var(--muted)}
.demo-note {font-size:13px; line-height:1.75; color:var(--muted); margin-top:24px}
.quiet-empty {padding:32px 0}
.quiet-empty h3 {font:600 20px/1.5 var(--display)}
.quiet-empty p {color:var(--muted); margin-top:12px}
.discussion-item {padding:32px 0; border-bottom:1px solid var(--line)}
.comment-meta {display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.comment-meta strong {font-weight:600; color:var(--ink)}
.comment-meta time {margin-left:auto}
.discussion-item>p,.reply-item>p {white-space:pre-wrap}
.comment-tools {display:flex; justify-content:space-between; gap:16px}
.comment-tools .muted,.reply-item .muted {color:var(--muted)}
.reply-item {margin-top:16px; margin-left:24px; padding:24px; background:var(--soft); border-radius:12px}
.discussion-composer {margin-top:32px; padding-top:16px}
.discussion-composer h3 {font:600 20px/1.5 var(--display)}
.discussion-composer .form-input {max-width:40em}
.flow-page textarea.form-input {min-height:160px}
.discussion-composer .field-error {color:var(--error)}
.state-demo {margin-top:24px}
.state-demo summary {color:var(--muted)}
.editor-layout {display:grid; grid-template-columns:minmax(0,720px) 296px; gap:64px; align-items:start}
.editor-layout form {min-width:0}
.editor-layout .form-label:first-child {margin-top:0}
.editor-aside {background:var(--soft); padding:24px; border-radius:16px}
.editor-aside h2 {font-size:20px}
.editor-aside p {color:var(--muted); margin-top:16px}
.additional-fields {padding-block:16px; margin-block:16px 24px; border-block:1px solid var(--line)}
.additional-fields summary {font-size:16px; color:var(--ink); font-weight:600}
.preview-reading {max-width:720px}
.preview-reading>h2 {font:600 26px/1.5 var(--display); margin-block:24px 16px; overflow-wrap:anywhere}
.preview-reading .status-message {margin-block:32px}
.status-message {padding:24px; background:var(--soft); border-radius:12px; margin-bottom:32px}
.status-message h2,.status-message h3 {font:600 16px/1.75 var(--body)}
.status-message p {color:var(--muted); margin-top:8px}
.preview-reading .field-error {margin-bottom:16px}
.profile-heading {display:flex; align-items:start; justify-content:space-between; gap:32px; margin-bottom:16px}
.profile-identity {display:flex; align-items:center; gap:12px; padding-block:12px; flex-wrap:wrap}
.profile-identity div {display:grid; gap:4px; font-size:13px}
.profile-identity div>span {color:var(--muted)}
.profile-identity .avatar {width:44px; height:44px; font-size:16px}
.profile-layout {display:grid; grid-template-columns:208px minmax(0,1fr); gap:64px; align-items:start}
.profile-nav {display:grid; gap:8px; border-top:1px solid var(--line); padding-top:16px}
.profile-nav a {display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:12px; color:var(--muted); border-radius:12px}
.profile-nav a[aria-current="page"] {color:var(--accent); background:var(--selected); font-weight:600}
.profile-nav p {font-size:13px; color:var(--muted); margin-top:16px; padding-inline:12px}
.profile-content {min-width:0}
.profile-content .content-title {margin-bottom:24px}
.status-filter {display:flex; flex-wrap:wrap; gap:8px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.status-filter button {min-height:44px; padding:8px 12px; border-radius:12px; font-size:13px; color:var(--muted)}
.status-filter button.selected {background:var(--selected); color:var(--accent)}
.personal-row {padding:32px 0; border-bottom:1px solid var(--line)}
.personal-row-top {display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); margin-bottom:16px}
.personal-row h2 {font:600 20px/1.5 var(--display); margin-top:16px; overflow-wrap:anywhere}
.personal-row h2>button {font:inherit; padding:0; min-height:44px; text-align:left; overflow-wrap:anywhere}
.personal-row h2>button:hover {text-decoration:underline; text-underline-offset:5px}
.personal-row>p {max-width:40em; margin-top:16px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere}
.personal-row .form-actions {margin-top:16px}
.return-reason {background:var(--soft); border-radius:12px; padding:16px; margin-top:16px; font-size:13px}
.return-reason p {margin-top:8px; color:var(--muted)}
@media(max-width:1150px) {
  .detail-layout,.editor-layout {grid-template-columns:minmax(0,1fr) 270px; gap:32px}
  .profile-layout {gap:32px; grid-template-columns:176px minmax(0,1fr)}
  .profile-heading {display:block}
}
@media(max-width:950px) {
  .detail-layout,.editor-layout {grid-template-columns:minmax(0,1fr)}
  .detail-aside {max-width:640px}
  .editor-aside {max-width:640px}
}
@media(max-width:700px) {
  .flow-page {padding-top:24px; padding-bottom:64px}
  .flow-heading {margin-bottom:24px}
  .flow-heading h1 {font-size:26px}
  .solutions-reading h2 {font-size:20px}
  .detail-meta {gap:12px; margin-bottom:32px}
  .reading-section {margin-bottom:48px}
  .reading-section h2,.profile-content>.content-title h2 {font-size:20px}
  .participation-bar {gap:12px; margin-bottom:48px}
  .participation-bar .text-link {margin-left:0}
  .comment-meta time {margin-left:0}
  .reply-item {margin-left:12px; padding:16px}
  .profile-layout {grid-template-columns:minmax(0,1fr); gap:32px}
  .profile-nav {display:flex; flex-wrap:wrap; gap:8px}
  .profile-nav a {flex:1; justify-content:center; gap:8px; white-space:nowrap; font-size:13px; padding-inline:8px}
  .profile-nav a svg {display:none}
  .profile-nav p {width:100%; padding:0}
  .status-filter {flex-wrap:nowrap; overflow-x:auto}
  .status-filter button {flex:none; white-space:nowrap}
  .profile-identity {margin-bottom:24px}
  .profile-content .content-title {margin-bottom:16px}
  .personal-row {padding:24px 0}
  .preview-reading>h2 {font-size:26px}
}