/* ==========================================================================
   rev.css — reading components for long-form reverse-engineering posts.

   Everything here is driven by the apollo theme's own custom properties
   (--bg-0/1/2, --text-0/1/2, --border-color, --primary-color) so each
   component follows the light/dark toggle without a second palette.

   Components:
     .rc-split     side-by-side panes      (obfuscated -> clean, asm | decomp)
     .rc-tabs      tabbed panes            (java / smali / arm64)
     .rc-note      block callouts          (note tip warn bug detour key)
     .rc-sn        inline sidenotes        (numbered, popover)
     .rc-cite      inline reference chip   (hover card, from [extra.refs])
     .rc-xref      inline internal pointer (hover card, prefetched or live)
     .rc-card      block link card
     .rc-fig       numbered figure + lightbox
     .rc-term      terminal transcript
     .rc-series    series rail
     .rc-refs      reference list
   ========================================================================== */

:root {
    --rc-mono: var(--code-font), "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    --rc-accent: var(--primary-color, #ef5350);
    --rc-blue: #38bdf8;
    --rc-purple: #a78bfa;
    --rc-green: #3fb950;
    --rc-amber: #f0a836;
    --rc-red: #ef5350;

    --rc-gap: 0.75rem;
    --rc-radius: 8px;
    --rc-label-size: 0.7rem;
    /* How far a `wide` element bleeds past the reading column. It grows to
       the LEFT only: the right margin holds the sticky table of contents, and
       a symmetric breakout runs straight into it. */
    --rc-bleed: 0px;
}

/* Microlabel — the shared "chrome" typography for every component header. */
.rc-label {
    font-family: var(--rc-mono);
    font-size: var(--rc-label-size);
    letter-spacing: 0.06em;
    color: var(--text-1);
    text-transform: lowercase;
}

/* Break out of the reading column. Opt-in via `wide=true`. */
.rc-wide {
    width: calc(100% + var(--rc-bleed));
    margin-left: calc(-1 * var(--rc-bleed));
    max-width: none;
}
@media (min-width: 1150px) { :root { --rc-bleed: 6rem; } }
@media (min-width: 1400px) { :root { --rc-bleed: 13rem; } }
@media (min-width: 1700px) { :root { --rc-bleed: 20rem; } }

/* ==========================================================================
   1. SPLIT — side-by-side panes
   ==========================================================================
   Layout is pure CSS: the two pane labels are the container's ::before and
   ::after, explicitly placed in grid row 1, and the body's first two children
   land in row 2. No JS needed to render; JS only adds scroll-sync and
   highlight pairing on top.
   -------------------------------------------------------------------------- */

.rc-split {
    margin-block: 1.9rem;
    padding: 0;
}

.rc-split-panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0 var(--rc-gap);
    align-items: stretch;
}

/* pane labels */
.rc-split-panes::before,
.rc-split-panes::after {
    font-family: var(--rc-mono);
    font-size: var(--rc-label-size);
    letter-spacing: 0.06em;
    color: var(--text-1);
    padding: 0 0 0.4rem 0.15rem;
    align-self: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-split-panes::before { content: var(--la, ""); grid-area: 1 / 1; }
.rc-split-panes::after  { content: var(--lb, ""); grid-area: 1 / 2; color: var(--rc-accent); }

.rc-split-panes > :nth-child(1) { grid-area: 2 / 1; margin: 0; min-width: 0; }
.rc-split-panes > :nth-child(2) { grid-area: 2 / 2; margin: 0; min-width: 0; }

/* no labels supplied: collapse the header row entirely */
.rc-split.no-labels .rc-split-panes { grid-template-rows: minmax(0, 1fr); }
.rc-split.no-labels .rc-split-panes::before,
.rc-split.no-labels .rc-split-panes::after { display: none; }
.rc-split.no-labels .rc-split-panes > :nth-child(1) { grid-area: 1 / 1; }
.rc-split.no-labels .rc-split-panes > :nth-child(2) { grid-area: 1 / 2; }

/* The theme reserves 60px for the line-number column, which is a lot of a
   half-width pane. */
.rc-split-panes pre code tbody td:first-child,
.rc-tabs pre code tbody td:first-child {
    min-width: 2.4rem;
    padding-right: 0.6rem;
    color: var(--text-2);
}

/* panes themselves */
.rc-split-panes > pre {
    height: 100%;
    font-size: 0.83rem;
    overflow: auto;
}
.rc-split[data-max] .rc-split-panes > pre { max-height: var(--rc-max, 30rem); }

/* images / tables as a pane */
.rc-split-panes > p { margin: 0; }
.rc-split-panes img {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    display: block;
}

/* the theme's per-block language badge fights the pane label — drop it here */
.rc-split-panes .code-label,
.rc-tabs .code-label,
.rc-term .code-label { display: none !important; }

.rc-split figcaption,
.rc-tabs-cap {
    margin-top: 0.6rem;
    font-size: 0.84rem;
    color: var(--text-1);
    line-height: 1.5;
}
.rc-split figcaption::before,
.rc-tabs-cap::before { content: "// "; color: var(--rc-accent); font-family: var(--rc-mono); }

/* stack on narrow screens, labels stay glued to their pane */
@media (max-width: 780px) {
    .rc-split-panes {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .rc-split-panes::before { grid-area: 1 / 1; }
    .rc-split-panes > :nth-child(1) { grid-area: 2 / 1; }
    .rc-split-panes::after  { grid-area: 3 / 1; padding-top: 1rem; }
    .rc-split-panes > :nth-child(2) { grid-area: 4 / 1; }
    .rc-split.no-labels .rc-split-panes { grid-template-rows: auto auto; }
    .rc-split.no-labels .rc-split-panes > :nth-child(2) { grid-area: 2 / 1; }
    .rc-split[data-max] .rc-split-panes > pre { max-height: 22rem; }
}

/* --- paired highlights ---------------------------------------------------
   `hl_lines` in the fence produces <mark>. rev.js groups contiguous marks and
   indexes them per pane; hovering group N lights up group N on both sides. */
.rc-split-panes mark {
    background-color: color-mix(in srgb, var(--rc-accent) 15%, transparent) !important;
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rc-accent) 55%, transparent);
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.rc-split-panes mark.rc-hot {
    background-color: color-mix(in srgb, var(--rc-accent) 30%, transparent) !important;
    box-shadow: inset 2px 0 0 var(--rc-accent);
}

/* ==========================================================================
   2. TABS
   ========================================================================== */

.rc-tabs { margin-block: 1.9rem; }

.rc-tabs-bar {
    display: flex;
    gap: 0.2rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.rc-tabs-bar::-webkit-scrollbar { display: none; }

.rc-tab {
    font-family: var(--rc-mono);
    font-size: var(--rc-label-size);
    letter-spacing: 0.05em;
    color: var(--text-1);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.7rem;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.14s ease, border-color 0.14s ease;
}
.rc-tab:hover { color: var(--text-0); }
.rc-tab[aria-selected="true"] {
    color: var(--rc-accent);
    border-bottom-color: var(--rc-accent);
}
.rc-tabs-panel > *:first-child { margin-top: 0; }
.rc-tabs-panel > *:last-child { margin-bottom: 0; }
.rc-tabs-panel[hidden] { display: none; }
/* pre-JS: separators are only structural */
.rc-tabs-body > hr { display: none; }

/* ==========================================================================
   3. NOTE — block callouts
   ==========================================================================
   A left rule in the kind's colour, a mono glyph badge, and body text. The
   glyphs are terminal-flavoured on purpose: they match the homepage's
   `$` / `//` chrome rather than importing an icon set.
   -------------------------------------------------------------------------- */

.rc-note {
    --c: var(--rc-blue);
    --g: "//";
    position: relative;
    margin-block: 1.6rem;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    border: 1px solid var(--border-color);
    border-left: 2px solid var(--c);
    border-radius: 0 var(--rc-radius) var(--rc-radius) 0;
    background: color-mix(in srgb, var(--c) 4.5%, var(--bg-0));
    font-size: 0.94rem;
    line-height: 1.6;
}
.rc-note::before {
    content: var(--g);
    position: absolute;
    left: 0.85rem;
    top: 0.82rem;
    font-family: var(--rc-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c);
    line-height: 1.6;
}
.rc-note > *:first-child { margin-top: 0; }
.rc-note > *:last-child { margin-bottom: 0; }
.rc-note pre { font-size: 0.8rem; }

.rc-note-title {
    display: block;
    font-family: var(--rc-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--c);
    margin-bottom: 0.35rem;
}

.rc-note[data-kind="note"]   { --c: var(--rc-blue);   --g: "//"; }
.rc-note[data-kind="tip"]    { --c: var(--rc-green);  --g: "+";  }
.rc-note[data-kind="warn"]   { --c: var(--rc-amber);  --g: "!";  }
.rc-note[data-kind="bug"]    { --c: var(--rc-red);    --g: "x";  }
.rc-note[data-kind="detour"] { --c: var(--rc-purple); --g: ">>"; }
.rc-note[data-kind="key"]    { --c: var(--rc-accent); --g: "*";  }

/* `key` is the takeaway box — give it a bit more presence */
.rc-note[data-kind="key"] {
    background: color-mix(in srgb, var(--rc-accent) 8%, var(--bg-0));
    border-left-width: 3px;
}

/* collapsible variant (`fold=true`, and the default for `detour`) */
details.rc-note { padding-left: 2.6rem; }
details.rc-note > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--rc-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--c);
    padding: 0;
    background: none !important;
}
details.rc-note > summary::-webkit-details-marker { display: none; }
details.rc-note > summary:hover { color: var(--c); background: none !important; }
details.rc-note > summary::after {
    content: " [+]";
    font-family: var(--rc-mono);
    color: var(--text-2);
}
details.rc-note[open] > summary::after { content: " [-]"; }
details.rc-note[open] > summary { margin-bottom: 0.5rem; }

/* ==========================================================================
   4. SIDENOTE — inline numbered note with a popover
   ========================================================================== */

/* Numbering works without JS; rev.js also stamps .rc-sn-scope / .rc-fig-scope
   on the article for themes that wrap the body differently. */
main article .body { counter-reset: rc-sn rc-fig; }
.rc-sn-scope { counter-reset: rc-sn; }

.rc-sn {
    position: relative;
    counter-increment: rc-sn;
}
.rc-sn-mark {
    font-family: var(--rc-mono);
    font-size: 0.68em;
    font-weight: 600;
    line-height: 1;
    vertical-align: super;
    color: var(--rc-accent);
    cursor: pointer;
    padding: 0 0.12em;
    border-radius: 3px;
    user-select: none;
}
.rc-sn-mark::before { content: "[" counter(rc-sn) "]"; }
.rc-sn-mark:hover,
.rc-sn[data-open] .rc-sn-mark {
    background: color-mix(in srgb, var(--rc-accent) 18%, transparent);
}

.rc-sn-body {
    position: absolute;
    z-index: 60;
    width: min(22rem, 78vw);
    padding: 0.7rem 0.85rem;
    background: var(--bg-1);
    border: 1px solid var(--border-color);
    border-left: 2px solid var(--rc-accent);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.55);
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-0);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.rc-sn-body > *:first-child { margin-top: 0; }
.rc-sn-body > *:last-child { margin-bottom: 0; }
.rc-sn-body::before {
    content: "[" counter(rc-sn) "]";
    font-family: var(--rc-mono);
    font-size: 0.7rem;
    color: var(--rc-accent);
    margin-right: 0.4em;
}
.rc-sn[data-open] .rc-sn-body {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ==========================================================================
   5. CITE / XREF — inline rich references
   ==========================================================================
   Both render as a compact chip that reads as part of the sentence, and both
   reveal a hover card with the target's real metadata. `cite` points out of
   the site, `xref` points within it (another post, or a section of this one).
   -------------------------------------------------------------------------- */

.rc-chip {
    position: relative;
    display: inline;
    white-space: nowrap;
}

.rc-chip > a {
    font-family: var(--rc-mono);
    font-size: 0.82em;
    text-decoration: none;
    padding: 0.06em 0.36em 0.1em;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-1);
    color: var(--text-1);
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.rc-chip > a::before {
    font-size: 0.9em;
    margin-right: 0.32em;
    opacity: 0.75;
}
.rc-cite > a::before { content: "\2197"; }            /* ↗ leaves the site   */
.rc-xref > a::before { content: "\00A7"; }            /* § same page         */
.rc-xref[data-rel="post"] > a::before { content: "\21B3"; }  /* ↳ another post */
.rc-xref[data-rel="back"] > a::before { content: "\2190"; }  /* ← earlier      */

.rc-chip > a:hover {
    color: var(--rc-accent);
    border-color: color-mix(in srgb, var(--rc-accent) 55%, var(--border-color));
    background: color-mix(in srgb, var(--rc-accent) 9%, var(--bg-1));
}

/* A registry lookup that could not run. Loud on purpose. */
.rc-chip.rc-unresolved > a {
    color: var(--rc-amber);
    border-style: dashed;
    border-color: color-mix(in srgb, var(--rc-amber) 60%, var(--border-color));
    background: color-mix(in srgb, var(--rc-amber) 10%, var(--bg-1));
}
.rc-chip.rc-unresolved > a::before { content: "?"; }
.rc-unresolved .rc-pop-kind { color: var(--rc-amber); }
.rc-pop-desc code {
    font-size: 0.9em;
    background: var(--bg-2);
    border: none;
    padding: 0.05em 0.25em;
}

/* hover card */
.rc-card-pop {
    position: absolute;
    z-index: 70;
    width: min(24rem, 80vw);
    padding: 0.7rem 0.85rem;
    background: var(--bg-1);
    border: 1px solid var(--border-color);
    border-radius: var(--rc-radius);
    box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.6);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    pointer-events: none;
}
.rc-chip[data-open] .rc-card-pop {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}
.rc-pop-kind {
    font-family: var(--rc-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--rc-accent);
    display: block;
    margin-bottom: 0.3rem;
}
.rc-pop-title {
    display: block;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--text-0);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.rc-pop-desc {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-1);
}
.rc-pop-meta {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--rc-mono);
    font-size: 0.68rem;
    color: var(--text-2);
}

/* ==========================================================================
   6. CARD — block-level rich link
   ========================================================================== */

.rc-card {
    display: block;
    margin-block: 1.6rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--rc-radius);
    background: var(--bg-1);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.rc-card:hover {
    border-color: color-mix(in srgb, var(--rc-accent) 50%, var(--border-color));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -20px color-mix(in srgb, var(--rc-accent) 85%, transparent);
}
.rc-card-kind {
    font-family: var(--rc-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--rc-accent);
    display: block;
    margin-bottom: 0.35rem;
}
.rc-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.35;
    color: var(--text-0);
    margin-bottom: 0.28rem;
}
.rc-card:hover .rc-card-title { color: var(--rc-accent); }
.rc-card-desc {
    display: block;
    font-size: 0.86rem;
    color: var(--text-1);
    line-height: 1.55;
}
.rc-card-meta {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--rc-mono);
    font-size: 0.7rem;
    color: var(--text-2);
}
.rc-card-meta::after { content: " \2197"; }
.rc-card-meta.internal::after { content: " \2192"; }

/* ==========================================================================
   7. FIGURE — numbered, captioned, click-to-zoom
   ========================================================================== */

.rc-fig-scope { counter-reset: rc-fig; }

.rc-fig {
    margin-block: 1.9rem;
    counter-increment: rc-fig;
}
.rc-fig img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-1);
    cursor: zoom-in;
}
.rc-fig figcaption {
    margin-top: 0.6rem;
    font-size: 0.84rem;
    color: var(--text-1);
    line-height: 1.5;
}
.rc-fig figcaption::before {
    content: "fig " counter(rc-fig) " \00B7 ";
    font-family: var(--rc-mono);
    font-size: 0.75rem;
    color: var(--rc-accent);
}

/* lightbox */
.rc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.86);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.16s ease;
}
.rc-lightbox[data-open] { opacity: 1; }
.rc-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    box-shadow: 0 30px 80px -30px #000;
}

/* ==========================================================================
   8. TERM — terminal transcript
   ========================================================================== */

.rc-term {
    margin-block: 1.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--rc-radius);
    overflow: hidden;
    background: var(--bg-1);
}
.rc-term-bar {
    display: flex;
    align-items: baseline;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--rc-mono);
    font-size: var(--rc-label-size);
}
.rc-term-bar .u { color: var(--rc-green); }
.rc-term-bar .h { color: var(--rc-accent); }
.rc-term-bar .at, .rc-term-bar .sep { color: var(--text-2); }
.rc-term-bar .cwd { color: var(--text-1); }
.rc-term pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.82rem;
}

/* ==========================================================================
   9. SERIES rail
   ========================================================================== */

.rc-series {
    display: block;
    margin: 0 0 2.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--rc-radius);
    background: var(--bg-1);
}
.rc-series-head {
    font-family: var(--rc-mono);
    font-size: var(--rc-label-size);
    letter-spacing: 0.05em;
    color: var(--text-1);
    margin-bottom: 0.6rem;
}
.rc-series-head .name { color: var(--text-0); }
.rc-series-head .p { color: var(--rc-accent); }

.rc-series ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rc-part;
}
.rc-series li {
    counter-increment: rc-part;
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.25rem 0;
    font-size: 0.88rem;
}
.rc-series li::before {
    content: counter(rc-part, decimal-leading-zero);
    font-family: var(--rc-mono);
    font-size: 0.72rem;
    color: var(--text-2);
}
.rc-series a { text-decoration: none; color: var(--text-1); }
.rc-series a:hover { color: var(--rc-accent); }
.rc-series li[aria-current="true"]::before { color: var(--rc-accent); }
.rc-series li[aria-current="true"] > span {
    color: var(--text-0);
    font-weight: 600;
}
.rc-series li[aria-current="true"] > span::after {
    content: " \2190 you are here";
    font-family: var(--rc-mono);
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-2);
}
.rc-series li.pending > span { color: var(--text-2); }
.rc-series li.pending > span::after {
    content: " (soon)";
    font-family: var(--rc-mono);
    font-size: 0.68rem;
}

/* ==========================================================================
   10. REFS — the reference list at the foot of a post
   ========================================================================== */

.rc-refs { margin: 2.4rem 0 0; }
.rc-refs-head {
    font-family: var(--rc-mono);
    font-size: var(--rc-label-size);
    letter-spacing: 0.06em;
    color: var(--text-1);
    padding-bottom: 0.6rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}
.rc-refs-head .p { color: var(--rc-accent); }
.rc-refs ul { list-style: none; margin: 0; padding: 0; }
.rc-refs li {
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--border-color);
    font-size: 0.88rem;
    line-height: 1.5;
    scroll-margin-top: 5rem;
}
.rc-refs li:last-child { border-bottom: none; }
.rc-refs li:target { background: color-mix(in srgb, var(--rc-accent) 10%, transparent); }
.rc-refs .k {
    font-family: var(--rc-mono);
    font-size: 0.72rem;
    color: var(--rc-accent);
    margin-right: 0.5rem;
}
.rc-refs .t { color: var(--text-0); text-decoration: none; }
.rc-refs .t:hover { color: var(--rc-accent); }
.rc-refs .m {
    display: block;
    font-family: var(--rc-mono);
    font-size: 0.72rem;
    color: var(--text-2);
    margin-top: 0.15rem;
}
.rc-refs .n {
    display: block;
    font-size: 0.82rem;
    color: var(--text-1);
    margin-top: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .rc-card, .rc-sn-body, .rc-card-pop, .rc-lightbox, .rc-split-panes mark {
        transition: none !important;
    }
    .rc-card:hover { transform: none; }
}