/* ==========================================================================
   Procapita Research Hub — application stylesheet.

   Layer order matters and mirrors the design prototypes exactly:
     tokens/fonts → colors → typography → spacing → radius → shadows
     → fig-tokens → base → (this file)

   fig-tokens.css deliberately re-points --text-primary at pure black, which is
   what the prototypes render. Do not "fix" it here — it is the intended cascade.
   ========================================================================== */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/shadows.css");
@import url("tokens/fig-tokens.css");
@import url("tokens/base.css");

/* --------------------------------------------------------------------------
   Hub theme overrides — every page in the redesign remaps the brand from
   Procapita Green to the primary blue (design checklist item 41).
   -------------------------------------------------------------------------- */
:root {
  --pc-blue-700: #2c5f9e;
  --pc-lav: #f2f2f9;
  --text-link: var(--pc-blue-primary);

  /* The header bar's height, shared with the dropdown panels so they hang flush beneath it. */
  --pc-header-bar-h: 72px;
  --brand: var(--pc-blue-primary);
  --brand-hover: var(--pc-blue-700);
}

body { background: var(--pc-white); }
a { color: var(--pc-blue-primary); }
a:hover { color: var(--pc-blue-700); }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes pc-blink  { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes pc-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes pc-bounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes pc-fade   { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* --------------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------------- */
.pc-thinscroll::-webkit-scrollbar { width: 6px }
.pc-thinscroll::-webkit-scrollbar-thumb { background: var(--pc-line); border-radius: 3px }

/* ==========================================================================
   Interaction utilities.
   The prototypes express pseudo-classes as `style-hover` / `style-focus`
   attributes. Each distinct rule becomes one class here, values verbatim.
   ========================================================================== */
.hv-btn-blue:hover        { background: var(--pc-blue-700) }
.hv-txt-blue:hover        { color: var(--pc-blue-primary) }
.hv-bg-mist:hover         { background: var(--pc-mist) }

/* Search-suggestion rows are buttons for the keyboard's sake. The reset lives here rather than
   inline because an inline background outranks every :hover rule and would kill the highlight. */
.pc-suggest { width: 100%; font: inherit; text-align: left; background: transparent; border: 0 }
.hv-card:hover            { border-color: var(--pc-blue-primary); box-shadow: var(--shadow-card-hover) }
.hv-card-sm:hover         { border-color: var(--pc-blue-primary); box-shadow: var(--shadow-card) }
.hv-card-purple:hover     { border-color: var(--pc-purple); box-shadow: var(--shadow-card-hover) }
.hv-shadow:hover          { box-shadow: var(--shadow-card-hover) }
.hv-bd-blue:hover         { border-color: var(--pc-blue-primary) }
.hv-bd-blue-txt:hover     { border-color: var(--pc-blue-primary); color: var(--pc-blue-primary) }
.hv-bd-blue-mist:hover    { border-color: var(--pc-blue-primary); background: var(--pc-mist) }
.hv-chip-blue:hover       { border-color: var(--pc-blue-primary); color: var(--pc-blue-primary); background: #e8f0fa }
.hv-chip-green:hover      { border-color: var(--pc-blue-primary); color: var(--pc-green); background: #e6f1ec }
.hv-bd-blue-green:hover   { border-color: var(--pc-blue-primary); color: var(--pc-green) }
.hv-bd-bright:hover       { border-color: var(--pc-green-bright) }
.hv-bright:hover          { border-color: var(--pc-green-bright); color: var(--pc-green-bright) }
.hv-txt-red:hover         { color: #c02626 }

.fc-blue:focus            { border-color: var(--pc-blue-primary) }
.fc-bright:focus          { border-color: var(--pc-green-bright) }
.fw-search:focus-within   { border-color: var(--pc-blue-primary); box-shadow: 0 0 0 3px rgba(54, 119, 194, .18) }

/* ==========================================================================
   Page chrome — sticky header, nav, ticker
   ========================================================================== */
.pc-header {
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xsmall);
}
.pc-header--sticky { position: sticky }
.pc-header--static { position: relative }   /* anchors .pc-navpanel, see below */

.pc-header__bar {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--pc-header-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 64px);
  gap: 24px;
}
.pc-header__left  { display: flex; align-items: center; gap: 16px; min-width: 0 }
.pc-header__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0 }

.pc-hubbadge {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-blue-primary);
  background: #e8f0fa;
  border: 1px solid #cfe0f4;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.pc-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 12px;
  min-width: 0;
  overflow-x: auto;
  flex: 0 1 auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pc-nav::-webkit-scrollbar { display: none }
.pc-nav a {
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text-body);
  border-bottom: 2px solid transparent;
}
.pc-nav a:hover { color: var(--pc-blue-primary); text-decoration: none }
.pc-nav a.is-active {
  font-weight: 600;
  color: var(--pc-blue-primary);
  border-bottom-color: var(--pc-blue-primary);
}

@media (max-width: 1180px) { .pc-nav { gap: 18px } }
@media (max-width: 1060px) { .pc-nav { gap: 14px } .pc-hubbadge { display: none } }
@media (max-width: 900px)  { .pc-nav a { font-size: 14px } }

/* --------------------------------------------------------------------------
   Header dropdowns

   A nav item with CMS dropdown entries renders as a link plus a chevron button.
   The PANEL is a sibling of .pc-header__bar rather than a child of .pc-nav —
   that element is overflow-x:auto so narrow screens can scroll the nav, and an
   absolutely positioned child of it would be clipped at the nav's edge.
   -------------------------------------------------------------------------- */
.pc-nav__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.pc-nav__chev {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-body);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 0;
}
.pc-nav__chev i {
  font-size: 18px;
  transition: transform .18s ease;
}
.pc-nav__chev:hover { color: var(--pc-blue-primary) }
.pc-nav__chev[aria-expanded="true"] { color: var(--pc-blue-primary) }
.pc-nav__chev[aria-expanded="true"] i { transform: rotate(180deg) }

/* The panel spans the header. Closed state uses visibility rather than display so it
   animates AND still leaves the tab order — a hidden-but-focusable panel is the classic
   way a dropdown traps keyboard users in links they cannot see. */
.pc-navpanel {
  position: absolute;
  left: 0;
  right: 0;

  /* Anchored to its own row, not to the header's full height. The header also contains the GCC
     Live ticker; hanging a panel below that would leave a scrolling strip wedged between the
     chevron and its own menu. Overlaying what is beneath while a menu is open is expected. */
  top: var(--pc-header-bar-h);
  z-index: 190;
  background: var(--pc-white);
  border-top: 1px solid var(--pc-line-soft);
  box-shadow: var(--shadow-large);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.pc-navpanel.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.pc-navpanel__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 64px) 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 22px;
}

.pc-navcard {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background-color .15s ease;
}
.pc-navcard:hover { background: var(--pc-mist); text-decoration: none }
.pc-navcard:focus-visible {
  outline: 2px solid var(--pc-blue-primary);
  outline-offset: 2px;
}

.pc-navcard__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  font-size: 22px;
  line-height: 0;
}

.pc-navcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0 }

.pc-navcard__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--pc-navy);
  letter-spacing: var(--ls-display);
}
.pc-navcard__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* A source card. The whole card is the link to the publisher's site — it previously opened a
   publications modal that was empty for 22 of the 28 publishers, so a click did nothing. */
.pc-srccard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}
.pc-srccard:hover { text-decoration: none }
.pc-srccard:focus-visible { outline: 2px solid var(--pc-blue-primary); outline-offset: 2px }

/* The internal labels — Procapita Research, the job-boards composite — are not publishers and
   have nowhere to go, so they must not look clickable. */
.pc-srccard--plain { cursor: default }

.pc-srccard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.pc-srccard__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.pc-srccard__full { font-size: 12px; color: var(--text-muted); line-height: 1.4 }

.pc-srccard__scope {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--pc-cloud);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-srccard__icon { font-size: 15px; color: var(--text-muted); flex-shrink: 0 }
.pc-srccard:hover .pc-srccard__icon { color: var(--pc-blue-primary) }

.pc-srclink {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  line-height: 0;
}
.pc-srclink i { font-size: 15px }
.pc-srclink:hover { color: var(--pc-blue-primary); background: var(--pc-mist) }
.pc-srclink:focus-visible { outline: 2px solid var(--pc-blue-primary); outline-offset: 2px }

/* One column on narrow screens, and cap the height so a long panel cannot cover
   the whole viewport on a short one. */
@media (max-width: 720px) {
  .pc-navpanel__inner {
    grid-template-columns: 1fr;
    padding: 14px clamp(16px, 5vw, 24px) 18px;
    max-height: calc(100vh - var(--pc-header-bar-h));
    overflow-y: auto;
  }
  .pc-navcard { padding: 10px }
  .pc-navcard__icon { width: 40px; height: 40px; font-size: 20px }
}

@media (prefers-reduced-motion: reduce) {
  .pc-navpanel { transition: visibility 0s }
  .pc-navpanel.is-open { transition: visibility 0s }
  .pc-nav__chev i { transition: none }
  .pc-navcard { transition: none }
}

/* Header action controls */
.pc-hbtn {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-body);
  border: 1px solid var(--border);
  background: var(--pc-white);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  cursor: pointer;
}
.pc-hbtn:hover { border-color: var(--pc-blue-primary); color: var(--pc-blue-primary) }

.pc-hicon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  border: 1px solid var(--border);
  background: var(--pc-white);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pc-hicon:hover { border-color: var(--pc-blue-primary); color: var(--pc-blue-primary) }

.pc-signin {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--pc-white);
  background: var(--pc-blue-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  min-height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pc-signin:hover { background: var(--pc-blue-700) }

/* Live ticker */
.pc-tickwrap {
  background: var(--pc-mist);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pc-tickwrap:hover .pc-ticktrack { animation-play-state: paused }
.pc-tick__label {
  display: flex;
  align-items: center;
  gap: 7px;
  /* The hub remaps the brand from Procapita Green to the primary blue; this strip was the last
     place still carrying the green. */
  background: var(--pc-blue-primary);
  color: var(--pc-cream);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 14px;
  height: 100%;
  flex-shrink: 0;
  z-index: 2;
}
.pc-tick__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* Inherits, because this dot is reused outside the ticker — on the Market Pulse live stamps,
     which sit on white, where a hard-coded cream fill was invisible. */
  background: currentColor;
  animation: pc-blink 1.4s infinite;
}
.pc-ticktrack {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: pc-scroll 46s linear infinite;
}
.pc-tick__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--text-body);
  border-right: 1px solid var(--border);
}
.pc-tick__item b     { color: var(--text-primary); font-weight: 600 }
.pc-tick__item small { color: var(--text-muted); font-size: 11px }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.pc-container { max-width: var(--container-max); margin: 0 auto }

/* Standard section rhythm used by every content band. */
.pc-band            { padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 64px) }
.pc-band--tight     { padding: clamp(44px, 5vw, 68px) clamp(20px, 5vw, 64px) }
.pc-band--cta       { padding: clamp(44px, 6vw, 72px) clamp(20px, 5vw, 64px) }
.pc-band--hero      { padding: clamp(44px, 6vw, 76px) clamp(20px, 5vw, 64px) clamp(32px, 4vw, 44px) }

.pc-sec--white { background: var(--pc-white) }
.pc-sec--mist  { background: var(--pc-mist); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }
.pc-sec--lav   { background: var(--pc-lav);  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }
.pc-sec--navy  { background: var(--pc-navy-deep) }

/* Section header: eyebrow + h2 + optional lede on the left, link on the right. */
.pc-sechead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.pc-eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pc-blue-primary);
  margin-bottom: 6px;
}
.pc-eyebrow--purple { color: var(--pc-purple) }
.pc-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.pc-h2--sm { font-size: clamp(22px, 2.4vw, 28px) }
.pc-lede { font-size: 15px; color: var(--text-body); margin-top: 6px }

.pc-morelink {
  font-size: 14px;
  font-weight: 600;
  color: var(--pc-blue-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.pc-morelink:hover { text-decoration: none }

/* Auto-fit card grids. The minimum track width varies per section. */
.pc-grid { display: grid; gap: 12px }
.pc-grid--150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }
.pc-grid--160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }
.pc-grid--170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) }
.pc-grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px }
.pc-grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
.pc-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start }
.pc-grid--320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 4vw, 48px); align-items: start }

/* ==========================================================================
   Labor Compliance — statute list, the calculator's "more tools" link, and the
   request-a-tool panel.
   ========================================================================== */
/* Labor Compliance */
.pc-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pc-lawrow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 2px; border: none; border-bottom: 1px solid var(--pc-cloud);
  background: transparent; cursor: pointer; font-family: var(--font-body);
}
.pc-lawrow:last-child { border-bottom: none; }
.pc-moretools {
  flex-shrink: 0; display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--pc-blue-primary); text-decoration: none;
  background: #e8f1fb; padding: 7px 12px; border-radius: var(--radius-sm); white-space: nowrap;
}
.pc-toolreq {
  margin-top: 14px; padding: 28px 32px;
  background: var(--pc-navy-deep); border-radius: var(--radius-lg);
}
@media (max-width: 900px) {
  .pc-pulse,
  .pc-twoup,
  .pc-libtiles { grid-template-columns: 1fr; }
  .pc-flagship { grid-template-columns: 1fr; }
  .pc-flagship__cover { width: 100%; height: 220px; }
  .pc-flagship__actions { padding: 0 24px 24px; }
  .pc-persona__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Report cover cards
   ========================================================================== */
.pc-repcover {
  display: block;
  position: relative;
  margin: 0 -18px 12px;      /* bleeds past the card padding */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pc-cloud);
}
.pc-repcover img { width: 100%; height: 100%; object-fit: cover; display: block }

/* Stand-in cover, used until artwork is uploaded. A wash in the report's own accent with its
   icon watermarked large — deliberately graphic rather than pretending to be a photograph. */
.pc-repcover__gen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 25% 15%, color-mix(in srgb, var(--cov) 22%, transparent) 0%, transparent 60%),
    linear-gradient(140deg, var(--covbg) 0%, color-mix(in srgb, var(--covbg) 55%, var(--pc-white)) 100%);
}
.pc-repcover__gen i {
  font-size: 74px;
  color: var(--cov);
  opacity: .30;
  transform: translateY(-8px);
}

/* A scrim rather than a flat tint: covers vary wildly in brightness and the title has to stay
   legible on all of them. */
.pc-repcover__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,31,61,.88) 0%, rgba(6,31,61,.45) 42%, rgba(6,31,61,0) 72%);
}

.pc-repcover__meta { position: absolute; left: 16px; right: 16px; bottom: 14px }

/* The flagship sits flush inside its card rather than bleeding past padding, and is wider than
   the grid tiles because it spans a whole column on its own. */
.pc-repcover--flag { margin: 0; aspect-ratio: 16 / 9 }
.pc-repcover__title--flag { font-size: 21px; -webkit-line-clamp: 3; letter-spacing: var(--ls-display) }
.pc-repcover--flag .pc-repcover__year { text-transform: uppercase; letter-spacing: .1em; font-size: 11px }
.pc-repcover--flag .pc-repcover__gen i { font-size: 96px }

/* No screen-reader-only utility existed; external links need one to say where they go. */
.pc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Research Library shortcut rows ---- */
.pc-libshort {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.pc-libshort--inert { cursor: default }

/* The drawer row is a <button> so it activates from the keyboard; this puts the control's own
   typography and box back to the card's. */
button.pc-libshort {
  width: 100%;
  font: inherit;
  text-align: left;
}

.pc-libshort__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}
.pc-libshort__meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px }

.pc-libshort__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pc-blue-primary);
}

.pc-repcover__year {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.82);
  margin-bottom: 3px;
}

.pc-repcover__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--pc-white);
  letter-spacing: var(--ls-display);
}

/* ==========================================================================
   Market Pulse index cards

   Built on .pc-card like every other card on the page; only what is specific to
   an index lives here. The accent arrives as --idx-accent from the CMS.
   ========================================================================== */
/* Two across on a desktop container, one below it. These cards carry four metrics and a
   source row each, so the auto-fit widths used elsewhere on the page pack them too tightly. */
/* ================= MARKET PULSE =================
   Index cards with the accent carried as a coloured top edge, and three metric treatments
   inside, switched with ?pulse=. Declared on the compound selector so pc-card's own border
   shorthand, which is written later in this file, cannot override the accent edge. */
.pc-pulse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}

.pc-card.pc-pulse__idx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 16px;
  border-top: 3px solid var(--idx-accent);
}

.pc-pulse__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }

.pc-pulse__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-primary);
  letter-spacing: var(--ls-display);
  margin: 0;
}

.pc-pulse__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--pc-mist);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-body);
}
.pc-pulse__badge i { font-size: 12px; color: var(--idx-accent) }

.pc-pulse__sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Metric cells float in the card — separation is whitespace and type, not rules or boxes.
   Each leads with the visual its figure honestly supports: a drawn series, a value arc, or
   the number itself at display size. */
.pc-pulse__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 20px 18px;
  margin: 18px 0;
}

.pc-pulse__metric { display: flex; flex-direction: column; gap: 4px; min-width: 0 }

.pc-pulse__viz { display: block; height: 44px; margin-bottom: 4px }
.pc-pulse__viz svg { display: block; height: 100% }
.pc-pulse__viz > svg[viewBox="0 0 100 44"] { width: 100% }

.pc-pulse__ring { width: 44px }

/* A figure with no chart earns its presence through type instead. */
.pc-pulse__metric--flat { justify-content: flex-end }
.pc-pulse__metric--flat .pc-pulse__value { font-size: 26px }

@media (max-width: 900px) {
  .pc-pulse { grid-template-columns: 1fr }
}

@media (max-width: 640px) {
  .pc-pulse__metrics { grid-template-columns: 1fr 1fr }
  .pc-pulse__value { font-size: 19px }
  .pc-pulse__metric--flat .pc-pulse__value { font-size: 22px }
}

/* ==========================================================================
   Cards & data display
   ========================================================================== */
.pc-card {
  background: var(--pc-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.pc-card--lg { border-radius: var(--radius-lg) }
.pc-card--xl { border-radius: var(--radius-xl) }

/* Metric tile: label, big tabular figure, delta pill, source footnote. */
.pc-metric        { padding: 15px }
.pc-metric__k     { font-size: 12px; color: var(--text-body); margin-bottom: 8px; display: flex; align-items: center; gap: 6px }
.pc-metric__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-primary);
  letter-spacing: var(--ls-display);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.pc-metric__src   { font-size: 10px; color: var(--text-muted); margin-top: 8px }

.pc-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.pc-delta--up   { background: #e6f1ec; color: var(--pc-green) }
.pc-delta--down { background: #fdecec; color: #c02626 }

/* Pill chips (trending searches, filters, interests) */
.pc-chip {
  font-size: 13px;
  font-family: var(--font-body);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--pc-white);
  color: var(--text-body);
  white-space: nowrap;
  cursor: pointer;
}
.pc-chip.is-on {
  border-color: var(--pc-blue-primary);
  background: #e8f0fa;
  color: var(--pc-blue-primary);
  font-weight: 600;
}
.pc-chip--static { cursor: default; font-size: 12px; color: var(--text-body); padding: 3px 9px }

/* A source chip showing the publisher's logo instead of its name.
   Logos arrive in wildly different aspect ratios and intrinsic sizes, so the height is pinned and
   the width left to follow — with a max so a long wordmark cannot run away with the row. */
.pc-chip--logo { padding: 4px 10px; display: inline-flex; align-items: center }
.pc-srclogo {
  height: 17px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  display: block;
}

/* The same mark at the size the source list uses, where it replaces a 14px display-font name. */
.pc-srclogo--lg { height: 22px; max-width: 150px }

/* Buttons used inside page content */
.pc-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
}
.pc-btn--primary { color: var(--pc-white); background: var(--pc-blue-primary); padding: 10px 18px }
.pc-btn--primary:hover { background: var(--pc-blue-700) }
.pc-btn--outline {
  color: var(--pc-blue-primary);
  background: var(--pc-white);
  border: 1px solid var(--pc-blue-primary);
  padding: 9px 16px;
}
.pc-btn--outline:hover { background: var(--pc-mist) }
.pc-btn--block { width: 100%; justify-content: center; padding: 13px; font-size: 15px }

/* Square icon tile that fronts most cards and list rows. */
.pc-icontile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.pc-icontile--34 { width: 34px; height: 34px; font-size: 17px }
.pc-icontile--38 { width: 38px; height: 38px; font-size: 17px }
.pc-icontile--42 { width: 42px; height: 42px; font-size: 20px }
.pc-icontile--46 { width: 46px; height: 46px; font-size: 22px }
.pc-icontile--48 { width: 48px; height: 48px; font-size: 22px }
.pc-icontile--56 { width: 56px; height: 56px; font-size: 26px }

/* Form controls */
.pc-input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 13px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  background: var(--pc-white);
}
.pc-input--num { font-variant-numeric: tabular-nums }

.pc-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 32px 0 13px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--pc-white);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
/* Dark variant used in the personalisation bar */
.pc-select--dark {
  height: 38px;
  color: var(--pc-white);
  background-color: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  font-size: 13px;
  width: auto;
}
.pc-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  display: block;
}

/* Segmented two-button toggle */
.pc-seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 42px;
}
.pc-seg--dark  { border-color: rgba(255, 255, 255, .2); height: 38px }
.pc-seg button {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-body);
  padding: 0 15px;
}
.pc-seg button.is-on { background: var(--pc-blue-primary); color: var(--pc-white); font-weight: 600 }
.pc-seg--dark button        { color: var(--pc-slate-300) }
.pc-seg--dark button.is-on  { background: var(--pc-blue-primary); color: var(--pc-white); font-weight: 600 }

/* ==========================================================================
   Modals / overlays
   ========================================================================== */
.pc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 31, 61, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.pc-overlay[hidden] { display: none }
.pc-modal {
  background: var(--pc-white);
  border-radius: var(--radius-xl);
  max-width: 100%;
  box-shadow: var(--shadow-xlarge);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pc-fade .18s ease both;
}
.pc-modal__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pc-modal__body { overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px }
.pc-modal__x {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  display: flex;
}

/* Z-index ladder, matching the prototypes. */
.pc-overlay--lib   { z-index: 410 }
.pc-overlay--gov   { z-index: 410 }
.pc-overlay--gate  { z-index: 420 }
.pc-overlay--law   { z-index: 430 }
.pc-overlay--pref  { z-index: 430 }

/* ==========================================================================
   AI research assistant
   ========================================================================== */
.pc-chat-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: var(--pc-blue-primary);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--pc-white);
  z-index: 300;
  box-shadow: var(--shadow-large);
}
.pc-chat-fab:hover { background: var(--pc-blue-700) }

.pc-chat {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 390px;
  max-width: calc(100vw - 32px);
  background: var(--pc-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  z-index: 300;
  overflow: hidden;
  max-height: 560px;
  box-shadow: var(--shadow-xlarge);
}
.pc-chat[hidden] { display: none }
.pc-chat__head { background: var(--pc-navy-deep); padding: 16px 18px; display: flex; align-items: center; gap: 11px }
.pc-chat__msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 11px }
.pc-chat__foot { padding: 13px 15px; border-top: 1px solid var(--border); display: flex; gap: 9px }
.pc-typing {
  display: flex;
  gap: 4px;
  padding: 10px 13px;
  background: var(--pc-mist);
  border-radius: 12px 12px 12px 3px;
  align-self: flex-start;
}
.pc-typing span {
  width: 6px;
  height: 6px;
  background: var(--pc-blue-primary);
  border-radius: 50%;
  animation: pc-bounce 1.2s infinite;
}
.pc-typing span:nth-child(2) { animation-delay: .2s }
.pc-typing span:nth-child(3) { animation-delay: .4s }

/* The starter strip hides once the conversation begins. The display lives here rather than
   inline because an inline declaration outranks the UA's [hidden] rule and the strip would keep
   its ~107px of a 560px panel forever — the same trap already patched on .pc-chat. */
.pc-starters {
  padding: 0 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pc-starters[hidden] { display: none }

.pc-starter {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-body);
  background: var(--pc-white);
}
.pc-starter:hover { border-color: var(--pc-blue-primary); color: var(--pc-blue-primary); background: #e8f0fa }

/* Flag swatch wrapper used by law/source lists. */
.pc-flag {
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  display: inline-flex;
  flex-shrink: 0;
}

/* Respect reduced-motion for the decorative loops. */
@media (prefers-reduced-motion: reduce) {
  .pc-ticktrack,
  .pc-tick__dot,
  .pc-typing span,
  .pc-modal { animation: none !important }
}