/* ============================================================
   PDFeyes: Label sheet maker styles
   ============================================================ */

.lbl-hero{padding:48px 0 26px;}
.lbl-hero h1{font-size:clamp(28px,3.8vw,44px);max-width:24ch;line-height:1.06;letter-spacing:-0.025em;}
.lbl-hero p{font-size:16.5px;max-width:62ch;margin-top:12px;}

.lbl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:32px;align-items:start;padding-bottom:20px;}
/* Grid children default to min-width:auto, which makes a column refuse to
   shrink below its content's intrinsic width and overflow the viewport on
   narrow screens. minmax(0,1fr) plus min-width:0 lets them actually shrink. */
.lbl-grid > *{min-width:0;}
@media (max-width:1000px){ .lbl-grid{grid-template-columns:minmax(0,1fr);gap:24px;} }

/* ---- Controls ---- */
.ctrl-block{border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 20px;margin-bottom:16px;background:#fff;}
.ctrl-block h2{font-size:14px;margin:0 0 6px;}
.hint{font-size:12.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.5;}
.muted{color:var(--ink-faint);}

textarea,select,input[type=number]{
  width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;
  padding:9px 11px;border-radius:8px;border:1px solid var(--line);outline:none;
  background:#fff;color:var(--ink);
}
/* Prevent iOS zooming in on focus, which happens below 16px */
@media (max-width:520px){ textarea,select,input[type=number]{font-size:16px;} }
textarea{resize:vertical;line-height:1.5;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;}
textarea:focus,select:focus,input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
.check{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}
.check input{width:16px;height:16px;accent-color:var(--accent);}
.btn-sm{padding:7px 12px;font-size:13px;}
.btn-block{width:100%;justify-content:center;margin-top:14px;}

.layout-info{font-size:13px;line-height:1.6;margin-top:10px;padding:10px 12px;background:var(--paper-soft);border-radius:8px;}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:26px;font-size:12.5px;}
.chip{
  font-family:inherit;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--accent-ink);cursor:pointer;
}
.chip:hover{border-color:var(--accent);background:var(--accent-soft);}

.ctrl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
@media (max-width:520px){ .ctrl-row{grid-template-columns:1fr;} }
.ctrl-field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:5px;}
.ctrl-field input[type=range]{width:100%;accent-color:var(--accent);}

.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.seg button{
  flex:1;font-family:inherit;font-size:13px;font-weight:600;padding:8px 4px;border:none;
  background:#fff;color:var(--ink-soft);cursor:pointer;border-right:1px solid var(--line);
}
.seg button:last-child{border-right:none;}
.seg button.active{background:var(--accent);color:#fff;}

.calib{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;}
.calib summary{font-size:13.5px;font-weight:700;cursor:pointer;color:var(--accent-ink);}
.calib summary::marker{color:var(--accent);}
.calib .ctrl-field{margin-top:12px;}

/* ---- Preview ---- */
.lbl-preview{position:sticky;top:88px;}
@media (max-width:1000px){ .lbl-preview{position:static;} }
.preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.preview-head h2{font-size:14px;margin:0;}
.preview-head .muted{font-size:12.5px;}

.sheet-wrap{background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;justify-content:center;overflow-x:auto;}
.preview-sheet{position:relative;background:#fff;box-shadow:0 3px 14px -5px rgb(0 0 0 / .25);flex-shrink:0;}
.plabel{
  position:absolute;border:1px dashed var(--rule);display:flex;align-items:center;
  overflow:hidden;box-sizing:border-box;padding:2px 4px;
}
.plabel.skipped{background:repeating-linear-gradient(45deg,#f2f3f5,#f2f3f5 4px,#e8eaee 4px,#e8eaee 8px);}
.plabel-text{line-height:1.22;color:#15181d;width:100%;overflow:hidden;word-break:break-word;}
.preview-note{font-size:12px;margin-top:8px;}
.print-tip{font-size:12.5px;color:var(--ink-soft);margin-top:12px;line-height:1.55;background:var(--amber-soft);border-radius:8px;padding:10px 12px;}

@media (max-width:520px){
  .sheet-wrap{padding:10px;}
  .ctrl-block{padding:15px;}
}

.char-warning{
  background:var(--amber-soft);border:1px solid var(--mark-line);color:var(--mark-ink);
  border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.55;margin-top:10px;
}

/* Dragging a CSV onto the paste area */
#dataInput.labelDrop-over{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); background:var(--accent-tint);}