/* lens-ui.js styling. Import after edgeflow.css so it inherits the palette. */
.lens-tier { margin-top: 18px; }
.lens-tier h3 { font-size: 15px; font-weight: 500; margin: 0 0 12px; }
.lens-checks { width: 100%; border-collapse: collapse; font-size: 13px; }
.lens-checks td { padding: 7px 8px; border-bottom: 1px solid rgba(128,128,128,.18); }
.lens-checks .lens-rate { text-align: right; font-variant-numeric: tabular-nums; }
.lens-checks tr.lens-weak .lens-rate { color: #E24B4A; }
.lens-practice { font-size: 12px; text-decoration: none; opacity: .75; }
.lens-practice:hover { opacity: 1; text-decoration: underline; }
.lens-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.lens-cell { border-radius: 8px; padding: 10px 12px;
  background: rgba(128,128,128,.08); display: flex; flex-direction: column; }
.lens-cell span { font-size: 12px; opacity: .7; }
.lens-cell strong { font-size: 20px; font-weight: 500; }
.lens-cell em { font-size: 11px; opacity: .6; font-style: normal; }
.lens-cell.lens-danger { background: rgba(226,75,74,.13); }
.lens-cell.lens-good { background: rgba(29,158,117,.12); }
.lens-buckets { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.lens-buckets th, .lens-buckets td { padding: 5px 8px; text-align: left;
  border-bottom: 1px solid rgba(128,128,128,.18); }
.lens-tier .muted { font-size: 12px; opacity: .65; }

.lens-fu-head { font-size: 12px; opacity: .65; margin: 12px 0 4px;
  text-transform: uppercase; letter-spacing: .04em; }
.lens-fu { display: flex; gap: 10px; align-items: baseline; font-size: 13px;
  padding: 6px 0; border-bottom: 1px solid rgba(128,128,128,.15); }
.lens-fu-sym { font-weight: 500; min-width: 54px; }
.lens-fu-dir { opacity: .6; min-width: 44px; }
.lens-fu-when { opacity: .5; min-width: 62px; }
.lens-fu-act { margin-left: auto; opacity: .8; }
.lens-fu-blocked .lens-fu-act { color: #D89A3C; }
.lens-fu-ready .lens-fu-act a { text-decoration: none; }