/* ------------------------------------------------------------------ *
 * ChIP pages (chip2026.php, chip2026_example.php).
 *
 * Everything is scoped to .chip-page so the larger type used on these
 * pages cannot leak into the shared header, navigation or footer that
 * header.php / footer.php bring in.
 * ------------------------------------------------------------------ */

.chip-page {
    font-size: 19px;
    line-height: 1.72;
    color: #3c4348;
    max-width: 1000px;
    margin: 0 auto;
}
.chip-page p { margin: 0 0 20px; }
.chip-page strong { color: #2c3e50; font-weight: 700; }
.chip-page a { color: #6f9e21; }

/* ---- hero ---- */
.chip-hero {
    background: linear-gradient(135deg, #99cc33 0%, #7aa328 100%);
    color: #fff;
    border-radius: 15px;
    padding: 44px 46px 40px;
    margin: 0 0 34px;
    box-shadow: 0 15px 40px rgba(153, 204, 51, 0.3);
}
.chip-hero .eyebrow {
    font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    opacity: .92; margin: 0 0 14px;
}
.chip-hero h1 { font-size: 42px; line-height: 1.18; font-weight: 700; margin: 0 0 20px; color: #fff; }
/* closing call-to-action panels use h2 so the page keeps a single h1 */
.chip-hero h2 { color: #fff; }
.chip-hero p  { font-size: 21px; line-height: 1.55; margin: 0 0 8px; max-width: 830px; }
.chip-hero strong { color: #fff; }
.chip-hero a  { color: #fff; text-decoration: underline; }

.chip-actions { margin-top: 26px; }
.chip-actions a {
    display: inline-block; margin: 8px 12px 0 0; padding: 14px 28px;
    background: #fff; color: #6f9e21 !important; border-radius: 25px;
    text-decoration: none; font-weight: 700; font-size: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.12); transition: all .3s ease;
}
.chip-actions a:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.chip-actions a.ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.85); box-shadow: none; }

/* ---- headings ---- */
.chip-page h2 {
    font-size: 32px; line-height: 1.25; color: #2c3e50; font-weight: 600;
    margin: 48px 0 18px; text-align: left;
}
.chip-page h3 { font-size: 23px; color: #2c3e50; font-weight: 600; margin: 30px 0 10px; }

.chip-page ul.plain { margin: 0 0 22px; padding-left: 26px; }
.chip-page ul.plain li { margin-bottom: 12px; }

/* ---- cards ---- */
/* modelled on .feature-card but block-level and left-aligned, because
   .feature-card becomes a centred column under 768px */
.chip-card {
    background: #fff; border-radius: 15px; padding: 28px 32px; margin: 26px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); text-align: left;
}
.chip-note {
    background: #f6faf0; border-left: 5px solid #99cc33; border-radius: 0 12px 12px 0;
    padding: 24px 28px; margin: 28px 0;
}
.chip-note h3 { margin-top: 0; }
.chip-note p:last-child, .chip-card p:last-child { margin-bottom: 0; }

/* a full-width link out to the companion page */
.chip-onward {
    display: block; background: #f8faf4; border: 1px solid #e7eede; border-radius: 14px;
    padding: 24px 28px; margin: 30px 0; text-decoration: none;
    transition: all .3s ease;
}
.chip-onward:hover { border-color: #99cc33; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(-2px); }
.chip-onward b { display: block; font-size: 21px; color: #2c3e50; margin-bottom: 6px; }
.chip-onward span { display: block; font-size: 17px; line-height: 1.55; color: #6b757a; }
.chip-onward em { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: #6f9e21; }

/* ---- stat tiles ---- */
.chip-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px; margin: 30px 0 26px;
}
.chip-tile {
    background: #f8faf4; border: 1px solid #e7eede; border-radius: 12px; padding: 20px 22px;
}
.chip-tile b { display: block; font-size: 34px; line-height: 1.1; color: #6f9e21; font-weight: 700; }
.chip-tile span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: #6b757a; }

/* ---- figures ---- */
.chip-page figure {
    margin: 30px 0; padding: 22px 22px 18px;
    background: #fbfcf8; border: 1px solid #e9eee2; border-radius: 14px;
}
.chip-page figure > svg,
.chip-page figure > img { display: block; width: 100%; height: auto; border-radius: 8px; }
.chip-page figcaption { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: #6b757a; }
.chip-page figcaption b { color: #2c3e50; }

.chip-legend { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 8px; font-size: 15px; color: #6b757a; }
.chip-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* ---- chart internals ---- */
.chip-chart .grid { stroke: #e0e6d8; stroke-width: 1; }
.chip-chart .tick { font-size: 13px; fill: #8a949a; font-family: inherit; }
.chip-chart .tick-y { text-anchor: end; }
.chip-chart .tick-x { text-anchor: middle; }
.chip-chart .axis-title { font-size: 13px; fill: #8a949a; font-family: inherit; text-anchor: middle; }
.chip-chart .direct-label { font-size: 15px; font-weight: 700; fill: #4a5459; font-family: inherit; }
.chip-chart circle { cursor: pointer; }

#chip-tip {
    position: fixed; z-index: 2000; pointer-events: none; display: none;
    background: #2c3e50; color: #fff; font-size: 14px; line-height: 1.45;
    padding: 8px 12px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* ---- diagram internals ---- */
.dgm .box  { fill: #ffffff; stroke: #cfd8c8; stroke-width: 1.5; }
.dgm .boxk { fill: #f0f6e6; stroke: #7aa328; stroke-width: 1.5; }
.dgm .arrow{ stroke: #a9b4a0; stroke-width: 2; fill: none; }
.dgm .n    { font-size: 12px; font-weight: 700; fill: #6f9e21; font-family: inherit; letter-spacing: .8px; }
.dgm .t    { font-size: 14.5px; font-weight: 700; fill: #2c3e50; font-family: inherit; }
.dgm .s    { font-size: 12.5px; fill: #6b757a; font-family: inherit; }
.dgm .mono { font-size: 13px; fill: #2c3e50; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---- ledger ---- */
.chip-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0; }
.chip-ledger > div { border: 1px solid #e6eaec; border-radius: 12px; padding: 22px 24px; background: #fff; }
.chip-ledger h3 { margin: 0 0 12px; font-size: 16px; letter-spacing: .8px; text-transform: uppercase; }
.chip-ledger ul { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.6; }
.chip-ledger li { margin-bottom: 10px; }
.chip-ledger .yes h3 { color: #6f9e21; }
.chip-ledger .no  h3 { color: #a33a2a; }

/* ---- tables ---- */
.chip-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.chip-tbl { width: 100%; border-collapse: collapse; font-size: 17px; margin: 6px 0 26px; }
table.chip-tbl th, table.chip-tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e6eaec; }
table.chip-tbl th { font-size: 13.5px; text-transform: uppercase; letter-spacing: .6px; color: #8a949a; font-weight: 700; }
table.chip-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.chip-tbl caption { text-align: left; font-size: 15px; color: #8a949a; padding: 0 0 12px; }

.chip-refs { font-size: 16px; line-height: 1.6; color: #7b858a; margin-top: 40px; }

/* ------------------------------------------------------------------ *
 * Worked-example designs: one card per molecule, carrying its own
 * structure, properties, SMILES and the full reaction route beneath.
 * The structure and reaction drawings are RDKit SVG, inline.
 * ------------------------------------------------------------------ */
.chip-page .fig { margin: 34px 0; }

.case {
    background: #fff; border: 1px solid #e6eaec; border-radius: 14px;
    padding: 24px 26px; margin: 0 0 22px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.casehead {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    border-bottom: 1px solid #eef1f2; padding-bottom: 14px; margin-bottom: 18px;
}
.caserank { font-size: 20px; font-weight: 700; color: #2c3e50; }
.casepic  { font-size: 28px; font-weight: 700; color: #6f9e21; margin-left: auto; line-height: 1; }
.caseunit { font-size: 14px; color: #8a949a; }

.casetop { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.casestruct {
    flex: 0 0 280px; background: #fbfcf8; border: 1px solid #e9eee2;
    border-radius: 10px; padding: 6px;
}
.casestruct svg { display: block; width: 100%; height: auto; }
.caseinfo { flex: 1 1 300px; min-width: 260px; }
.caseprops { font-size: 15.5px; color: #6b757a; margin: 0 0 12px !important; }
.casesmi { margin: 0 0 12px !important; }
/* SMILES are never abbreviated: the string wraps in full rather than
   being clipped or ellipsised. */
.casesmi code {
    display: block; background: #f4f6f7; color: #2c3e50;
    padding: 10px 12px; border-radius: 6px;
    font-size: 13px; line-height: 1.55; word-break: break-all; overflow-wrap: anywhere;
}

.caseroute { margin-top: 22px; }
.rstep { border-top: 1px solid #eef1f2; padding-top: 18px; margin-top: 18px; }
.rhead { font-size: 15.5px; color: #6b757a; margin-bottom: 10px; }
.rhead code {
    background: #f0f6e6; color: #4a7c1f; padding: 2px 7px;
    border-radius: 4px; font-size: 14px;
}
.rstep > svg { display: block; width: 100%; height: auto; }

.figcap { margin-top: 16px; font-size: 15.5px; line-height: 1.55; color: #6b757a; }
.figcap strong { color: #2c3e50; }

@media (max-width: 768px) {
    .chip-page { font-size: 17.5px; }
    .chip-hero { padding: 30px 24px 28px; }
    .chip-hero h1 { font-size: 30px; }
    .chip-hero p { font-size: 18.5px; }
    .chip-page h2 { font-size: 26px; margin-top: 38px; }
    .chip-page h3 { font-size: 20px; }
    .chip-card { padding: 22px 20px; }
    .chip-ledger { grid-template-columns: 1fr; }
    .chip-tile b { font-size: 28px; }
    .chip-page figure { padding: 16px 12px 14px; }

    /* Diagrams are wide by nature; let them scroll rather than shrink to
       unreadable type. */
    .chip-page figure.wide { overflow-x: auto; }
    .chip-page figure.wide::before {
        content: "Swipe to see the whole diagram \2192";
        display: block; margin-bottom: 10px; font-size: 13px; color: #98a2aa;
    }
    .chip-page figure.wide > svg,
    .chip-page figure.wide > img { width: 680px; max-width: none; }

    .case { padding: 18px 16px; }
    .casehead { padding-bottom: 12px; margin-bottom: 14px; }
    .caserank { font-size: 18px; }
    .casepic { font-size: 24px; }
    .casestruct { flex: 1 1 100%; }
    /* Reaction schemes are drawn at 830px wide; scrolling keeps the atom
       labels legible instead of shrinking them to nothing. */
    .rstep { overflow-x: auto; }
    .rstep > svg { width: 700px; max-width: none; }
    .rstep::after {
        content: "Swipe to see the whole scheme \2192";
        display: block; margin-top: 6px; font-size: 12.5px; color: #98a2aa;
    }
}

/* ------------------------------------------------------------------ *
 * Worked examples: two campaigns with different objectives, offered
 * side by side. The colours are deliberately different so the two are
 * read as alternatives rather than as a primary and a secondary.
 * ------------------------------------------------------------------ */
.chip-examples {
    background: #f8faf4; border: 1px solid #e7eede; border-radius: 14px;
    padding: 26px 30px 28px; margin: 30px 0;
}
.chip-examples h3 { margin: 0 0 6px; font-size: 22px; }
.chip-examples > p { margin: 0 0 18px; font-size: 17px; color: #6b757a; }
.chip-ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chip-ex {
    display: block; text-decoration: none; border-radius: 12px;
    padding: 20px 22px; color: #fff !important; transition: all .3s ease;
}
.chip-ex:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.chip-ex b { display: block; font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.chip-ex span { display: block; font-size: 15.5px; line-height: 1.5; opacity: .95; }
.chip-ex em { display: block; margin-top: 12px; font-style: normal; font-weight: 700; font-size: 15px; }
.chip-ex.rf    { background: linear-gradient(135deg, #e0921e 0%, #b8620d 100%); }
.chip-ex.metoo { background: linear-gradient(135deg, #2f8fc0 0%, #1f6f9c 100%); }
@media (max-width: 768px) {
    .chip-examples { padding: 20px 18px 22px; }
    .chip-ex-grid { grid-template-columns: 1fr; }
}

/* The two worked examples get their own colours so they read as alternatives,
   and so they do not disappear into the green hero they sit on. Amber is the
   random-forest potency example, blue the me too. The same pairing is used on
   the .chip-ex cards, so a button and its card always match. */
.chip-actions a.ex-rf,
.chip-actions a.ex-metoo {
    color: #fff !important;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.chip-actions a.ex-rf    { background: linear-gradient(135deg, #e0921e 0%, #b8620d 100%); }
.chip-actions a.ex-metoo { background: linear-gradient(135deg, #2f8fc0 0%, #17608b 100%); }
.chip-actions a.ex-rf:hover,
.chip-actions a.ex-metoo:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.3); }

/* --- MCC equation, pfp.php --- */
.chip-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 26px 0 30px;
    padding: 22px 24px;
    background: #f7faf3;
    border: 1px solid #e4ecd9;
    border-radius: 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    color: #2c3338;
    overflow-x: auto;
}
.chip-formula .chip-lhs { font-style: italic; white-space: nowrap; }
.chip-formula .chip-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.5;
}
.chip-formula .chip-frac-top { padding: 0 12px 5px; white-space: nowrap; }
.chip-formula .chip-frac-bot {
    padding: 6px 12px 0;
    border-top: 1.5px solid #6b7a5a;
    white-space: nowrap;
}
.chip-formula .chip-frac-bot > span {
    border-top: 1.5px solid #2c3338;
    padding: 1px 2px 0 3px;
    margin-left: 1px;
}
@media (max-width: 700px) {
    .chip-formula { font-size: 15px; padding: 18px 14px; justify-content: flex-start; }
}

/* white paper button: blue, so it reads as the primary read on a green panel */
.chip-actions a.paper {
    background: linear-gradient(135deg, #2f7fd0 0%, #1b5794 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 6px 18px rgba(27,87,148,.35);
}
.chip-actions a.paper:hover { box-shadow: 0 10px 26px rgba(27,87,148,.45); }