/* ============================================================
   Recognition reference cards
   Direction: archival dossier. One pane of glass over the page,
   flat paper inside it. Decisions and rationale live in DESIGN.md.
   ============================================================ */

:root{
  --cx-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --cx-ink:#F2F6FC;
  --cx-ink-2:rgba(226,234,247,.80);
  --cx-ink-3:rgba(226,234,247,.54);
  --cx-ink-4:rgba(226,234,247,.36);
  --cx-rule:rgba(176,197,227,.12);
  --cx-rule-2:rgba(176,197,227,.22);
  --cx-gold:#E1BD7C;
  /* Fine grain over the glass. Without it the panel reads as plastic. */
  --cx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the trigger ---------------------------------- */

.context-button{
  display:inline-flex;align-items:center;gap:9px;
  justify-self:start;max-width:100%;min-height:40px;margin-top:18px;padding:9px 14px 9px 15px;
  border:1px solid rgba(165,189,226,.19);border-radius:var(--r-control,10px);
  background:transparent;color:#aec0dc;
  font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:0;
  text-align:left;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.context-button[hidden]{display:none}
/* A chevron, not an external-link arrow: this opens a panel, it does not navigate away. */
.context-button svg{width:14px;height:14px;flex:none;opacity:.7;transition:transform .14s ease,opacity .14s ease}
@media(hover:hover){
  .context-button:hover{background:rgba(145,173,214,.09);border-color:rgba(165,189,226,.36);color:var(--cx-ink)}
  .context-button:hover svg{transform:translateX(2px);opacity:1}
}
.context-button:focus-visible,.context-dialog button:focus-visible,.context-dialog a:focus-visible{
  outline:2px solid #92bbff;outline-offset:3px;
}
.spotlight .context-button{display:flex;margin:22px auto 0}
.spotlight .stamp{margin-top:22px}
@media(max-width:640px){.spotlight .context-button{margin-left:0}}

/* ---------- the pane ------------------------------------- */

html.context-open{overflow:hidden}

.context-dialog{
  position:fixed;inset:0;width:min(860px,calc(100% - 40px));max-width:none;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);height:fit-content;
  margin:auto;padding:0;overflow:hidden;color:var(--cx-ink);
  border:1px solid rgba(255,255,255,.09);border-radius:24px;
  background:#0C1220;
  /* One light source, above. Highlight on the top edge, shade on the bottom,
     shadow cast downward rather than an even halo. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 4px 14px -6px rgba(0,0,0,.5),
    0 44px 88px -26px rgba(0,0,0,.74);
  font-family:inherit;color-scheme:dark;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .context-dialog{
    background:rgba(13,19,31,.82);
    -webkit-backdrop-filter:blur(30px) saturate(160%);
    backdrop-filter:blur(30px) saturate(160%);
  }
}
.context-dialog::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--cx-grain);background-size:150px 150px;
  opacity:.05;mix-blend-mode:soft-light;
}
.context-dialog::backdrop{
  background:rgba(2,5,11,.62);
  -webkit-backdrop-filter:blur(7px) saturate(115%);backdrop-filter:blur(7px) saturate(115%);
}
.context-dialog[open]{display:flex;flex-direction:column;animation:context-enter .26s cubic-bezier(.2,.8,.2,1) both}
.context-dialog[open]::backdrop{animation:context-dim .22s ease both}
.context-dialog.is-closing{animation:context-exit .16s ease both;pointer-events:none}
.context-dialog.is-closing::backdrop{animation:context-dim .16s ease reverse both}

/* ---------- header bar ----------------------------------- */

.context-bar{
  position:relative;z-index:1;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px 12px 28px;
  border-bottom:1px solid var(--cx-rule);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
}
/* The bar names the entry rather than decorating itself, and it stays out of
   the way until the title has scrolled off. */
.context-bar__label{
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:13px;font-weight:500;line-height:1.5;color:var(--cx-ink-3);
}
.context-dialog.has-sticky-label .context-bar__label{opacity:0;transition:opacity .2s ease}
.context-dialog.has-sticky-label.is-scrolled .context-bar__label{opacity:1}
.context-close{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:10px;border:1px solid rgba(180,201,235,.14);
  color:#c6d3e7;background:transparent;cursor:pointer;transition:background .14s ease,border-color .14s ease;
}
.context-close:hover{background:rgba(255,255,255,.07);border-color:var(--cx-rule-2)}
.context-close svg{width:17px;height:17px}

/* ---------- reading surface ------------------------------ */

.context-scroll{
  position:relative;z-index:1;min-height:0;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#39445a transparent;
  padding:40px 46px 38px;scroll-behavior:auto;
}

/* Logo left, text right: a filed card, not a badge floated into a corner. */
.context-hero{display:flex;align-items:flex-start;gap:24px}
.context-hero__text{min-width:0;padding-top:2px}
.context-kicker{margin:0 0 9px;color:var(--cx-ink-3);font-size:12.5px;line-height:1.5;font-weight:400;letter-spacing:0}
.context-dialog h2{
  margin:0;font-family:var(--cx-serif);font-optical-sizing:auto;
  font-size:clamp(1.7rem,3.6vw,2.35rem);line-height:1.12;font-weight:500;letter-spacing:-.015em;
  color:var(--cx-ink);text-wrap:balance;
}
.context-dialog h2:focus{outline:none}
.context-subtitle{margin:13px 0 0;font-size:14.5px;line-height:1.7;color:var(--cx-ink-2);max-width:72ch}

.context-logo{
  display:grid;place-items:center;flex:none;width:78px;height:78px;padding:13px;
  border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#ffffff,#e9ecf0);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);user-select:none;
}
.context-logo img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.context-logo--bratislava img{filter:brightness(0) saturate(100%) invert(19%) sepia(93%) saturate(3275%) hue-rotate(342deg) brightness(89%) contrast(101%)}
.context-logo--uniza img{filter:brightness(0) saturate(100%) invert(18%) sepia(32%) saturate(1490%) hue-rotate(176deg) brightness(82%) contrast(94%)}

/* ---------- key facts ------------------------------------ */
/* One figure carries the entry; the rest are a spec sheet. Entries run two or
   three secondary rows depending on what is actually known. */

.context-facts{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:0 38px;
  margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--cx-rule-2);
}
.context-facts>div{display:flex;min-width:0}
.context-facts>div:first-child{
  grid-column:1;grid-row:1/span 6;flex-direction:column;
  padding-right:36px;border-right:1px solid var(--cx-rule);
}
.context-facts>div:first-child dd{
  order:0;margin:0;font-family:var(--cx-serif);font-optical-sizing:auto;
  font-size:clamp(2.1rem,5.4vw,3rem);line-height:.98;font-weight:500;letter-spacing:-.02em;
  color:var(--cx-ink);font-variant-numeric:tabular-nums;
}
.context-facts>div:first-child dt{order:1;margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--cx-ink-3);max-width:24ch}
.context-facts>div+div{
  grid-column:2;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-top:1px solid var(--cx-rule);
}
.context-facts>div:nth-child(2){padding-top:0;border-top:0}
.context-facts>div+div dd{order:0;margin:0;flex:none;font-size:14px;font-weight:500;line-height:1.5;color:#dbe4f4;font-variant-numeric:tabular-nums}
.context-facts>div+div dt{order:1;margin-left:auto;text-align:right;font-size:12.5px;line-height:1.5;color:var(--cx-ink-3)}

/* ---------- sections ------------------------------------- */
/* Hanging label: heading parked in the left margin, prose in the column.
   This is the layout signature of the component. */

.context-section{
  display:grid;grid-template-columns:162px minmax(0,1fr);gap:0 32px;
  margin-top:0;padding:24px 0;border-top:1px solid var(--cx-rule);
}
.context-section:first-of-type{margin-top:34px;border-top-color:var(--cx-rule-2)}
.context-dialog h3{
  margin:0;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:0;
  color:#e6edf8;text-wrap:balance;
}
.context-dialog p.context-copy{margin:0;color:var(--cx-ink-2);font-size:15px;line-height:1.78;text-wrap:pretty}
.context-dialog p.context-copy+p.context-copy{margin-top:15px}

/* A second institution inside one entry gets its own masthead. */
.context-chapter{margin-top:8px;padding-top:30px;border-top:1px solid var(--cx-rule-2)}
.context-chapter__head{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.context-chapter__head .context-logo{width:66px;height:66px;padding:11px;border-radius:11px}
.context-chapter__head h3{font-family:var(--cx-serif);font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.012em}
.context-chapter__head .context-kicker{margin-bottom:5px}

/* ---------- the first-person block ----------------------- */
/* The only place the author speaks. Gold appears here and nowhere else. */

.context-connection{
  margin-top:26px;padding:22px 24px 24px;border-radius:12px;
  border-top:1px solid rgba(225,189,124,.34);
  background:linear-gradient(180deg,rgba(225,189,124,.055),rgba(225,189,124,0) 82%);
}
.context-connection__label{
  margin:0 0 10px;font-size:12.5px;font-weight:500;line-height:1.5;
  letter-spacing:0;color:var(--cx-gold);
}
.context-connection p.context-copy{
  font-family:var(--cx-serif);font-optical-sizing:auto;
  font-size:clamp(1.02rem,2.1vw,1.16rem);line-height:1.62;color:#EDF2FB;
}

/* ---------- sources -------------------------------------- */

.context-sources{margin-top:34px;padding-top:22px;border-top:1px solid var(--cx-rule-2)}
.context-sources h3{margin:0 0 4px;font-size:13px;color:var(--cx-ink-3);font-weight:500}
.context-sources ul{list-style:none;margin:10px 0 0;padding:0}
.context-sources li+li{border-top:1px solid var(--cx-rule)}
.context-sources a{
  display:flex;align-items:baseline;gap:16px;padding:11px 0;min-height:32px;
  color:#bcceea;font-size:13.5px;line-height:1.55;text-decoration:none;
  transition:color .14s ease;
}
.context-sources a:hover{color:var(--cx-ink)}
.context-sources a:hover .context-sources__name{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(225,189,124,.7)}
.context-sources__name{min-width:0}
.context-sources__host{margin-left:auto;flex:none;display:flex;align-items:center;gap:7px;color:var(--cx-ink-4);font-size:12px}
.context-sources svg{width:12px;height:12px;flex:none}

.context-dialog .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes context-enter{from{opacity:0;transform:translateY(8px) scale(.994)}to{opacity:1;transform:none}}
@keyframes context-exit{to{opacity:0;transform:translateY(4px)}}
@keyframes context-dim{from{opacity:0}to{opacity:1}}

/* ---------- narrow ---------------------------------------- */

@media(max-width:720px){
  .context-section{grid-template-columns:1fr;gap:10px}
}
@media(max-width:560px){
  .context-dialog{width:calc(100% - 18px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:20px}
  .context-bar{padding:10px 10px 10px 20px}
  .context-scroll{padding:26px 22px 28px}
  .context-hero{gap:16px}
  .context-logo{width:60px;height:60px;padding:10px;border-radius:11px}
  .context-dialog h2{font-size:1.62rem}
  .context-subtitle{font-size:13.5px;margin-top:11px}
  .context-facts{grid-template-columns:1fr;gap:0;margin-top:28px;padding-top:22px}
  .context-facts>div:first-child{grid-column:1;grid-row:auto;padding:0 0 18px;border-right:0;border-bottom:1px solid var(--cx-rule)}
  .context-facts>div+div{grid-column:1;padding:9px 0}
  .context-facts>div:nth-child(2){padding-top:14px;border-top:0}
  .context-dialog p.context-copy{font-size:14.5px;line-height:1.75}
  .context-connection{padding:20px 18px 22px}
  .context-chapter__head{gap:14px}
  .context-chapter__head .context-logo{width:56px;height:56px;padding:9px}
  .context-chapter__head h3{font-size:19px}
  .context-sources a{gap:10px;flex-wrap:wrap}
  .context-sources__host{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .context-dialog[open],.context-dialog[open]::backdrop,.context-dialog.is-closing{animation:none}
  .context-button,.context-button svg,.context-close,.context-sources a,.context-bar__label{transition:none}
}