/* A model-kit bench, not a calibrated ruler: all mat markings are decorative. */
.model-workshop {
  --bg: #182321;
  --surface: #232d2a;
  --surface2: #303c36;
  --surface3: #17221f;
  --accent: #f0cc6b;
  --accent2: #9fdbc1;
  --text: #f5f2e7;
  --muted: #bdc9bf;
  --border: #526057;
  --paper: #f1ecdc;
  --ink: #243d32;
}
.model-workshop header {
  background: repeating-linear-gradient(0deg, transparent 0 5px, #ffffff03 5px 6px), #292c25;
  border-bottom: 3px solid #847456;
  box-shadow: 0 2px 8px #0004;
  z-index: 35;
}
.model-workshop header > div:last-child { flex-shrink: 0; }
.model-workshop .panel {
  background: linear-gradient(90deg, #ffffff03, transparent 20px), var(--surface);
  border-right: 3px solid #847456;
  scrollbar-color: #738576 transparent;
}
.model-workshop .section-title, .model-workshop .conversion-eyebrow { color: var(--accent); }
.model-workshop .conversion-title { color: var(--text); }
.model-workshop .recipe-intro { padding: 6px 0; }
.model-workshop .btn { border-radius: 6px; }
.model-workshop .btn-primary {
  background: #f0cc6b;
  color: #253428;
  box-shadow: inset 0 -3px #0002, 0 2px 4px #0002;
}
.model-workshop .btn-primary:hover:not(:disabled) { background: #ffe197; }
.model-workshop .btn-outline { border-color: #718174; }
.model-workshop :is(button, a, input, select, summary, .dropzone):focus-visible {
  outline: 3px solid #f0cc6b;
  outline-offset: 3px;
}
.model-workshop .workshop-progress {
  background: var(--surface);
  gap: 5px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--border);
}
.model-workshop .workshop-progress button {
  color: var(--muted);
  background: #303c36;
  border-radius: 3px;
  font-weight: 650;
}
.model-workshop .workshop-progress button[aria-current="step"] {
  background: #f0cc6b;
  color: #253428;
  border-color: #f0cc6b;
}
/* Paper instructions and a shallow parts tray stand apart from the tool cabinet. */
.model-workshop :is(.workshop-start, .workshop-trial, .dropzone) {
  --text: #243d32;
  --muted: #526253;
  --accent: #276347;
  --accent2: #276347;
  --surface3: #e4dfce;
  --border: #a8af9b;
  --danger: #a02c27;
  color: var(--text);
  background: var(--paper);
  border: 1px solid #c4bfae;
  border-radius: 5px;
  box-shadow: 0 3px 7px #0002;
}
.model-workshop :is(.workshop-start, .workshop-trial) {
  position: relative;
  border-top: 4px solid #c5ac75;
}
.model-workshop :is(.workshop-start, .workshop-trial) h2 { color: var(--ink); }
.model-workshop :is(.workshop-start, .workshop-trial) .btn-outline {
  color: #243d32;
  border-color: #78836b;
  background: #f8f5ea;
}
.model-workshop :is(.workshop-start, .workshop-trial) .btn-outline:hover { background: #e2e8d7; }
.model-workshop :is(.workshop-start, .workshop-trial) :focus-visible { outline-color: #276347; }
.model-workshop .workshop-trial input {
  background: #fffdf5;
  color: #243d32;
  border-color: #78836b;
}
.model-workshop .trial-dimensions { border: 1px solid #d0cdbd; }
.model-workshop .dropzone {
  background: linear-gradient(180deg, #e5e2d4 0 5px, #f1ecdc 5px);
  border: 2px dashed #849782;
  box-shadow: inset 0 0 0 5px #d8dccd, 0 2px 5px #0002;
}
.model-workshop .dropzone:hover, .model-workshop .dropzone.drag-over {
  background: #e3eddc;
  border-color: #276347;
}
.model-workshop .dropzone .icon {
  background: #dde5d4;
  border-color: #bdc9b4;
  box-shadow: none;
}
.model-workshop .preprocess-toggle:hover { color: #f5f2e7; }
.model-workshop .toolbox-shell {
  background: linear-gradient(#4c5b50, #303c36);
  border: 1px solid #738576;
  border-radius: 7px;
  box-shadow: inset 0 2px #ffffff16, 0 5px 10px #0003;
}
.model-workshop .toolbox-handle { background: #46544a; border-color: #8e9a83; }
.model-workshop .toolbox-name { color: #f0cc6b; }
.model-workshop .tool-tabs { background: #1c2722; border-color: #526057; border-radius: 5px; }
.model-workshop .tool-tab.active { background: #f0cc6b; color: #253428; box-shadow: inset 0 -2px #0002; }
.model-workshop .tool-tab:hover:not(.active) { background: #394a3e; color: #f5f2e7; }
.model-workshop .submode-bar { background: #1c2722; border-color: #526057; }
.model-workshop .submode-bar .axis-btn.active {
  background: #9fdbc1;
  border-color: #9fdbc1;
  color: #243d32;
  box-shadow: 0 2px 6px #0003;
}
.model-workshop #history-bar { background: #1b2822f5; border-top-color: #738576; }
.model-workshop .history-item.current { color: #9fdbc1; border-color: #729d84; background: #315340; }
.model-workshop #history-bar .history-header .history-count { color: #9fdbc1; background: #315340; }
.model-workshop .goal-chip { background: #303c36; color: #f5f2e7; border-color: #738576; }
.model-workshop .intro-collapse-bar { color: #f0cc6b; border-color: #738576; background: #303c36; }
/* Fine squares, bolder guide squares, and a lightly worn evergreen mat. */
.model-workshop .viewer-wrap {
  --mat-line: #d8eddd;
  background-color: #22533e;
  background-image:
    linear-gradient(#d8eddd24 1px, transparent 1px),
    linear-gradient(90deg, #d8eddd24 1px, transparent 1px),
    linear-gradient(#d8eddd15 1px, transparent 1px),
    linear-gradient(90deg, #d8eddd15 1px, transparent 1px),
    radial-gradient(ellipse at 55% 40%, #ffffff06, #00000012);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
  background-position: 24px 24px;
  box-shadow: inset 0 0 18px #0002;
}
.cutting-mat-frame {
  position: absolute;
  inset: 24px;
  border: 1px solid #d8eddd6b;
  border-radius: 2px;
  pointer-events: none;
}
.cutting-mat-frame::before, .cutting-mat-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.cutting-mat-frame::before {
  inset: -12px -1px;
  background:
    repeating-linear-gradient(90deg, #d8eddd6b 0 1px, transparent 1px 10px) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, #d8eddd6b 0 1px, transparent 1px 10px) bottom / 100% 7px no-repeat;
}
.cutting-mat-frame::after {
  inset: -1px -12px;
  background:
    repeating-linear-gradient(#d8eddd6b 0 1px, transparent 1px 10px) left / 7px 100% no-repeat,
    repeating-linear-gradient(#d8eddd6b 0 1px, transparent 1px 10px) right / 7px 100% no-repeat;
}
.mat-guides { position: absolute; bottom: 24px; left: 24px; width: 190px; height: 190px; color: #d8eddd45; }
.mat-stamp {
  position: absolute;
  bottom: 62px;
  right: 42px;
  color: #d8eddd70;
  text-align: right;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  pointer-events: none;
}
.mat-stamp strong { display: block; font-size: 1.25rem; letter-spacing: .06em; }
.model-workshop .workbench-label {
  top: 38px;
  left: 38px;
  background: #e9eddc;
  color: #243d32;
  border-color: #aebfac;
  border-radius: 3px;
  box-shadow: 0 2px 4px #0002;
}
.model-workshop .workbench-label small { color: #526253; }
.mat-note {
  position: absolute;
  bottom: 32px;
  right: 38px;
  max-width: calc(100% - 76px);
  color: #e0ecdf;
  background: #17412e;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: .69rem;
  pointer-events: none;
}
.model-workshop .viewer-placeholder { color: #e0ecdf; gap: 12px; }
.model-workshop .viewer-placeholder .ph-icon {
  width: 110px;
  height: 110px;
  color: #e9eddc;
  border: 1px solid #d8eddd6b;
  background: #17412ecc;
  border-radius: 50%;
  box-shadow: 0 8px 24px #0002;
}
.bench-tools { width: 78px; height: 78px; }
.model-workshop .viewer-placeholder .ph-title { color: #f5f2e7; text-shadow: 0 1px 3px #17412e; }
.model-workshop .viewer-placeholder .ph-sub { color: #e0ecdf; background: #17412e; padding: 4px 10px; border-radius: 3px; width: auto; }
.model-workshop .viewer-hint { bottom: 65px; background: #172d23ed; border-color: #7f9f87; color: #e0ecdf; }
.model-workshop .viewer-toolbar { top: 38px; right: 38px; }
.model-workshop .vt-btn { background: #e9eddc; border-color: #aebfac; color: #243d32; }
.model-workshop .vt-btn.active { background: #f0cc6b; border-color: #f0cc6b; color: #253428; }
@media (min-width: 769px) {
  /* The real footer height participates in layout, so it cannot cover the mat. */
  .model-workshop #history-bar { position: relative; flex-shrink: 0; }
  .model-workshop.history-visible .main { height: auto; }
}
@media (min-width: 769px) and (max-width: 980px) {
  .model-workshop header { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .model-workshop header > div:last-child { gap: 8px !important; }
}
@media (max-width: 768px) {
  .model-workshop .panel { border-right: 0; border-bottom: 3px solid #847456; }
  .model-workshop .viewer-wrap { min-height: 440px; }
  .model-workshop .workbench-label { top: 34px; left: 34px; }
  .model-workshop .viewer-toolbar { top: 34px; right: 34px; }
  .model-workshop .viewer-hint { bottom: 60px; }
  .mat-guides { width: 120px; height: 120px; opacity: .7; }
  .mat-stamp { font-size: .6rem; right: 34px; bottom: 100px; }
  .mat-stamp strong { font-size: 1rem; }
  .mat-note { right: 30px; bottom: 30px; max-width: calc(100% - 60px); font-size: .65rem; }
}