/* Model Print: the tool's page. Colours as Occlusal view's. */
#dq-model-print { font-size: 15px; line-height: 1.45; }
#dq-model-print h3 { font-size: 16px; margin: 0 0 6px; color: #1f5f7a; text-align: center; }
#dq-model-print section, #dq-model-print .dqmpr-settings { margin: 0 0 16px; }

.dqmpr-free-box { border-left: 4px solid #1f5f7a; background: #f4f8fa; padding: .8em 1.1em; margin: 0 0 1.2em; }
.dqmpr-free-box p { margin: 0; }
.dqmpr-free-box .dqmpr-help-link { margin-top: .4em; font-weight: 600; }
.dqmpr-title-version { font-size: .55em; font-weight: 400; color: #6b7280; margin-left: .3em; }

/* The top: two columns that end level. Left: job name, printer, how the
   models stand and, under them, Add models (as tall as the Flat button);
   right: credits and plans. Nothing to buy (staff, testers): one column.
   The layout follows the tool's own width (a container query), so it
   works in any theme column; narrow, it is one column with credits last. */
#dq-model-print { container: dqmpr / inline-size; }
.dqmpr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; margin: 0 0 16px; }
.dqmpr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dqmpr-col-left > * { flex: 1 1 auto; }
#dq-model-print .dqmpr-col-right .dqmpr-plans { margin: 0; flex: 1 1 auto; }
#dq-model-print .dqmpr-top.dqmpr-plans-short .dqmpr-col-right .dqmpr-plans { flex: 0 0 auto; }
.dqmpr-top.dqmpr-noplans { grid-template-columns: minmax(0, 1fr); }
.dqmpr-top.dqmpr-noplans .dqmpr-col-right { display: none; }
.dqmpr-actions { display: grid; grid-template-rows: 1fr auto 1fr; gap: 14px; }

/* The plate angle, between Flat/Upright and Add models. */
.dqmpr-anglebox { border: 1px solid #c7d7e0; border-radius: 10px; background: #f3f8fb; padding: 10px 16px; }
.dqmpr-angle-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17px; }
.dqmpr-angle-val { font-size: 22px; color: #1f5f7a; font-weight: 700; }
.dqmpr-angle-val input { width: 3.2em; font-size: 20px; font-weight: 700; color: #1f5f7a; text-align: right; padding: 0 4px; border: 1px solid #c7d7e0; border-radius: 6px; background: #fff; }
.dqmpr-plate-angle { width: 100%; margin: 6px 0 0; accent-color: #1f5f7a; }
.dqmpr-ticks { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; }
.dqmpr-anglebox .dqmpr-note { margin: 4px 0 0; font-size: 13px; }
.dqmpr-anglebox input:disabled { opacity: .45; }
@container dqmpr (max-width: 700px) {
  .dqmpr-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dqmpr-plan-row { gap: 6px; }
  .dqmpr-plan { padding: 6px 8px; }
}

.dqmpr-namebox, .dqmpr-printerbox { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; border-radius: 10px; font-weight: 700; font-size: 17px; }
.dqmpr-namebox { border: 1px solid #ecd9ae; background: #fff8ea; }
.dqmpr-printerbox { border: 1px solid #c7d7e0; background: #f3f8fb; }
.dqmpr-namebox input, .dqmpr-printerbox select { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; padding: 8px 12px; font-size: 16px; font-weight: 400; border: 1px solid #9aa6bd; border-radius: 6px; background: #fff; }
.dqmpr-namebox small, .dqmpr-printerbox small { font-weight: 400; font-size: 14px; color: #4b5563; }
.dqmpr-printerbox .dqmpr-link { margin-left: 2px; font-size: inherit; }
.dqmpr-req { color: #b91c1c; font-weight: 400; font-size: 15px; }
.dqmpr-boxtitle { display: block; }

.dqmpr-body { border: 0; padding: 0; margin: 0; min-width: 0; }
.dqmpr-body:disabled { opacity: .45; }

.dqmpr-orient { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.dqmpr-orient-btn { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; line-height: 1.45; padding: 12px 16px; border: 2px solid #c7d7e0; border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; color: #23282d; }
.dqmpr-orient-btn strong { display: block; font-size: 18px; }
.dqmpr-orient-btn span { color: #4b5563; font-size: 14px; }
.dqmpr-orient-btn.on { border-color: #1f5f7a; background: #e3eff5; }
.dqmpr-orient-btn.on::after { content: "\2713"; position: absolute; top: 10px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: #1f5f7a; color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; }
.dqmpr-orient-btn:disabled { opacity: .45; cursor: not-allowed; }

.dqmpr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 18px; border: 2px dashed #8fb3c6; border-radius: 10px; background: #e3eff5; cursor: pointer; }
.dqmpr-drop.over { background: #cfe3ee; border-color: #1f5f7a; }
.dqmpr-drop.dqmpr-locked { opacity: .45; cursor: not-allowed; }
.dqmpr-drop-icon { width: 30px; height: 30px; stroke: #1f5f7a; margin: 0 0 4px; }
.dqmpr-drop-title { display: block; font-weight: 700; font-size: 17px; color: #1f5f7a; }
.dqmpr-drop-text { display: block; font-size: 14px; color: #4b5563; }

.dqmpr-refused { border-left: 4px solid #d97706; background: #fffbeb; padding: .6em 1em .6em 2em; margin: 0 0 12px; font-size: 14px; }
.dqmpr-status { margin: 0 0 12px; font-size: 13px; color: #4b5563; }
.dqmpr-error { border-left: 4px solid #b91c1c; background: #fef2f2; padding: .7em 1em; margin: 0 0 12px; }
.dqmpr-notice { border-left: 4px solid #1f5f7a; background: #f4f8fa; padding: .7em 1em; margin: 0 0 12px; }
.dqmpr-warn { color: #92400e; }

.dqmpr-plate-list, .dqmpr-waiting-list { margin: 0 0 6px; padding-left: 1.6em; font-size: 14px; }
.dqmpr-waiting-list { padding-left: 1.2em; }
.dqmpr-plate-list li { cursor: pointer; }
.dqmpr-red { color: #b91c1c; font-weight: 600; }
.dqmpr-sel { background: #fff7e6; }
.dqmpr-empty { list-style: none; color: #6b7280; margin-left: -1.2em; }
.dqmpr-store-note { font-size: 13px; color: #4b5563; margin: 0; }
.dqmpr-link { background: none; border: 0; padding: 0; margin-left: 6px; font-size: 13px; color: #1f5f7a; cursor: pointer; text-decoration: underline; }

.dqmpr-cost label, .dqmpr-settings label { display: block; font-weight: 600; margin: 0 0 6px; }
.dqmpr-cost input, .dqmpr-settings input { width: 9em; margin-left: 6px; padding: 3px 6px; font-weight: 400; }
.dqmpr-cost p { margin: 4px 0; }
.dqmpr-per-model table { border-collapse: collapse; font-size: 14px; margin: 6px 0; }
.dqmpr-per-model th, .dqmpr-per-model td { text-align: left; padding: 2px 10px 2px 0; border-bottom: 1px solid #e5e7eb; }
.dqmpr-note { font-size: 13px; color: #6b7280; }
.dqmpr-settings small { color: #4b5563; }
.dqmpr-newjob { font-size: 13px; color: #4b5563; }
.dqmpr-newjob .dqmpr-link { margin-left: 0; }
.dqmpr-privacy { font-size: 13px; color: #6b7280; }

.dqmpr-views { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; margin: 0 0 8px; }
@container dqmpr (max-width: 700px) { .dqmpr-views { grid-template-columns: 1fr; } }
.dqmpr-mapbox, .dqmpr-3dbox { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; background: #fff; min-width: 0; }
#dq-model-print .dqmpr-viewtitle { margin: 0; padding: 8px 12px; text-align: center; font-size: 14px; font-weight: 700; color: #1f5f7a; background: #f3f8fb; border-bottom: 1px solid #e5e7eb; }
/* The Plate View bar: the heading in the middle, the Top / Front / Side tabs on the right; under the heading when the box is narrow. */
.dqmpr-mapbox { container: dqmprmap / inline-size; }
.dqmpr-viewbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #f3f8fb; border-bottom: 1px solid #e5e7eb; }
#dq-model-print .dqmpr-viewbar .dqmpr-viewtitle { grid-column: 2; grid-row: 1; background: none; border-bottom: 0; }
.dqmpr-viewtabs { grid-column: 3; justify-self: end; display: flex; margin-right: 8px; border: 1px solid #c7d7e0; border-radius: 6px; overflow: hidden; }
#dq-model-print .dqmpr-viewtabs button { margin: 0; padding: 3px 10px; font-size: 13px; line-height: 1.4; background: #fff; color: #1f5f7a; border: 0; border-left: 1px solid #c7d7e0; border-radius: 0; cursor: pointer; }
#dq-model-print .dqmpr-viewtabs button:first-child { border-left: 0; }
#dq-model-print .dqmpr-viewtabs button.on { background: #1f5f7a; color: #fff; }
@container dqmprmap (max-width: 480px) {
  .dqmpr-viewbar { grid-template-columns: 1fr; }
  #dq-model-print .dqmpr-viewbar .dqmpr-viewtitle { grid-column: 1; padding-bottom: 4px; }
  .dqmpr-viewtabs { grid-column: 1; justify-self: center; margin: 0 0 8px; }
}
/* The 3D Preview bar: Edit in 3D on the left, the heading in the middle; the camera row under it while editing. */
.dqmpr-3dbox { container: dqmpr3d / inline-size; }
#dq-model-print .dqmpr-edit3d { grid-column: 1; grid-row: 1; justify-self: start; margin: 0 0 0 8px; padding: 3px 10px; font-size: 13px; line-height: 1.4; background: #fff; color: #1f5f7a; border: 1px solid #1f5f7a; border-radius: 6px; cursor: pointer; }
#dq-model-print .dqmpr-edit3d.on { background: #1f5f7a; color: #fff; }
.dqmpr-cams { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border-bottom: 1px solid #e5e7eb; }
.dqmpr-cams[hidden] { display: none; }
#dq-model-print .dqmpr-cams button { margin: 0; padding: 3px 10px; font-size: 13px; line-height: 1.4; background: #fff; color: #1f5f7a; border: 1px solid #1f5f7a; border-radius: 6px; cursor: pointer; }
#dq-model-print .dqmpr-cams button.on { background: #1f5f7a; color: #fff; }
@container dqmpr3d (max-width: 300px) {
  .dqmpr-3dbox .dqmpr-viewbar { grid-template-columns: 1fr; }
  #dq-model-print .dqmpr-3dbox .dqmpr-viewtitle { grid-column: 1; grid-row: 1; padding-bottom: 4px; }
  #dq-model-print .dqmpr-edit3d { grid-column: 1; grid-row: 2; justify-self: center; margin: 0 0 8px; }
}
.dqmpr-map { display: block; width: 100%; touch-action: none; }
/* The 3D canvas takes the room its box gives it. Its height never comes from its own pixel size (the viewer keeps that at the last size it had), so it can't grow the row: wide, as tall as the plate view; narrow, 2:1. */
.dqmpr-3d { display: block; width: 100%; height: 0; flex: 1 1 auto; min-height: 220px; }
@container dqmpr (max-width: 700px) { .dqmpr-3d { height: auto; aspect-ratio: 2 / 1; } }
.dqmpr-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.dqmpr-tools button { padding: 4px 10px; font-size: 13px; cursor: pointer; }
.dqmpr-tools .dqmpr-pack { margin-left: auto; }
.dqmpr-lean-box { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.dqmpr-lean-box input { width: 3.4em; padding: 2px 4px; }
.dqmpr-lean-read { align-self: center; font-size: 13px; color: #374151; }
.dqmpr-hint { font-size: 13px; color: #6b7280; margin: 0 0 8px; }
/* The question before a credit is used. */
.dqmpr-confirm { max-width: 34em; width: calc(100% - 32px); border: 0; border-radius: 10px; padding: 18px 22px; color: #23282d; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.dqmpr-confirm::backdrop { background: rgba(17, 24, 39, .45); }
#dq-model-print .dqmpr-confirm h3 { margin: 0 0 8px; }
.dqmpr-confirm ul { margin: 6px 0 10px 1.2em; padding: 0; }
.dqmpr-confirm li { margin: 2px 0; }
.dqmpr-confirm-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 14px 0 0; }
.dqmpr-btn-quiet { padding: 8px 14px; font-size: 15px; font-weight: 600; cursor: pointer; background: #fff; color: #1f5f7a; border: 1px solid #1f5f7a; border-radius: 4px; }
.dqmpr-btn { padding: 8px 18px; font-size: 15px; font-weight: 600; cursor: pointer; background: #1f5f7a; color: #fff; border: 0; border-radius: 4px; }
.dqmpr-btn:disabled { background: #9ca3af; cursor: not-allowed; }
.dqmpr-btn-2 { background: #fff; color: #1f5f7a; border: 1px solid #1f5f7a; }
.dqmpr-download-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.dqmpr-download-why { font-size: 13px; color: #4b5563; margin: 0; }
.dqmpr-buy { border-left: 4px solid #1f5f7a; background: #f4f8fa; padding: .7em 1em; margin: 8px 0 0; font-size: 14px; }
.dqmpr-buy a { margin-right: 10px; }

.dqmpr-plans { border: 1px solid #c7d7e0; border-radius: 10px; background: #fff; padding: 14px 18px; }
#dq-model-print .dqmpr-plans h3 { font-size: 17px; margin: 0 0 4px; }
.dqmpr-plans h4 { font-size: 14px; margin: 10px 0 6px; color: #1f5f7a; }
.dqmpr-plans p { margin: 3px 0; font-size: 14px; }
.dqmpr-plans .dqmpr-note { font-size: 13px; color: #6b7280; }
.dqmpr-plan-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dqmpr-plan-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dqmpr-plan { display: flex; flex-direction: column; padding: 6px 12px; border: 1px solid #1f5f7a; border-radius: 8px; background: #fff; color: #1f5f7a; text-decoration: none; font-size: 15px; }
.dqmpr-plan:hover { background: #e3eff5; }
.dqmpr-plan.sub { background: #e3eff5; }
.dqmpr-plan.sub:hover { background: #cfe3ee; }
/* A plan on show but not on sale yet. */
.dqmpr-plan.dqmpr-coming, .dqmpr-plan.dqmpr-coming:hover { cursor: default; color: #6b7280; background: #f3f4f6; border: 1px dashed #c7d0d9; }
.dqmpr-plan span { color: #23282d; font-size: 14px; }

/* Waiting list, Cost and Settings: three equal blocks on one row under the
   views; one under the other when the tool is narrow. */
.dqmpr-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin: 0 0 16px; }
#dq-model-print .dqmpr-panels > section { margin: 0; padding: 14px 18px; border: 1px solid #c7d7e0; border-radius: 10px; background: #fff; }
.dqmpr-panels .dqmpr-cost input, .dqmpr-panels .dqmpr-settings input { margin: 4px 0 0; }
.dqmpr-panels label { display: block; }
@container dqmpr (max-width: 700px) { .dqmpr-panels { grid-template-columns: minmax(0, 1fr); gap: 14px; } }