/* =============================================================================
   ORCA TUTORIALS
   The badge at the top right of the page, the Tutorials popup it opens and the
   All Labs page.

   Every selector is namespaced (#orca-tut / .orca-tut-* / #orca-all-labs) so
   nothing here can restyle the rest of the app. Bootstrap's generic .btn /
   .card / .grow classes are deliberately not reused.
   ============================================================================= */

/* ---------- badge (top right of the page content) -------------------------- */

/* The pages that show it include it right after their own title (see the
   includes in modules/*.html), so it floats to the right edge of the content,
   in the same spot the old "Learn this page" badge had: under the admin bar,
   next to the page title. */
.orca-tut-badge {
    float: right;
    line-height: 0;
}

.orca-tut-badge button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    outline: none;
    transition: transform .15s;
}

.orca-tut-badge button:hover,
.orca-tut-badge button:focus {
    transform: translateY(-2px) scale(1.04);
}

.orca-tut-badge img {
    display: block;
    width: auto;
    height: 54px;
}

/* ---------- popup ---------------------------------------------------------- */

#orca-tut.ot-veil {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 44px 16px;
    background: rgba(21, 32, 43, .5);
    overflow: auto;
    z-index: 3000;
}

#orca-tut.ot-veil.on {
    display: flex;
}

#orca-tut * {
    box-sizing: border-box;
}

#orca-tut .ot-pop {
    position: relative;
    width: 100%;
    max-width: 1020px;
    padding: 8px 26px 34px;
    background: #f7f9fb;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

#orca-tut .ot-x {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e3e8ee;
    border-radius: 50%;
    background: #fff;
    color: #445;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

#orca-tut .ot-x:hover {
    background: #eef3f7;
}

#orca-tut .ot-top {
    display: flex;
    justify-content: center;
    padding: 22px 16px 0;
}

#orca-tut .ot-logo {
    display: block;
    height: 54px;
}

#orca-tut h1 {
    margin: 14px 0 6px;
    color: #3fa3d9;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}

#orca-tut .ot-lede {
    margin: 0 0 24px;
    color: #5b7391;
    font-size: 15.5px;
    text-align: center;
}

#orca-tut .ot-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
}

#orca-tut .ot-card {
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
    max-width: 450px;
    padding: 26px 28px 24px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(20, 40, 60, .05);
    text-align: center;
}

#orca-tut .ot-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    margin-bottom: 8px;
}

#orca-tut h2 {
    margin: 4px 0 10px;
    color: #15202b;
    font-size: 22px;
    font-weight: 700;
}

#orca-tut .ot-card p {
    margin: 0 0 18px;
    color: #445;
    font-size: 14.5px;
    line-height: 1.55;
}

#orca-tut .ot-grow {
    flex: 1 1 auto;
}

#orca-tut .ot-thislab {
    width: 100%;
    margin-bottom: 14px;
    padding: 13px 14px;
    background: #f3f8fc;
    border: 1px solid #d5e7f3;
    border-radius: 10px;
}

#orca-tut .ot-thislab-name {
    color: #3fa3d9;
    font-size: 19px;
    font-weight: 800;
}

#orca-tut .ot-btn {
    display: inline-block;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 10px;
    background: #3fa3d9;
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

#orca-tut .ot-btn:hover,
#orca-tut .ot-btn:focus {
    background: #2f8cc0;
    color: #fff;
    text-decoration: none;
}

#orca-tut .ot-morelabs {
    display: inline-block;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: #3fa3d9;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#orca-tut .ot-morelabs:hover {
    text-decoration: underline;
}

#orca-tut .ot-hint {
    margin-top: 10px;
    color: #8aa;
    font-size: 12.5px;
}

#orca-tut .ot-flask {
    width: 58px;
    height: 73px;
    filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .14));
}

#orca-tut .ot-scribe {
    width: 70px;
    height: 70px;
}

@media (max-width: 620px) {
    #orca-tut.ot-veil {
        padding: 16px 10px;
    }

    #orca-tut .ot-card {
        min-width: 0;
    }
}

/* ---------- All Labs page -------------------------------------------------- */

/* The lab browser opens in its own tab on the bare master page (no site menu,
   no top bar), so it paints its own background edge to edge instead of sitting
   inside the app chrome. The white cards read against it, as in the design. */
#orca-all-labs {
    min-height: 100vh;
    background: #f7f9fb;
}

#orca-all-labs .oal-top {
    display: flex;
    justify-content: center;
    padding: 26px 16px 6px;
}

/* The logo is the only way back into the app on this tab. */
#orca-all-labs .oal-home {
    display: block;
    line-height: 0;
}

#orca-all-labs .oal-logo {
    display: block;
    height: 54px;
}

#orca-all-labs .oal-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 20px 60px;
}

#orca-all-labs h1 {
    margin: 14px 0 6px;
    color: #3fa3d9;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}

#orca-all-labs .oal-lede {
    margin: 0 0 28px;
    color: #5b7391;
    font-size: 15.5px;
    text-align: center;
}

#orca-all-labs .oal-card {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 40, 60, .05);
}

#orca-all-labs .oal-ico {
    flex: 0 0 52px;
    display: flex;
    justify-content: center;
}

#orca-all-labs .oal-flask {
    width: 40px;
    height: 50px;
    filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .14));
}

#orca-all-labs .oal-body {
    flex: 1 1 auto;
    min-width: 0;
}

#orca-all-labs .oal-body h3 {
    margin: 0 0 4px;
    color: #15202b;
    font-size: 18px;
    font-weight: 600;
}

#orca-all-labs .oal-body p {
    margin: 0;
    color: #445;
    font-size: 13.5px;
    line-height: 1.5;
}

#orca-all-labs .oal-btn {
    flex: 0 0 auto;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    background: #3fa3d9;
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

#orca-all-labs .oal-btn:hover,
#orca-all-labs .oal-btn:focus {
    background: #2f8cc0;
    color: #fff;
}

@media (max-width: 620px) {
    #orca-all-labs .oal-card {
        flex-wrap: wrap;
    }

    #orca-all-labs .oal-btn {
        width: 100%;
    }
}