/* The PILF-opedia index, round 2 (/plants/; templates/plants.html, static/opedia-index.js) [Oct 20, branch site-opedia-index].
   His marks: notes/marks_round2.md § 6 Index. Tokens only (static/pilf.css › :root); type sizes are the Design System's type styles
   (DESIGN.md: label 10.5, eyebrow and toggle 11, button 12.5, caption 14, name-card 15, body-sm 16, care-line 16.5, subheading 18,
   ed-hook 20, heading 22, name-h1 32, ed-display 48). Square corners; one forest button per view. [C, the build] */

/* ── the ground: plaster, the editorial mode [M Oct 17, D4; kept Oct 20, opedia-index-title] ── */
.opx { background: var(--ed-plaster); padding-block: var(--space-6) var(--space-7); }
.opx-in { max-width: var(--grid); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 1024px) { .opx-in { padding-inline: var(--space-7); } }
.opx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.opx-head { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--measure); }
.opx-t { margin: 0; text-wrap: balance; }
.opx-lead { font-size: var(--t-body); line-height: 1.45; font-weight: 300; color: var(--ink-75); }
.opx-buy .textlink { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ── the controls: search with the view switch, the sorts, the count with Filter and Compare ── */
.opx-ctl { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.opx-srow { display: flex; align-items: center; gap: var(--space-2); }
.opx-srch { position: relative; flex: 1; min-width: 0; }
.opx-q { width: 100%; min-height: var(--tap); padding: 0 var(--tap) 0 calc(var(--space-6) + var(--space-2)); border: 1px solid var(--ink-30); border-radius: var(--radius-none);
  background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); font-weight: 400; line-height: 1.2; -webkit-appearance: none; appearance: none; }
.opx-q::placeholder { color: var(--ink-66); font-size: var(--t-small); }
.opx-srch:has(.opx-qx[hidden]) .opx-q { padding-right: var(--space-3); }
.opx-q::-webkit-search-cancel-button { display: none; }
.opx-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.opx-qi { position: absolute; left: var(--space-3); top: 50%; width: var(--space-4); height: var(--space-4); transform: translateY(-50%); fill: none; stroke: var(--ink-66); stroke-width: 2; pointer-events: none; }
.opx-qx { position: absolute; right: 0; top: 0; width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; }
.opx-qx[hidden] { display: none; }
.opx-qx svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: var(--ink-66); stroke-width: 2; }
/* the list/grid pair [M Oct 20, opedia-index-views]: the one on in ink with the Toggle's sage underline (DESIGN.md › Toggle) */
.opx-vw { display: flex; flex: none; }
.opx-vw[hidden] { display: none; }
.opx-vw button { width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; color: var(--ink-45);
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--dur-tap) var(--ease-settle), box-shadow var(--dur-tap) var(--ease-settle); }
.opx-vw button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sage); }
.opx-vw svg { width: calc(var(--space-4) + var(--space-1)); height: calc(var(--space-4) + var(--space-1)); fill: none; stroke: currentColor; stroke-width: 1.8; }
.opx-sorts { display: flex; column-gap: var(--space-4); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.opx-sorts::-webkit-scrollbar { display: none; }
.opx-sorts .tgl { flex: none; }
.opx-sorts[hidden] { display: none; }
.opx-sorts .tgl, .opx-acts .tgl { white-space: nowrap; }
.opx-sorts .tgl[aria-pressed="true"], .opx-acts .tgl[aria-expanded="true"], .opx-acts .tgl[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sage); }
.opx-ar { display: inline-block; margin-left: var(--space-1); }
.tgl[data-dir="down"] .opx-ar::before { content: "\2193"; }
.tgl[data-dir="up"] .opx-ar::before { content: "\2191"; }
.opx-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.opx-count { font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink-66); min-width: 0; }
.opx-acts { display: flex; flex: none; column-gap: var(--space-4); }
.opx-acts .tgl[hidden] { display: none; }
.opx-fn { margin-left: var(--space-1); }
.opx-f { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); padding-bottom: var(--space-2); }
.opx-f[hidden] { display: none; }
.opx-clear { min-height: var(--tap); }
.opx-zero, .opx-none { font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink-75); padding-block: var(--space-3); }
.opx-zero[hidden], .opx-none[hidden] { display: none; }

/* ── the list (the default) [M Oct 20, opedia-index-list] ── */
.opx-rows { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.opx-it { position: relative; display: flex; align-items: flex-start; border-top: 1px solid var(--ed-putty); }
.opx-it[hidden] { display: none; }
.opx-row { flex: 1; min-width: 0; }
.opx-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: calc(var(--space-8)) minmax(0, 1fr) var(--tap); gap: var(--space-3); align-items: center; padding-block: var(--space-2); }
.opx-row > summary::-webkit-details-marker { display: none; }
.opx-row > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the studio cut-out on the plaster, as if shot against it; a stage photo or the leaf print where there's no cut-out */
.opx-th { display: flex; align-items: center; justify-content: center; width: var(--space-8); aspect-ratio: 1 / 1; overflow: hidden; }
.opx-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.opx-th img.ph { object-fit: cover; }
.opx-th .g-leaf { width: 56%; height: auto; color: var(--forest); }
.opx-id { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.opx-nm { font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
/* the corner: the small Matrix icon with its quadrant lit, beside the corner's word [M Oct 20; templates/_mxicon.html] */
.opx-cn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-75); }
.opx-cn .mxi { flex: none; color: var(--ink); }
/* Ease and Presence as the tag prints them: EASE 4.1/5 [M Oct 20, "in the same format as is on the tag"] */
.opx-sc { display: flex; flex-wrap: wrap; column-gap: var(--space-4); }
.opx-s { display: inline-flex; align-items: baseline; gap: var(--space-1); white-space: nowrap; }
.opx-s .k { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-66); }
.opx-s .v { font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.2; font-weight: 600; color: var(--ink); }
.opx-s small { font-size: var(--t-label); font-weight: 600; color: var(--ink-66); }
.opx-plus { justify-self: center; font-family: var(--font-name); font-size: var(--t-title); line-height: 1; font-weight: 300; color: var(--ink-45); transition: transform var(--dur-tap) var(--ease-settle); }
.opx-row[open] .opx-plus { transform: rotate(45deg); }
/* owner2-94 [M Oct 23 10:39 AM: "When I expand an entry's preview, the plants image should get bigger, which tells me I've expanded it. Also, can the
   background or outline of the card look 'selected' somehow?"]: an open row's picture grows to 1.5x (2x from 700px), and the row lifts onto the
   lighter ground (the list sits on plaster) inside a sage rule, bleeding a little past the text so it reads as a card [C: sizes and colors, tokens
   only]. Closing it puts both back */
.opx-row > summary { transition: grid-template-columns var(--dur-in) var(--ease-settle); }
.opx-th { transition: width var(--dur-in) var(--ease-settle); }
.opx-row[open] > summary { grid-template-columns: calc(var(--space-8) * 1.5) minmax(0, 1fr) var(--tap); }
.opx-row[open] > summary .opx-th { width: calc(var(--space-8) * 1.5); }
.opx-it:has(> .opx-row[open]) { background: var(--ground); border-top-color: var(--sage); box-shadow: inset 0 -1px 0 var(--sage); margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); }
@media (min-width: 700px) {
  .opx-row[open] > summary { grid-template-columns: calc(var(--space-8) * 2) minmax(0, 1fr) var(--tap); }
  .opx-row[open] > summary .opx-th { width: calc(var(--space-8) * 2); }
}
@media (prefers-reduced-motion: reduce) { .opx-row > summary, .opx-th { transition: none; } }

/* the preview: the way in first, then the Skim, the glance row, three related plants [M Oct 20, opedia-index-list] */
.opx-pv { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-1) 0 var(--space-6); }
.opx-go { color: var(--forest); }
.opx-skim { font-size: var(--t-body); line-height: 1.45; font-weight: 300; color: var(--ink); }
.opx-gl { list-style: none; margin: 0; padding: var(--space-3) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); border-block: 1px solid var(--ed-putty); }
.opx-gl li { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.opx-gl .g, .opx-pft .g { width: var(--space-6); height: auto; aspect-ratio: 4 / 3; color: var(--ink); display: block; }
.opx-gl .v { font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.opx-gl .k { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-66); }
.opx-rel ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.opx-rel a { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: var(--ink); font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.opx-rel .opx-th { width: 100%; }
@media (hover: hover) and (pointer: fine) { .opx-rel a:hover span, .opx-pn:hover { text-decoration: underline; text-underline-offset: 3px; } .opx-row > summary:hover .opx-nm { color: var(--forest); } }

/* compare's boxes: hidden until Compare is on [M Oct 20, opedia-index-compare: "I don't want the boxes … visible as the default"] */
.opx-pick { display: none; flex: none; align-items: center; width: var(--tap); min-height: calc(var(--space-8) + var(--space-4)); cursor: pointer; }
[data-cmp-on] .opx-pick { display: flex; }
.opx-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opx-box { position: relative; width: calc(var(--space-4) + var(--space-2)); height: calc(var(--space-4) + var(--space-2)); border: 1.5px solid var(--ink-45); background: var(--ground); }
.opx-pick input:checked + .opx-box { background: var(--forest); border-color: var(--forest); }
.opx-pick input:checked + .opx-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--on-forest); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.opx-pick input:focus-visible + .opx-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.opx-pick input:disabled + .opx-box { opacity: .4; }
.opx-pick:has(input:disabled) { cursor: default; }

/* ── the plates (the switch) [M Oct 20, opedia-index-plates] ── */
.opx-plate { display: none; }
[data-view="plates"] .opx-row { display: none; }
[data-view="plates"] .opx-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); margin-top: var(--space-3); }
[data-view="plates"] .opx-it { border-top: 0; flex-direction: column; min-width: 0; }
[data-view="plates"] .opx-plate { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-width: 0; }
[data-view="plates"] .opx-pick { position: absolute; left: 0; top: 0; z-index: 2; width: var(--tap); height: var(--tap); min-height: 0; align-items: flex-start; padding: var(--space-2); }
@media (min-width: 700px) { [data-view="plates"] .opx-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); } }
@media (min-width: 1024px) { [data-view="plates"] .opx-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.opx-car { position: relative; display: flex; aspect-ratio: 4 / 5; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; background: var(--photo); }
.opx-car::-webkit-scrollbar { display: none; }
.opx-it.foe .opx-car { background: var(--ed-putty); }
.opx-sl { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; overflow: hidden; text-decoration: none; color: inherit; }
.opx-sl picture, .opx-sl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opx-sl img.cut { object-fit: contain; }
/* the third picture: "the one…" big on a forest block with a small drawing [M Oct 20], the drawing in the ground's cream (a mask, so it's a token) */
.opx-sl.one { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); background: var(--forest); color: var(--on-forest); }
.opx-sl.one .ed-hook { color: var(--on-forest); text-wrap: pretty; }
.opx-dr { align-self: flex-end; width: 46%; aspect-ratio: 308 / 258; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; }
.opx-dr[data-on] { background-color: var(--on-forest); }
.opx-lab { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--space-1); width: 100%; height: 100%; padding: var(--space-4); }
.opx-lab b { font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.25; font-weight: 600; }
.opx-lab em { font-family: var(--font-editorial); font-size: var(--t-small); color: var(--ink-66); }
.opx-lab .g-leaf { width: var(--space-7); height: auto; color: var(--forest); }
.opx-lab span { font-family: var(--font-name); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-66); }
.opx-dots { display: flex; justify-content: center; gap: 0; min-height: var(--space-4); }
.opx-dots button { width: calc(var(--space-4) + var(--space-1)); height: var(--space-4); display: flex; align-items: center; justify-content: center; padding: 0; }
.opx-dots i { width: 6px; height: 6px; border-radius: var(--radius-dot); background: var(--ink-30); display: block; transition: background var(--dur-tap) var(--ease-settle); }
.opx-dots .on i { background: var(--ink); }
.opx-pn { font-family: var(--font-editorial); font-size: var(--t-ed); line-height: 1.25; font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.opx-plate .opx-sc { column-gap: var(--space-3); }

/* ── the compare tray (compare mode only) ── */
.opx-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--ground); border-top: 1px solid var(--ink-15); }
.opx-tray[hidden] { display: none; }
.opx-tray-t { flex: 1; min-width: 0; font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink-75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opx-tray-go { width: auto; min-height: var(--tap); padding-block: 0; padding-inline: var(--space-4); }
html.opx-cmping body { padding-bottom: var(--space-8); }

/* ── compare: the whole screen under the header [M Oct 20, opedia-index-compare-matrix] ── */
.opx-cmp { position: fixed; left: 0; right: 0; bottom: 0; top: var(--opx-top, 0px); z-index: 35; overflow-y: auto; overscroll-behavior: contain; background: var(--ground); border-top: 1px solid var(--ink-15); }
.opx-cmp[hidden] { display: none; }
html.opx-locked { overflow: hidden; }   /* the html only: a body with its own overflow would become the sticky header's scroller and the header would leave the screen */
.opx-cmp-in { max-width: var(--grid); margin-inline: auto; padding: var(--space-3) var(--gutter) var(--space-7); }
@media (min-width: 1024px) { .opx-cmp-in { padding-inline: var(--space-7); } }
.opx-cmp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.opx-x, .defbox-x { width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; font-family: var(--font-name); font-size: var(--t-title); line-height: 1; font-weight: 300; color: var(--ink); }
.opx-x:focus-visible, .defbox-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the photo modes as labeled tabs, so it's obvious there are four ways to look [M Oct 20] */
.opx-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); margin-top: var(--space-1); }
@media (min-width: 560px) { .opx-modes { grid-template-columns: repeat(4, auto); justify-content: start; } }
.opx-modes button { min-height: var(--tap); text-align: left; border-bottom: 1px solid var(--ink-15); font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-66); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.opx-modes button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sage); }
.opx-modes button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.opx-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); align-items: end; }
@media (min-width: 700px) { .opx-cols { gap: var(--space-4); max-width: calc(var(--measure) + var(--space-8) * 2); } }
.opx-col { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.opx-fig { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo); margin: 0 0 var(--space-1); }
.opx-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opx-fig img.cut, .opx-fig img.dr { object-fit: contain; }
.opx-fig.miss img.dr { width: 70%; height: 70%; opacity: .5; align-self: center; }
/* drawn to scale: one floor line, each drawing as tall as its plant grows indoors (the care facts' scale.top_ft), the tallest filling the box */
.opx-cols[data-mode="scale"] .opx-fig { aspect-ratio: auto; height: calc(var(--space-8) * 3); background: none; border-bottom: 1px solid var(--ink-45); }
.opx-cols[data-mode="scale"] .opx-fig img.dr { width: 100%; object-fit: contain; object-position: center bottom; }
.opx-ft { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-66); }
.opx-cn-c { font-size: var(--t-label); }
.opx-cname { font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.2; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.opx-col .opx-sc { flex-direction: column; row-gap: 0; }
.opx-col .opx-s .k { cursor: pointer; text-decoration: underline dotted var(--forest); text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.opx-col .opx-s button.k { padding: 0; min-height: var(--space-6); }
/* Plant Facts, started simple: the four categories' spot words side by side [M Oct 20: "start simpler"], read like the label */
.opx-pf { margin-top: var(--space-6); padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--ink); background: var(--ground); max-width: calc(var(--measure) + var(--space-8) * 2); }
.opx-pf-h { font-family: var(--font-name); font-size: var(--t-num); line-height: 1.05; font-weight: 600; letter-spacing: -.025em; padding-bottom: var(--space-1); border-bottom: var(--space-2) solid var(--ink); }
.opx-pft { width: 100%; border-collapse: collapse; table-layout: fixed; }
.opx-pft th, .opx-pft td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-1) var(--space-2) 0; border-bottom: 1px solid var(--ink-15); }
.opx-pft thead th { font-family: var(--font-name); font-size: var(--t-small); line-height: 1.25; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; border-bottom: 2px solid var(--ink); }
.opx-pft tbody th { width: 28%; }
.opx-pft .lw { font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.2; font-weight: 600; text-align: left; min-height: var(--tap); }
.opx-pft td span { display: block; font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; margin-top: var(--space-1); }
.opx-pft tr:last-child th, .opx-pft tr:last-child td { border-bottom: 0; }
.opx-cmp-foot { margin-top: var(--space-4); }
.opx-cmp-foot .textlink { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ── the definition box [M Oct 20: the page dims, a calm box rises, an X closes it] ── */
.defbox.opx-defbox { width: min(calc(100vw - var(--gutter) * 2), var(--measure)); max-height: calc(100dvh - var(--space-7)); border: 0; border-radius: var(--radius-none); padding: var(--space-6) var(--space-4) var(--space-4); background: var(--ground); color: var(--ink); overflow-y: auto; }
.defbox.opx-defbox::backdrop { background: var(--ink-45, rgba(29,33,30,.45)); }
.defbox.opx-defbox[open] { animation: opx-rise var(--dur-in) var(--ease-settle); }
.defbox.opx-defbox .defbox-x { position: absolute; right: var(--space-1); top: var(--space-1); }
.opx-defbox h3 { font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; padding-right: var(--tap); }
.opx-defbox .sub { font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink-66); margin-top: var(--space-1); }
.opx-defbox p.d { font-size: var(--t-body); line-height: 1.55; font-weight: 300; margin-top: var(--space-2); }
.opx-defbox ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.opx-defbox li { padding-block: var(--space-2); border-top: 1px solid var(--ink-15); }
.opx-defbox li b { display: block; font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.2; font-weight: 600; }
.opx-defbox li span { display: block; font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink-75); margin-top: var(--space-1); }
.opx-defbox li.here b { color: var(--forest); }
.opx-defbox li .who { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.opx-defbox li .who i { font-style: normal; font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--forest); }
@keyframes opx-rise { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: none; } }

/* ── the Matrix band at the foot [kept Oct 20, opedia-index-matrix] ── */
.opx-mx { gap: var(--space-2); }
.opx-eb { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ed-ochre); }
.opx-mxd { font-size: var(--t-body); line-height: 1.55; font-weight: 300; max-width: var(--measure); }
.opx-mx .textlink { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ── wider screens: the list as a catalogue table, the preview in two columns ── */
@media (min-width: 760px) {
  .opx-id { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1.2fr); align-items: center; gap: var(--space-4); }
  .opx-sc { flex-wrap: nowrap; }
  .opx-pv { column-gap: var(--space-6); padding-left: calc(var(--space-8) + var(--space-3)); align-items: start; }   /* the columns: D5-14, below */
  .opx-go { width: auto; justify-self: start; grid-column: 1 / -1; }
  .opx-rel { max-width: var(--measure); }
}

@media (prefers-reduced-motion: reduce) {
  .opx-plus, .opx-vw button, .opx-dots i { transition: none; }
  .defbox.opx-defbox[open] { animation: none; }
  .opx-car { scroll-behavior: auto; }
}

/* ── fixes after the first screenshots [C] ── */
/* main's reading-column rule (pilf.css: main > :not(.wide)… { max-width: 680px }) reaches the fixed layers, which are direct children of main */
main > .opx-cmp.wide, main > .opx-tray.wide { width: auto; max-width: none; margin: 0; }
/* the header stays in place over compare, so the view always starts under it [M Oct 20: "beneath the persistent header"] */
html.opx-locked .site-bar { transform: none; }
/* compare's box sits over a plate's corner: the forest picture's words start below it, and a ticked box keeps a cream edge on forest */
[data-cmp-on] .opx-sl.one { padding-top: var(--space-7); }
.opx-pick input:checked + .opx-box { box-shadow: 0 0 0 1px var(--on-forest); }
@media (min-width: 760px) { .opx-rel ul { grid-template-columns: repeat(3, minmax(0, calc(var(--space-8) * 2))); } }
/* a review-only marker where a plant has no "the one…" yet (the Foes) [the parallel rules: {% if site.review_marks %}] */
.opx-cmo { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-forest); }

/* the corner emblem after the corner word [M Oct 22] */
.opx-emb { width: 14px; height: 14px; flex: none; margin-left: var(--space-1); vertical-align: -2px; }

/* brand-1023 ── the plates on the brand macros [M Oct 23 owner2-24, 25, 28; C brand-1023]. Tokens only */
.opx-sl.one.b-plate { justify-content: space-between; align-items: center; text-align: center; padding: var(--space-3); }
.b-plate .opx-dr { align-self: center; width: 70%; }
.b-plate .b-one { font-size: var(--t-strong); }   /* name-card size: a plate is ~170 px wide; the look is ed-hook's face, weight and slant */
.opx-ep { margin-top: var(--space-2); }
.opx-ep .b-ep-v { font-size: var(--t-ed); line-height: 1.25; }   /* subheading */
/* an opened row's preview reads as part of that row, not the list [M Oct 23 owner2-36]: no hairlines inside it (only the list's own rows carry one),
   the related plants indented under a caption label [C, audit inventory §14: a nested block gets indentation and space, not a rule] */
.opx-gl { border-block: 0; }
.opx-rel { padding-left: var(--space-4); }

/* D6-04 [M Oct 25]: the applied filters as chips, each with its own ×; tokens only */
.opx-on { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
.opx-onc { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--space-6); padding: 0 var(--space-3); border: 1px solid var(--forest); background: var(--ground); color: var(--forest); font-family: var(--font-name); font-size: var(--t-small); font-weight: 600; cursor: pointer; border-radius: var(--radius-none); }
.opx-onc svg { width: var(--space-3); height: var(--space-3); }
@media (hover: hover) and (pointer: fine) { .opx-onc:hover { background: var(--photo); } }

/* ── phone pass 1 [M Oct 26 5:32 PM] ── */
/* the title on one line at every phone width ("another awkward word wrapping ('the' on its own line)"): the display size, stepped down only as far as
   the width needs (≈ 41 px at 360, 45 at 390, 48 from 414) */
.opx-t { white-space: nowrap; font-size: min(var(--t-display), calc((100vw - 2 * var(--gutter)) / 7.75)); }
/* the opened row on a phone: the picture grows to fill the row's left side down to the bottom of See full entry, which sits under the scores
   ("can the thumbnail enlarge to go all the down to the bottom of 'see its PILFOPEDIA ENTRY'?"); a laptop keeps the button in the preview */
.opx-go-s { display: none; }
@media (max-width: 759px) {
  .opx-go-l { display: none; }
  /* half the row for the picture, half for the words; the × sits over the words' top right, so it takes no column (the picture was 108 px, Oct 26) */
  .opx-row[open] > summary { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .opx-row[open] > summary .opx-th { width: 100%; aspect-ratio: auto; height: 0; min-height: 100%; }   /* height 0: the words set the row's height and the picture fills it, ending at See full entry (it ran 55 px past) */
  .opx-row[open] > summary .opx-th img { object-fit: contain; object-position: center bottom; }
  .opx-row[open] .opx-nm { padding-right: var(--tap); }
  .opx-row[open] .opx-go-s { display: inline-flex; margin-top: var(--space-2); }
  .opx-row[open] > summary .opx-plus { position: absolute; top: var(--space-1); right: 0; width: var(--tap); text-align: center; }
}
/* the preview's glance is the entry's (templates/_brand.html › glance): four across, icon over its Spot words */
.opx-pv .opx-gl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-2) 0; }
.opx-hook { text-wrap: balance; }   /* "100 popular houseplants, / rated on ease and presence", not "…on ease / and presence" */

/* ── the plates, phone pass 1 [M Oct 26 5:32 PM: "Do we have a plan to update the content for the plate view? Right now, it's pretty ugly"] ──
   One card: the picture (swipe: the photo, the leaf, the drawing card), its dots, the name, the corner, and the tag's two scores side by side, each
   label a tap to its meaning (D6-01, D1-03); no meanings printed on every plate. Rows line up across a pair: each plate's parts share rows (subgrid) */
[data-view="plates"] .opx-it { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: var(--space-2); align-content: start; }
[data-view="plates"] .opx-plate { display: contents; }
[data-view="plates"] .opx-plate > * { min-width: 0; }
.opx-pn { align-self: start; text-wrap: balance; }
.opx-plate .opx-ep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; align-self: start; }
.opx-plate .opx-ep .b-ep-c { display: flex; flex-direction: column; gap: 0; padding: 0 var(--space-2) 0 0; }
.opx-plate .opx-ep .b-ep-c + .b-ep-c { border-top: 0; border-left: 1px solid var(--ink-30); margin-top: 0; padding: 0 0 0 var(--space-3); }
.opx-plate .opx-ep .b-ep-d { display: none; }
.opx-plate .opx-ep button.b-ep-k { min-height: var(--space-6); align-self: flex-start; }
.opx-plate .opx-ep .b-ep-v { font-size: var(--t-ed); line-height: 1.2; }
/* one dot spec everywhere (D5-07): the entry's and the purchase page's 8 px dots */
.opx-dots i { width: var(--space-2); height: var(--space-2); }
.opx-dots i { background: var(--ink); opacity: .3; } .opx-dots .on i { background: var(--ink); opacity: 1; }
/* the plate's drawing card fills its picture (pilf.css › .b-dc); the line one size down from the purchase page's, still readable */
.opx-sl.one, .opx-sl.one.b-plate { display: block; padding: 0; background: none; }
.opx-sl.one .b-dc { padding: var(--space-4) var(--space-3) var(--space-3); gap: var(--space-3); }
.opx-sl.one .b-dc .b-one { font-size: var(--t-body); line-height: 1.3; }
/* the one promo at the foot, a picture card (D6-26) */
.opx-pcard { display: grid; gap: var(--space-4); color: inherit; text-decoration: none; background: var(--ground); }
.opx-pcard-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.opx-pcard-ph img, .opx-pcard-ph picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.opx-pcard-tx { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); align-content: center; }
.opx-pcard-h { font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 760px) { .opx-pcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); } .opx-pcard-tx { padding: var(--space-6) var(--space-6) var(--space-6) 0; } }
@media (hover: hover) and (pointer: fine) { .opx-pcard:hover .opx-pcard-h { text-decoration: underline; text-underline-offset: .14em; } }
/* a stocked day (D6-05): the available plants first, marked with a sage rule at their left, a stronger rule before the rest */
.opx-it.opx-stocked { box-shadow: inset 3px 0 0 var(--sage); }
.opx-it.opx-div { border-top: 2px solid var(--sage); }

/* D6-09 [M Oct 25: "List left, opened preview right… let's do it all now"]: a laptop's list view in two columns, the rows at the left, the open row's
   preview (moved there by opedia-index.js) at the right, held in view as the list scrolls; the open row keeps its selected look (owner2-94) */
.opx-side { display: none; }
@media (min-width: 1024px) {
  [data-view="list"] .opx-md { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  [data-view="list"] .opx-side:not(:empty) { display: block; position: sticky; top: calc(var(--space-8) + var(--space-4)); max-height: calc(100vh - var(--space-8) - var(--space-6)); overflow: auto;
    background: var(--ground); border: 1px solid var(--sage); padding: var(--space-4); }
  .opx-side .opx-pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: var(--space-4); padding: 0; align-items: start; }
  .opx-side .opx-pv > * { grid-column: 1 / -1; }
  .opx-side .opx-go { justify-self: start; grid-row: 1; }
  .opx-side .opx-skim { grid-column: 1; grid-row: 2; }
  .opx-side .opx-leaf { grid-column: 2; grid-row: 2; }
  .opx-side .opx-pv:not(:has(.opx-leaf)) .opx-skim { grid-column: 1 / -1; }
  .opx-side .opx-gl { grid-column: 1 / -1; grid-row: auto; }
  .opx-side .opx-rel { max-width: none; }
  [data-view="list"] .opx-md .opx-plus { visibility: hidden; }   /* a picked row stays picked until another is: no + to close it */
  /* the list column is narrower beside the preview: the picked row keeps its picture size (the preview shows it big), and the row's three parts
     size to their content, the name taking what's left (the emblem overprinted EASE at 1280, the ledger's check) */
  [data-view="list"] .opx-md .opx-row[open] > summary { grid-template-columns: var(--space-8) minmax(0, 1fr) var(--tap); }
  [data-view="list"] .opx-md .opx-row[open] > summary .opx-th { width: var(--space-8); }
  [data-view="list"] .opx-md .opx-id { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-4); }
}

/* D5-14 [M Oct 25: "Fold it into the row opening"]: the leaf, close, beside the opened row's line */
.opx-pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34%); grid-auto-flow: row dense; }
.opx-pv > * { grid-column: 1 / -1; }
.opx-pv > .opx-skim { grid-column: 1; }
.opx-pv > .opx-leaf { grid-column: 2; grid-row: span 1; }
.opx-pv:not(:has(.opx-leaf)) > .opx-skim { grid-column: 1 / -1; }
.opx-leaf { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--photo); }
.opx-leaf img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* D6-01, D1-05: the plate's glance, four icons in a row under the scores (the list view keeps its own glance in the preview) */
.opx-pgl { display: none; }
[data-view="plates"] .opx-pgl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); margin: 0; color: var(--ink); }
[data-view="plates"] .opx-pgl .g { width: 100%; max-width: var(--space-6); height: auto; aspect-ratio: 4 / 3; display: block; }

/* the plates as two cards, not one four-column row of scores (the blind audit): a wider gutter between the pair */
[data-view="plates"] .opx-rows { column-gap: var(--space-6); }
/* the plate's drawing card: its one-liner at the small size, so it holds two lines on a 167 px card and leaves the drawing its height (D1-31 [M Oct 25:
   "Full width, at most two lines"]) */
[data-view="plates"] .b-dc .b-one { font-size: var(--t-small); line-height: 1.3; }
/* the sort row scrolls on a phone: its right edge fades, the cue that more sorts sit past it (A-Z sat off-screen with no sign) */
@media (max-width: 559px) { .opx-sorts { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); } }