/*
 * Ninja's additions to scratch.css (compiled from scratch-www): the accent
 * hook-ups, a small set of Scratch 3 styled components (n-*) for pages
 * Scratch doesn't have a scratch-www version of, and those pages' layouts.
 */

:root {
    --ui-blue: hsl(215, 100%, 65%);
    --ui-blue-10: hsla(215, 100%, 65%, .1);
    --ui-gray: hsl(0, 0%, 95%);
    --ui-light-gray: hsl(0, 0%, 98%);
    --ui-border: hsl(0, 0%, 85%);
    --ui-dark-gray: hsl(0, 0%, 70%);
    --type-gray: hsl(225, 15%, 40%);
    --type-light: hsl(225, 15%, 60%);
    --ui-coral: hsl(350, 100%, 60%);
    --ui-green: hsl(163, 85%, 40%);
    --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[hidden] { display: none !important; }
.hidden { display: none; }

/* ------------------------------------------------------------------ accent */

#navigation { background-image: var(--accent-bar); }
.title-banner.masthead { background-color: var(--accent); }

/* Nav: both right-hand items share one baseline. */
#navigation .inner > ul > li.right { align-self: stretch; margin-left: 0; }
#navigation .inner > ul > li.right:not(.right ~ .right) { margin-left: auto; }

/* ----------------------------------------------------------------- buttons */

.n-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-radius: .5rem;
    background-color: var(--accent);
    cursor: pointer;
    padding: 0 1rem;
    height: 2.5rem;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    font-family: var(--font);
    font-size: .875rem;
    font-weight: bold;
    line-height: 1;
}

.n-btn:hover { background-color: var(--accent-dark); color: #fff; }
.n-btn:disabled { opacity: .5; cursor: default; }
.n-btn img { width: 1.1rem; height: 1.1rem; }

.n-btn.secondary {
    box-shadow: inset 0 0 0 1px var(--ui-border);
    background-color: #fff;
    color: var(--type-gray);
}

.n-btn.secondary:hover { background-color: var(--ui-gray); color: var(--type-gray); }
.n-btn.danger { background-color: var(--ui-coral); }
.n-btn.danger:hover { background-color: hsl(350, 80%, 52%); }
.n-btn.success { background-color: var(--ui-green); }
.n-btn.success:hover { background-color: hsl(163, 85%, 34%); }
.n-btn.small { border-radius: .375rem; padding: 0 .75rem; height: 2rem; font-size: .75rem; }
.n-btn.block { display: flex; width: 100%; }

.n-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.n-row.end { justify-content: flex-end; }
.n-spacer { flex: 1; }

/* ------------------------------------------------------------ cards, form */

.n-card {
    box-sizing: border-box;
    border: 1px solid var(--ui-border);
    border-radius: .5rem;
    background-color: #fff;
}

.n-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid var(--ui-border);
    border-radius: .5rem .5rem 0 0;
    background-color: var(--ui-gray);
    padding: .625rem 1.25rem;
    min-height: 2.25rem;
}

.n-card-header h4 { margin: 0; font-size: 1.1rem; }
.n-card-header > a { margin-left: auto; font-size: .875rem; font-weight: bold; }
.n-card-body { padding: 1.25rem; }

.n-input,
.n-select,
.n-textarea {
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: .5rem;
    background-color: var(--ui-light-gray);
    padding: 0 .75rem;
    height: 2.5rem;
    color: var(--type-gray);
    font-family: var(--font);
    font-size: .875rem;
}

.n-textarea { padding: .625rem .75rem; height: auto; min-height: 6rem; line-height: 1.5; resize: vertical; }
.n-select { padding-right: 2rem; cursor: pointer; }
.n-input:focus,
.n-select:focus,
.n-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-25);
    background-color: #fff;
}

.n-field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
.n-field label { color: var(--type-gray); font-size: .875rem; font-weight: bold; }
.n-field .n-input { width: 100%; }
.n-help { color: var(--type-light); font-size: .8rem; }
.n-error { margin: 0 0 1rem; color: var(--ui-coral); font-size: .875rem; font-weight: bold; }
.n-error:empty { display: none; }

.n-empty {
    border-radius: .5rem;
    background-color: var(--accent-10);
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--type-gray);
}

.n-empty h4 { margin: 0 0 .5rem; }
.n-empty p { margin: 0; }

.n-avatar { display: block; flex: 0 0 auto; border-radius: .25rem; object-fit: cover; }

/* Scratch 3 tab bar (as on Explore), for page sections. */
.n-tabs {
    display: flex;
    gap: .25rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    padding: 0;
    list-style: none;
}

.n-tabs a {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    padding: .75rem 1rem;
    color: var(--type-gray);
    font-size: .875rem;
    font-weight: bold;
}

.n-tabs a:hover { border-bottom-color: var(--ui-dark-gray); color: var(--type-gray); }
.n-tabs a.active { border-bottom-color: var(--accent); color: var(--accent); }

.n-count {
    border-radius: 1rem;
    background-color: var(--ui-gray);
    padding: .125rem .5rem;
    color: var(--type-gray);
    font-size: .75rem;
}

.n-tabs a.active .n-count { background-color: var(--accent-10); color: var(--accent); }

.n-page { padding: 1.5rem 0 3rem; }
.n-page-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.n-page-title h2 { margin: 0; font-size: 2rem; }

/* ---------------------------------------------------------------- toast */

.ninja-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, 1rem);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    border-radius: .5rem;
    box-shadow: 0 0 0 4px hsla(0, 0%, 0%, .15);
    background-color: var(--accent);
    padding: .75rem 1.25rem;
    pointer-events: none;
    color: #fff;
    font-size: .875rem;
    font-weight: bold;
}

.ninja-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* -------------------------------------------------------- modal content */

.modal-inner-content { padding: 1.5rem; }
/* Dialog buttons follow Scratch's transfer-host confirmation: a button row
   on the right, Cancel as a white button with an accent ring beside the
   accent action button. */
.modal-inner-content .action-buttons { justify-content: flex-end; gap: 1rem; margin: 0; padding-top: 1.5rem; }
/* Every dialog gets Scratch 3's coloured title bar unless it has its own. */
:where(.modal-sizes) :where(.modal-header) {
    box-sizing: border-box;
    border-radius: 1rem 1rem 0 0;
    box-shadow: inset 0 -1px 0 0 hsla(0, 0%, 0%, .15);
    background-color: var(--accent);
}
:where(.modal-sizes) :where(.modal-header) .modal-title {
    color: #fff; font-size: 1rem; font-weight: bold; line-height: 1.5rem; text-align: center;
}
.modal-inner-content .action-buttons .action-button {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    min-width: 5rem; height: auto; margin: 0; padding: 1em 1.25em;
    border: 0; border-radius: .5rem; background-color: var(--accent); color: #fff;
    font-size: .8rem; font-weight: bold; line-height: 1;
}
.modal-inner-content .action-buttons .action-button.close-button {
    background-color: #fff; color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.modal-inner-content .action-buttons .action-button-text { margin: 0; line-height: 1; }
.confirm-modal-content .confirm-text { font-size: 1rem; }
.confirm-text { margin: 0; line-height: 1.5; }
.studio-list-empty { padding: 1rem; text-align: center; }
.error-text { margin-top: .5rem; color: var(--ui-coral); font-size: .875rem; }
.report-modal-content textarea { box-sizing: border-box; width: 100%; }

/* ------------------------------------------------------ project page notes */

/* From the IDE's project page (Ninja IDE/src/components/ninja/project-page.css). */
.preview .project-notes { height: calc(362px + 44px - .3125rem); }
.preview .ninja-description-block { display: flex; flex: 1; flex-direction: column; margin-bottom: .75rem; min-height: 0; }
.preview .ninja-description-block:last-child { margin-bottom: 0; }
.preview .ninja-description-block .project-textlabel { margin: 0 0 .5rem; font-size: 1rem; font-weight: bold; }

.preview .ninja-description {
    box-sizing: border-box;
    flex: 1;
    /* Same box as the comment composer (.inplace-textarea). */
    transition: all .2s ease;
    border: 2px dashed hsla(215, 100%, 65%, .25);
    border-radius: 8px;
    background-color: hsl(0, 0%, 98%);
    padding: .75rem 1rem;
    width: 100%;
    min-height: 4rem;
    overflow: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--type-gray);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
}

.preview textarea.ninja-description { resize: none; white-space: pre-wrap; }
.preview textarea.ninja-description:focus { outline: none; border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-25); }
.preview textarea.ninja-description::placeholder,
.preview .ninja-description-placeholder { color: #8c93a8; font-style: italic; }
.guiPlayer .ninja-player { display: block; border: 0; width: 100%; height: 406px; }

/* ---------------------------------------------------------------- comments */

.comments-turned-off {
    box-sizing: border-box;
    border-radius: .5rem;
    background-color: var(--ui-blue-10);
    padding: 1rem;
    width: 100%;
    font-size: .875rem;
}

/* ------------------------------------------------------------- join, login */

.join-flow-oauth-list { display: flex; flex-direction: column; gap: .5rem; }

.join-flow-oauth {
    display: block;
    border: 1px solid var(--ui-border);
    border-radius: .5rem;
    padding: .625rem;
    text-align: center;
    color: var(--type-gray);
    font-size: .875rem;
    font-weight: bold;
}

.join-flow-oauth:hover { background-color: var(--ui-light-gray); color: var(--type-gray); }

.n-join-welcome {
    display: flex; flex-direction: column; align-items: center;
    margin: 1.5rem auto 0; max-width: 22rem; text-align: center;
}
.n-join-welcome-icon {
    margin-bottom: 1rem; width: 5rem; height: 5rem; object-fit: contain;
}
.n-join-welcome-heading { margin-bottom: .5rem; font-size: 1.125rem; font-weight: bold; }
.n-join-welcome p { margin: 0; color: var(--type-light); font-size: .875rem; line-height: 1.5; }

/* ----------------------------------------------------------------- profile */

.n-profile-banner { background-color: var(--accent); background-image: var(--accent-bar); }

.n-profile-banner .inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 0;
}

.n-profile-banner .n-avatar {
    border: 4px solid rgba(255, 255, 255, .25);
    border-radius: .75rem;
    width: 6rem;
    height: 6rem;
}

.n-avatar-edit { position: relative; cursor: pointer; }

.n-avatar-edit span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: 0 0 .5rem .5rem;
    background: rgba(0, 0, 0, .55);
    padding: .25rem 0;
    text-align: center;
    color: #fff;
    font-size: .7rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity .15s;
}

.n-avatar-edit:hover span { opacity: 1; }
.n-profile-name { flex: 1; min-width: 0; color: #fff; }
.n-profile-name h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 2.25rem; }
.n-profile-name p { margin: .25rem 0 0; opacity: .85; color: #fff; font-size: .875rem; }
.n-profile-banner .n-btn.secondary { box-shadow: none; }

.n-profile-box {
    display: grid; grid-template-columns: 335px 318px 1fr;
    margin: 1.5rem 0 2.5rem; overflow: hidden;
}
.n-profile-box h3 { margin: 0 0 .5rem; font-size: 1rem; }
.n-profile-about { display: flex; flex-direction: column; gap: .625rem; padding: .625rem 1.25rem; }
.n-bio-body { position: relative; }

.n-bio-text {
    box-sizing: border-box;
    height: 6rem;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--type-gray);
    font-size: .875rem;
    line-height: 1.5;
}
.n-bio .n-textarea { box-sizing: border-box; width: 100%; height: 6rem; resize: none; }
.n-bio-count { position: absolute; right: .5rem; bottom: .375rem; color: var(--type-light); font-size: .6875rem; }

/* Scratch's .player: a framed card holding a 280x210 stage image. */
.n-featured {
    box-sizing: border-box; width: 278px; padding: 8px;
    border: 1px solid var(--ui-border); border-radius: .5rem; background: #fff;
    box-shadow: 0 2px 3px hsla(0, 0%, 0%, .25);
}
.n-featured-col {
    display: flex; flex-direction: column; align-items: center;
    border-left: 1px solid var(--ui-border); padding: .625rem 0;
}
.n-featured-col h3 { width: 278px; max-width: 100%; }
.n-featured-stage { position: relative; width: 260px; height: 195px; }
.n-featured-stage img { display: block; width: 260px; height: 195px; border-radius: .25rem; object-fit: cover; }
.n-featured-stage.empty {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    border-radius: .25rem; background: var(--ui-gray); padding: 1rem;
    text-align: center; color: var(--type-light); font-size: .875rem;
}
.n-featured-stage.empty p { margin: 0; }
.n-featured-change {
    display: none; position: absolute; top: 0; left: 0;
    border: 0; border-radius: .25rem 0 .5rem 0; background: hsla(0, 0%, 0%, .7);
    padding: 5px 8px; color: #fff; font: inherit; font-size: .75rem; font-weight: bold; cursor: pointer;
}
.n-featured:hover .n-featured-change,
.n-featured-change:focus-visible { display: block; }
.n-featured-title,
a.n-featured-title:link,
a.n-featured-title:visited {
    display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--accent); font-size: 14px; font-weight: bold; line-height: 20px;
}

.n-doing { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--ui-border); padding: .625rem 1.25rem 0; }
/* The activity list takes whatever height the other two columns give the
   box and scrolls inside it, so it never makes the box taller. */
.n-doing-list { flex: 1 1 0; min-height: 0; padding-bottom: .625rem; overflow-y: auto; }
.n-doing .n-help { margin: 0; }

.n-activity { margin: 0; padding: 0; list-style: none; }
.n-activity li { border-bottom: 1px solid var(--ui-border); padding: .5rem 0; font-size: .8125rem; line-height: 1.4; }
.n-activity li:last-child { border-bottom: 0; }
.n-activity-time { margin-top: .125rem; color: var(--type-light); font-size: .6875rem; }
.n-people { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 1rem 0; list-style: none; }
.n-people a { display: flex; flex-direction: column; align-items: center; gap: .375rem; width: 5.5rem; text-align: center; font-size: .8rem; }
.n-people .n-avatar { width: 4rem; height: 4rem; }
.n-people span { overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.n-profile-section { margin-bottom: 1.25rem; }
.n-profile-section .n-card-body { padding: 0 1.25rem; }
.n-profile-section .n-card-body.padded { padding: 1.25rem; }

/* ---------------------------------------------------------------- my stuff */

.n-stuff-toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.n-stuff-toolbar .n-select { margin-left: auto; }
.n-list { margin: 0; padding: 0; list-style: none; }

.n-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--ui-border);
    padding: .875rem 1.25rem;
}

.n-list-item:last-child { border-bottom: 0; }
.n-list-item .n-thumb { display: block; flex: 0 0 auto; border-radius: .25rem; width: 96px; height: 72px; object-fit: cover; }
.n-list-item .n-thumb.studio { width: 102px; height: 60px; }
.n-list-info { flex: 1; min-width: 0; }
.n-list-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: bold; }
.n-list-meta { margin-top: .25rem; color: var(--type-light); font-size: .8rem; }

.n-badge {
    display: inline-block;
    margin-left: .5rem;
    border-radius: 1rem;
    background-color: var(--ui-gray);
    padding: .125rem .5rem;
    vertical-align: 2px;
    color: var(--type-gray);
    font-size: .7rem;
    font-weight: bold;
}

.n-badge.shared { background-color: hsla(163, 85%, 40%, .15); color: hsl(163, 85%, 28%); }
.n-badge.danger { background-color: hsla(350, 100%, 60%, .15); color: hsl(350, 80%, 45%); }
.n-list-actions { display: flex; flex: 0 0 auto; gap: .5rem; }
.n-more { display: flex; justify-content: center; padding: 1rem; }

/* ---------------------------------------------------------------- settings */

.n-settings { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem; align-items: start; }
.n-side-nav { overflow: hidden; }
.n-side-nav a { display: block; border-left: 3px solid transparent; padding: .75rem 1rem; color: var(--type-gray); font-size: .875rem; font-weight: bold; }
.n-side-nav a:hover { background-color: var(--ui-light-gray); color: var(--type-gray); }
.n-side-nav a.active { border-left-color: var(--accent); background-color: var(--accent-10); color: var(--accent); }
.n-settings .n-card-body { max-width: 26rem; }
.n-linked { margin: 0; padding: 0; list-style: none; }
.n-linked li { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--ui-gray); padding: .75rem 0; }
.n-linked li:last-child { border-bottom: 0; }
.n-linked strong { flex: 1; }

/* ----------------------------------------------------- admin, moderation */

.n-mod-card { margin-bottom: 1rem; }
.n-mod-grid { display: grid; grid-template-columns: 1fr 17rem; gap: 1.25rem; }

.n-mod-type {
    border-radius: 1rem;
    background-color: var(--accent-10);
    padding: .125rem .625rem;
    color: var(--accent);
    font-size: .75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.n-mod-count { color: var(--type-light); font-size: .8rem; }

.n-mod-comment {
    border: 1px solid var(--ui-border);
    border-radius: 0 .5rem .5rem .5rem;
    background-color: #fff;
    padding: .75rem 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .95rem;
    line-height: 1.5;
}

.n-mod-comment.deleted { opacity: .6; text-decoration: line-through; }
.n-mod-context { margin: 0 0 .5rem; color: var(--type-light); font-size: .8rem; }
.n-mod-quote { margin: 0 0 .5rem; border-left: 3px solid var(--ui-border); padding-left: .75rem; color: var(--type-light); font-size: .8rem; }
.n-mod-project { display: flex; gap: 1rem; }
.n-mod-project img { flex: 0 0 auto; border-radius: .25rem; width: 192px; height: 144px; object-fit: cover; }
.n-mod-project h4 { margin: 0 0 .25rem; }
.n-mod-project p { margin: .25rem 0; max-height: 4.5em; overflow: hidden; white-space: pre-wrap; font-size: .8rem; }
.n-mod-owner { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.n-mod-owner .n-avatar { width: 3rem; height: 3rem; }
.n-mod-owner-name { font-weight: bold; }
.n-mod-reports { margin: 0; padding: 0; max-height: 10rem; overflow: auto; list-style: none; font-size: .8rem; }
.n-mod-reports li { border-bottom: 1px solid var(--ui-gray); padding: .375rem 0; }
.n-mod-reports li:last-child { border-bottom: 0; }
.n-mod-reports .who { color: var(--type-light); }

.n-mod-decide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid var(--ui-border);
    border-radius: 0 0 .5rem .5rem;
    background-color: var(--ui-light-gray);
    padding: .75rem 1.25rem;
}

.n-mod-decide label { display: flex; align-items: center; gap: .375rem; font-size: .8rem; }
.n-mod-decide .n-select { height: 2rem; font-size: .8rem; }
.n-mod-verdict { font-size: .875rem; font-weight: bold; }
.n-mod-verdict.yes { color: hsl(350, 80%, 45%); }
.n-mod-verdict.no { color: hsl(163, 85%, 28%); }

.n-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.n-table th,
.n-table td { border-bottom: 1px solid var(--ui-border); padding: .625rem .75rem; vertical-align: middle; text-align: left; }
.n-table th { background-color: var(--ui-gray); color: var(--type-gray); font-size: .75rem; }
.n-table tr:last-child td { border-bottom: 0; }
.n-table td.actions { text-align: right; white-space: nowrap; }
.n-table td.actions .n-btn + .n-btn { margin-left: .375rem; }
.n-table .n-user { display: flex; align-items: center; gap: .5rem; font-weight: bold; }
.n-table .n-avatar { width: 2rem; height: 2rem; }
.n-mono { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.n-secret { display: block; border-radius: .5rem; background-color: var(--ui-gray); padding: .75rem; font-size: 1.1rem; user-select: all; }

/* ----------------------------------------------------- about, ideas, 404 */

.info-inner { padding: 2rem 0 3rem; }
.info-inner section { margin-bottom: 2rem; }
.info-inner p { line-height: 1.6; }
.n-404 { padding: 4rem 0; text-align: center; }
.n-404 h2 { margin-bottom: .5rem; }

@media only screen and (max-width: 941px) {
    .n-profile-box,
    .n-settings,
    .n-mod-grid { grid-template-columns: 1fr; }
    .n-featured-col { border-top: 1px solid var(--ui-border); border-left: 0; padding: 1.25rem; }
    .n-doing { border-top: 1px solid var(--ui-border); border-left: 0; }
    .n-doing-list { flex: none; height: auto; max-height: 17rem; }
    .n-list-item { flex-wrap: wrap; }
    .preview .project-notes { height: auto; }
}

.mod-feature { width: 40rem; }
.n-feature-label { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; font-weight: bold; }
.n-feature-label .n-select { flex: 1; }
.n-feature-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
    height: 18.75rem; overflow-y: auto; align-content: start;
    border: 1px solid var(--ui-border); border-radius: .5rem; background: var(--ui-light-gray); padding: .5rem;
}
.n-feature-pick {
    display: flex; flex-direction: column; gap: .375rem; min-width: 0;
    border: 2px solid transparent; border-radius: .5rem; background: none; cursor: pointer; padding: .375rem;
    font-family: inherit; font-size: .75rem; font-weight: bold; color: var(--type-gray); text-align: left;
}
.n-feature-pick:hover { background: #fff; }
.n-feature-pick.selected { border-color: var(--accent); background: #fff; }
.n-feature-pick img { display: block; border-radius: .25rem; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.n-feature-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.n-settings-avatar { border-radius: .5rem; width: 4rem; height: 4rem; }
.n-settings-avatar-row { gap: .75rem; }
.n-masthead-link { color: #fff; text-decoration: underline; }
.n-masthead-link:hover { color: #fff; }
.thumbnail.n-person { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.thumbnail.n-person .n-avatar { border-radius: .5rem; width: 6rem; height: 6rem; }
.thumbnail.n-person .n-person-name { font-weight: bold; }

.n-login-password-title { margin-top: 1rem; }
.n-login-error { position: static; margin-top: .75rem; transform: none; }

.n-section-title { margin: 1.5rem 0 .75rem; font-size: 1.1rem; }
.n-section-title:first-child { margin-top: 0; }
.n-search-row { margin-bottom: 1rem; }
.n-search-row .n-input { flex: 1; max-width: 24rem; }
.n-mod-reports-title { margin: 0 0 .5rem; font-size: .875rem; }
.n-table .n-badge { margin-left: .5rem; }

.n-cloud-vars { margin: -.5rem 0 1rem; }
.n-cloud-bans { margin-top: 1.25rem; }

/* Link buttons: beat scratch.css's a:link / a:visited colours. */
a.n-btn:link,
a.n-btn:visited,
a.n-btn:hover { color: #fff; }
a.n-btn.secondary:link,
a.n-btn.secondary:visited,
a.n-btn.secondary:hover { color: var(--type-gray); }
.slick-track { margin-left: 0; }
.profile-page .box { margin-bottom: 1.25rem; }

/* Form controls use the page font, as on scratch.mit.edu. */
input, textarea, select, button { font-family: inherit; }
/* Scratch's own .button used on links: keep the white label. */
a.button:link,
a.button:visited,
a.button:hover { color: #fff; }
.intro-banner a.intro-button:link,
.intro-banner a.intro-button:visited,
.intro-banner a.intro-button:hover { color: var(--accent); }
.join-flow-oauth { background-color: #fff; }
.outer .title-banner.masthead { background-color: var(--accent); }
.tabs button.active,
.tabs button.active:hover { border-bottom-color: var(--accent); }
.banner-wrapper { background-color: var(--accent); }
a.n-masthead-link:link,
a.n-masthead-link:visited,
a.n-masthead-link:hover { color: #fff; }
#projectBox .search-prompt,
.search-prompt { box-sizing: border-box; margin: 2rem auto; padding: 0 1rem; max-width: 942px; text-align: center; font-size: 1.25rem; }

/* Ideas: three start-here cards. */
.n-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.n-tip { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.n-tip h4 { margin: 0; font-size: 1.25rem; }
.n-tip p { flex: 1; margin: 0; line-height: 1.5; font-size: .9rem; }
.n-tips-section { padding: 2.5rem 0 3rem; }
.n-tips-section .section-header { margin-bottom: 1.25rem; }

/* Pages that open with a full-width banner sit flush under the nav, as
   Scratch does for the home page and Explore. */
.profile-page #view,
.about-page #view { padding-top: 0; }
.n-page { padding-top: .5rem; }

/* ---------------------------------------------------------- my stuff (v2) */

/* Sizes measured from Scratch's My Stuff (in its Scratch 3 styling). */
.mystuff-page #view { padding-top: 0; }
.ms-banner { margin-bottom: 1.25rem; background-color: var(--accent); padding: 20px 0; }
.ms-banner-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ms-banner h2 { margin: 0 0 16px; padding: 5px 0; color: #fff; font-size: 40px; line-height: 1.2; }
.ms-sort {
    box-sizing: border-box; height: 48px; padding: 0 2rem 0 12px;
    border: 1px solid hsla(0, 0%, 0%, .1); border-radius: 4px; background-color: #fafafa;
    color: var(--type-gray); font: inherit; font-size: 13px; cursor: pointer;
}
.ms-banner-buttons { display: flex; gap: 2px; }
.ms-banner-button,
a.ms-banner-button:link,
a.ms-banner-button:visited {
    display: inline-flex; align-items: center; box-sizing: border-box; height: 26px; margin: 0 1px; padding: 0 10px;
    border: 0; border-radius: 4px; background-color: #fff; color: var(--accent);
    font: inherit; font-size: 13px; font-weight: bold; text-decoration: none; cursor: pointer;
}
.ms-banner-button:hover { background-color: var(--accent-pale, hsl(0, 0%, 95%)); }
.ms-cols { display: flex; align-items: flex-start; margin-bottom: 2rem; }
.ms-tabs { display: flex; flex: none; flex-direction: column; align-items: flex-start; width: 280px; }
.ms-tabs a,
.ms-tabs a:link,
.ms-tabs a:visited {
    display: block; box-sizing: border-box; height: 38px; margin-top: 10px; padding: 7.5px 12px;
    border: 1px solid hsla(0, 0%, 0%, .15); border-radius: 22px; background-color: #fff;
    color: var(--type-gray); font-size: 13px; font-weight: normal; line-height: 21px; text-decoration: none; white-space: nowrap;
}
.ms-tabs a:first-child { margin-top: 0; }
.ms-tabs a.sub { margin-left: 18px; }
.ms-tabs a:hover { background-color: var(--ui-light-gray); }
.ms-tabs a.active { border-color: hsla(0, 0%, 0%, .15); background-color: var(--accent); color: #fff; }
.ms-main { flex: 1; min-width: 0; }
.ms-list { margin: 0; padding: 0; list-style: none; }
.ms-list li { margin: 0; padding: 0; }
.ms-item {
    display: flex; align-items: flex-start; box-sizing: border-box; margin: 0 0 14px; padding: 12px;
    border: 1px solid hsla(0, 0%, 0%, .15); border-radius: 8px; background-color: #fff;
}
.ms-thumb { flex: none; }
.ms-thumb img { display: block; width: 100px; height: 75px; object-fit: cover; }
.ms-thumb.studio img { width: 127px; height: 75px; }
.ms-info { display: flex; flex-direction: column; align-items: flex-start; width: 240px; min-width: 0; margin: 0 12px; }
.ms-title,
a.ms-title:link,
a.ms-title:visited {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--accent); font-size: 13px; font-weight: bold; line-height: 20px;
}
.ms-date { color: #888; font-size: 11px; line-height: 20px; }
.ms-button,
a.ms-button:link,
a.ms-button:visited {
    display: inline-flex; align-items: center; box-sizing: border-box; height: 26px; margin: 9px 1px 0; padding: 0 10px;
    border-radius: 4px; background-color: var(--accent); color: #fff;
    font-size: 13px; font-weight: bold; text-decoration: none;
}
.ms-button:hover { background-color: var(--accent-dark); }
.ms-link {
    border: 0; background: none; padding: 0; color: var(--accent);
    font: inherit; font-size: 13px; font-weight: bold; line-height: 20px; cursor: pointer;
}
.ms-link:hover { text-decoration: underline; }
.ms-action { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: center; margin-left: auto; }
.ms-stats { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.ms-stat-grid { display: grid; grid-template-columns: 55px 55px; }
.ms-stat { display: flex; align-items: center; gap: 4px; height: 18px; color: #666; font-size: 11px; }
.ms-stat img { width: 12px; height: 12px; opacity: .6; filter: grayscale(1) blur(.2px); }
.ms-stats .ms-link { margin-top: 8px; }
.ms-empty { padding: 4rem 1rem; border: 1px solid hsla(0, 0%, 0%, .15); border-radius: 8px; background-color: #fff; text-align: center; color: var(--type-light); }
.ms-empty p { margin: 0; }

@media only screen and (max-width: 941px) {
    .ms-cols { flex-direction: column; }
    .ms-tabs { width: 100%; margin-bottom: 1rem; }
    .ms-info { flex: 1; width: auto; }
}


/* admin: content search */
.n-mod-item { display: flex; align-items: center; gap: .75rem; font-weight: bold; }
.n-mod-thumb { flex: none; width: 4rem; height: 3rem; object-fit: cover; border-radius: .25rem; border: 1px solid var(--ui-border); }
.n-mod-thumb.studio { width: 5.1rem; }

/* comment reply: icon follows the accent too */
.comment .comment-body .comment-bottom-row .comment-reply:after {
    background: var(--accent);
    -webkit-mask: url("/svgs/project/comment-reply.svg") center / contain no-repeat;
    mask: url("/svgs/project/comment-reply.svg") center / contain no-repeat;
}

/* Crossfade between Ninja pages instead of flashing a blank frame
   (Chromium browsers; others ignore it). */
@view-transition { navigation: auto; }

/* admin: user name with its role tag on one line */
.n-user-cell { display: flex; align-items: center; gap: .5rem; }
.n-table .n-user-cell .n-badge { margin-left: 0; }
.n-badge.admin { background-color: var(--accent-10); color: var(--accent); vertical-align: baseline; }
.n-news-form { margin-bottom: 0; }
.n-news-form .n-field:last-of-type { margin-bottom: 0; }
.n-news-form .n-row.end { margin-top: 1rem; }

/* Profile Report link: just under the profile box, on the right. */
.n-profile-summary { margin: 1.5rem 0 2rem; }
.n-profile-summary .n-profile-box { margin: 0; }
.n-profile-report-row { display: flex; justify-content: flex-end; padding-top: .375rem; }
.n-profile-report {
    border: 0; background: none; padding: 0; cursor: pointer;
    color: #777; font: inherit; font-size: 12px;
}
.n-profile-report:hover { color: var(--accent); text-decoration: underline; }

/* Studio "Edit Thumbnail" pencil drawn in the accent colour. */
.studio-thumb-edit-img.n-accent-icon {
    display: inline-block; flex: none; box-sizing: content-box; width: 22px; height: 22px; vertical-align: middle;
    background: var(--accent);
    -webkit-mask: url("/svgs/studio-icons/edit-icon.svg") left center / 22px 22px no-repeat;
    mask: url("/svgs/studio-icons/edit-icon.svg") left center / 22px 22px no-repeat;
    -webkit-mask-origin: content-box; mask-origin: content-box;
    -webkit-mask-clip: content-box; mask-clip: content-box;
}