/* The Research face (scenes 6 and 7; research.js): the faces menu, Glance,
   Deep and the stage orb, ported from the app's CSS (ResearchCard.css,
   GlanceFace's glance-face.css, widgets/answer-band.css,
   widgets/sources-widget.css, widgets/web-results.css, DeepTab.css,
   primitives/segmented.css, primitives/action-button.css, rings/rings.css,
   FloatingMenu.css, primitives/menu-row.css, MoreInfoDrawer.css), scoped
   to .p-drawer [data-face='research'], the peek row and the lane's own
   .face-pill-menu. The research lane owns this file. */

/* -------------------------------------------------- tokens
   The ink surface's own inks (stage/solid-materials.css:173-182; tokens
   --glyph-inverse, --shadow-menu), the stage ramps and glows
   (solid-materials.css:401-415, 526-541, 612-613), and the type the Deep
   tab reads (tokens/typography). */
.p-drawer,
.face-pill-menu {
  --ink-surface-glyph: #f1f1f1;
  --ink-surface-secondary: 60%;
  --shadow-menu: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
  --ink-a34: #10101057;
  --accent-power-text: #cc2200;
  --stage-plan-metal-1: #0e0a2e;
  --stage-plan-metal-2: #3d33a8;
  --stage-plan-metal-3: #a39bff;
  --stage-plan-metal-4: #efedff;
  --stage-search-metal-1: #00261a;
  --stage-search-metal-2: #0f7a57;
  --stage-search-metal-3: #66f7c6;
  --stage-search-metal-4: #e3fff5;
  --stage-plan-glow: #a39bff4d;
  --stage-search-glow: #4fe0b04d;
}
@media (prefers-color-scheme: dark) {
  .p-drawer,
  .face-pill-menu {
    --ink-surface-glyph: #f1f1f1;
    --ink-surface-secondary: 72%;
    --ink-a34: #f1f1f157;
    --accent-power-text: #ff5a3c;
    --stage-plan-glow: #7166f733;
    --stage-search-glow: #66f7c633;
  }
}

/* -------------------------------------------------- the film's pointer
   The kit's hover and press (header-button.css:160-250) for a scripted
   pointer, which has no :hover or :active: data-hover the raise, data-press
   the ink with the bowl; a control whose menu is open holds the pressed
   look (aria-expanded). */
.p-drawer .hb[data-hover]:not(:disabled, [aria-expanded='true'], [data-press]) {
  --hb-glyph: var(--color-ink);
  --hb-hover-motion: var(--motion-hover-in);
  background-color: var(--color-hover);
  box-shadow: inset 0 1px 0 var(--raise-rim);
}
.p-drawer .hb[data-hover]:not(:disabled, [aria-expanded='true'], [data-press])::before { opacity: 1; }
.p-drawer .hb:is([data-press], [aria-expanded='true']) {
  --hb-label: var(--color-surface);
  --hb-glyph: var(--color-surface);
  background-color: var(--color-ink);
  box-shadow: none;
  transition: none;
}
.p-drawer .hb:is([data-press], [aria-expanded='true'])::before { opacity: 0; transition: none; }
.p-drawer .hb:is([data-press], [aria-expanded='true'])::after { opacity: 1; transition: none; }

/* -------------------------------------------------- the header
   ResearchCard.tsx:1167-1310: the chip, the title and its chevron; Back
   and Forward, the Glance | Deep switch, the activity disc, Export, Keep
   and More. The folds (glance-query.css:156-175) take no room of their own
   at rest. */
.p-drawer .research-head .research-head-fold {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 auto;
  margin: -4px;
  padding: 4px;
  overflow: hidden;
}
.p-drawer .research-head .research-head-fold > * { justify-self: start; width: max-content; }
/* A phone's row (the site's own fallback; the app has no window that
   narrow): as the header row's own narrow step drops History and Export
   (header-row.css), the Research row also lets Keep and More go, so the
   chip, the title, the switch and the activity disc fit; the title's
   chevron goes too, to leave the title some room. */
@container header-row (max-width: 520px) {
  .p-drawer .research-head .research-head-fold[data-fold='edit'],
  .p-drawer .research-head .face-header-actions,
  .p-drawer .research-head .title-chevron { display: none; }
}
.p-drawer .research-view-switch { display: inline-flex; }
.p-drawer .research-activity[hidden] { display: none; }

/* Segmented (primitives/segmented.css): 36 high on color-active, padding
   3, the thumb 30 on the raised fill with the soft raise, sliding 240 on
   the settle curve and stretching 6 toward a hovered option over 160; the
   options 13/18, muted, the chosen one ink and 500. */
@property --segmented-left { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --segmented-width { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --segmented-pull { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --segmented-stretch { syntax: '<length>'; inherits: false; initial-value: 0px; }
.p-drawer .segmented {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border-radius: 100px;
  background: var(--color-active);
}
.p-drawer .segmented-thumb {
  position: absolute;
  top: 3px;
  left: calc(var(--segmented-left) - var(--segmented-pull));
  width: calc(var(--segmented-width) + var(--segmented-stretch));
  height: 30px;
  border-radius: 100px;
  background-color: var(--color-raised);
  background-image: var(--soft-raise-shade);
  box-shadow:
    inset 0 1px 0 var(--soft-raise-rim),
    0 1px 3px var(--raised-shadow);
  pointer-events: none;
  transition:
    opacity var(--motion-hover) ease-out,
    --segmented-left 240ms var(--ease-settle),
    --segmented-width 240ms var(--ease-settle),
    --segmented-pull 160ms ease-out,
    --segmented-stretch 160ms ease-out;
}
.p-drawer .segmented-option {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 100px;
  background: none;
  color: var(--color-muted);
  font: 400 13px / 18px var(--font-sans);
  white-space: nowrap;
  cursor: default;
  outline: none;
  transition: color var(--motion-hover) ease-out;
}
.p-drawer .segmented-option[aria-checked='true'] { color: var(--color-ink); font-weight: 500; }
.p-drawer .segmented-option[data-hovered] { color: var(--color-ink); transition-duration: var(--motion-hover-in); }

/* -------------------------------------------------- Glance
   glance-face.css: 20 under the head, 28 over the foot. */
.p-drawer [data-face='research'] .glance-face { padding-bottom: 28px; }
.p-drawer [data-face='research'] .glance-face[hidden],
.p-drawer [data-face='research'] .research-deep[hidden] { display: none; }
.p-drawer [data-face='research'] .glance-answer { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* The answer's words (answer-band.css:293-301): the lead and the body 20/30
   Light ink, 10 apart (.answer-text's gap). */
.p-drawer [data-face='research'] .answer-words { display: flex; flex-direction: column; gap: 10px; }
.p-drawer [data-face='research'] .answer-words:empty { display: none; }
.p-drawer [data-face='research'] .answer-lead,
.p-drawer [data-face='research'] .answer-body {
  margin: 0;
  font: 300 20px / 30px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer [data-face='research'] .answer-fade-bottom { z-index: 1; }
/* The model's mark, "Synthesised" (answer-band.css:159-176): a 30 round
   chip beside the 30 pills, its glyph 18. */
.p-drawer [data-face='research'] .answer-meta-mark { display: inline-flex; align-items: center; }
.p-drawer [data-face='research'] .answer-meta-mark[hidden] { display: none; }
.p-drawer [data-face='research'] .answer-meta-mark .chip-mark[data-kind='model'] {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 100px;
}
.p-drawer [data-face='research'] .answer-meta-mark .chip-mark[data-kind='model'] > .glyph {
  --glyph-size: 18px;
  --icon-wght: 500;
  font-size: 18px;
}
/* The reading line is longer than a count: the presence opens to it. */
.p-drawer [data-face='research'] .answer-meta-start > .faces-presence { max-width: 320px; }
.p-drawer [data-face='research'] .answer-meta-start > .faces-presence[data-gone] { max-width: 0; }
/* FacesSpinner (faces-spinner.css): the spinner standing alone while
   nothing is counted, and in the item's glyph while it reads. */
.p-drawer [data-face='research'] .faces-spinner { display: inline-flex; flex: 0 0 auto; }
.p-drawer [data-face='research'] .faces-spinner[hidden],
.p-drawer [data-face='research'] .faces-spinner:empty { display: none; }
.p-drawer [data-face='research'] .answer-meta-glyph > .faces-spinner { position: absolute; top: 1px; left: 1px; }

/* The widget's loading look (widget.css:117-120, 460-500): the content
   hidden under its Lines skeleton, which shows from 300; the head's
   controls (widget.css:189-195). */
.p-drawer [data-face='research'] .faces-widget-skeleton { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.p-drawer [data-face='research'] .faces-widget-skeleton[hidden],
.p-drawer [data-face='research'] .faces-widget-content[hidden] { display: none; }
.p-drawer [data-face='research'] .faces-widget-skeleton .faces-skeleton-shape { gap: 8px; }
.p-drawer [data-face='research'] .faces-widget-skeleton .faces-skeleton-title { margin-bottom: 8px; }
.p-drawer [data-face='research'] .faces-widget[data-phase='frame'] .faces-widget-content { visibility: hidden; }
.p-drawer [data-face='research'] .faces-widget-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--color-muted);
}
.p-drawer [data-face='research'] .faces-widget-controls:empty { display: none; }
.p-drawer [data-face='research'] .faces-widget-badge > * { grid-area: 1 / 1; }

/* A list that runs to the widget's sides and foot (FadeEdge toEdge,
   widget.css:340-370), its rows padded back, the 24 end fade in the
   widget's fill while rows lie below. */
.p-drawer [data-face='research'] .r-edge {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0 -16px -16px;
}
.p-drawer [data-face='research'] .r-edge > :first-child {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
}

/* Sources (sources-widget.css): the head's gap 8; one 30 line a row, the
   number centred in 22, the 20 disc, the host 138 from 11 in, the headline
   13/18 500 ink in its own column. */
.p-drawer [data-face='research'] .faces-widget:has(.sources-list) { gap: 8px; }
.p-drawer [data-face='research'] .sources-list { display: flex; flex-direction: column; gap: 0; container: research-sources / inline-size; }
.p-drawer [data-face='research'] .sources-row {
  display: grid;
  grid-template-columns: 22px 20px 138px minmax(0, 1fr) auto;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--color-ink);
  cursor: default;
  transition:
    background-color var(--motion-hover) ease-out,
    box-shadow var(--motion-hover) ease-out;
}
@media (hover: hover) {
  .p-drawer [data-face='research'] .sources-row:hover {
    background-color: var(--color-active);
    box-shadow:
      calc(-1 * var(--list-bleed)) 0 0 var(--color-active),
      var(--list-bleed) 0 0 var(--color-active);
    transition-duration: var(--motion-hover-in);
  }
}
.p-drawer [data-face='research'] .sources-row > .sources-disc {
  width: 20px;
  height: 20px;
  font: 500 12px / 16px var(--font-sans);
}
.p-drawer [data-face='research'] .sources-number {
  font: 500 12px / 16px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-muted);
}
.p-drawer [data-face='research'] .sources-detail,
.p-drawer [data-face='research'] .sources-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p-drawer [data-face='research'] .sources-detail {
  margin-left: 11px;
  padding-right: 8px;
  font: 400 12px / 16px var(--font-sans);
  color: var(--color-muted);
}
.p-drawer [data-face='research'] .sources-name { font: 500 13px / 18px var(--font-sans); color: var(--color-ink); }
/* The 2x1 in a phone's drawer (the list 310 wide; 571 on the desktop
   board): the host's column narrows from 138 (sources-widget.css:73) to 92
   so the headline keeps its room. The site's own fallback, keyed to the
   list's width as the header row's narrow step is; the app has no window
   that narrow. */
@container research-sources (width < 440px) {
  .p-drawer [data-face='research'] .sources-row { grid-template-columns: 22px 20px 92px minmax(0, 1fr) auto; }
}

/* Web results (web-results.css): rows 2 apart, in two columns 12 apart
   across the 4x1; a row padded 8 12, radius 10: the mark, the site over
   its breadcrumb 12/16, the title 14/19 500, the snippet 13/17 muted; a
   row that arrives fades up 4 over 160. */
.p-drawer [data-face='research'] .web-results-list { display: flex; flex-direction: column; gap: 2px; }
.p-drawer [data-face='research'] .faces-widget[data-columns='2'] .web-results-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  column-gap: 12px;
  row-gap: 2px;
}
.p-drawer [data-face='research'] .web-result {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background-color: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
  transition: background-color var(--motion-hover) ease-out;
  animation: r-web-result-in 160ms ease-out both;
}
@media (hover: hover) {
  .p-drawer [data-face='research'] .web-result:hover { background-color: var(--color-active); transition-duration: 100ms; }
  .p-drawer [data-face='research'] .web-result:hover .chip-mark.web-result-mark { background-color: var(--color-recess); transition-duration: 100ms; }
  .p-drawer [data-face='research'] .web-result:hover .web-result-open { opacity: 1; transition-duration: 100ms; }
}
@keyframes r-web-result-in {
  from { opacity: 0; transform: translateY(4px); }
}
.p-drawer [data-face='research'] .web-result-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.p-drawer [data-face='research'] .web-result-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.p-drawer [data-face='research'] .chip-mark.web-result-mark {
  flex-shrink: 0;
  font-weight: 400;
  transition: background-color var(--motion-hover) ease-out;
}
.p-drawer [data-face='research'] .web-result-where { display: flex; flex-direction: column; min-width: 0; }
.p-drawer [data-face='research'] .web-result-site {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 12px / 16px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer [data-face='research'] .web-result-host,
.p-drawer [data-face='research'] .web-result-title,
.p-drawer [data-face='research'] .web-result-snippet {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p-drawer [data-face='research'] .web-result-host { font: 400 12px / 16px var(--font-sans); color: var(--color-muted); }
.p-drawer [data-face='research'] .web-result-title { font: 500 14px / 19px var(--font-sans); color: var(--color-ink); }
.p-drawer [data-face='research'] .web-result-snippet { font: 400 13px / 17px var(--font-sans); color: var(--color-muted); }
.p-drawer [data-face='research'] .web-result-open {
  color: var(--color-muted);
  opacity: 0;
  transition: opacity var(--motion-hover) ease-out;
}
.p-drawer [data-face='research'] .web-result-arriving {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  animation: r-web-result-in 160ms ease-out both;
}
.p-drawer [data-face='research'] .web-result-arriving > .faces-skeleton { max-width: 100%; }
/* The type pop-up (web-results.css:233-267): the chosen type and its count
   13/16 500 and expand_more 16, a 28 capsule on color-active; the sort
   disc 24, swap_vert 16 muted. */
.p-drawer [data-face='research'] .web-results-type {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  height: 28px;
  margin: -4px 0;
  padding: 0 6px 0 10px;
  border: 0;
  border-radius: 100px;
  background-color: var(--color-active);
  color: var(--color-ink);
  font: 500 13px / 16px var(--font-sans);
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: background-color var(--motion-hover) ease-out;
}
.p-drawer [data-face='research'] .web-results-type .material-symbols-rounded { color: inherit; }
.p-drawer [data-face='research'] .web-results-sort {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -4px -4px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--color-muted);
  cursor: default;
  transition:
    background-color var(--motion-hover) ease-out,
    color var(--motion-hover) ease-out;
}
@media (hover: hover) {
  .p-drawer [data-face='research'] .web-results-type:hover { background-color: var(--color-hover); transition-duration: var(--motion-hover-in); }
  .p-drawer [data-face='research'] .web-results-sort:hover { background-color: var(--color-hover); color: var(--color-ink); transition-duration: var(--motion-hover-in); }
}

/* -------------------------------------------------- below Web results
   Questions (questions-widget.css), News (news-widget.css), Pictures
   (pictures-widget.css) and the closed Also mentioned (glance-face.css),
   their tokens written out (tokens: space, type, radius, control). */
.p-drawer [data-face='research'] {
  --r-image-outline: oklch(0 0 0 / 0.1);
}
@media (prefers-color-scheme: dark) {
  .p-drawer [data-face='research'] { --r-image-outline: oklch(1 0 0 / 0.1); }
}

/* A 28 glyph button in a widget's head: News' search, Also mentioned's
   chevron, its glyph 16 muted. */
.p-drawer [data-face='research'] .hb:is(.faces-news-search, .glance-also-close) {
  --hb-glyph: var(--color-muted);
  flex-shrink: 0;
  width: 28px;
  min-width: 28px;
  height: 28px;
  margin: -4px 0;
  padding: 0;
}
.p-drawer [data-face='research'] .hb:is(.faces-news-search, .glance-also-close) > .glyph { color: var(--hb-glyph); }

/* Questions: each question a 36 row, its chevron 16 muted and the question
   14/20 ink on one line; closed at rest. The 2x2's Threads follow. */
.p-drawer [data-face='research'] .questions-list { display: flex; flex-direction: column; gap: 2px; }
.p-drawer [data-face='research'] .question { flex-shrink: 0; border-radius: 10px; }
.p-drawer [data-face='research'] .question-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 8.5px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  color: var(--color-ink);
  cursor: default;
  transition: background-color var(--motion-hover) var(--ease-out);
}
@media (hover: hover) {
  .p-drawer [data-face='research'] .question-head:hover {
    background-color: var(--color-active);
    transition-duration: var(--motion-hover-in);
  }
}
.p-drawer [data-face='research'] .question-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 14px / 20px var(--font-sans);
}
.p-drawer [data-face='research'] .question-chevron { flex-shrink: 0; color: var(--color-muted); }
.p-drawer [data-face='research'] .question-body { display: grid; grid-template-rows: 0fr; opacity: 0; }
.p-drawer [data-face='research'] .question-inner { min-height: 0; overflow: hidden; }
.p-drawer [data-face='research'] .question-answer { margin: 0; font: 400 13px / 18px var(--font-sans); color: var(--color-muted); }
.p-drawer [data-face='research'] .question-source { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 0 0; border: 0; background: none; }
.p-drawer [data-face='research'] .chip-mark.question-mark { font-weight: 400; background-color: var(--color-recess); }
.p-drawer [data-face='research'] .question-host { font: 400 12px / 16px var(--font-sans); color: var(--color-muted); }
.p-drawer [data-face='research'] .questions:not([data-threads]) :is(.questions-group, .thread) { display: none; }
.p-drawer [data-face='research'] .eyebrow.questions-group { flex-shrink: 0; margin: 12px 12px 4px; }
.p-drawer [data-face='research'] .thread {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background-color: transparent;
  text-align: left;
  cursor: default;
  transition: background-color var(--motion-hover) var(--ease-out);
}
@media (hover: hover) {
  .p-drawer [data-face='research'] .thread:hover {
    background-color: var(--color-active);
    transition-duration: var(--motion-hover-in);
  }
}
.p-drawer [data-face='research'] .chip-mark.thread-mark { flex-shrink: 0; margin-top: 2px; }
.p-drawer [data-face='research'] .thread-words { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
/* The title on one line, its end under a 16 fade where it runs on
   (Marquee, hover only: still at rest). */
.p-drawer [data-face='research'] .thread-title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font: 500 14px / 20px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer [data-face='research'] .thread-title[data-runs] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
}
.p-drawer [data-face='research'] .thread-badges { display: flex; gap: 8px; font: 400 12px / 16px var(--font-sans); color: var(--color-muted); }

/* News: one fact per line, the publisher and the date 12/16 muted, the
   title 14/20 500 in two lines at most. */
.p-drawer [data-face='research'] .faces-news { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-height: 0; }
.p-drawer [data-face='research'] .faces-news-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  clip-path: inset(-6px round 12px);
}
.p-drawer [data-face='research'] .faces-news-story {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--color-ink);
  text-align: left;
  cursor: default;
  transition: background-color var(--motion-hover) var(--ease-out), box-shadow var(--motion-hover) var(--ease-out);
}
@media (hover: hover) {
  .p-drawer [data-face='research'] .faces-news-story:hover {
    background-color: var(--color-active);
    box-shadow: 0 0 0 4px var(--color-active);
    transition-duration: var(--motion-hover-in);
  }
}
.p-drawer [data-face='research'] .faces-news-story[data-cut='true'] { visibility: hidden; }
.p-drawer [data-face='research'] .faces-news-words { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.p-drawer [data-face='research'] :is(.faces-news-publisher, .faces-news-when) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 12px / 16px var(--font-sans);
  color: var(--color-muted);
}
.p-drawer [data-face='research'] .faces-news-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 500 14px / 20px var(--font-sans);
}
/* The 2x1: three stories side by side, 16 apart, centred down the body,
   the title 13/16 in three lines; under 400 a list. */
.p-drawer [data-face='research'] .faces-news[data-size='2x1'] { container: r-news / inline-size; }
@container r-news (min-width: 400px) {
  .p-drawer [data-face='research'] .faces-news-list {
    display: grid;
    grid-template-columns: repeat(var(--news-columns, 3), minmax(0, 1fr));
    align-content: center;
    column-gap: 16px;
  }
  .p-drawer [data-face='research'] .faces-news-title { -webkit-line-clamp: 3; font-size: 13px; line-height: 16px; }
}
/* The 2x2's lead picture across the top, 172 high, radius 10. */
.p-drawer [data-face='research'] .faces-news-lead-picture {
  position: relative;
  display: block;
  flex: 0 0 172px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--color-active);
  cursor: default;
}
.p-drawer [data-face='research'] :is(.faces-news-lead-picture, .pictures-lead, .pictures-tile) > svg { display: block; width: 100%; height: 100%; }
.p-drawer [data-face='research'] :is(.faces-news-lead-picture, .pictures-lead, .pictures-tile)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--r-image-outline);
  pointer-events: none;
}
/* The later stories lead with a 52 tile: the publisher's monogram where
   there is no picture. */
.p-drawer [data-face='research'] .faces-news-thumb {
  position: relative;
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-active);
}
.p-drawer [data-face='research'] .faces-news-publisher-tile { font: 500 16px / 22px var(--font-sans); color: var(--color-ink); }
.p-drawer [data-face='research'] .faces-news[data-size='2x2'] .faces-news-story:not(:first-child) { align-items: center; }

/* Pictures: the picture is the widget, full bleed over the well. The 2x1's
   lead at 6 in, min(260, 55%) wide; the tiles square, 10 apart, stacked
   and centred in the room beside it. */
.p-drawer [data-face='research'] .faces-widget:has(.pictures-widget) > .faces-widget-body { position: static; }
.p-drawer [data-face='research'] .pictures-widget {
  --pictures-lead: min(260px, 55cqi);
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  container-type: inline-size;
}
.p-drawer [data-face='research'] :is(.pictures-lead, .pictures-tile) {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--color-active);
  cursor: default;
}
.p-drawer [data-face='research'] .pictures-lead {
  position: absolute;
  top: 6px;
  left: 6px;
  bottom: 6px;
  width: calc(var(--pictures-lead) - 6px);
}
.p-drawer [data-face='research'] .pictures-tiles {
  position: absolute;
  top: 6px;
  left: calc(var(--pictures-lead) + 6px);
  right: 6px;
  bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  container-type: size;
}
.p-drawer [data-face='research'] .pictures-tiles > .pictures-tile {
  flex: 0 0 auto;
  width: min(100cqw, calc((100cqh - (var(--pictures-tiles) - 1) * 10px) / var(--pictures-tiles)));
  aspect-ratio: 1;
}
/* A video lead: the raised 48 play disc at its centre (a pressable look
   on the picture), its duration at the bottom left, 12/16 500 white on
   ink at 60%. */
.p-drawer [data-face='research'] .pictures-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 100px;
  background-color: var(--color-surface);
  background-image: var(--soft-raise-shade);
  box-shadow: inset 0 1px 0 var(--soft-raise-rim), 0 2px 8px var(--raised-shadow);
  color: var(--color-ink);
}
.p-drawer [data-face='research'] .pictures-play > .material-symbols-rounded { --icon-fill: 1; font-size: 24px; line-height: 1; }
.p-drawer [data-face='research'] .pictures-duration {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 100px;
  background: rgb(16 16 16 / 0.6);
  font: 500 12px / 16px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.92);
}
/* The credit: the lead's mark on a raised capsule at its bottom right,
   6 in (a pressable chip: it opens the source). */
.p-drawer [data-face='research'] .pictures-credit {
  position: absolute;
  z-index: 1;
  right: calc(100% - var(--pictures-lead) + 6px);
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border-radius: 100px;
  background-color: var(--color-surface);
  background-image: var(--soft-raise-shade);
  box-shadow: inset 0 1px 0 var(--soft-raise-rim), 0 1px 3px var(--raised-shadow);
}
.p-drawer [data-face='research'] .pictures-credit .chip-mark { background-color: transparent; color: var(--color-ink); }

/* Also mentioned, closed: one track high, its body away and no fades; the
   whole fold is its press. */
.p-drawer [data-face='research'] .glance-also { height: 100%; }
.p-drawer [data-face='research'] .glance-also > .faces-widget:not([data-open='true']) > .faces-widget-body,
.p-drawer [data-face='research'] .glance-also > .faces-widget > .faces-widget-fade { display: none; }

/* -------------------------------------------------- Deep
   DeepTab.css: the tab 20 under the head, two columns 16 apart to the
   drawer's foot; one column under 640, each its content's height. */
.p-drawer [data-face='research'] .research-deep {
  position: relative;
  container: research-deep / inline-size;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 20px 0;
}
.p-drawer [data-face='research'] .research-deep-columns {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}
@container research-deep (width < 640px) {
  .p-drawer [data-face='research'] .research-deep-columns { grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; }
  /* Each its content's height (DeepTab.css:24-26): the widget's body and
     the synopsis inside it size to the text, not to a share of the face. */
  .p-drawer [data-face='research'] .research-deep-column > .faces-widget > .faces-widget-body,
  .p-drawer [data-face='research'] .research-deep-column .faces-widget-content,
  .p-drawer [data-face='research'] .research-synopsis-recess,
  .p-drawer [data-face='research'] .research-synopsis-grow { flex: 0 0 auto; }
}
.p-drawer [data-face='research'] .research-deep-column { display: flex; flex-direction: column; min-height: 0; }
.p-drawer [data-face='research'] .research-deep-column > .faces-widget { flex: 1 1 auto; height: auto; }

/* The synopsis (DeepTab.css:51-114): the field on the widget's well, the
   board's 18/24 Regular ink, growing with its text (autogrow.css); the
   orbit ring on the widget's edge while the draft writes. */
.p-drawer [data-face='research'] .research-synopsis-ring {
  position: absolute;
  inset: calc(-1 * var(--widget-inset));
  z-index: 3;
  pointer-events: none;
}
.p-drawer [data-face='research'] .research-synopsis-recess {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.p-drawer [data-face='research'] .autogrow { display: grid; grid-template-columns: minmax(0, 1fr); }
.p-drawer [data-face='research'] .autogrow > textarea,
.p-drawer [data-face='research'] .autogrow::after {
  grid-area: 1 / 1;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.p-drawer [data-face='research'] .autogrow::after { content: attr(data-value) ' '; visibility: hidden; }
.p-drawer [data-face='research'] .research-synopsis-grow { grid-auto-rows: max-content; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.p-drawer [data-face='research'] .research-synopsis,
.p-drawer [data-face='research'] .research-synopsis-grow::after {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
  font: 400 18px / 24px var(--font-sans);
  resize: none;
  overflow: hidden;
  outline: none;
  caret-color: transparent;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.p-drawer [data-face='research'] .research-synopsis::placeholder { color: var(--ink-a34); opacity: 1; }
/* The foot (DeepTab.css:118-141, 485-496): the line 12/16 muted; Begin
   right. */
.p-drawer [data-face='research'] .research-deep-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  flex-shrink: 0;
  min-height: 36px;
}
.p-drawer [data-face='research'] .research-deep-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.p-drawer [data-face='research'] .research-deep-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.p-drawer [data-face='research'] .research-notice {
  overflow: hidden;
  font: 400 12px / 16px var(--font-sans);
  color: var(--color-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The plan (DeepTab.css:145-230): no card and no head, four rows 20
   apart, each a hollow 24 disc with its number (12/16 500 muted) then the
   stage's name 16/22 ink over its line 13/18 muted; a finished stage's
   disc in ink with its check in the surface's colour; the stage at work
   its 20 spinner in the disc's place. */
.p-drawer [data-face='research'] .faces-widget[data-deep='plan'] {
  --fade-fill: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.p-drawer [data-face='research'] .research-plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-drawer [data-face='research'] .research-plan-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.p-drawer [data-face='research'] .research-plan-disc {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-line);
  border-radius: 100px;
  font: 500 12px / 16px var(--font-sans);
  color: var(--color-muted);
}
.p-drawer [data-face='research'] .research-plan-disc[data-done] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-surface);
}
.p-drawer [data-face='research'] .research-plan-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-muted);
}
.p-drawer [data-face='research'] .research-plan-text { display: flex; flex-direction: column; min-width: 0; }
.p-drawer [data-face='research'] .research-plan-name { font: 400 16px / 22px var(--font-sans); color: var(--color-ink); }
.p-drawer [data-face='research'] .research-plan-line {
  overflow: hidden;
  min-width: 0;
  font: 400 13px / 18px var(--font-sans);
  color: var(--color-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Begin (action-button.css): Pat's gold light on the action colour, a
   gradient along its own direction turned by --ab-angle, the rim and the
   light's glow hugging the edge on its own side. At rest the light laps
   the rim, one turn in 8 s; hover rises it to the top (160), a press sinks
   it to a thin rim at the bottom (120), the release runs one lap in 250.
   Dim to 40% while it waits. */
@property --ab-angle { syntax: '<angle>'; inherits: false; initial-value: 277.2deg; }
@property --ab-s0 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-s1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-s2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-s3 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-s4 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-s5 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-rim { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-glow { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --ab-reach { syntax: '<length>'; inherits: false; initial-value: 7px; }
@property --ab-blur { syntax: '<length>'; inherits: false; initial-value: 10px; }
.p-drawer [data-face='research'] .action-button {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 100px;
  font: 500 14px / 18px var(--font-sans);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  background: linear-gradient(
    calc(90deg - var(--ab-angle)),
    var(--ab-s0) 0%,
    var(--ab-s1) 30%,
    var(--ab-s2) 50%,
    var(--ab-s3) 70%,
    var(--ab-s4) 85%,
    var(--ab-s5) 100%
  );
  box-shadow:
    inset 0 0 0 1px var(--ab-rim),
    inset calc(cos(var(--ab-angle)) * var(--ab-reach) * -1) calc(sin(var(--ab-angle)) * var(--ab-reach)) var(--ab-blur) calc(var(--ab-blur) * -0.3) var(--ab-glow);
  transition:
    --ab-s0 var(--motion-raise) ease-out,
    --ab-s1 var(--motion-raise) ease-out,
    --ab-s2 var(--motion-raise) ease-out,
    --ab-s3 var(--motion-raise) ease-out,
    --ab-s4 var(--motion-raise) ease-out,
    --ab-s5 var(--motion-raise) ease-out,
    --ab-rim var(--motion-raise) ease-out,
    --ab-glow var(--motion-raise) ease-out,
    --ab-reach var(--motion-raise) ease-out,
    --ab-blur var(--motion-raise) ease-out;
}
.p-drawer [data-face='research'] .action-button > .material-symbols-rounded { font-size: 18px; line-height: 1; }
.p-drawer [data-face='research'] .action-button[data-light='lap'] { animation: r-action-lap 8s linear infinite; }
@keyframes r-action-lap {
  from { --ab-angle: 277.2deg; }
  to { --ab-angle: -82.8deg; }
}
.p-drawer [data-face='research'] .action-button:is([data-light='hover'], [data-light='pressed']) {
  transition-property: --ab-angle, --ab-s0, --ab-s1, --ab-s2, --ab-s3, --ab-s4, --ab-s5, --ab-rim, --ab-glow, --ab-reach, --ab-blur;
  transition-duration: var(--motion-raise);
  transition-timing-function: ease-out;
}
.p-drawer [data-face='research'] .action-button[data-light='pressed'] { transition-duration: 120ms; }
.p-drawer [data-face='research'] .action-button[data-light='release'] { animation: r-action-release 250ms ease-out both; }
@keyframes r-action-release {
  from { --ab-angle: 270deg; }
  to { --ab-angle: -90deg; }
}
.p-drawer [data-face='research'] .action-button[data-kind='begin'] {
  color: #ffffff;
  --ab-s0: #1e0000;
  --ab-s1: #2c0100;
  --ab-s2: #3e0300;
  --ab-s3: #5c0d00;
  --ab-s4: #8f3005;
  --ab-s5: #c46a14;
  --ab-rim: rgb(231 35 0 / 0.85);
  --ab-glow: rgb(237 194 64 / 0.55);
}
.p-drawer [data-face='research'] .action-button[data-kind='begin'][data-state='hover'] {
  --ab-s0: #6d2708;
  --ab-s1: #782003;
  --ab-s2: #8c2302;
  --ab-s3: #a93f06;
  --ab-s4: #cf7f1a;
  --ab-s5: #e8a129;
  --ab-rim: rgb(232 161 41 / 0.6);
  --ab-glow: rgb(237 194 64 / 0.75);
  --ab-reach: 9px;
  --ab-blur: 14px;
}
.p-drawer [data-face='research'] .action-button[data-kind='begin'][data-state='pressed'] {
  --ab-s0: #060100;
  --ab-s1: #0c0000;
  --ab-s2: #1a0000;
  --ab-s3: #3a0300;
  --ab-s4: #7a1c01;
  --ab-s5: #cd540a;
  --ab-rim: rgb(205 84 10 / 0.6);
  --ab-glow: rgb(237 160 40 / 0.6);
  --ab-reach: 3px;
  --ab-blur: 4px;
}
.p-drawer [data-face='research'] .action-button:disabled { opacity: 0.4; pointer-events: none; }

/* -------------------------------------------------- the orbit
   rings.css:37-63: the line laps the edge every 1.4 s, its six dashes each
   a step fainter; it fades in as it mounts and out as it leaves, over the
   press lap's time. Under Reduce Motion it holds still a third of the way
   round (rings.css:102-106). */
.p-drawer .ring[data-kind='orbit'] {
  opacity: 1;
  animation: r-ring-orbit 1400ms linear infinite;
  transition: opacity var(--motion-press-lap) ease-out;
}
@starting-style {
  .p-drawer .ring[data-kind='orbit'] { opacity: 0; }
}
.p-drawer .ring[data-kind='orbit'][data-leaving] { opacity: 0; }
.p-drawer .ring[data-kind='orbit'] .ring-dash { opacity: var(--ring-strength); }
@keyframes r-ring-orbit {
  from { --ring-lap: 0; }
  to { --ring-lap: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .p-drawer .ring[data-kind='orbit'] { display: block; --ring-lap: 0.3; transition-duration: var(--motion-reduced); }
  .p-drawer [data-face='research'] .action-button,
  .p-drawer [data-face='research'] .action-button[data-light] { transition: none; --ab-angle: 277.2deg; }
}

/* -------------------------------------------------- the peek
   MoreInfoDrawer.css:236-273: the stage orb, 18 round, its glow 0 1 6 in
   the stage's own token, turning with a new stage over 250; the run's
   action (Pause) in ink; the capsule the orbit laps (StatusCapsule
   working). */
.p-drawer .moreinfo-peek-orb {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border-radius: 100px;
  transition: box-shadow 250ms ease-out;
}
.p-drawer .moreinfo-peek-orb[data-stage='plan'] { box-shadow: 0 1px 6px var(--stage-plan-glow); }
.p-drawer .moreinfo-peek-orb[data-stage='search'] { box-shadow: 0 1px 6px var(--stage-search-glow); }
.p-drawer .moreinfo-peek-orb > .gl-surface { display: block; width: 100%; height: 100%; }
.p-drawer .moreinfo-peek-action .hb.moreinfo-peek-run { --hb-glyph: var(--color-ink); }
.p-drawer .status-capsule:has(> .ring) { position: relative; overflow: visible; }
/* The peek title's marquee (drawer.js marquee; the app's marquee.css and
   peek-row.css:64-78): the word clips itself, so lab.css's 4 px clip room
   comes off. When it does not fit, a 20 fade at its end, and while it
   moves --marquee-start fades its start; the copy runs 32 after it. */
@property --marquee-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.p-drawer .peek-row-here.marquee {
  --marquee-fade: 20px;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}
.p-drawer .peek-row-here.marquee[data-overflows] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-start), #000 calc(100% - var(--marquee-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-start), #000 calc(100% - var(--marquee-fade)), transparent 100%);
}
.p-drawer .peek-row-here .marquee-run {
  display: inline-flex;
  gap: 32px;
  will-change: transform;
}

/* The peek row compact, below 560 (drawer.js compactPeek, PeekRow.tsx
   data-compact): the first place and its "/" drop (peek-row.css), and the
   status capsule is a 36 circle holding its lead, the line kept for
   assistive technology (status-capsule.css [data-compact]). The word, here,
   keeps the row's room: "Telepathy" whole beside the orb, Pause and
   Expand on a phone. */
.p-drawer .peek-row[data-compact] .peek-row-place[data-first],
.p-drawer .peek-row[data-compact] .peek-row-slash[data-first] { display: none; }
.p-drawer .peek-row[data-compact] .status-capsule-content { padding: 0 9px; }
.p-drawer .peek-row[data-compact] .status-capsule-line {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* -------------------------------------------------- the faces menu
   FloatingMenu.css and menu-row.css: an ink surface, radius 16, padding 6,
   rows 2 apart; its tail the tooltip's triangle, 14.485 x 12.544, the apex
   rounded 2, the same ink; elevation a drop-shadow on the root so it
   follows the surface and the tail as one shape. A row is 36 high,
   padding 8 10, gap 10, radius 10: the 20 filled glyph, the label 14/18,
   the check 18, 16 after the label. Hover the glyph's ink at 14%, in 100
   and out 140; pressed 22% at once. */
.face-pill-menu {
  --ink-surface: #101010;
  --ink-surface-text: #f1f1f1;
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  filter: var(--shadow-menu);
  transform-origin: var(--leave-origin, 50% 0%);
  font-family: var(--font-sans);
}
@media (prefers-color-scheme: dark) {
  .face-pill-menu { --ink-surface: #444444; --ink-surface-text: #f1f1f1; }
}
.face-pill-menu .floating-menu,
.face-pill-menu .floating-menu-tail {
  --ink-inverse: var(--ink-surface-text);
  --glyph-inverse: var(--ink-surface-glyph);
  --menu-hover: color-mix(in srgb, var(--glyph-inverse) 14%, transparent);
  --menu-pressed: color-mix(in srgb, var(--glyph-inverse) 22%, transparent);
}
.face-pill-menu .floating-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: 320px;
  padding: 6px;
  border-radius: 16px;
  background: var(--ink-surface);
  color: var(--ink-inverse);
  user-select: none;
  -webkit-user-select: none;
}
.face-pill-menu .floating-menu-list { display: contents; }
.face-pill-menu .floating-menu-tail {
  flex-shrink: 0;
  width: 14.485px;
  height: 12.544px;
  background: var(--ink-surface);
}
.face-pill-menu .floating-menu-tail[data-edge='top'] {
  clip-path: path('M 14.485 12.544 L 0 12.544 L 5.5104 3 A 2 2 0 0 1 8.9746 3 Z');
}
.face-pill-menu .floating-menu-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  min-height: 36px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--ink-inverse);
  font: 400 14px / 18px var(--font-sans);
  text-align: left;
  white-space: nowrap;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: background-color var(--motion-hover) ease-out;
}
.face-pill-menu .floating-menu-item:is(:hover, [data-hover]) {
  background: var(--menu-hover);
  transition-duration: var(--motion-hover-in);
}
.face-pill-menu .floating-menu-item:is(:active, [data-press]) { background: var(--menu-pressed); transition-duration: 0s; }
/* The row glyph at the Regular stroke (menu-row.css:71 --icon-wght-regular,
   tokens/glyph.css:29: 300 beside 13 to 15 Regular words). */
.face-pill-menu .floating-menu-item .material-symbols-rounded { --icon-fill: 1; --icon-wght: 300; flex-shrink: 0; line-height: 1; }
.face-pill-menu .menu-row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.face-pill-menu .menu-row-check { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) {
  .face-pill-menu .floating-menu-item { transition: none; }
}