/* ============================================================================
   app.css — Research OS Web V0. Layered ON TOP of ros.css, never replacing it.

   ros.css owns the design system (tokens, buttons, cards, badges, modal, toast,
   bell, agent thread, workspace shell). This file adds only what the new
   information architecture needs and could not be expressed with what is there:
   page shell, menus, stat tiles, list rows, tabs, drop zone, auth screen.

   Rules inherited from ros.css and kept here:
   - gold ONLY for human decision / HITL signals;
   - green tiers carry authority (house > starbucks > accent > uplift);
   - no gradients, no images, 2–3 layer low-alpha shadows, 12px cards, 50px pills.
   ============================================================================ */

/* --- page shell ---------------------------------------------------------- */
.page { max-width: 1180px; margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-9); }
.page--wide { max-width: 1400px; }
.page__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.page__titles { min-width: 0; }
.page__title { margin: 0; font-size: var(--text-h); font-weight: 600; line-height: 36px; letter-spacing: -0.16px; color: var(--green-starbucks); }
.page__sub { margin: var(--space-1) 0 0; color: var(--text-black-soft); font-size: var(--text-2); }
.page__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.section { margin-bottom: var(--space-5); }
.section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.section__title { margin: 0; font-size: var(--text-3); font-weight: 600; color: var(--text-black); letter-spacing: var(--tracking-ko-label); }
.section__link { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--tight { gap: var(--space-2); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row--end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-black-soft); }
.small { font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); }

/* --- nav menus (bell + profile) ------------------------------------------ */
.menu-wrap { position: relative; display: inline-flex; }
.menu { position: absolute; right: 0; top: calc(100% + var(--space-1)); width: min(320px, calc(100vw - 2 * var(--gutter))); padding: var(--space-2); }
.menu__head { margin: 0; padding: var(--space-2); font-size: var(--text-2); font-weight: 700; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.menu__sub { margin: 0; padding: 0 var(--space-2) var(--space-2); color: var(--text-black-soft); font-size: var(--text-1); border-bottom: 1px solid var(--hairline); }
.popover__item { display: block; width: 100%; padding: 10px var(--space-2); border: 0; border-radius: var(--r-input); background: transparent; color: var(--text-black); font: 600 var(--text-2)/1.4 var(--font-sans); letter-spacing: var(--tracking-ko-label); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--motion), transform var(--motion); }
.popover__item:hover { background: var(--black-a06); text-decoration: none; }
.popover__item:active { transform: scale(0.98); }
.popover__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.popover__item--danger { color: var(--red); }
.avatar-btn { width: var(--tap-min); height: var(--tap-min); padding: 0; border: 0; border-radius: var(--r-circle); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--motion), transform var(--motion); }
.avatar-btn:hover { background: var(--black-a06); }
.avatar-btn:active { transform: scale(0.95); }
.avatar-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.avatar { width: 32px; height: 32px; border-radius: var(--r-circle); background: var(--green-starbucks); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-1); font-weight: 700; }
.notice-item { display: block; padding: var(--space-2); border-radius: var(--r-input); color: inherit; text-decoration: none; }
.notice-item:hover { background: var(--black-a06); text-decoration: none; }
.notice-item--unread { background: var(--green-light-33); }
.notice-item__title { font-size: var(--text-2); font-weight: 700; }
.notice-item__body { font-size: var(--text-1); color: var(--text-black-soft); }

/* --- stat tiles ----------------------------------------------------------- */
.stat-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { padding: var(--space-3); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.stat--attention { background: var(--gold-lightest); border: 1px solid var(--gold); }
.stat__label { font-size: var(--text-1); font-weight: 600; letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.stat__value { margin-top: var(--space-1); font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--green-starbucks); font-variant-numeric: tabular-nums; }
.stat--attention .stat__value { color: var(--text-rewards); }
.stat__meta { margin-top: var(--space-1); font-size: var(--text-1); color: var(--text-black-soft); }

/* --- list rows ------------------------------------------------------------ */
.list { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.list__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none; transition: background-color var(--motion); }
.list__row:last-child { border-bottom: 0; }
a.list__row:hover { background: var(--neutral-cool); text-decoration: none; }
.list__main { flex: 1 1 320px; min-width: 0; }
.list__title { font-size: var(--text-2); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.list__meta { margin-top: 2px; font-size: var(--text-1); color: var(--text-black-soft); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.list__right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* --- tabs ------------------------------------------------------------------ */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-4); }
.tab { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-black-soft); font: 600 var(--text-2)/1 var(--font-sans); letter-spacing: var(--tracking-ko-label); text-decoration: none; cursor: pointer; }
.tab:hover { color: var(--green-accent); text-decoration: none; }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--green-accent); border-bottom-color: var(--green-accent); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-input); }

/* --- forms ----------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.textarea { width: 100%; min-height: 120px; padding: var(--space-2) var(--space-3); border: 1px solid var(--input-border); border-radius: var(--r-input); background: var(--white); color: var(--text-black); font: inherit; resize: vertical; }
.textarea:focus { outline: none; border-color: var(--green-accent); box-shadow: 0 0 0 1px var(--green-accent); }
.form-hint { margin-top: var(--space-1); font-size: var(--text-1); color: var(--text-black-soft); }
.form-error { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-input); background: var(--red-tint); color: var(--red); font-size: var(--text-2); border: 1px solid var(--red); }
.check-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--hairline); border-radius: var(--r-input); }
.check-row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green-accent); }

/* --- drop zone (research assets) ------------------------------------------- */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); border: 1.5px dashed var(--input-border); border-radius: var(--r-card); background: var(--neutral-cool); text-align: center; color: var(--text-black-soft); cursor: pointer; transition: border-color var(--motion), background-color var(--motion); }
.dropzone:hover, .dropzone[data-drag="true"] { border-color: var(--green-accent); background: var(--green-light-33); }
.dropzone__title { font-size: var(--text-2); font-weight: 700; color: var(--text-black); }

/* --- auth ------------------------------------------------------------------ */
.auth-shell { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: var(--space-5) var(--gutter); }
.auth-card { width: min(440px, 100%); padding: var(--space-5); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-frap); }
.auth-card__brand { display: flex; align-items: center; gap: var(--space-2); color: var(--green-starbucks); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.auth-card__title { margin: 0 0 var(--space-1); font-size: var(--text-h); font-weight: 600; color: var(--green-starbucks); }
.auth-card__sub { margin: 0 0 var(--space-4); color: var(--text-black-soft); font-size: var(--text-2); }
.auth-demo { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: var(--text-1); color: var(--text-black-soft); }
.auth-demo__row { display: flex; gap: var(--space-2); align-items: center; padding: 2px 0; }
.auth-demo__id { font-family: var(--font-mono); font-size: var(--text-0); }

/* --- technical details (ids, raw payloads) --------------------------------- */
.tech { margin-top: var(--space-2); border: 1px solid var(--hairline); border-radius: var(--r-input); background: var(--neutral-cool); }
.tech > summary { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--text-1); font-weight: 600; letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); list-style: none; }
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary::before { content: "▸ "; }
.tech[open] > summary::before { content: "▾ "; }
.tech__body { padding: 0 var(--space-3) var(--space-3); font-family: var(--font-mono); font-size: var(--text-0); color: var(--text-black-soft); white-space: pre-wrap; word-break: break-all; }

/* --- workspace additions ---------------------------------------------------- */
.work-aside { width: 320px; flex: none; border-left: 1px solid var(--hairline); background: var(--white); overflow-y: auto; padding: var(--space-3); }
.work-shell { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; }
@media (max-width: 1024px) { .work-aside { display: none; } }
.aside-block { margin-bottom: var(--space-4); }
.aside-block__title { font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); text-transform: none; color: var(--text-black-soft); margin: 0 0 var(--space-2); }
.stage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.stage-list__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-1); color: var(--text-black-soft); }
.stage-list__item--done { color: var(--text-black); }
.stage-list__item--current { color: var(--green-accent); font-weight: 700; }

/* --- misc ------------------------------------------------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-1) var(--space-3); font-size: var(--text-2); }
.kv__k { color: var(--text-black-soft); }
.kv__v { color: var(--text-black); word-break: break-word; }
.divider { height: 1px; background: var(--hairline); margin: var(--space-4) 0; border: 0; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* --- workspace shell with a subnav ------------------------------------------ */
.layout--with-subnav { height: calc(100vh - var(--nav-h) - var(--subnav-h)); height: calc(100dvh - var(--nav-h) - var(--subnav-h)); }
.work-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1 1 auto; background: var(--neutral-warm); }
.timeline-turn { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: var(--space-3); }
.timeline-turn::before { content: ""; border-radius: 2px; background: var(--black-a10); }
.timeline-turn--L1::before { background: var(--green-house); }
.timeline-turn--L2::before { background: var(--green-starbucks); }
.timeline-turn--L3::before { background: var(--green-accent); }
.timeline-turn--human::before { background: var(--gold); }
.timeline-turn--researcher::before { background: var(--text-black); }

/* --- node inspector ("기술 정보") --------------------------------------------
   A node's record shown as sentences, not as a JSON dump: role, why, inputs,
   what it did, result, judgment, evidence, next action — then the ids beneath.  */
.tech__panel { padding: 0 var(--space-3) var(--space-3); display: grid; gap: var(--space-2); }
.tech__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.tech__label { font-size: var(--text-0); font-weight: 700; color: var(--text-black-soft); letter-spacing: var(--tracking-ko-label); }
.tech__value { font-size: var(--text-1); color: var(--text-black); white-space: pre-wrap; word-break: break-word; }
.tech__list { margin: 0; padding-left: 1.1em; font-size: var(--text-1); color: var(--text-black); }
.tech__list li { margin: 2px 0; }
.tech--nested { grid-column: 1 / -1; margin-top: var(--space-1); background: var(--white); }
.tech--nested .tech__row { grid-template-columns: 150px minmax(0, 1fr); }

/* --- artifacts -------------------------------------------------------------- */
.card--final { border-color: var(--green-accent); }
.card__actions--tight { margin-top: var(--space-2); gap: var(--space-1); align-items: center; }
.modal--wide { max-width: 760px; }
.badge--done { background: var(--green-accent); color: var(--white); border-color: var(--green-accent); }
.notice { padding: var(--space-3); border-radius: var(--r-input); border: 1px solid var(--hairline); background: var(--neutral-cool); font-size: var(--text-1); }
.notice--warn { border-color: var(--gold-soft, var(--hairline)); background: var(--neutral-warm); }

/* --- workspace sidebar: scrolling explorer + pinned execution summary --------
   The artifact list is the part that grows without bound in a long research
   work, so it is the only part that scrolls. State and cost stay on screen.  */
.work-aside { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.work-aside__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-3); }
.work-aside__foot { flex: none; padding: var(--space-3); border-top: 1px solid var(--hairline); background: var(--neutral-cool); max-height: 45%; overflow-y: auto; }
.work-aside__foot .aside-block__title { margin-bottom: var(--space-2); }
/* Two real columns: the label can never be pushed into the number, and a long
   token string wraps in its own cell instead of breaking the row. */
.row-table--compact { display: block; }
.row-table--compact .row-table__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: var(--space-4); align-items: baseline; padding: 5px 0; font-size: var(--text-1); }
.row-table--compact .row-table__key { min-width: 0; overflow-wrap: anywhere; }
.row-table--compact .row-table__value { min-width: 0; font-size: var(--text-1); overflow-wrap: anywhere; }
.tech--flush { margin-top: var(--space-1); background: transparent; border: 0; }
.tech--flush > summary { padding: var(--space-1) 0; }

/* --- artifact groups (one per producing node) -------------------------------- */
.art-groups { display: flex; flex-direction: column; gap: 2px; }
.art-group { border: 1px solid var(--hairline); border-radius: var(--r-input); background: var(--white); }
.art-group__head { display: flex; align-items: center; gap: var(--space-2) var(--space-3); min-height: 38px; padding: var(--space-1) var(--space-2); cursor: pointer; list-style: none; font-size: var(--text-1); font-weight: 600; letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.art-group__head::-webkit-details-marker { display: none; }
.art-group__head::before { content: "▸"; color: var(--text-black-soft); font-size: var(--text-0); }
.art-group[open] > .art-group__head::before { content: "▾"; }
.art-group[open] > .art-group__head { border-bottom: 1px solid var(--hairline); }
.art-group__head:hover { background: var(--neutral-cool); }
.art-group__head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-input); }
.art-group__label { flex: 1 1 auto; min-width: 0; }
/* Its own column, with its own unit — "실행 5" and "330" must never read as one
   token. margin-left pins it right even when the label wraps. */
.art-group__count { flex: none; margin-left: auto; padding-left: var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-0); color: var(--text-black-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A single execution can register hundreds of files; an expanded group scrolls
   inside itself so opening one never buries the rest of the sidebar. */
.art-group__body { display: flex; flex-direction: column; padding: var(--space-1); gap: var(--space-1); max-height: 46vh; overflow-y: auto; }

/* --- one file row (compact; long paths elide, never overflow) ---------------- */
.doc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-input); background: var(--neutral-cool); border: 1px solid transparent; }
.doc--final { border-color: var(--green-accent); background: var(--white); }
.doc__main { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc__name { font-size: var(--text-1); font-weight: 700; color: var(--text-black); letter-spacing: var(--tracking-ko-label); line-height: var(--lh-normal); }
.doc__path { display: block; max-width: 100%; font-size: var(--text-0); line-height: var(--lh-normal); color: var(--text-black-soft); }
/* .badge is white-space:nowrap with no cap — in a 320px column that overflows. */
.doc__badge { flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; }
.work-aside .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.doc__actions { flex: none; display: flex; gap: var(--space-2); margin-left: auto; }

/* --- judgment targets: a control, not a list of file names -------------------
   The row IS the button. A hover lift, a named action and a chevron so there is
   no question that something happens when you click it.                       */
.doc-panel { margin-bottom: var(--space-2); }
.doc-panel__title { margin: 0 0 var(--space-1); font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.doc-open { display: flex; align-items: center; gap: var(--space-2) var(--space-3); width: 100%; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--r-input); background: var(--white); color: var(--text-black); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion), background-color var(--motion), box-shadow var(--motion); }
.doc-open:hover { border-color: var(--green-accent); background: var(--green-light-33); }
.doc-open:active { transform: scale(0.995); }
.doc-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.doc-open--final { border-color: var(--green-accent); }
.doc-open--more { background: var(--neutral-cool); color: var(--text-black-soft); }
.doc-open__icon { flex: none; font-size: var(--text-3); line-height: 1; }
.doc-open__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-open__name { font-size: var(--text-2); font-weight: 700; letter-spacing: var(--tracking-ko-label); }
.doc-open__meta { font-size: var(--text-1); color: var(--text-black-soft); }
.doc-open__action { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: var(--text-1); font-weight: 700; color: var(--green-accent); letter-spacing: var(--tracking-ko-label); }
.doc-open__chevron { font-size: var(--text-3); line-height: 1; }
.doc-open:hover .doc-open__chevron { transform: translateX(2px); }
@media (max-width: 479px) {
  .doc-open__action span:first-child { display: none; }   /* the chevron still says "there is more" */
}

/* --- composer height: drag the divider above it ------------------------------ */
.composer-splitter { flex: none; display: flex; align-items: center; justify-content: center; height: 14px; background: var(--neutral-warm); border-top: 1px solid var(--hairline); cursor: row-resize; touch-action: none; }
.composer-splitter__grip { width: 48px; height: 3px; border-radius: 2px; background: var(--black-a20); transition: background-color var(--motion), width var(--motion); }
.composer-splitter:hover .composer-splitter__grip { background: var(--green-accent); width: 72px; }
.composer-splitter:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.composer-splitter:focus-visible .composer-splitter__grip { background: var(--green-accent); }
.composer-splitter + .input-area { border-top: 0; }
body[data-resizing="composer"] { cursor: row-resize; user-select: none; }
.input-box--sized { align-items: stretch; }
.input-box--sized textarea { max-height: none; height: 100%; }
.input-box--sized .send-btn { align-self: flex-end; }

/* --- registered research assets, as a file tree -------------------------------
   Hundreds of files, folders closed, children built on first open.            */
.asset-tree { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-x: hidden; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--space-2); }
.tree-node { min-width: 0; border-radius: var(--r-input); }
.tree-node__head { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-2); cursor: pointer; list-style: none; font-size: var(--text-2); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.tree-node__head::-webkit-details-marker { display: none; }
.tree-node__head::before { content: "▸"; flex: none; color: var(--text-black-soft); font-size: var(--text-1); }
.tree-node[open] > .tree-node__head::before { content: "▾"; }
.tree-node__head:hover { background: var(--neutral-cool); }
.tree-node__head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-input); }
.tree-node__name { flex: 1 1 auto; min-width: 0; }
.tree-node__meta { flex: none; margin-left: auto; padding-left: var(--space-2); font-size: var(--text-0); color: var(--text-black-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* One indent per nesting level, drawn with a guide line. */
.tree-node__body { margin-left: var(--space-3); padding-left: var(--space-2); border-left: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tree-file { display: flex; min-width: 0; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-2); font-size: var(--text-1); color: var(--text-black); }
.tree-file__icon { flex: none; font-size: var(--text-1); line-height: 1; }
.tree-file__name { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--text-0); }
.tree-file__size { flex: none; margin-left: auto; padding-left: var(--space-2); font-size: var(--text-0); color: var(--text-black-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- compact multi-select picker (reviewers) ---------------------------------
   The chosen people stay visible with the list closed; the list itself is a
   popover rather than a wall of rows.                                        */
.picker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.picker__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.picker__chip { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--green-accent); border-radius: var(--r-pill); background: var(--green-light-33); color: var(--text-black); font: 600 var(--text-1)/28px var(--font-sans); letter-spacing: var(--tracking-ko-label); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__chip:hover { background: var(--white); }
.picker__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.picker__chip-x { flex: none; font-size: var(--text-0); color: var(--text-black-soft); }
.picker__menu { position: absolute; left: 0; top: calc(100% + var(--space-1)); z-index: var(--z-drawer); width: min(420px, calc(100vw - 2 * var(--gutter))); padding: var(--space-2); background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-nav); display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.picker__option { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border-radius: var(--r-input); cursor: pointer; }
.picker__option:hover { background: var(--neutral-cool); }
.picker__option input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--green-accent); }
.picker__option-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker__option-name { font-size: var(--text-2); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.picker__option-meta { font-size: var(--text-1); color: var(--text-black-soft); overflow-wrap: anywhere; }

/* Provenance of a learned item — folded away until someone asks. */
.prov { margin-top: 8px; }
.prov__summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  list-style: none;
}
.prov__summary::-webkit-details-marker { display: none; }
.prov__summary::before { content: "▸ "; }
.prov[open] .prov__summary::before { content: "▾ "; }
.prov__summary:hover { color: var(--text, #111827); }
.prov__body {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--border, #e5e7eb);
  background: var(--surface-quiet, #fafafa);
  border-radius: 0 6px 6px 0;
}
.prov__note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted, #6b7280); }
.section__title--sm { font-size: 14px; }

/* A learned principle quoted back in the researcher's own words. */
.prov__quote {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--text-muted, #6b7280);
  max-height: 160px;
  overflow: auto;
}

/* Artifact picker: the work-screen sidebar row, made selectable. */
.doc--pick { cursor: pointer; align-items: center; }
.doc--pick:hover { background: var(--surface-quiet, #fafafa); }
.doc__pick { margin: 0 8px 0 0; flex: none; }
.picked {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-quiet, #fafafa);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.picked__count { font-size: 12px; font-weight: 600; margin: 0 6px 0 0; }
#pickerCount { margin-right: auto; font-size: 12px; color: var(--text-muted, #6b7280); }