/* Approved gallery framework: brand CSS stays shared with legacy pages. */
.gallery-framework { --prompt-anchor-offset: 110px; overflow-wrap: anywhere; }
.gallery-framework main { width: min(1600px, 96vw); }
.gallery-framework button, .gallery-framework select { font-family: inherit; }
.gallery-framework [hidden] { display: none !important; }
.gallery-framework button { cursor: pointer; }
.gallery-framework :is(button, select, summary, a, pre, [role="region"]):focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
.gallery-hero { padding: 38px 0 30px; }
.gallery-hero .prompt-breadcrumb { margin-bottom: 20px; }
.gallery-hero h1 { max-width: 1000px; font-size: clamp(2.5rem, 4.5vw, 3.7rem); margin: 0 0 18px; line-height: 1.07; }
.gallery-hero h1 span { color: var(--brand-dark); }
.gallery-hero .prompt-hero-lede { max-width: 790px; margin: 0; font-size: 1.05rem; }
.hero-utility-meta { color: var(--muted); font-size: 11px; margin: 12px 0 0; }
.hero-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(330px,1fr); align-items: center; gap: 44px; }
.hero-copy { min-width: 0; }
@media (max-width: 1050px) {
  .hero-layout { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .gallery-framework main { width: 92vw; }
}
.page-layout { display: block; }
.gallery-column { min-width: 0; }
.gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; max-width: none; }
.gallery-header h2 { margin: 0; font-size: clamp(1.7rem, 2.5vw, 2.2rem); }
#gallery-count { color: var(--muted); font: 500 11px "IBM Plex Mono", monospace; white-space: nowrap; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.filters button { padding: 9px 13px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); color: var(--muted); font-size: .75rem; font-weight: 600; }
.filters button[aria-pressed="true"] { color: var(--brand-ink); background: rgba(12,166,120,.13); border-color: rgba(12,166,120,.4); }
.evidence-note { font-size: .78rem; line-height: 1.65; color: var(--muted); margin: 14px 0 24px; }
.evidence-note strong { font-weight: 500; }
.prompt-card { min-width: 0; margin-bottom: 40px; background: var(--prompt-glass); border: 1px solid var(--line-bright); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; backdrop-filter: blur(16px); }
.prompt-card.is-recommended { border-color: rgba(12,166,120,.62); box-shadow: 0 0 0 2px rgba(12,166,120,.09), var(--shadow); }
.card-heading { padding: 24px 28px 20px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.intent-label { display: flex; align-items: center; gap: 9px; color: var(--brand-dark); font: 500 11px/1.5 "IBM Plex Mono", monospace; }
.card-number { color: var(--muted); }
.recommended { flex-shrink: 0; border: 1px solid rgba(12,166,120,.23); background: rgba(12,166,120,.1); border-radius: 999px; color: var(--brand-dark); padding: 4px 9px; font: 700 10px/1.5 "IBM Plex Mono", monospace; }
.card-heading h3 { font-size: clamp(1.4rem, 2.1vw, 1.8rem); letter-spacing: -.04em; line-height: 1.2; margin: 0 0 10px; }
.best-for { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { padding: 4px 9px; border-radius: 999px; background: rgba(12,166,120,.07); border: 1px solid rgba(12,166,120,.11); font-size: 11px; color: var(--brand-dark); }
.framework { font-size: .8rem; line-height: 1.65; color: var(--muted); margin: 14px 0 0; }
.framework strong { color: var(--ink); }
.pair { display: grid; grid-template-columns: minmax(0,60fr) minmax(0,40fr); gap: 20px; padding: 0 16px 24px; }
/* Image examples need equal room for the visual and its prompt. */
@media (min-width: 761px) {
  .pair:has(.gallery-image) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prompt-side, .output-side { min-width: 0; border-radius: 16px; overflow: hidden; }
.prompt-side.prompt-code-card { background: var(--prompt-dark); }
.output-side { border: 1px solid #c6d8cf; background: #fffdf7; box-shadow: 0 3px 14px rgba(9,37,29,.06); }
.output-side .pane-label { background: #e5efe8; }
.gallery-outcomes { margin-top: clamp(28px, 4vw, 48px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.gallery-framework) { scroll-behavior: smooth; }
}
.pane-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; min-height: 57px; border-bottom: 1px solid var(--line); font: 500 10px/1.5 "IBM Plex Mono", monospace; }
.pane-label strong { font-weight: 500; }
.prompt-side .pane-label { color: var(--prompt-mint); border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
.output-side .pane-label { color: var(--brand-dark); }
.illustration-label { border: 1px solid rgba(224,137,74,.3); border-radius: 6px; color: #775022; background: rgba(255,197,122,.13); font-family: "Space Grotesk", sans-serif; font-size: 11px; padding: 3px 6px; }
.gallery-framework .template-text, .gallery-framework .output-text { height: 520px; max-height: none; margin: 0; padding: 24px; overflow-y: scroll; overflow-x: hidden; scrollbar-gutter: stable; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.gallery-framework .template-text { font: 500 .875rem/1.85 "IBM Plex Mono", ui-monospace, monospace; color: #d7e6de; scrollbar-color: #537562 #10251b; }
.gallery-framework .output-text { font: 400 1rem/1.85 "Space Grotesk", sans-serif; color: var(--ink); scrollbar-color: #7fa58e #e9f0e9; }
.template-text::-webkit-scrollbar, .output-text::-webkit-scrollbar { width: 10px; }
.template-text::-webkit-scrollbar-track { background: #10251b; }
.template-text::-webkit-scrollbar-thumb { background: #537562; border: 2px solid #10251b; border-radius: 8px; }
.output-text::-webkit-scrollbar-track { background: #e9f0e9; }
.output-text::-webkit-scrollbar-thumb { background: #7fa58e; border: 2px solid #e9f0e9; border-radius: 8px; }
.template-text .variable-token { display: inline; padding: 1px 2px; margin: 0; border: 1px solid rgba(138,244,203,.22); border-radius: 4px; background: rgba(138,244,203,.08); color: var(--prompt-mint); font: inherit; line-height: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.template-text .variable-token:hover { background: rgba(138,244,203,.18); }
.gallery-framework .template-text:focus-visible, .gallery-framework .variable-token:focus-visible { outline-color: var(--prompt-mint); outline-offset: -3px; }
.inputs-row { padding: 8px 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.35); }
.inputs-row summary { list-style: none; display: flex; width: fit-content; min-height: 44px; gap: 12px; align-items: center; cursor: pointer; color: var(--brand-dark); font-size: 13px; font-weight: 600; }
.inputs-row summary::-webkit-details-marker { display: none; }
.inputs-row summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.input-toggle::before { content: '+'; }
.inputs-row details[open] .input-toggle::before { content: '−'; }
.inputs-row dl { display: grid; grid-template-columns: 125px 1fr; gap: 9px 12px; margin: 16px 0 5px; font-size: 13px; }
.inputs-row dt { font-weight: 700; }
.inputs-row dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.example-observation { margin: 18px 0 10px; padding: 12px 16px; border: 1px solid rgba(12,166,120,.16); border-left: 3px solid #0ca678; border-radius: 10px; background: linear-gradient(110deg, rgba(12,166,120,.06), rgba(47,157,232,.035)); color: #4f6258; font-size: 13px; line-height: 1.65; }
.example-evidence { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.gallery-framework .structured-output { white-space: normal; }
.structured-output h4 { margin: 0 0 12px; }
.structured-output p, .structured-output ul { margin: 0 0 16px; }
.example-table-scroll { overflow-x: auto; }
.structured-output table { border-collapse: collapse; width: 100%; font-size: 13px; }
.structured-output caption { text-align: left; font-weight: 600; padding: 0 0 10px; }
.structured-output th, .structured-output td { padding: 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.card-bottom { padding: 22px 32px 28px; }
.why-summary { max-width: none; color: var(--muted); font-size: 12px; line-height: 1.65; }
.why-summary > strong { color: var(--brand-dark); font: 500 10px "IBM Plex Mono", monospace; }
.why-summary ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; margin: 12px 0 0; padding-left: 17px; }
.supporting-content { max-width: 1000px; margin: 60px auto 0; padding-top: 50px; border-top: 1px solid var(--line); }
.gallery-support-sections > section { margin-bottom: 64px; }
.gallery-support-sections .gallery-audience-intro { max-width: 70ch; margin-bottom: 28px; }
.gallery-support-sections .prompt-deep-dive-footer > :only-child { grid-column: 1 / -1; }
.gallery-support-sections .prompt-deep-dive-footer a { overflow-wrap: anywhere; }
.gallery-support-sections .prompt-guidance-grid > :only-child { grid-column: 1 / -1; }
.gallery-support-sections .gallery-mistakes { display: grid; gap: 20px; }
.gallery-support-sections .gallery-mistakes h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.5; }
.gallery-support-sections .gallery-mistakes p { margin: 0; color: #d2e1d9; line-height: 1.65; }
.gallery-support-sections .prompt-tip-card > p { margin: 0; color: var(--muted); line-height: 1.65; }
.supporting-content .prompt-use-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 13px 20px; border-radius: 14px; background: var(--prompt-dark); color: var(--lab-text); font-size: 13px; box-shadow: var(--shadow-strong); opacity: 0; pointer-events: none; }
.toast.visible { opacity: 1; }
.no-js { padding: 20px; }
@media (max-width: 600px) {
  .gallery-framework { --prompt-anchor-offset: 140px; }
  .gallery-hero { padding-top: 26px; }
  .gallery-hero .prompt-breadcrumb { font-size: 9px; gap: 6px; }
  .gallery-hero h1 { font-size: 2.4rem; }
  .gallery-hero .prompt-hero-lede { font-size: 15px; }
  .gallery-header h2 { font-size: 1.7rem; }
  .filters { gap: 6px; }
  .filters button { font-size: 11px; padding: 8px 11px; }
  .card-heading { padding: 20px; }
  .card-heading h3 { font-size: 1.6rem; }
  .card-meta { align-items: flex-start; }
  .intent-label { font-size: 10px; }
  .recommended { font-size: 8px; }
  .pair { grid-template-columns: 1fr; padding: 0 12px 14px; gap: 12px; }
  .gallery-framework .template-text { height: 360px; font-size: 12px; }
  .gallery-framework .output-text { height: 360px; font-size: 15px; }
  .inputs-row { padding: 8px 18px; }
  .inputs-row dl { grid-template-columns: 1fr; gap: 3px; }
  .inputs-row dd { margin-bottom: 10px; }
  .card-bottom { padding: 18px; flex-direction: column; align-items: stretch; }
  .why-summary { max-width: none; }
  .supporting-content { margin-top: 35px; padding-top: 30px; }
  .supporting-content .prompt-use-cases { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html:has(.gallery-framework) { scroll-behavior: auto; } .gallery-framework * { transition: none !important; } }
/* Recorded image/code examples share the existing gallery panels. */
.gallery-image { margin: 0; white-space: normal; }
.gallery-image img { display: block; width: 100%; height: auto; border-radius: 12px; }
.gallery-image figcaption, .preview-label, .code-language { font-size: .82rem; line-height: 1.5; white-space: normal; }
.gallery-code { white-space: normal; min-width: 0; }
.gallery-code pre { overflow: auto; max-height: 420px; padding: 16px; white-space: pre; background: var(--prompt-dark); color: var(--lab-text); border-radius: 12px; }
.code-preview { display: block; width: 100%; height: 360px; border: 1px solid var(--line); border-radius: 12px; background: white; pointer-events: none; }

/* Every prompt owns a collapsed-by-default customizer; no shared workspace. */
.inline-customizer { padding: 28px 32px 26px; border-top: 1px solid var(--line); background: linear-gradient(120deg, rgba(12,166,120,.045), rgba(47,157,232,.035)); }
.inline-form-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.inline-form-header h4 { font-size: 1.35rem; letter-spacing: -.035em; margin: 0 0 7px; line-height: 1.2; }
.inline-form-header p { font-size: 13px; margin: 0; color: var(--muted); }
.inline-form-header .prompt-button { flex-shrink: 0; font-size: 12px; }
.customize-toggle { min-width: 194px; }
.customizer-body { margin-top: 24px; }
.customizer-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.customizer-tools .prompt-button { font-size: 12px; }
.inline-fields.prompt-variable-fields { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 30px; }
.inline-fields .prompt-variable-field:has(textarea) { grid-column: auto; }
.inline-fields label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.inline-fields label span { color: var(--muted); font-size: 11px; font-weight: 400; }
.inline-fields textarea { min-height: 96px; padding: 13px 15px; }
.inline-fields input { width: 100%; min-height: 46px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.85); color: var(--ink); font: inherit; }
.inline-fields small { display: block; margin-top: 7px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.inline-fields [aria-invalid="true"] { border-color: #a34b33; }
.inline-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.inline-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.inline-actions .prompt-button { font-size: 13px; }
.inline-feedback p { margin: 0; font-size: 12px; color: var(--muted); }
.inline-feedback .card-status { margin-top: 5px; color: var(--brand-dark); max-width: 570px; }
.manual-copy { display: block; width: 100%; min-height: 170px; margin-top: 20px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); font: 12px/1.7 "IBM Plex Mono", monospace; }
@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; }
  .inline-fields.prompt-variable-fields { grid-template-columns: 1fr; }
  .inline-form-header { align-items: flex-start; flex-direction: column; gap: 15px; }
  .inline-form-footer { align-items: stretch; flex-direction: column; gap: 15px; }
  .inline-actions { justify-content: space-between; flex-wrap: wrap; }
  .inline-fields textarea { font-size: 16px; }
  .why-summary ul { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gallery-hero { padding: 18px 0 22px; }
  .gallery-hero h1 { font-size: 2rem; margin-bottom: 12px; }
  .gallery-hero .prompt-hero-lede { font-size: 14px; line-height: 1.6; }
  .hero-layout { gap: 18px; }
  .hero-utility-meta { font-size: 10px; }
  .prompt-card { margin-bottom: 26px; }
  .card-heading { padding: 18px; }
  .card-meta { margin-bottom: 10px; }
  .tag-list { display: none; }
  .best-for { margin-bottom: 8px; font-size: 13px; }
  .framework { margin-top: 8px; font-size: 12px; }
  .card-bottom { padding: 14px 18px; }
  .inputs-row { padding: 8px 18px; }
  .inline-fields input { font-size: 16px; }
  .inline-customizer { padding: 24px 20px; }
  .inline-form-header h4 { font-size: 1.2rem; }
  .inline-form-header p { font-size: 12px; }
  .inline-fields.prompt-variable-fields { gap: 20px; }
  .inline-form-footer { padding-top: 18px; }
  .inline-actions .copy-customized { flex: 1; font-size: 12px; }
  .inline-actions { gap: 8px; }
  .gallery-framework .template-text, .gallery-framework .output-text { padding: 18px; }
}

/* Reuse the production in-layout contents navigation, with a slimmer desktop rail. */
.gallery-content-body { min-width: 0; }
.gallery-framework .prompt-page-nav { top: var(--gallery-nav-top, 104px); max-height: calc(100dvh - var(--gallery-nav-top, 104px) - 22px); }
.gallery-framework .prompt-page-nav .prompt-toc-group > summary { position: relative; }
.gallery-framework .prompt-page-nav .prompt-toc-group.contains-current > summary::before { content: ''; position: absolute; left: -1px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--brand); }
.gallery-framework .prompt-mobile-toc { top: var(--prompt-mobile-toc-offset, 144px); }
@media (min-width: 901px) {
  .gallery-content-layout { grid-template-columns: 170px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
}
.hero-cover { margin: 0; overflow: hidden; border-radius: 28px; border: 1px solid var(--line-bright); background: var(--panel-soft); box-shadow: var(--shadow); }
.hero-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.gallery-framework .hero-layout { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); }
.gallery-framework .supporting-content .prompt-content-prose ul { display: block; }
.gallery-framework .supporting-content .prompt-content-prose li { display: list-item; }
.gallery-framework .supporting-content :is(.prompt-check-grid, .prompt-guidance-grid) > :only-child { grid-column: 1 / -1; }
@media (max-width: 1050px) { .gallery-framework .hero-layout { grid-template-columns: 1fr; } .hero-cover { max-width: 760px; } }
/* Reading enhancements keep cards compact; full content is available on demand. */
.example-markdown { white-space: normal; overflow-wrap: anywhere; }
.example-markdown p { margin: 0 0 1em; }
.example-markdown h4 { font-size: 1.1em; margin: 1.2em 0 .6em; }
.example-markdown ul,.example-markdown ol { padding-left: 1.4em; }
.example-markdown pre,.gallery-large-view pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.markdown-table { overflow-x:auto; }
.markdown-table td,.markdown-table th { padding:.5em; border:1px solid #ccdcd3; text-align:left; }
.image-enlarge { display:block; border:0; padding:0; background:transparent; width:100%; cursor:zoom-in; }
.pane-label { flex-wrap:wrap; gap:.5rem; }
.gallery-framework .mini-copy {
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:8px 12px; border:1px solid #b9d3c5; border-radius:10px;
  background:#f8fcf9; color:#146247; font:600 12px/1.3 "Space Grotesk",sans-serif;
  letter-spacing:0; white-space:nowrap; text-decoration:none; box-shadow:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.gallery-framework .mini-copy:hover { background:#dcefe4; border-color:#79b59b; color:#094b34; }
.gallery-framework .mini-copy:active { background:#cce6d8; }
.gallery-framework .mini-copy:focus-visible { outline:3px solid #0a9167; outline-offset:3px; }
.gallery-framework .prompt-side .mini-copy { background:#1a3027; border-color:#3b5549; color:#d4eee0; }
.gallery-framework .prompt-side .mini-copy:hover { background:#294538; border-color:#70ae92; color:#fff; }
.gallery-framework .prompt-side .mini-copy:focus-visible { outline-color:#8ae0b8; }
.gallery-framework .prompt-code-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gallery-framework .pane-label { justify-content:flex-start; gap:8px; padding:12px 16px; }
.gallery-framework .pane-label > strong { margin-right:auto; }
.gallery-framework .illustration-label { border-radius:7px; font-size:11px; padding:5px 8px; line-height:1.3; }
.gallery-framework .mobile-example-expand { display:none; }
.gallery-large-view { width:min(1400px,96vw); max-width:96vw; max-height:92dvh; padding:0; border:1px solid #bdd8ca; border-radius:20px; background:#fffdf7; color:#10261d; }
.gallery-large-view::backdrop { background:rgb(5 23 16 / .72); }
.large-view-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem; background:#edf5ef; }
.large-view-header h2 { flex:1; font-size:1.15rem; margin:0; }
.large-view-body { padding:clamp(1rem,3vw,2.5rem); }
.large-view-body .output-text { max-height:none!important; height:auto!important; overflow:visible!important; padding:0; }
.large-view-body img { display:block; max-width:100%; height:auto; margin:auto; }
.large-view-body .image-enlarge { pointer-events:none; }
.gallery-framework .prompt-card > .inline-customizer {
  margin:0 16px 20px; padding:18px 20px; border:1px solid #d9e7df; border-radius:14px;
  background:rgba(235,246,239,.7);
}
.gallery-framework .prompt-card .inline-form-header { gap:16px; }
.gallery-framework .prompt-card .inline-form-header h4 {
  margin:0 0 5px; color:var(--ink); font:600 17px/1.35 "Space Grotesk",sans-serif; letter-spacing:-.015em;
}
.gallery-framework .prompt-card .inline-form-header p { margin:0; font-size:13px; line-height:1.55; }
.gallery-framework .inline-form-header .customize-toggle { min-width:0; min-height:40px; padding:10px 16px; font-size:12px; box-shadow:none; }
@media(prefers-reduced-motion:reduce) { .gallery-framework .mini-copy { transition:none; } }
@media(max-width:700px) {
  .gallery-framework .pane-label { padding:10px 12px; }
  .gallery-framework .mini-copy { min-height:42px; }
  .gallery-framework .prompt-card > .inline-customizer { padding:16px; margin-bottom:16px; }
  .gallery-framework .inline-form-header .customize-toggle { width:100%; }
  .js .output-text { max-height:360px; overflow:hidden; }
  .js .output-text.is-expanded { max-height:none; height:auto; overflow:visible; }
  .gallery-framework .mobile-example-expand { display:inline-flex; margin:8px 16px 12px; padding:8px 10px; border:0; border-radius:6px; background:transparent; font-size:12px; }
  .large-view-header { flex-wrap:wrap; padding:1rem; }
}