/* GENERATED at build time from the knobs in theme.css (see
   lib/theme.js beside this file) — edit theme.css, not this file.
   Values in effect for this build:
     reader cards (abstract, frame) are never narrower than 24.63rem
       (--reader-min; auto = the rows' text column at the panel's minimum)
     cards open below their link when the window is narrower than 68.28rem
       (= --ribbon-min + --panel-min + max(--marginbox-width, that floor) + --marginbox-gap + 0.75rem)
     desktop windows narrower than 42rem scroll sideways
       (= the larger of --page-min and --ribbon-min + --panel-min) */

:root { --reader-floor: 24.63rem; }   /* --reader-min resolved (auto → computed) */

/* ---- margin cards: in the rail (wide) ---- */
@media (min-width: 68.28rem) {
  /* rail wide enough for cards: an open card is ABSOLUTELY positioned —
     pinned to its own trigger's line (static position) and anchored just
     past the rule. Cards are fully independent: opening one never moves
     another (trade-off: triggers on adjacent lines could overlap when
     both are open — hence the one-trigger-per-paragraph rule).
     Width is FLUID: from 11rem it grows with the window, capped at
     --marginbox-width (the parameter = the maximum). */
  input.margin-toggle:checked + .sidenote,
  input.margin-toggle:checked + .marginbox {
    position: absolute;
    /* beside the rule when it fits, else shifted left over the panel */
    left: max(0.5rem, min(calc(100% + var(--marginbox-gap)), calc(var(--vw) - var(--page-left) - var(--marginbox-width) - 1rem)));
    width: var(--marginbox-width);
    margin-top: 0.15rem;
  }
}

/* ---- margin cards: below their trigger (narrow) ---- */
@media (max-width: 68.27rem) {
  /* narrower than the cards-in-rail threshold: the card opens as a
     FULL-WIDTH FLOAT wearing the rail's dotted skin. A float slots
     BETWEEN line boxes: the line holding the trigger keeps every word
     it had, the card appears under that complete line, and later lines
     shift down without re-wrapping. */
  input.margin-toggle:checked + .sidenote,
  input.margin-toggle:checked + .marginbox,
  input.margin-toggle:checked + .marginreader {
    float: left;
    width: 100%;
    margin: 0.6rem 0;
    background-color: var(--rail-bg);
    background-image: var(--rail-pattern);
    background-size: var(--rail-spacing);
  }
  /* readers can be long: cap the card; its .mr-box scrolls */
  input.margin-toggle:checked + .marginreader { max-height: 70vh; }
  /* résumé + live rows: a card below its link spans the WHOLE panel, key
     column included — that space is empty below the stamp. The row is laid
     out with floats here (key column floated, text column beside it), and
     the card, a float itself, CLEARS the key column: it starts below it,
     never across a stamp. */
  .rrow { display: flow-root; }
  .rrow .rkey { float: left; width: var(--key-width, 10.5rem); margin-top: calc(0.7rem - 0.7 * var(--stamp-size, 0.75rem)); }   /* the grid above aligns the tag's baseline with the title's; a float sits at the row's top, so lift it by half the difference of the two line heights (1.4 × each size) */
  .rrow .rbody { margin-left: calc(var(--key-width, 10.5rem) + var(--key-gap, 1rem)); }
  .face-rl .rrow input.margin-toggle:checked + .marginreader {
    clear: left;
    margin-left: calc(-1 * (var(--key-width, 10.5rem) + var(--key-gap, 1rem)));
    width: calc(100% + var(--key-width, 10.5rem) + var(--key-gap, 1rem));
  }

}

/* ---- the exploratory face's reader, pinned in the rail (wide) ---- */
@media (min-width: 68.28rem) {
  /* wide: pinned in the rail with its OWN scrollbar — the visitor can
     scroll the piece while the page stays put */
  input.margin-toggle:checked + .marginreader {
    position: fixed;
    left: calc(var(--col-total) + var(--marginbox-gap));
    top: 4.5rem;
    bottom: 1.5rem;
    width: clamp(11rem,
                 calc(var(--vw) - var(--col-total) - var(--marginbox-gap) - 0.75rem),
                 calc(var(--marginbox-width) + 6rem));
  }
  input.margin-toggle:checked + .marginreader .margin-close {
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 0.2rem 0;
  }
}

/* ---- résumé + live faces: the abstract card beside its link (wide) ---- */
@media (min-width: 68.28rem) {
  .face-rl input.margin-toggle:checked + .marginreader {
    --reader-w: clamp(var(--reader-floor, 30rem), calc(var(--vw) - var(--col-total) - var(--marginbox-gap) - 0.75rem), var(--reader-max, 35rem));   /* fills the rail between floor and ceiling; the frame uses the same */
    position: absolute;
    left: calc(100% + var(--marginbox-gap));   /* anchored at the panel's rule: a resize moves the RIGHT edge */
    right: auto;
    width: var(--reader-w);
    top: auto;
    bottom: auto;
    transform: translateY(calc(-50% - 0.65em));   /* anchor is the line below the link; lift half a line so the card centres on it */
    max-height: calc(100vh - 6rem);
    max-width: calc(var(--vw) - var(--col-total) - var(--marginbox-gap) - 0.75rem);   /* never past the rail's margin */
  }
  /* The WIDTH HANDLE: a bar on the card's right edge (added by the small
     script in resume.html; absent without it). Dragging it sets --reader-w on
     the card — width for every card, and a frame's height through
     --frame-ratio; an abstract's height stays its text's. */
  .face-rl input.margin-toggle:checked + .marginreader .mr-handle {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;           /* the hit area, inside the card's right padding */
    cursor: col-resize;
    touch-action: none;
  }
  .mr-handle::before {     /* the visible grip: three short vertical lines, centred on the edge */
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 7px;
    height: 18px;
    transform: translateY(-50%);
    --grip: var(--reader-handle, var(--hairline));
    background: repeating-linear-gradient(90deg, var(--grip) 0 1px, transparent 1px 3px);
  }
  .mr-handle:hover::before, .marginreader.dragging .mr-handle::before { --grip: var(--link); }   /* the lines turn green; the pattern stays */
  .marginreader.dragging { user-select: none; }
  .marginreader.dragging iframe { pointer-events: none; }   /* the drag keeps its events while the pointer crosses the viewer */
  /* Where the browser supports anchor positioning (Chrome, Edge, Safari 26+):
     the card is centred on the chip that opened it and, if that would push
     it past the top or bottom of the page, it is shifted to stay at least
     --card-margin inside. Older browsers keep the plain centring above. */
  /* the small cards (curriculum, grants, …) centre on their link the same way */
  .face-rl .rline input.margin-toggle:checked + .marginbox { transform: translateY(calc(-50% - 0.65em)); }
  @supports (anchor-name: --x) {
    .face-rl .m-close { anchor-name: --margin-trigger; }   /* the visible twin while its card is open */
    .face-rl .rline input.margin-toggle:checked + .marginbox,
    .face-rl input.margin-toggle:checked + .marginreader {
      position-anchor: --margin-trigger;          /* resolves to the nearest preceding chip = its own */
      align-self: anchor-center;
      transform: none;
      margin-top: var(--card-margin, 1.5rem);
      margin-bottom: var(--card-margin, 1.5rem);
    }
  }
  /* Browsers WITHOUT anchor positioning (Safari before 26, older Firefox)
     keep the plain centring, so a card opened from one of the last two
     papers can hang below the page. While such a card is open, give the
     page room at the bottom so the card sits inside it and the page ends
     cleanly. */
  @supports not (anchor-name: --x) {
    body.face-rl:has(.rrow.paper:nth-last-child(-n+2) input.margin-toggle:checked) { padding-bottom: calc(30vh + 2rem); }
  }
}

/* ---- résumé + live faces: the ⌄ arrow when cards open below ---- */
@media (max-width: 68.27rem) { .rline .mtrig::after { content: "⌄"; top: calc(-1 * var(--arrow-down-lift, 0.25em)); } }

/* ---- résumé + live faces: the FRAME card (a PDF or a page) ---- */
/* The same width as the abstract card (--reader-w, set above) and placed
   like it: beside the panel's rule, CENTRED ON ITS LINK (anchor positioning,
   kept inside the page; a half-card lift where unsupported). Height follows
   the width, capped by the window. */
@media (min-width: 68.28rem) {
  .face-rl input.margin-toggle:checked + .marginreader.marginframe {
    height: min(calc(var(--reader-w) * var(--frame-ratio, 1.3)), calc(100vh - var(--frame-top, 2rem) - var(--frame-bottom, 1.5rem)));
    max-height: calc(100vh - var(--frame-top, 2rem) - var(--frame-bottom, 1.5rem));   /* a resize stays inside the window */
    z-index: 70;
  }
  /* THE CHAT CARD (26 Oct 2026, Ameek): pinned to the TOP OF THE WINDOW, in the rail beside the
     panel — it stays put while the page scrolls — instead of centred on its link */
  .face-rl input.margin-toggle:checked + .marginreader.marginframe.mapp {
    position: fixed;
    top: calc(var(--top-rule, 4px) + 0.9rem);
    left: calc(var(--col-total) + var(--marginbox-gap));
    bottom: auto;
    margin: 0;
    transform: none;
    align-self: auto;
    height: min(calc(var(--reader-w) * var(--frame-ratio, 1.6)), calc(100vh - var(--top-rule, 4px) - 2.2rem));
    max-height: calc(100vh - var(--top-rule, 4px) - 2.2rem);
  }
  /* THE CV CARD (30 Oct 2026, Ameek): opened from the ribbon, so pinned the same way — at the top of
     the window, in the rail — a document card's shape */
  .face-rl .menu input.margin-toggle:checked + .marginreader.marginframe {
    position: fixed;
    top: calc(var(--top-rule, 4px) + 0.9rem);
    left: calc(var(--col-total) + var(--marginbox-gap));
    bottom: auto;
    margin: 0;
    transform: none;
    align-self: auto;
    height: min(calc(var(--reader-w) * var(--frame-ratio, 1.3)), calc(100vh - var(--top-rule, 4px) - 2.2rem));
    max-height: calc(100vh - var(--top-rule, 4px) - 2.2rem);
  }
}
/* Narrower: below its link, full column width like every other card, at
   --frame-height-down */
@media (max-width: 68.27rem) {
  .face-rl .rrow input.margin-toggle:checked + .marginreader.marginframe { height: var(--frame-height-down, 60vh); max-height: var(--frame-height-down, 60vh); }
  .face-rl .rrow input.margin-toggle:checked + .marginreader.mapp { height: var(--app-height-down, 68vh); max-height: var(--app-height-down, 68vh); }   /* the chat: taller than a document card (a little shorter since 26 Oct 2026) */
  /* the CV in the ribbon: no card below the ribbon (it would stick with the menu), the PDF in a new tab */
  .menu .rline .fr.m-open, .menu .rline .fr.m-close, .menu input.margin-toggle:checked + .marginreader { display: none; }
  .menu .rline .m-direct { display: inline; }
  .menu .rline .m-direct::after { content: "↗"; top: 0; }
}


/* ---- desktop floor: sideways scroll below --page-min ---- */
@media (max-width: 42rem) {   /* the page floor: narrower windows get a horizontal scrollbar, not a reflow */
  html { overflow-x: auto; }
}