/* Made by the team (2026-10-28, Jonathan: "doesn't look great, could be easier to look at"): a page in the main area (desktop
   #vMade, phone VIEW.made), header from protos.css (pt-head). Cockpit tokens only, so light and dark both read; phone tap
   targets >= 44 px, chips scroll sideways. */
.md-tools{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.md-chips{display:flex;gap:6px;flex-wrap:wrap}
.md-chip{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.md-chip:hover{background:var(--fill-hover)}
.md-chip.on{background:var(--teal);color:var(--on-accent);border-color:transparent;font-weight:700}
.md-chip:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.md-n{opacity:.7;font-weight:600;margin-left:2px}
.md-grp{margin:0 0 18px}
.md-gh{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px}
.md-av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--teal-dim);color:var(--teal);font-weight:800;font-size:12px;flex:0 0 auto}
.md-av.sm{width:20px;height:20px;font-size:10.5px}
.md-av.off{background:var(--fill-hover);color:var(--dim)}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.md-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);min-width:0}
.md-top{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.md-t{font-weight:700;font-size:14px;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.md-id{color:var(--dim);font-weight:500;font-size:12px}
.md-d{font-size:12.5px;color:var(--muted);line-height:1.45}
.md-meta{font-size:12px;color:var(--dim);display:flex;gap:4px 10px;flex-wrap:wrap}
.md-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px;border-top:1px solid var(--border)}
.md-crew{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.md-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.md-acts .btn{padding:6px 12px;text-decoration:none}
.md-note{font-size:12px;color:var(--dim)}
.md-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;flex:0 0 auto;text-transform:capitalize;color:var(--muted);background:var(--fill-hover)}
.md-st.md-wait{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.md-st.md-ok{color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,transparent)}
.md-st.md-live{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.md-st.md-bad{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.md-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px;border:1px dashed var(--border);border-radius:12px;color:var(--text);max-width:640px;line-height:1.5}
.md-err{border-style:solid;border-color:color-mix(in srgb,var(--red) 35%,transparent)}
@media (max-width:768px){
  .md-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .md-chips::-webkit-scrollbar{display:none}
  .md-chip{min-height:40px}
  .md-grid{grid-template-columns:1fr}
  .md-acts .btn{min-height:44px;flex:1;text-align:center}
  .md-acts{width:100%}
  .pt-tools{width:100%}.pt-tools .pt-q{flex:1;min-width:0}
}