/* Converter page (convert.html), on top of home.css. The settings sit on a white title-block
   panel; the chosen sheet lies on the drafting board beside it, drawn to its real proportions
   with the drawing on it at the chosen scale. A drawing that does not fit spills over the
   sheet edge, hatched like a section cut. No chalk colours: nothing here is measured. */

.convert-intro { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(24px, 4vw, 40px); }
.convert-intro h1 {
  font: 400 clamp(34px, 4.4vw, 60px)/1.08 var(--lettering);
  letter-spacing: 0.005em;
  max-width: 22ch;
  margin-bottom: 20px;
}
.convert-intro .lead { max-width: 38em; }

.desk { background: var(--board); padding: clamp(20px, 4vw, 48px) 0; }
.desk-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: start; }

/* ---- Settings: one panel, three steps ---- */

.controls { background: var(--paper); border: 2px solid var(--graphite); }
.step { padding: 18px 20px 16px; }
.step + .step { border-top: 1px solid var(--graphite); }
.step h2 { display: flex; align-items: center; gap: 12px; font: 600 18px/1.3 var(--text); margin-bottom: 14px; }
.step .axis { width: 34px; height: 34px; margin: 0; font-size: 18px; flex: none; position: relative; left: auto; top: auto; }
.step .hint { margin: 10px 0 0; font-size: 14px; }

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 132px;
  padding: 18px;
  border: 1.5px dashed var(--pencil);
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.drop:hover, .drop.dragging { border-color: var(--graphite); background: var(--wash); }
.drop:focus-within { outline: 2px solid var(--selection); outline-offset: 2px; }
.drop-title { font-size: 17px; }
.file-name { font-family: var(--lettering); font-size: 16px; overflow-wrap: anywhere; }
.file-name:empty { display: none; }

.drawings { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.drawing {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  min-height: 0;
  white-space: normal;
  text-align: left;
}
.drawing img { display: block; width: 100%; height: 92px; object-fit: contain; background: var(--paper); }
.drawing-label { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.drawing-label span { color: var(--pencil); font-family: var(--lettering); }
.drawing[aria-checked="true"] { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }

.sheet-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.sheet-options:disabled { opacity: 0.45; }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border: 0; padding: 0; margin: 0 0 12px; }
.field-row legend, .field-row .legend { float: left; width: 6.5em; color: var(--pencil); font-size: 15px; padding: 0; }
.field-row select { min-height: 38px; min-width: 12em; }

.segments { display: flex; flex-wrap: wrap; }
.segments button { min-height: 38px; border-radius: 0; margin-left: -1px; color: var(--pencil); }
.segments button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.segments button:last-child { border-radius: 0 3px 3px 0; }
.segments button[aria-pressed="true"] { color: var(--paper); background: var(--graphite); border-color: var(--graphite); position: relative; }
.segments [data-paper] { font-family: var(--lettering); font-size: 16px; min-width: 48px; justify-content: center; }
/* ISO and US paper, a row each; the chosen units' row first. */
.papers { display: flex; flex-direction: column; gap: 6px; }
.papers[data-first="ft"] [data-family="ft"] { order: -1; }

/* ---- The sheet ---- */

.sheet-view { position: sticky; top: 16px; }
.sheet-stage { position: relative; height: clamp(300px, 46vw, 560px); display: grid; place-items: center; }
.sheet-svg { width: 100%; height: 100%; display: block; }
.sheet-svg .paper { fill: var(--paper); }
.sheet-svg .edge { fill: none; stroke: var(--graphite); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sheet-svg .margin { fill: none; stroke: var(--rule); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sheet-svg .plan { mix-blend-mode: multiply; }
.sheet-svg .off-sheet { opacity: 0.3; }
.sheet-svg .footprint { fill: none; stroke: var(--pencil); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sheet-svg .spill-line { stroke: var(--graphite); }
.preview-empty { max-width: 24em; text-align: center; color: var(--pencil); margin: 0; }

.sheet-caption { font: 400 18px/1.3 var(--lettering); margin: 14px 0 6px; min-height: 1.3em; }
.fit p { margin: 0 0 8px; }
.fit.refused p:first-child { font-weight: 600; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.suggest button { min-height: 38px; }
.sheet-view .actions { margin: 18px 0 8px; }
.allowance { margin: 0 0 8px; }
.allowance:empty { display: none; }
.status { min-height: 1.4em; margin: 0; }

/* ---- After a download: the way to the paid tool ---- */

.next { padding-top: clamp(32px, 5vw, 56px); }
.next-inner { background: var(--graphite); color: var(--paper); padding: clamp(24px, 4vw, 40px); border-radius: 4px; }
.next h2 { max-width: 24ch; margin-bottom: 12px; }
.next p { max-width: 40em; color: #e6e9ec; }
.next .button.primary { background: var(--paper); color: var(--graphite); border-color: var(--paper); margin-top: 8px; }
.next .button.primary:hover { background: var(--board); }
.next:focus { outline: none; }

.facts .formats h3 { margin-bottom: 10px; }

@media (max-width: 960px) {
  .desk-inner { grid-template-columns: 1fr; }
  .sheet-view { position: static; }
}

@media (max-width: 760px) {
  .step { padding: 16px 14px 14px; }
  .field-row legend, .field-row .legend { float: none; width: 100%; }
  .field-row select { width: 100%; }
  .segments { width: 100%; }
  .segments button { flex: 1 1 auto; justify-content: center; padding: 4px 6px; }
  .sheet-stage { height: 280px; }
  .drawings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The paywall dialog (style.css) inside this page's larger headings. */
.convert dialog h2 { font-size: 26px; margin-bottom: 10px; }