/* The developer workflow inherits the D system; tasks stay in document flow. */
.developer-reading {max-width:720px}
.developer-reading>section+section {margin-top:48px}
.developer-reading>.reading-section {margin-top:48px}
.developer-reading h2,.developer-record h2 {font:600 26px/1.5 var(--display); margin-bottom:16px; overflow-wrap:anywhere}
.developer-reading h3 {font:600 20px/1.5 var(--display); margin-bottom:12px}
.developer-reading p,.developer-record p {overflow-wrap:anywhere; white-space:pre-wrap}
.developer-context {padding-block:24px; margin-bottom:32px; border-block:1px solid var(--line)}
.developer-context h2 {font:600 16px/1.75 var(--body); margin-bottom:8px}
.developer-context p {color:var(--muted)}
.developer-fields .form-input {width:100%; min-width:0}
.developer-fields textarea.form-input {min-height:160px}
.developer-fields .form-label {margin-top:24px}
.developer-fields .form-label:first-child {margin-top:0}
.developer-fields .field-error {min-height:24px}
.developer-fields .form-meta {margin-block:8px 16px}
.developer-record {padding-block:32px; border-bottom:1px solid var(--line)}
.developer-record .detail-meta {margin-bottom:12px}
.developer-record h2 {font-size:20px; margin-bottom:12px}
.developer-record h2>button {font:inherit; text-align:left; min-height:44px}
.developer-record .form-actions {margin-top:16px}
.developer-heading-actions {display:flex; flex-wrap:wrap; gap:16px; margin-bottom:32px}
.developer-summary {margin-top:24px; display:grid; gap:24px}
.developer-summary dt {font-weight:600; margin-bottom:8px}
.developer-summary dd {margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.developer-status {padding:24px; border-radius:12px; background:var(--soft); margin-bottom:32px}
.developer-status h2 {font:600 20px/1.5 var(--display); margin-bottom:12px}
.developer-status p+p {margin-top:12px}
.prototype-controls {margin-top:48px; padding-top:24px; border-top:1px solid var(--line)}
.prototype-controls summary {color:var(--muted); cursor:pointer; min-height:44px}
.prototype-controls p {font-size:13px; color:var(--muted); margin-top:12px}
.prototype-controls .form-actions {margin-top:16px}
.prototype-controls button {min-height:44px}
.developer-choice {display:flex; gap:12px; align-items:center; padding-block:12px; min-height:48px; cursor:pointer}
.developer-choice input {width:20px; height:20px; accent-color:var(--primary); flex-shrink:0}
.developer-fields fieldset {border:0; padding:0; margin:24px 0 0}
.developer-fields legend {font-weight:600; margin-bottom:8px}
.developer-feedback {padding-block:24px; border-bottom:1px solid var(--line)}
.developer-feedback .stage {margin-bottom:12px}
.developer-feedback p {margin-top:12px}
.developer-reading .safe-product-link {display:inline-flex; min-height:44px; align-items:center; overflow-wrap:anywhere; word-break:break-word}
/* Application refinement uses the established D tokens and keeps tasks in full pages. */
.application-page {max-width:1040px; margin-inline:auto}
.application-topline {display:flex; justify-content:space-between; align-items:start; gap:24px}
.application-compare {min-height:44px; color:var(--muted); font-size:13px; white-space:nowrap}
.application-page .flow-heading {margin-bottom:24px; max-width:720px}
.application-steps {display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin-bottom:24px}
.application-steps>span:not(.application-step-line) {display:inline-flex; align-items:center; gap:8px}
.application-steps [aria-current] {font-weight:600; color:var(--primary)}
.application-step-dot {width:6px; height:6px; border-radius:50%; background:currentColor}
.application-step-line {width:32px; height:1px; background:var(--line)}
.application-intro {padding-bottom:32px; border-bottom:1px solid var(--line); margin-bottom:40px; max-width:720px}
.application-intro>p {color:var(--muted); max-width:40em}
.application-intro>p+p {margin-top:8px}
.application-demo {font-size:13px; color:var(--muted); margin-block:16px 24px; overflow-wrap:anywhere}
.application-intro .application-demo {margin-bottom:0}
.application-layout {display:grid; grid-template-columns:minmax(0,672px) 248px; gap:64px; align-items:start}
.application-form,.application-field {min-width:0}
.application-section+.application-section {margin-top:32px}
.application-section>h2,.application-section-heading h2 {font:600 20px/1.5 var(--display); margin:0 0 16px}
.application-form .form-label {display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0}
.application-field-kind {font-size:12px; font-weight:400; color:var(--muted); white-space:nowrap}
.application-hint {font-size:13px; line-height:1.75; color:var(--muted); margin:8px 0 12px; max-width:40em}
.application-form textarea.form-input {min-height:96px; resize:vertical; line-height:1.75}
.application-field-foot {display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:24px; margin-top:4px}
.application-form .field-error {min-height:0; margin:0}
.application-form .field-error:empty {display:none}
.application-count {font-size:12px; color:var(--muted); white-space:nowrap; margin-left:auto; font-variant-numeric:tabular-nums}
.application-section-heading {display:flex; align-items:center; gap:12px; margin-bottom:8px}
.application-section-heading h2 {margin-bottom:0}
.application-material-section {padding-top:24px; border-top:1px solid var(--line)}
.application-material {margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:clip}
.application-material>summary {list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:12px 16px; cursor:pointer}
.application-material>summary::-webkit-details-marker {display:none}
.application-material>summary>span:first-child {display:flex; align-items:center; gap:8px}
.application-material>summary:hover {background:var(--soft)}
.application-material>summary:active {background:var(--selected)}
.application-material[open]>summary {border-bottom:1px solid var(--line)}
.application-disclosure {display:inline-flex; transition:transform 180ms var(--ease)}
.application-material[open] .application-disclosure {transform:rotate(180deg)}
.application-material-fields {padding:24px; animation:application-material-in 180ms var(--ease)}
.application-material-fields>.application-field+.application-field {margin-top:24px}
.application-work-inputs {display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-block:24px}
.application-limits,.application-action-note {font-size:13px; color:var(--muted); margin-top:16px; max-width:40em}
.application-actions {margin-block:24px 0; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.application-actions .primary,.application-actions .secondary {min-height:48px}
.application-guide {border-top:1px solid var(--line); padding-top:24px}
.application-guide h2 {font:600 20px/1.5 var(--display); margin-bottom:12px}
.application-guide p {color:var(--muted); font-size:14px; line-height:1.85}
.application-guide-detail {margin-top:24px}
.application-guide h3 {font:600 14px/1.75 var(--body); margin-bottom:8px}
.application-guide .text-link {margin-top:24px; font-size:14px; min-height:44px}
.application-version-note {font-size:13px; color:var(--muted); padding:16px; background:var(--soft); border-radius:12px; margin-bottom:24px}
.application-return {margin-bottom:32px}
.application-return .text-link {margin-top:12px; min-height:44px}
.application-reading {max-width:720px}
.application-summary section {padding-block:24px; border-bottom:1px solid var(--line)}
.application-summary-title {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px}
.application-summary h2,.application-submitted-heading h2 {font:600 20px/1.5 var(--display); margin:0}
.application-summary p,.application-summary dd {white-space:pre-wrap; overflow-wrap:anywhere; margin:0; max-width:40em}
.application-edit-link {min-height:44px; font-size:13px; gap:8px; white-space:nowrap}
.application-work h3 {font:600 16px/1.75 var(--body); margin-bottom:8px; overflow-wrap:anywhere}
.application-work p {margin-top:8px}
.application-contribution {margin:16px 0 0}
.application-contribution dt {font-size:13px; color:var(--muted); margin-bottom:4px}
.application-work .safe-product-link {display:flex; align-items:center; gap:8px; min-height:44px; color:var(--primary); margin-top:12px; max-width:100%; font-size:13px}
.application-work .safe-product-link span {overflow-wrap:anywhere; min-width:0}
.application-empty-material {color:var(--muted)}
.application-submit-note {margin-top:24px; color:var(--muted); font-size:13px}
.application-result {display:flex; gap:16px; align-items:start; margin-top:24px; margin-bottom:0}
.application-result-icon {display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--surface); color:var(--primary); flex:none}
.application-result p {color:var(--muted)}
.application-result-meta {font-size:13px}
.application-draft-notice {display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; padding-block:24px; border-block:1px solid var(--line)}
.application-draft-notice h2 {font:600 16px/1.75 var(--body); margin-bottom:4px}
.application-draft-notice p {font-size:13px; color:var(--muted)}
.application-draft-notice button {flex:none; font-size:13px; min-height:44px}
.application-submitted-heading {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:48px}
.application-submitted-heading span {font-size:13px; color:var(--muted); white-space:nowrap}
@keyframes application-material-in {from {opacity:.45} to {opacity:1}}
@media(max-width:950px) {
  .application-layout {grid-template-columns:minmax(0,1fr); gap:40px}
  .application-guide {max-width:672px}
}
@media(max-width:700px) {
  .application-topline {gap:12px}
  .application-compare {font-size:12px}
  .application-steps {gap:8px; font-size:12px}
  .application-step-line {width:20px}
  .application-intro {margin-bottom:32px; padding-bottom:24px}
  .application-intro>p {font-size:14px}
  .application-material-fields {padding:16px}
  .application-work-inputs {grid-template-columns:1fr; gap:16px; margin-block:16px}
  .application-material-fields>.application-field+.application-field {margin-top:16px}
  .application-draft-notice {align-items:start; flex-direction:column; gap:12px}
  .application-submitted-heading {margin-top:32px}
  .application-result {gap:12px}
  .application-actions .primary,.application-actions .secondary {font-size:14px}
}
@media(max-width:700px) {
  .developer-reading h2,.developer-record h2 {font-size:20px}
  .developer-reading>section+section {margin-top:32px}
  .developer-reading>.reading-section {margin-top:32px}
  .developer-record {padding-block:24px}
  .developer-heading-actions {margin-bottom:24px}
  .developer-status {padding:20px; margin-bottom:24px}
  .developer-context {margin-bottom:24px}
}