/* AI engines lens: ported from the approved concept (docs/layer-3/ai-engines-concept/make-concept-v2.mjs) */
.engines .ehero { padding-bottom: 6px; }
.engines .pick { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0 16px; background: var(--n-100); border-radius: 10px; padding: 4px; width: max-content; max-width: 100%; }
.engines .pick .seg { display: inline-flex; gap: 6px; align-items: center; }
.engines .pick .hint { margin: 0 6px 0 8px; }
/* Side by side, not a table (Sheen 2026-10-16): each measure is a card, each engine a tile in it, in three groups */
.eg { --sv: 132px; --dc: 120px; }
.er { display: grid; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; transition: border-color .15s; }
.er.head { background: none; border: 0; box-shadow: none; padding: 0 17px; margin-bottom: 0; }
.eg .er.head .ec { font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 15px; background: var(--card); border: 1px solid var(--line); border-bottom: 3px solid var(--ec, var(--line2)); border-radius: 12px; padding: 12px 14px; }
.er.head [data-k="eh-chatgpt"] { --ec: var(--eng-chatgpt); } .er.head [data-k="eh-claude"] { --ec: var(--eng-claude); }
.er.head [data-k="eh-gemini"] { --ec: var(--eng-gemini); } .er.head [data-k="eh-perplexity"] { --ec: var(--eng-perplexity); }
.er.head .ec .note { font-weight: 400; }
.el { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.el-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.el-h b { font: 600 16.5px/1.3 var(--sans); color: var(--ink); }
.el-h .el-t { margin-left: auto; }
.ei { display: inline-grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border: 1px solid var(--line2); border-radius: 50%; color: var(--muted); font: 600 11px/1 var(--sans); cursor: default; }
.ei i { font-style: normal; }
.ei:hover, .ei:focus { border-color: var(--first); color: var(--first); }
.el .ei .tip { left: 0; top: 30px; width: min(360px, 100%); max-width: none; }
.egh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 30px 2px 12px; }
.egh h2 { font: 600 21px/1.25 var(--sans); letter-spacing: -.01em; margin: 0; color: var(--ink); }
.egh p { margin: 0; font-size: 14px; color: var(--muted); }
/* the question page's engine cards share the name .ec: here a tile inside a measure's card */
.eg .ec { display: block; padding: 14px; background: var(--raised); border: 1px solid var(--n-100); border-radius: 12px; box-shadow: none; min-width: 0; }
.eg .ec:has(.estand) { background: var(--tint-you); border-color: var(--b-200); }
.etw { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.etw .estand { margin: 0 0 0 auto; }
.big { font: 600 22px/1.15 var(--sans); letter-spacing: -.01em; }
.big .bl { font: 400 13px var(--sans); color: var(--ink2); letter-spacing: 0; }
.big.sm { font-size: 17px; }
.eg .big .bl { display: block; margin-top: 3px; }
.sub { font-size: 13px; color: var(--ink2); margin-top: 4px; }
.nosee { font-size: 13px; color: var(--none-ink); font-style: italic; }
.wl { display: block; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wchip { font-size: 12.5px; border: 1px solid var(--line2); border-radius: 999px; padding: 2px 9px; background: var(--card); }
.wchip i { font-style: normal; color: var(--muted); margin-left: 2px; }
.wchip.y { border-color: var(--b-300); background: var(--b-50); }
.qbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: end; height: 60px; max-width: 220px; margin-top: 8px; }
.qs { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.qs::before { content: ""; display: block; width: 100%; height: calc(4px + var(--h) * 40px); background: var(--first); border-radius: 4px 4px 2px 2px; opacity: calc(.25 + var(--h) * .75); order: 2; }
.qs i { font-style: normal; font-size: 12.5px; font-weight: 600; order: 1; }
.qaxis { display: flex; justify-content: space-between; max-width: 220px; margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.qaxis span:last-child::before { content: "→ "; }
.cbar { height: 6px; background: var(--b-50); border-radius: 4px; margin-top: 10px; overflow: hidden; max-width: 260px; }
.cbar b { display: block; height: 100%; background: var(--first); }
.ptr { font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.loc { margin: 12px 2px 0; font-size: 12.5px; color: var(--muted); }
.bqblock .sec { margin: 34px 0 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
.bqblock .sec h2 { font: 600 18px/1.3 var(--sans); margin: 0; }
.bqblock .sec p { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.bq { display: grid; grid-template-columns: 150px repeat(var(--qn), minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.bqh { display: flex; gap: 6px; align-items: flex-start; padding: 12px 12px 10px; font-size: 13px; border-left: 1px solid var(--line); min-width: 0; }
.bqh.corner { border-left: 0; }
.bqt { flex: 1; min-width: 0; border-radius: 8px; padding: 2px 4px; }
.bqt:hover { background: var(--n-50); }
.bqh b { display: block; } .bqh small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink2); font-size: 12px; line-height: 1.35; }
.bqgo { flex: none; font-size: 14px; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.bqgo:hover { background: var(--n-50); color: var(--ink); }
.bqh.lit, .bqc.lit { background: var(--b-50); }
.bqh.lit .bqt b { color: var(--first); }
.bqe { display: flex; gap: 8px; align-items: center; padding: 12px 14px; font-weight: 600; font-size: 14px; border-top: 1px solid var(--line); }
.bqc { padding: 10px 12px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; }
.rul { display: grid; gap: 6px; }
.rr { display: flex; gap: 8px; align-items: center; font-size: 11.5px; min-height: 14px; }
.rn { color: var(--muted); width: 18px; flex: none; }
.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; flex: 1; max-width: 150px; }
.track i { height: 9px; background: var(--n-150); border-radius: 2px; }
.track i.hit { background: var(--first); }
.rw { color: var(--ink2); }
.rw.val { color: var(--first); font-weight: 600; }
.rw.nosee { font-size: 11.5px; }
.bqcards { display: none; }
.engines .unseen { margin-top: 26px; }
@media (max-width: 1180px) {
  .eg { --sv: 112px; --dc: 100px; }
  .eg .ec { padding: 12px; }
  .big { font-size: 19px; }
}
@media (max-width: 760px) {
  .eg > .bqx { display: none; }
  .bqcards { display: grid; gap: 12px; }
  .er { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; padding: 14px 12px; }
  .er.head { padding: 0 13px; }
  .eg .er.head .ec { padding: 10px 12px; font-size: 14px; }
  .eg .el { order: -2; }
  .eg .ec.full { order: -1; grid-column: 1 / -1; }
  /* the difference sits right under the two engines it compares */
  .eg .ec.ed { order: -1; grid-column: 1 / -1; }
  .eg .ec { padding: 12px 10px; }
  .etw { flex-wrap: wrap; gap: 6px; }
  .egh { margin-top: 24px; }
  .egh h2 { font-size: 19px; }
  .engines .pick { width: auto; }
  .engines .pick .hint { flex-basis: 100%; margin: 4px 6px; }
  .bqcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 4px 14px 8px; }
  .bqcard .bqh { border-left: 0; padding: 10px 0; }
  .bqcard.lit { border-color: var(--b-300); }
  .bqprow { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
  .bqprow .bqe { padding: 0; border: 0; font-size: 13px; }
  .bqblock .sec .segs { width: 100%; }
}
.selbar.on .scope, .selbar.on .kept { color: var(--card); }
.selbar .kept { font-size: 12.5px; color: var(--muted); }

/* hover explanation, depth row only (Sheen 2026-10-14): the Overview pop-up's card (.acard), lined up with the bars;
   no help cursor, no focus box; tap on phone focuses the part */
.hastip { outline: none; }
.ec:has(.hastip) { position: relative; }
.qs.hastip { position: static; }
.hastip .tip { display: none; position: absolute; z-index: 30; left: 18px; top: calc(100% - 12px); width: calc(100% - 36px); max-width: 260px; box-sizing: border-box;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 22, 28, .16);
  color: var(--ink); font: 400 13px/1.45 var(--sans); letter-spacing: 0; text-align: left; white-space: normal; pointer-events: none; }
/* the sentence and every bar open in one place: under the start-to-end line, at the column's width */
.hastip:hover > .tip, .hastip:focus > .tip { display: block; }
.qs.hastip:hover::before, .qs.hastip:focus::before { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--first); }
.track.hastip { position: relative; }
.track.hastip .tip { left: 0; top: calc(100% + 6px); width: 240px; }
.track.hastip.tr .tip { left: auto; right: 0; }

/* report → product (plan § 3.3, Sheen 2026-10-15) */
.engines .finding { margin: 6px 0 4px; font: 500 19px/1.4 var(--sans); color: var(--ink); max-width: 70ch; }
.engines .cmp { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 10px 0 14px; font-size: 13px; color: var(--muted); }
.engines .cmp a { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; }
.engines .cmp a b { color: var(--first); }
.engines .cmp a:hover { border-color: var(--first); }
.ehd { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
a.ehd:hover { background: var(--n-100); }
.ehd.on { background: var(--navy); color: var(--card); padding: 4px 4px 4px 10px; gap: 10px; }
.ehd.sliv { gap: 4px; padding: 0; margin: 0; flex-wrap: wrap; min-width: 0; }
.eg .er.head .ec.sliv { padding: 10px; }
.ehd.sliv .gh-nm { display: inline; font-size: 13px; font-weight: 600; }
.ehd.sliv .gh-sw { width: auto; display: inline-flex; gap: 6px; padding: 0 6px; }
.eg .ec.sliv { background: var(--n-25); padding: 12px 10px; }
.ec.sliv .etw { font-size: 12.5px; flex-wrap: wrap; }
.svn { font-size: 13px; font-weight: 600; color: var(--ink2); }
.eg .ec.ed { background: var(--n-25); font-size: 13px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; justify-content: center; text-align: center; }
.estand { display: inline-block; width: max-content; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--first); background: var(--b-100); border-radius: 999px; padding: 2px 8px; }
.el-t { display: inline-flex; align-items: center; color: inherit; border: 1px solid var(--b-200); background: var(--b-50); border-radius: 999px; padding: 4px 11px; }
.el-t:hover { border-color: var(--first); }
.el-t.on { background: var(--card); border-color: var(--line2); }
.el-go { font-size: 12.5px; font-weight: 600; color: var(--first); }
.el-go i { font-style: normal; }
.el-t.on .el-go { color: var(--ink); }
.er.open { border-color: var(--b-300); }
.eg > .er.open:has(+ .bqx) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bqx { border-top: 1px solid var(--line); background: var(--n-25); padding: 14px 18px 18px; }
.eg > .bqx { border: 1px solid var(--b-300); border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; margin-bottom: 14px; }
.bqx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.bqx-h p { margin: 0; font-size: 13px; color: var(--ink2); }
.bqx-x { flex: none; font-size: 13px; font-weight: 600; color: var(--ink2); padding: 3px 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--card); }
.bqx-x:hover { border-color: var(--ink); }
.bqx .bq { box-shadow: none; }
.bqphone { display: none; }
[data-ans] { cursor: default; }
.strip.all .st-q { opacity: 1; }
.strip.lighting .st-c { opacity: .25; }
.strip.lighting .st-c.lit { opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); }
details.sy-sd { border-bottom: 0; position: relative; }
details.sy-sd > summary { list-style: none; cursor: pointer; }
details.sy-sd > summary::-webkit-details-marker { display: none; }
details.sy-sd > summary:hover { background: var(--n-50); border-radius: 7px; }
.sy-pop { position: absolute; z-index: 30; left: 0; width: min(300px, 100%); box-sizing: border-box; top: calc(100% + 4px); display: grid; gap: 6px; padding: 12px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 22, 28, .16); font-size: 13px; color: var(--ink2); }
.sy-pop b { color: var(--ink); overflow-wrap: anywhere; }
.sy-pop button { justify-self: start; margin-top: 2px; font: 600 13px var(--sans); color: var(--card); background: var(--first); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
@media (max-width: 760px) {
  .bqphone { display: block; margin: -4px 0 14px; }
  .eg > .er.open { margin-bottom: 0; border-radius: 16px; }
  .bqphone .bqx { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
  .ehd.on { padding: 3px 3px 3px 8px; }
  .engines .finding { font-size: 17px; }
}
/* question headers in an opened row are full and wrapped, never cut (lesson 8) */
.bqx .bqh small { display: block; -webkit-line-clamp: unset; overflow: visible; }
#eng-bqp { scroll-margin-top: 170px; }
.unpin { margin-left: 6px; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--n-150); font-size: 13px; cursor: pointer; vertical-align: 1px; }
.unpin:hover { background: var(--ink); color: var(--card); }

/* Each row's own mark (Sheen 2026-10-16): columns for searches, one mark per answer for your site, a ring for a share,
   icons for the layout, the sites and words themselves. Colours from palette.css only. */
.scols { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 10px; padding-left: 22px; border-top: 1px dashed var(--line2); }
.scols .sx { position: absolute; left: 0; top: -7px; font: 500 11px/1 var(--sans); color: var(--muted); }
.scols i { flex: 1; max-width: 10px; min-height: 3px; height: calc(var(--h) * 100%); background: var(--mk-top); border-radius: 2px 2px 0 0; }
.scols i.z { background: var(--line2); height: 3px; }
.scols i.nr { background: var(--dots-mk); height: 100%; opacity: .5; }
.smk { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 13px)); gap: 3px; margin-top: 10px; }
.smk i { aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; }
.smk-key i { width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; flex: none; }
.gkey svg { width: 14px; height: 14px; fill: none; stroke: var(--mk-you); stroke-width: 1.4; }
.gkey svg .f { fill: var(--mk-you); stroke: none; }
.s-both { background: var(--mk-first); }
.s-cited { background: var(--mk-top); }
.s-read { border: 2.5px solid var(--mk-top); background: var(--card); }
.s-none { border: 1.5px solid var(--mk-none); background: var(--card); opacity: .55; }
.s-hid, .s-nr { background: var(--dots-mk); }
.smk-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--ink2); }
.smk-key span { display: inline-flex; align-items: center; gap: 5px; }
.glys { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.gly { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.gly svg { width: 16px; height: 16px; fill: none; stroke: var(--mk-you); stroke-width: 1.4; }
.gly svg .f { fill: var(--mk-you); stroke: none; }
.gly b { font-size: 14px; font-variant-numeric: tabular-nums; }
.shr { display: grid; gap: 8px; justify-items: start; }
.shr .rw { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.shr .ring { position: absolute; inset: 0; width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--track); stroke-width: 6; }
.ring circle.on { stroke: var(--mk-you); stroke-linecap: butt; }
.shp { font: 600 16px/1 var(--sans); color: var(--ink); position: relative; }
.shl { font-size: 13px; color: var(--ink2); line-height: 1.35; }
.tops { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: t; }
.tops li { counter-increment: t; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; font-size: 13px; color: var(--ink); }
.tops li::before { content: counter(t); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tops li span { overflow-wrap: anywhere; }
.tops li b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink2); }
.tops li.you span { color: var(--link); font-weight: 600; }
.sub.yr { margin-top: 4px; }
.wchips.few { margin-top: 10px; }
.wchips.few .wchip { border-radius: 8px; }
.wmore { font-size: 12.5px; color: var(--muted); align-self: center; }