/* Copyright (c) 2026 Kyaw Thu. All rights reserved.
   Evergreen full-text article stylesheet. Self-contained: one file replaces the
   legacy 12-file theme. Brand green #4DBD38 (from the official banner). */

:root{
  --eg:#4DBD38; --eg-dark:#3a9e29; --eg-deep:#2c7a1f;
  --ink:#1a1a1a; --muted:#666; --rule:#e6e6e6; --rule-soft:#f0f0f0;
  --bg:#fff; --bg-soft:#fafbfa; --oa:#f68212;
  --serif:'Spectral',Georgia,'Times New Roman',serif;   /* title + headings */
  --read:'Source Serif 4',Georgia,'Times New Roman',serif; /* article reading body */
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* UI/chrome */
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;}
a{color:var(--eg-dark);text-decoration:none;} a:hover{text-decoration:underline;}
.eg-wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.eg-eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--eg-dark);margin:0 0 .6em;}

/* ===== banner ===== */
.eg-banner{background:var(--eg);}
.eg-banner .eg-wrap{display:flex;align-items:center;height:74px;gap:20px;}
.eg-banner img{height:50px;width:auto;}
.eg-banner nav{margin-left:auto;display:flex;gap:20px;}
.eg-banner nav a{color:rgba(255,255,255,.95);font-size:.85rem;font-weight:600;}
.eg-banner nav a:hover{color:#fff;text-decoration:none;}

/* ===== title block =====
   Header content (title, authors, records) and the action bar align to the SAME
   left edge and width as the article reading column below (so all the vertical
   edges line up). The .eg-wrap stays the full 1240px grid width; the inner content
   is capped to the reading column and left-aligned. */
.eg-titlehead{background:#fff;border-bottom:1px solid var(--rule);padding:24px 0 22px;}
.eg-titlehead .eg-wrap{max-width:1240px;}
.eg-titlehead .eg-wrap > *{max-width:720px;}
.eg-titlehead .eg-metabar{max-width:720px;}
.eg-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;align-items:center;}
.eg-badge{font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:2px 9px;border-radius:4px;text-transform:uppercase;}
.eg-badge.type{background:#eef7ec;color:var(--eg-dark);}
.eg-badge.oa{background:transparent;color:var(--oa);display:inline-flex;align-items:center;gap:5px;}
.eg-badge.oa i{font-size:.78rem;}
/* CC licence badge — sits with Open Access; quiet, muted, with the CC icons. */
.eg-badge.cc{background:transparent;color:var(--muted);display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0;font-weight:600;}
.eg-badge.cc i{font-size:.92rem;}
.eg-badge.cc:hover{color:var(--eg-dark);text-decoration:none;}
/* Vol/issue/pages line: even, tidy separators — modest letter-spacing and the
   middle-dots in a lighter tint so the spacing reads consistently. */
.eg-badge.vol{color:var(--muted);font-weight:600;letter-spacing:.03em;white-space:nowrap;}
.eg-titlehead h1{font-family:var(--serif);font-weight:700;font-size:2.1rem;line-height:1.2;margin:.05em 0 .5em;color:var(--ink);}
.eg-authors{font-size:1.08rem;color:var(--ink);margin:.3em 0;font-weight:600;}
.eg-authors sup{font-size:.62em;color:var(--muted);font-weight:400;}
/* Author ORCID + mail icons: same size, same green, baseline-aligned, sitting just
   after the name (the mail icon matches the corresponding-author line below). */
.eg-authors .orcid,
.eg-authors .mailto{display:inline-block;margin-left:5px;font-size:.92rem;
   color:var(--eg-dark);vertical-align:baseline;line-height:1;transition:.15s;}
.eg-authors .orcid{color:#a6ce39;}
.eg-authors .orcid:hover{color:#8bb02e;text-decoration:none;}
.eg-authors .mailto:hover{color:var(--eg);text-decoration:none;}
.eg-authors sup{margin-left:1px;}
.eg-affil{font-size:.84rem;color:var(--muted);margin:.5em 0 0;}
/* Corresponding-author line: same green envelope as the author icon. */
.eg-corr{font-size:.82rem;color:var(--muted);margin:.4em 0 0;display:flex;align-items:center;gap:7px;}
.eg-corr i{color:var(--eg-dark);font-size:.92rem;} .eg-corr a{font-weight:600;color:var(--eg-dark);}
/* Article records (Received/Accepted/Published/DOI): a quiet sans line — small,
   left-grouped. Spacing is via column-gap only (NO per-field padding, NO vertical
   dividers) so when the row WRAPS, every folded line starts FLUSH at the same left
   edge with no dangling separators. The uppercase labels separate the fields. */
.eg-metabar{font-family:var(--sans);display:flex;flex-wrap:wrap;align-items:baseline;
   column-gap:22px;row-gap:5px;margin-top:14px;padding-top:10px;
   border-top:1px solid var(--rule);color:var(--muted);}
.eg-mfield{display:inline-flex;align-items:baseline;gap:5px;}
.eg-mfield .ml{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#999;}
.eg-mfield, .eg-mfield a{font-size:.76rem;}
.eg-mfield a{font-weight:600;color:var(--eg-dark);}
.cc-link{display:inline-flex;align-items:center;gap:4px;color:var(--muted)!important;font-weight:600;}
.cc-link i{font-size:.95rem;} .cc-link:hover{color:var(--eg-dark)!important;}

/* ===== action bar ===== */
.eg-actionbar{background:#fff;border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30;}
/* Action bar aligns to the same left edge + reading-column width as the title and
   article. Capping the inner row to 820px pulls the repository buttons in next to
   the primary actions (no huge empty middle gap). */
.eg-actionbar .eg-wrap{max-width:1240px;}
/* The action bar is a toolbar, not body text — it may run a little wider than the
   720px reading column so all seven compact buttons fit comfortably on one row. */
.eg-actionbar .eg-bar{max-width:800px;display:flex;gap:8px;align-items:center;padding:11px 0;flex-wrap:wrap;}
/* Buttons are compact so all seven fit one row within the 720px bar: tighter
   horizontal padding and icon gap. Vertical padding/size unchanged. */
.eg-btn{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;padding:9px 11px;border-radius:8px;border:1px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;font-family:var(--sans);transition:.15s;white-space:nowrap;}
.eg-btn i{font-size:.9rem;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;}
.eg-btn:hover{text-decoration:none;border-color:var(--eg);background:#f4fbf2;}
.eg-btn.primary{background:var(--eg);border-color:var(--eg);color:#fff;}
.eg-btn.primary:hover{background:var(--eg-dark);color:#fff;}
.eg-btn.primary i{background:rgba(255,255,255,.22);color:#fff;}
.eg-btn .ic-pdf{background:#fde8e8;color:#d6453f;}
.eg-btn .ic-cite{background:#e8f0fd;color:#2f6fe0;}
.eg-btn .ic-share{background:#eaf7ee;color:var(--eg-dark);}
.eg-btn .ic-print{background:#f0eefb;color:#6b4fd0;}
/* repos (Journal DOI / Zenodo / Archive) sits right after the Print button with the
   normal bar gap. It previously used margin-left:auto, which shoved it to the far right
   edge of the 800px bar and left a large empty gap between Print and Journal DOI. */
.eg-actionbar .repos{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.repos a{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--ink);border:1px solid var(--rule);border-radius:8px;padding:7px 12px;}
.repos a i{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:.85rem;}
.repos .ic-doi{background:#eaf7ee;color:var(--eg-dark);}
.repos .ic-zen{background:#eaf3ff;color:#1565c0;}
.repos .ic-arc{background:#fff4e6;color:#e08600;}
.repos a:hover{border-color:var(--eg);text-decoration:none;}

/* ===== layout ===== */
.eg-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:54px;max-width:1240px;margin:0 auto;padding:36px 32px 90px;align-items:start;}
/* The article column reads in the serif body face (Source Serif 4); headings stay
   Spectral; rail/UI stays sans. Generous size + line-height for comfortable
   reading, as chosen (sample option B). */
/* Reading column width = the journal-wide figure/text standard. 720px is narrow
   enough that single-column (print-authored) figures fill the card without being
   upscaled, while body text keeps a comfortable line length. Change here to retune
   the whole journal's column + card width in one place. */
.eg-main{min-width:0;max-width:720px;font-family:var(--read);font-size:17.5px;line-height:1.75;}
/* "Cite this article" — a RAIL card under the Outline. Smaller font, but made
   noticeable with a green top accent. Raw-text citations (Evergreen + APA) so AI
   crawlers and humans both read/copy in one go. */
.eg-side .eg-cite-box{border-top:3px solid var(--eg);}
.eg-side .cite-block{margin-bottom:11px;}
.eg-side .cite-style{display:block;font-size:.58rem;font-weight:700;letter-spacing:.08em;
   text-transform:uppercase;color:var(--eg-dark);margin-bottom:4px;}
.eg-side .cite-text{font-family:var(--sans);font-size:.76rem;line-height:1.5;color:var(--ink);
   background:var(--bg-soft);border:1px solid var(--rule);border-radius:6px;padding:8px 10px;margin:0;}
.eg-side .cite-text i{font-style:italic;}
.eg-side .cite-copy{font-family:var(--sans);font-size:.68rem;font-weight:600;color:var(--eg-dark);
   background:#fff;border:1px solid var(--rule);border-radius:5px;padding:4px 11px;cursor:pointer;
   margin-top:5px;transition:.15s;}
.eg-side .cite-copy:hover{background:var(--eg);color:#fff;border-color:var(--eg);}
.eg-side .cite-exports{display:flex;gap:6px;margin-top:4px;}
.eg-side .cite-exports a{flex:1;text-align:center;font-size:.68rem;font-weight:600;color:var(--eg-dark);
   border:1px solid var(--rule);border-radius:5px;padding:5px 0;background:#fff;}
.eg-side .cite-exports a:hover{border-color:var(--eg);text-decoration:none;}

/* Foldable mobile table of contents (after the abstract) — hidden on desktop. */
.eg-toc-mobile{display:none;}

/* Right rail is UI chrome → sans throughout (outline, related, cards, buttons);
   only the metric numbers stay serif as a feature. */
/* The WHOLE rail pins as one unit and stays in view while reading. Because the
   stacked cards are taller than the screen, the rail scrolls INTERNALLY
   (overflow-y) — so every card, incl. Share/Export at the bottom, is reachable
   by scrolling within the rail. align-self:start keeps it from stretching to
   the grid row height. The action-bar Share/Cite buttons scroll this rail (not
   the window) to the target card. */
.eg-side{position:sticky;top:66px;align-self:start;max-height:calc(100vh - 82px);
  overflow-y:auto;display:flex;flex-direction:column;gap:15px;font-family:var(--sans);
  scrollbar-width:thin;padding-right:4px;}
.eg-side::-webkit-scrollbar{width:7px;}
.eg-side::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px;}
.eg-side::-webkit-scrollbar-thumb:hover{background:#cdd6cf;}
.eg-side a,.eg-side p,.eg-side div,.eg-side span{font-family:var(--sans);}
.eg-side .metric-row .num{font-family:var(--serif);}

/* Flash a rail card when the action-bar Share/Cite button targets it (the rail
   is sticky, so the card is already on screen — we pulse it twice, hard, so the
   eye lands on it). Bright green ring + green tint, impossible to miss. */
.eg-flash{animation:egFlash 1.6s ease;border-radius:12px;}
@keyframes egFlash{
  0%  {box-shadow:0 0 0 0 rgba(77,189,56,0);   background:#fff;}
  12% {box-shadow:0 0 0 5px rgba(77,189,56,.85);background:#eafbe6;}
  30% {box-shadow:0 0 0 0 rgba(77,189,56,0);   background:#fff;}
  45% {box-shadow:0 0 0 5px rgba(77,189,56,.85);background:#eafbe6;}
  100%{box-shadow:0 0 0 0 rgba(77,189,56,0);   background:#fff;}
}

/* ===== article body (full-text-html) ===== */
.eg-main h2{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--ink);margin:1.8em 0 .55em;line-height:1.25;}
.eg-main h2::after{content:"";display:block;width:42px;height:3px;background:var(--eg);margin-top:.32em;border-radius:2px;}
.eg-main h2:first-child{margin-top:0;}
.eg-main h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--ink);margin:1.35em 0 .35em;}
.eg-main h4{font-weight:700;font-size:1rem;margin:1.1em 0 .3em;}
.eg-main p{margin:.75em 0;text-align:justify;}
.eg-main p sup a,.eg-main a.cite{color:var(--eg-dark);font-weight:600;}
.eg-main a.xref{color:var(--eg-dark);font-weight:600;}
.eg-abstract::first-letter{font-family:var(--serif);font-weight:700;font-size:3.2rem;line-height:.8;float:left;color:var(--eg-dark);margin:.06em .12em 0 0;}
/* FIGURE — F5 card: white card w/ hairline border + soft shadow, image on top,
   caption on a divided footer strip (centered). Cards are a UNIFORM full-column
   width so stacked figures align their left/right edges (no ragged widths). The
   image inside is centered and sized to fill the card comfortably. */
/* FIGURE CARD — a FIXED-size box every figure slots into. The card spans the full
   reading column (display:block + width:100% → always as wide as the 720px column,
   never shrink-to-fit). Side padding is a fixed 18px (must equal the figcaption's
   negative side margin below, or the caption over/undershoots the edges and, with
   overflow:hidden, clips the figure). */
.eg-main figure{display:block;box-sizing:border-box;margin:2em auto;background:#fff;
   border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 5px rgba(0,0,0,.05);
   overflow:hidden;text-align:center;width:100%;max-width:100%;padding:18px;}
/* The image is the click target for the lightbox (cursor set in JS too). */
.eg-main figure img{cursor:zoom-in;}

/* FIGURE LIGHTBOX — click a figure to view it full-resolution over a dark scrim.
   Created once in JS and appended to <body>. Hidden until .open. */
.eg-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
   background:rgba(10,14,10,.92);padding:3vmin;cursor:zoom-out;}
.eg-lightbox.open{display:flex;}
.eg-lightbox img{max-width:96vw;max-height:94vh;width:auto;height:auto;border-radius:4px;
   box-shadow:0 8px 40px rgba(0,0,0,.5);background:#fff;}
.eg-lightbox-close{position:fixed;top:14px;right:22px;color:#fff;font-size:34px;line-height:1;
   font-family:var(--sans);cursor:pointer;opacity:.8;}
.eg-lightbox-close:hover{opacity:1;}
/* SLOT THE FIGURE INTO THE CARD. The card content box is a fixed SQUARE: the column
   width 720px − 18px padding × 2 = 684px per side. The figure fills that square by
   whichever side is longer:
     • width:100% makes it FILL the card width (684px) — small figures upscale, large
       ones downscale, so every landscape figure reaches the card's left/right frame;
     • max-height:684px then reins in a TALL (portrait) figure so it fits the square's
       height instead of overflowing — its width shrinks to keep the aspect ratio.
   height:auto keeps the ratio; the image is centred. */
.eg-main figure > img{width:100%;max-width:684px;max-height:684px;height:auto;
   border-radius:3px;display:block;margin:0 auto;}
/* Multi-panel: a centered wrapping row of panels. Each panel is a vertical stack
   (sub-image, then its (a)/(b) label centered BENEATH it). Two panels share the
   row (~48% each); more panels wrap. */
.eg-main .figure-panels{display:flex;flex-wrap:wrap;gap:16px 20px;justify-content:center;align-items:flex-start;}
/* Panels do NOT grow (flex-grow:0) — they hold a fixed basis (--panel-basis, set
   per figure by the generator from the panel count: 2-up→~48%, 3-up→~31%). Same
   size for every panel, so a partial last row (e.g. 2 under a row of 3) CENTERS at
   that same size via justify-content:center, instead of stretching wider than the
   row above. Falls back to 31% if the variable is absent. */
.eg-main .figure-panels{--panel-basis:31%;}
.eg-main .figure-panels .panel{margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
   flex:0 1 var(--panel-basis);max-width:100%;overflow:visible;text-align:center;}
.eg-main .figure-panels .panel img{width:100%;max-width:100%;height:auto;border-radius:3px;display:block;margin:0 auto;}
.eg-main .figure-panels .panel .panel-label{border:0;background:none;margin:6px 0 0;padding:0;
   font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink);text-align:center;}

/* TABLE — matching card: caption on a divided HEADER strip (top, centered, table
   captions go above by convention), table inside. */
.eg-main .table-wrap{margin:2em auto;background:#fff;border:1px solid var(--rule);border-radius:12px;
   box-shadow:0 1px 5px rgba(0,0,0,.05);overflow:hidden;width:fit-content;max-width:100%;}
.eg-main .table-scroll{overflow-x:auto;padding:6px 16px 16px;}

/* CAPTIONS — figure (footer strip) and table (header strip) share IDENTICAL
   typography: same font (sans), size, normal weight body in muted grey, with only
   the "Fig. N:"/"Table N:" prefix bold and dark (via <b>). On a soft-grey strip. */
.eg-main figcaption,
.eg-main .table-caption{font-family:var(--sans);font-size:.85rem;font-weight:400;
   color:var(--muted);text-align:center;background:var(--bg-soft);line-height:1.45;}
.eg-main figcaption b,
.eg-main .table-caption b{color:var(--ink);font-weight:700;}
/* The caption strip spans the full card width regardless of the figure's padding
   (which varies by orientation). A large negative inline margin reaches the card
   edges; the figure's overflow:hidden clips it flush. */
/* The caption strip breaks out to the card edges: its negative side margin equals
   the card's 18px side padding (NOT more — overshooting widens the figure and, with
   overflow:hidden, clips the figure's edge). */
.eg-main figcaption{border-top:1px solid var(--rule);margin:20px -18px 0;padding:12px 24px;}
.eg-main .table-caption{border-bottom:1px solid var(--rule);margin:0;padding:12px 24px;}
.eg-main table{border-collapse:collapse;width:100%;font-size:.88rem;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.eg-main th,.eg-main td{padding:7px 11px;text-align:left;vertical-align:top;}
/* Header cells — ALL header rows (a multi-row/merged header, not just the first
   row), styled consistently: soft-green tint, bold dark ink, centered (merged
   column headers read better centered), with light internal rules to delineate the
   header grid. Header text is dark ink (NOT green) so green stays the link colour. */
.eg-main th{background:#eef7ec;color:var(--ink);font-weight:700;text-align:center;
   border-bottom:1px solid var(--eg-dark);}
/* Internal header cells get a light column/row rule so a stacked header reads as a
   grid (e.g. "Concentration" over "3.75 | 7.5 | 15 …"). */
.eg-main th + th{border-left:1px solid var(--rule-soft);}

/* Display equations: a flex ROW of [.eq-body (the math) | .eq-num (pinned right,
   OUTSIDE the body)]. The number sits outside the equation body at the column's right
   edge — the classic journal layout — so it never overlaps the math and never scrolls
   with it. min-width:0 on the row lets the body shrink instead of forcing the row wider
   than the column. */
.eg-main .eq{margin:2em 0;display:flex;align-items:center;justify-content:center;gap:1em;position:relative;max-width:100%;min-width:0;}
/* The equation body is CLAMPED to the column and scrolls horizontally if the equation
   is wider (MathJax 3 has no auto line-breaking, so a long sum-of-squares expansion
   can't wrap — instead it stays on one line and this box scrolls). flex:1 1 0 + min-
   width:0 is the key: it stops the body from growing to its content's intrinsic width
   (which pushed the whole equation off the column and under the outline rail). The
   scrollbar appears ONLY on this box, and the eq-num stays put beside it. */
.eg-main .eq-body{flex:1 1 0;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;text-align:center;}
.eg-main .eq > math,.eg-main .eq .eq-img{margin:0 auto;}
/* A rasterized MathType equation image. The generator emits a per-equation HEIGHT
   (inline) scaled from the native pixels so a single-line equation matches the text
   line and a multi-line one (fraction) is proportionally taller. max-width keeps a
   very wide equation inside the column. */
.eg-main .eq-img{max-width:100%;vertical-align:middle;}
/* A text-only equation (authored as plain/Unicode-math text): render in the reading
   serif at body size, so it sits like the MathML/image equations in the centered
   row. Variables already carry their own italic from the source runs. */
.eg-main .eq-text{font-family:var(--read);font-size:1.05em;}
/* The equation number: a fixed-width flex item OUTSIDE the body, pinned to the right
   of the column. Not absolutely positioned (that overlapped wide equations), so it
   always sits clear of the math no matter how many lines the body wraps to. */
.eg-main .eq-num{flex:0 0 auto;min-width:2.5em;text-align:right;color:var(--muted);white-space:nowrap;}

/* references */
.eg-refs-head{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--ink);margin:2.3em 0 .2em;display:flex;align-items:baseline;gap:12px;}
.eg-refs-head::after{content:"";flex:1;height:1px;background:var(--rule);}
.eg-refs-head .count{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--muted);}
ol.eg-refs{font-size:.87rem;padding-left:0;margin:.6em 0 0;list-style:none;counter-reset:r;}
/* overflow-wrap keeps a long reference entry within the column; a raw URL query
   string (…?experience=b2c&qwer=…&utm_…) has no spaces to break on, so it would push
   the whole list past the column and under the rail — break-word/break-all on the link
   forces it to wrap at any character. */
ol.eg-refs li{position:relative;padding:8px 0 8px 2.3em;border-bottom:1px solid var(--rule-soft);line-height:1.5;counter-increment:r;overflow-wrap:break-word;word-break:break-word;}
ol.eg-refs li::before{content:counter(r)")";position:absolute;left:0;color:var(--eg-dark);font-weight:700;}
ol.eg-refs a{color:var(--eg-dark);word-break:break-all;}

/* ===== rail cards ===== */
.eg-card{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:14px 15px;transition:.18s;}
.eg-card:hover{box-shadow:0 4px 14px rgba(40,120,30,.08);}
.eg-card .eg-eyebrow{margin-bottom:.7em;}
/* The whole rail scrolls internally now (see .eg-side), so the Outline is a
   normal card — no own scrollbar, no sticky, no unstick hack. */
.eg-outline{}
.eg-outline::-webkit-scrollbar{width:7px;}
.eg-outline::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px;}
.eg-outline::-webkit-scrollbar-thumb:hover{background:#cdd6cf;}
.eg-outline a{display:block;color:var(--muted);padding:4px 0 4px 11px;border-left:2px solid var(--rule);font-size:.84rem;line-height:1.3;}
.eg-outline a:hover{color:var(--eg-dark);text-decoration:none;border-left-color:var(--eg);}
.eg-outline a.active{color:var(--eg-dark);font-weight:600;border-left-color:var(--eg);}
.eg-outline a.lvl2{padding-left:22px;font-size:.8rem;}
.eg-outline a.lvl3{padding-left:33px;font-size:.78rem;}
.eg-card.metrics{border-top:3px solid var(--eg);}
.metric-row{display:flex;justify-content:space-between;text-align:center;}
.metric-row .num{font-family:var(--serif);font-weight:700;font-size:1.45rem;color:var(--eg-dark);line-height:1;}
.metric-row .lbl{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.eg-related a{display:block;padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:.83rem;color:var(--ink);line-height:1.35;}
.eg-related a:last-child{border-bottom:none;} .eg-related a:hover{color:var(--eg-dark);text-decoration:none;}
.eg-related .auth{display:block;color:var(--muted);font-size:.75rem;margin-top:2px;}
/* Share Article — labelled brand-colored buttons, 2-col grid, fill on hover. */
.eg-share .share-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.eg-share .share-btn{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;
   color:var(--c);background:#fff;border:1px solid var(--rule);border-radius:7px;padding:8px 10px;transition:.15s;}
.eg-share .share-btn i{font-size:.9rem;width:16px;text-align:center;}
.eg-share .share-btn:hover{background:var(--c);color:#fff;border-color:var(--c);text-decoration:none;}
.eg-share .share-btn:hover i{color:#fff;}

/* Export Citation — clean labelled service links, 2-col grid. */
.eg-export .export-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.eg-export .export-grid a{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;
   color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:7px;padding:8px 10px;transition:.15s;}
.eg-export .export-grid a i{font-size:.85rem;width:16px;text-align:center;color:var(--eg-dark);}
.eg-export .export-grid a:hover{border-color:var(--eg);color:var(--eg-dark);text-decoration:none;background:#f4fbf2;}
.eg-card.ad{border-left:3px solid var(--eg);background:var(--bg-soft);}
.eg-card.ad .eg-eyebrow{color:var(--muted);}
.eg-card.ad h4{font-family:var(--serif);font-size:1.05rem;color:var(--ink);margin:.1em 0 .4em;}
.eg-card.ad p{font-size:.82rem;color:var(--muted);margin:.2em 0 .7em;}
.eg-card.ad .eg-btn.primary{width:100%;justify-content:center;}

/* ===== floating ===== */
.eg-fab{position:fixed;right:26px;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50;box-shadow:0 5px 18px rgba(40,120,30,.34);transition:.18s;}
.eg-fab:hover{transform:translateY(-2px);text-decoration:none;}
.eg-fab.top{bottom:24px;background:#fff;color:var(--eg-dark);border:1px solid var(--rule);font-size:19px;}
.ai-fab{position:fixed;right:24px;bottom:84px;z-index:50;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--eg),var(--eg-dark));color:#fff;font-weight:700;font-size:.92rem;padding:13px 20px 13px 16px;border-radius:999px;cursor:pointer;box-shadow:0 6px 20px rgba(40,120,30,.42);transition:.18s;animation:aipulse 2.4s ease-in-out 1s 3;}
.ai-fab:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 8px 26px rgba(40,120,30,.5);}
.ai-fab i{font-size:1.05rem;}
@keyframes aipulse{0%,100%{box-shadow:0 6px 20px rgba(40,120,30,.42);}50%{box-shadow:0 6px 20px rgba(40,120,30,.42),0 0 0 10px rgba(77,189,56,.16);}}
.ai-tip{position:fixed;right:24px;bottom:144px;z-index:49;background:#1a1a1a;color:#fff;font-size:.82rem;padding:9px 13px;border-radius:9px;max-width:230px;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:tipin .4s ease 1.4s both,tipout .5s ease 7s both;}
.ai-tip::after{content:"";position:absolute;right:26px;bottom:-7px;border:7px solid transparent;border-top-color:#1a1a1a;border-bottom:0;}
@keyframes tipin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes tipout{to{opacity:0;visibility:hidden;}}
.ai-panel{position:fixed;right:26px;bottom:152px;width:360px;max-width:calc(100vw - 52px);background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 12px 40px rgba(30,90,20,.24);z-index:51;overflow:hidden;display:none;}
.ai-panel.open{display:block;}
.ai-panel .ph{background:linear-gradient(135deg,var(--eg),var(--eg-deep));color:#fff;padding:13px 16px;font-weight:700;display:flex;align-items:center;gap:8px;}
.ai-panel .ph .x{margin-left:auto;cursor:pointer;opacity:.85;}
.ai-panel .pb{padding:14px 16px;font-size:.86rem;color:var(--muted);}
.ai-panel .pb .ex{display:block;background:var(--bg-soft);border:1px solid var(--rule);border-radius:7px;padding:8px 11px;margin:6px 0;color:var(--ink);cursor:pointer;}
.ai-panel .pb .ex:hover{border-color:var(--eg);}
.ai-panel .pf{display:flex;border-top:1px solid var(--rule);}
.ai-panel .pf input{flex:1;border:none;padding:12px 14px;font:inherit;font-size:.88rem;outline:none;}
.ai-panel .pf button{border:none;background:var(--eg);color:#fff;padding:0 16px;cursor:pointer;font-size:1.1rem;}

/* ===== footer ===== */
.eg-footer{background:var(--eg-deep);color:rgba(255,255,255,.9);padding:26px 0;margin-top:30px;font-size:.84rem;}
.eg-footer .eg-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;} .eg-footer a{color:#fff;}

/* ===== mobile ===== */
@media(max-width:980px){
  .eg-layout{grid-template-columns:1fr;gap:30px;}
  .eg-side{position:static;order:2;} .eg-main{order:1;max-width:none;}
  .eg-banner nav{display:none;} .eg-actionbar .repos{margin-left:0;}
  .ai-panel{right:12px;left:12px;width:auto;bottom:84px;}

  /* The rail outline is replaced by the foldable TOC after the abstract; show it
     and hide the (now-redundant) rail outline card. */
  .eg-side .eg-outline{display:none;}
  .eg-toc-mobile{display:block;margin:1.6em 0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;}
  .eg-toc-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
     background:linear-gradient(135deg,var(--eg),var(--eg-dark));color:#fff;
     font-family:var(--sans);font-weight:700;font-size:1rem;padding:13px 18px;}
  .eg-toc-mobile summary::-webkit-details-marker{display:none;}
  .eg-toc-mobile summary .chev{width:9px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;
     transform:rotate(45deg);transition:transform .2s;margin-right:3px;}
  .eg-toc-mobile[open] summary .chev{transform:rotate(-135deg);}
  .eg-toc-list{font-family:var(--sans);padding:8px 4px;background:#fff;}
  .eg-toc-list a{display:block;color:var(--ink);padding:8px 16px;font-size:.92rem;line-height:1.35;
     border-bottom:1px solid var(--rule-soft);}
  .eg-toc-list a:last-child{border-bottom:none;}
  .eg-toc-list a:hover,.eg-toc-list a:active{color:var(--eg-dark);text-decoration:none;background:var(--bg-soft);}
  .eg-toc-list a.lvl2{padding-left:30px;color:var(--muted);}
  .eg-toc-list a.lvl3{padding-left:44px;color:var(--muted);font-size:.88rem;}
}

/* MOBILE floating buttons: the labelled "Ask AI" pill overlaps content/buttons on
   narrow screens, so collapse it to a compact circular icon and stack it ABOVE the
   back-to-top button (both bottom-right, clear of the content). Drop the tooltip. */
@media(max-width:640px){
  .ai-tip{display:none;}
  .ai-fab{bottom:80px;right:16px;width:48px;height:48px;padding:0;justify-content:center;
     border-radius:50%;gap:0;font-size:0;animation:none;}
  .ai-fab i{font-size:1.15rem;}
  .eg-fab.top{bottom:18px;right:16px;width:44px;height:44px;}
}