.ai-planning-page { margin: 0 auto; max-width: 1440px; padding: 0 0 20px; }
.ai-planning-head { align-items: baseline; display: flex; gap: 18px; justify-content: space-between; margin: 0 0 12px; }
.ai-planning-head h1 { font-size: 20px; letter-spacing: -.015em; margin: 0; }
.ai-planning-head p:not(.eyebrow) { color: var(--muted); font-size: 12px; margin: 3px 0 0; max-width: 760px; }
.ai-plan-safety { align-items: center; background: var(--brand-soft); border: 1px solid #dce8e1; color: var(--brand-ink); display: inline-flex; flex: 0 0 auto; font-size: 11px; gap: 6px; padding: 6px 8px; }
.ai-plan-safety .ui-icon { height: 14px; width: 14px; }
.ai-planning-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 255px; }
.ai-planning-main, .ai-planning-aside { min-width: 0; }
.ai-plan-create, .ai-plan-preview, .ai-plan-history, .ai-plan-manual-path, .ai-plan-applied-result { background: transparent; border: 0; border-radius: 0; }
.ai-plan-create { border-bottom: 1px solid var(--line); padding: 0 0 14px; }
.ai-plan-create-head, .ai-plan-section-head { align-items: start; display: flex; justify-content: space-between; gap: 12px; }
.ai-plan-create-head { border-bottom: 1px solid var(--line); margin-bottom: 12px; padding-bottom: 9px; }
.ai-plan-create-head h2, .ai-plan-section-head h3, .ai-plan-section-head h2 { font-size: 15px; line-height: 1.3; margin: 0; }
.ai-plan-step { color: var(--muted); font-size: 10px; white-space: nowrap; }
.ai-plan-controls { display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
.ai-plan-field { display: grid; gap: 4px; min-width: 0; }
.ai-plan-field > span { color: var(--muted); font-size: 11px; font-weight: 600; }
.ai-plan-field input, .ai-plan-field select, .ai-plan-field textarea { background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); font: inherit; font-size: 12px; min-height: 31px; min-width: 0; padding: 5px 7px; width: 100%; }
.ai-plan-field textarea { line-height: 1.5; resize: vertical; }
.ai-plan-field input:focus, .ai-plan-field select:focus, .ai-plan-field textarea:focus { border-color: var(--focus-ring); outline: 2px solid color-mix(in srgb, var(--focus-ring) 24%, transparent); }
.ai-plan-field small, .ai-plan-technical small { color: var(--subtle); font-size: 10px; line-height: 1.4; }
.ai-plan-brief textarea { min-height: 116px; }
.ai-plan-file { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 10px; margin: 9px 0; }
.ai-plan-file input { color: var(--ink); font-size: 11px; max-width: 280px; }
.ai-plan-context { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; margin-top: 10px; padding-top: 9px; }
.ai-plan-context summary { color: var(--ink); cursor: pointer; font-weight: 600; }
.ai-plan-context label, .ai-plan-review-flag { align-items: center; display: inline-flex; gap: 5px; }
.ai-plan-context input, .ai-plan-review-flag input, .ai-plan-include input { accent-color: var(--brand-accent); }
.ai-plan-create-foot { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 10px; }
.ai-plan-create-guidance { display: grid; gap: 7px; min-width: 0; }
.ai-plan-create-guidance > span { color: var(--muted); font-size: 10px; line-height: 1.45; max-width: 440px; }
.ai-plan-submit-status { align-items: center; color: var(--brand-accent); display: flex; font-size: 11px; gap: 7px; line-height: 1.4; }
.ai-plan-submit-status .ai-plan-progress-mark { flex: 0 0 auto; height: 14px; width: 14px; }
.ai-plan-submit-status[hidden], .ai-plan-submit-error[hidden] { display: none; }
.ai-plan-submit-error { background: #fff4f2; border-left: 3px solid #a24a40; color: #742e28; display: grid; gap: 5px; max-width: 540px; padding: 8px 10px; }
.ai-plan-submit-error strong { font-size: 11px; }
.ai-plan-submit-error p { font-size: 10px; margin: 0; overflow-wrap: anywhere; }
.ai-plan-submit-error .button { justify-self: start; }
.ai-plan-create-foot .button { align-items: center; display: inline-flex; flex: 0 0 auto; gap: 6px; }
.ai-plan-create-foot .ui-icon { height: 15px; width: 15px; }
.ai-plan-create-foot .ai-plan-progress-mark { height: 15px; width: 15px; }
.ai-plan-preview { border-top: 1px solid var(--line); margin-top: 13px; padding: 12px 0; }
.ai-plan-preview-head { align-items: start; border-bottom: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; padding-bottom: 11px; }
.ai-plan-preview-head h2 { font-size: 18px; margin: 1px 0 4px; }
.ai-plan-preview-head p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; max-width: 760px; }
.ai-plan-preview-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.ai-plan-section { border-top: 1px solid var(--line); border-radius: 0; min-width: 0; padding: 9px 0; }
.ai-plan-section-head { align-items: center; margin-bottom: 8px; }
.ai-plan-section-head > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.ai-plan-section-head p:not(.eyebrow) { color: var(--muted); font-size: 10px; margin: 3px 0 0; }
.ai-plan-phase { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 26px minmax(0, 1fr); padding: 8px 0; }
.ai-plan-phase:first-of-type { border-top: 0; }
.ai-plan-phase-index { align-items: center; background: var(--brand-soft); color: var(--brand-accent); display: inline-flex; font-size: 10px; height: 22px; justify-content: center; width: 22px; }
.ai-plan-phase strong, .ai-plan-objective strong { font-size: 12px; }
.ai-plan-phase p, .ai-plan-objective p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 3px 0; }
.ai-plan-phase small { color: var(--subtle); font-size: 10px; }
.ai-plan-objective { border-top: 1px solid var(--line); padding: 8px 0; }
.ai-plan-objective:first-of-type { border-top: 0; }
.ai-plan-objective > div { align-items: center; display: flex; gap: 7px; }
.ai-plan-bullet { background: var(--brand-accent); height: 6px; width: 6px; }
.ai-plan-objective ul, .ai-plan-note ul { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 5px 0 0; padding-left: 17px; }
.ai-plan-milestones { margin-top: 12px; }
.ai-plan-milestones ul { list-style: none; margin: 0; padding: 0; }
.ai-plan-milestones li { align-items: center; border-top: 1px solid var(--line); display: flex; font-size: 11px; justify-content: space-between; padding: 6px 0; }
.ai-plan-milestones li:first-child { border-top: 0; }
.ai-plan-milestones small { color: var(--muted); font-size: 10px; }
.ai-plan-task-list { margin-top: 12px; }
.ai-plan-task-rows { display: grid; gap: 6px; }
.ai-plan-task { align-items: start; background: #fbfcfb; border: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 18px minmax(0, 1fr); padding: 8px; }
.ai-plan-task { margin-left: calc(var(--plan-depth, 0) * 14px); position: relative; }
.ai-plan-hierarchy-note { background: var(--brand-soft); color: var(--brand-accent); font-size: 10px; margin: 6px 0; padding: 6px 8px; }
.ai-plan-include { padding-top: 6px; }
.ai-plan-task-details { min-width: 0; }
.ai-plan-task-details > summary { align-items: center; cursor: pointer; display: flex; gap: 7px; list-style: none; min-height: 25px; min-width: 0; }
.ai-plan-task-details > summary::-webkit-details-marker { display: none; }
.ai-plan-task-details > summary::before { border-bottom: 1px solid var(--muted); border-right: 1px solid var(--muted); content: ''; flex: 0 0 auto; height: 5px; transform: rotate(-45deg); transition: transform 120ms ease; width: 5px; }
.ai-plan-task-details[open] > summary::before { transform: rotate(45deg); }
.ai-plan-task-details > summary > strong { flex: 1; font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-plan-task-kind, .ai-plan-task-edit { color: var(--muted); font-size: 9px; white-space: nowrap; }
.ai-plan-task-edit { border-left: 1px solid var(--line-strong); padding-left: 7px; }
.ai-plan-task-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 7px; padding-bottom: 6px; }
.ai-plan-task-fields { min-width: 0; }
.ai-plan-title-field input { font-weight: 650; }
.ai-plan-task-meta { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 7px; }
.ai-plan-task-meta .ai-plan-field > span { font-size: 9px; }
.ai-plan-task-meta .ai-plan-field input, .ai-plan-task-meta .ai-plan-field select { font-size: 10px; min-height: 27px; padding: 3px 5px; }
.ai-plan-review-flag { align-self: end; color: var(--muted); font-size: 10px; min-height: 27px; }
.ai-plan-description, .ai-plan-criteria { margin-top: 7px; }
.ai-plan-description textarea, .ai-plan-criteria textarea { font-size: 11px; min-height: 44px; }
.ai-plan-reason { color: var(--subtle); font-size: 10px; margin: 4px 0 0; }
.ai-plan-duplicate { background: #fff5e7; color: #87530d; display: inline-block; font-size: 10px; margin-top: 5px; padding: 2px 5px; }
.ai-plan-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 11px; }
.ai-plan-refine-form { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 11px; padding-top: 10px; }
.ai-plan-technical { border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; margin-top: 11px; padding-top: 8px; }
.ai-plan-technical summary { cursor: pointer; }
.ai-plan-technical p { margin: 6px 0; }
.ai-plan-note, .ai-plan-warning, .ai-plan-error { border-left: 3px solid #9aab9f; background: #faf9f6; margin: 10px 0 0; padding: 8px 10px; }
.ai-plan-note h3, .ai-plan-warning strong, .ai-plan-error strong { font-size: 11px; margin: 0; }
.ai-plan-questions { border-left-color: #b38b46; }
.ai-plan-questions .ai-plan-field { margin-top: 7px; }
.ai-plan-warning { background: #fff9ec; border-color: #c49b52; color: #664714; }
.ai-plan-error { background: #fff4f2; border-color: #a24a40; color: #742e28; }
.ai-plan-error p { font-size: 11px; margin: 5px 0 0; }
.ai-plan-generating { align-items: center; background: #fff; border: 1px solid var(--line); display: flex; gap: 10px; margin-top: 13px; padding: 12px; }
.ai-plan-generating > div { flex: 1; }
.ai-plan-generating strong { font-size: 12px; }
.ai-plan-generating p { color: var(--muted); font-size: 10px; margin: 3px 0 0; }
.ai-plan-progress-mark { animation: ai-plan-progress 1.2s ease-in-out infinite; border: 2px solid var(--line-strong); border-right-color: var(--brand-accent); border-radius: 50%; height: 17px; width: 17px; }
@keyframes ai-plan-progress { to { transform: rotate(360deg); } }
.ai-plan-history { padding: 0; }
.ai-plan-manual-path { border-top: 1px solid var(--line); padding: 10px 0; }
.ai-plan-history > div:last-child { display: grid; }
.ai-plan-history-row { align-items: center; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--ink); cursor: pointer; display: grid; gap: 8px; grid-template-columns: 7px minmax(0, 1fr) auto; padding: 8px 3px; text-align: left; width: 100%; }
.ai-plan-history-row.is-active { background: var(--selected-surface); }
.ai-plan-history-row strong, .ai-plan-history-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-plan-history-row strong { font-size: 11px; }
.ai-plan-history-row small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.ai-plan-history-row .status-tag { font-size: 9px; padding: 2px 4px; }
.ai-plan-history-mark { background: var(--brand-accent); height: 7px; width: 7px; }
.ai-plan-history-empty { align-items: start; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 8px; padding: 8px 0 2px; }
.ai-plan-history-empty .ui-icon { height: 15px; width: 15px; }
.ai-plan-history-empty strong, .ai-plan-manual-path strong { color: var(--ink); font-size: 11px; }
.ai-plan-history-empty p, .ai-plan-manual-path p { font-size: 10px; line-height: 1.45; margin: 3px 0; }
.ai-plan-manual-path { align-items: start; display: flex; gap: 8px; margin-top: 10px; }
.ai-plan-manual-path > span .ui-icon { color: var(--brand-accent); height: 16px; width: 16px; }
.ai-plan-manual-path a { color: var(--brand-accent); font-size: 10px; font-weight: 650; text-decoration: none; }
.ai-plan-applied-result { border-left: 3px solid var(--brand-accent); margin-bottom: 12px; padding: 11px 13px; }
.ai-plan-revision-summary { background: var(--brand-soft); color: var(--brand-accent); font-size: 10px; margin: 8px 0; padding: 6px 8px; }
.ai-plan-applied-result > strong { font-size: 13px; }
.ai-plan-applied-result > p { color: var(--muted); font-size: 11px; margin: 4px 0; }
.ai-plan-counts { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 7px; }
.ai-plan-counts span { color: var(--muted); font-size: 10px; }
.ai-plan-counts b { color: var(--ink); font-size: 12px; margin-left: 3px; }
.ai-planning-page button:focus-visible, .ai-planning-page a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 1000px) {
  .ai-planning-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .ai-plan-task-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ai-planning-page { padding-bottom: 20px; }
  .ai-planning-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ai-planning-layout, .ai-plan-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-planning-aside { display: grid; gap: 9px; }
  .ai-plan-manual-path { margin-top: 0; }
  .ai-plan-controls { grid-template-columns: minmax(0, 1fr); }
  .ai-plan-create-foot { align-items: stretch; flex-direction: column; }
  .ai-plan-create-foot .button { justify-content: center; }
  .ai-plan-task-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-plan-preview-head { flex-direction: column; }
  .ai-plan-refine-form { grid-template-columns: minmax(0, 1fr); }
  .ai-plan-actions { justify-content: stretch; }
  .ai-plan-actions > * { flex: 1 1 140px; justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
  .ai-plan-create, .ai-plan-preview { padding: 0 0 10px; }
  .ai-plan-task { padding: 6px; }
  .ai-plan-task-meta { grid-template-columns: minmax(0, 1fr); }
  .ai-plan-review-flag { min-height: 24px; }
  .ai-plan-history-row { gap: 6px; }
}

.roadmap-page { display: grid; gap: 12px; }
.roadmap-page > .page-head { margin-bottom: 0; }
.roadmap-phase-list { display: grid; gap: 9px; }
.roadmap-phase-card { background: var(--surface); border: 1px solid var(--line); padding: 11px 13px; }
.roadmap-phase-head { align-items: start; display: grid; gap: 9px; grid-template-columns: 28px minmax(0, 1fr) auto; }
.roadmap-phase-index { align-items: center; background: var(--brand-soft); color: var(--brand-accent); display: flex; font-size: 10px; height: 25px; justify-content: center; }
.roadmap-phase-head .eyebrow { margin: 0 0 2px; }
.roadmap-phase-head h2 { font-size: 14px; margin: 0; }
.roadmap-phase-head p:not(.eyebrow) { color: var(--muted); font-size: 11px; margin: 3px 0 0; }
.roadmap-phase-progress { align-items: center; display: grid; gap: 10px; grid-template-columns: 110px minmax(0, 1fr); margin: 9px 0 7px 37px; }
.roadmap-phase-progress > span:first-child { align-items: baseline; display: flex; gap: 6px; }
.roadmap-phase-progress strong { font-size: 12px; }
.roadmap-phase-progress small { color: var(--muted); font-size: 10px; }
.roadmap-phase-progress .progress-track { height: 5px; }
.roadmap-phase-milestones { align-items: center; color: var(--muted); display: flex; font-size: 10px; gap: 5px; margin: 4px 0 8px 37px; }
.roadmap-phase-milestones .ui-icon { height: 13px; width: 13px; }
.roadmap-objectives { margin-left: 37px; }
.roadmap-objective { border-top: 1px solid var(--line); padding: 6px 0; }
.roadmap-objective-link { align-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; display: flex; gap: 7px; padding: 2px 0; text-align: left; width: 100%; }
.roadmap-objective-link > span .ui-icon { color: var(--brand-accent); height: 14px; width: 14px; }
.roadmap-objective-link strong { flex: 1; font-size: 11px; }
.roadmap-objective-link small { color: var(--muted); font-size: 10px; }
.roadmap-task-list { display: grid; gap: 2px; margin: 4px 0 0 21px; }
.roadmap-task-row { align-items: center; display: grid; gap: 6px; grid-template-columns: 15px minmax(0, 1fr) auto; min-height: 25px; }
.roadmap-task-row > a { color: var(--ink); font-size: 10px; min-width: 0; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.roadmap-task-status .ui-icon { height: 13px; width: 13px; }
.roadmap-task-row .status-tag { font-size: 9px; padding: 2px 4px; }
.roadmap-exit-criteria { border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; margin: 7px 0 0 37px; padding-top: 6px; }
.roadmap-exit-criteria summary { cursor: pointer; }
.roadmap-exit-criteria ul { line-height: 1.5; margin: 4px 0 0; padding-left: 16px; }
.roadmap-empty { padding: 18px; }
@media (max-width: 760px) {
  .roadmap-phase-card { padding: 9px; }
  .roadmap-phase-progress { grid-template-columns: 1fr; margin-left: 0; }
  .roadmap-phase-milestones, .roadmap-objectives, .roadmap-exit-criteria { margin-left: 0; }
}