/* Model Studio: the name, the upload, the buttons and the answers in a
   narrow left column (as Record Studio); the two tools in tabs on the right. */
#dq-model-studio { --dqms-blue: #1f5f7a; --dqms-line: #d6e3e9; color: #23282d; }
.dqms-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .dqms-layout { grid-template-columns: 1fr; } }
.dqms-side > * + * { margin-top: 12px; }

.dqms-namebox { background: #fdf6e3; border: 1px solid #ecdcae; border-radius: 6px; padding: 10px 12px; }
.dqms-namebox label { display: block; font-weight: 600; font-size: 14px; }
.dqms-req { color: #b32d2e; }
.dqms-name { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; font-size: 15px; border: 1px solid #c8b98a; border-radius: 4px; }

.dqms-upload { background: #eef5f8; border: 2px dashed var(--dqms-line); border-radius: 6px; padding: 14px 12px; text-align: center; }
.dqms-upload.over { border-color: var(--dqms-blue); background: #e3eff4; }
.dqms-upload p { margin: 8px 0 0; font-size: 13px; color: #4b5563; }

.dqms-btn { display: inline-block; border: 1px solid var(--dqms-blue); border-radius: 4px; padding: 8px 14px; font-size: 14px; line-height: 1.3; background: #fff; color: var(--dqms-blue); cursor: pointer; }
.dqms-primary { background: var(--dqms-blue); color: #fff; }
.dqms-btn:disabled { opacity: .45; cursor: default; }

/* What to do next pulses: the name, then Upload scans (as in the tools). */
@keyframes dqms-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(219, 166, 23, .0); } 50% { box-shadow: 0 0 0 4px rgba(219, 166, 23, .55); } }
.dqms-flash { animation: dqms-pulse 1.4s ease-in-out infinite; }

.dqms-summary { font-size: 14px; font-weight: 600; margin: 0; }
.dqms-unused { margin: 0; padding-left: 18px; font-size: 13px; color: #8a4b08; }

.dqms-actions, .dqms-plate { border: 1px solid var(--dqms-line); border-radius: 6px; padding: 10px 12px; }
.dqms-actions .dqms-btn, .dqms-plate .dqms-btn { width: 100%; }
.dqms-answer { font-size: 13px; color: #1f3d2b; }
.dqms-answer:not(:empty) { margin: 8px 0; padding: 6px 8px; background: #eef7f0; border-left: 3px solid #2e7d4f; border-radius: 3px; }
.dqms-answer p { margin: 0; }
.dqms-answer p + p { margin-top: 4px; }
.dqms-answer:empty + .dqms-next { margin-top: 10px; }
.dqms-plate-note { display: block; min-height: 1em; margin-top: 3px; font-size: 12px; color: #4b5563; }
.dqms-other { margin: 0; padding: 6px 8px; font-size: 13px; color: #8a4b08; background: #fdf6e3; border-left: 3px solid #dba617; border-radius: 3px; }
.dqms-error { margin: 0; padding: 8px 10px; font-size: 14px; color: #fff; background: #b32d2e; border-radius: 4px; }
.dqms-note { display: block; font-size: 12px; color: #6b7280; }

.dqms-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--dqms-line); }
.dqms-tab { border: 1px solid var(--dqms-line); border-bottom: none; border-radius: 6px 6px 0 0; background: #f4f8fa; padding: 8px 18px; font-size: 15px; font-weight: 600; color: #4b5563; cursor: pointer; }
.dqms-tab[aria-selected="true"] { background: var(--dqms-blue); border-color: var(--dqms-blue); color: #fff; }
.dqms-tab-status { font-weight: 400; font-size: 12px; margin-left: 4px; opacity: .9; }
.dqms-panel { padding-top: 14px; }
.dqms-empty { color: #6b7280; text-align: center; padding: 30px 0; }

.dqms-title-version { font-size: 55%; font-weight: 400; color: #6b7280; }
.dqms-title-beta { font-size: 55%; font-weight: 600; color: #b26200; margin-left: 6px; }
.dqms-privacy { text-align: center; font-size: 13px; color: #6b7280; }

/* The Model Prep tab (Jacques, 24 Oct): a big preview on the left; the Upper
   and Lower model cards one above the other; Settings to their right, level
   with the Upper model card. Model Prep keeps Settings in its side column and the
   preview and cards in its main column: here both columns step aside
   (display: contents) so their parts share one grid. Everything is under
   #dq-model-studio, so Model Prep's own page is unchanged. */
#dq-model-studio .dqmp-embedded { container-type: inline-size; }
#dq-model-studio .dqmp-embedded .dqmp-side,
#dq-model-studio .dqmp-embedded .dqmp-main,
#dq-model-studio .dqmp-embedded .dqmp-results { display: contents; }
#dq-model-studio .dqmp-embedded .dqmp-grid {
  display: grid; gap: 12px 16px; align-items: start; margin-top: 0;
  grid-template-columns: minmax(0, 1fr) 210px 290px;
  grid-template-areas:
    "toolbar toolbar toolbar"
    "stage   upper   settings"
    "stage   lower   settings"
    "stage   both    pbar"
    "trim    trim    trim"
    "note    note    note";
  grid-template-rows: auto auto auto 1fr;
}
#dq-model-studio .dqmp-embedded .dqmp-toolbar { grid-area: toolbar; }
#dq-model-studio .dqmp-embedded .dqmp-stage { grid-area: stage; height: min(720px, calc(100vh - 160px)); min-height: 480px; }
#dq-model-studio .dqmp-embedded .dqmp-trimbar { grid-area: trim; }
#dq-model-studio .dqmp-embedded .dqmp-disclaimer { grid-area: note; }
#dq-model-studio .dqmp-embedded .dqmp-result { grid-area: upper; margin: 0; }
#dq-model-studio .dqmp-embedded .dqmp-result ~ .dqmp-result { grid-area: lower; }
#dq-model-studio .dqmp-embedded .dqmp-both { grid-area: both; margin: 0; }
#dq-model-studio .dqmp-embedded .dqmp-progress { grid-area: pbar; }
/* Settings in one column, so its help text reads normally. */
#dq-model-studio .dqmp-embedded .dqmp-settings { grid-area: settings; grid-template-columns: minmax(0, 1fr); margin: 0; }
/* Too narrow for three columns (the Model Prep tab under about 1000 px wide):
   the preview, and beside it the cards with Settings under them. */
@container (max-width: 999px) {
  #dq-model-studio .dqmp-embedded .dqmp-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
    grid-template-areas:
      "toolbar toolbar"
      "stage   upper"
      "stage   lower"
      "stage   both"
      "stage   pbar"
      "stage   settings"
      "trim    trim"
      "note    note";
    grid-template-rows: auto auto auto auto auto 1fr;
  }
}
/* A phone or a small window: one column. */
@container (max-width: 640px) {
  #dq-model-studio .dqmp-embedded .dqmp-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toolbar" "stage" "upper" "lower" "both" "pbar" "settings" "trim" "note";
    grid-template-rows: none;
  }
  #dq-model-studio .dqmp-embedded .dqmp-stage { height: 360px; min-height: 0; }
}