/* ==========================================================================
   TrustView docs: Cryptomathic CLM branding for the Shibuya theme
   Source: Cryptomathic Brand Identity Guidelines 2026
   ========================================================================== */

/* --- Brand tokens ------------------------------------------------------- */
:root {
  /* Product colour: Certificate Lifecycle Management */
  --cm-clm-red: #E10531;          /* 4.9:1 on white, OK for text */
  --cm-clm-red-light: #FF5C77;    /* dark-mode text/link variant, 6.2:1 on #151E28 */

  /* Primary corporate colours */
  --cm-teal: #029CA5;             /* symbol/decoration only, 3.3:1 on white */
  --cm-teal-text: #028088;        /* teal for text (cryptomathic.com link colour) */
  --cm-black: #151E28;

  /* Neutrals */
  --cm-neutral-1: #272C35;
  --cm-neutral-2: #373B43;
  --cm-neutral-3: #9E9DA3;
  --cm-neutral-4: #D8D7DA;
  --cm-neutral-5: #E9E8E9;

  /* Status / data-visualisation colours */
  --cm-critical: #9A1B1E;
  --cm-error: #D62739;
  --cm-warning: #FBAC18;
  --cm-success: #11AD53;
  --cm-success-dark: #047232;
  --cm-info: #1EAEDA;
}

/* --- Accent scale: pin Shibuya's red accent to the CLM red --------------- */
html[data-accent-color="red"] {
  --accent-9: var(--cm-clm-red);
  --accent-10: #C8042B;
  --accent-11: #B00426;
  --accent-a9: var(--cm-clm-red);
  --accent-a10: #C8042B;
  --accent-a11: #B00426;
  --accent-contrast: #FFFFFF;
}
html.dark[data-accent-color="red"] {
  --accent-9: var(--cm-clm-red);
  --accent-10: var(--cm-clm-red-light);
  --accent-11: var(--cm-clm-red-light);
  --accent-a10: var(--cm-clm-red-light);
  --accent-a11: var(--cm-clm-red-light);
}

/* --- Light mode ----------------------------------------------------------- */
:root {
  --sy-c-heading: var(--cm-black);
  --sy-c-bold: var(--cm-black);
  --sy-c-link: var(--cm-clm-red);
  --sy-c-link-hover: #B00426;

  /* Footer in Cryptomathic Black in both modes */
  --sy-c-foot-background: var(--cm-black);
  --sy-c-foot-text: var(--cm-neutral-4);
  --sy-c-foot-divider: var(--cm-neutral-2);
}

/* --- Dark mode: Cryptomathic Black and neutrals instead of Radix slate ----- */
html.dark {
  --sy-c-background: var(--cm-black);
  --sy-c-background-dropback: rgba(21, 30, 40, 0.85);
  --sy-c-surface: rgba(255, 255, 255, 0.04);
  --sy-c-divider: var(--cm-neutral-1);
  --sy-c-border: var(--cm-neutral-2);
  --sy-c-heading: #FFFFFF;
  --sy-c-bold: #FFFFFF;
  --sy-c-link: var(--cm-clm-red-light);
  --sy-c-link-hover: #FF8A9D;
  --sy-c-foot-background: #0E141B;
  --sy-c-foot-divider: var(--cm-neutral-1);
}

/* --- Typography: Rund Display (brand) ------------------------------------ */
/* Headings follow the guide: Extra Bold, main header capitalised. */
.yue h1,
.sy-main h1 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.yue h2,
.yue h3,
.yue h4 {
  font-weight: 700;
}
/* Header: CLM product lockup = red symbol + product name in Rund Display Extra Bold capitals.
   Shibuya hides the title when a logo is set, so it is shown again here. */
.sy-head-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sy-head-brand img {
  height: 32px;
  width: 32px;
}
.sy-head-brand img + strong,
.sy-head-brand strong {
  display: inline;
  font-family: var(--sy-f-heading);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sy-c-heading);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .sy-head-brand { min-width: 0; }
  /* Same selectors as above so this rule wins; scales down so the full name fits on phones */
  .sy-head-brand img + strong,
  .sy-head-brand strong {
    font-size: clamp(0.7rem, 3.6vw, 0.85rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- Admonitions: brand status colours ---------------------------------- */
/* --color-1 background, --color-2 title band, --color-3 left bar, --color-4 title text */
.admonition.note,
.admonition.seealso {
  --color-1: color-mix(in srgb, var(--cm-info) 11%, transparent);
  --color-2: color-mix(in srgb, var(--cm-info) 23%, transparent);
  --color-3: var(--cm-info);
  --color-4: #0B6E8C;
}
.admonition.important,
.admonition.hint {
  --color-1: color-mix(in srgb, var(--cm-teal) 11%, transparent);
  --color-2: color-mix(in srgb, var(--cm-teal) 23%, transparent);
  --color-3: var(--cm-teal);
  --color-4: var(--cm-teal-text);
}
.admonition.tip {
  --color-1: color-mix(in srgb, var(--cm-success) 11%, transparent);
  --color-2: color-mix(in srgb, var(--cm-success) 23%, transparent);
  --color-3: var(--cm-success);
  --color-4: var(--cm-success-dark);
}
.admonition.warning,
.admonition.caution {
  --color-1: color-mix(in srgb, var(--cm-warning) 13%, transparent);
  --color-2: color-mix(in srgb, var(--cm-warning) 29%, transparent);
  --color-3: var(--cm-warning);
  --color-4: #8A5A00;
}
.admonition.error {
  --color-1: color-mix(in srgb, var(--cm-error) 11%, transparent);
  --color-2: color-mix(in srgb, var(--cm-error) 23%, transparent);
  --color-3: var(--cm-error);
  --color-4: var(--cm-critical);
}
/* Danger uses the darker "critical" red so it reads differently from the CLM brand red */
.admonition.danger,
.admonition.attention {
  --color-1: color-mix(in srgb, var(--cm-critical) 12%, transparent);
  --color-2: color-mix(in srgb, var(--cm-critical) 25%, transparent);
  --color-3: var(--cm-critical);
  --color-4: var(--cm-critical);
}

/* Lighter title text in dark mode */
html.dark .admonition.note,
html.dark .admonition.seealso { --color-4: #67CDEE; }
html.dark .admonition.important,
html.dark .admonition.hint { --color-4: #4FD1D9; }
html.dark .admonition.tip { --color-4: #8BC97B; }
html.dark .admonition.warning,
html.dark .admonition.caution { --color-4: var(--cm-warning); }
html.dark .admonition.error { --color-4: #FF8A95; }
html.dark .admonition.danger,
html.dark .admonition.attention {
  --color-3: var(--cm-error);
  --color-4: #FF8A95;
}

/* --- sphinx-design tabs: active tab in brand red ------------------------ */
.sd-tab-set > input:checked + label {
  border-color: var(--sy-c-link);
  color: var(--sy-c-link);
}
.sd-tab-set > label:hover {
  color: var(--sy-c-link-hover);
}

/* --- sphinx-design "primary" (54 dropdowns use :color: primary) ----------
   Cryptomathic Black with a CLM red edge, so red stays an accent rather than a wall of red */
:root,
.yue {
  --sd-color-primary: var(--cm-black);
  --sd-color-primary-highlight: var(--cm-neutral-1);
  --sd-color-primary-text: #FFFFFF;
}
html.dark,
html.dark .yue {
  --sd-color-primary: var(--cm-neutral-1);
  --sd-color-primary-highlight: var(--cm-neutral-2);
}
details.sd-dropdown > summary.sd-summary-title {
  border-left: 4px solid var(--cm-clm-red) !important;
}

/* --- Inline code: neutral, so it is not mistaken for an error ----------- */
:root {
  --yue-c-code-text: var(--cm-black);
  --yue-c-code-background: var(--cm-neutral-5);
}
html.dark {
  --yue-c-code-text: var(--cm-neutral-5);
  --yue-c-code-background: var(--cm-neutral-1);
}
.yue code.literal,
.yue :not(pre) > code {
  border: 1px solid var(--cm-neutral-4);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
html.dark .yue code.literal,
html.dark .yue :not(pre) > code {
  border-color: var(--cm-neutral-2);
}


/* --- Contrast and structure -------------------------------------------- */
/* Admonitions: thin outline on top of the coloured left bar, so boxes separate from the page */
.admonition {
  border: 1px solid color-mix(in srgb, var(--color-3) 35%, transparent);
  border-left: 4px solid var(--color-3);
  border-radius: 4px;
}
/* Stronger tints in dark mode, where 10% is hard to see on Cryptomathic Black */
html.dark .admonition {
  --color-1: color-mix(in srgb, var(--color-3) 14%, transparent);
  --color-2: color-mix(in srgb, var(--color-3) 30%, transparent);
}

/* sphinx-design cards and dropdown bodies: visible border and a raised surface in dark mode */
.sd-card {
  border: 1px solid var(--cm-neutral-4) !important;
}
html.dark .sd-card {
  border-color: var(--cm-neutral-2) !important;
  background-color: #1C2631;
}

/* Code blocks: outline so they separate from the page background */
.yue div.highlight,
.yue .highlight pre {
  border-radius: 4px;
}
.yue div.highlight {
  border: 1px solid var(--cm-neutral-4);
}
html.dark .yue div.highlight {
  border-color: var(--cm-neutral-2);
}

/* Section headings: divider under h2 to make page structure easier to follow */
.yue h2 {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--sy-c-border);
}

/* Sidebar: current page gets a tinted background, not just red text */
.globaltoc a.current,
.globaltoc li.current > a {
  background-color: color-mix(in srgb, var(--cm-clm-red) 10%, transparent);
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: -8px;
}
html.dark .globaltoc a.current,
html.dark .globaltoc li.current > a {
  background-color: color-mix(in srgb, var(--cm-clm-red) 20%, transparent);
}

/* --- Copy button: brand success green ------------------------------------
   #047232 (guide dark green) on light backgrounds for text contrast, #11AD53 in dark mode */
button.copybtn.success {
  border-color: var(--cm-success-dark);
  color: var(--cm-success-dark);
}
html.dark button.copybtn.success {
  border-color: var(--cm-success);
  color: var(--cm-success);
}

/* --- Search: make highlighted search terms visible -----------------------
   Sphinx highlights the searched words on the target page, but Shibuya's highlight
   colour resolves to transparent. Brand amber (#FBAC18) is used, as on a highlighter pen. */
.highlighted {
  background-color: color-mix(in srgb, var(--cm-warning) 45%, transparent);
  color: inherit;
  border-radius: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cm-warning) 45%, transparent);
}
/* Dark mode: solid brand amber with Cryptomathic Black text, like a highlighter pen (about 9:1 contrast) */
html.dark .highlighted {
  background-color: var(--cm-warning);
  box-shadow: 0 0 0 2px var(--cm-warning);
  color: var(--cm-black);
}

/* --- Spacing: smaller gaps from empty "|" spacer lines in the .rst files -----
   Keeps some breathing room, but much less than a full empty line plus block margins. */
.yue .line-block:has(> .line:only-child > br:only-child) {
  margin-top: 0;
  margin-bottom: 0;
}
.yue .line-block:has(> .line:only-child > br:only-child) > .line {
  height: 0.5rem;
  overflow: hidden;
}

/* --- Back to top: bottom-right, shown after one screen of scrolling (see custom.js) --- */
.back-to-top,
.back-to-top[data-visible=true] {
  display: none;
}
.back-to-top[data-cm-visible=true] {
  display: flex;
}
html .back-to-top {
  left: auto;
  right: 2rem;
  bottom: 2rem;
  transform: none;
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  color: #FFFFFF;
  background: var(--cm-black);
  border: 1px solid var(--cm-neutral-2);
  box-shadow: 0 0.25rem 0.75rem rgba(21, 30, 40, 0.25);
}
html.dark .back-to-top {
  background: var(--cm-neutral-1);
  border-color: var(--cm-neutral-2);
}
html .back-to-top:hover {
  color: #FFFFFF;
  background: var(--cm-clm-red);
  border-color: var(--cm-clm-red);
}

/* --- Welcome card (see custom.js) ---------------------------------------- */
.cm-welcome {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  width: min(23rem, calc(100vw - 2rem));
  padding: 1.1rem 1.25rem 1rem;
  color: var(--sy-c-text);
  background: var(--sy-c-background);
  border: 1px solid var(--cm-neutral-4);
  border-top: 4px solid var(--cm-clm-red);
  border-radius: 6px;
  box-shadow: 0 0.75rem 2rem rgba(21, 30, 40, 0.18);
  font-size: 0.9rem;
  line-height: 1.5;
  animation: cm-welcome-in 0.25s ease-out;
}
html.dark .cm-welcome {
  background: var(--cm-neutral-1);
  border-color: var(--cm-neutral-2);
  border-top-color: var(--cm-clm-red);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
}
.cm-welcome-leaving {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s, transform 0.2s;
}
.cm-welcome-eyebrow {
  margin: 0 0 0.15rem;
  font-family: var(--sy-f-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sy-c-link);
}
.cm-welcome-title {
  margin: 0 0 0.75rem;
  font-family: var(--sy-f-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--sy-c-heading);
}
.cm-welcome-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.cm-welcome-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0 0 0.6rem;
}
.cm-welcome-icon {
  flex: 0 0 3rem;
  display: flex;
  align-items: center;
  min-height: 1.4rem;
  justify-content: center;
  gap: 2px;
  font-size: 1rem;
  color: var(--sy-c-link);
}
.cm-welcome kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.3em;
  font-family: var(--sy-f-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
  color: var(--sy-c-text);
  background: var(--sy-c-surface);
  border: 1px solid var(--sy-c-border);
  border-bottom-width: 2px;
  border-radius: 4px;
}
.cm-welcome-show {
  margin-left: 0.35rem;
  padding: 0;
  font-size: 0.8rem;
  color: var(--sy-c-link);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.cm-welcome-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.cm-welcome-actions button {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.cm-welcome-later {
  color: var(--sy-c-text);
  background: transparent;
  border: 1px solid var(--sy-c-border);
}
.cm-welcome-dismiss {
  color: #FFFFFF;
  background: var(--cm-clm-red);
  border: 1px solid var(--cm-clm-red);
}
.cm-welcome-dismiss:hover {
  background: #B00426;
  border-color: #B00426;
}
.cm-welcome-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  padding: 0 0.3rem;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--sy-c-light);
  background: none;
  border: 0;
  cursor: pointer;
}
.cm-welcome button:focus-visible {
  outline: 2px solid var(--sy-c-link);
  outline-offset: 2px;
}
/* "Show me": a single solid ring around the element the tip refers to - no glow or background.
   The ring pulses gently in size; dark mode uses the lighter brand red for contrast. */
.cm-spotlight {
  --cm-spot: var(--cm-clm-red);
  position: relative;
  z-index: 30;
  border-radius: 6px;
  outline: 3px solid var(--cm-spot);
  outline-offset: 3px;
  animation: cm-spotlight 0.9s ease-in-out 4;
}
html.dark .cm-spotlight {
  --cm-spot: var(--cm-clm-red-light);
}
@keyframes cm-spotlight {
  0%, 100% { outline-offset: 3px; }
  50% { outline-offset: 6px; }
}
/* The theme switch button spans the full header height and its icon is drawn with a CSS mask
   (which would hide an outline), so draw a separate circular ring centred on the icon instead */
.js-theme.cm-spotlight {
  outline: none;
  animation: none;
}
.js-theme.cm-spotlight::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  outline: 3px solid var(--cm-spot);
  pointer-events: none;
  animation: cm-spotlight-circle 0.9s ease-in-out 4;
}
@keyframes cm-spotlight-circle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes cm-welcome-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* No pulsing - the ring simply stays visible while highlighted */
  .cm-welcome, .cm-spotlight, .js-theme.cm-spotlight::after { animation: none; }
}
/* Keep clear of the back-to-top button while the card is open */
body:has(.cm-welcome) .back-to-top[data-cm-visible=true] {
  bottom: calc(2rem + 1rem);
  right: calc(1.5rem + min(23rem, 100vw - 2rem) + 1rem);
}
@media (max-width: 640px) {
  .cm-welcome { right: 1rem; bottom: 1rem; padding: 0.9rem 1rem 0.85rem; font-size: 0.85rem; }
  .cm-welcome-eyebrow { display: none; }
  .cm-welcome-title { font-size: 1.05rem; margin-bottom: 0.5rem; }
  .cm-welcome-list li { margin-bottom: 0.4rem; }
  .cm-welcome-icon { flex-basis: 2.4rem; }
  body:has(.cm-welcome) .back-to-top[data-cm-visible=true] { display: none; }
}

/* --- Content links: brand red text, not body-coloured text ------------------
   Shibuya shows links in the body text colour with only a thin red underline, which is easy
   to miss. Links now use the brand link colour (#E10531 light: 4.9:1 on white / #FF5C77 dark:
   6.2:1 on Cryptomathic Black) with a softer underline that thickens on hover. */
:root {
  --yue-c-link-1: var(--sy-c-link);
  --yue-c-link-2: var(--sy-c-link-hover);
  --yue-c-link-border: color-mix(in srgb, var(--sy-c-link) 45%, transparent);
}
.yue a:hover {
  text-decoration-color: currentColor;
}

/* --- External links in the page content: arrow icon (added via custom.js) -----
   Uses Shibuya's own external-link icon, in the link colour. Internal links stay unmarked. */
.yue a.cm-external::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.2em;
  vertical-align: 0.05em;
  background-color: currentColor;
  -webkit-mask: var(--lucide-external-link-url) no-repeat center / contain;
  mask: var(--lucide-external-link-url) no-repeat center / contain;
}
/* Text for screen readers only (e.g. "opens in a new tab") */
.cm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Download links in the page content: download icon (class added via custom.js) ---
   Same size and colour as the external-link arrow, so the two read as one family. */
.yue a.cm-download::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  --cm-download-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
  -webkit-mask: var(--cm-download-icon) no-repeat center / contain;
  mask: var(--cm-download-icon) no-repeat center / contain;
}

/* --- Welcome card: cm-welcome tap targets of at least 24x24 px (WCAG 2.5.8), easier on touch screens --- */
.cm-welcome-show {
  display: inline-block;
  min-height: 24px;
  padding: 0.2rem 0.1rem;
}
.cm-welcome-close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  top: 0.2rem;
  right: 0.3rem;
}