/* 3.4: module-local workspace. Navy/slate and orange match the MS structure UI.
   Status colors retain their meaning; no rules target the surrounding WP theme. */
.msp-app {
    --ink: #173b57;
    --muted: #586d7b;
    --line: #d7e0e6;
    --soft: #f3f6f8;
    --brand: #173b57;
    --brand2: #244e6c;
    --accent: #ea6a22;
    --focus: #267899;
    font-size: 14px;
    line-height: 1.5;
    background: var(--soft);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(23,59,87,.06);
}
.msp-app [hidden] { display: none !important; }
.msp-app :is(button,input,select,textarea) { font-family: inherit; }
.msp-app :is(h2,h3,h4) { color: var(--ink); letter-spacing: -.02em; }
.msp-app button { line-height: 1.35; text-transform: none; letter-spacing: normal; }
.msp-app :is(button,summary,a,input,select,textarea,canvas):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
.msp-app :is(input,select,textarea) { max-width: 100%; min-width: 0; }
.msp-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.msp-app-header h2 { margin: 0; font-size: clamp(22px,2.5vw,28px); font-weight: 750; line-height: 1.2; }
.msp-app-header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.msp-header-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.msp-app .msp-status { border: 0; background: transparent; color: var(--muted); padding: 0; font-size: 12px; }
.msp-app .msp-status span { background: #17834f; box-shadow: none; }
.msp-app .msp-status[data-state=busy] span { background: #b26a00; }
.msp-app .msp-status[data-state=error] span { background: #bd2d2d; }
.msp-app .msp-fullscreen-button { min-height: 40px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); padding: 8px 12px; }
.msp-app .msp-projectbar { background: #fff; border-color: var(--line); gap: 12px 16px; padding: 18px 26px 14px; }
.msp-app .msp-projectbar label>span { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.msp-app .msp-projectbar :is(input,select) { min-height: 42px; color: var(--ink); border-color: #b9c7d0; border-radius: 7px; font-size: 13px; }
.msp-app .msp-projectbar__status { font-size: 11px; }
.msp-app .msp-mode-summary { color: var(--muted); padding-top: 2px; }
.msp-app .msp-mode-summary strong { color: var(--ink); white-space: nowrap; }
.msp-app .msp-project-save { background: var(--brand); border-color: var(--brand); min-height: 42px; border-radius: 7px; font-weight: 650; }
.msp-app .msp-projecttools>summary { min-height: 42px; border-color: var(--line); border-radius: 7px; color: var(--ink); font-weight: 600; }
.msp-app .msp-projecttools[open]>summary { background: var(--soft); border-color: var(--brand); }
.msp-app .msp-projectbar__actions :is(button,label) { color: var(--ink); border-color: var(--line); border-radius: 7px; font-weight: 600; }
.msp-app .msp-projectbar__actions button:hover { background: var(--soft); border-color: var(--brand); }
.msp-app .msp-tabs { display: flex; gap: 0; padding: 0 14px; background: #fff; overflow-x: auto; scrollbar-width: thin; }
.msp-app .msp-tabs button { flex: 1 0 170px; padding: 16px 12px; border-bottom: 3px solid transparent; color: var(--muted); }
.msp-app .msp-tabs button>strong { white-space: normal; overflow: visible; font-size: 12px; font-weight: 650; line-height: 1.4; }
.msp-app .msp-tabs button>small { color: var(--muted); font-size: 10px; }
.msp-app .msp-tabs button>span { background: #edf2f5; color: var(--muted); border-radius: 7px; }
.msp-app .msp-tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); background: #f7f9fb; }
.msp-app .msp-tabs button[aria-selected=true]>span,
.msp-app .msp-tabs button[data-state=current]>span { background: var(--ink); color: #fff; }
.msp-app .msp-tabs button[data-state=complete]>span { background: #e8f4ed; color: #166a43; }
.msp-app .msp-tabs button[data-state=attention]>span { background: #fff0d1; color: #805000; }
.msp-app .msp-tabs button:focus-visible { outline-offset: -4px; }
.msp-app .msp-layout { grid-template-columns: minmax(360px,.9fr) minmax(0,1.4fr); gap: 20px; padding: 20px; min-height: 620px; }
.msp-app .msp-controls { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: #fff; }
.msp-app .msp-visuals { min-width: 0; padding: 0; background: transparent; }
.msp-app .msp-panel__title { gap: 12px; margin-bottom: 22px; }
.msp-app .msp-panel__title>span { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 7px; background: #edf2f5; color: var(--ink); }
.msp-app .msp-panel__title h3 { font-size: 19px; font-weight: 700; }
.msp-app .msp-panel__title p { font-size: 12px; line-height: 1.5; }
.msp-app .msp-section-heading { margin-top: 24px; padding-bottom: 9px; border-color: var(--line); }
.msp-app .msp-section-heading strong { color: var(--ink); font-size: 13px; }
.msp-app .msp-section-heading span { color: var(--muted); line-height: 1.5; }
.msp-app .msp-field { margin-bottom: 16px; }
.msp-app .msp-field>span { font-size: 12px; font-weight: 650; }
.msp-app .msp-field :is(input:not([type=range]),select) { border-color: #b9c7d0; border-radius: 7px; min-height: 42px; padding: 9px 10px; font-size: 14px; box-shadow: none; }
.msp-app .msp-field :is(input,select):focus { border-color: var(--focus); }
.msp-app .msp-profile-station { padding: 14px; background: #f8fafb; border-color: var(--line); border-radius: 8px; }
.msp-app .msp-profile-station h4 { margin: 0; font-size: 13px; }
.msp-app .msp-details { border-radius: 8px; background: #f8fafb; }
.msp-app .msp-details>summary { color: var(--ink); font-size: 12px; padding: 13px; }
.msp-app .msp-details[open]>summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.msp-app :is(.msp-inline-upload,.msp-upload label) { background: #f8fafb; border-color: #aabecb; color: var(--ink); border-radius: 7px; }
.msp-app .msp-inline-upload:focus-within,.msp-app .msp-upload:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.msp-app :is(.msp-primary,.msp-secondary) { min-height: 44px; border-radius: 7px; font-size: 13px; font-weight: 650; box-shadow: none; }
.msp-app .msp-primary { background: var(--brand); }
.msp-app .msp-primary:hover { background: var(--brand2); transform: none; }
.msp-app :is(.msp-small-button,.msp-export-button,.msp-view-actions button,.msp-visual-toolbar__buttons button) { min-height: 38px; border-radius: 7px; border-color: var(--line); color: var(--ink); font-weight: 600; }
.msp-app .msp-export-button--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.msp-app :is(.msp-export-box,.msp-board-settings,.msp-project-intro) { background: #f8fafb; border-color: var(--line); border-radius: 8px; }
.msp-app .msp-result-action:not(.msp-result-action--ready):not([data-state=stale]) { background: #f1f5f8; border-color: var(--line); }
.msp-app .msp-export-button:hover { border-color: var(--brand); box-shadow: none; transform: none; }
.msp-app .msp-export-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.msp-app .msp-chart-card { border-radius: 10px; padding: 20px; box-shadow: 0 3px 12px rgba(23,59,87,.03); }
.msp-app .msp-card-head { gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #edf1f4; }
.msp-app .msp-card-head h3 { font-size: 18px; font-weight: 700; }
.msp-app .msp-card-head>div>span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.msp-app .msp-view-actions { flex-wrap: wrap; }
.msp-app .msp-visual-toolbar { border-radius: 10px; border-color: var(--line); padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
.msp-app .msp-visual-toolbar strong { color: var(--ink); }
.msp-app .msp-visual-toolbar__buttons button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.msp-app .msp-metrics>div { border-radius: 8px; background: #f8fafb; }
.msp-app .msp-metrics strong { color: var(--ink); }
.msp-app .msp-wing-3d { background: var(--soft); border-radius: 7px; }
.msp-app :is(.msp-mode-hint,.msp-alert--info,.msp-backend-note) { background: #f1f5f8; border-color: #8da8ba; color: #365365; }
.msp-app .msp-workflow-actions { background: #fff; border-color: var(--line); }
.msp-app .msp-workflow-actions>button { border-radius: 7px; border-color: var(--line); color: var(--ink); }
.msp-app .msp-workflow-actions>button:not(:disabled):focus-visible { outline: 3px solid var(--focus); }
.msp-app .msp-footer { background: #f8fafb; font-size: 11px; line-height: 1.6; }
.msp-app .msp-line-upper,.msp-app .msp-line-polar,.msp-app .msp-point { stroke: var(--brand); }
.msp-app .msp-line-lower { stroke: var(--accent); }
.msp-app .msp-legend i { background: var(--brand); }
@media(max-width:1100px) {
    .msp-app .msp-layout { grid-template-columns: minmax(320px,1fr) minmax(0,1.2fr); gap: 14px; padding: 14px; }
    .msp-app .msp-controls { padding: 18px; }
    .msp-app .msp-chart-grid { grid-template-columns: 1fr; }
}
@media(max-width:820px) {
    .msp-app .msp-layout { grid-template-columns: minmax(0,1fr); min-height: 0; }
    .msp-app .msp-controls { position: static; max-height: none; overflow: visible; }
    .msp-app .msp-app-header { padding: 18px; }
    .msp-app .msp-projectbar { padding: 16px 18px; }
    .msp-app .msp-tabs { padding: 0 6px; }
    .msp-app .msp-tabs button { flex-basis: 178px; }
}
@media(max-width:600px) {
    .msp-app { border-radius: 10px; margin: 12px auto; }
    .msp-app .msp-app-header { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
    .msp-app .msp-header-actions { width: 100%; justify-content: space-between; }
    .msp-app .msp-projectbar { grid-template-columns: minmax(0,1fr); }
    .msp-app .msp-layout { padding: 10px; gap: 14px; }
    .msp-app .msp-controls,.msp-app .msp-chart-card { padding: 16px; }
    .msp-app .msp-projectbar :is(input,select),.msp-app .msp-field :is(input:not([type=range]),select) { font-size: 16px; }
    .msp-app .msp-mode-summary strong { white-space: normal; }
    .msp-app .msp-card-head { flex-direction: column; }
    .msp-app .msp-wing-3d__hint { max-width: calc(100% - 24px); font-size: 10px; }
    .msp-app .msp-wing-3d__legend { left: 10px; right: 10px; bottom: 10px; gap: 6px 10px; }
    .msp-app .msp-projecttools .msp-projectbar__actions { width: 100%; }
}
@media(prefers-reduced-motion:reduce) {
    .msp-app *, .msp-app *::before, .msp-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Polar comparison, scoped to this module. */
[data-msp-app] .msp-polar-comparison {margin:20px 0;padding:18px;border:1px solid #d9e1e8;border-radius:12px;background:#fff;}
[data-msp-app] .msp-polar-comparison summary {font-weight:700;cursor:pointer;}
[data-msp-app] .msp-polar-tools {display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:12px 0;}
[data-msp-app] .msp-polar-tools label {display:grid;gap:6px;max-width:100%;}
[data-msp-app] .msp-polar-charts {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;}
[data-msp-app] .msp-polar-charts figure {margin:0;min-width:0;}
[data-msp-app] .msp-polar-charts svg {width:100%;height:auto;}
[data-msp-app] .msp-polar-table {overflow:auto;max-height:360px;}
[data-msp-app] .msp-polar-table td,[data-msp-app] .msp-polar-table th {padding:6px 10px;text-align:left;}
[data-msp-app] .msp-pc-line-0 {stroke:#1766b0;fill:none;stroke-width:2;}
[data-msp-app] .msp-pc-line-1 {stroke:#bd4f00;fill:none;stroke-width:2;stroke-dasharray:8 3;}
[data-msp-app] .msp-pc-line-2 {stroke:#177b57;fill:none;stroke-width:2;stroke-dasharray:3 3;}
[data-msp-app] .msp-pc-line-3 {stroke:#8549aa;fill:none;stroke-width:2;stroke-dasharray:9 3 2 3;}