/* Azqato's Prompts on azqato.com (item 22). The old site's stylesheet
   (github.com/Azqato/prompts, css/style.css), rule for rule, scoped to
   <div class="pr-site"> under the shared bars, with its palette pointed at
   colors.css, as Azqato Invests was. Its reset, body, footer and focus rules
   are the site's own here. */

.pr-site {
  --color-bg: var(--ti-color-canvas);
  --color-surface: var(--ti-color-surface);
  --color-border: var(--ti-color-border);
  --color-accent: var(--ti-color-accent);
  --color-accent-hover: var(--ti-color-accent-hover);
  --color-accent-light: var(--ti-color-accent-muted);
  --color-tag-bg: var(--ti-color-hover);
  --color-card-hover: var(--ti-color-hover);
  --color-text-primary: var(--ti-color-text);
  --color-text-secondary: var(--ti-color-text-muted);
  --color-positive: var(--ti-color-success);
  --color-negative: var(--ti-color-danger);
  --color-warning: var(--ti-color-warning);
  --color-purple: var(--ti-color-purple);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  --sidebar-width: 220px;
  --content-max: max(820px, calc(75vw - 56px));

  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* The note for AI agents under each prompt: in the page for agents that fetch
   it, hidden from people (owner, 2026-10-08), as the original showed none. */
.pr-site .pr-agents {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reset / base */






.pr-site a {
  color: var(--color-accent);
  text-decoration: none;
}

.pr-site a:hover {
  color: var(--color-accent-hover);
}

/* Layout */
.pr-site .site-wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  flex: 1 0 auto;
  width: 100%;
}

/* Sidebar */
.pr-site .sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  align-self: stretch;
}

.pr-site .sidebar-sticky {
  position: sticky;
  top: 61px;
  padding: 28px 0;
  height: calc(100vh - 61px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.pr-site .sidebar-logo {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  padding: 0 24px;
  margin-bottom: 24px;
}

.pr-site .sidebar-logo:hover {
  color: var(--color-text-primary);
}

.pr-site .accent-dot {
  color: var(--color-accent);
}

.pr-site .sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pr-site .sidebar-nav a {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 8px 24px;
  border-left: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pr-site .sidebar-nav a:hover {
  color: var(--color-text-primary);
}

.pr-site .sidebar-nav a.active {
  color: var(--color-accent);
  font-weight: 600;
  border-left-color: var(--color-accent);
  background: var(--color-accent-light);
}

/* Search box, above the prompt list. */
.pr-site .pr-search {
  max-width: 340px;
  margin-bottom: 16px;
}

.pr-site .pr-search input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.pr-site .pr-search input::placeholder {
  color: var(--color-text-secondary);
}

.pr-site .pr-search input:focus-visible {
  border-color: var(--color-accent);
}

.pr-site .sidebar-nav a[hidden],
.pr-site .prompt-list-item[hidden] {
  display: none;
}

.pr-site .search-empty {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.pr-site .search-empty:empty {
  display: none;
}

.pr-site .sidebar .search-empty {
  padding: 8px 24px;
}

/* The menu button exists only below 1024px, where the list collapses. */
.pr-site .pr-nav-toggle {
  display: none;
}

/* Sidebar support button */
.pr-site .sidebar-support {
  padding: 20px 24px 4px;
  margin-top: auto;
}

.pr-site .support-btn {
  display: block;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pr-site .support-btn:hover {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  background: var(--color-accent-light);
}

/* Main content */
.pr-site .content {
  padding: 32px 28px;
  width: 100%;
  max-width: calc(var(--content-max) + 56px);
}

/* Footer */




/* Typography */
.pr-site h1 {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  line-height: 1.25;
}

.pr-site h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 28px 0 14px;
}

.pr-site h2::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--color-accent);
  border-radius: 2px;
}

.pr-site h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 20px 0 10px;
}

.pr-site p {
  margin: 0 0 14px;
}

.pr-site .lead {
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.pr-site code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-tag-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--color-text-primary);
}

/* Hero / intro (home) */
.pr-site .hero {
  max-width: 640px;
  margin-bottom: 40px;
}

.pr-site .hero h1 {
  font-size: 2.25rem;
  margin-bottom: 14px;
}

.pr-site .hero .lead {
  font-size: 1rem;
}

/* Home page prompt list */
.pr-site .prompt-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-site .prompt-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* 2px gradient bar across the top of the card, revealed on hover.
   Absolutely positioned rather than a real border so the card does
   not shift by 2px when it appears. */
.pr-site .prompt-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-purple));
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pr-site .prompt-list-item:hover {
  background: var(--color-card-hover);
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.pr-site .prompt-list-item:hover::before {
  opacity: 1;
}

.pr-site .prompt-list-title {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1rem;
}

.pr-site .prompt-list-item:hover .prompt-list-title {
  text-decoration: underline;
}

.pr-site .prompt-list-desc {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-top: 4px;
}

/* Prompt detail page */
.pr-site .prompt-header h1 {
  margin-bottom: 6px;
}

.pr-site .prompt-meta {
  display: inline-block;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

.pr-site .prompt-description {
  margin-top: 24px;
  margin-bottom: 28px;
  color: var(--color-text-primary);
}

.pr-site .prompt-description .lead,
.pr-site .prompt-description p {
  color: var(--color-text-primary);
  line-height: 1.65;
}

.pr-site .prompt-description ul {
  margin: 0 0 14px 1.25rem;
}

.pr-site .prompt-description li {
  margin-bottom: 6px;
}

/* Code block */
.pr-site .code-block-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

/* The whole bar toggles, not just the button, so it carries the pointer. */
.pr-site .code-block-header {
  background: var(--color-tag-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.pr-site .code-block-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr-site .code-label {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

/* Collapsed: the pre is removed from the flow entirely rather than animated
   to zero height, because transitioning height is forbidden (DESIGN 12b) and
   would reflow the page on every toggle. The header keeps its own rounding
   from the wrapper, so dropping its bottom border leaves a single clean bar. */
.pr-site .code-block-wrapper.collapsed pre {
  display: none;
}

.pr-site .code-block-wrapper.collapsed .code-block-header {
  border-bottom: none;
}

.pr-site .code-block-wrapper pre {
  background: var(--color-tag-bg);
  padding: 20px;
  overflow-x: auto;
  margin: 0;
}

.pr-site .code-block-wrapper pre code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  background: none;
  border: none;
  padding: 0;
}

/* Copy button, and the collapse toggle that sits beside it. They are peers in
   the same action group, so they share one appearance rather than inventing a
   second button treatment. */
.pr-site .copy-btn,
.pr-site .code-toggle {
  font-family: var(--font-sans);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* Only the buttons themselves light up. The bar is clickable too, but the
   pointer cursor already says so, and lighting the toggle from a hover several
   hundred pixels away reads as a glitch rather than as feedback. */
.pr-site .copy-btn:hover,
.pr-site .code-toggle:hover {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.pr-site .copy-btn.copied {
  color: var(--color-positive);
  border-color: color-mix(in srgb, var(--color-positive) 40%, transparent);
}

.pr-site .copy-btn.copy-failed {
  color: var(--color-negative);
  border-color: color-mix(in srgb, var(--color-negative) 40%, transparent);
}

/* Status / error message */
.pr-site .status-message {
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  line-height: 1.65;
}

.pr-site .status-message code {
  font-size: 0.85rem;
}

/* Focus styles */


/* Media query: tablet (< 1024px) */
@media (max-width: 1023px) {
  .pr-site .site-wrapper {
    grid-template-columns: 1fr;
  }

  .pr-site .sidebar {
    position: sticky;
    top: 61px;
    z-index: 10;
    height: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .pr-site .sidebar-sticky {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 14px 0 14px 16px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .pr-site .sidebar-support {
    margin-top: 0;
    padding: 0 16px 0 4px;
  }

  .pr-site .support-btn {
    padding: 6px 10px;
    font-size: 0.8125rem;
  }

  .pr-site .sidebar-logo {
    margin-bottom: 0;
    margin-right: auto;
    padding: 0 16px;
  }

  /* Closed by default: the bar holds the logo, the menu button, and
     Support, and the prompt starts right under it. Open, the list drops
     below as one column and scrolls inside itself, so a long list never
     pushes past the screen. */
  .pr-site .pr-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
  }

  .pr-site .pr-nav-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }

  .pr-site .nav-open .pr-nav-toggle::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .pr-site .sidebar-search {
    display: none;
    order: 3;
    flex-basis: 100%;
    margin-top: 12px;
    padding: 12px 16px 0;
    border-top: 1px solid var(--color-border);
  }

  .pr-site .nav-open .sidebar-search {
    display: block;
  }

  .pr-site .sidebar .search-empty {
    order: 5;
    flex-basis: 100%;
    padding: 8px 16px;
  }

  .pr-site .sidebar:not(.nav-open) .search-empty {
    display: none;
  }

  .pr-site .sidebar-nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 0;
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pr-site .nav-open .sidebar-nav {
    display: flex;
  }

  .pr-site .sidebar-nav a {
    padding: 11px 16px;
  }

  .pr-site .content {
    padding: 24px 20px;
    max-width: 100%;
  }
}

/* Media query: mobile (< 768px) */
@media (max-width: 767px) {
  .pr-site h1 {
    font-size: 1.5rem;
  }

  .pr-site .hero h1 {
    font-size: 1.75rem;
  }

  .pr-site h2 {
    font-size: 1.2rem;
  }

  .pr-site .content {
    padding: 20px 16px;
  }

  .pr-site .code-block-wrapper pre code {
    font-size: 0.8rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  

  
}