/*!
 * Cloudhim theme — the /tools pages (directory, categories, tools), laid
 * out full width without the sidebar. Loaded only on those pages, after
 * Public Tools' tools.css and the tool's own stylesheet.
 */
.tp-wrap { max-width: 78rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1024px) { .tp-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
.tp-page { padding-bottom: 3.5rem; }

/* Breadcrumbs and title band. */
.tp-crumbs .bh-breadcrumbs__inner { max-width: 78rem; }
.tp-band .ch-band__inner { padding-top: 2rem; padding-bottom: 2.25rem; }
@media (min-width: 1024px) { .tp-band .ch-band__inner { padding-top: 2.5rem; padding-bottom: 2.75rem; } }
.tp-band__title { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem); margin-bottom: .6rem; }
.tp-band__desc { max-width: 46rem; }
.tp-band__kicker { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #2563eb; }
.tp-band__kicker .pt-ico { width: 1rem; height: 1rem; }
.tp-band__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.tp-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.3;
    background: #fff; border: 1px solid #dbe3ef; color: #334155; text-decoration: none; }
a.tp-pill:hover { border-color: #93c5fd; color: #1d4ed8; }
.tp-pill .pt-ico { width: .95rem; height: .95rem; flex: 0 0 auto; }
.tp-pill--ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.tp-pill--server { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.tp-pill--plain .pt-ico { color: #16a34a; }

/* Search in the directory's band. */
.tp-band .tp-search { max-width: 40rem; margin-top: 1.5rem; background: #fff; box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35); }
.tp-status { margin: 1rem 0 0; }
.tp-status:empty { display: none; }

/* Listings: directory and category pages. */
.tp-listing { padding-top: .5rem; }
.tp-cats { position: sticky; top: var(--tp-head, 0px); z-index: 5; margin: 1.25rem -1rem 0; padding: .75rem 1rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; }
.tp-cats .pt-cats__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.tp-cats .pt-cats__list::-webkit-scrollbar { display: none; }
.tp-cats .pt-chip { white-space: nowrap; }
@media (min-width: 1024px) { .tp-cats { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
/* One row; arrow buttons on desktop (added by tools-page.js), swipe on touch screens. */
.tp-cats__row { position: relative; display: flex; align-items: center; gap: .5rem; }
.tp-cats__row .pt-cats__list { flex: 1 1 auto; min-width: 0; scroll-behavior: smooth; }
.tp-cats__row .pt-cats__list > li { flex: 0 0 auto; }
.tp-cats__arrow { flex: 0 0 auto; display: none; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid #dbe3ef; border-radius: 999px; background: #fff; color: #334155; cursor: pointer; box-shadow: 0 2px 6px -3px rgba(15, 23, 42, .25); transition: border-color .15s, color .15s, opacity .15s; }
.tp-cats__arrow:hover:not(:disabled) { border-color: #93c5fd; color: #1d4ed8; }
.tp-cats__arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.tp-cats__arrow:disabled { opacity: .35; cursor: default; }
.tp-cats__arrow svg { width: 1.1rem; height: 1.1rem; }
.tp-cats__row.has-overflow .pt-cats__list { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); }
.tp-cats__row.at-start .pt-cats__list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.25rem), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 1.25rem), transparent 100%); }
.tp-cats__row.at-end .pt-cats__list { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem); mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem); }
.tp-cats__row.at-start.at-end .pt-cats__list { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .tp-cats__row.has-overflow .tp-cats__arrow { display: grid; } }
.tp-group { margin-top: 2.5rem; scroll-margin-top: calc(var(--tp-head, 0px) + 4.5rem); }
.tp-group__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .25rem 1rem; }
.tp-group__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: linear-gradient(135deg, #eff6ff, #eef2ff); color: #2563eb; border: 1px solid #dbeafe; }
.tp-group__icon .pt-ico { width: 1.35rem; height: 1.35rem; }
.tp-group__all { white-space: nowrap; }
@media (max-width: 640px) {
    .tp-group__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .tp-group__icon { display: none; }
}
.pt-cards.tp-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
@media (min-width: 1100px) { .pt-cards.tp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-listing > .tp-wrap > .tp-cards { margin-top: 2rem; }
.tp-othercats { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; }

/* Tool page. */
.tp-tool { padding-top: 1.75rem; }
.tp-body > .pt-ui { margin-bottom: 0; }
/* The explanation below the tool: readable line length, prose typography. */
.tp-body > :not(.pt-ui):not(.not-prose) { max-width: 50rem; margin-top: 3rem; }
.tp-body > :not(.pt-ui):not(.not-prose) > :first-child { margin-top: 0; }

/* Two-column workspace (tools-page.js moves the panels into the columns). */
.tp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 1.25rem; align-items: start; }
.tp-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tp-col > .pt-panel { margin: 0 !important; }
.tp-col--out { position: sticky; top: calc(var(--tp-head, 0px) + 1rem); }
.tp-col--out.tp-col--tall { position: static; }
.tp-col--out textarea.pt-textarea { max-height: calc(100vh - var(--tp-head, 0px) - 14rem); }
.tp-split .tp-col--out .pt-panel { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -20px rgba(37, 99, 235, .35); }

/* Further reading and related tools. */
.tp-more { margin-top: 3.5rem; padding: 2.75rem 0 0; border-top: 1px solid #e2e8f0; background: linear-gradient(#f8fafc, rgba(248, 250, 252, 0) 14rem); }
.tp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tp-section-title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: #0f172a; }
.tp-section-head .tp-section-title { margin: 0; }
.tp-reading { margin-bottom: 2.5rem; }
.tp-reading__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .75rem; }
.tp-article { display: flex; align-items: flex-start; gap: .75rem; height: 100%; padding: .85rem 1rem; border: 1px solid #e2e8f0; border-radius: .8rem; background: #fff; color: #0f172a; font-weight: 600; line-height: 1.4; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tp-article:hover { border-color: #93c5fd; box-shadow: 0 6px 18px -12px rgba(37, 99, 235, .5); color: #1d4ed8; }
.tp-article__icon { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: #eff6ff; color: #2563eb; }
.tp-article__icon .pt-ico { width: 1.1rem; height: 1.1rem; }
.tp-related.pt-related { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 640px) {
    .tp-tool { padding-top: 1.25rem; }
    .tp-body.prose-lg { font-size: 1rem; line-height: 1.7; }
    .tp-body.prose-lg :where(h2):not(:where(.not-prose *)) { font-size: 1.35rem; margin-top: 2rem; margin-bottom: .75rem; }
    .tp-body.prose-lg :where(h3):not(:where(.not-prose *)) { font-size: 1.125rem; }
    .tp-band__tags .tp-pill--plain { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tp-article, .tp-cats__arrow { transition: none; } .tp-cats__row .pt-cats__list { scroll-behavior: auto; } }
.tp-col--out .ss-code--short { min-height: 6.5rem; }