/* Kwebby Studio WordPress theme: additions to the design's core.css and blog.css for WordPress output
   (blocks, comments, widgets, search forms, pagination, ads) and the parts the design's blog pages did not show.
   Colours come only from the design tokens, so every rule works in light and dark mode. */

/* ---------- From the Next.js app's studio.css (used by the hire dialog's verify step) ---------- */
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 .875rem/1.4 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.link-btn:hover { color: var(--fg); text-decoration-color: currentColor; }
.link-btn:disabled { cursor: default; opacity: .6; text-decoration: none; }
.link-btn .ic { width: 16px; height: 16px; }
.sv-acc { color: var(--accent-ink); }

/* ---------- WordPress basics ---------- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus { clip: auto; clip-path: none; width: auto; height: auto; margin: 0; padding: 10px 14px; z-index: 200; background: var(--fg); color: var(--bg); border-radius: 999px; }
.site-main { display: block; }

/* Logged-in admin bar: keep the sticky header, rail and flyouts below it */
@media (min-width: 783px) {
  body.admin-bar .site-header { top: 32px; }
  body.admin-bar .read-bar { top: calc(var(--header-h) + 32px); }
}
@media (min-width: 1024px) {
  body.admin-bar .rail, body.admin-bar .fly { top: 32px; }
}
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
@media (max-width: 1023.98px) and (min-width: 601px) {
  body.admin-bar .rail { top: calc(var(--header-h) + 46px); }
}

/* ---------- Avatars: profile photo instead of the monogram ---------- */
.b-av--img { overflow: hidden; background: var(--panel-2); }
.b-av--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Cards without a featured image ---------- */
.bcard--no-media { grid-template-rows: 1fr; }
.bcard--no-media .bcard-body { padding-top: 22px; }

/* ---------- Pagination ---------- */
.bpages-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bpages-n a { position: relative; }
@media (max-width: 559px) { .bpages-n { order: 3; width: 100%; flex-wrap: wrap; } }

/* ---------- Search forms (sidebar, search page, 404) ---------- */
.kw-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kw-search .tsearch-box { flex: 1 1 220px; max-width: none; }
.kw-search .tsearch-box input { min-height: 48px; }
.kw-search .btn { flex: none; }
.bside-search .kw-search .tsearch-box input { background: var(--panel); }
.search-head-form { margin-top: 28px; max-width: 640px; display: grid; gap: 10px; }
.search-head-k { font: 500 .8125rem/1.3 var(--font-mono); color: var(--muted); }
.blog-bar .tsearch { margin: 0; }

/* ---------- Sidebar: recent posts, widgets, ad ---------- */
.bside-posts { display: grid; }
.bside-posts li + li { border-top: 1px solid var(--line); }
.bside-posts a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--fg); text-decoration: none; }
.bside-th { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); }
.bside-pt { display: grid; gap: 4px; min-width: 0; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.bside-pt time { font: 500 .75rem/1.3 var(--font-mono); color: var(--muted); }
.bside-posts a:hover .bside-pt > .link-u { color: var(--accent-ink); }
.bside-cats a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }
.b-tag[aria-current="page"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }

/* Widgets added in Appearance > Widgets */
.widget ul { display: grid; }
.widget ul li { padding: 8px 0; }
.widget ul li + li { border-top: 1px solid var(--line); }
.widget a { color: var(--fg); text-decoration-color: var(--line); text-underline-offset: 3px; }
.widget a:hover { color: var(--accent-ink); }
.widget select, .widget input[type="text"], .widget input[type="email"], .widget input[type="search"] {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit;
}
.widget img { border-radius: var(--r-sm); }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.widget .wp-block-search__button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer; }

.kw-ad { display: grid; gap: 8px; justify-items: center; }
.kw-ad--side { padding: 16px; }
.kw-ad-box { display: block; width: 100%; max-width: 300px; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); }
.kw-ad--toc .kw-ad-box { max-width: 240px; }
.kw-ad-box img { width: 100%; height: auto; }
.kw-ad-k { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sidebar-ad-placeholder { display: grid; place-items: center; gap: 8px; aspect-ratio: 1; padding: 16px; border-style: dashed; border-color: var(--muted); color: var(--muted); text-align: center; font-size: .8125rem; }
.sidebar-ad-placeholder .ic { width: 28px; height: 28px; }
@media (max-width: 1023.98px) { .toc-col .kw-ad { display: none; } .toc-col:not(:has(.toc)) { display: none; } }

/* ---------- Newsletter: band on posts ---------- */
.bnews-band { max-width: 60rem; }
@media (min-width: 760px) {
  .bnews-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px 32px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); }
  .bnews-band .bnews-done { grid-column: 2; }
}
@media (min-width: 1024px) { .bnews-band { margin-left: calc(min(260px, 22vw) + 56px); } }
.bnews-txt { display: grid; gap: 8px; }
.bnews-band .bside-h { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.03em; }
.post-news { padding-top: 0; }

/* ---------- Author links ---------- */
.author-social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.author-social .icon-btn { width: 40px; height: 40px; text-decoration: none; }
.author-social .icon-btn .ic { width: 17px; height: 17px; }
@media (pointer: coarse) { .author-social .icon-btn { width: 44px; height: 44px; } }

/* ---------- Post: foot (share on mobile, tags), previous / next ---------- */
@media (min-width: 1024px) {
  .post-foot, .post-nav, .cmt-box { margin-left: calc(min(260px, 22vw) + 56px); }
  .prose-wrap.no-toc + .post-foot { margin-left: 0; }
}
.post-foot { display: grid; gap: 24px; max-width: 46rem; }
.post-foot:empty { display: none; }
.post-tags { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .post-tags { margin-top: 40px; } }
.post-nav { display: grid; gap: 12px; max-width: 60rem; margin-top: 24px; }
@media (min-width: 640px) { .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-nav-next { grid-column: 2; text-align: right; justify-items: end; } }
.post-nav-a { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); color: var(--fg); text-decoration: none; transition: border-color .2s, transform .3s var(--ease); }
.post-nav-a:hover { border-color: var(--fg); transform: translateY(-2px); }
.post-nav-a .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.post-nav-a .eyebrow .ic { width: 16px; height: 16px; }
.post-nav-t { font: 640 1.0625rem/1.3 var(--font-display); letter-spacing: -.02em; }
.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 .875rem/1 var(--font-mono); }
.page-links a, .page-links > span:not(.page-links-k) { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.page-links > span:not(.page-links-k) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.page-links-k { color: var(--muted); margin-right: 4px; }

/* ---------- Article content from the block editor ---------- */
.prose h5, .prose h6 { font-size: 1rem; margin-top: 1.4em; }
.prose h4, .prose h5, .prose h6 { scroll-margin-top: calc(var(--header-h) + 20px); }
.prose figure { margin-block: 1.6em; }
.prose > figure:first-child { margin-top: 0; }
.prose img, .prose video, .prose iframe, .prose embed, .prose object { max-width: 100%; }
.prose video { height: auto; border-radius: var(--r-md); }
.prose .aligncenter { margin-inline: auto; text-align: center; }
.prose .aligncenter img { margin-inline: auto; }
.prose .alignleft, .prose .alignright { max-width: 50%; }
@media (min-width: 640px) {
  .prose .alignleft { float: left; margin: .3em 1.4em 1em 0; }
  .prose .alignright { float: right; margin: .3em 0 1em 1.4em; }
}
@media (max-width: 639px) { .prose .alignleft, .prose .alignright { max-width: 100%; } }
.prose::after { content: ""; display: table; clear: both; }
.prose .wp-caption { max-width: 100%; }
.prose .wp-caption-text, .prose figcaption, .prose .wp-element-caption { font-size: .875rem; color: var(--muted); margin-top: 8px; text-align: left; }
.prose .wp-block-image img { border: 1px solid var(--line); }
.prose mark { background: var(--accent-soft); color: var(--fg); padding: 0 2px; border-radius: 3px; }
.prose kbd { font: 500 .85em/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); }
.prose dl > * + * { margin-top: .4em; }
.prose dt { font-weight: 600; }
.prose dd { margin-left: 1.2em; color: var(--muted); }
.prose strong, .prose b { font-weight: 650; }
.prose sup, .prose sub { line-height: 0; }
.prose blockquote { margin-inline: 0; }
.prose blockquote > * + * { margin-top: .6em; }
.prose blockquote cite, .prose .wp-block-quote cite, .prose .wp-block-pullquote cite { display: block; margin-top: 8px; font: 500 .8125rem/1.4 var(--font-mono); font-style: normal; color: var(--muted); }
.prose .wp-block-pullquote { padding: 24px 0; border-block: 1px solid var(--fg); text-align: left; }
.prose .wp-block-pullquote blockquote { border: 0; background: none; padding: 0; }
.prose .wp-block-pullquote p { font: 640 clamp(1.25rem, 1.05rem + .7vw, 1.625rem)/1.3 var(--font-display); letter-spacing: -.02em; }
.prose .wp-block-separator, .prose hr.wp-block-separator { border: 0; border-top: 1px solid var(--line); margin-block: 2em; opacity: 1; }
.prose .wp-block-embed { margin-block: 1.6em; }
.prose .wp-block-embed__wrapper { position: relative; }
.prose .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 75%; }
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.prose iframe { border: 0; border-radius: var(--r-md); }
.prose .wp-block-gallery { gap: 12px; }
.prose .wp-block-gallery img { border-radius: var(--r-sm); }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.prose .wp-block-button__link, .prose .wp-element-button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
}
.prose .wp-block-button__link:hover, .prose .wp-element-button:hover { text-decoration: none; box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.prose .is-style-outline .wp-block-button__link { background: var(--bg); color: var(--fg); border-color: var(--line); }
.prose .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prose .wp-block-file__button { padding: 8px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); text-decoration: none; font-size: .875rem; }
.prose .has-text-align-center { text-align: center; }
.prose .has-text-align-right { text-align: right; }
.prose details { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; }
.prose details summary { cursor: pointer; font-weight: 600; }
.prose details[open] summary { margin-bottom: 8px; }

/* Tables (block editor tables and bare tables, which blog-live.js wraps in .table-scroll) */
.prose .wp-block-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prose .wp-block-table table { min-width: 520px; margin: 0; }
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line); }
.prose thead th, .prose .wp-block-table thead { border-bottom: 1px solid var(--line); }
.prose thead th { font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--panel); }
.prose tbody tr:last-child > * { border-bottom: 0; }
.prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--panel); }
.prose .wp-block-table figcaption { padding: 0 14px 12px; }

/* Code blocks with a Copy button (blog-live.js) */
.prose pre { position: relative; font: 500 .875rem/1.6 var(--font-mono); color: var(--fg); white-space: pre; }
.prose pre.has-copy { padding-top: 44px; }
.code-copy {
  position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: 500 .75rem/1 var(--font-mono); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.code-copy:hover { color: var(--fg); border-color: var(--fg); }
.code-copy .ic { width: 14px; height: 14px; }
.code-copy.is-copied { color: var(--ok); border-color: var(--ok); }

/* ---------- Comments ---------- */
.post-comments { border-top: 1px solid var(--line); }
.cmt-box { display: grid; gap: 28px; max-width: 46rem; }
.cmt-top { display: grid; gap: 10px; }
.cmt-title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -.035em; }
.cmt-list, .cmt-list .children { display: grid; gap: 14px; }
.cmt-list .children { margin-top: 14px; padding-left: clamp(14px, 3vw, 28px); border-left: 1px solid var(--line); }
.cmt { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); }
.bypostauthor > .cmt { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 35%, var(--bg)); }
.cmt-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cmt-av { flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--panel-2); }
.cmt-av img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.cmt-who { display: grid; gap: 2px; min-width: 0; }
.cmt-n { font-weight: 600; font-size: .9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.cmt-n a { color: inherit; text-decoration: none; }
.cmt-n a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cmt-when { font: 500 .75rem/1.3 var(--font-mono); color: var(--muted); text-decoration: none; }
.cmt-when:hover { color: var(--fg); }
.cmt-body { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.cmt-body > * + * { margin-top: .8em; }
.cmt-body a { color: var(--accent-ink); text-underline-offset: 3px; }
.cmt-mod { padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel); color: var(--muted); font-size: .875rem; }
.cmt-actions { display: flex; }
.cmt-actions .btn-sm { min-height: 36px; padding: 0 14px; font-size: .8125rem; }
@media (pointer: coarse) { .cmt-actions .btn-sm { min-height: 44px; } }
.cmt-actions .btn .ic { width: 15px; height: 15px; }
.cmt-closed { color: var(--muted); font-style: italic; }
.comments-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.comments-pagination .page-numbers { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 40px; justify-content: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--fg); font: 500 .875rem/1 var(--font-mono); }
.comments-pagination .page-numbers.current { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.comments-pagination .page-numbers .ic { width: 16px; height: 16px; }

.cmt-respond { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel); }
.cmt-list .cmt-respond { margin-top: 14px; }
.cmt-reply-h { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.cmt-reply-h small, .cmt-cancel { font: 500 .8125rem/1.3 var(--font-body); }
.cmt-reply-h small a, .cmt-cancel a { color: var(--accent-ink); }
.cmt-form { display: grid; gap: 14px; }
@media (min-width: 640px) { .cmt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmt-form > * { grid-column: 1 / -1; } .cmt-form .comment-form-author { grid-column: 1; } .cmt-form .comment-form-email { grid-column: 2; } }
.cmt-form .field input, .cmt-form .field textarea { background: var(--bg); }
.cmt-note, .cmt-form .logged-in-as { font-size: .875rem; color: var(--muted); }
.cmt-form .logged-in-as a { color: var(--accent-ink); }
.cmt-check { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--muted); }
.cmt-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.cmt-form .form-submit { margin: 0; }
.cmt-form .form-submit .btn { justify-self: start; }

@media print {
  .site-header, .rail, .site-footer, .fab, .fab-panel, .launcher, .hire, .toc-col, .share-block, .post-related, .post-news, .post-comments, #start, .code-copy { display: none !important; }
  body { padding-left: 0 !important; }
}

/* ---- Synced from src/styles/studio/studio.css (main site) ---- */
/* Hire dialog: project types with icons (13 options) */
.opts--ic { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.opt--ic { gap: 10px; padding: 10px 12px; }
.opt--ic .opt-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--panel); color: var(--accent-ink); transition: background-color .2s, color .2s; }
.opt--ic .opt-ic .ic { width: 18px; height: 18px; }
.opt--ic .opt-t { flex: 1; min-width: 0; }
.opt--ic .opt-mark { margin-left: auto; }
.opt--ic:has(input:checked) .opt-ic { background: var(--accent); color: var(--on-accent); }

/* Mobile header and drawer (owner feedback): buttons sit at the right edge; calmer menu type */
@media (max-width: 1023.98px) {
  .header-actions { margin-left: auto; }
  .rail .rail-btn { min-height: 50px; font: 500 1.0625rem/1.25 var(--font-body); letter-spacing: 0; }
  .rail .rail-hub .rail-btn, .rail .rail-all { font: 500 1rem/1.25 var(--font-body) !important; min-height: 48px !important; }
  .rail .rail-btn .ic { width: 18px; height: 18px; }
  .rail .rail-div { margin-top: 18px; }
}
@media (max-width: 400px) {
  .header-in { gap: 8px; }
  .header-hire { padding-inline: 14px; }
}

/* ---- "Need developers?" coupon (replaces the ad boxes and newsletter boxes). Ticket style, 300x300. ---- */
.kw-coupon { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; min-height: 300px; padding: 22px 22px 18px; border: 2px dashed var(--accent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg)); color: var(--fg); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.kw-coupon:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -28px var(--shadow-c2); }
.kw-coupon:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kw-coupon::before, .kw-coupon::after { content: ""; position: absolute; top: 62%; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 2px dashed var(--accent); }
.kw-coupon::before { left: -13px; clip-path: inset(0 0 0 50%); }
.kw-coupon::after { right: -13px; clip-path: inset(0 50% 0 0); }
.kw-coupon-top { display: inline-flex; align-items: center; gap: 8px; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.kw-coupon-top .ic { width: 16px; height: 16px; }
.kw-coupon-off { display: grid; gap: 2px; }
.kw-coupon-off b { font: 800 clamp(3rem, 2.4rem + 2vw, 4rem)/.95 var(--font-display); letter-spacing: -.05em; color: var(--accent-ink); }
.kw-coupon-off span { font: 600 1.0625rem/1.25 var(--font-display); }
.kw-coupon-what { font-size: .875rem; color: var(--muted); line-height: 1.45; }
.kw-coupon-cut { margin: 4px -22px 0; border-top: 2px dashed var(--accent); opacity: .55; }
.kw-coupon-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.kw-coupon-cta .ic { width: 18px; height: 18px; }
.kw-coupon-fine { font-size: .75rem; color: var(--muted); text-align: center; }
/* Under the article (where the newsletter band was): wider ticket, still compact */
.kw-coupon--band { max-width: 100%; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.kw-coupon--band .kw-coupon-cut, .kw-coupon--band::before, .kw-coupon--band::after { display: none; }
.kw-coupon--band .kw-coupon-top { grid-column: 1 / -1; }
.kw-coupon--band .kw-coupon-cta { margin-top: 0; }
.kw-coupon--band .kw-coupon-fine { grid-column: 1 / -1; text-align: left; }
@media (max-width: 700px) { .kw-coupon--band { grid-template-columns: minmax(0, 1fr); } }
.toc-col .kw-coupon { margin-top: 20px; }

/* ---- Code Preview box ([code_preview] shortcode and the Code Preview block) ---- */
.kw-cp { margin: 1.6em 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.kw-cp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.kw-cp-t { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 .9375rem/1.3 var(--font-body); }
.kw-cp-t .ic { width: 18px; height: 18px; color: var(--accent-ink); }
.kw-cp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-cp-tabs button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); font: 500 .8125rem/1 var(--font-mono); cursor: pointer; }
.kw-cp-tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.kw-cp-frame { display: block; width: 100%; border: 0; background: #fff; }
.kw-cp-code { position: relative; }
.kw-cp-code pre { margin: 0; padding: 18px; max-height: 480px; overflow: auto; background: var(--code-bg); font: 400 .8125rem/1.6 var(--font-mono); border-radius: 0; }
.kw-cp-copy { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* ---------- Site search (header button + Cmd/Ctrl+K), dialog built by studio-core.js ---------- */
.search-btn { flex: none; }
.ksearch { width: min(680px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 48px)); margin: clamp(12px, 9vh, 96px) auto auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); color: var(--fg); box-shadow: 0 40px 80px -30px var(--shadow-c2); opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .18s, transform .22s var(--ease); }
.ksearch.is-open { opacity: 1; transform: none; }
.ksearch::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.ksearch-panel { display: flex; flex-direction: column; max-height: inherit; }
.ksearch-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.ksearch-head > .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.ksearch-input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--fg); font: 400 1.0625rem/1.4 var(--font-body); outline: none; }
.ksearch-input::-webkit-search-cancel-button { display: none; }
.ksearch-esc { flex: none; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); font: 500 .75rem/1 var(--font-mono); cursor: pointer; }
.ksearch-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.ksearch-gh { margin: 12px 10px 6px; font: 500 .6875rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ksearch-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md); color: var(--fg); text-decoration: none; }
.ksearch-row[aria-selected="true"] { background: var(--panel); }
.ksearch-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); color: var(--accent-ink); }
.ksearch-row[aria-selected="true"] .ksearch-ic { background: var(--accent); color: var(--on-accent); }
.ksearch-ic .ic { width: 16px; height: 16px; }
.ksearch-tx { display: grid; min-width: 0; }
.ksearch-t { font-weight: 600; font-size: .9375rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksearch-d { font-size: .8125rem; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksearch-row mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.ksearch-m { font: 500 .6875rem/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.ksearch-go { color: var(--muted); opacity: 0; }
.ksearch-go .ic { width: 16px; height: 16px; }
.ksearch-row[aria-selected="true"] .ksearch-go { opacity: 1; }
.ksearch-msg { padding: 8px 12px; color: var(--muted); font-size: .875rem; }
.ksearch-msg:empty { display: none; }
.ksearch-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--panel); font-size: .75rem; color: var(--muted); }
.ksearch-foot kbd { display: inline-block; min-width: 20px; margin-right: 3px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font: 500 .6875rem/1.2 var(--font-mono); text-align: center; }
@media (max-width: 640px) {
  .ksearch { margin-top: 8px; max-height: calc(100dvh - 16px); }
  .ksearch-m, .ksearch-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ksearch { transition: none; transform: none; } }

/* ---- Post left column (owner, 2026-10-15): the column stays put (no scrolling of its own) so the share buttons and the
   coupon stay in view; only the table of contents scrolls, with a fixed height and a visible scrollbar. ---- */
@media (min-width: 1024px) {
  .toc-col { overflow: visible; max-height: none; scrollbar-width: auto; }
  .toc-col .toc {
    max-height: clamp(160px, calc(100svh - var(--header-h) - 540px), 420px);
    overflow-y: auto; overscroll-behavior: contain; padding-right: 10px;
    scrollbar-width: thin; scrollbar-color: var(--muted) var(--panel);
  }
  .toc-col .toc::-webkit-scrollbar { width: 8px; }
  .toc-col .toc::-webkit-scrollbar-track { background: var(--panel); border-radius: 999px; }
  .toc-col .toc::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; }
  .toc-col .toc::-webkit-scrollbar-thumb:hover { background: var(--fg); }
  .toc-col .kw-coupon { min-height: 0; padding-top: 18px; padding-bottom: 14px; gap: 8px; }
  .toc-col .kw-coupon-off b { font-size: 2.75rem; }
}
/* Short desktop windows: drop the coupon from the column so the TOC and share buttons still fit */
@media (min-width: 1024px) and (max-height: 760px) { .toc-col .kw-coupon { display: none; } .toc-col .toc { max-height: calc(100svh - var(--header-h) - 220px); } }
/* No coupons on smaller screens */
@media (max-width: 1023.98px) { .kw-coupon { display: none !important; } .post-news:has(.kw-coupon) { display: none; } }