/* Target planner (วางแผนเป้า) page. Mobile first; wide tables and charts scroll inside their own box. */
.tp{color:#1f2937;max-width:1280px;margin:0 auto;padding:4px 0 32px;min-width:0;letter-spacing:0}
.tp *{box-sizing:border-box}
.tp h2{font-size:22px;margin:0 0 4px;color:#111827}
.tp h3{font-size:16px;margin:0 0 10px;color:#111827;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tp h4{font-size:13px;margin:0 0 6px;color:#374151}
.tp p{margin:0 0 6px;line-height:1.6;overflow-wrap:anywhere}
.tp small{display:block;color:#6b7280;font-size:11px;line-height:1.5;font-weight:500}
.tp b{font-weight:800}
.tp :focus-visible{outline:3px solid #0f766e;outline-offset:2px}
.tp input[type=text]{font:inherit;font-size:15px;font-weight:700;width:96px;min-height:38px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#111827;text-align:right;font-variant-numeric:tabular-nums}
.tp input[aria-invalid=true]{border-color:#dc2626;background:#fef2f2}
.tp-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.tp-head p{color:#4b5563;font-size:13px}
.tp-meta{font-size:12px!important;color:#6b7280!important}
.tp-saved{border:1px solid #bbf7d0;background:#f0fdf4;border-radius:12px;padding:10px 12px;font-size:12px;display:grid;gap:4px;max-width:420px}
.tp-saved strong{color:#15803d}
.tp-chip{display:inline-block;font-size:11px;font-weight:700;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 8px;white-space:nowrap}
.tp-link{background:none;border:0;color:#1d4ed8;font:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px 0;justify-self:start}
.tp-steps{display:grid;gap:12px;margin-bottom:16px}
.tp-step{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.tp-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:#242424;color:#f5b700;font-size:13px;font-weight:900;flex-shrink:0}
.tp-choices{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.tp-choices-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tp-choice{display:grid;gap:4px;align-content:start;text-align:left;font:inherit;color:#1f2937;background:#f9fafb;border:2px solid #e5e7eb;border-radius:12px;padding:12px 14px;cursor:pointer;min-height:64px}
.tp-choice strong{font-size:15px}
.tp-choice span{font-size:13px;color:#374151;font-weight:600}
.tp-choice:hover{border-color:#f5b700}
.tp-choice.on{border-color:#f5b700;background:#fffbea;box-shadow:0 0 0 1px #f5b700 inset}
.tp-big strong{font-size:18px}
.tp-inline{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.tp-hint{font-size:12px!important;color:#6b7280!important;margin-top:8px!important}
.tp-assume summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:16px;font-weight:800;color:#111827;list-style:none;flex-wrap:wrap}
.tp-assume summary::-webkit-details-marker{display:none}
.tp-assume summary::after{content:'▼';font-size:11px;color:#6b7280;margin-left:auto}
.tp-assume[open] summary::after{content:'▲'}
.tp-assume summary small{display:inline;font-weight:600}
.tp-assume[open] summary{margin-bottom:12px}
.tp-assume-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:12px}
.tp-assume-grid>div{border:1px solid #f1f5f9;background:#f8fafc;border-radius:10px;padding:10px;display:grid;gap:6px;align-content:start}
.tp-assume-foot{display:grid;gap:4px;margin-top:8px}
.tp-pills{display:flex;gap:6px;flex-wrap:wrap}
.tp-pill{font:inherit;font-size:12px;font-weight:700;border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;color:#374151;min-height:34px}
.tp-pill.on{background:#242424;border-color:#242424;color:#f5b700}
.tp-error{color:#b91c1c;font-size:12px;font-weight:700;min-height:0;margin:6px 0 0!important}
.tp-error:empty{display:none}
.tp-note-warn{color:#b45309!important;font-size:12px!important;font-weight:700}
.tp-history-box{margin-top:12px}
.tp-history-box summary{cursor:pointer;font-size:13px;font-weight:800;color:#1d4ed8}
.tp-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tp-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.tp-table th,.tp-table td{padding:8px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}
.tp-table thead th{background:#f8fafc;color:#475569;font-size:11px;font-weight:800;white-space:nowrap}
.tp-table tbody th{font-weight:700;white-space:nowrap}
.tp-assume-table{min-width:760px}
.tp-assume-table td{min-width:170px}
.tp-history{min-width:760px}
.tp-history td{white-space:nowrap}
.tp-history .tp-best{background:#fffbea}
.tp-history tfoot th,.tp-history tfoot td{background:#f8fafc;font-weight:700;white-space:normal}
.tp-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;vertical-align:middle;flex-shrink:0}
.tp-headline{background:#242424;color:#fff;border-radius:16px;padding:16px;margin-bottom:14px}
.tp-sentence{font-size:18px;line-height:1.6!important;margin:0 0 12px!important}
.tp-sentence b{color:#f5b700;font-size:22px}
.tp-growth{color:#fde68a;font-weight:800}
.tp-bad{display:inline-block;color:#fecaca;font-weight:800}
.tp-good{display:inline-block;color:#bbf7d0;font-weight:800}
.tp-warn{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.tp-warn li{background:#fef3c7;color:#92400e;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700}
.tp-warn li::before{content:'⚠ '}
.tp-warn li.tp-warn-surplus{background:#dcfce7;color:#166534}
.tp-warn li.tp-warn-surplus::before{content:'✓ '}
.tp-kpis{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tp-kpi{background:rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.tp-kpi span{font-size:11px;color:#d1d5db;font-weight:700}
.tp-kpi strong{font-size:20px;color:#fff;font-variant-numeric:tabular-nums}
.tp-kpi small{color:#d1d5db}
.tp-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin-bottom:14px;min-width:0}
.tp-bridge{display:grid;gap:8px}
.tp-bridge-row{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:4px 10px;align-items:center;font-size:12px}
.tp-bridge-label{grid-column:1/-1;color:#374151;font-weight:700}
.tp-bridge-row strong{text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.tp-bridge-track{position:relative;height:16px;background:#f3f4f6;border-radius:6px;overflow:hidden}
.tp-bridge-bar{display:block;height:100%;border-radius:6px}
.tp-base{background:#94a3b8}
.tp-loss{background:#f87171}
.tp-new{background:#34d399}
.tp-total{background:#f5b700}
.tp-short{background:#fb923c}
.tp-target-mark{position:absolute;top:0;bottom:0;width:3px;background:#111827;transform:translateX(-1px)}
.tp-bridge-target .tp-bridge-track{background:transparent;border-top:1px dashed #cbd5e1;border-radius:0}
.tp-plan{min-width:860px}
.tp-plan th[scope=row]{min-width:170px}
.tp-plan th[scope=row],.tp-plan thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #eef2f7}
.tp-plan thead th:first-child{background:#f8fafc}
.tp-plan th[scope=row] small{font-weight:600}
.tp-plan td{text-align:center;font-size:14px;font-weight:700;min-width:44px}
.tp-plan td.tp-zero{color:#cbd5e1}
.tp-plan td.tp-has{color:#111827;background:#fffbea}
.tp-plan .tp-sum{background:#f8fafc;font-weight:900}
.tp-plan tfoot th,.tp-plan tfoot td{border-top:2px solid #e5e7eb;font-weight:900}
.tp-plan tfoot .tp-muted th,.tp-plan tfoot .tp-muted td{color:#b91c1c;font-weight:700;border-top:0;font-size:12px}
.tp .tp-cell{width:48px;min-height:34px;padding:4px;text-align:center;font-size:14px}
.tp-charts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:12px}
.tp-charts figure{margin:0;border:1px solid #f1f5f9;border-radius:12px;padding:10px;min-width:0}
.tp-charts figcaption{font-size:12px;font-weight:800;color:#374151;margin-bottom:6px}
.tp-svg{display:block;width:100%;min-width:560px;height:auto}
.tp-gridline{stroke:#e5e7eb;stroke-width:1}
.tp-axis{font-size:11px;fill:#6b7280}
.tp-bar-label{font-size:11px;font-weight:800;fill:#111827}
.tp-area{fill:#fde68a;opacity:.55}
.tp-line{fill:none;stroke:#b45309;stroke-width:2.5;stroke-linejoin:round}
.tp-pace{stroke:#111827;stroke-width:1.5;stroke-dasharray:6 5}
.tp-hit{fill:#fff;opacity:.001;cursor:help}
.tp-end-label{font-size:11px;font-weight:800;fill:#b45309}
.tp-end-target{fill:#111827}
.tp-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:700;color:#374151;margin-top:6px}
.tp-ports{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:14px}
.tp-port{background:#fff;border:1px solid #e5e7eb;border-top:4px solid var(--tp-port,#64748b);border-radius:14px;padding:14px;display:grid;gap:4px;align-content:start;font-size:13px}
.tp-port header{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.tp-port h4{font-size:15px;margin:0 6px 0 0;color:#111827}
.tp-port-main{font-size:15px}
.tp-port-main b{font-size:20px;color:var(--tp-port,#111827)}
.tp-label{font-weight:800;color:#374151}
.tp-port dl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 0}
.tp-port dl div{background:#f8fafc;border-radius:8px;padding:6px 8px}
.tp-port dt{font-size:11px;color:#6b7280;font-weight:700}
.tp-port dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.tp-port-warn{background:#fef3c7;color:#92400e;border-radius:8px;padding:6px 8px;font-weight:700;font-size:12px;margin-top:6px!important}
.tp-withdraw{min-width:820px}
.tp-withdraw td,.tp-withdraw th{white-space:normal}
.tp-withdraw th[scope=row]{min-width:180px}
.tp-withdraw td:last-child{min-width:240px}
.tp-num{text-align:right!important}
.tp-save{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:2px solid #f5b700;background:#fffbea;border-radius:14px;padding:14px}
.tp-save>div{flex:1 1 260px}
.tp-save p{font-size:12px;color:#4b5563}
.tp-primary{font:inherit;font-size:14px;font-weight:800;background:#f5b700;color:#242424;border:0;border-radius:10px;padding:12px 18px;cursor:pointer;min-height:44px}
.tp-primary:disabled{opacity:.5;cursor:not-allowed}
.tp-load-error{color:#b91c1c}
/* Header extras, scoped targets, history, per-project editors, submissions */
.tp-head-side{display:grid;gap:8px;max-width:440px}
.tp-saved-stale{border-color:#fde68a;background:#fffbeb}
.tp-saved-stale strong{color:#b45309}
.tp-sub-submitted{border-color:#bfdbfe;background:#eff6ff}
.tp-sub-submitted strong{color:#1d4ed8}
.tp-sub-returned{border-color:#fecaca;background:#fef2f2}
.tp-sub-returned strong{color:#b91c1c}
.tp-export{margin-left:6px;vertical-align:middle}
.tp-port-targets{display:flex;flex-wrap:wrap;gap:10px}
.tp-port-target{display:flex;align-items:center;gap:6px;border:2px solid #f5b700;background:#fffbea;border-radius:12px;padding:10px 14px;font-weight:700}
.tp-port-target strong{font-size:18px;margin-left:6px}
.tp-gaps{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px;font-size:14px;font-weight:700}
.tp-gaps .tp-bad{color:#fecaca}
.tp-gaps .tp-good{color:#bbf7d0}
.tp-sentence-tail:empty{display:none}
.tp-edits{font-size:12px!important;color:#fde68a!important;margin:-4px 0 10px!important}
.tp-history-sec h3{margin-bottom:4px}
.tp-hist-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.tp-hist-port{border:1px solid #e5e7eb;border-left:4px solid var(--tp-port,#64748b);border-radius:12px;padding:10px;min-width:0}
.tp-hist-port h4{font-size:14px;margin:0 0 4px}
.tp-compare{font-size:12px!important;color:#374151;margin:0 0 2px!important}
.tp-hist-table{min-width:640px}
.tp-hist-table .tp-best th,.tp-hist-table .tp-best td{background:#fffbea}
.tp-hist-chart{margin:12px 0 0;border:1px solid #f1f5f9;border-radius:12px;padding:10px}
.tp-hist-chart figcaption{font-size:12px;font-weight:800;color:#374151;margin-bottom:6px}
.tp-hist-new{fill:#34d399}
.tp-hist-wd{fill:#f87171}
.tp-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.tp select,.tp .tp-text,.tp input[type=search]{font:inherit;font-size:13px;min-height:34px;padding:4px 8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#111827}
.tp .tp-text{width:100%;min-width:180px;text-align:left;font-weight:500}
.tp .tp-money{width:110px;min-height:34px;font-size:13px;padding:4px 8px}
.tp-danger{color:#b91c1c!important}
.tp-existing{min-width:1100px}
.tp-existing th[scope=row]{min-width:180px;white-space:normal}
.tp-existing .tp-reasons{min-width:220px;font-size:11px;color:#4b5563}
.tp-row-wd th,.tp-row-wd td{background:#fef2f2}
.tp-new-list{min-width:760px}
.tp-new-list td:nth-child(2){min-width:220px}
.tp-chip-manual{background:#fef3c7;color:#92400e}
.tp-port-ok{background:#dcfce7;color:#166534;border-radius:8px;padding:6px 8px;font-weight:700;font-size:12px}
.tp-bad-line{color:#b91c1c;font-weight:800}
.tp-good-line{color:#15803d;font-weight:800}
.tp-bad-text{color:#b91c1c;font-weight:800}
.tp-subs{min-width:960px}
.tp-actions{white-space:nowrap}
.tp-actions .tp-pill{margin:0 4px}
.tp-return{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.tp-return label{display:grid;gap:4px;font-size:12px;font-weight:700;flex:1 1 320px}
.tp-return textarea{font:inherit;font-size:13px;border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;width:100%}
.tp-sub-detail{display:grid;gap:6px;padding:4px 0}
@media(max-width:640px){
  .tp-hist-grid{grid-template-columns:minmax(0,1fr)}
  .tp h2{font-size:19px}
  .tp-sentence{font-size:16px}
  .tp-sentence b{font-size:19px}
  .tp-step,.tp-card,.tp-port,.tp-headline{padding:12px}
  .tp-kpi strong{font-size:17px}
  .tp-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-choices-2{grid-template-columns:minmax(0,1fr)}
  .tp-targets .tp-input-choice{grid-column:1/-1}
}