/* Iris for the archive — sample styles. Uses the site's own tokens (style.css :root). */

/* ---- the mark: an iris, not a chat bubble ---- */
.iris-eye{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;vertical-align:-2px;
  background:radial-gradient(circle,#0d0d0d 0 27%,transparent 29%),conic-gradient(from 200deg,#c0392b,#e67e22,#f3c26b,#e67e22,#c0392b);
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.iris-name{font:600 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f0c9a4}

/* ---- sample banner ---- */
.sample-banner{background:#1b1510;border-bottom:1px solid #3a2a1c;color:#d9c4ad;font-size:.78rem;padding:7px 16px;text-align:center;line-height:1.5}
.sample-banner b{color:#f3c26b}
.sample-banner a{color:#f0c9a4;text-decoration:underline}

/* ---- cards: where + how many angles, read from the Node Map ---- */
.iris-angles{position:absolute;left:8px;bottom:8px;background:rgba(13,13,13,.82);color:#f3d6b8;border:1px solid rgba(243,194,107,.35);
  font:600 .68rem var(--mono);padding:2px 6px;border-radius:3px;letter-spacing:.02em}
.iris-place{margin-inline-start:auto;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b9a48f;font-family:var(--font);font-size:.72rem}

/* ================= SAMPLE A: the search box asks ================= */
.search-wrap.iris-on input{padding-right:100px}
.iris-ask-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;
  background:#231a14;border:1px solid #4a3321;color:#f0c9a4;border-radius:5px;padding:5px 10px;font:600 .76rem var(--font);cursor:pointer}
.iris-ask-btn:hover{border-color:#e67e22;color:#fff}
.iris-hint{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:850;background:#141414;border:1px solid #3a2a1c;border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.6);padding:10px 12px;font-size:.84rem;color:var(--text-muted)}
.iris-hint[hidden]{display:none}
.iris-hint .ih-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.iris-hint .ih-lead{display:flex;align-items:center;gap:7px;color:#d9c4ad;font-size:.8rem}
.iris-hint kbd{margin-inline-start:auto;font:600 .7rem var(--mono);color:#f0c9a4;border:1px solid #4a3321;border-radius:4px;padding:2px 6px;background:#1d1611}
.iris-hint .ih-ex{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.iris-hint .ih-sub{margin-top:8px;font-size:.74rem;color:#7d7064}

/* chips (read-back of a question: every one removable) */
.ic{display:inline-flex;align-items:center;gap:4px;background:#221913;border:1px solid #4a3321;color:#f3dcc4;border-radius:14px;
  padding:3px 4px 3px 10px;font-size:.78rem;line-height:1.3;white-space:nowrap;max-width:100%}
.ic span{overflow:hidden;text-overflow:ellipsis}
.ic.neg{border-color:#6b2a22;background:#2a1411;color:#f2b8ae}
.ic.pre{padding-right:10px;opacity:.9}
.ic button{background:none;border:0;color:#b98f6c;cursor:pointer;font-size:.9rem;line-height:1;padding:0 4px;border-radius:50%}
.ic button:hover{color:#fff;background:#4a3321}
.ix{background:var(--surface2);border:1px solid var(--border);color:#d6d6d6;border-radius:14px;padding:4px 11px;font:500 .78rem var(--font);cursor:pointer}
.ix:hover{border-color:#e67e22;color:#fff}

/* the answer strip */
#iris-answer{max-width:1400px;margin:12px auto 0;padding:0 24px}
#iris-answer[hidden]{display:none}
.ia{background:linear-gradient(180deg,#17120e,#131110);border:1px solid #3a2a1c;border-radius:10px;padding:12px 14px 12px}
.ia-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ia-top .iris-name{margin-inline-end:4px}
.ia-clear{margin-inline-start:auto;background:none;border:0;color:#9a8574;font:500 .78rem var(--font);cursor:pointer;padding:4px 6px}
.ia-clear:hover{color:#fff}
.ia-say{margin:9px 0 0;font-size:.92rem;line-height:1.55;color:#e6ddd4}
.ia-say b{color:#fff}
.ia-lines p{margin:8px 0 0;font-size:.9rem;line-height:1.6;color:#e6ddd4}
.ia-note{margin:5px 0 0;font-size:.76rem;color:#b39b86}
.ia-note::before{content:"↳ ";color:#6d5847}
.ia-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.ia-seg{display:inline-flex;border:1px solid #4a3321;border-radius:6px;overflow:hidden}
.ia-seg button{background:transparent;border:0;color:#cdb9a6;font:600 .76rem var(--font);padding:5px 11px;cursor:pointer}
.ia-seg button.on{background:#e67e22;color:#1a0f07}
.ia-b{display:inline-flex;align-items:center;gap:5px;background:#1f1f1f;border:1px solid var(--border);color:#ddd;border-radius:6px;
  padding:5px 10px;font:500 .78rem var(--font);cursor:pointer;text-decoration:none}
.ia-b:hover{border-color:#e67e22;color:#fff}
.ia-b.map{border-color:#4a3321;color:#f3c26b}
.ia-fu{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed #33271d}
.ia-fu > span{font-size:.72rem;color:#8a7766;text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono)}
.ia-busy{display:inline-block;width:12px;height:12px;border:2px solid #4a3321;border-top-color:#e67e22;border-radius:50%;animation:iris-spin .8s linear infinite;vertical-align:-2px}
@keyframes iris-spin{to{transform:rotate(360deg)}}

/* ================= EVENTS VIEW ================= */
#iris-events{display:flex;flex-direction:column;gap:12px}
#iris-events[hidden]{display:none}
.iev{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.iev header{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:start}
.iev-t{font-weight:600;font-size:.95rem;color:var(--text)}
.iev-m{grid-column:1;display:flex;flex-wrap:wrap;gap:4px 12px;font:.74rem var(--mono);color:var(--text-muted)}
.iev-m .iev-ab{color:#f3c26b}
.iev-l{grid-column:2;grid-row:1 / span 2;display:flex;gap:10px;align-items:center;font-size:.78rem;white-space:nowrap}
.iev-l a{color:#f3c26b}
.iev-strip,.idz-strip{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scrollbar-width:thin}
.iev-th,.idz-th{position:relative;flex:0 0 auto;width:132px;aspect-ratio:16/9;border-radius:5px;overflow:hidden;border:1px solid var(--border);
  background:#1a1a1a;padding:0;cursor:pointer}
.idz-th{width:84px}
.iev-th:hover,.idz-th:hover{border-color:#e67e22}
.iev-th img,.idz-th img{width:100%;height:100%;object-fit:cover;display:block}
.iev-th em{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.8);color:#fff;font:normal .64rem var(--mono);padding:1px 4px;border-radius:2px}
.iev-play{position:absolute;left:5px;top:5px;width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;filter:drop-shadow(0 0 2px #000)}
.iev-more{flex:0 0 auto;align-self:center;color:var(--text-muted);font:.78rem var(--mono);padding:0 8px}
.iev-next{align-self:center;background:var(--surface2);border:1px solid var(--border);color:#ddd;border-radius:6px;padding:8px 16px;cursor:pointer;font:500 .85rem var(--font)}
.iev-loose{border-style:dashed}

/* ================= THE CLIP DOSSIER (inside the lightbox) ================= */
.modal-meta{width:360px}
#iris-dossier{background:#15110d;border:1px solid #3a2a1c;border-radius:8px;padding:12px}
.idz-k{display:flex;align-items:center;gap:7px;font:600 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d9a57a}
.idz-k::before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#15110d 0 27%,transparent 29%),conic-gradient(from 200deg,#c0392b,#e67e22,#f3c26b,#e67e22,#c0392b)}
.idz-t{margin-top:6px;font-weight:650;font-size:.98rem;line-height:1.35;color:#fff}
.idz-g{display:flex;gap:10px;margin-top:9px;align-items:flex-start}
.idz-loc{flex:none;width:52px;height:78px}
.idz-loc path{fill:#2a211a;stroke:#5a4533;stroke-width:.7}
.idz-loc circle{fill:#ff5a4a}
.idz-loc .idz-halo{fill:rgba(255,90,74,.25)}
.idz-g dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:.8rem;min-width:0}
.idz-g dt{color:#8a7766;font:.66rem var(--mono);text-transform:uppercase;letter-spacing:.08em;padding-top:3px}
.idz-g dd{margin:0;color:#e8e0d8;line-height:1.45;overflow-wrap:anywhere}
.idz-g dd small{display:block;color:#8f7d6d;font-size:.7rem}
.idz-g dd b{color:#f3c26b;font-weight:600}
.idz-a{margin-top:10px}
.idz-a h4{font:600 .7rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#b39b86;margin:0}
.idz-a h4 span{color:#f3c26b}
.idz-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.idz-b{background:#1f1813;border:1px solid #4a3321;color:#ead7c4;border-radius:5px;padding:4px 9px;font:500 .74rem var(--font);cursor:pointer;text-decoration:none}
.idz-b:hover{border-color:#e67e22;color:#fff}
.idz-map{color:#f3c26b}
.idz-fine{margin:9px 0 0;font-size:.7rem;line-height:1.5;color:#8a7766}
/* links + possible leads */
.idz-ln{margin-top:12px;padding-top:10px;border-top:1px solid #2c2119}
.idz-ln h4,.idz-rev h4{font:600 .7rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#b39b86;margin:0;display:flex;align-items:baseline;gap:6px}
.idz-ln h4 span{color:#f3c26b}
.idz-ln h4 em{font-style:normal;margin-inline-start:auto;color:#b0786a;font-size:.62rem;border:1px dashed #6b3c33;border-radius:3px;padding:0 4px}
.idz-lh{margin-top:12px !important}
.idz-nodes{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.idz-node{display:inline-flex;align-items:center;gap:5px;max-width:100%;background:#1b1612;border:1px solid #3a2a1c;border-radius:4px;padding:2px 7px;color:#ead7c4;font-size:.74rem;text-decoration:none}
.idz-node i{font:normal .6rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#8a7766}
.idz-node:hover{border-color:#e67e22;color:#fff}
.idz-mix{margin-top:5px}
.idz-leads{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.idz-leads button,.idz-leads a{display:grid;grid-template-columns:1fr auto;gap:1px 8px;width:100%;text-align:left;background:#15110d;
  border:1px dashed #5a3a30;border-radius:5px;padding:6px 8px;color:#e6ddd4;cursor:pointer;text-decoration:none;font:inherit}
.idz-leads button:hover,.idz-leads a:hover{border-color:#e67e22}
.idz-leads b{font-size:.78rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idz-leads small{grid-column:1;font-size:.68rem;color:#9a8574;line-height:1.35}
.idz-leads em{grid-column:2;grid-row:1 / span 2;align-self:center;font:normal .68rem var(--mono);color:#f3c26b;white-space:nowrap}
.idz-all{display:inline-block;margin-top:6px;font-size:.74rem;color:#f3c26b}
/* reverse image search */
.idz-rev{margin-top:12px;padding-top:10px;border-top:1px solid #2c2119}
.idz-rev > div{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}

/* ================= SAMPLE B: the companion ================= */
/* ---- sections that fold on a phone; their summary keeps the counts in view ---- */
.idz-ln.idz-sec,.idz-rev.idz-sec{margin-top:0;padding-top:0;border-top:0}
.idz-sec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;margin-top:12px;padding:8px 0 4px;
  border-top:1px solid #2c2119;font:600 .78rem var(--font);color:#e2cdb8}
.idz-sec > summary::-webkit-details-marker{display:none}
.idz-sec > summary::after{content:"▾";margin-inline-start:auto;color:#8a7766;transition:transform .15s}
.idz-sec:not([open]) > summary::after{transform:rotate(-90deg)}
.idz-sec > summary b{color:#f3c26b;font-weight:700}
.idz-sec[open] > summary{margin-bottom:2px}
.idz-sec > h4:first-of-type{margin-top:6px}
.ia-notes{margin-top:6px}
.ia-notes > summary{cursor:pointer;list-style:none;font:.72rem var(--mono);color:#8a7766;text-transform:uppercase;letter-spacing:.08em}
.ia-notes > summary::-webkit-details-marker{display:none}
.ia-notes > summary::before{content:"▸ ";color:#6d5847}
.ia-notes[open] > summary::before{content:"▾ "}
.ia-notes[open] > summary{margin-bottom:2px}

/* ================= PHONES ================= */
@media (max-width:600px){
  #iris-answer{padding:0 10px;margin-top:8px}
  .ia{padding:10px 11px}
  .ia-say{font-size:.86rem}
  .ia-act{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .ia-act::-webkit-scrollbar{display:none}
  .ia-act > *{flex:0 0 auto}
  .ia-fu{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ia-fu::-webkit-scrollbar{display:none}
  .ia-fu > *{flex:0 0 auto}
  .ia-top{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ia-top::-webkit-scrollbar{display:none}
  .ia-top > *{flex:0 0 auto}
  .search-wrap.iris-on input{padding-right:96px}
  .iris-ask-btn{padding:5px 9px;border-radius:16px}
  /* under the box, the full width of it, and never taller than half the screen */
  .iris-hint{left:0;right:0;max-height:50vh;overflow-y:auto}
  .iev header{grid-template-columns:1fr}
  .iev-l{grid-column:1;grid-row:auto}
  .iev-th{width:112px}
  .modal-meta{width:100%}
  .iris-place{display:none}
}

/* ================= TOUCH SCREENS =================
   Real fingers: every control at least ~36-40px tall, and the question box at 16px so iOS does
   not zoom the page when it is tapped. */
@media (hover:none) and (pointer:coarse){
  .search-wrap.iris-on input{font-size:16px}
  .ic{padding:5px 4px 5px 11px}
  .ic button{min-width:30px;min-height:30px;font-size:1.05rem}
  .ix{min-height:36px;padding:7px 13px}
  .ia-b,.ia-clear,.ia-seg button{min-height:38px}
  .idz-b{min-height:40px;display:inline-flex;align-items:center}
  .idz-th{min-width:64px;min-height:44px}
  .idz-leads button,.idz-leads a{min-height:44px}
  .idz-sec > summary{min-height:40px}
  .iris-ask-btn{min-height:34px}
}