/* AI Prompt Library (prompts.html) styles */

/* backgrounds are neutral greys with a faint tint of the chosen color theme (--accent) */
:root {
  --bg: color-mix(in srgb, var(--accent) 5%, #f5f6f8);
  --surface: #ffffff;
  --surface-raised: color-mix(in srgb, var(--accent) 2%, #fcfcfd);
  --surface-soft: color-mix(in srgb, var(--accent) 5%, #f0f1f4);
  --surface-hover: color-mix(in srgb, var(--accent) 4%, #f7f8fa);
  --border: color-mix(in srgb, var(--accent) 8%, #e2e4e8);
  --border-strong: color-mix(in srgb, var(--accent) 8%, #cbced4);
  --text: #111317;
  --text-secondary: #4f5661;
  --text-muted: #626973;
  --text-subtle: #676d76;
  --accent: #f7931a;
  --accent-2: #f2a516;
  --accent-contrast: #141414;
  --accent-grad: linear-gradient(100deg, var(--accent), var(--accent-2));
  --accent-glow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-text: #9a4008;
  --accent-text-2: #92400e;
  --accent-text-grad: linear-gradient(100deg, var(--accent-text), var(--accent-text-2));
  --icon-bg: #f2f0ec;
  --icon-bg-hover: #eae6df;
  --shadow-sm: 0 1px 2px rgba(15, 18, 24, .05);
  --shadow-md: 0 12px 30px rgba(15, 18, 24, .08);
  --shadow-lg: 0 18px 48px rgba(15, 18, 24, .10);
  --success: #1f5f3c;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --content-width: 1500px;
  --sidebar-width: 270px;
}

/* color themes: two gradient stops, plus darker text stops for light mode.
   Orange is the default above. These sit before the dark block, which swaps
   the text stops back to the bright accents. */
html[data-color="sunset"] {
  --accent: #fb923c;
  --accent-2: #f472b6;
  --accent-text: #9a3412;
  --accent-text-2: #9d174d;
}

html[data-color="ocean"] {
  --accent: #38bdf8;
  --accent-2: #818cf8;
  --accent-text: #0369a1;
  --accent-text-2: #4338ca;
}

html[data-color="aurora"] {
  --accent: #2dd4bf;
  --accent-2: #a78bfa;
  --accent-text: #115e59;
  --accent-text-2: #6d28d9;
}

html[data-color="berry"] {
  --accent: #c084fc;
  --accent-2: #f472b6;
  --accent-text: #7e22ce;
  --accent-text-2: #be185d;
}

html[data-color="mint"] {
  --accent: #4ade80;
  --accent-2: #22d3ee;
  --accent-text: #166534;
  --accent-text-2: #155e75;
}

html[data-color="ember"] {
  --accent: #f87171;
  --accent-2: #fbbf24;
  --accent-text: #b91c1c;
  --accent-text-2: #92400e;
}

html[data-theme="dark"] {
  --bg: color-mix(in srgb, var(--accent) 3%, #0b0c0e);
  --surface: color-mix(in srgb, var(--accent) 3%, #121316);
  --surface-raised: color-mix(in srgb, var(--accent) 3%, #16171a);
  --surface-soft: color-mix(in srgb, var(--accent) 3.5%, #1b1c20);
  --surface-hover: color-mix(in srgb, var(--accent) 3.5%, #202126);
  --border: color-mix(in srgb, var(--accent) 6%, #2a2c31);
  --border-strong: color-mix(in srgb, var(--accent) 6%, #3b3d43);
  --text: #f4f5f7;
  --text-secondary: #c0c5cd;
  --text-muted: #969da7;
  --text-subtle: #828892;
  --accent-glow: 0 6px 22px -4px color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-text: var(--accent);
  --accent-text-2: var(--accent-2);
  --icon-bg: #211e19;
  --icon-bg-hover: #2c2820;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .28);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .35);
  --success: #8fd6ae;
}

* {
  box-sizing: border-box;
}

/* the `hidden` attribute must always win, even over a later `display:` rule */
[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background-clip: padding-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% -10%, color-mix(in srgb, color-mix(in srgb, var(--accent) 12%, white) 90%, transparent), transparent 34%),
    linear-gradient(180deg, var(--bg), var(--bg));
  color: var(--text);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--accent) 5.5%, transparent), transparent 40%),
    linear-gradient(180deg, var(--bg), var(--bg));
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  min-height: 100vh;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.05);
}

.header-inner {
  width: min(var(--content-width), calc(100% - 48px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--accent-contrast);
  background: var(--accent-grad);
  box-shadow: var(--accent-glow);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.brand-group h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -.02em;
}

.brand-subtitle {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.header-button {
  min-height: 38px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), var(--surface-soft));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.header-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow-md);
}

.header-button:active {
  transform: translateY(1px);
}

.header-button-icon {
  display: grid;
  place-items: center;
}

/* color theme picker: header button plus a small swatch menu */
.header-actions {
  gap: 8px;
}

.color-picker {
  position: relative;
}

/* icon-only header buttons: square, with a small label on hover or keyboard focus */
.header-button.icon-button {
  position: relative;
  width: 38px;
  padding: 0;
  justify-content: center;
}

.icon-button .theme-svg {
  width: 20px;
  height: 20px;
}

.icon-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 76;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}

.icon-button[data-tooltip]:hover::after,
.icon-button[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* the open color menu already says what it is */
.icon-button[aria-expanded="true"]::after {
  display: none;
}

.color-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 75;
  width: 262px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.color-menu-title {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.color-swatches button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.color-swatches button[aria-pressed="true"] {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.color-menu-name {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.theme-svg {
  width: 17px;
  height: 17px;
}

.page-content {
  width: min(var(--content-width), calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 60px;
}

/* the page opens on the welcome screen; .show-library swaps it for the prompts */
.page-content:not(.show-library) > .toolbar,
.page-content:not(.show-library) > .library-layout,
.page-content.show-library > .welcome {
  display: none;
}

.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro today"
    "diff today";
  gap: 0 48px;
  padding: 24px 0 8px;
}

.welcome-intro {
  grid-area: intro;
  position: relative;
  padding-bottom: 32px;
}

/* decorative rolling dot wave across the lower part of the intro, added by a script */
.welcome-wave {
  position: absolute;
  top: 35%;
  right: -24px;
  bottom: 0;
  left: -24px;
  width: calc(100% + 48px);
  height: 65%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}

.welcome-wave.is-ready {
  opacity: .75;
}

.welcome-intro > :not(.welcome-wave) {
  position: relative;
}

.welcome-diff {
  grid-area: diff;
}

.welcome-today {
  grid-area: today;
}

/* no room for two columns: tasks come before the comparison, so people can act quickly */
@media (max-width: 1024px) {
  .welcome {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "intro"
      "today"
      "diff";
    gap: 30px;
  }

  .welcome-intro {
    padding-bottom: 0;
  }

  /* the search box and button fill the width here, so the wave moves up behind the headline */
  .welcome-wave {
    top: -48px;
    height: 50%;
  }

  .welcome-wave.is-ready {
    opacity: .55;
  }
}

/* two columns: the left side sets the page height, and the collections scroll inside the right side if they outgrow it */
@media (min-width: 1025px) {
  .welcome-today {
    height: 0;
    min-height: max(100%, calc(100vh - 222px));
    padding-right: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.welcome h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.welcome-description {
  max-width: 700px;
  margin: 16px 0 0;
  color: var(--text-secondary);
  font-size: 17px;
}

.welcome-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 26px 0 0;
}

.welcome-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--accent-contrast);
  background: var(--accent-grad);
  box-shadow: var(--accent-glow);
  font: inherit;
  font-size: 16px;
  font-weight: 680;
  cursor: pointer;
}

.welcome-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome-note {
  color: var(--text-muted);
  font-size: 13.5px;
}

.welcome-compare {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.welcome-compare-side {
  padding: 14px 18px;
}

.welcome-compare-side + .welcome-compare-side {
  border-top: 1px solid var(--border);
}

.welcome-compare-label {
  margin: 0 0 7px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.welcome-compare-typed {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.welcome-compare ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.welcome-compare li {
  display: flex;
  gap: 8px;
}

.welcome-compare li::before {
  content: "\2713";
  color: var(--accent-text);
  font-weight: 700;
}

.welcome-compare-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.welcome-copy {
  padding: 7px 14px;
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 620;
  cursor: pointer;
}

.welcome-copy:hover {
  background: var(--surface-hover);
}

.welcome-today h3 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.welcome-tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.welcome-tasks:last-child {
  margin-bottom: 0;
}

.welcome-task-name {
  flex: 1;
  min-width: 0;
}

.welcome-tasks .category-icon {
  flex: none;
}

.welcome-tasks button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.welcome-tasks button:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* welcome screen: one card per workflow, its steps as pills */
.wc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
  align-items: start;
}

.wc-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--surface), var(--surface-raised));
}

.wc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.wc-head .category-icon {
  flex: none;
}

.wc-name {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.wc-name:hover {
  text-decoration: underline;
}

.wc-count {
  flex: none;
  color: var(--text-muted);
  font-size: 12px;
}

.wc-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wc-pill {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.wc-pill.is-first {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  color: var(--text);
}

.wc-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}

.wc-pill.is-open {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--accent-contrast);
}

.wc-pill:focus-visible,
.wc-name:focus-visible,
.wc-open:focus-visible,
.wc-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wc-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.wc-box[hidden] {
  display: none;
}

.wc-box-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
}

.wc-close {
  flex: none;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.wc-close:hover {
  color: var(--text);
}

.wc-box .wf-text {
  background: var(--surface);
}

.wc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.wc-actions .wf-hint {
  margin-top: 0;
}

.wc-open {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.wc-open:hover {
  background: var(--surface-hover);
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 26px;
}

.search-wrap {
  position: relative;
}

.search-input {
  width: 100%;
  min-height: 50px;
  padding: 0 46px 0 44px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background:
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--surface-soft) 12%));
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

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

.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.search-wrap:focus-within .search-icon {
  color: var(--accent-text);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

.search-icon svg {
  width: 20px;
  height: 20px;
}

.clear-search {
  position: absolute;
  right: 9px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
}

.clear-search:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.clear-search svg {
  width: 16px;
  height: 16px;
}

.search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 7px 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text-subtle);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transition: opacity .12s ease;
}

.search-input:focus~.search-kbd,
.search-input:not(:placeholder-shown)~.search-kbd {
  opacity: 0;
}

.result-summary {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  min-width: 86px;
  color: var(--text-muted);
  font-size: 13px;
}

.result-summary strong {
  color: var(--accent-text);
  font-size: 15px;
}

/* mobile-only: the sidebar names the category on desktop */
.result-category {
  display: none;
}

/* mobile-only drawer pieces: hidden on desktop */
.cat-toggle,
.sidebar-close,
.sidebar-backdrop {
  display: none;
}

.library-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 99px;
  max-height: calc(100vh - 125px);
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding: 0 6px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.count-pill {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.category-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-button {
  width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.category-button:not(.active):hover {
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
  border-color: var(--border);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
  transform: translateX(1px);
}

.category-button.active {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--accent-contrast);
  box-shadow: var(--accent-glow);
}

.category-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--icon-bg);
}

.category-svg {
  width: 17px;
  height: 17px;
}

.category-button.active .category-icon {
  background: rgba(0, 0, 0, .14);
  color: var(--accent-contrast);
  border-color: transparent;
}

.category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 560;
}

.category-count {
  min-width: 20px;
  text-align: right;
  color: var(--text-subtle);
  font-size: 11px;
}

.category-button.active .category-name {
  font-weight: 680;
}

.category-button.active .category-count {
  color: var(--accent-contrast);
  opacity: .72;
}

.content-area {
  min-width: 0;
}

.content-header {
  margin-bottom: 18px;
}

.content-header h2 {
  margin: 0;
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.2;
  letter-spacing: -.03em;
}

.section-description {
  max-width: 820px;
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* closed prompts are name buttons that fill the width; the open one spans the whole row */
.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: start;
  gap: 10px;
}

.prompt-card {
  position: relative;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background:
    linear-gradient(145deg, var(--surface), var(--surface-raised));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22, .8, .24, 1), border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.prompt-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-lg);
}

.prompt-card:active {
  transform: translateY(0);
}

.prompt-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.prompt-card.copied {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.prompt-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.prompt-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.prompt-chip {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--icon-bg);
  color: var(--text);
  transition: background .16s ease, border-color .16s ease;
}

.prompt-card:hover .prompt-chip {
  background: var(--icon-bg-hover);
  border-color: var(--border-strong);
}

.prompt-svg {
  width: 16px;
  height: 16px;
}

.prompt-heading {
  flex: 1;
  min-width: 0;
}

.prompt-number {
  color: var(--text-subtle);
  font-weight: 650;
  letter-spacing: .04em;
}

/* drops to its own line as a whole when the category line runs out of room */
.prompt-stats {
  white-space: nowrap;
  text-transform: none;
  letter-spacing: .02em;
}

.prompt-stats::before {
  content: "· ";
}

.prompt-stats.own-line {
  display: block;
}

.prompt-stats.own-line::before {
  content: none;
}

.prompt-category {
  display: block;
  margin-bottom: 3px;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.prompt-card h3 {
  margin: 0;
  color: var(--accent-text);
  font-size: 13.5px;
  line-height: 1.3;
  letter-spacing: -.012em;
  /* a closed button shows up to two lines of the name */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* titles carry the theme gradient; small text keeps the solid --accent-text */
.brand-group h1,
.content-header h2,
.prompt-card h3,
.fill-head h2 {
  width: fit-content;
  max-width: 100%;
  background: var(--accent-text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* prompt packs: purpose line, fill-in tags and highlighted blanks */
.prompt-purpose {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.4;
}

.prompt-blanks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

.blank-tag {
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent-text);
  font-size: 10.5px;
  font-weight: 650;
}

.prompt-blank {
  padding: 0 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  font-weight: 600;
}

.search-hit {
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: inherit;
}

/* titles paint their gradient through the text, so a background here would hide the letters */
.prompt-card h3 .search-hit {
  background: none;
  text-decoration: underline 2px var(--accent-text);
  text-underline-offset: 3px;
}

/* fill-in panel: centered dialog, bottom sheet on phones */
.fill-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: min(720px, calc(100% - 48px));
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.fill-dialog[open] {
  display: flex;
  flex-direction: column;
}

.fill-dialog::backdrop {
  background: rgba(0, 0, 0, .5);
}

body:has(.fill-dialog[open]) {
  overflow: hidden;
}

.fill-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.fill-head > div {
  flex: 1;
  min-width: 0;
}

.fill-head h2 {
  margin: 2px 0 0;
  color: var(--accent-text);
  font-size: 17px;
  line-height: 1.3;
}

.fill-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.fill-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.fill-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.fill-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 16px;
}

.fill-preview {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.fill-value {
  padding: 0 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
  font-weight: 600;
}

.fill-label {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fill-field {
  margin-top: 12px;
}

.fill-field label,
.fill-name {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.fill-remembered {
  padding: 0 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
  font-size: 10.5px;
}

.fill-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.fill-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* blanks in the prompt preview: tap to type straight into the sentence */
.fill-preview [data-slot] {
  cursor: text;
}

/* empty blanks get a dashed edge so "still to fill" never relies on color alone (Mint is green too) */
.fill-preview .prompt-blank {
  outline: 1px dashed currentColor;
  outline-offset: -1px;
}

.fill-edit {
  padding: 1px 4px;
  border-radius: 4px;
  outline: 1px solid var(--accent);
  background: var(--surface-raised);
  color: var(--text);
  font-weight: 600;
}

.fill-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-weight: 400;
}

.fill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.fill-chips button {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.fill-chips button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.fill-chips .fill-pen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-style: dashed;
}

.fill-pen svg {
  width: 14px;
  height: 14px;
}

.fill-chips .fill-pen[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent-text);
}

.fill-chips button[data-pick][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--success) 55%, transparent);
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
  font-weight: 600;
}

.fill-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.fill-foot button {
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.fill-foot .fill-copy {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--accent-contrast);
}

.fill-foot .ai-share {
  padding: 0;
}

.fill-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-secondary);
  font-size: 11.5px;
}

.fill-open {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.fill-left {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
}

.fill-stats {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .fill-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* phones: one swipeable row of chips per blank */
  .fill-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  /* the pencil would sit off-screen at the end of the row */
  .fill-chips .fill-pen {
    order: -1;
  }

  .fill-dialog::before {
    content: "";
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--border-strong);
  }
}

.category-nav .domain-heading {
  margin: 14px 0 4px;
}

.series-tag {
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 5px;
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 500;
}

.category-button.active .series-tag {
  border-color: currentColor;
  color: inherit;
}

/* workflows: existing prompts run one after another in the same chat */
.workflow-view:not([hidden]) {
  display: grid;
  gap: 14px;
}

.wf-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wf-chip {
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
}

.wf-arrow {
  color: var(--text-muted);
  font-size: 12px;
}

/* in step by step mode the pills are buttons: click one to show that step */
button.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 11px;
  font-family: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

button.wf-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

button.wf-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wf-chip.is-next {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  color: var(--text);
}

.wf-chip.is-done {
  border-color: var(--success);
  color: var(--success);
}

.wf-chip.is-locked {
  opacity: .65;
}

.wf-chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--accent-contrast);
  opacity: 1;
}

.wf-chip-svg {
  flex: none;
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.wf-tabs {
  display: inline-flex;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.wf-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.wf-tabs button[aria-selected="true"] {
  background: var(--surface-soft);
  color: var(--accent-text);
}

.wf-badge {
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 5px;
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 600;
}

.wf-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.wf-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.wf-bar {
  flex: 1;
  min-width: 140px;
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.wf-bar i {
  display: block;
  height: 100%;
  background: var(--accent-grad);
  transition: width .25s ease;
}

.wf-progress-text {
  color: var(--text-muted);
  font-size: 12px;
}

.wf-reset,
.wf-copy {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.wf-copy.is-next {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--accent-contrast);
}

.wf-copy.is-done {
  border-color: var(--success);
  background: transparent;
  color: var(--success);
}

.wf-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
}

.wf-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: -14px;
  width: 2px;
  background: var(--border-strong);
}

.wf-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--icon-bg);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
}

.wf-num svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.wf-step.is-next .wf-num {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--accent-contrast);
}

.wf-step.is-done .wf-num {
  border-color: var(--success);
  background: transparent;
  color: var(--success);
}

.wf-box {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--surface), var(--surface-raised));
  box-shadow: var(--shadow-sm);
}

.wf-step.is-next .wf-box {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

.wf-step-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wf-step-heading {
  flex: 1;
  min-width: 0;
}

.wf-step-heading h3 {
  margin: 0;
  font-size: 15px;
}

.wf-source {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.wf-source span {
  border-bottom: 1px dotted currentColor;
  color: var(--accent-text);
}

.wf-why,
.wf-hint {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13.5px;
}

.wf-hint {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.wf-why strong,
.wf-warn strong {
  color: var(--text);
}

.wf-text {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wf-swap {
  padding: 0 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--text);
}

.wf-check {
  margin-top: 8px;
  padding: 7px 10px;
  border-left: 3px solid var(--success);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--success) 9%, transparent);
  color: var(--text-secondary);
  font-size: 13px;
}

.wf-check strong {
  display: block;
  color: var(--success);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wf-done,
.wf-warn {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13.5px;
}

.wf-done {
  border-color: var(--success);
}

.wf-done strong {
  color: var(--success);
}

.wf-quick-actions {
  display: flex;
  justify-content: flex-start;
}

.wf-note strong {
  color: var(--text);
}

/* phones hide the section heading, so a workflow brings its own */
.wf-mobile-head {
  display: none;
}

@media (max-width: 820px) {
  .wf-mobile-head {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  .wf-mobile-head .eyebrow {
    margin: 0;
  }

  .wf-mobile-head h2 {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    background: var(--accent-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 24px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.02em;
  }

  .wf-mobile-head p:last-child {
    margin: 2px 0 0;
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.5;
  }
}

.wf-step.is-locked .wf-box {
  opacity: .6;
}

.wf-copy:disabled {
  background: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
}

/* workflows that match a search, shown above the matching prompts */
.wf-results:not([hidden]) {
  display: grid;
  gap: 8px;
  margin-bottom: 17px;
}

.wf-results .eyebrow {
  margin: 0;
}

.wf-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wf-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 13px;
  background: linear-gradient(145deg, var(--surface), var(--surface-raised));
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wf-result:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.wf-result-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wf-result-meta {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wf-result strong {
  color: var(--accent-text);
  font-size: 15px;
}

.wf-result-desc {
  color: var(--text-secondary);
  font-size: 13px;
}

.wf-result-steps {
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 820px) {
  .wf-result-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .wf-step {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
  }

  .wf-step:not(:last-child)::before {
    left: 12px;
    top: 30px;
  }

  .wf-num {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .wf-step-top {
    flex-wrap: wrap;
  }

  .wf-step-top .prompt-chip {
    display: none;
  }

  .wf-tabs button {
    padding: 8px 10px;
  }
}

/* phone-only: desktop shows the pack description in the section heading */
.pack-tip {
  display: none;
}

.prompt-card.copied .prompt-copy {
  color: var(--success);
}

.copy-svg {
  width: 15px;
  height: 15px;
}

.prompt-expand {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.prompt-card.open .prompt-expand {
  display: grid;
}

.prompt-expand:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.prompt-expand svg {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}

.prompt-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* the full prompt text, shown only in the open card */
.prompt-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
  cursor: text;
}

.prompt-action {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.prompt-action:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.prompt-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prompt-star[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-text);
}

.prompt-star[aria-pressed="true"] svg {
  fill: currentColor;
}

/* desktop keeps the link button out of the way until the card is hovered or focused */
@media (hover: hover) and (min-width: 821px) {
  .prompt-share {
    opacity: 0;
  }

  .prompt-card:hover .prompt-share,
  .prompt-card:focus-within .prompt-share,
  .prompt-card:focus-visible .prompt-share {
    opacity: 1;
  }
}

.prompt-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

/* the label gets its own line, with the icons below it */
.prompt-actions-row > span,
.fill-open > span {
  flex-basis: 100%;
}

.ai-share {
  color: var(--text);
}

.ai-tool,
.ai-share {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-soft);
  cursor: pointer;
}

.ai-tool:hover,
.ai-share:hover {
  background: var(--surface-hover);
}

.ai-tool-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.ai-tool-chatgpt {
  color: #10a37f;
}

.ai-tool-claude {
  color: #d97757;
}

.ai-tool-gemini {
  color: #8e8cf0;
}

/* the lighter purple is too faint on light backgrounds */
[data-theme="light"] .ai-tool-gemini {
  color: #6a67dc;
}

.ai-tool-perplexity {
  color: #20b8cd;
}

/* same for the lighter teal */
[data-theme="light"] .ai-tool-perplexity {
  color: #13808f;
}

.ai-tool-deepseek {
  color: #7c93ff;
}

/* same for the lighter blue */
[data-theme="light"] .ai-tool-deepseek {
  color: #4d6bfe;
}

.ai-tool-grok {
  color: var(--text);
}

.prompt-card.linked {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

.sidebar .personal-nav {
  margin-bottom: 18px;
}

.chip-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.chip-buttons button:hover,
.chip-buttons button.active {
  color: var(--text);
  background: var(--surface-hover);
}

.chip-buttons .category-svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent-text);
}

.personal-chips {
  display: none;
}

.welcome-search {
  max-width: 560px;
  margin-top: 22px;
}

.welcome-search + .welcome-action {
  margin-top: 16px;
}

.welcome-search-go {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--accent-text);
  cursor: pointer;
}

.welcome-search-go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome-recent,
.welcome-starters {
  margin-bottom: 20px;
}

@media (max-width: 820px) {
  .prompt-action,
  .prompt-expand {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .page-content.show-library > .personal-chips:not([hidden]) {
    display: flex;
    margin-bottom: 12px;
  }
}

/* closed prompt: a compact name button. Details, actions and counts wait inside the open card. */
.prompt-card:not(.open) .prompt-action,
.prompt-card:not(.open) .prompt-purpose,
.prompt-card:not(.open) .prompt-stats,
.prompt-card:not(.open) .prompt-number.is-id {
  display: none;
}

/* category line on a closed button: only where categories mix, plus step numbers inside packs */
.prompt-grid:not(.mixed) .prompt-card:not(.open):not(.pack-card) .prompt-category,
.prompt-grid:not(.mixed) .prompt-card:not(.open) .prompt-group,
.prompt-card:not(.open) .prompt-number:empty {
  display: none;
}

.prompt-card:not(.open) .prompt-category {
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-number:not(:empty)::before {
  content: "· ";
}

.prompt-grid:not(.mixed) .prompt-card:not(.open) .prompt-number::before {
  content: none;
}

/* search match inside the prompt or purpose, shown as a short excerpt under the name */
.prompt-snippet {
  display: none;
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-card:not(.open) .prompt-snippet {
  display: block;
}

/* a small star marks favorites on a closed button */
.prompt-fav {
  display: none;
  position: absolute;
  top: 6px;
  right: 7px;
  color: var(--accent-text);
}

.prompt-fav svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  stroke: currentColor;
}

.prompt-card.starred:not(.open) .prompt-fav {
  display: block;
}

.prompt-card.starred:not(.open) .prompt-heading {
  padding-right: 12px;
}

/* open prompt: full row, same content as before */
.prompt-card.open {
  grid-column: 1 / -1;
  padding: 11px 14px;
  cursor: default;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.prompt-card.open:hover {
  transform: none;
}

.prompt-card.open .prompt-card-header {
  margin-bottom: 6px;
  gap: 11px;
}

.prompt-card.open .prompt-chip {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.prompt-card.open .prompt-svg {
  width: 18px;
  height: 18px;
}

.prompt-card.open h3 {
  display: block;
  font-size: 16px;
  overflow: visible;
}

/* phones: closed prompts read as a one-column list, one name per row */
/* details fold open: the row grows from nothing while the text fades in; hidden from tabbing and readers while folded */
.prompt-more {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s;
}

.prompt-card.shown .prompt-more {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.prompt-more-in {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}

.prompt-card.shown .prompt-more-in {
  opacity: 1;
  transform: none;
  transition-delay: .06s;
}

/* the header's own extras fade in as the card opens */
@keyframes prompt-fade-in {
  from {
    opacity: 0;
  }
}

.prompt-card.open .prompt-action,
.prompt-card.open .prompt-expand,
.prompt-card.open .prompt-purpose,
.prompt-card.open .prompt-stats {
  animation: prompt-fade-in .22s ease;
}

.prompt-card.no-anim .prompt-more,
.prompt-card.no-anim .prompt-more-in {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .prompt-more,
  .prompt-more-in {
    transition: none;
  }

  .prompt-card.open .prompt-action,
  .prompt-card.open .prompt-expand,
  .prompt-card.open .prompt-purpose,
  .prompt-card.open .prompt-stats {
    animation: none;
  }
}

@media (max-width: 560px) {
  .prompt-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .prompt-card:not(.open) {
    padding: 9px 12px;
  }
}

/* phones: an open card reads straight down, with the buttons along its bottom */
@media (max-width: 560px) {
  .prompt-card.open .prompt-card-main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 11px;
  }

  .prompt-card.open .prompt-card-header {
    display: contents;
  }

  .prompt-card.open .prompt-heading {
    flex-basis: calc(100% - 43px);
    margin-bottom: 6px;
  }

  .prompt-card.open .prompt-more {
    order: 2;
    width: 100%;
  }

  /* one swipeable row of tags, like the chips in the fill-in panel */
  .prompt-card.open .prompt-blanks {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .blank-tag {
    flex: none;
  }

  .prompt-card.open .prompt-text,
  .prompt-card.open .prompt-actions-row {
    width: 100%;
  }

  .prompt-card.open .prompt-action,
  .prompt-card.open .prompt-expand {
    order: 4;
    margin-top: 8px;
  }

  .prompt-card.open .prompt-share {
    margin-left: auto;
  }
}

/* the narrowest phones give the decorative icon's space to the prompt name */
@media (max-width: 360px) {
  .prompt-chip {
    display: none;
  }

  /* a one-column row has room for its icon */
  .prompt-card:not(.open) .prompt-chip {
    display: grid;
  }

  .prompt-card.open .prompt-heading {
    flex-basis: 100%;
  }
}

.empty-state {
  min-height: 320px;
  padding: 48px 24px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
}

.empty-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text-muted);
}

.empty-icon .ui-svg {
  width: 22px;
  height: 22px;
}

.empty-state h3 {
  margin: 0;
  font-size: 17px;
}

.empty-state p {
  margin: 6px 0 0;
  max-width: 420px;
  color: var(--text-muted);
  font-size: 13px;
}

.empty-state button {
  margin-top: 14px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  transform: translateX(-50%);
  padding: 10px 14px 10px 12px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  font-weight: 680;
}

.toast.has-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  width: max-content;
  max-width: calc(100% - 30px);
}

.toast[hidden] {
  display: none;
}

.toast.has-links {
  padding: 8px 6px 8px 10px;
}

.toast-close {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.toast-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.toast-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* stay clear of the round buttons in the bottom corner */
@media (max-width: 640px) {
  .toast.has-links {
    bottom: 80px;
  }

  .toast.has-links > span {
    flex-basis: 100%;
  }
}

.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease,
    background .16s ease, border-color .16s ease, color .16s ease;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--accent-grad);
  color: var(--accent-contrast);
  border-color: transparent;
}

.scroll-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .scroll-top {
    right: 14px;
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 1180px) {
  .library-layout {
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 820px) {

  .header-inner,
  .page-content {
    width: min(var(--content-width), calc(100% - 30px));
  }

  .page-content {
    padding-top: 4px;
  }

  /* section heading gives way to prompts; the toolbar names the category */
  .content-header {
    display: none;
  }

  /* search + category button stay pinned under the header while scrolling */
  .toolbar {
    position: sticky;
    top: 77px;
    z-index: 40;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    margin-bottom: 14px;
    padding: 10px 0 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .result-summary {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 0;
    font-size: 12px;
  }

  .result-summary strong {
    font-size: 13px;
  }

  .result-category {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 640;
  }

  .result-category::after {
    content: " ·";
    color: var(--text-subtle);
  }

  /* icon-only category button beside the search box */
  .cat-toggle {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: linear-gradient(180deg, var(--surface), var(--surface-soft));
    color: var(--text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  .cat-toggle:active {
    transform: translateY(1px);
  }

  .cat-toggle-icon {
    display: grid;
    place-items: center;
    color: var(--accent-text);
  }

  .cat-toggle-icon .category-svg {
    width: 21px;
    height: 21px;
  }

  .cat-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .cat-toggle-count,
  .cat-toggle-chevron {
    display: none;
  }

  .library-layout {
    grid-template-columns: 1fr;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(12, 9, 6, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s ease;
  }

  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 320px);
    max-height: none;
    margin: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    overflow-y: auto;
    background: var(--surface);
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22, .8, .24, 1);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* the site-wide hub button sits bottom-right, over the open drawer */
  body:has(.sidebar.open) #hub-host {
    display: none;
  }

  .sidebar-heading {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* pinned to the drawer's top corner, above whichever section comes first */
  .sidebar-close {
    position: absolute;
    top: calc(11px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text-muted);
    cursor: pointer;
  }

  .sidebar-close svg {
    width: 15px;
    height: 15px;
  }

  .category-nav {
    display: flex;
    flex-direction: column;
  }

  /* touch devices emulate :hover on tap - keep the desktop card
 hover effects from firing on a plain tap */
  .prompt-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border);
  }

  .prompt-card:hover .prompt-chip {
    background: var(--icon-bg);
    border-color: var(--border);
  }

  .pack-tip {
    display: block;
    margin: 0 0 12px;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.45;
  }
}

@media (max-width: 640px) {
  .header-inner {
    min-height: 68px;
  }

  .brand-subtitle {
    display: none;
  }

  .header-button {
    padding: 7px 9px;
  }

  .toolbar {
    top: 69px;
  }

  .search-kbd {
    display: none;
  }

  .prompt-card-header {
    gap: 8px;
  }

  .welcome-description {
    font-size: 15.5px;
  }

  .welcome-action {
    margin-top: 20px;
  }

  .welcome-cta {
    width: 100%;
  }

  .welcome-note {
    width: 100%;
    text-align: center;
  }

  .welcome-copy {
    width: 100%;
  }
}