/* ==========================================================================
   LightlySSL docs — the LightlyStudio docs layout in the LightlySSL colors.

   Furo exposes most of the palette as CSS custom properties, which are set in
   conf.py. This file covers what those variables cannot reach: the display
   face on headings, the navy code panel, and the sidebar rhythm.
   ========================================================================== */

:root {
  --ls-font-display: "IBM Plex Sans", system-ui, sans-serif;
  --ls-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* The code panel is the brand navy in both schemes, so it does not flip. */
  --ls-code-surface: #092643;
  --ls-code-line: #17395a;
  --ls-code-ink: #cfe3eb;
  --ls-code-label: #7f949e;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--ls-font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
}

h1 {
  font-size: 2.15rem;
  letter-spacing: -0.022em;
  line-height: 1.12;
}

h2 {
  font-size: 1.5rem;
  margin-top: 2.2rem;
}

h3 {
  font-size: 1.2rem;
}

article {
  line-height: 1.68;
}

/* ==========================================================================
   Layout on wide screens
   ========================================================================== */

/* Furo centres the column on the page by sizing the sidebar as 50% - 26em, so
   on a wide screen the spare width becomes empty gray space left of the
   navigation. As in the Studio docs, the sidebar instead keeps its natural 15em
   at the left edge, and the column and table of contents are centred in the
   space that remains. Below 63em Furo turns the sidebar into a drawer. */
@media (min-width: 63em) {
  .sidebar-drawer {
    width: auto;
  }

  .main {
    justify-content: center;
  }
}

/* Text, code, figures and admonitions share one column, so centred figures line
   up with the text around them. Above Furo's 82em breakpoint the column grows
   with the window from Furo's 46em up to 50em, about the width of the Studio
   docs column, leaving room for the 15em sidebar and 15em table of contents. */
@media (min-width: 82em) {
  .content {
    width: clamp(46em, 100vw - 37em, 50em);
  }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar-tree .reference {
  border-radius: 8px;
  font-size: 0.88rem;
}

/* Current page: a tinted pill in the brand teal, as in the Studio docs. */
.sidebar-tree .current-page > .reference {
  background: var(--ls-accent-tint);
  color: var(--color-brand-content);
  font-weight: 600;
}

/* Section labels and the "On this page" title: small uppercase mono, as in the
   Studio docs. */
.sidebar-tree .caption,
.toc-title {
  color: var(--color-sidebar-caption-text);
  font-family: var(--ls-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Expanded sections hang off a guide line so the nesting reads at a glance. */
.sidebar-tree .toctree-l1 > ul {
  border-left: 1px solid var(--color-sidebar-background-border);
  margin-left: calc(var(--sidebar-item-spacing-horizontal) + 0.25rem);
}

/* The search box sits on the gray sidebar as a white field. */
.sidebar-search-container {
  border: 1px solid var(--color-sidebar-background-border);
  border-radius: 8px;
  /* The sidebar is a fixed-height flex column; without this the box shrinks
     when the navigation below it is long. */
  flex-shrink: 0;
  margin: 0.25rem var(--sidebar-item-spacing-horizontal) 0.75rem;
  overflow: hidden;
}

/* Repository card under the search box, after the Material for MkDocs source
   link: GitHub mark, repository name, and star and fork counts once
   repo-stats.js has them. */
.ls-repo {
  align-items: center;
  border: 1px solid var(--color-sidebar-background-border);
  border-radius: 8px;
  color: var(--color-sidebar-link-text);
  display: flex;
  flex-shrink: 0;
  gap: 0.6rem;
  margin: 0 var(--sidebar-item-spacing-horizontal) 0.75rem;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ls-repo:hover {
  border-color: var(--color-brand-content);
  color: var(--color-brand-content);
}

.ls-repo > .sd-octicon {
  flex-shrink: 0;
  height: 1.4rem;
  width: 1.4rem;
}

.ls-repo-body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.ls-repo-name {
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-repo-facts {
  color: var(--color-foreground-muted);
  display: flex;
  font-family: var(--ls-font-mono);
  font-size: 0.72rem;
  gap: 0.7rem;
}

/* display: flex above would otherwise override the hidden attribute. */
.ls-repo-facts[hidden] {
  display: none;
}

.ls-repo-fact {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
}

/* Banner links use the logo turquoise so they read on the navy. */
.announcement a {
  color: #2cc2bd;
}

/* The logo's green-to-blue gradient as a strip under the banner. */
.announcement {
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #37d8a4, #2cc2bd, #2baeca) 1;
}

/* ==========================================================================
   Code
   ========================================================================== */

/* Fenced blocks are the brand navy panel in both schemes. */
div.highlight,
div.highlight pre {
  background-color: var(--ls-code-surface) !important;
  border-radius: 8px;
  color: var(--ls-code-ink);
}

div.highlight pre {
  font-family: var(--ls-font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 1rem 1.1rem;
}

/* Syntax colours built from the logo greens and blues rather than a generic
   rainbow. The code panel is navy in both schemes, so these apply in both.
   body[data-theme] matches every scheme and gives the rules the weight of
   Furo's dark-mode Pygments rules, which load earlier and lose on order. */
body[data-theme] .highlight .k,
body[data-theme] .highlight .kn,
body[data-theme] .highlight .kd,
body[data-theme] .highlight .ow {
  color: #2cc2bd;
}

body[data-theme] .highlight .s,
body[data-theme] .highlight .s1,
body[data-theme] .highlight .s2,
body[data-theme] .highlight .sd {
  color: #37d8a4;
}

body[data-theme] .highlight .c,
body[data-theme] .highlight .c1,
body[data-theme] .highlight .cm {
  color: var(--ls-code-label);
  font-style: normal;
}

body[data-theme] .highlight .nf,
body[data-theme] .highlight .nc,
body[data-theme] .highlight .nd {
  color: #7fd1f2;
}

body[data-theme] .highlight .mi,
body[data-theme] .highlight .mf,
body[data-theme] .highlight .n,
body[data-theme] .highlight .p,
body[data-theme] .highlight .o {
  color: var(--ls-code-ink);
}

body[data-theme] .highlight .nb {
  color: #9ad9ea;
}

/* Copy button sits on the navy panel, so it needs light ink. */
.highlight button.copybtn {
  border-radius: 6px;
  color: var(--ls-code-label);
}

.highlight button.copybtn:hover {
  color: var(--ls-code-ink);
}

/* Inline code stays on the page surface. */
code.literal {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-background-border);
  border-radius: 6px;
  color: var(--color-foreground-primary);
  font-size: 0.84em;
  padding: 0.1em 0.35em;
}

/* ==========================================================================
   Admonitions and tables
   ========================================================================== */

/* A tinted card with a thin border in the admonition's own colour, as in the
   Studio docs, instead of Furo's left bar and title band. --ls-adm carries the
   colour Furo assigns to each type. */
.admonition {
  --ls-adm: var(--color-admonition-title);
  background: color-mix(in srgb, var(--ls-adm) 7%, var(--color-background-primary));
  border: 1px solid color-mix(in srgb, var(--ls-adm) 30%, var(--color-background-primary));
  border-radius: 9px;
  box-shadow: none;
  font-size: 0.92rem;
  padding: 0.85rem 1rem;
}

.admonition.note { --ls-adm: var(--color-admonition-title--note); }
.admonition.seealso { --ls-adm: var(--color-admonition-title--seealso); }
.admonition.tip { --ls-adm: var(--color-admonition-title--tip); }
.admonition.hint { --ls-adm: var(--color-admonition-title--hint); }
.admonition.important { --ls-adm: var(--color-admonition-title--important); }
.admonition.warning { --ls-adm: var(--color-admonition-title--warning); }
.admonition.caution { --ls-adm: var(--color-admonition-title--caution); }
.admonition.attention { --ls-adm: var(--color-admonition-title--attention); }
.admonition.danger { --ls-adm: var(--color-admonition-title--danger); }
.admonition.error { --ls-adm: var(--color-admonition-title--error); }

/* Doubled class to match the specificity of Furo's per-type title rules, such as
   .admonition.seealso > .admonition-title, which set the title band. */
.admonition.admonition > .admonition-title {
  background: transparent;
  font-family: var(--ls-font-display);
  font-weight: 600;
  margin: 0 0 0.35rem;
  padding: 0 0 0 1.6rem;
}

.admonition > .admonition-title::before {
  left: 0;
}

.admonition > .admonition-title::after {
  color: inherit;
}

.admonition > :last-child {
  margin-bottom: 0;
}

table.docutils {
  border-radius: 8px;
  font-size: 0.9rem;
}

table.docutils th {
  background: var(--color-background-secondary);
  font-weight: 600;
}

/* ==========================================================================
   Sphinx-Gallery download links
   ========================================================================== */

/* Sphinx-Gallery draws each download as a bold monospace link on a yellow
   gradient, stacked and centred. Here they sit in one row as outlined buttons,
   framed like the pager cards. */
.sphx-glr-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0;
}

div.sphx-glr-download {
  margin: 0;
}

div.sphx-glr-download p {
  margin: 0;
}

div.sphx-glr-download a {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-background-border);
  border-radius: 8px;
  color: var(--color-foreground-primary);
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}

div.sphx-glr-download a:hover {
  background: var(--ls-accent-tint);
  border-color: var(--color-brand-content);
  box-shadow: none;
  color: var(--color-brand-content);
}

div.sphx-glr-download a::before {
  color: var(--color-brand-content);
  content: "↓ ";
}

div.sphx-glr-download code.download {
  color: inherit;
  font-family: var(--ls-font-display);
  font-size: 0.85rem;
  font-weight: inherit;
  padding: 0;
}

/* ==========================================================================
   Cards and buttons from sphinx-design
   ========================================================================== */

/* sphinx-design marks its shadow, title weight and button colours !important,
   so only the overrides of those carry it here. The rest win on load order. */

/* Cards framed like the pager; the border turns teal on hover. */
.sd-card {
  background: var(--color-background-primary);
  border-color: var(--color-background-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sd-card:hover {
  border-color: var(--color-brand-content);
  box-shadow: 0 6px 20px -8px rgba(9, 38, 67, 0.25) !important;
}

.sd-card-title {
  font-size: 1.02rem;
  font-weight: 600 !important;
}

.sd-card-body {
  color: var(--color-foreground-secondary);
  font-size: 0.92rem;
}

.sd-card-title .sd-octicon {
  color: var(--color-brand-content);
}

/* Product logos in card titles, at the octicons' 1.2em. */
.sd-card-title img.ls-product-mark {
  height: 1.2em;
  margin-right: 0.15em;
  vertical-align: -0.2em;
  width: auto;
}

.sd-btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
}

/* --ls-btn-ink (conf.py) keeps the label readable in both schemes: white text on
   the bright dark-mode teal would be 2.2:1. */
.sd-btn-primary {
  background: var(--color-brand-content) !important;
  border-color: var(--color-brand-content) !important;
  color: var(--ls-btn-ink) !important;
}

.sd-btn-primary:hover,
.sd-btn-primary:focus {
  background: color-mix(in srgb, var(--color-brand-content) 86%, #000) !important;
  border-color: color-mix(in srgb, var(--color-brand-content) 86%, #000) !important;
  color: var(--ls-btn-ink) !important;
}

/* sphinx-design fills outline buttons on hover and turns the text white, which
   vanishes on the pale tint. Keep the teal text and border instead. */
.sd-btn-outline-primary,
.sd-btn-outline-primary:hover,
.sd-btn-outline-primary:focus {
  border-color: var(--color-brand-content) !important;
  color: var(--color-brand-content) !important;
}

.sd-btn-outline-primary:hover,
.sd-btn-outline-primary:focus {
  background: var(--ls-accent-tint) !important;
}

/* ==========================================================================
   Start page
   ========================================================================== */

/* The section title names the page for the browser tab, search and screen
   readers; the hero shows its own, larger title. So the h1 is hidden visually
   but stays in the accessibility tree. */
section.ls-landing > h1 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ls-section-title {
  margin-top: 2.6rem;
}

/* Hero: a pale teal panel with navy text in light mode, the navy panel in dark
   mode. The --ls-hero-* colors are set per scheme in conf.py, which Furo applies
   for both an explicit dark theme and "auto" on a dark OS. The terminal stays
   dark in both, like the code panels. */
.ls-navy {
  background: var(--ls-hero-bg);
  border: 1px solid var(--ls-hero-border);
  border-radius: 16px;
  /* Furo floats the page icons at the top right; the hero starts below them. */
  clear: both;
  color: var(--ls-hero-ink);
  margin: 0.75rem 0 2.2rem;
  padding: 2.6rem 2.4rem 2.2rem;
}

.ls-hero-logo {
  height: 34px;
}

.ls-navy .ls-hero-title {
  color: var(--ls-hero-title);
  font-family: var(--ls-font-display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 1rem 0 0.6rem;
  max-width: 34rem;
}

.ls-navy .ls-lead {
  color: var(--ls-hero-ink);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
  max-width: 40rem;
}

.ls-navy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.8rem;
}

.ls-navy a.ls-btn {
  border-radius: 8px;
  display: inline-block;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
}

.ls-navy a.ls-btn-primary {
  background: var(--color-brand-content);
  color: var(--ls-btn-ink);
}

.ls-navy a.ls-btn-ghost {
  background: transparent;
  border: 1px solid var(--ls-hero-ghost-border);
  color: var(--ls-hero-ghost-ink);
}

.ls-navy a.ls-btn:hover {
  filter: brightness(1.05);
}

.ls-navy a.ls-btn-ghost:hover {
  border-color: var(--color-brand-content);
}

/* A terminal window with the install and first-run commands. */
.ls-terminal {
  background: #061b30;
  border: 1px solid var(--ls-code-line);
  border-radius: 12px;
  box-shadow: 0 18px 36px -22px rgba(9, 38, 67, 0.55);
  max-width: 100%;
  overflow: hidden;
}

.ls-terminal-bar {
  border-bottom: 1px solid var(--ls-code-line);
  display: flex;
  gap: 6px;
  padding: 10px 12px;
}

.ls-terminal-bar span {
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.ls-terminal-bar span:nth-child(1) { background: #ff5f57; }
.ls-terminal-bar span:nth-child(2) { background: #febc2e; }
.ls-terminal-bar span:nth-child(3) { background: #28c840; }

.ls-terminal pre {
  background: transparent;
  color: var(--ls-code-ink);
  font-family: var(--ls-font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0;
  overflow-x: auto;
  padding: 1rem 1.1rem;
}

.ls-terminal .p { color: #2cc2bd; }
.ls-terminal .c { color: var(--ls-code-label); }

/* What's new: a large card for the headline release, smaller ones below. */
.ls-pill {
  background: var(--ls-accent-tint);
  border-radius: 999px;
  color: var(--color-brand-content);
  display: inline-block;
  font-family: var(--ls-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
}

.ls-feature {
  align-items: center;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-background-border);
  border-radius: 14px;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin: 0 0 1.25rem;
  padding: 1.6rem;
}

.ls-feature-media img {
  border-radius: 10px;
  display: block;
  width: 100%;
}

.ls-feature-title {
  color: var(--color-foreground-primary);
  font-family: var(--ls-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}

.ls-feature-body p {
  margin: 0 0 0.7rem;
}

.ls-feature-note {
  color: var(--color-foreground-muted);
  font-size: 0.88rem;
}

.ls-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.ls-feature-actions p {
  margin: 0;
}

@media (max-width: 60em) {
  .ls-feature {
    grid-template-columns: 1fr;
  }

  .ls-feature-media {
    max-width: 22rem;
  }
}

.ls-news .ls-news-title {
  color: var(--color-foreground-primary);
  font-family: var(--ls-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

/* All methods: one wrapping row of chips. The family containers flatten into it
   so method-filter.js can hide a whole family at once. */
.ls-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ls-chips .ls-fam-item,
.ls-chips .ls-fam-item p {
  display: contents;
}

.ls-chips a.reference {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-background-border);
  border-radius: 999px;
  color: var(--color-foreground-primary);
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
}

.ls-chips a.reference:hover {
  background: var(--ls-accent-tint);
  border-color: var(--color-brand-content);
  color: var(--color-brand-content);
}

/* ==========================================================================
   Family filter and method cards
   ========================================================================== */

/* A row of tabs on the start page and the Models page; the active one is a
   tinted pill like the current sidebar page. _static/method-filter.js appends
   the count to each tab. */
.ls-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1.5rem 0 1rem;
}

.ls-filter-btn {
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-foreground-secondary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
}

.ls-filter-btn:hover {
  color: var(--color-brand-content);
}

/* method-filter.js disables the button of a family without methods. */
.ls-filter-btn:disabled {
  color: var(--color-foreground-muted);
  cursor: default;
  opacity: 0.5;
}

.ls-filter-btn.is-active {
  background: var(--ls-accent-tint);
  border-color: color-mix(in srgb, var(--color-brand-content) 30%, transparent);
  color: var(--color-brand-content);
  font-weight: 600;
}

.ls-filter-count {
  color: var(--color-foreground-muted);
  font-family: var(--ls-font-mono);
  font-size: 0.72rem;
}

.ls-filter-btn.is-active .ls-filter-count {
  color: inherit;
}

/* On the Models page each item is a sphinx-design column, which sets
   display: flex !important. */
.ls-filter-target .is-hidden {
  display: none !important;
}

/* The frame, title and body text come from the shared card rules above. */
.ls-method-card .sd-card-title {
  margin-bottom: 0.35rem;
}

/* The tags paragraph is raw HTML, so sphinx-design's last-child reset for card
   text does not reach it. */
.ls-method-card .sd-card-body p:last-child {
  margin-bottom: 0;
}

.ls-method-meta {
  color: var(--color-foreground-muted);
  font-family: var(--ls-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

/* !important beats sphinx-design's .sd-sphinx-override p { margin-top: 0 }. */
.ls-method-tags {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.7rem !important;
}

.ls-method-tags span {
  background: var(--ls-accent-tint);
  border-radius: 999px;
  color: var(--color-brand-content);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
}

/* ==========================================================================
   Previous / next pager
   ========================================================================== */

/* Two cards on one row, framed like the code panels and admonitions. Furo floats
   the links and renders "next" before "previous", so the grid columns put them
   back in reading order. A page with only one neighbour keeps its side. */
.related-pages {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
}

.related-pages a.prev-page,
.related-pages a.next-page {
  border: 1px solid var(--color-background-border);
  border-radius: 8px;
  float: none;
  grid-row: 1;
  max-width: none;
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease;
}

.related-pages a.prev-page {
  grid-column: 1;
}

.related-pages a.next-page {
  grid-column: 2;
  justify-content: flex-end;
}

.related-pages a:hover {
  border-color: var(--color-brand-content);
}

.related-pages a svg.furo-related-icon,
.related-pages a svg.furo-related-icon > use {
  color: var(--color-foreground-muted);
}

/* The title carries the card, set like the headings. Furo's hover rule still turns
   it link blue; the border change already marks hover, so no underline. */
.related-pages .page-info .title {
  color: var(--color-foreground-primary);
  font-family: var(--ls-font-display);
  font-size: 1rem;
  font-weight: 600;
}

.related-pages a:hover .page-info .title {
  text-decoration: none;
}