/* Expandable text, a vanilla port of Arc's expandable-text
 * (https://uiarc.dev/components/expandable-text).
 *
 * Long text stays clamped to a few lines, with a soft fade on the last one.
 * Read more opens it and Show less closes it. The button is drawn only when
 * the text actually overflows. This file does not change shared tokens.
 * Color comes from the page: hub tokens where a staff page loads them,
 * and the page's own blue and ink everywhere else.
 */

.xt{
  --xt-lines:3;
  position:relative;
  display:grid;
  /* Stretch, not start. A start-aligned grid item sizes to the longest
     line, and at 390 that line ran out of the card. */
  justify-items:stretch;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  /* Outfit and the line height come from the surface. The size does too,
     except it never goes under Sharon's 14px floor. The row around an
     interaction note stays 12px; only this text comes up. */
  font-family:inherit;
  font-size:max(14px, 1em);
  line-height:inherit;
  color:inherit;
  scroll-margin-top:calc(var(--staff-notice-h, 0px) + var(--staff-banner-h, 0px) + var(--admin-mbar-h, 0px) + 12px);
}
/* One line is not a preview. A missing or 1-line request still shows two. */
.xt[data-lines="1"]{--xt-lines:2}
.xt[data-lines="2"]{--xt-lines:2}
.xt[data-lines="3"]{--xt-lines:3}
.xt[data-lines="4"]{--xt-lines:4}
.xt[data-lines="5"]{--xt-lines:5}
.xt[data-lines="6"]{--xt-lines:6}

.xt-body{
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  transition:height .55s cubic-bezier(.32,.5,.2,1);
}
.xt[data-to="closed"] .xt-body{transition-duration:.42s}
.xt-body[data-clamped]{
  /* 1.4em is the fallback where lh is unsupported. A surface with a
     taller line height, such as the speaker bio, overrides this pair. */
  max-height:calc(var(--xt-lines) * 1.4em);
  max-height:calc(var(--xt-lines) * 1lh);
  /* Fade only the tail of the last line, so a two-line clamp still shows
     both lines. A taller fade left a single sliver on grant notes and
     interaction notes. */
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - .55lh),rgb(0 0 0 / .04) 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - .55lh),rgb(0 0 0 / .04) 100%);
}
.xt-probe{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:calc(var(--xt-lines) * 1.4em);
  height:calc(var(--xt-lines) * 1lh);
  visibility:hidden;
  pointer-events:none;
}
.xt-inner{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.xt-inner > :first-child{margin-top:0}
.xt-inner > :last-child{margin-bottom:0}
.xt[data-pre="line"] .xt-inner{white-space:pre-line}
.xt[data-pre="wrap"] .xt-inner{white-space:pre-wrap}

.xt-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  min-width:44px;
  margin:2px 0 0;
  padding:0 8px 0 0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--hub-accent, var(--acctxt, var(--link, var(--blue, #1E3EAF))));
  font-family:inherit;
  font-size:max(14px, 1em);
  font-weight:600;
  line-height:inherit;
  text-align:left;
  justify-self:start;
  max-width:100%;
  white-space:normal;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* Room for the cookie bar and the floating buttons when Show less
     is brought back into view. */
  scroll-margin-bottom:calc(var(--jfsd-cookie-h,0px) + 96px);
}
.xt-toggle[hidden]{display:none}
.xt-toggle:focus{outline:none}
.xt-toggle:focus-visible{
  outline:3px solid var(--hub-accent, var(--accent, #1C88ED));
  outline-offset:2px;
}
.xt[tabindex="-1"]:focus{outline:none}
.xt[tabindex="-1"]:focus-visible{
  outline:3px solid var(--hub-accent, var(--accent, #1C88ED));
  outline-offset:2px;
  border-radius:4px;
}
.xt-labels{display:inline-grid;justify-items:start}
.xt-label{
  grid-area:1 / 1;
  opacity:0;
  filter:blur(2px);
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .18s cubic-bezier(.32,.5,.2,1), filter .18s cubic-bezier(.32,.5,.2,1), transform .18s cubic-bezier(.32,.5,.2,1);
}
.xt-label[data-active]{opacity:1;filter:none;transform:none}
.xt-label + .xt-label:not([data-active]){transform:translateY(4px)}
.xt-chev{width:16px;height:16px;flex:none;display:block;transition:transform .55s cubic-bezier(.32,.5,.2,1)}
.xt:has(.xt-toggle[aria-expanded="true"]) .xt-chev{transform:rotate(180deg)}

/* A navy card (the calendar's featured event) needs light ink. White on
   Midnight and on navy both clear AA. */
.xt.on-dark{color:#f4f3ff}
.xt.on-dark .xt-toggle{color:#fff}
.xt.on-dark .xt-toggle:focus-visible,.xt.on-dark[tabindex="-1"]:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion: reduce){
  .xt-body,.xt-label,.xt-chev{transition:none}
}
html[data-motion="reduce"] .xt-body,
html[data-motion="reduce"] .xt-label,
html[data-motion="reduce"] .xt-chev,
html[data-a11y-motion="off"] .xt-body,
html[data-a11y-motion="off"] .xt-label,
html[data-a11y-motion="off"] .xt-chev,
html.rm .xt-body,
html.rm .xt-label,
html.rm .xt-chev{transition:none}

/* A printed page shows the whole note. The clamp and the button are for
   the screen. */
@media print{
  .xt-body,.xt-body[data-clamped]{
    max-height:none;
    height:auto;
    overflow:visible;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .xt-toggle{display:none}
}