/*

TWEETS

This plugin replaces bare text urls to
twitter with an embedded tweet. The CSS
below is used to style the raw blockquote
while the embed loads. When the embed is
ready the blockquote is hidden.

*/

blockquote.twitter-tweet {
  display: block;
  width: 500px;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1em 0;
  border-radius: 5px;
  border: 1px solid #E1E8ED;
  padding: 32px 16px 32px;
  background: #fff;
  color: #aaa;
  font: normal 12px / 1.33 "Helvetica Neue", sans-serif;
}

blockquote.twitter-tweet p {
  color: rgb(41, 47, 51);
  font: inherit;
  margin: 36px 0 12px;
}/*

VIDEO EMBEDS

This plugin replaces bare text urls to
videos with an embedded player. The CSS
below ensures the wrapping which makes
the player fully responsive renders correctly

*/

.videoContainer {
  position: relative;
  height: 0;
  overflow: hidden;
}

.videoContainer.fourthree {
  padding-bottom: 70%;
}

.videoContainer.widescreen {
  padding-bottom: 56.25%;
}

.videoContainer iframe,
.videoContainer object,
.videoContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0!important
}

pre code.hljs{overflow-x:auto;display:block;overflow:auto;padding:1em;margin:1em 0;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.hljs{color:#586e75;background:#fdf6e3}.hljs ::selection,.hljs::selection{background-color:#93a1a1;color:#586e75}.hljs-comment{color:#839496}.hljs-tag{color:#657b83}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#586e75}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#dc322f}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#cb4b16}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#b58900}.hljs-strong{font-weight:700;color:#b58900}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#859900}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#2aa198}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#268bd2}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#6c71c4}.hljs-emphasis{color:#6c71c4;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#d33682}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}.hljs,code.hljs{padding:0;margin:0}
/* ==============================
   Columns / Main layout
   ============================== */
.column:first-child {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  min-width: var(--sidebar-width);
  flex-basis: calc((100vw - var(--main-width)) / 1.8);
  height: 100vh;
  overflow: hidden;
  padding: 42px 0 0;
  font-size: var(--small-font-size);
}

.column a {
  color: var(--text-color);
  text-decoration: none;
}

.column a.active {
  color: var(--link-color);
}

/* ==============================
   Navigation shell
   ============================== */
.navigation {
  /* Fixed sidebar column; inner .sidebar includes +scrollbar width */
  width: var(--sidebar-width);
  overflow: hidden;
  margin-left: 12px;
}

.navigation a,
.navigation button {
  opacity: 1;
  transition: opacity 0.1s ease-in;
}

.navigation a:hover,
.navigation button:hover
 {
  opacity: 0.7;
}

.navigation > a {
  margin: 12px 0 24px;
}

/* Title within navigation */
.navigation h2 {
  display: flex;
  align-items: center;
  color: var(--text-color);
  font-weight: 600;
  margin: 0;
  font-size: inherit;
}

.navigation h2 img {
  margin: 0 7px 0 1px;
}

/* Scrollable sidebar column. Extra 17px ensures no layout shift when scrollbar appears */
.navigation .sidebar {
  visibility: hidden;
  width: calc(var(--sidebar-width) + 17px); /* keep to accommodate scrollbar */
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.navigation .sidebar > :last-child {
  margin-bottom: 40px;
}

.sidebar.initialized {
  visibility: visible;
  transition: visibility 0s;
}

/* ==============================
   Sidebar list reset and spacing
   ============================== */
.sidebar,
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar {
  padding-left: 6px;
}

.sidebar ul {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-left: 16px;
}

.sidebar li {
  margin: 0;
  margin-right: 12px;
  padding: 0;
  cursor: pointer;
}

/* ==============================
   Sidebar items (links + buttons)
   ============================== */
.sidebar a,
.sidebar button {
  display: block;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  line-height: inherit;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  border: none;
  background: none;
  line-height: 1.3;
  padding: 6px 12px 6px 18px;
}

.sidebar a:hover {
  color: var(--text-color);
}

.sidebar a.active {
  color: var(--link-color);
  opacity: 1;
  transition: none;
}

.sidebar button {
  font-weight: 500;
}

/* Caret icon before buttons (closed state rotated -90deg) */
.sidebar button:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 12px;
  height: 12px;
  transform: rotate(0deg);
  transform-origin: center center;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12"><path fill="rgb(0, 0, 0)" d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"></path></svg>');
  transition: transform 0.1s ease-in;
}

/* Rotate caret when the parent submenu is expanded */
.sidebar [aria-expanded="true"] > button::before {
  transform: rotate(90deg);
  transition: transform 0.1s ease;
}

.sidebar .submenu a {
  padding-top: 4px;
  padding-bottom: 4px;
}
/* Vertical guide line for submenu items */
.sidebar .submenu a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background-color: var(--border-color);
}

.sidebar .submenu a:hover:before {
  background-color: var(--text-color);
}

.sidebar .submenu a.active:before {
  background-color: var(--link-color);
}

/* ==============================
   Visual separators
   ============================== */
.sidebar > li.menu-separator {
  border-top: 1px solid var(--border-color);
  margin-top: 0.75rem;
  padding-top: 0.5rem;
}/* Hover-only visibility, blue on hover */
.heading-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25em;
  width: 15px;
  height: 15px;
  line-height: 0;
  opacity: 0;
  color: inherit;
  vertical-align: middle;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.entry h1:hover .heading-anchor,
.entry h2:hover .heading-anchor,
.entry h3:hover .heading-anchor,
.entry h4:hover .heading-anchor,
.entry h5:hover .heading-anchor,
.entry h6:hover .heading-anchor
 {
  opacity: 1;
  color: #aaa; 
  outline: none;

}

.entry h1 .heading-anchor:hover,
.entry h2 .heading-anchor:hover,
.entry h3 .heading-anchor:hover,
.entry h4 .heading-anchor:hover,
.entry h5 .heading-anchor:hover,
.entry h6 .heading-anchor:hover,
.heading-anchor:focus-visible {
  color: rgb(48, 84, 235); /* blue on hover */
}

/* Store the SVG in CSS via mask so it adopts currentColor */
.heading-anchor::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z'/></svg>");
  mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z'/></svg>");
}

/* Toasts */
#toast-root {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 200px;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font: 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast--in {
  opacity: 1;
  transform: translateY(0);
}

.toast--out {
  opacity: 0;
  transform: translateY(-6px);
}
/* Copy button inside <pre> */
.pre-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b7280; /* neutral icon color */
  opacity: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

pre:hover .pre-copy-btn,
.pre-copy-btn:focus-visible {
  opacity: 1;
}

.pre-copy-btn:hover,
.pre-copy-btn:focus-visible {
  background-color: rgba(0,0,0,0.06);
  color: #1a73e8; /* blue on hover/focus */
  outline: none;
}

/* SVG via mask so it adopts currentColor */
.pre-copy-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z'></path><path d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'></path></svg>");
          mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z'></path><path d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'></path></svg>");
}

/* Toast (same interface as before) */
#toast-root {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 200px;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font: 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast--in { opacity: 1; transform: translateY(0); }
.toast--out { opacity: 0; transform: translateY(-6px); }

/* Root variables for theme customization */
:root {
  --font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  --font-size: 14px;
  --small-font-size: calc(14px * 0.875);
  --line-height: 1.35;
  --background-color: #fff;
  --text-color: rgb(0, 0, 0);
  --off-background-color: rgba(0, 0, 0, 0.02);
  --light-text-color: rgba(0, 0, 0, 0.5);
  --medium-text-color: rgba(0, 0, 0, 0.6666);
  --border-color: rgba(0, 0, 0, 0.06);
  --dark-border-color: rgba(0, 0, 0, 0.12);
  --link-color: rgb(48, 84, 235);
  --padding: 1.4rem;
  --navigation-height: 3em;
  --sidebar-width: 280px;
  --main-width: 800px;
}

/* General resets */
html, body {
  width: 100%; padding: 0; margin: 0 auto;
  color: var(--text-color); background: var(--background-color);
  font-family: var(--font-family); font-size: var(--font-size); line-height: var(--line-height);
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1em 0;
}

.column-container {
  display: flex;
  margin: 0;
  padding: 0;
  position: relative;
}

.column, main {
  padding: 34px 16px;
}

.entry {
  overflow-wrap: anywhere;
}

main.loading {
  display: none;
}

.column {
  flex-shrink: 0;
  box-sizing: border-box;
  align-items: stretch;
  position: relative;
}

.column:nth-child(1) {
  background: var(--off-background-color);
}



main {
  flex-grow: 1; /* Main content takes up remaining space */
  padding-right: 4em;
  padding-left: 48px;
  padding-bottom: 10em;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Hidden Checkboxes */
.toggle-checkbox {
  display: none;
}

/* Control Bar */
.control-bar {
  display: none; /* Hidden by default on large screens */
  border-bottom: 1px solid var(--dark-border-color);
  z-index: 20;
  padding: 12px 15px;
  box-sizing: border-box;
}

.control-bar  a {
  color: var(--text-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.control-label {
  visibility: hidden;
  height: 24px;
  cursor: pointer;
  color: var(--light-text-color);
  text-decoration: none;
}



@media (max-width: 768px) {
    .control-bar {
    display: flex; /* Show the control bar at smaller screens */
    align-items: center; /* Vertically center the labels */
    gap: 1em;
    background-color: var(--background-color);
    margin-bottom: 1em;
    position: sticky;
    top:0;
  }


  .control-label:last-child {
    visibility: visible
  }
  
    .control-label:first-child {
    visibility: visible
  }

  /* Hide the left column unless toggled */
  .column:nth-child(1) {
    display: none;
  }

  /* Show the left column when the checkbox is toggled */
  #toggle-left:checked ~ .column-container > .column:nth-child(1) {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding-top: 0;
    right: 0;
    min-height: 100vh;
    height: auto;
    background: var(--background-color);
    z-index: 1;
  }
    #toggle-left:checked ~ .column-container > main {
      display: none;
    }
#toggle-left:checked ~ .column-container > .column:nth-child(1) .navigation,
#toggle-left:checked ~ .column-container > .column:nth-child(1) .navigation .sidebar {
  width: auto;
  overflow: visible;
  height: auto;
}

#toggle-left:checked ~ .column-container > .column:nth-child(1) .navigation .sidebar a,
#toggle-left:checked ~ .column-container > .column:nth-child(1) .navigation .sidebar button {
  font-size: 15px;
}

  #toggle-left:checked ~ .column-container > .column:nth-child(1) .navigation > a {
    display: none;
  }

  main {
    padding: 0 1em;
  }
}


.control-label:hover {
  color:var(--text-color);
}



.nav-container {
  display: flex;
  flex-wrap: wrap;
  height: var(--navigation-height);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

#nav-toggle {
  display: none;
}

/* When checkbox is checked, expand the navigation */
#nav-toggle:checked ~ .nav-container {
  height: auto; /* Remove height restriction */
}

#nav-toggle:checked ~ .popup-cover {
  opacity: 1;
  z-index: 1;
}

#nav-toggle:checked ~ .nav-container .nav-links {
  flex-direction: column; /* Stack links vertically */
  width: 100%;
  align-items: flex-start;
}

/* When checkbox is checked, expand the navigation */
#nav-toggle:checked ~ .nav-container {
  border-radius: 0 0 12px 12px;
  padding-bottom: 16px;
}

.nav-container form {
  flex-grow: 1;
  margin-right: 2em;
}

.nav-container form  input {
  width: 100%;
  padding: 0.5em;
  margin: 0.5em 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.navigation {
  display: flex;
  flex-direction: column;
}

code.hljs {
  background: transparent
}

code {
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

a {
  color: var(--link-color)
}

main ul {
  list-style-type: disc;
  padding: 0;margin-left:0;margin-right:0;
}

main ul li::marker {
  color: var(--light-text-color); 
}

main ul li {
  margin-inline-start: 30.25px
}

p, h1, h2, h3, h4, h5, h6, ol, ul, pre, hr, .videoContainer, table, details {
  max-width: 704px;
}

pre code {
  font-size: 14px;
  overflow-x: auto;
  display: block;
  overflow: auto;
  padding: 1em;
  margin: 1em 0;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

.entry a {
  text-decoration: none;
}


.entry img {
  max-width: 100%;
  max-height: calc(100vh - 5.75rem);
  height: auto;
  width: auto;
  outline: none;
}

.entry a:hover {
filter: brightness(1.15);
}

.entry a[target="_blank"]:after {
  content: "";
  display: inline-block;
  width: 12px;
  margin-left: 3px;
  opacity: 0.5;
  height: 12px;
  vertical-align: middle;
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='rgb(0, 0, 0)' d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/></svg>");
}


.entry #footnotes {
  font-size: 14px;
  margin-top:40px;
}

#footnotes hr {border-top-width: 2px;margin-bottom:20px}

.footnotes li::marker,
.footnote-back {
  color: var(--light-text-color); 
}

.footnote-back {margin-left: 3px;}
.footnote-back:hover {color:var(--link-color)}

li p {
  margin: 0.075em 0
}

.entry .footnote-ref sup:before {
  content: "[";
}

.entry .footnote-ref sup:after {
  content: "]";
}

p {
  margin-block-end: 16px;
margin-block-start: 16px
}

.entry h1, .entry h2, .entry h3 {
  font-size: 17.6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
font-weight: 550;
line-height: 28.6333px;
margin-block-end: 8.8px;
margin-block-start: 40px;
font-weight: 700;
}

.entry h2, .entry h3 {font-weight: 600;}
.entry h2 {font-size: 16px;}
.entry h3 {font-size: 14px;}

.entry > :first-child
 {
  margin-top: 12px;
}

.entry .archives-grid {
  max-width: 704px;
  margin-bottom: 2rem;
}

p:has(img) {
  margin: 2.5em 0;
}

h4 {
  text-transform: uppercase;
  font-size: 13px;
}
b, strong {
  font-weight: 600;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 24px 0;
  font-size: 0.9rem;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

thead {
  background-color: var(--off-background-color);
  color: var(--text-color);
}

th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid var(--border-color);
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

tr:last-child td {
  border-bottom: none;
}

/* Responsive table adjustments */
@media (max-width: 768px) {
  table {
    font-size: 0.85rem;
  }
  
  th, td {
    padding: 0.5rem 0.75rem;
  }
}

code.hljs {
  background-color: var(--off-background-color)
}

.caption {
  display: block;
  margin: 12px 0;
  font-size: var(--small-font-size);
  color: var(--medium-text-color);
}

details {
  border-top: 1px solid var(--border-color);
  background: var(--off-background-color);
}

summary {
  list-style: none;
  padding: 16px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  padding-left: 32px;
}

summary:focus {
  outline: none;
}

/* Remove default marker */
summary::-webkit-details-marker {
  display: none;
}

/* Custom + and - symbol */
summary::before,
summary::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 12px;
  height: 2px;
  background-color: var(--medium-text-color);
  transition: all 0.3s ease;
}

summary::after {
  transform: rotate(90deg);
}

details[open] {
  padding-bottom: 16px;
}

details[open] summary::after {
  transform: rotate(0);
  opacity: 0;
}

details[open] summary::before {
  transform: rotate(180deg);
}

blockquote {
  border-left: 4px solid var(--border-color);
  margin: 1.5em 0;
  padding-left: 1em;
  color: var(--medium-text-color);
}

kbd {
  background-color: var(--background-color);
  color: inherit;
  border-radius: 0.25rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 0 1px var(--border-color);
  cursor: default;
  font-family: inherit;
  font-size: 0.75em;
  line-height: 1;
  min-width: 0.75rem;
  display: inline-block;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  top: -1px;

}

/* Archives grid layout */
.archives-grid {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.75rem 2rem;
  margin-top: 2rem;
  align-items: baseline;
}

.archive-item {
  display: contents;
}

.archive-title {
  text-decoration: none;
  color: var(--text-color);
}

.archive-title:hover {
  color: var(--link-color);
}

.archive-date {
  color: var(--medium-text-color);
  font-size: var(--small-font-size);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 768px) {
  .archives-grid {
    gap: 0.5rem 1rem;
  }
  
  .archive-date {
    font-size: 0.8rem;
  }
}

/* Mixed feed (homepage) — reuses archives-grid layout for link entries */
#feed {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  gap: 0.75rem 2rem;
  margin-top: 4rem;
  align-items: baseline;
  max-width: 704px;
  overflow: hidden;
}

.feed-link { display: contents; }

.feed-message {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.feed-message img {
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  display: block;
}

.feed-message > :first-child { margin-top: 0; }

.feed-message .feed-date-row {
  text-align: right;
  margin-top: 1rem;
}

.feed-message .feed-date {
  color: var(--medium-text-color);
  font-size: var(--small-font-size);
  white-space: nowrap;
  text-decoration: none;
}

.feed-message a.feed-date:hover {
  color: var(--link-color);
}

.feed-message > :nth-last-child(2) { margin-bottom: 0; }


.feed-separator {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1rem 0;
}

.feed-time {
  font-style: italic;
}

.feed-tag {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.7;
}
#messages-source { display: none; }

@media (max-width: 768px) {
  #feed { gap: 0.5rem 1rem; }
}

/* Search form styles */
.search-form {
  margin: 2rem 0;
  max-width: 704px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-wrapper:focus-within {
  border-color: var(--link-color);
  box-shadow: 0 0 0 1px var(--link-color);
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--medium-text-color);
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  padding: 0.75rem 0.75rem 0.75rem 2.75rem;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.search-input::placeholder {
  color: var(--light-text-color);
}

.search-submit {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  margin: 0.25rem;
  border: none;
  background-color: var(--link-color);
  color: var(--background-color);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  line-height: 1;
}

.search-submit:hover {
  opacity: 0.9;
}

.search-submit:active {
  opacity: 0.8;
}

.search-submit svg {
  display: block;
}

@media (max-width: 768px) {
  .search-form {
    margin: 1.5rem 0;
  }
  
  .search-input {
    padding: 0.625rem 0.625rem 0.625rem 2.5rem;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .search-icon {
    left: 10px;
    width: 14px;
    height: 14px;
  }
  
  .search-submit {
    padding: 0.625rem 0.875rem;
  }
  
  .search-submit svg {
    width: 14px;
    height: 14px;
  }
}

iframe.iframe-active {
  outline: 1px solid var(--dark-border-color);
  outline-offset: 2px;
}

#lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}
#lightbox-overlay.active {
  display: flex;
}
#lightbox-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  cursor: default;
}

.entry img {
  cursor: zoom-in;
}