/* webstudio.css — WEB STUDIO section for MC v3 (2026-08-15, additive).
   Scoped under .ws — never touches style.css or sibling sections. */
.ws { display: flex; flex-direction: column; gap: 14px; }
.ws-subhead { color: var(--muted, #8b93a7); font-size: 12px; margin-bottom: 2px; }
.ws-sources { color: var(--muted, #8b93a7); font-size: 11px; font-family: ui-monospace, monospace; }

.ws-block { border: 1px solid var(--line, #1e2740); border-radius: 8px; padding: 12px 14px; background: var(--panel, #0d1326); }
.ws-block-title { font-weight: 700; letter-spacing: 0.04em; font-size: 12px; text-transform: uppercase; margin-bottom: 10px; color: var(--bone, #e8e6df); }
.ws-note { color: var(--muted, #8b93a7); font-size: 11px; margin-top: 8px; }
.ws-honesty ul { margin: 6px 0 0 18px; color: var(--muted, #8b93a7); font-size: 11px; }

.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ws-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8b93a7); margin: 6px 0 8px; }
.ws-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ws-card { border: 1px solid var(--line, #1e2740); border-radius: 6px; padding: 8px 10px; background: var(--panel2, #111830); }
.ws-card .ws-big { font-size: 20px; font-weight: 700; margin: 2px 0; color: var(--bone, #e8e6df); }
.ws-card .meta { font-size: 10px; }
.ws-na { font-style: italic; }

.ws-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ws-chip { border: 1px solid var(--line, #1e2740); background: transparent; color: var(--muted, #8b93a7);
  border-radius: 999px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.ws-chip.on { background: var(--accent, #c5a24d); color: #0a0e1f; border-color: var(--accent, #c5a24d); font-weight: 700; }
.ws-chip.flat { cursor: default; background: #141b33; }

.ws-trend { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 8px; }
.ws-trend-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; flex: 1; }
.ws-trend-bar { width: 100%; max-width: 26px; background: var(--accent, #c5a24d); border-radius: 2px 2px 0 0; opacity: 0.85; }
.ws-trend-lbl { font-size: 9px; color: var(--muted, #8b93a7); }

.ws-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ws-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8b93a7); border-bottom: 1px solid var(--line, #1e2740); padding: 6px 8px; }
.ws-table td { padding: 6px 8px; border-bottom: 1px solid rgba(30,39,64,0.5); vertical-align: middle; }
.ws-cur { font-weight: 700; }
.ws-tgt { color: var(--muted, #8b93a7); font-size: 11px; }
.ws-kpi-group { color: var(--muted, #8b93a7); font-size: 11px; text-transform: uppercase; }

.ws-lcbar { display: flex; align-items: center; gap: 3px; min-width: 150px; }
.ws-lc-dot { width: 7px; height: 7px; border-radius: 50%; background: #232c4a; }
.ws-lc-dot.done { background: var(--accent, #c5a24d); }
.ws-lcpos { font-size: 10px; margin-left: 4px; white-space: nowrap; }

.ws-detail { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ws-detail-row { display: flex; gap: 10px; font-size: 12px; }
.ws-detail-row .ws-k { min-width: 110px; color: var(--muted, #8b93a7); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ws-tasks { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; }
.ws-task { font-size: 12px; display: flex; gap: 8px; align-items: center; }
.ws-tasksum { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted, #8b93a7); }

.ws-pipe-total { font-size: 12px; font-weight: 700; margin: 4px 0; }
.ws-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-fail { font-size: 11px; color: #e07b7b; margin: 3px 0; }

@media (max-width: 640px) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-cards { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .ws-table { font-size: 11px; }
  .ws-lcbar { min-width: 0; }
  .ws-detail-row { flex-direction: column; gap: 2px; }
}