/* Planning tools use the existing Matmap palette and input language. */
.touch-caption, .fit-label { display: none; }
[hidden] { display: none !important; }
.graph-link span { display: block; }
.graph-link small { display: block; font-size: 9px; color: var(--muted); font-weight: 400; }
.collection-back { background: none; border: 0; padding: 0; font-size: 12px; color: var(--violet); min-height: 26px; }
.collection-back .icon { width: 13px; transform: rotate(180deg); order: -1; }
.collection-heading { align-items: center; }
.collection-heading > .button { flex-shrink: 0; min-height: 42px; }
.collection-guide { display: flex; gap: 15px; align-items: flex-start; padding: 22px; border-left: 3px solid var(--teal); background: #eef6f4; margin-bottom: 26px; border-radius: 0 8px 8px 0; }
.collection-guide > span { color: var(--teal); padding-top: 2px; }
.collection-guide strong { font-size: 15px; }
.collection-guide p { color: #536f70; font-size: 12px; line-height: 1.8; margin-top: 6px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 18px; }
.plan-card { align-items: stretch; justify-content: flex-start; flex-direction: column; text-align: left; gap: 0; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 22px; min-width: 0; }
.plan-card:hover { border-color: var(--violet); background: #fdfcff; }
.plan-card-kind { font-size: 11px; color: var(--violet); margin-bottom: 14px; }
.plan-card > strong { font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; }
.plan-card > p { font-size: 12px; color: #657189; line-height: 1.9; margin: 10px 0 20px; overflow-wrap: anywhere; white-space: pre-wrap; }
.plan-card-footer { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 15px; }
.plan-card-footer > span { color: var(--violet); }
.scenario-brief { display: flex; align-items: center; gap: 14px; background: #f8f6fc; border-top: 1px solid var(--line); padding: 12px 32px; flex-shrink: 0; }
.scenario-brief > span { color: var(--violet); font-size: 11px; font-weight: 650; flex-shrink: 0; }
.scenario-brief > p { font-size: 12px; line-height: 1.75; color: #536078; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.scenario-brief .button { margin-left: auto; flex-shrink: 0; }
.scenario-situation { min-width: 0; flex: 1; }
.scenario-situation summary { color: var(--violet); font-size: 12px; cursor: pointer; line-height: 1.9; }
.scenario-situation summary span { color: #536078; margin-left: 12px; }
.scenario-situation:not([open]) summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-situation[open] summary span { display: none; }
.scenario-situation > p { max-height: 140px; overflow: auto; margin-top: 8px; font-size: 12px; line-height: 1.85; color: #536078; }
.view-tools[hidden] { display: none; }
.view-tabs { flex-shrink: 0; }
.node-next-actions { display: grid; gap: 8px; margin: 18px 0; }
.node-next-actions .button { min-height: 40px; }
.branch-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.branch-shortcuts button { min-height: 40px; border: 1px solid #bbdad4; background: #edf7f4; color: #216960; border-radius: 6px; font-size: 12px; }
.branch-shortcuts button:last-child { color: #a13e53; background: #fcf2f4; border-color: #ecced5; }
.branch-shortcuts button:hover { filter: brightness(.97); }
.start-badge { margin-left: 6px; background: var(--violet-light); color: var(--violet); padding: 4px 7px; border-radius: 4px; font-size: 10px; }
.next-connections { margin-top: 17px; }
.connection-card { border: 1px solid var(--line); border-left: 3px solid #a99acb; border-radius: 6px; padding: 0 11px 10px; margin-bottom: 10px; }
.connection-card.outcome-success { border-left-color: var(--teal); }
.connection-card.outcome-failure { border-left-color: var(--danger); }
.connection-card .connection-row { border: 0; gap: 7px; }
.connection-card .connection-row > button:first-of-type { flex: 1; min-height: 40px; }
.connection-card .connection-row > .icon-button { min-height: 36px; min-width: 32px; justify-content: center; }
.connection-card .connection-row strong { font-size: 12px; max-width: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.65; margin-top: 3px; }
.connection-card .connection-row small { color: #68758e; font-size: 10px; }
.connection-label { color: var(--ink); font-size: 12px; margin-bottom: 5px; overflow-wrap: anywhere; }
.connection-condition { color: #657189; font-size: 11px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.connection-detail { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.connection-detail summary, .technique-reference summary, .journey-note summary { color: var(--violet); font-size: 12px; cursor: pointer; padding: 8px 0; line-height: 1.6; }
summary:focus-visible { outline: 3px solid #b4a0eb; outline-offset: 2px; border-radius: 3px; }
.connection-detail p { font-size: 12px; line-height: 1.9; margin: 5px 0; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.technique-reference { margin-top: 23px; border-top: 1px solid var(--line); padding-top: 8px; }
.technique-reference .alias-chips { margin-top: 10px; }
.edge-label { border: 1px solid #ded9ec; max-width: 150px; overflow: hidden; text-overflow: ellipsis; min-height: 28px; font-size: 10px; color: #66567f; padding: 5px 8px; background: #fcfaff; gap: 2px; }
.edge-label.outcome-success { color: #216960; background: #edf7f4; border-color: #bbdad4; }
.edge-label.outcome-failure { color: #a13e53; background: #fcf2f4; border-color: #ecced5; }
.edge-caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kind-picker { border: 0; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind-picker legend { font-size: 12px; color: #556178; font-weight: 550; margin-bottom: 10px; }
.kind-picker label { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 14px 10px; cursor: pointer; }
.kind-picker label:has(input:checked) { border-color: var(--violet); background: #f7f4fd; }
.kind-picker input { accent-color: var(--violet); margin: 3px 0 0; }
.kind-picker strong { display: block; font-size: 13px; }
.kind-picker small { display: block; margin-top: 6px; font-size: 11px; color: #657189; line-height: 1.65; }
.field-hint { color: #657189; font-size: 11px; line-height: 1.8; margin: 8px 0 16px; }
.pick-item > span { min-width: 0; overflow-wrap: anywhere; }
.pick-item > span > small { display: block; margin-top: 5px; line-height: 1.65; color: #657189; }
.pick-item > small { flex-shrink: 0; }
.picker-empty { padding: 22px 16px; font-size: 12px; line-height: 1.8; }
.picker-empty p { color: #657189; margin-top: 6px; }
.journey { flex: 1; overflow: auto; padding: 24px max(24px, calc((100% - 880px) / 2)); }
.journey-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.journey-toolbar > span { color: var(--violet); font-size: 12px; font-weight: 600; }
.journey-toolbar > div { display: flex; gap: 6px; }
.journey-current { background: white; border: 1px solid var(--line); border-top: 3px solid var(--violet); border-radius: 8px; padding: 24px; }
.journey-kicker { font-size: 11px; color: var(--violet); }
.journey-current h2 { margin: 10px 0; font-size: 24px; line-height: 1.5; overflow-wrap: anywhere; }
.journey-current > p { color: #657189; font-size: 13px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.journey-arrival { border-left: 2px solid var(--teal); background: #f3f8f6; padding: 14px 16px; margin: 18px 0; font-size: 13px; line-height: 1.85; }
.journey-arrival p { margin-top: 7px; color: #536f70; white-space: pre-wrap; overflow-wrap: anywhere; }
.journey-note { margin-top: 16px; font-size: 13px; line-height: 1.85; }
.text-button { background: none; border: 0; padding: 10px 0; font-size: 12px; color: var(--violet); min-height: 40px; margin-top: 10px; }
.journey-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 24px 0; }
.journey-choices h3, .journey-choices > p { grid-column: 1 / -1; font-size: 14px; line-height: 1.8; }
.journey-choices > p { font-size: 12px; color: #657189; }
.journey-choice { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 18px; align-items: flex-start; text-align: left; flex-direction: column; gap: 9px; }
.journey-choice:hover { border-color: var(--violet); background: #fdfcff; }
.journey-choice > strong { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.journey-choice > p { font-size: 12px; color: #657189; line-height: 1.85; overflow-wrap: anywhere; white-space: pre-wrap; }
.journey-choice > small, .choice-target { font-size: 11px; color: #657189; line-height: 1.7; }
.outcome-badge { font-size: 11px; padding: 5px 8px; border-radius: 4px; background: var(--violet-light); color: var(--violet); }
.outcome-success .outcome-badge { background: #edf7f4; color: #216960; }
.outcome-failure .outcome-badge { background: #fcf2f4; color: #a13e53; }
@media (max-width: 1100px) {
  .viewbar { flex-wrap: wrap; height: auto; }
  .view-tabs, .view-tools { min-height: 48px; }
}
@media (max-width: 620px) {
  .canvas-controls { left: 14px; right: 14px; bottom: 14px; justify-content: space-between; gap: 2px; }
  .canvas-controls button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .canvas-controls button[data-action="fit"] { width: auto; padding: 0 9px; gap: 5px; font-size: 12px; }
  .canvas-controls svg { width: 18px; height: 18px; }
  .canvas-controls .zoom-value { min-width: 36px; font-size: 12px; }
  .canvas-controls .divider { margin: 0; }
  .canvas-area .canvas-caption { bottom: 76px; left: 17px; max-width: none; line-height: 1.7; font-size: 11px; }
  .canvas-caption .mouse-caption { display: none; }
  .canvas-caption .touch-caption, .canvas-controls .fit-label { display: inline; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 16px; }
  .topbar .breadcrumb { width: 100%; min-height: 26px; }
  .topbar .graph-picker { max-width: 100%; font-size: 12px; }
  .topbar .top-actions { justify-content: flex-end; width: 100%; }
  .collection-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .collection-heading > .button { width: 100%; }
  .collection-guide { padding: 16px; gap: 10px; margin-bottom: 18px; }
  .collection-guide p { font-size: 12px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plan-card { padding: 20px; }
  .scenario-brief { padding: 12px 17px; gap: 9px; }
  .scenario-brief > p { font-size: 11px; }
  .scenario-brief .button span { display: none; }
  .scenario-brief .button { min-height: 38px; padding: 8px; }
  .view-tabs { gap: 16px; }
  .node-next-actions .button, .branch-shortcuts button { min-height: 44px; }
  .connection-card .connection-row > .icon-button { min-height: 44px; min-width: 38px; }
  .connection-condition, .connection-detail p { font-size: 12px; }
  .kind-picker { gap: 8px; }
  .kind-picker label { padding: 12px 9px; }
  .kind-picker small { font-size: 10px; }
  .form-row { flex-wrap: wrap; }
  .form-row > .form-field { min-width: 120px; }
  .journey { overflow: visible; padding: 18px 17px; }
  .journey-current { padding: 19px; }
  .journey-current h2 { font-size: 22px; }
  .journey-choices { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 20px; }
  .journey-choice { padding: 18px; }
  .journey-toolbar .button { min-height: 40px; padding: 8px 10px; font-size: 11px; }
  .journey-toolbar > span { font-size: 11px; }
}
@media (pointer: coarse) and (min-width: 621px) {
  .canvas-controls button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .canvas-area .canvas-caption { bottom: 80px; }
  .canvas-caption .mouse-caption { display: none; }
  .canvas-caption .touch-caption { display: inline; }
}