/* ============================================================
   Pipezoom - leadedit.css

   The row editor, in the window every other list dialog uses. It takes
   .ldb and .ldb-box and adds the field grid, the marks and the line
   that reports a written change.

   Doc: docs/notes/app.pipezoom.com/css/leadedit.css.md
   ============================================================ */

.led-box{width:min(760px,100%);}
.led-sub{margin:4px 0 12px;font-size:.8rem;color:var(--ink-faint);}

/* The fields scroll; the heading and the line under them stay put. */
.led-body{flex:1;min-height:0;overflow-y:auto;padding-right:4px;}

.led-h{
  margin:16px 0 8px;font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.led-h:first-child{margin-top:0;}

/* Start-aligned, with each box at its own height in a row of taller
   items. */
.led-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;align-items:start;
}
.led-f{display:flex;flex-direction:column;gap:4px;min-width:0;}
.led-f-wide{grid-column:1 / -1;}
.led-l{font-size:.76rem;color:var(--ink-soft);}
/* .lds-in carries flex:1 1 160px for the filter row. Because that 160px
   is a height down a column, it is taken off here. */
.led-in{width:100%;flex:none;box-sizing:border-box;}
.led-sel{display:block;}
.led-sel .sel-in{width:100%;flex:none;box-sizing:border-box;}

.led-note{
  width:100%;flex:none;box-sizing:border-box;min-height:74px;
  resize:vertical;font:inherit;font-size:.84rem;line-height:1.45;
}

/* The marks */
.led-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;align-items:start;}
.led-m{
  display:grid;grid-template-columns:auto 1fr;gap:2px 9px;
  align-items:center;
  padding:8px 10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-high);
}
.led-m:hover{border-color:var(--line-strong);}
.led-m input{grid-row:1 / span 2;cursor:pointer;}
.led-m-t{font-size:.82rem;font-weight:600;color:var(--ink);}
.led-m-s{font-size:.72rem;color:var(--ink-faint);}

/* The line that says the last change was written. */
.led-say{
  margin:12px 0 0;min-height:1.1em;
  font-size:.76rem;color:var(--ink-faint);
}

@media (max-width:620px){
  .led-grid,.led-marks{grid-template-columns:1fr;}
  .led-f-wide{grid-column:auto;}
}