/* ==========================================================================
   Cloud of Things - theme styles

   theme.json owns the palette, the fluid type scale and the spacing scale,
   and exposes them as --wp--preset--* custom properties. This file only
   covers what theme.json cannot express: the background texture, the card
   container queries, the code-block chrome, the reading-column breakout
   grid, and the responsive behaviour.
   ========================================================================== */

:root {
  --cot-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --cot-header-h: 3.75rem;
  --cot-code-bg: #0d1117;
  --cot-accent-ghost: rgb(34 211 238 / 0.10);
  --cot-accent-line:  rgb(34 211 238 / 0.35);
  --cot-accent-glow:  rgb(34 211 238 / 0.18);
  --cot-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --cot-dur: 220ms;
  --cot-dur-fast: 120ms;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Document
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--cot-header-h) + 1rem);
}

body {
  /* Nothing may scroll the page sideways. If something does, it is a code
     block or a table that has escaped its scroll container. */
  overflow-x: hidden;
}

/* Console grid texture plus a soft accent glow, on a fixed pseudo-element.
   background-attachment: fixed would repaint every scroll frame and is
   visibly janky on mobile. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(60rem 40rem at 50% -10rem, var(--cot-accent-glow), transparent 70%),
    repeating-linear-gradient(to right,  var(--wp--preset--color--line) 0 1px, transparent 1px 4rem),
    repeating-linear-gradient(to bottom, var(--wp--preset--color--line) 0 1px, transparent 1px 4rem);
  mask-image: linear-gradient(to bottom, #000 0, #000 40rem, transparent 70rem);
}

p, li { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--on-accent);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.cot-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--wp--preset--color--base);
  padding-block: 0;
  padding-block-start: env(safe-area-inset-top);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cot-header {
    background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}

.cot-header__inner { min-block-size: var(--cot-header-h); }

.cot-wordmark { gap: 0.55ch; align-items: center; }

/* The mark is inline SVG rather than a Site Logo block: it needs no media
   library upload, costs no extra request, and inherits currentColor so it
   picks up the accent in dark and light variations alike. */
.cot-wordmark__mark {
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--accent);
  flex: none;
}

.cot-wordmark__mark:hover { color: var(--wp--preset--color--accent); }
.cot-logo { display: block; }

/* Hero mark, above the prompt line. */
.cot-hero__mark {
  color: var(--wp--preset--color--accent);
  line-height: 0;
  margin-block-end: var(--wp--preset--spacing--20);
}

.cot-hero__mark svg {
  inline-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  block-size: auto;
}

/* Footer credit carries a small mark beside the text. */
.cot-footer__credit--mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
}

.cot-footer__credit--mark .cot-logo { color: var(--wp--preset--color--accent); flex: none; }

.cot-wordmark__text a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* Blinking block cursor after the wordmark. Decorative, so it is opt-in
   under no-preference rather than disabled after the fact. */
.cot-wordmark__text::after {
  content: "";
  display: inline-block;
  inline-size: 0.55ch;
  block-size: 1.05em;
  margin-inline-start: 0.2ch;
  translate: 0 0.15em;
  background: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .cot-wordmark__text::after { animation: cot-blink 1.2s steps(1) infinite; }
}

@keyframes cot-blink { 50% { opacity: 0; } }

/* --- navigation ---
   Uses the core Navigation block rather than a hand-rolled drawer, so the
   menu stays editable in the Site Editor and inherits core's focus
   trapping and escape handling. Styling only. */
.cot-nav {
  font-family: var(--wp--preset--font-family--mono);
}

.cot-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: color var(--cot-dur-fast) var(--cot-ease),
              background-color var(--cot-dur-fast) var(--cot-ease);
}

.cot-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--surface-2);
}

.cot-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent);
  background: var(--cot-accent-ghost);
}

.cot-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding-block-end: calc(2rem + env(safe-area-inset-bottom));
}

/* Coarse pointers get larger hit areas than a mouse needs. */
@media (pointer: coarse) {
  .cot-nav .wp-block-navigation-item__content { padding-block: 0.75rem; }
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.cot-hero {
  display: grid;
  align-content: center;
  gap: var(--wp--preset--spacing--50);
  /* svh, not vh: on mobile 100vh is sized to the viewport with the browser
     chrome hidden, so a vh-sized hero overflows on load and reflows when
     the toolbar retracts. svh does not move. */
  min-block-size: min(66svh, 34rem);
  padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}

.cot-hero__prompt {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.cot-hero__prompt::before { content: "$ "; color: var(--wp--preset--color--accent); }

.cot-hero__title { letter-spacing: -0.03em; margin: 0; }

.cot-hero__lede {
  max-inline-size: 46ch;
  color: var(--wp--preset--color--muted);
  line-height: 1.35;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.cot-section { padding-block: var(--wp--preset--spacing--70); }

.cot-section__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-block-end: var(--wp--preset--spacing--50);
}

.cot-section__title::before { content: "//"; color: var(--wp--preset--color--accent); }

.cot-section__title::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(to right, var(--wp--preset--color--line), transparent);
}

/* --------------------------------------------------------------------------
   Card grid

   Replaces jQuery + isotope.pkgd + packery.pkgd + imagesloaded.

   The Post Template block's grid layout emits
   minmax(min(22rem, 100%), 1fr) itself, which already carries the narrow-
   screen guard. The gap and the long-list optimisation are ours.
   -------------------------------------------------------------------------- */
.cot-card-grid { gap: var(--wp--preset--spacing--40); }

/* Long archives: skip layout and paint for cards far off screen.
   contain-intrinsic-size supplies a placeholder height so the scrollbar
   does not jump as they render. */
.cot-card-grid--long > li {
  content-visibility: auto;
  contain-intrinsic-size: auto 22rem;
}

/* --------------------------------------------------------------------------
   Card

   Each card is its own container query context, so the same markup renders
   stacked in a narrow grid track and side-by-side when given a wide slot.
   A viewport media query cannot express this: the card cares how much room
   it was given, not how wide the screen is.
   -------------------------------------------------------------------------- */
.cot-card {
  container-type: inline-size;
  container-name: cotcard;
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--cot-dur) var(--cot-ease),
              transform var(--cot-dur) var(--cot-ease),
              box-shadow var(--cot-dur) var(--cot-ease);
}

.cot-card:hover {
  border-color: var(--cot-accent-line);
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .cot-card:hover { transform: translateY(-2px); }
}

.cot-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--wp--preset--color--accent), transparent);
  opacity: 0;
  transition: opacity var(--cot-dur) var(--cot-ease);
}

.cot-card:hover::after, .cot-card:focus-within::after { opacity: 1; }

.cot-card__media { margin: 0; flex: none; }
.cot-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.cot-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--40);
  flex: 1;
}

.cot-card__eyebrow {
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.cot-card__eyebrow a { color: var(--wp--preset--color--accent); text-decoration: none; }

.cot-card__title { margin: 0; line-height: 1.35; }

.cot-card__title a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

/* Stretched link: the whole card is clickable, but only the title is in the
   tab order, so the card does not create a duplicate stop for keyboard and
   screen reader users. */
.cot-card__title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cot-card:hover .cot-card__title a { color: var(--wp--preset--color--accent); }

.cot-card__excerpt {
  color: var(--wp--preset--color--muted);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cot-card__tags { margin-block-start: auto; padding-block-start: 0.5rem; }

/* --- container query: side-by-side once the card itself is wide enough --- */
@container cotcard (inline-size > 34rem) {
  .cot-card { flex-direction: row; }
  .cot-card__media { inline-size: 38%; max-inline-size: 18rem; }
  .cot-card__media img { aspect-ratio: 4 / 3; }
  .cot-card__body { padding: var(--wp--preset--spacing--50); }
  .cot-card__excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* --------------------------------------------------------------------------
   Taxonomy chips
   -------------------------------------------------------------------------- */
.cot-card__tags a,
.cot-post-tags a {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.9rem;
  padding: 0.25rem 0.75rem;
  margin-inline-end: 0.35rem;
  margin-block-end: 0.35rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  background: var(--wp--preset--color--surface-2);
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  transition: color var(--cot-dur-fast) var(--cot-ease),
              border-color var(--cot-dur-fast) var(--cot-ease),
              background-color var(--cot-dur-fast) var(--cot-ease);
}

.cot-card__tags a::before,
.cot-post-tags a::before { content: "#"; color: var(--wp--preset--color--dim); }

.cot-card__tags a:hover,
.cot-post-tags a:hover {
  color: var(--wp--preset--color--accent);
  border-color: var(--cot-accent-line);
  background: var(--cot-accent-ghost);
}

/* The separator the Post Terms block puts between terms is redundant once
   each term is a chip. */
.cot-card__tags .wp-block-post-terms__separator,
.cot-post-tags .wp-block-post-terms__separator { display: none; }

@media (pointer: coarse) {
  .cot-card__tags a, .cot-post-tags a { min-block-size: 2.75rem; padding-inline: 1rem; }
}

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */
.cot-post-header__eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-block-end: var(--wp--preset--spacing--40);
}

.cot-post-header__eyebrow a { color: var(--wp--preset--color--accent); text-decoration: none; }

.cot-post-header__title { letter-spacing: -0.025em; margin-block-end: var(--wp--preset--spacing--40); }

.cot-post-meta {
  gap: 0.5rem 1.5rem;
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--muted);
}

.cot-post-hero img { border-radius: 14px; border: 1px solid var(--wp--preset--color--line); }

/* --------------------------------------------------------------------------
   Entry content: the reading column and its breakouts

   A grid with named columns, replacing the constrained layout's centring.
   Prose sits in the content track; code, figures and tables move to the
   wider track automatically, without any wrapper markup in the post. That
   matters because the content comes out of WordPress as plain blocks and
   is not being rewritten.
   -------------------------------------------------------------------------- */
.cot-entry {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--cot-gutter), 1fr)
    [wide-start] minmax(0, calc((76rem - 44rem) / 2))
    [content-start] min(44rem, 100% - (var(--cot-gutter) * 2)) [content-end]
    minmax(0, calc((76rem - 44rem) / 2)) [wide-end]
    minmax(var(--cot-gutter), 1fr) [full-end];
}

.cot-entry > * { grid-column: content; }

/* Classic markup is listed alongside the block classes throughout this
   section. 28 of the 42 posts predate Gutenberg: their images are bare
   <img class="alignnone size-full wp-image-N">, not .wp-block-image, and
   their tables are bare <table>. Styling only the block classes would have
   left two thirds of the archive unstyled. */
.cot-entry > .cot-code,
.cot-entry > .wp-block-image,
.cot-entry > .wp-block-table,
.cot-entry > .wp-block-embed,
.cot-entry > figure,
.cot-entry > table,
.cot-entry > .wp-caption,
.cot-entry > .alignwide { grid-column: wide; }

.cot-entry > .alignfull { grid-column: full; }

/* WordPress's constrained layout emits
     .cot-entry > * { max-width: <content-size>; margin-inline: auto }
   for every child. Without this override a breakout child would sit in the
   wide grid column but still be capped at the 44rem reading measure, so the
   breakout would silently do nothing. Placing the child in a wider track is
   only half the job; the cap has to be lifted too. */
.cot-entry > .cot-code,
.cot-entry > .wp-block-image,
.cot-entry > .wp-block-table,
.cot-entry > .wp-block-embed,
.cot-entry > figure,
.cot-entry > table,
.cot-entry > .wp-caption,
.cot-entry > .alignwide,
.cot-entry > .alignfull {
  max-inline-size: none;
  margin-inline: 0;
  inline-size: auto;
}

.cot-entry > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.cot-entry > h2 { margin-block-start: var(--wp--preset--spacing--70); }
.cot-entry > h3 { margin-block-start: var(--wp--preset--spacing--60); }
.cot-entry > h2 + *, .cot-entry > h3 + * { margin-block-start: var(--wp--preset--spacing--30); }
.cot-entry > .cot-code,
.cot-entry > .wp-block-image,
.cot-entry > .wp-block-table { margin-block: var(--wp--preset--spacing--60); }

/* A wide page template opts out of the reading measure entirely. */
.cot-entry--wide { display: block; }

/* Classic images (207 of them) carry .alignnone/.size-full/.wp-image-N and
   are often direct children of the entry, sometimes inside a <p>. */
.cot-entry .wp-block-image img,
.cot-entry img.size-full,
.cot-entry img.size-medium,
.cot-entry img.alignnone,
.cot-entry .wp-caption img,
.cot-entry figure img {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  block-size: auto;
}

/* wpautop leaves a lone <img> wrapped in a <p>; let that paragraph reach
   the wider track rather than being pinned to the reading measure. */
.cot-entry > p:has(> img:only-child) {
  grid-column: wide;
  max-inline-size: none;
  margin-inline: 0;
  text-align: center;
}

.cot-entry .wp-caption { max-inline-size: 100%; }

.cot-entry .wp-caption-text {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--dim);
  text-align: center;
  margin-block-start: 0.75rem;
}

/* 131 bare <hr> in the classic content, not .wp-block-separator. */
.cot-entry hr {
  border: 0;
  block-size: 1px;
  background: var(--wp--preset--color--line);
  margin-block: var(--wp--preset--spacing--60);
}

/* <details> appears in a few posts as a collapsible section. */
.cot-entry details {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.cot-entry summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--accent);
  min-block-size: 2.75rem;
  display: flex;
  align-items: center;
}

/* A bare classic <table> gets the same scroll container as the block one. */
.cot-entry > table {
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   Tables

   Same rule as code: a wide table scrolls inside itself, it never widens
   the page.
   -------------------------------------------------------------------------- */
.wp-block-table {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
}

.wp-block-table table { border-collapse: collapse; inline-size: 100%; margin: 0; }

.wp-block-table th, .wp-block-table td {
  padding: 0.75rem 1rem;
  text-align: start;
  border: 0;
  border-block-end: 1px solid var(--wp--preset--color--line);
  white-space: nowrap;
}

.wp-block-table th {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  background: var(--wp--preset--color--surface-2);
}

.wp-block-table tr:last-child td { border-block-end: 0; }

/* --------------------------------------------------------------------------
   Code blocks

   The highest-impact responsive fix on this site. Lab posts carry roughly
   six code blocks each; on the outgoing theme a long CLI line scrolled the
   entire page sideways.
   -------------------------------------------------------------------------- */
.cot-code {
  position: relative;
  max-inline-size: 100%;
  background: var(--cot-code-bg);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  overflow: hidden;
}

.cot-code__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  min-block-size: 2.5rem;
  background: color-mix(in srgb, var(--wp--preset--color--surface-2) 70%, var(--cot-code-bg));
  border-block-end: 1px solid var(--wp--preset--color--line);
}

.cot-code__lang {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-inline-end: auto;
}

.cot-code__lang::before {
  content: "\25CF";
  color: var(--wp--preset--color--accent-2);
  margin-inline-end: 0.6ch;
  font-size: 0.7em;
  vertical-align: 0.15em;
}

.cot-code__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2rem;
  padding: 0.25rem 0.75rem;
  background: transparent;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: 4px;
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cot-dur-fast) var(--cot-ease),
              border-color var(--cot-dur-fast) var(--cot-ease),
              background-color var(--cot-dur-fast) var(--cot-ease);
}

.cot-code__btn:hover,
.cot-code__btn[aria-pressed="true"] {
  color: var(--wp--preset--color--accent);
  border-color: var(--cot-accent-line);
  background: var(--cot-accent-ghost);
}

.cot-code__btn svg { inline-size: 0.9rem; block-size: 0.9rem; }

.cot-code__btn[data-state="copied"] {
  color: #4ade80;
  border-color: rgb(74 222 128 / 0.4);
  background: rgb(74 222 128 / 0.1);
}

.cot-code__btn[data-state="error"] { color: #f87171; border-color: rgb(248 113 113 / 0.4); }

@media (pointer: coarse) {
  .cot-code__btn { min-block-size: 2.5rem; padding-inline: 1rem; }
}

/* Keep the icons, drop the labels, on very narrow screens. The accessible
   name survives because the text is still in the DOM for screen readers
   only when hidden this way is avoided - so instead we clip it. */
@media (width < 26rem) {
  .cot-code__btn-text {
    clip-path: inset(50%);
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* The scroller.

   The scroll shadow is the four-layer background trick: two "local" layers
   scroll with the content and two "scroll" layers stay put, so a shadow is
   only visible on a side that actually has more content. No JavaScript, no
   scroll listener. */
.cot-code pre, .cot-code__pre {
  margin: 0;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  /* Stops a sideways swipe inside the block becoming a back-navigation
     gesture or scrolling the page behind it. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--line-strong) transparent;
  background:
    linear-gradient(to right, var(--cot-code-bg) 30%, transparent)
      0 0 / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--cot-code-bg) 30%, transparent)
      100% 0 / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.45), transparent)
      0 0 / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.45), transparent)
      100% 0 / 1rem 100% no-repeat scroll;
}

.cot-code__pre::-webkit-scrollbar { block-size: 0.5rem; }
.cot-code__pre::-webkit-scrollbar-track { background: transparent; }
.cot-code__pre::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--line-strong);
  border-radius: 999px;
}

.cot-code pre code,
.cot-code pre, .cot-code__pre {
  font-family: var(--wp--preset--font-family--mono);
  /* Tighter than body text so more of a command fits before scrolling is
     needed, but never below about 12.5px. */
  font-size: clamp(0.78rem, 0.73rem + 0.22vw, 0.9rem);
  line-height: 1.65;
  color: var(--wp--preset--color--contrast);
  tab-size: 2;
}

/* Wrap mode, toggled by the button. On a 360px screen soft wrapping beats
   even a perfect scroll affordance for a long one-liner. */
.cot-code[data-wrap="true"] pre,
.cot-code[data-wrap="true"] .cot-code__pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--cot-code-bg);
}

/* Inline code: a long path or ARN must break rather than widen the
   paragraph past the screen. */
:where(.cot-entry) :not(pre) > code {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.cot-pagination {
  gap: 0.5rem;
  margin-block-start: var(--wp--preset--spacing--70);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--small);
}

/* The Query Pagination block puts the page numbers inside their own
   <div class="wp-block-query-pagination-numbers">. That div is a plain
   block, so making each number display:grid stacked them in a column while
   the Previous/Next links - which are direct flex children of the nav -
   stayed on the line beside it. The numbers container has to be a flex row
   in its own right. */
.cot-pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cot-pagination a, .cot-pagination span {
  display: grid;
  place-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

/* The numbers wrapper is itself a span-less div, but the ellipsis between
   distant page numbers is a bare span and should not get a button box. */
.cot-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
  min-inline-size: 1.5rem;
  padding-inline: 0;
}

.cot-pagination a:hover {
  color: var(--wp--preset--color--accent);
  border-color: var(--cot-accent-line);
  background: var(--cot-accent-ghost);
}

.cot-pagination .current {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--on-accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.cot-search .wp-block-search__input {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: 8px;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--mono);
  padding: 0.75rem 1rem;
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font-size: max(1rem, var(--wp--preset--font-size--small));
}

.cot-search .wp-block-search__input::placeholder { color: var(--wp--preset--color--dim); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.cot-footer { padding-block-end: calc(var(--wp--preset--spacing--70) + env(safe-area-inset-bottom)); }

.cot-footer__title {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-block-end: 0.75rem;
}

.cot-footer__list ul, .cot-footer__list { list-style: none; margin: 0; padding: 0; }

.cot-footer__list li { margin-block-end: 0.5rem; }

.cot-footer__list a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--small);
}

.cot-footer__list a:hover { color: var(--wp--preset--color--accent); }

.cot-tagcloud a {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.9rem;
  padding: 0.25rem 0.75rem;
  margin: 0 0.35rem 0.35rem 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  background: var(--wp--preset--color--surface-2);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small) !important;
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

.cot-tagcloud a:hover {
  color: var(--wp--preset--color--accent);
  border-color: var(--cot-accent-line);
  background: var(--cot-accent-ghost);
}

.cot-footer__credit { color: var(--wp--preset--color--dim); font-family: var(--wp--preset--font-family--mono); margin: 0; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.cot-404 { padding-block: var(--wp--preset--spacing--90); }
.cot-404 .cot-hero__title { letter-spacing: -0.03em; }

/* --------------------------------------------------------------------------
   Cross-document view transitions. One declaration, ignored where
   unsupported.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --wp--preset--color--muted: #c4cdd6;
    --wp--preset--color--dim: #9aa7b4;
    --wp--preset--color--line: #3a4350;
    --wp--preset--color--line-strong: #566173;
  }
}