/* Cookie consent banner, settings dialog and YouTube gate (consent.js, Jira WEB-126).
   Self-contained: it carries its own tokens so it also works on pages without styles.css. */
:root {
  --pcc-ink: #0b1a2e;
  --pcc-ink-2: #3d4c61;
  --pcc-ink-3: #5f6e83;
  --pcc-line: rgba(11, 26, 46, .12);
  --pcc-edge: rgba(11, 26, 46, .42);   /* ≥ 3:1 on white: control outlines (WCAG 1.4.11) */
  --pcc-accent: #0074A2;               /* text accent, AA on white */
  --pcc-fill: #0080B2;
  --pcc-sky: #26BCD7;
  --pcc-mist: #eaf4f9;
  --pcc-font: var(--font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --pcc-ease: cubic-bezier(.16, 1, .3, 1);
}
.pcc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Room for the banner: nothing it covers stays hidden (WCAG 2.2 "Focus Not Obscured"), and the floating
   back-to-top button and app dock ride above it. */
html.pcc-on { scroll-padding-bottom: calc(var(--pcc-h, 0px) + 16px); }
html.pcc-on body { padding-bottom: var(--pcc-h, 0px); }
html.pcc-on .totop, html.pcc-on .dock { bottom: calc(var(--pcc-h, 0px) + 14px); }
html.pcc-on .dock:not(.is-on) { visibility: hidden; } /* parked just below its spot, which is now behind the see-through banner */
main[tabindex="-1"]:focus { outline: none; }

/* ------------------------------ buttons ------------------------------ */
.pcc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; min-width: 124px; border: 0; border-radius: 999px; background: var(--pcc-ink); color: #fff; font: 600 14.5px/1 var(--pcc-font); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: background .2s, box-shadow .2s, transform .15s; }
.pcc-btn:hover { background: #000; }
.pcc-btn:active { position: relative; transform: scale(.97); }
.pcc-btn:active::after { content: ""; position: absolute; inset: -3px -6px; } /* a press keeps a margin round the button until release, so the click still lands (styles.css, .btn) */
.pcc-btn--ghost { background: transparent; color: var(--pcc-ink); box-shadow: inset 0 0 0 1.5px var(--pcc-edge); }
.pcc-btn--ghost:hover { background: rgba(11, 26, 46, .05); box-shadow: inset 0 0 0 1.5px var(--pcc-ink); }
.pcc-btn--light { background: #fff; color: var(--pcc-ink); }
.pcc-btn--light:hover { background: #e9f3f8; }
.pcc-btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.pcc-btn--line:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px #fff; }
.pcc-btn:focus-visible, .pcc-x:focus-visible, .pcc-link:focus-visible, .pcc-gate__x:focus-visible, .pcc-det summary:focus-visible { outline: 3px solid var(--pcc-sky); outline-offset: 3px; }

/* ------------------------------ banner ------------------------------ */
.pcc-bar { position: fixed; z-index: 140; left: 0; right: 0; bottom: 0; padding: 16px clamp(16px, 4vw, 48px) calc(16px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 -1px 0 var(--pcc-line), 0 -24px 48px -28px rgba(11, 26, 46, .4); color: var(--pcc-ink); font: 400 14.5px/1.5 var(--pcc-font); animation: pcc-up .6s var(--pcc-ease) both; }
@keyframes pcc-up { from { transform: translate3d(0, 100%, 0); } }
.pcc-bar__in { width: min(1200px, 100%); margin-inline: auto; display: flex; align-items: center; gap: 14px 40px; }
.pcc-bar__copy { flex: 1 1 auto; min-width: 0; max-width: 82ch; }
.pcc-bar__h { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.pcc-bar__t { margin: 0; color: var(--pcc-ink-2); text-wrap: pretty; }
.pcc-bar__t strong { color: var(--pcc-ink); font-weight: 600; }
.pcc-bar a, .pcc-dlg a { color: var(--pcc-accent); text-decoration: underline; text-underline-offset: 3px; }
.pcc-bar__btns { display: flex; gap: 10px; flex: none; }
.pcc-gpc { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #e8f6ee; color: #0d5c37; font-size: 13.5px; line-height: 1.45; }
.pcc-gpc svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pcc-gpc strong { color: #0a4a2c; }
@media (max-width: 900px) {
  .pcc-bar__in { flex-direction: column; align-items: stretch; }
  .pcc-bar__copy { max-width: none; }
}
@media (max-width: 600px) {
  .pcc-bar { padding-top: 14px; font-size: 13.5px; line-height: 1.45; }
  .pcc-bar__h { font-size: 15px; }
  .pcc-bar__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pcc-bar__btns .pcc-btn { min-width: 0; height: 42px; }
  .pcc-btn--custom { grid-column: 1 / -1; order: 3; }
  .pcc-gpc { font-size: 12.5px; }
}
@media print { .pcc-bar, .pcc-gate { display: none !important; } html.pcc-on body { padding-bottom: 0; } }

/* ------------------------------ footer links (added by consent.js) ------------------------------ */
.foot__links { flex-wrap: wrap; row-gap: 8px; }
.pcc-link { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pcc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .pcc-link { color: #d7dee6; } /* same as the footer's links (styles.css .foot a) */
.foot .pcc-link:hover { color: #fff; }
.pcc-ico { width: 30px; height: 14px; flex: none; }

/* ------------------------------ settings dialog ------------------------------ */
.pcc-dlg { width: min(640px, 100% - 32px); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--pcc-ink); font: 400 15px/1.5 var(--pcc-font); overflow: visible; }
.pcc-dlg::backdrop { background: rgba(5, 12, 22, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pcc-dlg[open] { animation: pcc-in .45s var(--pcc-ease); }
@keyframes pcc-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.98); } }
.pcc-dlg__box { display: flex; flex-direction: column; max-height: min(88vh, 860px); border-radius: 22px; background: #fff; box-shadow: 0 40px 90px -30px rgba(5, 12, 22, .6), 0 0 0 1px var(--pcc-line); overflow: hidden; }
.pcc-dlg__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 14px 24px; border-bottom: 1px solid var(--pcc-line); }
.pcc-dlg__h { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.pcc-x { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: #f1f5f8; color: var(--pcc-ink); cursor: pointer; }
.pcc-x:hover { background: #e3eaf0; }
.pcc-x svg, .pcc-gate__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pcc-dlg__body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 20px; }
.pcc-lead { margin: 0 0 6px; color: var(--pcc-ink-2); font-size: 14.5px; }
.pcc-cat { padding: 16px 0 14px; border-top: 1px solid var(--pcc-line); scroll-margin-top: 8px; }
.pcc-lead + .pcc-cat, .pcc-gpc + .pcc-cat { margin-top: 12px; }
.pcc-cat__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pcc-cat h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.pcc-cat h3:focus { outline: none; }
.pcc-cat > p { margin: 6px 0 0; color: var(--pcc-ink-2); font-size: 14px; line-height: 1.5; }
.pcc-cat > p strong { color: var(--pcc-ink); font-weight: 600; }
.pcc-cat__none, .pcc-cat__gpc { font-style: italic; }
.pcc-cat__gpc { color: #0d5c37 !important; }
.pcc-tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--pcc-mist); color: #005f85; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pcc-tag--muted { background: #f1f3f5; color: var(--pcc-ink-3); }
.pcc-det { margin-top: 10px; }
.pcc-det summary { display: inline-flex; align-items: center; gap: 6px; color: var(--pcc-accent); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; border-radius: 6px; }
.pcc-det summary::-webkit-details-marker { display: none; }
.pcc-det summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.pcc-det[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.pcc-det summary span { color: var(--pcc-ink-3); font-weight: 500; }
.pcc-items { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pcc-items li { padding: 10px 12px; border-radius: 12px; background: #f6f9fb; font-size: 13.5px; line-height: 1.45; color: var(--pcc-ink-2); }
.pcc-items p { margin: 0; }
.pcc-items__n code { font: 600 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--pcc-ink); overflow-wrap: anywhere; }
.pcc-items__m { margin: 2px 0 4px !important; color: var(--pcc-ink-3); font-size: 12.5px; }
.pcc-meta { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--pcc-line); color: var(--pcc-ink-3); font-size: 12.5px; }
.pcc-meta code { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--pcc-ink-2); overflow-wrap: anywhere; }
.pcc-dlg__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pcc-line); background: #f8fafc; }
.pcc-dlg__foot .pcc-btn { min-width: 0; }

/* switch: real checkbox (role="switch") under a drawn track; "On/Off" text so colour isn't the only cue */
.pcc-sw { position: relative; display: inline-flex; align-items: center; gap: 9px; flex: none; cursor: pointer; }
.pcc-sw input { position: absolute; z-index: 1; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; }
.pcc-sw input:disabled { cursor: not-allowed; }
.pcc-sw__ui { position: relative; width: 46px; height: 28px; border-radius: 999px; background: #7d8a9b; transition: background .2s; }
.pcc-sw__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--pcc-ease); }
.pcc-sw input:checked + .pcc-sw__ui { background: var(--pcc-fill); }
.pcc-sw input:checked + .pcc-sw__ui::after { transform: translateX(18px); }
.pcc-sw input:focus-visible + .pcc-sw__ui { outline: 3px solid var(--pcc-sky); outline-offset: 3px; }
.pcc-sw input:disabled + .pcc-sw__ui { opacity: .45; }
.pcc-sw__s { min-width: 2em; font-size: 13px; font-weight: 600; color: var(--pcc-ink-2); }

@media (max-width: 600px) {
  .pcc-dlg { width: 100%; margin: auto 0 0; }
  .pcc-dlg__box { max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .pcc-dlg[open] { animation-name: pcc-sheet; }
  @keyframes pcc-sheet { from { transform: translate3d(0, 40%, 0); opacity: 0; } }
  .pcc-dlg__top { padding: 14px 14px 12px 18px; }
  .pcc-dlg__h { font-size: 18px; }
  .pcc-dlg__body { padding: 12px 18px 16px; }
  .pcc-dlg__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .pcc-dlg__foot [data-pcc="save"] { grid-column: 1 / -1; order: -1; }
}

/* ------------------------------ YouTube gate (over a video facade) ------------------------------ */
.pcc-gated { position: relative; }
.pcc-gate { position: absolute; z-index: 4; inset: 0; container-type: inline-size; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 18px 20px; text-align: center; background: rgba(5, 10, 18, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 400 14px/1.45 var(--pcc-font); animation: pcc-fade .3s ease-out; }
@keyframes pcc-fade { from { opacity: 0; } }
.kb-video > .pcc-gate { inset: 0 0 auto 0; aspect-ratio: 16 / 9; border-radius: 18px; }
.kb-video--card > .pcc-gate { border-radius: 14px; }
.pcc-gate__t { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, .82); }
.pcc-gate__t strong { display: block; margin-bottom: 4px; color: #fff; font-size: 16px; font-weight: 700; }
.pcc-gate__t a { color: #9fe3f0; text-decoration: underline; text-underline-offset: 3px; }
.pcc-gate__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pcc-gate .pcc-btn { height: 40px; min-width: 0; padding: 0 16px; font-size: 14px; }
.pcc-gate__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.pcc-gate__x:hover { background: rgba(255, 255, 255, .22); }
@container (max-width: 400px) {
  .pcc-gate__s { display: none; }
  .pcc-gate { gap: 10px; padding: 12px 40px; }
  .pcc-gate__t strong { margin: 0; font-size: 14.5px; }
  .pcc-gate .pcc-btn { height: 34px; padding: 0 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcc-bar, .pcc-dlg[open], .pcc-gate { animation: none; }
  .pcc-sw__ui::after, .pcc-btn { transition: none; }
}