:root {
  --graphite: #2a2e34;
  --graphite_deep: #1b1e23;
  --graphite_mid: #3a3f46;
  --graphite_edge: #4e555e;
  --tick: #c7ccd3;
  --tick_dim: #8c939c;
  --orange: #ff5c1a;
  --orange_deep: #d6450c;
  --orange_ink: #fff6f0;
  --blade: #d8dde3;
  --blade_shadow: #9aa1aa;
  --paper: #f3efe6;
  --paper_edge: #d5d0c4;
  --ink: #1c1f24;
  --muted: #5c6168;
  --focus: #7ec8ff;
  --error_paper: #f3c7b4;
  --ok_paper: #d5e8c8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--ink);
  font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Geneva, sans-serif;
  line-height: 1.4;
  background-color: var(--graphite_deep);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 0 1px,
      transparent 1px 18px
    );
}

[hidden] {
  display: none !important;
}

.cutter {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.1rem 0.9rem 2.5rem;
}

.blade_housing {
  background: var(--orange);
  color: var(--orange_ink);
  box-shadow: 0 10px 0 var(--graphite_deep);
}

.hazard_stripe {
  height: 0.55rem;
  background: repeating-linear-gradient(
    -55deg,
    #16181c 0 0.55rem,
    var(--orange) 0.55rem 1.1rem
  );
}

.blade_copy {
  padding: 0.9rem 1.15rem 0.7rem;
}

.shop_mark {
  margin: 0 0 0.35rem;
  font-family: "Arial Narrow", "Franklin Gothic Medium", "Helvetica Condensed", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: "Arial Narrow", "Franklin Gothic Medium", "Helvetica Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  letter-spacing: 0.02em;
  line-height: 0.9;
}

.lede {
  max-width: 40rem;
  margin: 0.7rem 0 0;
  color: #ffe4d4;
}

.blade_edge {
  height: 0.38rem;
  background: linear-gradient(180deg, #f6f8fb 0%, var(--blade_shadow) 100%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.bed {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  background: var(--graphite);
  border: 1px solid #111317;
  border-top: 0;
  min-height: 32rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

.scale {
  position: relative;
  background-color: #32363d;
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--tick) 0 1px,
      transparent 1px 8px
    ),
    repeating-linear-gradient(
      to bottom,
      #e8eaed 0 2px,
      transparent 2px 40px
    );
  background-position: right 0.35rem top 0.8rem, right 0.2rem top 0.8rem;
  background-repeat: no-repeat;
  background-size: 0.55rem 100%, 0.95rem 100%;
  border-right: 1px solid #111317;
}

.tick_label {
  position: absolute;
  right: 1.35rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  color: var(--tick);
  line-height: 1;
}

.tick_0 { top: 0.7rem; }
.tick_5 { top: 18%; }
.tick_10 { top: 36%; }
.tick_15 { top: 54%; }
.tick_20 { top: 72%; }
.tick_25 { top: 90%; }

main {
  padding: 1rem 1rem 1.2rem;
  min-width: 0;
}

.status_message {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.8rem;
  background: var(--error_paper);
  color: #3a1510;
  border-left: 5px solid var(--orange_deep);
}

.status_message.is_success {
  background: var(--ok_paper);
  color: #1d2a14;
  border-left-color: #4d7a2c;
}

.file_input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.drop_stage,
.job {
  min-height: 22rem;
}

.paper_sheet {
  position: relative;
  min-height: 22rem;
  background: var(--paper);
  border: 1px solid var(--paper_edge);
  box-shadow:
    8px 10px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 1.4rem 1.6rem;
}

.paper_sheet.is_loaded {
  align-items: flex-start;
  justify-content: flex-start;
}

.paper_clamp {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 0.7rem;
  background: linear-gradient(180deg, #ff7a3d, var(--orange_deep));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.drop_stage_copy,
.job_copy {
  max-width: 28rem;
}

.drop_stage_title,
.job_name {
  margin: 0 0 0.45rem;
  font-family: "Arial Narrow", "Franklin Gothic Medium", "Helvetica Condensed", sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drop_stage_hint,
.job_meta,
.cut_plan,
.panel_note {
  margin: 0;
  color: var(--muted);
}

.cut_plan {
  margin-top: 0.55rem;
  color: var(--ink);
}

.choose_file_button,
.primary_button,
.secondary_button,
.ghost_button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.62rem 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
}

.choose_file_button {
  background: var(--orange);
  color: var(--orange_ink);
  border: 2px solid #9a2e07;
}

.primary_button {
  background: var(--graphite_deep);
  color: var(--orange_ink);
  border: 2px solid #111317;
}

.secondary_button {
  background: #ece7dc;
  color: var(--ink);
  border: 2px solid #8c8680;
}

.ghost_button {
  background: transparent;
  color: var(--orange_ink);
  border: 2px solid rgba(255, 246, 240, 0.45);
}

.choose_file_button:hover {
  background: #ff6e32;
}

.primary_button:hover:not(:disabled) {
  background: #12141a;
}

.primary_button:disabled,
.secondary_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.replace_file {
  margin-top: 1.1rem;
}

.drop_stage {
  cursor: pointer;
}

.drop_stage.is_dragging .paper_sheet {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.guard_panel {
  grid-column: 1 / -1;
  background: #c44710;
  color: var(--orange_ink);
  padding: 1rem 1.1rem 1.2rem;
  border-top: 4px solid #16181c;
}

.panel_mark {
  margin: 0 0 0.8rem;
  font-family: "Arial Narrow", "Franklin Gothic Medium", "Helvetica Condensed", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0 0 1rem;
}

.readout div {
  background: rgba(22, 24, 28, 0.28);
  padding: 0.55rem 0.65rem;
}

.readout dt {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd8c4;
}

.readout dd {
  margin: 0.2rem 0 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.15rem;
}

.mode_set {
  border: 1px solid rgba(22, 24, 28, 0.35);
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.7rem 0.7rem;
}

.mode_set legend {
  padding: 0 0.3rem;
  font-size: 0.8rem;
}

.mode_option {
  display: block;
  margin: 0.35rem 0 0;
  cursor: pointer;
}

.mode_option input {
  margin-right: 0.4rem;
}

.range_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.field_label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}

.field input[type="number"] {
  width: 100%;
  padding: 0.5rem 0.55rem;
  font: inherit;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid #7a2a08;
}

.panel_note {
  color: #ffe4d4;
  font-size: 0.88rem;
  margin-bottom: 0.7rem;
}

.action_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.action_row .primary_button,
.action_row .secondary_button,
.action_row .ghost_button {
  margin-top: 0;
}

.choose_file_button:focus,
.primary_button:focus,
.secondary_button:focus,
.ghost_button:focus,
.field input:focus,
.mode_option input:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (min-width: 880px) {
  .bed {
    grid-template-columns: 3.4rem minmax(0, 1fr) 20rem;
  }

  .guard_panel {
    grid-column: auto;
    border-top: 0;
    border-left: 4px solid #16181c;
  }

  main {
    padding: 1.15rem 1.2rem 1.4rem;
  }
}

@media (max-width: 879px) {
  .scale {
    min-height: 2.4rem;
    background-image:
      repeating-linear-gradient(
        to right,
        var(--tick) 0 1px,
        transparent 1px 8px
      ),
      repeating-linear-gradient(
        to right,
        #e8eaed 0 2px,
        transparent 2px 40px
      );
    background-position: left 0.8rem bottom 0.3rem, left 0.8rem bottom 0.15rem;
    background-size: 100% 0.55rem, 100% 0.95rem;
    border-right: 0;
    border-bottom: 1px solid #111317;
  }

  .tick_label {
    top: 0.35rem;
    right: auto;
  }

  .tick_0 { left: 0.7rem; }
  .tick_5 { left: 18%; }
  .tick_10 { left: 36%; }
  .tick_15 { left: 54%; }
  .tick_20 { left: 72%; }
  .tick_25 { left: 90%; }

  .bed {
    grid-template-columns: 1fr;
  }
}