/* Records that answer back (assets/ui-explore.js, docs/agent-platform/result-layout.md §3.5.7). Loaded after ui.css; tokens from app.css, ui.css and ui-charts.css. */
.lyout :is(.lyx-btn,.lyx-pin,.lyx-chip,.lyx-fsel-btn,.lyx-thumb,[data-drill-target],[data-facet-tile]):focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.lyout :is(.lyx-field,.lyx-area):focus-visible{outline:none}
.lyx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.lyx-btn{display:inline-flex;align-items:center;gap:6px;height:var(--ctl);padding:0 13px;border:1px solid var(--stroke2);border-radius:999px;background:transparent;color:var(--fg2);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color var(--m-tap) var(--m-ease),border-color var(--m-tap) var(--m-ease),background-color var(--m-tap) var(--m-ease)}
.lyx-btn:hover{color:var(--fg);border-color:var(--hover)}
.lyx-btn .lyicon{margin-left:-2px;color:var(--mute)}
.lyx-btn:hover .lyicon{color:var(--fg)}
.lyx-btn[disabled]{opacity:.45;cursor:not-allowed}
.lyx-btn[disabled]:hover{color:var(--fg2);border-color:var(--stroke2)}
.lyx-btn.lyx-btn-on{background:var(--fg);border-color:var(--fg);color:var(--panel)}
.lyx-btn.lyx-btn-on:hover{background:var(--fg2);border-color:var(--fg2);color:var(--panel)}
.lyx-btn.lyx-ibtn{width:var(--ctl);padding:0;justify-content:center}
.lyx-btn.lyx-ibtn .lyicon{margin:0}
.lyx-btn[aria-pressed="true"]{color:var(--fg);border-color:var(--fg2)}

/* range */
.lyx-range{display:flex;flex-direction:column;gap:12px;max-width:680px}
.lyx-rtop{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.lyx-rval{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--fg);font-variant-numeric:tabular-nums}
.lyx-rval>span{font-weight:400;color:var(--dim)}
.lyx-rbody{padding:0 16px;margin:0 -16px;overflow-x:clip}
.lyx-hist{display:flex;align-items:flex-end;gap:2px;height:36px}
.lyx-bin{position:relative;flex:1 1 0;height:100%;border-radius:2px 2px 0 0;background:var(--line);transform:scaleY(var(--h,0));transform-origin:bottom}
.lyx-bin::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--chart);opacity:0;transition:opacity var(--m-tap) var(--m-ease)}
.lyx-bin.on::after{opacity:1}
.lyx-rail{position:relative;height:20px;margin-top:2px;touch-action:pan-y;cursor:pointer}
.lyx-rail::before{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-radius:99px;background:var(--line)}
.lyx-fill{position:absolute;left:0;top:8px;width:100%;height:4px;background:var(--chart);transform-origin:left;pointer-events:none}
.lyx-tw{position:absolute;inset:0;pointer-events:none}
.lyx-fill,.lyx-tw{transition-property:none} /* pointer-coupled: app.css's reduced-motion rule would otherwise turn each write into a one-frame-late transition */
.lyx-thumb{position:absolute;left:-10px;top:0;box-sizing:border-box;width:var(--knob);height:var(--knob);border:3px solid var(--card);border-radius:50%;background:var(--accent);pointer-events:auto;cursor:grab;touch-action:pan-y;transition:transform var(--m-tap) var(--m-ease)}
.lyx-thumb::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.lyx-thumb:hover,.lyx-thumb.lyx-drag{transform:scale(1.12)}
.lyx-thumb.lyx-drag{cursor:grabbing}
.lyx-thumb:focus-visible{outline-offset:3px}
.lyx-ticks{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.lyx-rcount{margin:0;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.lyx-rcount b{font-weight:600;color:var(--fg)}
.lyx-rcount span{color:var(--fg2)}
.lyout .lychart [data-range-out]{opacity:.25}
@container (max-width:460px){.lyx-rval{font-size:20px}.lyx-ticks span:nth-child(2){visibility:hidden}}

/* compare */
.lyx-pin{flex:none;display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);padding:0;border:1px solid var(--stroke2);border-radius:999px;background:transparent;color:var(--dim);cursor:pointer;transition:background-color var(--m-tap) var(--m-ease),border-color var(--m-tap) var(--m-ease),color var(--m-tap) var(--m-ease)}
.lyx-pin .lyicon{grid-area:1/1;transition:transform var(--m-tap) var(--m-ease),opacity var(--m-tap) var(--m-ease)}
.lyx-pin .lyicon:last-child{opacity:0;transform:scale(.5)}
.lyx-pin:hover{border-color:var(--hover);color:var(--fg)}
.lyx-pin[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--panel)}
.lyx-pin[aria-pressed="true"] .lyicon:first-child{opacity:0;transform:scale(.5) rotate(90deg)}
.lyx-pin[aria-pressed="true"] .lyicon:last-child{opacity:1;transform:none}
.lytab .rtab :is(td,th).lyx-pinc{width:44px;min-width:0;padding-right:0!important;vertical-align:middle}
.lyc-chev-slot{width:16px} /* rows without a chevron keep its slot, so every pin in a list sits in one column */
:root[data-screen="phone"] .lytab-wide .rtab tr:has(>td.lyx-pinc){position:relative;padding-right:56px}
:root[data-screen="phone"] .lytab-wide .rtab td.lyx-pinc{position:absolute;top:10px;right:12px;width:auto}
.lyx-trayw{position:sticky;bottom:12px;z-index:3;display:flex;align-items:flex-start;justify-content:center;margin-top:-10px;padding-top:10px} /* the bar keeps its height while its slot opens */
.lyx-tray{display:flex;align-items:center;gap:10px;max-width:100%;min-width:0;padding:7px 7px 7px 16px;border:1px solid var(--lift);border-radius:999px;background:var(--well)}
.lyx-picks{position:relative;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.lyx-pick{flex:0 1 auto;max-width:180px;height:26px;padding:0 10px;border:1px solid var(--stroke2);border-radius:999px;font-size:12px;line-height:24px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyx-tray-n{flex:none;font-size:13px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.lyx-tray-n b{font-weight:600;color:var(--fg)}
.lyx-tray .lyx-btn{flex:none}
:root[data-screen="phone"] .lyx-picks{display:none}:root[data-screen="phone"] .lyx-tray{gap:8px;padding-left:14px}
.lyx-views{position:relative}
.lyx-view{display:flex;flex-direction:column;gap:10px;min-width:0}
.lyx-cmp{display:flex;flex-direction:column;gap:12px;min-width:0}
.lyx-cmp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lyx-cmp-t{margin:0;font-size:14px;color:var(--mute)}
.lyx-cmp-t b{font-weight:600;color:var(--fg)}
.lyx-cmp-acts{display:flex;align-items:center;gap:8px}
.lyx-vs .lyvs-row.lyx-diff .lyvs-l{color:var(--fg2)}
.lyx-vs .lyvs-row.lyx-same :is(.lyvs-l,.lyvs-v){color:var(--dim)}
.lyx-vs .lyvs-row[hidden]{display:none}
/* Two picks stay side by side down to a phone; three stack one record after another. */
@container (min-width:360px){
:root[data-screen="phone"] .lyx-vs.lyvs-2{display:flex;flex-direction:column}
:root[data-screen="phone"] .lyx-vs.lyvs-2 .lyvs-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;padding:10px 16px;border-top:1px solid var(--hair)}
:root[data-screen="phone"] .lyx-vs.lyvs-2 .lyvs-row.lyvs-head{padding:16px;border-top:0}
:root[data-screen="phone"] .lyx-vs.lyvs-2 .lyvs-l{display:block;grid-column:1/-1;font-size:12px}
:root[data-screen="phone"] .lyx-vs.lyvs-2 .lyvs-head .lyvs-l{display:none}
:root[data-screen="phone"] .lyx-vs.lyvs-2 :is(.lyvs-h,.lyvs-v){order:0;padding:0;border-top:0;background:transparent}
:root[data-screen="phone"] .lyx-vs.lyvs-2 .lyvs-v[data-label]{display:block;text-align:left}
:root[data-screen="phone"] .lyx-vs.lyvs-2 .lyvs-v[data-label]::before{content:none}
}

/* drill-down */
.lyout :is([data-drill-target],[data-facet-tile]){cursor:pointer;user-select:none}
.lyout :is([data-drill-target],[data-facet-tile]):hover{border-color:var(--lift)}
.lyout :is([data-drill-target],[data-facet-tile])[aria-pressed="true"]{border-color:var(--fg2);background:var(--row)}
.lyout [data-drill-out]{opacity:.45;transition:opacity var(--m-fade) var(--m-ease)}
.lyout [data-rows]:has(>[data-drill-out])>[data-row]:not([data-drill-out]){position:relative;z-index:1}
.lyx-drill{margin-bottom:-10px;padding-bottom:10px}
.lyx-chip{display:inline-flex;align-items:center;gap:8px;height:var(--ctl);padding:0 8px 0 13px;border:1px solid var(--hover);border-radius:999px;background:var(--well);color:var(--fg);font-size:13px;font-weight:500;cursor:pointer;transition:border-color var(--m-tap) var(--m-ease)}
.lyx-chip b{min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--field);font-size:12px;font-weight:600;line-height:18px;text-align:center;color:var(--fg2);font-variant-numeric:tabular-nums}
.lyx-chip .lyicon{color:var(--mute);transition:color var(--m-tap) var(--m-ease)}
.lyx-chip:hover{border-color:var(--fg2)}
.lyx-chip:hover .lyicon{color:var(--fg)}

/* draft editing */
.lyx-edhold{position:relative;min-width:0}
.lyx-edbox{min-width:0}
/* The textarea keeps the prose's measure and leading (82ch at 14/1.6, plus its padding and border), so no line breaks anew; a long draft scrolls inside it. */
.lyx-area{display:block;width:100%;max-width:calc(82ch + 30px);min-height:96px;max-height:60vh;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg2);font:inherit;font-size:14px;line-height:1.6;resize:none;overflow-y:auto;outline:none;transition:border-color var(--m-tap) var(--m-ease)}
.lyx-area:focus{border-color:var(--fg2)}
.lyx-edbar{display:flex;flex-direction:column;gap:10px;min-width:0}
.lyx-edacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lyx-edtag{font-size:12px;color:var(--mute)}
.lyx-rw{overflow:clip}
.lyx-rw-in{display:flex;align-items:center;gap:8px;max-width:640px}
.lyx-field{flex:1;min-width:0;height:36px;padding:0 14px;border:1px solid var(--stroke2);border-radius:999px;background:var(--panel);color:var(--fg);font-size:13px;outline:none;transition:border-color var(--m-tap) var(--m-ease)}
.lyx-field::placeholder{color:var(--dim)}
.lyx-field:focus{border-color:var(--fg2)}

/* facets as a select */
.lyfacets.lyx-fsel{position:relative;display:inline-flex;flex-wrap:nowrap;align-self:flex-start;max-width:100%}
.lyx-fsel-btn{display:inline-flex;align-items:center;gap:10px;min-width:220px;max-width:100%;height:var(--ctl);padding:0 12px 0 14px;border:1px solid var(--stroke2);border-radius:999px;background:transparent;color:var(--fg);font-size:13px;cursor:pointer;transition:border-color var(--m-tap) var(--m-ease)}
.lyx-fsel-btn:hover,.lyx-fsel-btn[aria-expanded="true"]{border-color:var(--hover)}
.lyx-fsel-btn[data-active]{border-color:var(--fg2)}
.lyx-fsel-k{flex:none;color:var(--mute)}
.lyx-fsel-v{flex:1;min-width:0;text-align:left;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyx-fsel-btn>.lyicon{flex:none;color:var(--mute);transition:transform var(--m-fade) var(--m-ease)}
.lyx-fsel-btn[aria-expanded="true"]>.lyicon{transform:rotate(180deg)}
.lyx-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:20;box-sizing:border-box;min-width:100%;width:max-content;max-width:min(360px,calc(100vw - 32px));max-height:320px;overflow:auto;padding:6px;border:1px solid var(--lift);border-radius:12px;background:var(--panel);transform-origin:top left;overscroll-behavior:contain;scrollbar-width:thin}
.lyx-opt{display:flex;align-items:center;gap:12px;min-height:34px;padding:0 10px;border-radius:8px;font-size:13px;color:var(--fg2);cursor:pointer;outline:none}
.lyx-opt:hover,.lyx-opt:focus{background:var(--field);color:var(--fg)}
.lyx-opt[aria-selected="true"]{color:var(--fg);font-weight:500}
.lyx-optl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyx-optn{flex:none;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.lyx-opt>.lyicon{flex:none;opacity:0;color:var(--fg)}
.lyx-opt[aria-selected="true"]>.lyicon{opacity:1}

@media (prefers-reduced-motion:reduce){
.lyx-thumb,.lyx-pin .lyicon,.lyx-fsel-btn>.lyicon{transition:none}
.lyx-thumb:hover,.lyx-thumb.lyx-drag{transform:none}
.lyx-bin::after,.lyout [data-drill-out]{transition-duration:var(--m-tap)}
}
/* iOS zooms the page when a field under 16 px takes focus; touch screens get 16 px fields. */
@media (pointer:coarse){.lyx-area,.lyx-field{font-size:16px}}