/* 0021 layout only. Typography, controls and semantic colours use product-design.css. */
body#reply-tool main{max-width:940px;padding-block:28px 48px}
#reply-tool .reply-nav{align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
#reply-tool .wordmark{font-weight:800;letter-spacing:.08em;text-decoration:none;color:var(--ink)}
body#reply-tool .reply-header{padding:32px 0 8px;margin-bottom:20px}
#reply-tool .reply-header h1{margin-bottom:12px;font-size:clamp(2rem,4vw,2.7rem)}
body#reply-tool .eyebrow{font-size:1rem;letter-spacing:.03em;margin:0 0 10px}
#reply-tool .product-lead{font-weight:650;color:var(--ink);margin:0 0 6px}
#reply-tool .local-note{color:var(--muted);margin:12px 0 0}
#reply-tool .product-help{margin:16px 0 0}
#reply-tool .product-help ol{padding-left:1.4em}
#reply-tool .reply-panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;margin:20px 0}
#reply-tool h2{margin:0 0 18px}
#reply-tool .section-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}
#reply-tool .section-top h2{margin:0}
#reply-tool #fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#reply-tool #fields label:has([name=inquiry]){grid-column:1/-1}
#reply-tool #main-inquiry{min-height:130px}
#reply-tool .facts-intro{margin:28px 0 12px}
#reply-tool .facts-intro h3{margin:0 0 4px}
#reply-tool fieldset{border-color:var(--line);border-radius:12px;background:var(--bg);padding:20px;margin:16px 0}
#reply-tool fieldset .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#reply-tool fieldset label:has([name=fact]){grid-column:1/-1}
#reply-tool fieldset button{background:#fff;color:var(--accent);border-color:#9eb4ae}
#reply-tool .create-action{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
#reply-tool .status{margin:18px 0 0;padding:12px 16px;min-height:0;overflow-wrap:anywhere}
#reply-tool .status:empty{display:none}
#reply-tool .status.error{border:1px solid #d7a186;background:#fff1e9}
#reply-tool .empty-state{padding:20px;margin:0}
#reply-tool .review-hint{margin-bottom:18px}
#reply-tool .reply-text{min-height:280px;font:inherit}
#reply-tool .memo-details{margin-top:24px;border-top:1px solid var(--line);padding-top:8px}
#reply-tool .memo-details p{margin:0 0 16px}
#reply-tool .backup-details{padding-block:8px 16px}
#reply-tool .backup-details:not([open]){padding-bottom:8px}
#reply-tool .backup-details>summary{font-weight:650}
#reply-tool .restart-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:24px}
#reply-tool footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:28px 0 0;margin-top:28px;border-top:1px solid var(--line)}
#reply-tool .skip-link{position:absolute;top:-100px;left:16px;z-index:5;background:#fff;padding:12px 20px}
#reply-tool .skip-link:focus{top:12px}
@media(max-width:600px){
  body#reply-tool main{padding:20px 16px 36px}
  #reply-tool .reply-panel{padding:20px}
  #reply-tool #fields,#reply-tool fieldset .grid{grid-template-columns:minmax(0,1fr)}
  #reply-tool fieldset{padding:16px}
  #reply-tool .primary{width:100%}
  #reply-tool .backup-details{padding-block:8px 16px}
}
@media(prefers-reduced-motion:reduce){html:has(#reply-tool){scroll-behavior:auto}#reply-tool button{transition:none}}
.reply-review { margin: 18px 0; padding: 16px; border: 1px solid #a6b9af; border-radius: 10px; background: #f2f7f3; }
.reply-review h3 { margin: 0 0 6px; }
.reply-review ul { margin: 14px 0; padding-left: 1.5em; display: grid; gap: 10px; }
.reply-review li { overflow-wrap: anywhere; }
.reply-review [role="status"] { margin: 0; }