/* Lock and Lay — the Collection's header (#1664): one bar (the folder, the search, a dropdown for each filter, Select),
   the role tabs, a slim summary line. Raised slabs, a sunken search, the picked tab in gold, the game's chunky face.
   The folder dropdown drags folders to reorder or nest them, or onto Delete (#1672). Loaded last, so it wins over the
   older header rules in style.css and blend.css without !important. */
#panelBody .coll-top.ct-top { display: flex; flex-direction: column; gap: 7px; padding: 9px 12px 8px; margin-bottom: 8px; border: 1px solid var(--bl-line); border-radius: 16px; background: linear-gradient(180deg, var(--bl-lift-2), var(--paper-2)); box-shadow: 0 3px 0 var(--bl-edge); }
#panelBody .ct-top .ct-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
#panelBody .ct-top .ct-sep { flex: none; width: 1px; height: 26px; margin: 0 2px; background: var(--bl-line); }
#panelBody .ct-top .ct-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#panelBody .ct-top .ct-car { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .15s; }
#panelBody .ct-top .ct-dd.open .ct-car { transform: rotate(180deg); }

/* the slab buttons: the folder, each filter, More */
#panelBody .ct-top .ct-dd { position: relative; flex: none; }
#panelBody .ct-top .ct-ddb { display: inline-flex; align-items: center; gap: 7px; height: 36px; min-height: 36px; padding: 0 12px; border: 0; border-bottom: 3px solid var(--bl-edge); border-radius: 11px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); color: var(--ink); font: 400 15px/1 var(--gmf); letter-spacing: .03em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--bl-line); cursor: pointer; }
#panelBody .ct-top .ct-ddb:hover { filter: brightness(1.08); transform: translateY(-1px); }
#panelBody .ct-top .ct-ddb:active { transform: translateY(2px); border-bottom-width: 1px; }
#panelBody .ct-top .ct-ddb b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; font: inherit; color: #ffc65a; }
#panelBody .ct-top .ct-ddb.set { box-shadow: inset 0 0 0 1.5px #f0a51b; }
:root:not([data-theme="dark"]) #panelBody .ct-top .ct-ddb b { color: #a86400; }
#panelBody .ct-top .ct-fbtn .fic { width: 16px; height: 16px; fill: currentColor; color: #f0a51b; }
#panelBody .ct-top .ct-fbtn b { max-width: 170px; color: var(--ink); }
#panelBody .ct-top .ct-fbtn .n, #panelBody .ct-top .ct-tabs .rchip span { padding: 2px 7px; border-radius: 999px; background: var(--bl-well); color: var(--ink-2); font: 800 11px/1.2 var(--sans); letter-spacing: 0; }

/* the search: sunken, the "?" inside it, the value/weight Filters beside it */
#panelBody .ct-top .ct-search { position: relative; flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-width: 160px; height: 36px; padding: 0 8px 0 12px; border-radius: 11px; background: var(--bl-well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--bl-line); color: var(--ink-3); }
#panelBody .ct-top .ct-search input, :root[data-theme] #panelBody .ct-top .ct-search input, :root[data-theme] #panelBody .ct-top .ct-search input:focus { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font: 400 14px var(--sans); outline: 0; }
#panelBody .ct-top .ct-search:focus-within { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 0 0 2px #f0a51b; }
#panelBody .ct-top .ct-search .gq-help > summary { width: 24px; height: 24px; }
#panelBody .ct-top .nf-pop > summary.nf-sum { height: 36px; padding: 0 13px; border: 0; border-bottom: 3px solid var(--bl-edge); border-radius: 11px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); box-shadow: inset 0 0 0 1px var(--bl-line); color: var(--ink); font: 400 15px/33px var(--gmf); letter-spacing: .03em; }
#panelBody .ct-top .nf-pop > summary.nf-sum.on { box-shadow: inset 0 0 0 1.5px #f0a51b; color: #ffc65a; }

/* Select */
#panelBody .ct-top .ct-go { flex: none; height: 36px; min-height: 36px; padding: 0 18px; border: 0; border-bottom: 3px solid #23653a; border-radius: 11px; background: linear-gradient(180deg, #63c47d, #3f9c5a); color: #fff; font: 400 16px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); cursor: pointer; }
#panelBody .ct-top .ct-go:hover { filter: brightness(1.07); }
#panelBody .ct-top .ct-go:active { transform: translateY(2px); border-bottom-width: 1px; }

/* the menus */
#panelBody .ct-top .ct-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 210px; max-height: min(460px, 70vh); overflow: auto; padding: 6px; border: 1px solid var(--bl-line-2); border-radius: 14px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); box-shadow: 0 4px 0 var(--bl-edge), 0 22px 44px -12px rgba(0, 0, 0, .7); }
#panelBody .ct-top .ct-dd:last-of-type .ct-menu { left: auto; right: 0; }
#panelBody .ct-top .ct-menu .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--ink); font: 600 13.5px/1.2 var(--sans); text-align: left; white-space: nowrap; }
#panelBody .ct-top .ct-menu .menu-item:hover { background: var(--bl-well); transform: none; }
#panelBody .ct-top .ct-menu .menu-item.on { color: #ffc65a; }
:root:not([data-theme="dark"]) #panelBody .ct-top .ct-menu .menu-item.on { color: #a86400; }
#panelBody .ct-top .ct-menu .menu-item .chk { width: 14px; flex: none; font-style: normal; color: #f0a51b; }
#panelBody .ct-top .ct-menu .menu-item > span { margin-left: auto; padding-left: 12px; color: var(--ink-3); font: 800 11px var(--sans); }
#panelBody .ct-top .ct-menu .ct-proj { height: auto; }

/* the folder menu */
#panelBody .ct-top .ct-fmenu { width: 330px; padding: 10px; overflow: visible; max-height: none; }
#panelBody .ct-top .ct-mhead { display: flex; flex-direction: column; gap: 3px; margin: 2px 4px 8px; }
#panelBody .ct-top .ct-mhead b { font: 400 14px/1 var(--gmf); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
#panelBody .ct-top .ct-mhead span { color: var(--ink-3); font: 500 12px/1.3 var(--sans); }
#panelBody .ct-top .ct-flist { display: flex; flex-direction: column; gap: 2px; max-height: min(380px, 55vh); overflow-y: auto; }
#panelBody .ct-top .ct-frow { position: relative; display: flex; align-items: center; gap: 2px; border-radius: 9px; }
#panelBody .ct-top .ct-frow.sub { margin-left: 22px; }
#panelBody .ct-top .ct-grip { flex: none; width: 14px; height: 22px; margin-left: 2px; border-radius: 4px; background: radial-gradient(circle, var(--ink-3) 1.3px, transparent 1.6px) 0 0 / 7px 7px; opacity: .55; cursor: grab; }
#panelBody .ct-top .ct-frow:hover .ct-grip { opacity: 1; }
#panelBody .ct-top .ct-fpick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; min-height: 34px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--ink); font: 600 13.5px/1 var(--sans); text-align: left; cursor: pointer; }
#panelBody .ct-top .ct-fpick .fic { width: 15px; height: 15px; flex: none; fill: #f0a51b; }
#panelBody .ct-top .ct-frow.sub .ct-fpick { font-weight: 500; color: var(--ink-2); }
#panelBody .ct-top .ct-frow.unfiled .ct-fpick .fic { fill: none; stroke: var(--ink-3); stroke-width: 1.3; }
#panelBody .ct-top .ct-fpick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
#panelBody .ct-top .ct-fpick span { margin-left: auto; padding-left: 10px; color: var(--ink-3); font: 800 11px var(--sans); }
#panelBody .ct-top .ct-fpick:hover { background: var(--bl-well); }
#panelBody .ct-top .ct-frow.on .ct-fpick { background: linear-gradient(180deg, #ffd27a, #f0a51b); color: #3d2600; box-shadow: 0 2px 0 #8f5a00; }
#panelBody .ct-top .ct-frow.on .ct-fpick .fic { fill: #3d2600; stroke: #3d2600; }
#panelBody .ct-top .ct-frow.on .ct-fpick span { color: #5a3a00; }
#panelBody .ct-top .ct-fedit { flex: none; display: grid; place-items: center; width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink-3); opacity: .6; cursor: pointer; }
#panelBody .ct-top .ct-fedit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#panelBody .ct-top .ct-frow:hover .ct-fedit, #panelBody .ct-top .ct-fedit:focus-visible { opacity: 1; }
#panelBody .ct-top .ct-fedit:hover { background: var(--bl-well); color: var(--ink); }
#panelBody .ct-top .ct-fnone { padding: 8px 10px; color: var(--ink-3); font: 500 12.5px/1.4 var(--sans); }
#panelBody .ct-top .ct-ffoot { display: grid; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bl-line); }
#panelBody .ct-top .ct-fnew { height: 36px; min-height: 36px; border: 0; border-bottom: 3px solid var(--bl-edge); border-radius: 10px; background: linear-gradient(180deg, var(--bl-lift), var(--bl-lift-2)); box-shadow: inset 0 0 0 1px var(--bl-line-2); color: var(--ink); font: 400 15px/1 var(--gmf); letter-spacing: .04em; cursor: pointer; }
#panelBody .ct-top .ct-fnew:hover { filter: brightness(1.08); }
#panelBody .ct-top .ct-fmax { color: var(--ink-3); font: 500 12px var(--sans); text-align: center; }
/* while a folder is dragged: where it would land, and the Delete spot */
#panelBody .ct-top .ct-ftrash { display: none; place-items: center; height: 42px; border: 2px dashed color-mix(in srgb, #e5563d 70%, transparent); border-radius: 10px; color: #ff9a85; font: 400 14px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; }
#panelBody .ct-top .ct-fmenu.dragging .ct-ftrash { display: grid; }
#panelBody .ct-top .ct-fmenu.dragging .ct-fnew { display: none; }
#panelBody .ct-top .ct-ftrash.over { background: rgba(229, 86, 61, .2); border-style: solid; color: #fff; }
#panelBody .ct-top .ct-frow.drag-src { opacity: .4; }
#panelBody .ct-top .ct-frow.drop-in .ct-fpick { box-shadow: inset 0 0 0 2px #f0a51b; background: rgba(240, 165, 27, .14); }
#panelBody .ct-top .ct-frow.drop-before::before, #panelBody .ct-top .ct-frow.drop-after::after { content: ''; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: #f0a51b; pointer-events: none; }
#panelBody .ct-top .ct-frow.drop-before::before { top: -2px; }
#panelBody .ct-top .ct-frow.drop-after::after { bottom: -2px; }

/* the role tabs: one sunken track, the picked tab in gold */
#panelBody .ct-top .ct-tabs.coll-roles { display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; max-width: 100%; padding: 3px; border-radius: 12px; background: var(--bl-well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
#panelBody .coll-top.ct-top .ct-tabs .rchip, :root[data-theme] #panelBody .coll-top.ct-top .ct-tabs .rchip:hover:not(.on) { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 9px !important; background: transparent; box-shadow: none; color: var(--ink-2); font: 400 14.5px/1 var(--gmf); letter-spacing: .04em; transform: none; }
#panelBody .coll-top.ct-top .ct-tabs .rchip:hover:not(.on) { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
#panelBody .coll-top.ct-top .ct-tabs .rchip::before { width: 8px; height: 8px; }
#panelBody .coll-top.ct-top .ct-tabs .rchip.rc-all::before { display: none; }
#panelBody .coll-top.ct-top .ct-tabs .rchip span { margin: 0; padding: 0; background: none; color: var(--ink-3); }
#panelBody .coll-top.ct-top .ct-tabs .rchip.on, #panelBody .coll-top.ct-top .ct-tabs .rchip.on:hover { background: linear-gradient(180deg, #ffd27a, #f0a51b); color: #3d2600; box-shadow: 0 2px 0 #8f5a00; }
#panelBody .coll-top.ct-top .ct-tabs .rchip.on span { background: none; color: #5a3a00; }
#panelBody .coll-top.ct-top .ct-tabs .rchip.on::before { box-shadow: 0 0 0 1.5px rgba(61, 38, 0, .45); }
#panelBody .coll-top.ct-top .ct-tabs .rchip-split { display: inline-flex; align-items: center; }
#panelBody .coll-top.ct-top .ct-tabs .rchip-split .rchip { border-radius: 9px 0 0 9px !important; }
#panelBody .coll-top.ct-top .ct-tabs .rchip-act { height: 24px; min-height: 24px; margin: 0 6px 0 -2px; padding: 0 8px; border: 0; border-radius: 7px; background: linear-gradient(180deg, #ef6b55, #c8412c); box-shadow: 0 2px 0 #7a2012; color: #fff; font: 800 11px/1 var(--sans); }

/* the summary line */
#panelBody .coll-top.ct-top .coll-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0; border-top: 0; }
#panelBody .coll-top.ct-top .coll-strip .cs-count { margin-right: 4px; }
#panelBody .coll-top.ct-top .coll-strip .cs-item { height: 26px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 700 12.5px/1 var(--sans); }
#panelBody .coll-top.ct-top .coll-strip .cs-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
#panelBody .coll-top.ct-top .coll-strip .cs-item.warn { background: color-mix(in srgb, #f0a51b 15%, transparent); color: #ffc65a; }
#panelBody .coll-top.ct-top .coll-strip .cs-tubs.warn { background: color-mix(in srgb, #e5563d 16%, transparent); color: #ff9a85; }
:root:not([data-theme="dark"]) #panelBody .coll-top.ct-top .coll-strip .cs-item.warn { color: #8a5200; }
:root:not([data-theme="dark"]) #panelBody .coll-top.ct-top .coll-strip .cs-tubs.warn { color: #a3301c; }
#panelBody .coll-top.ct-top .coll-strip .cs-item.on { box-shadow: inset 0 0 0 1.5px #f0a51b; }
#panelBody .coll-top.ct-top .coll-strip .cs-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* the bar wraps on the panel's own width (#1687): the panel isn't full screen, the animal card is open, a small
   window. The search takes its own line first; the dropdowns and Select wrap under it. */
#panelBody .coll-stick { container: collhead / inline-size; }
#panelBody .ct-top .ct-bar { flex-wrap: wrap; row-gap: 7px; }
@container collhead (max-width: 1080px) {
  #panelBody .ct-top .ct-search { order: -1; flex-basis: 100%; }
  #panelBody .ct-top .ct-sep { display: none; }
  #panelBody .ct-top .ct-go { margin-left: auto; }
}
@container collhead (max-width: 560px) {
  #panelBody .ct-top .ct-ddb, #panelBody .ct-top .nf-pop > summary.nf-sum { padding: 0 10px; font-size: 14px; }
}
#panelBody .coll-top.ct-top > * { margin-top: 0; margin-bottom: 0; }
#panelBody .coll-top.ct-top .coll-strip > * { margin-top: 0; margin-bottom: 0; }
#panelBody .coll-top.ct-top .coll-strip .cs-count { display: inline-flex; align-items: baseline; line-height: 1; }
#panelBody .coll-top.ct-top .coll-strip :is(.abtn, button) { height: 28px; min-height: 28px; padding-top: 0; padding-bottom: 0; }
#panelBody .coll-top.ct-top .coll-strip .abtn.quiet { padding: 0 8px; border: 0; background: transparent; box-shadow: none; color: var(--ink-2); font: 600 12.5px/1 var(--sans); }
#panelBody .coll-top.ct-top .coll-strip .abtn.quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#panelBody .coll-top.ct-top .coll-strip { min-height: 0; }

/* a short window (#1685: a MacBook Air full screen with the Dock is about 1440 x 720): the pinned header took a third of
   it. Below 900 px tall it tightens: slimmer Collection/Pets tabs, the bar at 32 px, and the role tabs and the summary
   line share one line when they fit. Nothing is ever hidden (#1705): when they don't fit, the summary wraps under the
   tabs, and each wraps within itself rather than scrolling sideways out of sight (a 1280 x 1024 screen lost Set racks
   aside… and half the role tabs). Search, every filter's dropdown and Select stay in the bar. Select mode's bar keeps
   its own line. From 900 px up nothing here applies. */
@media (max-height: 899px) {
  #panelBody .coll-stick { padding-bottom: 6px; }
  #panelBody .coll-stick > .tabs.coll-tabs { margin-bottom: 6px; padding: 3px; }
  #panelBody .coll-stick > .tabs.coll-tabs button { padding-top: 5px; padding-bottom: 5px; }
  #panelBody .coll-top.ct-top { flex-flow: row wrap; align-items: center; gap: 5px 10px; padding: 6px 10px; }
  #panelBody .coll-top.ct-top > * { flex: 1 1 100%; min-width: 0; }
  #panelBody .ct-top .ct-ddb, #panelBody .ct-top .ct-search, #panelBody .ct-top .ct-go { height: 32px; min-height: 32px; }
  #panelBody .ct-top .nf-pop > summary.nf-sum { height: 32px; line-height: 29px; }
  #panelBody .ct-top .ct-sep { height: 22px; }
  /* the animal card open or a narrower window no longer puts the search on a line of its own: the bar wraps only if it must */
  body #panelBody .coll-top.ct-top .ct-bar .ct-search { order: 0; flex-basis: 200px; }
  #panelBody .coll-top.ct-top > .ct-tabs.coll-roles { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; align-self: center; }
  #panelBody .coll-top.ct-top .ct-tabs .rchip, #panelBody .coll-top.ct-top .ct-tabs .rchip-split { flex: none; height: 28px; min-height: 28px; }
  /* the summary beside the tabs while it fits in 260 px or more, else on the line under them; its items wrap too */
  #panelBody .coll-top.ct-top > .coll-strip { flex: 1 1 260px; flex-wrap: wrap; row-gap: 4px; min-width: 0; min-height: 0; }
  #panelBody .coll-top.ct-top > .coll-strip > *, #panelBody .coll-top.ct-top .coll-strip .cs-right > * { flex: none; }
  #panelBody .coll-top.ct-top .coll-strip .cs-right { flex-wrap: wrap; justify-content: flex-end; }
  #panelBody table.coll thead th { padding-top: 4px; padding-bottom: 4px; }
}

/* a short window, round two (#1685): the title row and the Collection/Pets switch took another 120 px above the header.
   Below 900 px tall, on the Collection (and its Pets tab) only: the title row tightens and drops its subtitle, the panel's
   top padding halves, and Collection/Pets is a compact 28 px segmented control. */
@media (max-height: 899px) {
  #panel:has(> #panelBody > :is(.coll-stick, .coll-tabs)) > .panel-head { padding-top: 8px; padding-bottom: 7px; align-items: center; }
  #panel:has(> #panelBody > :is(.coll-stick, .coll-tabs)) > .panel-head h2 { font-size: 22px; line-height: 1.1; }
  #panel:has(> #panelBody > :is(.coll-stick, .coll-tabs)) > .panel-head h2 small { display: none; }
  #panel:has(> #panelBody > :is(.coll-stick, .coll-tabs)) > #panelBody { padding-top: 8px; }
  #panelBody > .tabs.coll-tabs, #panelBody .coll-stick > .tabs.coll-tabs { height: 28px; margin-bottom: 5px; padding: 2px; border-radius: 10px; box-sizing: border-box; }
  #panelBody > .tabs.coll-tabs button, #panelBody .coll-stick > .tabs.coll-tabs button { height: 24px; min-height: 24px; padding: 0 14px; border-radius: 8px; font-size: 13px; line-height: 24px; }
}
/* shorter still (a laptop with toolbars or zoom, about 600 px): the column headings and the header's gaps tighten too */
@media (max-height: 699px) {
  #panelBody .coll-top.ct-top { row-gap: 4px; padding-top: 5px; padding-bottom: 5px; }
  #panel:has(> #panelBody > :is(.coll-stick, .coll-tabs)) > .panel-head { padding-top: 6px; padding-bottom: 5px; }
  #panelBody .coll-stick { padding-bottom: 3px; }
  #panelBody > .tabs.coll-tabs, #panelBody .coll-stick > .tabs.coll-tabs { margin-bottom: 4px; }
  #panelBody table.coll thead th { padding-top: 2px; padding-bottom: 2px; }
  #panelBody table.coll thead .coll-density button { width: 24px; min-height: 22px; height: 22px; }
}

/* the table never squeezes the Animal column away (#1705): docked (the panel about 720 px wide) the fixed columns took
   every pixel and the dense table drew the names at 1 px. Below this width the panel scrolls sideways instead, the
   right-hand columns (Role, Value) still there. */
#panelBody table.coll { min-width: 820px; }
/* the Value column makes room for the looks grade (#135): at 72 px "B $1,502" ran past the row's right edge (Jesse's
   preview, 2026-10-09; the fix for it missed #1596's merge) */
#panelBody table.coll th.num:nth-last-child(1) { width: 104px; }
#panelBody table.coll td.num:nth-last-child(1) { white-space: nowrap; }

/* a narrow panel (#1717: docked, about 720 px): the 820 px floor above still squeezed the names to a few letters a line,
   and Role and Value needed a sideways scroll. Below 900 px of panel, Weight, Stage and Loc fold into one line under the
   name (.an-mini), Status and Role narrow, the names and chips wrap by word, and the table fits with no sideways scroll.
   Full screen and wide windows are unchanged. */
#panelBody:has(table.coll) { container: collpanel / inline-size; }
#panelBody table.coll .an-mini { display: none; }
@container collpanel (max-width: 900px) {
  #panelBody table.coll { min-width: 0; }
  #panelBody table.coll :is(th[data-sort="weight"], td.wt, th.stage, td.stage, th.locc, td.locc) { display: none; }
  #panelBody table.coll .an-mini { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
  #panelBody table.coll :is(th.status, td.status) { width: 118px; }
  #panelBody table.coll.dense td.status { white-space: normal; }
  #panelBody table.coll th.roles { width: 96px; }
  #panelBody table.coll td.roles { white-space: normal; }
  #panelBody table.coll .an-line { flex-wrap: wrap; white-space: normal; row-gap: 3px; }
  #panelBody table.coll .an-line b { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; word-break: normal; overflow-wrap: normal; }
  #panelBody table.coll td.animal b { word-break: normal; overflow-wrap: normal; }
}
