/* =====================================================================
   hub.css — shared Knowledge Hub page styles (redesign SPEC §2, §5.2), loaded by layouts/hub.php
   after crcgs.css. Builds on the kit's tokens and ck- components; every colour is a var(--ck-…)
   token (scripts/test_hub_content.php checks: no raw colour here).
   ---------------------------------------------------------------------
   Classes any Hub page may use (generic names, kept stable — others rely on them after the merge):

   .hub-head            the band at the top of a content page: eyebrow, <h1>, intro (no visible breadcrumb).
                        Knowledge Hub pink (--ck-pink); links and the eyebrow turn navy on it,
                        because the kit's blue text is below AA on pink.
     .hub-head__title   its <h1>          .hub-head__intro  its opening paragraph
     .hub-listinfo      a small line under it ("51 articles, newest first")
   .hub-body            the page's main block below the band (top spacing).
   .hub-section-title   an <h2> over a group of cards; .hub-section-title__count "(12)".
   .hub-cards           a grid of cards: 3 → 2 → 1 columns.
   .hub-card            one item: optional .hub-card__img, then .hub-card__body holding
                        .hub-card__meta (kind + date), .hub-card__title (its <a> covers the card),
                        .hub-card__text, .hub-card__foot (.hub-card__topic link, .hub-card__by).
   .hub-type            the kind of item as a small label; --news / --article / --research /
                        --opinion tint it.
   .hub-tags            a row of chips (ck-chip / ck-tag) as a list; long names wrap.
   .hub-tag             a tag chip (outlined, to tell it from a topic chip).
   .hub-author          "Written by": .hub-author__pic + .hub-author__text (__label, __name,
                        __title, __bio).
   .hub-avatar          a round picture or initials; --initials, --seal (the CRCGS seal),
                        --lg (120px).
   .hub-article         an article page: .hub-article__main (head, image, body) beside
                        .hub-article__aside (share, topics, tags; sticky on wide screens).
     .hub-article__head  .hub-article__kicker  .hub-article__topic  .hub-article__standfirst
     .hub-byline         .hub-article__image   .hub-article__body (with .ck-prose)
     .hub-aside__title   .hub-aside__block     .hub-share (__list, __link)
   .hub-table           a scrolling frame round a wide table in article text.

   Content pages only (search, authors, 404 …) are in hub-content.css.
   ===================================================================== */

/* ---- Page head band ---- */
/* no breadcrumb shows in it (owner, 2026-10-19): the band's own padding spaces it from the menu above */
.ck .hub-head{background:var(--ck-pink);border-bottom:1px solid var(--ck-line);padding:var(--ck-space-7) 0}
.ck .hub-head .ck-eyebrow{color:var(--ck-navy)}
.ck .hub-head a:not(.ck-btn):not(.ck-chip){color:var(--ck-navy)}
.ck .hub-head__title{margin:0 0 var(--ck-space-3);max-width:24ch}
.ck .hub-head__intro{max-width:62ch;margin:0;color:var(--ck-text)}
.ck .hub-listinfo{margin:var(--ck-space-4) 0 0;color:var(--ck-muted);font-size:14px}
.ck .hub-listinfo--body{margin:0 0 var(--ck-space-5)}
.ck .hub-body{padding-top:var(--ck-space-6)}

.ck .hub-section-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--ck-space-2);margin:0 0 var(--ck-space-5);font-size:clamp(1.4rem,1.25rem + .6vw,1.75rem)}
.ck .hub-section-title__count{color:var(--ck-muted);font:400 1rem/1.4 var(--ck-font-body)}

/* ---- Cards ---- */
.ck .hub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ck-space-5);margin:0}
@media (max-width:1024px){ .ck .hub-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .ck .hub-cards{grid-template-columns:minmax(0,1fr);gap:var(--ck-space-4)} }

.ck .hub-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--ck-white);border:1px solid var(--ck-line);
  border-radius:var(--ck-radius);box-shadow:var(--ck-shadow);overflow:hidden;
  transition:transform var(--ck-dur) ease,box-shadow var(--ck-dur) ease,border-color var(--ck-dur) ease}
.ck .hub-card:hover{transform:translateY(-3px);box-shadow:var(--ck-shadow-lg);border-color:var(--ck-line-strong)}
/* Focus on the title (whose link covers the card) rings the whole card; a browser without :has()
   ignores both rules and keeps the link's own ring. The topic link keeps its own ring. */
.ck .hub-card:has(.hub-card__title a:focus-visible){outline:3px solid var(--ck-navy);outline-offset:2px}
.ck .hub-card:has(.hub-card__title a:focus-visible) .hub-card__title a:focus-visible{outline:none;box-shadow:none}
.ck .hub-card__img{aspect-ratio:16/9;background:var(--ck-neutral);overflow:hidden}
.ck .hub-card__img img{display:block;width:100%;height:100%;object-fit:cover}
.ck .hub-card__body{display:flex;flex:1 1 auto;flex-direction:column;padding:var(--ck-space-5) var(--ck-space-5) var(--ck-space-4)}
.ck .hub-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--ck-space-3);margin:0 0 var(--ck-space-3);color:var(--ck-muted);font-size:13px}
.ck .hub-card__title{margin:0 0 var(--ck-space-2);font:700 1.2rem/1.3 var(--ck-font-head);color:var(--ck-navy);text-wrap:pretty}
.ck .hub-card__title a{color:inherit;text-decoration:none}
.ck .hub-card__title a::after{content:"";position:absolute;inset:0;z-index:0}
.ck .hub-card__title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
/* The text is already cut at a word (HubArticle::summaryText) — no line clamp, which would cut mid-word */
.ck .hub-card__text{flex:1 1 auto;margin:0 0 var(--ck-space-4);color:var(--ck-muted);font-size:15px;line-height:1.6}
.ck .hub-card__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--ck-space-3);margin:0;padding-top:var(--ck-space-3);
  border-top:1px solid var(--ck-line);color:var(--ck-muted);font-size:13.5px;line-height:1.45}
.ck .hub-card__topic{position:relative;z-index:1;color:var(--ck-blue-text);font-weight:600;text-decoration:none}
.ck .hub-card__topic:hover{color:var(--ck-navy);text-decoration:underline}
.ck .hub-card__by{margin-left:auto}

/* ---- The kind of item ---- */
.ck .hub-type{display:inline-block;padding:3px 8px;border-radius:4px;background:var(--ck-light);color:var(--ck-navy);
  font:600 11.5px/1.35 var(--ck-font-body);letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.ck .hub-type--news{background:var(--ck-blue-pale)}
.ck .hub-type--research{background:var(--ck-cream);box-shadow:inset 0 0 0 1px var(--ck-line-strong)}
.ck .hub-type--opinion{background:var(--ck-pink);box-shadow:inset 0 0 0 1px var(--ck-line)}
.ck a.hub-type:hover{background:var(--ck-navy);color:var(--ck-white);box-shadow:none}

/* ---- Chips in a row ---- */
.ck .hub-tags{display:flex;flex-wrap:wrap;gap:var(--ck-space-2);margin:0;padding:0;list-style:none}
.ck .hub-tags .ck-chip,.ck .hub-tags .ck-tag{white-space:normal;text-align:left}
.ck .hub-tag{background:var(--ck-white);box-shadow:inset 0 0 0 1px var(--ck-line-strong)}
.ck a.hub-tag:hover{box-shadow:none}

/* ---- Author box ---- */
.ck .hub-author{display:flex;gap:var(--ck-space-5);align-items:flex-start;margin:var(--ck-space-7) 0 0;padding:var(--ck-space-5);
  background:var(--ck-cream);border:1px solid var(--ck-line);border-radius:var(--ck-radius);--ck-blue-text:var(--ck-blue-text-deep)}
.ck .hub-author__pic{flex:0 0 auto}
.ck .hub-author__text{min-width:0}
.ck .hub-author__label{margin:0 0 2px;color:var(--ck-muted);font:600 12px/1.4 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase}
.ck .hub-author__name{margin:0;font:700 1.3rem/1.3 var(--ck-font-head);color:var(--ck-navy)}
.ck .hub-author__name a{color:inherit;text-decoration:none}
.ck .hub-author__name a:hover{text-decoration:underline}
.ck .hub-author__title{margin:2px 0 0;color:var(--ck-muted);font-size:14.5px}
.ck .hub-author__bio{margin:var(--ck-space-3) 0 var(--ck-space-3);font-size:15px;line-height:1.6}
@media (max-width:520px){
  .ck .hub-author{gap:var(--ck-space-4);padding:var(--ck-space-4)}
  .ck .hub-author .hub-avatar{width:56px;height:56px;font-size:21px}
}

.ck .hub-avatar{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--ck-navy);
  color:var(--ck-white);font:700 26px/1 var(--ck-font-head);letter-spacing:.02em;flex:0 0 auto}
.ck .hub-avatar--seal{background:var(--ck-white);object-fit:contain;padding:5px;box-shadow:inset 0 0 0 1px var(--ck-line)}
.ck .hub-avatar--lg{width:120px;height:120px;font-size:42px}

/* ---- Article page (before the owner's redesign of 19 October 2026, in the last block of this file) ----
   No longer drawn: .hub-article, __main, __head, __kicker, __topic, __aside, .hub-aside__*, .hub-share__list and __link, the
   breadcrumb rule for .hub-article-page, and their copies in the touch, reduced-motion and print rules below. Left for a later
   clean-up; edit the last block instead. Still used: .hub-byline, .hub-article__standfirst, __image and __body. */
.ck .hub-article{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:var(--ck-space-8);align-items:start;margin:var(--ck-space-2) 0 var(--ck-space-8)}
.ck .hub-article__main{min-width:0;max-width:46rem}
.ck .hub-article__head{margin:0 0 var(--ck-space-6);padding-bottom:var(--ck-space-5);border-bottom:1px solid var(--ck-line)}
.ck .hub-article__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ck-space-2) var(--ck-space-3);margin:0 0 var(--ck-space-4);font-size:14px}
.ck .hub-article__topic{color:var(--ck-blue-text);font-weight:600;text-decoration:none}
.ck .hub-article__topic:hover{color:var(--ck-navy);text-decoration:underline}
.ck .hub-article__head h1{margin:0 0 var(--ck-space-4);font-size:clamp(1.9rem,1.5rem + 1.6vw,2.75rem);line-height:1.15;text-wrap:balance}
.ck .hub-article__standfirst{margin:0 0 var(--ck-space-5);font:400 1.2rem/1.55 var(--ck-font-head);color:var(--ck-text);max-width:60ch}
.ck .hub-byline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;color:var(--ck-muted);font-size:14.5px}
.ck .hub-byline > * + *::before{content:"·";margin:0 10px;color:var(--ck-line-strong)}
.ck .hub-byline a{color:var(--ck-navy);font-weight:600;text-decoration:none}
.ck .hub-byline a:hover{text-decoration:underline}
.ck .hub-article__image{margin:0 0 var(--ck-space-6)}
.ck .hub-article__image img{display:block;width:100%;height:auto;border-radius:var(--ck-radius)}
.ck .hub-article__body{max-width:68ch}
/* On a phone the article's own title, repeated as the last crumb, takes one line at most */
@media (max-width:640px){
  .ck .hub-article-page .ck-breadcrumb li:last-child{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.ck .hub-article__aside{position:sticky;top:calc(var(--ck-sticky-top) + var(--ck-space-5));display:grid;gap:var(--ck-space-6);
  padding-top:var(--ck-space-2);transition:top var(--ck-dur-slow) var(--ck-ease)}
.ck .hub-aside__title{margin:0 0 var(--ck-space-3);color:var(--ck-navy);font:600 12px/1.4 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase}
.ck .hub-share__list{display:flex;flex-wrap:wrap;gap:var(--ck-space-2);margin:0;padding:0;list-style:none}
.ck .hub-share__link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--ck-line-strong);
  border-radius:var(--ck-radius-pill);background:var(--ck-white);color:var(--ck-navy);font:500 14px/1 var(--ck-font-body);text-decoration:none;
  transition:background-color var(--ck-dur) ease,color var(--ck-dur) ease,border-color var(--ck-dur) ease}
.ck .hub-share__link:hover{background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white)}
@media (max-width:1024px){
  .ck .hub-article{grid-template-columns:minmax(0,1fr);gap:var(--ck-space-6)}
  .ck .hub-article__main{max-width:none}
  .ck .hub-article__aside{position:static;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));padding:var(--ck-space-5) 0 0;border-top:1px solid var(--ck-line)}
}

/* Wide tables in article text scroll inside their own frame, not the page */
.ck .hub-table{max-width:100%;overflow-x:auto;margin:0 0 1.15em;border:1px solid var(--ck-line);border-radius:var(--ck-radius-sm)}
.ck .hub-table table{margin:0;min-width:32rem}

/* ---- Touch screens: 44px tap targets (review R3-07) ----
   The small kind and topic links keep their look; an invisible band above and below makes them
   44px tall to tap (nothing else to tap sits that close). */
@media (pointer:coarse){
  .ck a.hub-type,.ck .hub-card__topic,.ck .hub-article__topic{position:relative}
  .ck a.hub-type::after,.ck .hub-card__topic::after,.ck .hub-article__topic::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
  .ck .hub-share__link{min-height:44px}
  .ck .hub-author__name a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- Reduced motion and print ---- */
@media (prefers-reduced-motion:reduce){
  .ck .hub-card,.ck .hub-share__link,.ck .hub-article__aside{transition:none}
  .ck .hub-card:hover{transform:none}
}
@media print{
  .ck .ck-head,.ck .ck-footer,.ck .hub-article__aside,.ck .hub-related,.ck .skip-link{display:none !important}
  .ck .hub-article{display:block;margin:0}
  .ck .hub-card{box-shadow:none;break-inside:avoid}
}

/* ---------- Team review 2026-10-18 (h3): "Save to reading list" on an article page ----------
   Under the byline (hub/account/_save.php): an outlined pill that fills navy once the article is
   saved ("Saved — remove"), a link to the list beside it, and the message after a save or a removal.
   #reading-list is where the reader comes back to; html's scroll-padding keeps it below the header. */
.ck .hub-save{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ck-space-2) var(--ck-space-4);margin:var(--ck-space-4) 0 0}
.ck .hub-save__form{margin:0}
.ck .hub-save__btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 16px;border:1px solid var(--ck-navy);
  border-radius:var(--ck-radius-pill);background:var(--ck-white);color:var(--ck-navy);font:600 14px/1.2 var(--ck-font-body);
  text-decoration:none;cursor:pointer;transition:background-color var(--ck-dur) ease,color var(--ck-dur) ease}
.ck .hub-save__btn:hover{background:var(--ck-light);color:var(--ck-navy)}
.ck .hub-save__btn.is-saved{background:var(--ck-navy);color:var(--ck-white)}
.ck .hub-save__btn.is-saved:hover{background:var(--ck-navy-deep);color:var(--ck-white)}
.ck .hub-save__list{color:var(--ck-navy);font-size:14px;font-weight:600}
.ck .hub-save__note{flex:1 1 100%;margin:0;color:var(--ck-success);font-size:14px;font-weight:600}
@media (pointer:coarse){
  .ck .hub-save__btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .ck .hub-save__btn{transition:none}
}
@media print{
  .ck .hub-save{display:none}
}

/* ---------- Article page 2026-10-19: the owner's redesign of the article page ----------
   hub/content/article.php (all four kinds of article) with hub-article.js. These rules come after the
   older article rules above and replace them on the page (the old classes .hub-article, __main, __head,
   __kicker, __topic, __aside, .hub-aside__*, .hub-share__list and __link are no longer drawn):
     .hub-progress        the reading-progress line under the sticky header (JavaScript only, decorative);
     .hub-art             the article: .hub-art__head (topic chips, the title, the summary, the line under
                          them), then .hub-art__grid: the picture, .hub-art__side (Key takeaways, "In this
                          article"; sticky beside the text on wide screens, above the text on narrower ones)
                          and .hub-art__main (the text, the author);
     .hub-topics          the topic chips above the title;
     .hub-art__title, .hub-art__standfirst   across the full width (no measure and no balanced lines:
                          the owner asked for no white space beside them);
     .hub-art__meta       .hub-byline on the left, .hub-acts (Save, Share, Email, Print: .hub-act) on the
                          right; on a phone the actions are one row of round icon buttons, their words
                          (.hub-act__label) hidden but still read out;
     .hub-share           the Share disclosure (<details>) and its menu (.hub-share__menu, __links, __item,
                          __field: the address to copy by hand without JavaScript);
     .hub-takeaways, .hub-toc (wide screens), .hub-toc-fold (the fold-out on narrower ones; the current
                          section is a[aria-current]);
     .hub-float           Top and Share at the bottom right (JavaScript only); on a phone small and inside the
                          safe area; never over the article text (.is-over-text, set by hub-article.js);
     print                only the title, the summary, the line, the takeaways and the text. */
.ck .hub-art{margin:0 0 var(--ck-space-8)}
.ck .hub-art__head{padding:var(--ck-space-6) 0 0}
.ck .hub-topics{display:flex;flex-wrap:wrap;gap:var(--ck-space-2);margin:0 0 var(--ck-space-4);padding:0;list-style:none}
.ck .hub-topics .ck-chip{padding:5px 12px;font-size:14px;font-weight:600;white-space:normal;text-align:left}
.ck .hub-art__title{max-width:none;margin:0 0 var(--ck-space-4);font-size:clamp(2rem,1.4rem + 2.1vw,3.25rem);line-height:1.12;text-wrap:pretty}
.ck .hub-art__head .hub-art__standfirst{max-width:none;margin:0 0 var(--ck-space-5);font-size:clamp(1.15rem,1.02rem + .5vw,1.4rem);line-height:1.55;text-wrap:pretty}
/* A heading reached from "In this article" (or a link to it) sits just below the header, whether the header
   is showing or not: html's scroll-padding gives --ck-sticky-top (0 while the header is away), this the rest. */
.ck .hub-art :is(h2,h3)[id]{scroll-margin-top:calc(var(--ck-header-h) - var(--ck-sticky-top))}
@media (max-height:500px){
  .ck .hub-art :is(h2,h3)[id]{scroll-margin-top:0}
}

/* The line under the summary */
.ck .hub-art__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ck-space-3) var(--ck-space-5);
  padding:var(--ck-space-3) 0;border-top:1px solid var(--ck-line);border-bottom:1px solid var(--ck-line)}
.ck .hub-art__meta .hub-byline{font-size:15px}
.ck .hub-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ck-space-2)}
.ck .hub-save--act{display:block;margin:0}
.ck .hub-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;margin:0;padding:0 14px;
  border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-pill);background:var(--ck-white);color:var(--ck-navy);
  font:600 14px/1.2 var(--ck-font-body);text-decoration:none;cursor:pointer;
  transition:background-color var(--ck-dur) ease,color var(--ck-dur) ease,border-color var(--ck-dur) ease}
.ck .hub-act:hover{background:var(--ck-light);border-color:var(--ck-navy);color:var(--ck-navy)}
.ck .hub-act[hidden]{display:none}
.ck .hub-act svg{flex:0 0 auto}
.ck .hub-act.is-saved{background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white)}
.ck .hub-act.is-saved:hover{background:var(--ck-navy-deep);border-color:var(--ck-navy-deep);color:var(--ck-white)}
.ck .hub-save-done{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ck-space-2) var(--ck-space-4);margin:var(--ck-space-3) 0 0}
.ck .hub-save-done .hub-save__note{flex:0 1 auto}

/* Share: a disclosure; its menu opens under the button (to the left of the floating one) */
.ck .hub-share{position:relative}
.ck .hub-share > summary{list-style:none}
.ck .hub-share > summary::-webkit-details-marker{display:none}
.ck .hub-share > summary::marker{content:""}
.ck .hub-share[open] > summary.hub-act{background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white)}
.ck .hub-share__menu{position:absolute;z-index:35;top:calc(100% + 6px);right:0;width:max-content;min-width:15rem;max-width:min(20rem,calc(100vw - 2 * var(--ck-gutter)));
  padding:var(--ck-space-2);background:var(--ck-white);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow-lg)}
.ck .hub-share__links{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.ck .hub-share__item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;margin:0;padding:8px 12px;border:0;border-radius:var(--ck-radius-sm);
  background:none;color:var(--ck-navy);font:500 15px/1.3 var(--ck-font-body);text-align:left;text-decoration:none;cursor:pointer}
.ck .hub-share__item:hover{background:var(--ck-light);color:var(--ck-navy)}
.ck .hub-share__item[hidden],.ck .hub-share__field[hidden]{display:none}
.ck .hub-share__copy{margin-top:4px;padding-top:4px;border-top:1px solid var(--ck-line)}
.ck .hub-share__field{display:grid;gap:4px;padding:6px 12px 8px;color:var(--ck-muted);font-size:13px}
.ck .hub-share__input{width:100%;min-width:0;padding:6px 8px;border:1px solid var(--ck-input-line);border-radius:var(--ck-radius-sm);
  background:var(--ck-white);color:var(--ck-text);font:400 13px/1.4 var(--ck-font-body)}
@media (max-width:1100px){
  .ck .hub-share--line .hub-share__menu{right:auto;left:0}
}

/* Wide screens: the picture and the text on the left (at the text's measure), the boxes on the right, sticky
   under the header. The column keeps clear of the Top and Share buttons where they would reach into it. */
.ck .hub-art__grid{display:grid;grid-template-columns:minmax(0,46rem) 300px;justify-content:space-between;column-gap:var(--ck-space-7);
  align-items:start;margin:var(--ck-space-6) 0 0}
.ck .hub-art__grid > .hub-article__image{grid-column:1;grid-row:1;margin:0 0 var(--ck-space-6)}
.ck .hub-art__main{grid-column:1;grid-row:2;min-width:0}
.ck .hub-art__side{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--ck-sticky-top) + var(--ck-space-5));display:grid;gap:var(--ck-space-5);
  max-height:calc(100vh - var(--ck-sticky-top) - var(--ck-space-5) - var(--ck-space-5));overflow-y:auto;overscroll-behavior:contain;
  transition:top var(--ck-dur-slow) var(--ck-ease),max-height var(--ck-dur-slow) var(--ck-ease)}
@media (max-width:1339px){
  .ck .hub-art__side{max-height:calc(100vh - var(--ck-sticky-top) - var(--ck-space-5) - 9rem)}
}
.ck .hub-side__title{margin:0 0 var(--ck-space-3);color:var(--ck-navy);font:700 12px/1.35 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase}
.ck .hub-takeaways{padding:var(--ck-space-4) var(--ck-space-5);background:var(--ck-cream);border:1px solid var(--ck-line);border-top:3px solid var(--ck-orange);border-radius:var(--ck-radius)}
.ck .hub-takeaways__list{margin:0;padding:0 0 0 1.1em}
.ck .hub-takeaways__list li{margin:0 0 var(--ck-space-2);color:var(--ck-text);font-size:15px;line-height:1.5}
.ck .hub-takeaways__list li:last-child{margin-bottom:0}
.ck .hub-takeaways__list li::marker{color:var(--ck-orange-text)}
.ck .hub-toc{padding:var(--ck-space-4) var(--ck-space-5);background:var(--ck-white);border:1px solid var(--ck-line);border-radius:var(--ck-radius)}
.ck .hub-toc__list,.ck .hub-toc__sub{margin:0;padding:0;list-style:none}
.ck .hub-toc__list{border-left:2px solid var(--ck-line)}
.ck .hub-toc__list a{display:block;margin-left:-2px;padding:6px 8px 6px 12px;border-left:3px solid transparent;color:var(--ck-text);font-size:14px;line-height:1.4;text-decoration:none}
.ck .hub-toc__sub a,.ck .hub-toc__list > li.is-sub > a{padding-left:26px;color:var(--ck-muted);font-size:13.5px}
.ck .hub-toc__list a:hover{color:var(--ck-navy);text-decoration:underline}
.ck .hub-toc__list a[aria-current]{border-left-color:var(--ck-blue);background:var(--ck-light);color:var(--ck-navy);font-weight:600}
.ck .hub-toc-fold{display:none;background:var(--ck-white);border:1px solid var(--ck-line);border-radius:var(--ck-radius)}
.ck .hub-toc-fold__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ck-space-3);min-height:48px;padding:0 var(--ck-space-4);
  color:var(--ck-navy);font:700 12px/1.35 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase;list-style:none;cursor:pointer}
.ck .hub-toc-fold__summary::-webkit-details-marker{display:none}
.ck .hub-toc-fold__summary::marker{content:""}
.ck .hub-toc-fold__summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--ck-dur) ease}
.ck .hub-toc-fold[open] > .hub-toc-fold__summary::after{margin-top:4px;transform:rotate(-135deg)}
.ck .hub-toc-fold > nav{padding:0 var(--ck-space-4) var(--ck-space-4)}
/* Narrower screens: one column at the text's measure, in the page's order: the picture, the boxes (Key
   takeaways, "In this article" folded), then the text */
@media (max-width:1024px){
  .ck .hub-art__grid{grid-template-columns:minmax(0,46rem);justify-content:start;row-gap:var(--ck-space-5)}
  .ck .hub-art__grid > .hub-article__image{grid-row:auto;margin:0}
  .ck .hub-art__main,.ck .hub-art__side{grid-column:1;grid-row:auto}
  .ck .hub-art__side{position:static;gap:var(--ck-space-4);max-height:none;overflow:visible}
  .ck .hub-toc{display:none}
  .ck .hub-toc-fold{display:block}
}

/* Phones: the byline on its own line, then the four actions as one row of icon buttons */
@media (max-width:640px){
  .ck .hub-art__head{padding-top:var(--ck-space-5)}
  .ck .hub-art__meta{flex-direction:column;align-items:flex-start;gap:var(--ck-space-3)}
  .ck .hub-acts{flex-wrap:nowrap}
  .ck .hub-act{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
  .ck .hub-act__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* The reading-progress line: fixed under the header, it moves with the header and fills with the scroll */
.ck .hub-progress{position:fixed;z-index:39;left:0;right:0;top:var(--ck-sticky-top);height:3px;pointer-events:none;transition:top var(--ck-dur-slow) var(--ck-ease)}
.ck .hub-progress[hidden]{display:none}
.ck .hub-progress.is-reading{background:var(--ck-line)}
.ck .hub-progress__bar{display:block;width:100%;height:100%;background:var(--ck-blue);transform:scaleX(0);transform-origin:0 50%}

/* Top and Share at the bottom right */
.ck .hub-float{position:fixed;z-index:30;right:max(var(--ck-space-5),env(safe-area-inset-right));bottom:max(var(--ck-space-5),env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--ck-space-3);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--ck-dur) ease,transform var(--ck-dur) ease,visibility 0s linear var(--ck-dur)}
.ck .hub-float[hidden]{display:none}
.ck .hub-float.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity var(--ck-dur) ease,transform var(--ck-dur) ease,visibility 0s}
.ck .hub-float__btn{position:relative;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:1px solid var(--ck-line-strong);
  border-radius:50%;background:var(--ck-white);color:var(--ck-navy);box-shadow:var(--ck-shadow);list-style:none;cursor:pointer;
  transition:background-color var(--ck-dur) ease,color var(--ck-dur) ease,border-color var(--ck-dur) ease}
.ck .hub-float__btn:hover,.ck .hub-share--float[open] > .hub-float__btn{background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white)}
/* The button's word shows beside it on hover and focus; it stays in the accessibility tree (opacity, never hidden) */
.ck .hub-float__label{position:absolute;top:50%;right:calc(100% + 10px);padding:5px 9px;border-radius:var(--ck-radius-sm);background:var(--ck-navy);
  color:var(--ck-white);font:600 12px/1.2 var(--ck-font-body);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-50%);
  transition:opacity var(--ck-dur) ease}
.ck .hub-float__btn:hover .hub-float__label,.ck .hub-float__btn:focus-visible .hub-float__label{opacity:1}
.ck .hub-share--float[open] .hub-float__label{opacity:0}
.ck .hub-share--float .hub-share__menu{top:auto;bottom:0;right:calc(100% + 10px)}
@media (max-width:640px){
  .ck .hub-float{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));gap:var(--ck-space-2)}
  .ck .hub-float__btn{width:44px;height:44px}
  .ck .hub-float__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .ck .hub-share--float .hub-share__menu{right:0;bottom:calc(100% + 8px)}
}
/* Never over the article text (owner, 2026-10-19): where the buttons would sit on top of it (phones and
   tablets, where the text runs under them; hub-article.js works it out from where both really are) they stay
   out of sight, whichever way the reader scrolls, and show again once the text is behind them. Out of sight
   but not out of reach: the keyboard can still Tab to them, and one with the focus (or its open menu) shows.
   The page's other way back up is the header, which comes back when the reader scrolls up. A link or a field
   that gets the focus is never scrolled in under them where they show (the scroll padding). */
.ck .hub-float.is-shown.is-over-text:not(:focus-within):not(:has(details[open])){opacity:0;pointer-events:none}
@media (max-width:1024px){
  html:has(.hub-float.is-shown){scroll-padding-bottom:8rem}
}

/* Touch screens: 44px tap targets (review R3-07) */
@media (pointer:coarse){
  .ck .hub-act,.ck .hub-share__item{min-height:44px}
  .ck .hub-toc__list a{display:flex;align-items:center;min-height:44px;padding-top:8px;padding-bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  .ck .hub-act,.ck .hub-art__side,.ck .hub-progress,.ck .hub-float,.ck .hub-float.is-shown,.ck .hub-float__btn,.ck .hub-float__label,
  .ck .hub-toc-fold__summary::after{transition:none}
  .ck .hub-float{transform:none}
}

/* Print: only the title, the summary, the line under it (without its buttons), the takeaways and the text */
@media print{
  .env-banner,.ck .review-banner,.ck .skip-link,.ck .ck-head,.ck .ck-footer,.ck .hub-progress,.ck .hub-float,.ck .hub-preview,.ck .hub-staff-edit,
  .ck .hub-topics,.ck .hub-acts,.ck .hub-save-done,.ck .hub-toc,.ck .hub-toc-fold,.ck .hub-art__grid > .hub-article__image,.ck .hub-author,.ck .hub-related{display:none !important}
  .ck .hub-art{margin:0}
  .ck .hub-art__head{padding:0}
  .ck .hub-art__title{font-size:24pt;line-height:1.2}
  .ck .hub-art__head .hub-art__standfirst{font-size:13pt}
  .ck .hub-art__meta{display:block;padding:0 0 8pt;border-top:0}
  .ck .hub-art__grid{display:block;margin:12pt 0 0}
  .ck .hub-art__side{position:static;display:block;max-height:none;overflow:visible}
  .ck .hub-takeaways{margin:0 0 14pt;break-inside:avoid}
  .ck .hub-art__main .hub-article__body{max-width:none;font-size:11pt;line-height:1.55}
  .ck .hub-article__body a{color:inherit}
  .ck .hub-article__body :is(h2,h3){break-after:avoid}
}

/* ---------- Case facts and the post preview 2026-10-20 ---------- */
/* A case study's "Case facts" (article.php .hub-facts, migration hub/010; owner 2026-10-20): a small panel under the line
   below the summary — each fact's label above its value, in a grid that fills the width (one column on a phone) — and
   printed too. The admin's Preview of a post with its unsaved changes (.hub-preview--unsaved): the bar stays in view under
   the header while the page scrolls, so it is always clear that nothing is saved; never printed (.hub-preview). */
.ck .hub-facts{margin:var(--ck-space-5) 0 0;padding:var(--ck-space-4) var(--ck-space-5);background:var(--ck-light);border:1px solid var(--ck-line);
  border-left:3px solid var(--ck-navy);border-radius:var(--ck-radius)}
.ck .hub-facts__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--ck-space-3) var(--ck-space-5);margin:0}
.ck .hub-facts__item{min-width:0}
.ck .hub-facts__item dt{margin:0 0 2px;color:var(--ck-muted);font:600 13px/1.35 var(--ck-font-body)}
.ck .hub-facts__item dd{margin:0;color:var(--ck-text);font:500 15px/1.45 var(--ck-font-body);overflow-wrap:anywhere}
@media (max-width:640px){
  .ck .hub-facts{padding:var(--ck-space-3) var(--ck-space-4)}
  .ck .hub-facts__list{grid-template-columns:1fr}
}
.ck .hub-preview--unsaved{position:sticky;z-index:38;top:var(--ck-sticky-top);margin-top:var(--ck-space-3);background:var(--ck-cream);
  box-shadow:inset 3px 0 0 var(--ck-orange);transition:top var(--ck-dur-slow) var(--ck-ease)}
@media (prefers-reduced-motion:reduce){
  .ck .hub-preview--unsaved{transition:none}
}
@media print{
  .ck .hub-facts{margin:0 0 12pt;padding:6pt 0;background:none;border:0;border-top:1px solid var(--ck-line);border-bottom:1px solid var(--ck-line);break-inside:avoid}
  .ck .hub-facts__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4pt 14pt}
  .ck .hub-facts__item dt{font-size:9pt}
  .ck .hub-facts__item dd{font-size:10.5pt}
}