/* Label Creator layout. Tokens and components come from styles.css.

   Unlike the two 3D tools, the thing worked on here is flat and has a known
   shape, so the controls do not float over it: three columns, the case and
   its fields on the left, the label in the middle, what is selected and what
   to do with the label on the right. The page itself does not scroll on a
   desktop; the panels do. */

.label-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.label-page .masthead { flex: none; }

.label-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 290px;
  gap: 12px;
  padding: 12px;
}

.label-panel {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.label-panel fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-inline-size: 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.label-panel fieldset[hidden] { display: none; }
.label-panel .field:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.label-panel select,
.label-panel input[type="number"],
.label-panel textarea {
  font: inherit;
  font-size: 0.88rem;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
}
.label-panel input[type="number"] { font-variant-numeric: tabular-nums; }
.label-panel textarea { resize: vertical; min-height: 4.2em; line-height: 1.35; }
.label-panel input[type="range"] { width: 100%; accent-color: var(--accent); }
.label-panel input[type="checkbox"] { accent-color: var(--accent); }

/* A colour well, the size of a field rather than the browser's thin bar. */
.label-panel input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  cursor: pointer;
}
.label-panel input[type="color"]:disabled { opacity: 0.4; cursor: default; }

/* A warning under a field: the QR code that a phone would not read. */
.label-panel .hint.bad { color: var(--critical); font-weight: 600; }

.prop-group { display: grid; gap: 8px; }
.prop-group[hidden] { display: none; }
.prop-group + .prop-group { border-top: 1px dashed var(--border); padding-top: 10px; }
.prop-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.prop-row > .field { flex: 1 1 0; min-width: 0; }
.prop-row > .check { padding-bottom: 7px; }
.prop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prop-grid .field[hidden] { display: none; }

.button-row { display: flex; gap: 6px; flex-wrap: wrap; }
.button-row > button,
.button-row > select { flex: 1 1 auto; }
.label-panel button,
.toolbar > button,
.file-button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
}
.label-panel button:hover:not(:disabled),
.toolbar > button:hover:not(:disabled),
.file-button:hover { border-color: var(--accent); color: var(--accent); }
.label-panel button:disabled,
.toolbar > button:disabled { opacity: 0.45; cursor: default; }
.label-panel button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-1));
  color: var(--accent);
}
.label-panel button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.label-panel button.primary:hover:not(:disabled) { filter: brightness(1.06); color: #fff; }
.label-panel button.danger:hover:not(:disabled) { border-color: var(--critical); color: var(--critical); }
/* The segmented groups take their look from styles.css; inside a panel the
   generic button rule above would undo it. */
.label-panel .segmented button { border: 0; border-radius: 0; padding: 5px 10px; background: transparent; }
.label-panel .segmented button + button { border-left: 1px solid var(--border-strong); }
.label-panel .segmented button[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-1); }

/* .file-button itself is in styles.css: every tool has one. */

/* ---------- the case and its fields ---------- */

.label-preview {
  position: relative;
  height: 230px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #f6f5f2 0%, #e4e3df 100%);
  overflow: hidden;
}
.label-preview canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.label-preview canvas:active { cursor: grabbing; }
.label-panel .preview-home {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.field-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.field-list li button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  font-weight: 600;
  padding: 7px 9px;
}
.field-list .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: transparent;
}
/* A field with something on it: the dot is filled. */
.field-list .designed .dot { background: var(--accent); }
.field-list .size { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.field-list button[aria-current="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  color: var(--accent-ink);
}

.project .file-button { flex: 1 1 auto; justify-content: center; }

/* ---------- the editor ---------- */

.label-stage {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .tools button { font-size: 0.85rem; padding: 6px 12px; }
.toolbar-gap { flex: 1; }

/* The bench the sticker lies on: the same studio grey as Logo Render's stage,
   so the white of a label reads as white. */
.editor-host {
  position: relative;
  min-height: 0;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 35%, #fbfbf9 0%, #e7e6e2 72%, #dcdbd6 100%);
  border: 1px solid var(--border);
  overflow: auto;
}
.editor-host.dropping { outline: 3px dashed var(--accent); outline-offset: -8px; }
#editor { display: block; width: 100%; height: 100%; touch-action: none; position: sticky; top: 0; left: 0; }
.editor-extent { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
.stage-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stage-foot .status { flex: 1; min-width: 0; }
.stage-foot .zoom button { font-size: 0.8rem; padding: 3px 9px; min-width: 2em; }
.zoom-value { font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
#editor:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.drop-note {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 0.85rem;
  pointer-events: none;
}
.drop-note[hidden] { display: none; }

.status { font-size: 0.83rem; color: var(--text-secondary); margin: 0; min-height: 1.2em; }
.status.bad { color: var(--critical); font-weight: 600; }

/* ---------- the label ---------- */

.label-size { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 0.85rem; }
.label-size dt { color: var(--text-muted); }
.label-size dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.label-size dd.big { font-size: 1.05rem; }

/* ---------- narrow screens ---------- */

@media (max-width: 1100px) {
  .label-layout { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  #props-panel { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-height: 40vh; }
}

@media (max-width: 760px) {
  .label-page { height: auto; overflow: visible; }
  .label-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .label-stage { grid-template-rows: auto 60vh auto; }
  #props-panel { max-height: none; }
  .label-panel { overflow: visible; }
}