/* lab/fields.css — the numeric field widget (lab/fields.js), dressed for THIS lab:
   bg #14161a / panel #1c1f25 / edge #2b3038 / value in --warn, exactly the palette
   lab.html's :root declares — NOT the village's brass. Falls back to those hex values
   so fields-dev.html works standalone. Compact: built for a ~300 px side panel.

   Structure (one .lf-row per field):
     .lf-row > .lf-label + .lf-field(.lf-fill,.lf-text,.lf-reset,.lf-edit) + .lf-err   */

.lf-row{
  /* label column breathes with the panel now that the panel is resizable —
     96px was tuned for a fixed 300px aside and truncated the lab's longer labels */
  display:grid;grid-template-columns:clamp(96px,42%,170px) 1fr;gap:1px 8px;align-items:center;
  font-family:var(--mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace);
}
.lf-label{
  font-size:11px;color:var(--dim,#8a929e);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;
}

/* the field: value right-aligned over a fill bar that IS the position-in-range, on the
   quantity's own curve — a log field shows its log position, the honest picture */
.lf-field{
  position:relative;min-width:0;height:21px;padding:0 7px;
  display:flex;align-items:center;justify-content:flex-end;
  background:#101216;border:1px solid var(--edge,#2b3038);border-radius:3px;
  overflow:hidden;cursor:ew-resize;user-select:none;-webkit-user-select:none;
  touch-action:none;
}
.lf-field:hover{border-color:#3d4450}
.lf-field:focus-visible{outline:1px solid var(--warn,#e0b341);outline-offset:0}
.lf-field.lf-dragging{border-color:var(--hot,#e8663c);background:#0c0e11}

.lf-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(74,163,216,.10),rgba(74,163,216,.28));
}
.lf-text{
  position:relative;z-index:1;pointer-events:none;
  font-size:11px;color:var(--warn,#e0b341);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ↺ appears only when the value is NOT the default — the button itself is a readout:
   if you can see it, something differs from what the lab boots with */
.lf-reset{
  position:absolute;left:2px;top:2px;z-index:2;height:15px;padding:0 4px;
  line-height:13px;font-size:10px;font-family:inherit;border-radius:2px;cursor:pointer;
  background:var(--panel,#1c1f25);border:1px solid var(--edge,#2b3038);
  color:var(--dim,#8a929e);opacity:0;transition:opacity .1s;
}
.lf-field:hover .lf-reset,.lf-field:focus-within .lf-reset{opacity:1}
.lf-reset:hover{color:var(--hot,#e8663c);border-color:var(--hot,#e8663c)}
.lf-field.lf-nondefault{border-left:2px solid var(--warn,#e0b341)}

/* the editor sits exactly over the field — type="text", expression-capable */
.lf-edit{
  position:absolute;inset:0;z-index:3;width:100%;box-sizing:border-box;
  padding:0 6px;border:1px solid var(--warn,#e0b341);border-radius:2px;
  background:#0b0d10;color:var(--ink,#e6e9ee);
  font-family:inherit;font-size:11px;
}
.lf-edit:focus{outline:none}

/* refusals and notes ("THAT DID NOT PARSE — …", "CLAMPED to …", "DRAG CANCELLED — …")
   fold in as a row below the field, never as a floating popover */
.lf-err{
  grid-column:1/-1;font-size:10px;line-height:1.35;color:var(--warn,#e0b341);
  padding:1px 0 3px;
}

/* ---- the XL touch variant — the mobile hero surface (lab/mobile.js adds .lf-xl) ----
   The SAME widget with thumb geometry: label above a 56 px bar, the value large
   inside it, ↺ always visible. Nothing behavioural lives here — only size; the
   gestures, the expression editor and the value logic are the one field above. */
.lf-row.lf-xl{grid-template-columns:1fr;gap:5px}
.lf-row.lf-xl .lf-label{font-size:13px;color:#c6ccd6;white-space:normal;overflow:visible}
.lf-row.lf-xl .lf-field{height:56px;border-radius:10px;padding:0 16px}
.lf-row.lf-xl .lf-text{font-size:19px}
.lf-row.lf-xl .lf-fill{background:linear-gradient(90deg,rgba(74,163,216,.12),rgba(74,163,216,.34))}
.lf-row.lf-xl .lf-reset{height:36px;top:10px;left:8px;padding:0 13px;font-size:15px;
  line-height:34px;opacity:1;border-radius:8px}
.lf-row.lf-xl .lf-edit{font-size:18px;border-radius:8px;padding:0 14px}
.lf-row.lf-xl .lf-err{font-size:11px}