/* 03 Lens — builds on style.css tokens and wire.css's page shell */
.lens { position: relative; z-index: 1; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; padding: 76px 20px 40px; align-items: start; max-width: 1360px; margin: 0 auto; }
.l-rail { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; background: var(--surface); border: 1px solid var(--ink); }
.l-main { background: var(--surface); border: 1px solid var(--ink); min-width: 0; min-height: 60vh; }

/* form */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); margin-bottom: 12px; }
.kinds button { background: var(--surface); border: 0; border-right: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); padding: 7px 4px; cursor: pointer; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.kinds button:nth-child(3n) { border-right: 0; }
.kinds button:nth-last-child(-n+3) { border-bottom: 0; }
.kinds button:hover { background: var(--soft); }
.kinds button.on { background: var(--ink); color: var(--on-ink); }
.fld { display: block; margin-bottom: 10px; }
.fld > span { display: block; font-size: 9.5px; color: var(--ink-3); margin-bottom: 3px; }
.fld input, .fld textarea { width: 100%; border: 1px solid var(--hair-2); background: transparent; padding: 7px 9px; font: 13px var(--sans); outline: none; resize: vertical; }
.fld input:focus, .fld textarea:focus { border-color: var(--ink); }
.go { width: 100%; padding: 11px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font: 600 13px var(--sans); cursor: pointer; letter-spacing: .01em; }
.go:disabled { opacity: .55; cursor: progress; }
.fine { margin-top: 10px; font-size: 9.5px; line-height: 1.5; text-transform: none; letter-spacing: .02em; }

/* history */
.hist { display: grid; grid-template-columns: 1fr 16px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.hist:hover .h-t { text-decoration: underline; text-underline-offset: 3px; }
.hist.on .h-t { font-weight: 600; }
.h-t { font-size: 13px; line-height: 1.25; }
.h-m { font: 500 9.5px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.hist .del { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 13px; padding: 0; }
.hist .del:hover { color: var(--accent); }

/* report */
.r-empty { padding: 60px 40px; max-width: 620px; }
.r-empty h2 { font-size: 40px; letter-spacing: -0.03em; line-height: 1.02; margin: 10px 0 14px; }
.r-empty p { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.r-empty code { font: 12px var(--mono); background: var(--soft); padding: 1px 5px; }
.r-head { padding: 28px 32px 22px; border-bottom: 1px solid var(--ink); }
.r-kicker { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.r-kicker .bar { width: 28px; height: 3px; background: var(--ink); }
.r-title { font-size: 52px; line-height: 1; letter-spacing: -0.035em; font-weight: 700; margin: 12px 0 8px; }
.r-by { font-size: 15px; color: var(--ink-2); }
.r-id { margin-top: 10px; font: 11px var(--mono); color: var(--ink-3); letter-spacing: .02em; }
.conf { border: 1px solid var(--hair-2); padding: 1px 6px; }
.conf.low { border-color: var(--accent); color: var(--accent); }
.r-sec { padding: 22px 32px; border-bottom: 1px solid var(--hair); }
.r-sec:last-child { border-bottom: 0; }
.r-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 12px; }
.r-sec p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; }
.r-summary { font-size: 17px !important; line-height: 1.55 !important; }

/* worldview mix */
.mix { display: flex; height: 26px; border: 1px solid var(--ink); margin-bottom: 14px; }
.mix span { display: block; height: 100%; border-right: 1px solid var(--surface); }
.mix span:last-child { border-right: 0; }
.wv { display: grid; grid-template-columns: 14px minmax(0, 1fr) 52px; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--hair); }
.wv .sw { width: 14px; height: 14px; margin-top: 3px; border: 1px solid var(--swatch-line); }
.wv-n { font-weight: 600; font-size: 14px; }
.wv-f { font: 500 9.5px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.wv-e { grid-column: 2 / 4; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.wv-p { font: 700 18px var(--sans); text-align: right; letter-spacing: -0.02em; }

/* claim */
.claim { font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 16px; padding-left: 14px; border-left: 3px solid var(--ink); }
.nums { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.nums li { counter-increment: n; display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.55; }
.nums li::before { content: counter(n, decimal-leading-zero); font: 500 11px var(--mono); color: var(--accent); padding-top: 3px; }

/* seven questions */
.qs { border: 1px solid var(--ink); }
.qs-head, .q { display: grid; grid-template-columns: 170px 1fr 1fr; }
.qs-head { border-bottom: 1px solid var(--ink); font: 500 9.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.qs-head > div, .q > div { padding: 9px 12px; }
.qs-head > div + div, .q > div + div { border-left: 1px solid var(--hair); }
.q + .q { border-top: 1px solid var(--hair); }
.q-q { font-weight: 600; font-size: 13px; line-height: 1.3; }
.q-w, .q-b { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.q-b { background: var(--soft); }

/* two columns */
.cols { display: grid; grid-template-columns: 1fr 1fr; }
.cols .r-sec + .r-sec { border-left: 1px solid var(--hair); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { padding: 7px 0 7px 18px; position: relative; font-size: 14px; line-height: 1.5; border-top: 1px solid var(--hair); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 3px; background: var(--c, var(--ink)); }
.refs { display: grid; gap: 0; margin-top: 6px; }
.ref { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13.5px; line-height: 1.5; }
.ref b { font: 600 12px var(--mono); letter-spacing: .02em; }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.srcs a { font: 11px var(--mono); color: var(--ink-2); border: 1px solid var(--hair-2); padding: 2px 7px; text-decoration: none; }
.srcs a:hover { border-color: var(--ink); color: var(--ink); }
.r-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.note-src { font: 10.5px var(--mono); color: var(--ink-3); line-height: 1.5; }

/* loading */
.r-loading { padding: 80px 40px; }
.r-loading .big { font-size: 34px; letter-spacing: -0.02em; font-weight: 700; margin: 10px 0; }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.err { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; }

@media (max-width: 1000px) { .lens { grid-template-columns: 1fr; } .l-rail { position: static; max-height: none; } }
@media (max-width: 720px) {
  .lens { padding: 70px 16px 30px; }
  .r-head, .r-sec { padding-left: 18px; padding-right: 18px; }
  .r-title { font-size: 38px; }
  .qs-head { display: none; }
  .q { grid-template-columns: 1fr; }
  .q > div + div { border-left: 0; border-top: 1px dashed var(--hair); }
  .cols { grid-template-columns: 1fr; }
  .cols .r-sec + .r-sec { border-left: 0; }
}
.hist.running .h-m { color: var(--accent); }