/*
 * KivTools surface refinement
 *
 * The catalogue is an instrument panel, not a collection of nested cards.
 * Large regions use one green guide rail and deliberate spacing; a full edge
 * is reserved for controls that genuinely need a hit target or a state.
 */

/* Shared home surfaces: the catalogue reads as a technical paper surface.
 * Mint is reserved for discovery, while white carries work and content. */
html:not(.kiv-shell-dark) body {
    background: #fbfcfb;
}

.kiv-home-workspace {
    border: 0;
    border-left: 3px solid #18a867;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.kiv-home-search {
    border: 0;
    border-left: 3px solid #18a867;
    border-radius: 0;
    background: #f1f8f4;
    box-shadow: none;
}

.footer-nav .kiv-home-featured {
    border: 0;
    border-left: 3px solid #18a867;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.kiv-home-search {
    margin-bottom: 20px;
}

.kiv-home-search-input-row {
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .88);
    box-shadow: inset 0 -1px 0 #d6e5dc;
}

.kiv-home-search-input-row:focus-within {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 #2bb372;
}

.kiv-home-search-suggestions button {
    border: 0;
    background: #edf7f1;
}

.kiv-home-search-suggestions button:hover,
.kiv-home-search-suggestions button:focus {
    border-color: transparent;
    background: #e4f4ea;
    box-shadow: inset 0 -2px 0 #6fc991;
}

.kiv-home-search-results {
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 34px rgba(31, 69, 52, .16);
}

.kiv-home-search-result-icon,
.kiv-nav-tool-icon,
.kiv-home-tool-icon,
.kiv-featured-tool-icon,
.kiv-shell-result-icon {
    border: 0 !important;
}

.kiv-home-featured-grid {
    gap: 7px 10px;
}

.kiv-home-featured-card {
    border: 0;
    border-radius: 0;
    background: #f8fbf9;
    box-shadow: inset 0 -1px 0 rgba(48, 93, 68, .09);
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.kiv-home-featured-card:hover,
.kiv-home-featured-card:focus-within {
    border-color: transparent;
    background: #fff;
    box-shadow: inset 3px 0 #54bd7d, inset 0 -1px 0 rgba(48, 93, 68, .10);
    transform: translateX(2px);
}

.kiv-home-featured-all {
    border-radius: 999px;
}

/* The directory is intentionally quiet. Alternating paper and mist surfaces
 * help scanning long lists without turning every category into a card. */
.footer-nav > .list-inline-bg {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.footer-nav > .list-inline-bg:nth-of-type(odd) {
    background: #f6f9f7;
}

.footer-nav > .list-inline-bg h3 span {
    display: inline-block;
    padding-left: 9px;
    border-left: 3px solid #35ba73;
    color: #365849;
}

.footer-nav > .list-inline-bg li > a {
    color: #46575c;
}

.footer-nav > .list-inline-bg li > a:hover,
.footer-nav > .list-inline-bg li > a:focus {
    color: #188757;
}

/* Detail pages: a title rail and clear field outlines are enough. The work
 * itself no longer sits inside several layers of rounded, bordered cards. */
body.kiv-detail-page .kiv-detail-hero {
    border: 0;
    border-left: 3px solid #18a867;
    border-radius: 0;
    background: #f2f8f4;
    box-shadow: none;
}

body.kiv-detail-json .kiv-detail-hero {
    border-left-color: #18a867;
    background: #f0f8f3;
}

body.kiv-detail-jwt .kiv-detail-hero {
    border-left-color: #587b9f;
    background: #f3f6fb;
}

body.kiv-detail-openapi .kiv-detail-hero {
    border-left-color: #2d8296;
    background: #f0f8fa;
}

body.kiv-detail-page .kiv-detail-hero::before {
    display: none;
}

body.kiv-detail-page .kiv-detail-tool-icon,
body.kiv-detail-page .local-badge,
body.kiv-detail-page .kiv-detail-meta span {
    border: 0;
}

body.kiv-detail-page {
    --kiv-nav-accent: #178b58;
    --kiv-nav-ink: #315e48;
}

body.kiv-detail-page .kiv-detail-nav-label {
    margin-bottom: 10px;
    letter-spacing: 0;
    text-transform: none;
}

body.kiv-detail-json {
    --kiv-nav-accent: #178b58;
    --kiv-nav-ink: #315e48;
}

body.kiv-detail-jwt {
    --kiv-nav-accent: #52749a;
    --kiv-nav-ink: #3c5877;
}

body.kiv-detail-openapi {
    --kiv-nav-accent: #287e92;
    --kiv-nav-ink: #285d69;
}

body.kiv-detail-page .kiv-detail-nav-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--kiv-nav-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.kiv-detail-page .kiv-detail-nav-title {
    display: block;
    color: var(--kiv-nav-ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.26;
}

body.kiv-detail-page .kiv-detail-nav-context {
    display: block;
    max-width: 760px;
    margin-top: 3px;
    color: #71827c;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.52;
}

body.kiv-detail-page .kiv-detail-nav.nav-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 28px;
    margin: 0 0 23px;
    background: transparent;
    background-image: none;
    list-style: none;
}

body.kiv-detail-page .kiv-detail-nav.nav-tabs::before,
body.kiv-detail-page .kiv-detail-nav.nav-tabs::after {
    display: none;
    content: none;
}

body.kiv-detail-page .kiv-detail-nav.nav-tabs > li {
    min-width: 0;
}

body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a {
    position: relative;
    display: block;
    min-height: 47px;
    padding: 5px 0 7px 17px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #435c55;
}

body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a::before {
    position: absolute;
    top: 5px;
    left: 0;
    color: var(--kiv-nav-accent, #178b58);
    content: '↗';
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

body.kiv-detail-page .kiv-detail-nav-action,
body.kiv-detail-page .kiv-detail-nav-tool {
    display: block;
}

body.kiv-detail-page .kiv-detail-nav-action {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.32;
}

body.kiv-detail-page .kiv-detail-nav-tool {
    margin-top: 2px;
    color: #8a9993;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
}

body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a:hover,
body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--kiv-nav-accent, #178b58);
    color: var(--kiv-nav-ink, #315e48);
    outline: 0;
}

/* Every legacy tool page now receives the same quiet presentation, but the
 * content is generated from its own header category and immediate neighbours.
 * These selectors only touch that new contextual navigator, never its tool UI. */
/* The legacy .col10main rule paints a full white rectangle behind every tool.
 * Make the page itself the quiet canvas; reserve white for actual work fields
 * and result panels so the hierarchy is visible instead of box-on-box. */
html:not(.kiv-shell-dark) body.kiv-detail-page,
html:not(.kiv-shell-dark) body.kiv-contextual-nav-page {
    background: #f4f7f5;
    --kiv-nav-accent: #178b58;
    --kiv-nav-ink: #315e48;
}

body.kiv-detail-page,
body.kiv-contextual-nav-page {
    --kiv-nav-accent: #178b58;
    --kiv-nav-ink: #315e48;
}

body.kiv-detail-page .col10main.kiv-detail-root,
body.kiv-contextual-nav-page .col10main.kiv-contextual-nav-root {
    background: transparent;
}

body.kiv-context-data { --kiv-nav-accent: #178b58; --kiv-nav-ink: #315e48; }
body.kiv-context-security { --kiv-nav-accent: #52749a; --kiv-nav-ink: #3c5877; }
body.kiv-context-code { --kiv-nav-accent: #517c97; --kiv-nav-ink: #3d6076; }
body.kiv-context-network { --kiv-nav-accent: #2b8491; --kiv-nav-ink: #28616a; }
body.kiv-context-ops { --kiv-nav-accent: #378466; --kiv-nav-ink: #316b54; }
body.kiv-context-text { --kiv-nav-accent: #847253; --kiv-nav-ink: #66563e; }

/* Workbench mode: the page is a quiet operating surface. It uses a single
 * canvas, a readable tool header, and white only where people type or inspect
 * output. This is deliberately not another stack of rounded cards. */
body.kiv-contextual-nav-page .kiv-contextual-nav-root > .tool-intro:not(.alert) {
    max-width: 960px;
    margin: 0 0 16px;
    padding: 5px 0 16px;
    border-bottom: 1px solid rgba(53, 93, 72, .12);
    background: transparent;
}

body.kiv-contextual-nav-page .kiv-contextual-nav-root > .tool-intro:not(.alert) h1 {
    margin: 0 0 7px;
    color: #263b34;
    font-size: 25px;
    font-weight: 720;
    letter-spacing: -.026em;
    line-height: 1.18;
}

body.kiv-contextual-nav-page .kiv-contextual-nav-root > .tool-intro:not(.alert) p {
    max-width: 880px;
    margin: 0;
    color: #65766f;
    font-size: 14px;
    line-height: 1.62;
}

body.kiv-detail-page .col10main .tool-card,
body.kiv-contextual-nav-page .col10main .tool-card,
body.kiv-detail-page .col10main .panel.panel-default,
body.kiv-detail-page .col10main .panel.panel-defaul,
body.kiv-contextual-nav-page .col10main .panel.panel-default,
body.kiv-contextual-nav-page .col10main .panel.panel-defaul {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(52, 90, 70, .10), 0 1px 0 rgba(52, 90, 70, .08);
}

body.kiv-contextual-nav-page .kiv-contextual-nav-root > .tool-card {
    border-left: 2px solid var(--kiv-nav-accent, #178b58);
}

body.kiv-detail-page .col10main .tool-card-heading,
body.kiv-contextual-nav-page .col10main .tool-card-heading,
body.kiv-detail-page .col10main .panel-heading,
body.kiv-contextual-nav-page .col10main .panel-heading {
    border: 0;
    border-radius: 0;
    background: #f8faf9;
    box-shadow: inset 0 -1px 0 rgba(52, 90, 70, .10);
    color: #3a5047;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.005em;
}

body.kiv-detail-page .col10main .form-control,
body.kiv-contextual-nav-page .col10main .form-control {
    min-height: 40px;
    border-color: #d5e1db;
    border-radius: 4px;
    background: #fcfefd;
    box-shadow: none;
    color: #263b34;
    font-size: 14px;
}

body.kiv-detail-page .col10main .form-control:focus,
body.kiv-contextual-nav-page .col10main .form-control:focus {
    border-color: #53b77d;
    box-shadow: 0 0 0 3px rgba(32, 159, 95, .12);
}

body.kiv-detail-page .col10main textarea.form-control,
body.kiv-contextual-nav-page .col10main textarea.form-control {
    padding: 12px 13px;
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.58;
}

body.kiv-detail-page .col10main .input-group .form-control:first-child,
body.kiv-contextual-nav-page .col10main .input-group .form-control:first-child {
    border-radius: 4px 0 0 4px;
}

body.kiv-detail-page .col10main .input-group-btn .btn,
body.kiv-contextual-nav-page .col10main .input-group-btn .btn {
    border-radius: 0 4px 4px 0;
}

body.kiv-detail-page .col10main .btn,
body.kiv-contextual-nav-page .col10main .btn,
body.kiv-detail-page .col10main input[type="button"],
body.kiv-detail-page .col10main input[type="submit"],
body.kiv-contextual-nav-page .col10main input[type="button"],
body.kiv-contextual-nav-page .col10main input[type="submit"] {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-shadow: none;
}

body.kiv-detail-page .col10main .btn-success,
body.kiv-contextual-nav-page .col10main .btn-success {
    border-color: #168b57;
    background: #168b57;
    color: #fff;
}

body.kiv-detail-page .col10main .btn-success:hover,
body.kiv-detail-page .col10main .btn-success:focus,
body.kiv-contextual-nav-page .col10main .btn-success:hover,
body.kiv-contextual-nav-page .col10main .btn-success:focus {
    border-color: #106c43;
    background: #106c43;
    color: #fff;
}

body.kiv-detail-page .col10main .btn-info,
body.kiv-detail-page .col10main .btn-primary,
body.kiv-contextual-nav-page .col10main .btn-info,
body.kiv-contextual-nav-page .col10main .btn-primary {
    border-color: #cce0d5;
    background: #eaf4ee;
    color: #356851;
}

body.kiv-detail-page .col10main .btn-info:hover,
body.kiv-detail-page .col10main .btn-info:focus,
body.kiv-detail-page .col10main .btn-primary:hover,
body.kiv-detail-page .col10main .btn-primary:focus,
body.kiv-contextual-nav-page .col10main .btn-info:hover,
body.kiv-contextual-nav-page .col10main .btn-info:focus,
body.kiv-contextual-nav-page .col10main .btn-primary:hover,
body.kiv-contextual-nav-page .col10main .btn-primary:focus {
    border-color: #9bcdb0;
    background: #deefe5;
    color: #24563f;
}

body.kiv-detail-page .col10main .btn-default,
body.kiv-contextual-nav-page .col10main .btn-default {
    border-color: #d5e1db;
    background: #fff;
    color: #536760;
}

body.kiv-detail-page .col10main .btn-default:hover,
body.kiv-detail-page .col10main .btn-default:focus,
body.kiv-contextual-nav-page .col10main .btn-default:hover,
body.kiv-contextual-nav-page .col10main .btn-default:focus {
    border-color: #aebfb6;
    background: #f5f8f6;
    color: #314a3e;
}

body.kiv-detail-page .col10main .btn:focus,
body.kiv-contextual-nav-page .col10main .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(32, 159, 95, .13);
}

body.kiv-detail-page .col10main .form-group > label,
body.kiv-contextual-nav-page .col10main .form-group > label {
    color: #50645b;
    font-size: 12px;
    font-weight: 700;
}

body.kiv-detail-page .col10main .alert:not(.tool-status),
body.kiv-contextual-nav-page .col10main .alert:not(.tool-status) {
    border: 0;
    border-left: 2px solid #6bb98b;
    border-radius: 0;
    background: #edf5f0;
    box-shadow: none;
    color: #456356;
}

/* Fifteen original reference / utility pages use an .accordion wrapper rather
 * than .col10main. Give that legacy shell the same workbench surfaces instead
 * of leaving a visually separate, Bootstrap-era subset of the product. */
body.kiv-legacy-tool-page .kiv-legacy-tool-root {
    background: transparent;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .accordion-group,
body.kiv-legacy-tool-page .kiv-legacy-tool-root .accordion-inner {
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .panel,
body.kiv-legacy-tool-page .kiv-legacy-tool-root .tool-card {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(52, 90, 70, .10), 0 1px 0 rgba(52, 90, 70, .08);
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .panel-heading,
body.kiv-legacy-tool-page .kiv-legacy-tool-root .tool-card-heading {
    border: 0;
    border-radius: 0;
    background: #f8faf9;
    box-shadow: inset 0 -1px 0 rgba(52, 90, 70, .10);
    color: #3a5047;
    font-size: 13px;
    font-weight: 700;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .form-control {
    min-height: 40px;
    border-color: #d5e1db;
    border-radius: 4px;
    background: #fcfefd;
    box-shadow: none;
    color: #263b34;
    font-size: 14px;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root textarea.form-control {
    padding: 12px 13px;
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.58;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .form-control:focus {
    border-color: #53b77d;
    box-shadow: 0 0 0 3px rgba(32, 159, 95, .12);
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn,
body.kiv-legacy-tool-page .kiv-legacy-tool-root input[type="button"],
body.kiv-legacy-tool-page .kiv-legacy-tool-root input[type="submit"] {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-shadow: none;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn-success {
    border-color: #168b57;
    background: #168b57;
    color: #fff;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn-info,
body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn-primary {
    border-color: #cce0d5;
    background: #eaf4ee;
    color: #356851;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn-default {
    border-color: #d5e1db;
    background: #fff;
    color: #536760;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .form-group > label {
    color: #50645b;
    font-size: 12px;
    font-weight: 700;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .table {
    margin-bottom: 0;
    background: #fff;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .table > thead > tr > th {
    border-color: #dde8e2;
    background: #f8faf9;
    color: #3b5148;
    font-size: 12px;
    font-weight: 700;
}

body.kiv-legacy-tool-page .kiv-legacy-tool-root .table > tbody > tr > td {
    border-color: #e9efeb;
}

.kiv-contextual-nav-root .kiv-detail-nav-label {
    margin: 0 0 10px;
    letter-spacing: 0;
    text-transform: none;
}

.kiv-contextual-nav-root .kiv-detail-nav-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--kiv-nav-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.2;
    text-transform: uppercase;
}

.kiv-contextual-nav-root .kiv-detail-nav-title {
    display: block;
    color: var(--kiv-nav-ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.26;
}

.kiv-contextual-nav-root .kiv-detail-nav-context {
    display: block;
    max-width: 760px;
    margin-top: 3px;
    color: #71827c;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.52;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 28px;
    margin: 0 0 23px;
    padding: 0;
    border: 0;
    background: transparent;
    background-image: none;
    list-style: none;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs::before,
.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs::after {
    display: none;
    content: none;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li {
    float: none;
    min-width: 0;
    margin: 0;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a {
    position: relative;
    display: block;
    min-height: 47px;
    margin: 0;
    padding: 5px 0 7px 17px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #435c55;
    font-size: inherit;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a::before {
    position: absolute;
    top: 5px;
    left: 0;
    color: var(--kiv-nav-accent, #178b58);
    content: '↗';
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.kiv-contextual-nav-root .kiv-detail-nav-action,
.kiv-contextual-nav-root .kiv-detail-nav-tool {
    display: block;
}

.kiv-contextual-nav-root .kiv-detail-nav-action {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.32;
}

.kiv-contextual-nav-root .kiv-detail-nav-tool {
    margin-top: 2px;
    color: #8a9993;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a:hover,
.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--kiv-nav-accent, #178b58);
    color: var(--kiv-nav-ink, #315e48);
    outline: 0;
}

/* A category list is intentionally quieter than a workflow. This stops a
 * formatter, calculator, or reference page from repeating the full five-step
 * navigator used by the JSON, JWT, and OpenAPI hubs. */
.kiv-contextual-nav-root .kiv-detail-nav-label.kiv-detail-nav-label-compact {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 7px 0 4px;
}

.kiv-contextual-nav-root .kiv-detail-nav-label-compact .kiv-detail-nav-kicker {
    flex: 0 0 auto;
    margin: 0;
    color: #72857c;
    font-size: 9px;
    letter-spacing: .07em;
}

.kiv-contextual-nav-root .kiv-detail-nav-label-compact .kiv-detail-nav-title {
    color: var(--kiv-nav-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 0 0 21px;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact > li > a {
    min-height: 0;
    padding: 5px 0 6px 15px;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact > li > a::before {
    top: 5px;
    content: '→';
    font-size: 12px;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact .kiv-detail-nav-action {
    display: none;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact .kiv-detail-nav-tool {
    margin-top: 0;
    color: #536760;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.42;
}

/* Ordinary tools use sibling tabs immediately below the tool heading. This
 * keeps the familiar “tool label” structure, with an unmistakable current
 * tab, without restoring the bulky framed Bootstrap widget. */
.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0;
    width: fit-content;
    max-width: 100%;
    overflow: visible;
    margin: 14px 0 21px;
    padding: 0 8px;
    border: 0;
    background: #f3f6f4;
    scrollbar-width: thin;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar::before {
    display: none;
    content: none;
}

/* The rail is drawn as a layer behind the tabs rather than as the nav's own
 * border. That lets the selected tab cover the rail completely, like a real
 * open workbench tab, instead of leaving a line through its lower edge. */
.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: block;
    height: 1px;
    background: rgba(53, 93, 72, .12);
    content: '';
    pointer-events: none;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: 0 2px 0 0;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li.active {
    z-index: 2;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a {
    display: inline-flex;
    min-height: 0;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px 9px;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: #4f655c;
    font-size: 12px;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a::before {
    display: none;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar .kiv-detail-nav-tool {
    display: block;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 650;
    line-height: 1.3;
    white-space: nowrap;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li.active > a,
.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a[aria-current="page"] {
    position: relative;
    z-index: 1;
    min-height: 46px;
    margin-bottom: -1px;
    padding-top: 11px;
    border-color: rgba(53, 93, 72, .24);
    border-bottom-color: #fff;
    background: #fff;
    box-shadow: inset 0 3px 0 var(--kiv-nav-accent, #178b58);
    color: var(--kiv-nav-ink, #315e48);
    font-weight: 750;
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a:hover,
.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a:focus {
    background: rgba(47, 129, 88, .07);
    box-shadow: none;
    color: var(--kiv-nav-ink, #315e48);
}

.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li.active > a:hover,
.kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li.active > a:focus {
    background: #fff;
    box-shadow: inset 0 3px 0 var(--kiv-nav-accent, #178b58);
}

body.kiv-detail-json .panel.panel-defaul,
body.kiv-detail-page .kiv-api-tool .tool-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.kiv-detail-json #form1 {
    padding: 4px 0 14px;
}

body.kiv-detail-page .kiv-api-tool .tool-card {
    margin-bottom: 25px;
}

body.kiv-detail-page .kiv-api-tool .tool-card-heading {
    margin-bottom: 12px;
    padding: 1px 0 1px 10px;
    border: 0;
    border-left: 3px solid #a6ddbd;
    background: transparent;
}

body.kiv-detail-page .kiv-api-tool .tool-card-body {
    padding: 0;
}

body.kiv-detail-page .kiv-api-tool .claim-grid .claim-cell {
    border: 0;
    border-radius: 0;
    background: #f6fbf8;
    box-shadow: inset 0 -1px 0 rgba(51, 101, 73, .10);
}

body.kiv-detail-page .kiv-api-tool .api-operation-list {
    border: 0;
    border-radius: 0;
    background: #f8fcf9;
    box-shadow: inset 0 -1px 0 rgba(51, 101, 73, .10);
}

body.kiv-detail-page .kiv-api-tool .api-operation {
    background: transparent;
}

body.kiv-detail-page .tool-intro.alert:not(.kiv-detail-hero) {
    border: 0;
    border-left: 3px solid #38b776;
    border-radius: 0;
    background: #f6fbf8;
}

/* Workspace: groups, saved links, and boards use surface contrast and an
 * active rail. Buttons, tabs, form fields, and sync/error states retain an
 * explicit edge because they communicate action or status. */
.kiv-workspace-page {
    background: #fbfdfc;
}

.kiv-workspace-hero,
.kiv-workspace-board,
.kiv-workspace-loading,
.kiv-workspace-locked {
    border: 0;
    border-left: 3px solid #18a867;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.kiv-workspace-sync-state,
.kiv-workspace-collection,
.kiv-workspace-new-group {
    border: 0;
    background: #eff7f2;
}

.kiv-workspace-collection:hover,
.kiv-workspace-collection:focus,
.kiv-workspace-new-group:hover,
.kiv-workspace-new-group:focus {
    border-color: transparent;
    background: #e2f3e9;
}

.kiv-workspace-collections {
    border-bottom: 0;
}

.kiv-workspace-card,
.kiv-home-workspace-card {
    border: 0;
    border-radius: 0;
    background: #f7fbf8;
    box-shadow: inset 0 -1px 0 rgba(51, 101, 73, .10);
}

.kiv-workspace-site-icon,
.kiv-home-workspace-site-icon {
    border: 0;
}

/* Dark mode gets the same hierarchy: surfaces are separated by tone and a
 * single rail rather than pale outlines that become noisy at night. */
html.kiv-shell-dark .kiv-home-workspace,
html.kiv-shell-dark .footer-nav .kiv-home-featured,
html.kiv-shell-dark .kiv-workspace-hero,
html.kiv-shell-dark .kiv-workspace-board,
html.kiv-shell-dark .kiv-workspace-loading,
html.kiv-shell-dark .kiv-workspace-locked {
    border-color: #42bf7a;
    background: #1b2d30;
}

html.kiv-shell-dark .kiv-home-search {
    border-color: #42bf7a;
    background: #1d382f;
}

html.kiv-shell-dark body.kiv-detail-page .kiv-detail-hero {
    border-color: #42bf7a;
    background: #1c342e;
}

html.kiv-shell-dark body.kiv-detail-jwt .kiv-detail-hero {
    border-left-color: #6f9dca;
    background: #1c2d3a;
}

html.kiv-shell-dark body.kiv-detail-openapi .kiv-detail-hero {
    border-left-color: #52b4ca;
    background: #17333b;
}

html.kiv-shell-dark .kiv-home-search-input-row {
    border: 0;
    background: #203832;
    box-shadow: inset 0 -1px 0 #3d5d50;
}

html.kiv-shell-dark .kiv-home-search-input-row:focus-within {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 #4dc985;
}

html.kiv-shell-dark .kiv-home-search-suggestions button,
html.kiv-shell-dark body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a,
html.kiv-shell-dark .kiv-workspace-sync-state,
html.kiv-shell-dark .kiv-workspace-collection,
html.kiv-shell-dark .kiv-workspace-new-group {
    border: 0;
    background: #213b31;
}

html.kiv-shell-dark .kiv-home-search-results {
    border: 0;
}

html.kiv-shell-dark .kiv-home-featured-card,
html.kiv-shell-dark body.kiv-detail-page .kiv-api-tool .tool-card,
html.kiv-shell-dark body.kiv-detail-page .tool-intro.alert:not(.kiv-detail-hero),
html.kiv-shell-dark .kiv-workspace-card,
html.kiv-shell-dark .kiv-home-workspace-card {
    border: 0;
    background: #1d332d;
    box-shadow: inset 0 -1px 0 rgba(151, 206, 172, .16);
}

html.kiv-shell-dark .kiv-home-featured-card:hover,
html.kiv-shell-dark .kiv-home-featured-card:focus-within {
    border-color: transparent;
    background: #223d34;
    box-shadow: inset 3px 0 #54bd7d, inset 0 -1px 0 rgba(151, 206, 172, .16);
}

html.kiv-shell-dark .footer-nav > .list-inline-bg {
    border: 0;
    background: #1b2d30;
}

html.kiv-shell-dark .footer-nav > .list-inline-bg:nth-of-type(odd) {
    background: #20352f;
}

html.kiv-shell-dark .footer-nav > .list-inline-bg h3 span {
    border-left-color: #4dc985;
    color: #d4e8dc;
}

html.kiv-shell-dark body.kiv-detail-page .kiv-api-tool .tool-card-heading {
    border-color: #54bd7d;
    background: transparent;
}

html.kiv-shell-dark body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a {
    background: transparent;
    color: #cfe0d8;
}

html.kiv-shell-dark body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a:hover,
html.kiv-shell-dark body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a:focus {
    background: transparent;
    color: #fff;
}

html.kiv-shell-dark body.kiv-detail-page .kiv-detail-nav-tool { color: #8da99b; }
html.kiv-shell-dark body.kiv-detail-page .kiv-detail-nav-title { color: #d3e6dc; }
html.kiv-shell-dark body.kiv-detail-page .kiv-detail-nav-context { color: #9db3a8; }

html.kiv-shell-dark body.kiv-detail-page,
html.kiv-shell-dark body.kiv-contextual-nav-page {
    background: #111816;
}

html.kiv-shell-dark body.kiv-detail-page .col10main.kiv-detail-root,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main.kiv-contextual-nav-root {
    background: transparent;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a {
    background: transparent;
    color: #cfe0d8;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a:hover,
html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a:focus {
    background: transparent;
    color: #fff;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav-tool { color: #8da99b; }
html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav-title { color: #d3e6dc; }
html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav-context { color: #9db3a8; }

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav-label-compact .kiv-detail-nav-kicker {
    color: #8ca399;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact .kiv-detail-nav-tool {
    color: #c2d5ca;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar {
    background: #17211c;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar::after {
    background: rgba(183, 214, 197, .14);
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a {
    color: #c2d5ca;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a:hover,
html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a:focus {
    background: rgba(183, 214, 197, .11);
    color: #fff;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li.active > a,
html.kiv-shell-dark .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar > li > a[aria-current="page"] {
    border-color: rgba(183, 214, 197, .24);
    border-bottom-color: #203229;
    background: #203229;
    box-shadow: inset 0 3px 0 #55bd7e;
    color: #e6f1ea;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .tool-card,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .tool-card,
html.kiv-shell-dark body.kiv-detail-page .col10main .panel.panel-default,
html.kiv-shell-dark body.kiv-detail-page .col10main .panel.panel-defaul,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .panel.panel-default,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .panel.panel-defaul {
    background: #17221d;
    box-shadow: inset 0 1px 0 rgba(185, 218, 199, .12), 0 1px 0 rgba(0, 0, 0, .18);
}

html.kiv-shell-dark body.kiv-contextual-nav-page .kiv-contextual-nav-root > .tool-intro:not(.alert) {
    border-bottom-color: rgba(185, 218, 199, .14);
}

html.kiv-shell-dark body.kiv-contextual-nav-page .kiv-contextual-nav-root > .tool-intro:not(.alert) h1 {
    color: #e1eee7;
}

html.kiv-shell-dark body.kiv-contextual-nav-page .kiv-contextual-nav-root > .tool-intro:not(.alert) p {
    color: #a9c0b3;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .tool-card-heading,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .tool-card-heading,
html.kiv-shell-dark body.kiv-detail-page .col10main .panel-heading,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .panel-heading {
    background: #1b2822;
    box-shadow: inset 0 -1px 0 rgba(185, 218, 199, .12);
    color: #d9e8de;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .form-control,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .form-control {
    border-color: #385247;
    background: #121b17;
    color: #e0ece5;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .btn-default,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .btn-default {
    border-color: #385247;
    background: #18231e;
    color: #c7d9cf;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .btn-info,
html.kiv-shell-dark body.kiv-detail-page .col10main .btn-primary,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .btn-info,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .btn-primary {
    border-color: #3e6854;
    background: #1c3228;
    color: #b8ddc6;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .alert:not(.tool-status),
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .alert:not(.tool-status) {
    background: #1a2b23;
    color: #c1d9ca;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .panel,
html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .tool-card {
    background: #17221d;
    box-shadow: inset 0 1px 0 rgba(185, 218, 199, .12), 0 1px 0 rgba(0, 0, 0, .18);
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .panel-heading,
html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .tool-card-heading {
    background: #1b2822;
    box-shadow: inset 0 -1px 0 rgba(185, 218, 199, .12);
    color: #d9e8de;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .form-control {
    border-color: #385247;
    background: #121b17;
    color: #e0ece5;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn-default {
    border-color: #385247;
    background: #18231e;
    color: #c7d9cf;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn-info,
html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .btn-primary {
    border-color: #3e6854;
    background: #1c3228;
    color: #b8ddc6;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .form-group > label {
    color: #c6d7ce;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .table {
    background: #17221d;
    color: #d9e8de;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .table > thead > tr > th {
    border-color: rgba(185, 218, 199, .16);
    background: #1b2822;
    color: #d9e8de;
}

html.kiv-shell-dark body.kiv-legacy-tool-page .kiv-legacy-tool-root .table > tbody > tr > td {
    border-color: rgba(185, 218, 199, .13);
}

/* A dark workbench must remain just as legible after a tool has produced a
 * result.  Some of the older tools supply their own muted colours, so make
 * their semantic text, status line, and list output follow the dark canvas. */
html.kiv-shell-dark body.kiv-detail-page .col10main .form-group > label,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .form-group > label {
    color: #c6d7ce;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .tool-status,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .tool-status {
    border-color: #3d7657;
    background: #1c3026;
    color: #c8e1d1;
    box-shadow: none;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .local-badge,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .local-badge {
    border-color: #3a7154;
    background: #1c3328;
    color: #bfe4ce;
}

html.kiv-shell-dark .kiv-workspace-tool-action {
    border-color: #3a7154;
    background: #1a3026;
    color: #c7e4d2;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .cron-meta,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .cron-meta,
html.kiv-shell-dark body.kiv-detail-page .col10main .cron-expression,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .cron-expression,
html.kiv-shell-dark body.kiv-detail-page .col10main .cron-time,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .cron-time {
    color: #c8d9d0;
}

html.kiv-shell-dark body.kiv-detail-page .col10main .tool-card .lint-list > li,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .tool-card .lint-list > li,
html.kiv-shell-dark body.kiv-detail-page .col10main .tool-card .cron-list > li,
html.kiv-shell-dark body.kiv-contextual-nav-page .col10main .tool-card .cron-list > li {
    border-color: rgba(190, 222, 203, .18);
}

@media (max-width: 991px) {
    body.kiv-detail-page .kiv-detail-nav.nav-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar {
        display: flex;
    }

}

@media (max-width: 767px) {
    .kiv-home-workspace,
    .kiv-home-search,
    .footer-nav .kiv-home-featured,
    body.kiv-detail-page .kiv-detail-hero,
    .kiv-workspace-hero,
    .kiv-workspace-board,
    .kiv-workspace-loading,
    .kiv-workspace-locked {
        border-left-width: 2px;
    }

    .kiv-home-featured-card {
        box-shadow: inset 0 -1px 0 rgba(48, 93, 68, .10);
    }

    body.kiv-detail-json #form1 {
        padding-right: 0;
        padding-left: 0;
    }

    body.kiv-detail-page .kiv-detail-nav.nav-tabs {
        grid-template-columns: 1fr;
        gap: 3px;
        margin-bottom: 19px;
    }

    body.kiv-detail-page .kiv-detail-nav.nav-tabs > li > a {
        min-height: 0;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs {
        grid-template-columns: 1fr;
        gap: 3px;
        margin-bottom: 19px;
    }

    .kiv-contextual-nav-root .kiv-detail-nav-label.kiv-detail-nav-label-compact {
        display: block;
        margin-top: 8px;
    }

    .kiv-contextual-nav-root .kiv-detail-nav-label-compact .kiv-detail-nav-kicker {
        margin-bottom: 2px;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact {
        grid-template-columns: 1fr;
        gap: 1px;
        margin-bottom: 18px;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        margin-bottom: 12px;
        padding: 0 5px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar::before {
        flex-basis: 100%;
        margin: 0 0 2px;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs > li > a {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiv-home-featured-card {
        transition: none;
    }
}

/* Server-rendered semantic tool rail.  Keep the familiar selected-tab shape,
 * while allowing the family menu to expose the complete workflow without
 * turning every page into the same global list. */
.kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 250px;
    max-width: min(420px, calc(100vw - 30px));
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(53, 93, 72, .18);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(27, 52, 40, .16);
}

.kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu > li > a {
    display: block;
    min-height: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    color: #435c55;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

.kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu > li > a:hover,
.kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu > li > a:focus {
    background: #edf7f1;
    color: #176f49;
}

.kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu .kiv-detail-nav-tool {
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    white-space: normal;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu {
    border-color: #355148;
    background: #172722;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34);
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu > li > a {
    color: #c6d8d0;
}

html.kiv-shell-dark .kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu > li > a:hover,
html.kiv-shell-dark .kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu > li > a:focus {
    background: #203b32;
    color: #eef8f3;
}

@media (max-width: 767px) {
    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar.kiv-recommendation-tabs {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
        overflow: visible;
        padding-right: 4px;
        padding-left: 4px;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar.kiv-recommendation-tabs > li {
        flex: 1 1 50%;
        min-width: 0;
        margin-right: 0;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar.kiv-recommendation-tabs > li > a {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 8px 9px;
    }

    .kiv-contextual-nav-root .kiv-detail-nav.nav-tabs.kiv-detail-nav-compact.kiv-detail-nav-toolbar.kiv-recommendation-tabs .kiv-detail-nav-tool {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .kiv-contextual-nav-root .kiv-recommendation-tabs .dropdown-menu {
        right: 0;
        left: 0;
        width: min(360px, calc(100vw - 30px));
        max-height: 52vh;
    }
}

/* Homepage workspace dock. The dark command rail anchors the personal area to
 * KivTools' navigation, while collection and content type remain structural
 * information instead of becoming another grid of generic dashboard cards. */
.kiv-home-workspace {
    width: 100%;
    max-width: none;
    margin: 0 0 20px;
    border: 0;
    background: transparent;
}

.kiv-home-workspace-member {
    padding: 0;
    overflow: hidden;
    border-radius: 5px;
    background: #f2f6f4;
    box-shadow: 0 8px 24px rgba(34, 57, 49, .07);
}

.kiv-home-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 11px 14px;
    background: #243744;
}

.kiv-home-workspace-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.kiv-home-workspace-focus-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 29px;
    padding: 6px 9px;
    border: 0;
    border-radius: 3px;
    background: rgba(104, 213, 146, .13);
    color: #c8f2d7;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.kiv-home-workspace-focus-toggle:hover,
.kiv-home-workspace-focus-toggle:focus {
    background: rgba(104, 213, 146, .22);
    color: #f0fff5;
    outline: 2px solid rgba(104, 213, 146, .3);
    outline-offset: 1px;
}

.kiv-home-workspace-focus-toggle[aria-pressed="true"] {
    background: #4eb978;
    color: #102d20;
}

.kiv-home-workspace-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f2f7f4;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.kiv-home-workspace-prompt {
    color: #68d592;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.06em;
}

.kiv-home-workspace-head p {
    max-width: 520px;
    margin-top: 1px;
    color: #b7c7c0;
    font-size: 11px;
}

.kiv-home-workspace-manage {
    padding: 6px 9px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .07);
    color: #b9eccb;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.kiv-home-workspace-manage:hover,
.kiv-home-workspace-manage:focus {
    background: rgba(104, 213, 146, .16);
    color: #e2f8ea;
    outline: 2px solid rgba(104, 213, 146, .28);
    outline-offset: 1px;
}

.kiv-home-workspace-collections {
    gap: 12px;
    padding: 12px 14px 14px;
}

.kiv-home-workspace-collection + .kiv-home-workspace-collection {
    padding-top: 12px;
    border-top: 0;
    box-shadow: inset 0 1px rgba(65, 98, 84, .10);
}

.kiv-home-workspace-collection {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
}

.kiv-home-workspace-collection-head {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    margin: 0;
    padding-top: 6px;
}

.kiv-home-workspace-collection-head h3 {
    color: #314755;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.35;
}

.kiv-home-workspace-collection-head span {
    min-width: 18px;
    padding: 0 5px;
    background: #e0ebe5;
    color: #5b7568;
    font-size: 10px;
    line-height: 17px;
}

.kiv-home-workspace-types {
    display: grid;
    gap: 10px;
}

.kiv-home-workspace-type {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
}

.kiv-home-workspace-type-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding-top: 7px;
}

.kiv-home-workspace-type-head h4 {
    margin: 0;
    color: #397356;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .015em;
    line-height: 1.4;
}

.kiv-home-workspace-type-mark {
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: #43b071;
    box-shadow: none;
}

.kiv-home-workspace-type-count {
    color: #82958b;
    font-size: 10px;
    font-weight: 650;
}

.kiv-home-workspace-type.is-websites .kiv-home-workspace-type-head h4 {
    color: #526b9f;
}

.kiv-home-workspace-type.is-websites .kiv-home-workspace-type-mark {
    background: #718ac2;
    box-shadow: none;
}

.kiv-home-workspace-type.is-websites .kiv-home-workspace-type-count {
    color: #8a98b5;
}

.kiv-home-workspace-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.kiv-home-workspace-card {
    flex: 0 1 auto;
    box-sizing: border-box;
    width: fit-content;
    min-width: 148px;
    max-width: 250px;
    padding: 8px 28px 8px 9px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(47, 91, 69, .12);
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.kiv-home-workspace-card:hover,
.kiv-home-workspace-card:focus-within {
    background: #f7fcf9;
    box-shadow: 0 3px 10px rgba(44, 95, 67, .11), inset 2px 0 #55b77a;
    transform: translateY(-1px);
}

.kiv-home-workspace-card a {
    gap: 7px;
    color: #315447;
    font-size: 11.5px;
}

.kiv-home-workspace-card::after {
    right: 9px;
    color: #53a973;
    font-size: 11px;
}

.kiv-home-workspace-tool-icon,
.kiv-home-workspace-site-icon {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 3px;
}

.kiv-home-workspace-tool-icon {
    background: #e7f3eb;
    color: #2d8b57;
}

.kiv-home-workspace-tool-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.kiv-home-workspace-card.is-website {
    background: #edf2fa;
    box-shadow: 0 1px 0 rgba(75, 96, 146, .13);
}

.kiv-home-workspace-card.is-website a {
    color: #415a8f;
}

.kiv-home-workspace-card.is-website::after {
    right: 9px;
    color: #6f88bf;
    content: "\2197";
}

.kiv-home-workspace-card.is-website:hover,
.kiv-home-workspace-card.is-website:focus-within {
    background: #e8eef9;
    box-shadow: 0 3px 10px rgba(64, 84, 132, .11), inset 2px 0 #7188bd;
}

.kiv-home-workspace-card.is-website a:hover,
.kiv-home-workspace-card.is-website a:focus {
    color: #314b83;
}

.kiv-home-workspace-card.is-website .kiv-home-workspace-site-icon {
    background: #dfe7f5;
}

.kiv-home-workspace-card.is-website .kiv-site-icon-fallback {
    color: #6079b1;
}

body.kiv-home-search-active .kiv-home-search {
    margin: 0 0 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html.kiv-home-workspace-focus .footer-nav > :not(.kiv-home-workspace):not(.kiv-home-search) {
    display: none !important;
}

html.kiv-home-workspace-focus .kiv-home-workspace {
    margin-bottom: 0;
}

html.kiv-home-workspace-focus .footer-nav {
    min-height: calc(100vh - 132px);
}

body.kiv-home-search-active .kiv-home-search-topline {
    display: none;
}

body.kiv-home-search-active .kiv-home-search-input-row {
    min-height: 52px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #d8e5de;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
}

body.kiv-home-search-active .kiv-home-search-input-row:focus-within {
    border-color: #76c895;
    box-shadow: 0 0 0 3px rgba(38, 163, 98, .10);
}

body.kiv-home-search-active .kiv-home-search-prompt {
    color: #239b60;
    font-size: 19px;
}

body.kiv-home-search-active .kiv-home-search-input-row input {
    color: #3a4d50;
    font-size: 15px;
    font-weight: 500;
}

body.kiv-home-search-active .kiv-home-search-footer {
    min-height: 0;
    padding: 7px 0 0;
}

body.kiv-home-search-active .kiv-home-search-suggestions {
    gap: 4px;
}

body.kiv-home-search-active .kiv-home-search-suggestions button {
    min-height: 25px;
    padding: 4px 9px;
    border: 0;
    border-radius: 0;
    background: #edf6f0;
    color: #5e776c;
    font-size: 11px;
}

body.kiv-home-search-active .kiv-home-search-suggestions button:hover,
body.kiv-home-search-active .kiv-home-search-suggestions button:focus {
    border-color: transparent;
    background: #e3f3e9;
    box-shadow: inset 0 -1px 0 #64bd84;
    color: #276c48;
}

body.kiv-home-search-active .kiv-home-search-keys {
    display: none;
}

html.kiv-shell-dark .kiv-home-workspace {
    background: transparent;
}

html.kiv-shell-dark .kiv-home-workspace-member {
    background: #1b2a27;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}

html.kiv-shell-dark .kiv-home-workspace-head {
    background: #152731;
}

html.kiv-shell-dark .kiv-home-workspace-head h2 {
    color: #eef6f1;
}

html.kiv-shell-dark .kiv-home-workspace-head p {
    color: #9fb3aa;
}

html.kiv-shell-dark .kiv-home-workspace-manage {
    background: rgba(255, 255, 255, .07);
    color: #b4e6c4;
}

html.kiv-shell-dark .kiv-home-workspace-collections {
    background: #1b2a27;
}

html.kiv-shell-dark .kiv-home-workspace-collection + .kiv-home-workspace-collection {
    box-shadow: inset 0 1px rgba(174, 203, 190, .12);
}

html.kiv-shell-dark .kiv-home-workspace-collection-head h3 {
    color: #d6e5dd;
}

html.kiv-shell-dark .kiv-home-workspace-collection-head span {
    background: #293c35;
    color: #a8bdb2;
}

html.kiv-shell-dark .kiv-home-workspace-card {
    background: #24372f;
    box-shadow: 0 1px 0 rgba(190, 222, 203, .10);
}

html.kiv-shell-dark .kiv-home-workspace-card:hover,
html.kiv-shell-dark .kiv-home-workspace-card:focus-within {
    background: #2a4036;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15), inset 2px 0 #59b77b;
}

html.kiv-shell-dark .kiv-home-workspace-card a {
    color: #d1e2d8;
}

html.kiv-shell-dark .kiv-home-workspace-type-head h4 {
    color: #9fcfb0;
}

html.kiv-shell-dark .kiv-home-workspace-type-count {
    color: #8da498;
}

html.kiv-shell-dark .kiv-home-workspace-type.is-websites .kiv-home-workspace-type-head h4 {
    color: #b6c5eb;
}

html.kiv-shell-dark .kiv-home-workspace-type.is-websites .kiv-home-workspace-type-count {
    color: #94a3c5;
}

html.kiv-shell-dark .kiv-home-workspace-card.is-website {
    background: #243147;
    box-shadow: 0 1px 0 rgba(185, 201, 237, .12);
}

html.kiv-shell-dark .kiv-home-workspace-card.is-website:hover,
html.kiv-shell-dark .kiv-home-workspace-card.is-website:focus-within {
    background: #2a3952;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15), inset 2px 0 #8298cd;
}

html.kiv-shell-dark .kiv-home-workspace-card.is-website a {
    color: #c7d4f2;
}

html.kiv-shell-dark .kiv-home-workspace-card.is-website .kiv-home-workspace-site-icon {
    background: #2b3b55;
}

html.kiv-shell-dark .kiv-home-workspace-tool-icon {
    background: #30483d;
    color: #82c89e;
}

html.kiv-shell-dark body.kiv-home-search-active .kiv-home-search {
    background: transparent;
}

html.kiv-shell-dark body.kiv-home-search-active .kiv-home-search-input-row {
    border-color: #39574a;
    background: #16251e;
}

html.kiv-shell-dark body.kiv-home-search-active .kiv-home-search-input-row input {
    color: #dbe9e1;
}

html.kiv-shell-dark body.kiv-home-search-active .kiv-home-search-suggestions button {
    background: #1d3429;
    color: #b3ccbf;
}

@media (max-width: 767px) {
    .kiv-home-workspace {
        margin-bottom: 16px;
    }

    .kiv-home-workspace-head {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        margin: 0;
        padding: 10px 11px;
    }

    .kiv-home-workspace-head p {
        display: none;
    }

    .kiv-home-workspace-head h2 {
        font-size: 14px;
    }

    .kiv-home-workspace-manage {
        width: auto;
        padding: 5px 7px;
        font-size: 10.5px;
        text-align: right;
    }

    .kiv-home-workspace-actions {
        gap: 5px;
    }

    .kiv-home-workspace-focus-toggle {
        width: 29px;
        min-height: 29px;
        padding: 0;
    }

    .kiv-home-workspace-focus-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .kiv-home-workspace-collections {
        padding: 10px 11px 12px;
    }

    .kiv-home-workspace-collection {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .kiv-home-workspace-collection-head {
        align-items: center;
        flex-direction: row;
        padding-top: 0;
    }

    .kiv-home-workspace-type {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .kiv-home-workspace-type-head {
        padding-top: 0;
    }

    .kiv-home-workspace-grid {
        display: flex;
        gap: 8px;
    }

    .kiv-home-workspace-card {
        width: fit-content;
        min-width: 136px;
        max-width: 100%;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    body.kiv-home-search-active .kiv-home-search {
        margin-bottom: 18px;
    }

    body.kiv-home-search-active .kiv-home-search-input-row {
        min-height: 50px;
        padding: 0 11px;
    }

    body.kiv-home-search-active .kiv-home-search-footer {
        padding-top: 6px;
    }
}