/* edaynetwork.com - Emergence Network. Code and decoded data (c) 2026, attribution required: edaynetwork.com/standards#license */
/* Shared page components. Link after system.css. Tokens only; both themes.
   .howto   one-line fold for "how to read this" text
   .strip   one wrapping line of counts
   .cards   table that stacks into cards under 640px (td[data-label])
   .verdict pill for a one-word call
   .pick    row of anchor chips ("Pick one to jump to it")
   .find    search box with a live status line
   .grp     collapsible group whose summary holds a heading */

/* ---- .howto ---- */
.howto{margin-top:var(--s5);border:1px solid var(--rule);border-radius:var(--r1);background:var(--wash)}
.howto>summary{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);padding:0 var(--s4);cursor:pointer;list-style:none;font:600 14px/1.3 var(--text);letter-spacing:-.006em;color:var(--ink-2)}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary::after{content:"";margin-left:auto;flex:none;width:7px;height:7px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
.howto[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.howto>summary:hover{color:var(--ink)}
.howto>summary:focus-visible{outline:2px solid var(--ember-ink);outline-offset:2px}
.howto>.bul,.howto>p{margin:0;padding:var(--s1) var(--s4) var(--s4);max-width:min(var(--measure),680px)}
.howto>.bul{gap:var(--s3)}
.howto>p+p{padding-top:0}
.howto>.bul li>span,.howto>p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.howto b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.howto>summary::after{transition:none}}

/* ---- .strip ---- */
.strip{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);margin:var(--s4) 0 0;padding:0;list-style:none;font:500 14px/1.4 var(--text);color:var(--ink-2)}
.strip b{font:500 17px/1.2 var(--figure);font-variant-numeric:tabular-nums;color:var(--ink);margin-right:6px}
.strip a{text-decoration:underline;text-underline-offset:.16em}

/* ---- .cards ---- */
@media (max-width:640px){
.tblw:has(table.cards),.tw:has(table.cards){border:0;background:transparent;overflow:visible;border-radius:0}
table.cards,table.cards tbody,table.cards tr,table.cards th,table.cards td{display:block;width:100%;min-width:0}
table.cards colgroup{display:none}
table.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.cards tbody tr{margin-top:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:var(--r1);background:var(--surface)}
table.cards tbody tr:first-child{margin-top:0}
table.cards tbody tr:hover td,table.cards tbody tr:hover th{background:transparent}
table.cards th,table.cards td{position:static;border:0;padding:var(--s1) 0;white-space:normal;text-align:left;background:transparent;overflow-wrap:anywhere}
table.cards tbody tr>:first-child{font:600 17px/1.3 var(--text);letter-spacing:-.014em;color:var(--ink);padding-top:0}
table.cards td[data-label]::before,table.cards td[data-k]::before{display:block;margin-bottom:2px;font:600 11px/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
table.cards td[data-label]::before{content:attr(data-label)}
table.cards td[data-k]:not([data-label])::before{content:attr(data-k)}
table.cards td.num,table.cards td.c-val,table.cards td.q{text-align:left;white-space:normal}
table.cards td.nil{display:none}
/* two values per row inside each card (short numeric tables) */
table.cards.cards--2 tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s4)}
table.cards.cards--2 tbody tr>:first-child{grid-column:1/-1;padding-bottom:var(--s1)}
}

/* ---- .verdict ---- */
.verdict{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border:1px solid color-mix(in srgb,var(--ember-ink) 32%,transparent);border-radius:var(--r2);background:color-mix(in srgb,var(--ember-ink) 9%,var(--surface));color:var(--ember-ink);font:600 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
:root[data-theme="dark"] .verdict{color:color-mix(in srgb,var(--ember-ink) 62%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .verdict{color:color-mix(in srgb,var(--ember-ink) 62%,#fff)}}

/* ---- .pick ---- */
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s4)}
.pick__k{margin:0 var(--s2) 0 0;font:600 14px/1.3 var(--text);color:var(--ink-2)}
.pick a.chip{text-decoration:none}
.pick a.chip:hover{border-color:var(--ember-ink);color:var(--ember-ink)}

/* ---- .find ---- */
.find{display:grid;gap:var(--s2);margin-top:var(--s5);max-width:420px}
.find label{font:600 12px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.find input{width:100%;min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--rule);border-radius:var(--r1);background:var(--wash);color:var(--ink);font:400 16px/1 var(--text);letter-spacing:-.012em}
.find input::placeholder{color:var(--ink-3)}
.find input:hover{border-color:var(--ember-ink)}
.find input:focus-visible{outline:2px solid var(--ember-ink);outline-offset:2px}
.find__s{margin:0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.find__none{margin:var(--s4) 0 0;color:var(--ink-2)}

/* ---- .grp ---- */
details.grp{border-top:1px solid var(--rule)}
details.grp:last-of-type{border-bottom:1px solid var(--rule)}
details.grp>summary{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);padding:var(--s3) 0;cursor:pointer;list-style:none}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary h2{margin:0;font-size:20px;line-height:1.25}
details.grp>summary .head__ct{margin-left:auto}
details.grp>summary::after{content:"";flex:none;width:8px;height:8px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
details.grp[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details.grp>summary:focus-visible{outline:2px solid var(--ember-ink);outline-offset:2px}
details.grp>.small{margin:0 0 var(--s3);max-width:min(var(--measure),640px)}
details.grp>.tblw{margin:0 0 var(--s5)}
@media (prefers-reduced-motion:reduce){details.grp>summary::after{transition:none}}

/* ---- .cards--pair (added by D2): short numeric rows, label and value side by side ---- */
@media (max-width:640px){
table.cards.cards--pair tbody tr{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s1) var(--s4)}
table.cards.cards--pair tbody tr>:first-child,table.cards.cards--pair tbody tr>td{position:static;min-width:0;width:auto;max-width:none;box-shadow:none;border:0;align-self:start}
table.cards.cards--pair tbody tr>:first-child{font:500 16px/1.3 var(--figure);letter-spacing:0;font-variant-numeric:tabular-nums;padding-top:var(--s1)}
}
/* ---- .grp--filter (added by D2): a filter disclosure that sits inside a toolbar ---- */
details.grp.grp--filter{border:1px solid var(--rule);border-radius:var(--r1);background:var(--wash)}
details.grp.grp--filter:last-of-type{border-bottom:1px solid var(--rule)}
details.grp.grp--filter>summary{padding:0 var(--s4);font:600 14px/1.3 var(--text);color:var(--ink-2)}
details.grp.grp--filter>summary:hover{color:var(--ink)}
details.grp.grp--filter>.grp__b{display:grid;gap:var(--s3);padding:var(--s1) var(--s4) var(--s4)}