/*
 * Plugmind Themes kit: layouts and parts a theme switches on in its plugmind.json, so a theme is mostly its colours.
 *
 *   "layout": "top"         the menu across a top bar on wide screens (phones keep the tab bar and the More menu)
 *   "hero": "band"          a full-width band behind the home page greeting, with the quick links over its edge
 *           "centered"      a full-width band with the greeting and search in the middle
 *           "split"         the greeting and search beside what "hero_aside" adds
 *   "hero_aside": "stats"   reply and notification counts beside the greeting; "actions": a Get help panel
 *   "footer": true          a footer with the company name and the theme credit
 *   "sidebar_style": "light" a light sidebar (with the sidebar layout)
 *
 * The body carries ndc-layout-*, ndc-hero-* and ndc-side-* classes for these. A theme's tokens.css sets the --kit-*
 * colours; the defaults below follow the brand's accent. Calm uses none of this.
 */

.ndc-body {
    --kit-width: 1248px;
    --kit-top-bg: var(--ndc-surface);
    --kit-top-fg: var(--ndc-text-strong);
    --kit-top-link: var(--ndc-muted);
    --kit-top-hover: var(--ndc-accent-soft);
    --kit-top-current-bg: var(--ndc-accent-tint);
    /* The accent, pulled towards the page's text colour so it reads in light and dark mode. */
    --kit-top-current-fg: color-mix(in srgb, var(--ndc-accent) 55%, var(--ndc-text-strong));
    --kit-top-line: var(--ndc-border);
    --kit-top-stripe: transparent;
    --kit-hero-bg: var(--ndc-accent-soft);
    --kit-hero-fg: var(--ndc-text-strong);
    --kit-hero-muted: var(--ndc-muted);
    --kit-tile-bg: var(--ndc-surface);
    --kit-tile-fg: var(--ndc-text-strong);
    --kit-tile-muted: var(--ndc-subtle);
    --kit-tile-warn: #b45309;
    --kit-panel-bg: var(--ndc-text-strong);
    --kit-panel-fg: var(--ndc-surface);
    --kit-panel-item: color-mix(in srgb, var(--kit-panel-fg) 10%, var(--kit-panel-bg));
    --kit-side-bg: var(--ndc-surface);
}

/* ---------- Layout "top": the top bar (every width) ---------- */

.ndc-layout-top .ndc-main { overflow-x: clip; }
.ndc-layout-top .ndc-top {
    border-bottom: 1px solid var(--kit-top-line);
    background: var(--kit-top-bg);
    box-shadow: inset 0 4px 0 var(--kit-top-stripe);
    color: var(--kit-top-fg);
}
.ndc-body.ndc-layout-top .ndc-top-brand,
.ndc-body.ndc-layout-top .ndc-top-brand:hover { color: var(--kit-top-fg); }
.ndc-body.ndc-layout-top .ndc-top .ndc-iconbtn { color: var(--kit-top-link); }
.ndc-body.ndc-layout-top .ndc-top .ndc-iconbtn:hover { background: var(--kit-top-hover); color: var(--kit-top-fg); }
.ndc-layout-top .ndc-top .ndc-dot-badge { border-color: var(--kit-top-bg); }
.ndc-body.ndc-layout-top .ndc-top .ndc-user,
.ndc-body.ndc-layout-top .ndc-top .ndc-user:hover { color: var(--kit-top-fg); }
.ndc-layout-top .ndc-top .ndc-chevron { color: var(--kit-top-link); }
.ndc-layout-top .ndc-top .sp-search { background: var(--kit-top-bg); }
.ndc-layout-top .ndc-top .sp-search input { color: var(--kit-top-fg); }
.ndc-layout-top .kit-topnav { display: none; }

@media (min-width: 761px) {
    .ndc-layout-top .ndc-sidebar,
    .ndc-layout-top .ndc-backdrop { display: none; }
    .ndc-layout-top .ndc-top { gap: 20px; padding: 0 max(36px, calc((100% - var(--kit-width)) / 2 + 36px)); }
    .ndc-layout-top .ndc-top-brand {
        display: block;
        flex-shrink: 0;
        padding: 0;
        font-size: min(22px, calc(220px * 1.6 / var(--ndc-wordmark-len, 7)));
    }
    .ndc-layout-top .ndc-top-brand img { max-height: 32px; }

    .ndc-layout-top .kit-topnav { display: block; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .ndc-layout-top .kit-topnav::-webkit-scrollbar { display: none; }
    .ndc-layout-top .kit-topnav > ul { display: flex; align-items: center; gap: 2px; }
    .ndc-layout-top .kit-topnav .ndc-nav-sep { display: none; }
    .ndc-body.ndc-layout-top .kit-topnav a {
        gap: 7px;
        padding: 8px 12px;
        border-radius: 8px;
        background: none;
        color: var(--kit-top-link);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }
    .ndc-body.ndc-layout-top .kit-topnav a:hover,
    .ndc-body.ndc-layout-top .kit-topnav a:focus-visible { background: var(--kit-top-hover); color: var(--kit-top-fg); }
    .ndc-body.ndc-layout-top .kit-topnav a.current { background: var(--kit-top-current-bg); color: var(--kit-top-current-fg); }
    .ndc-layout-top .kit-topnav svg.ndc-i { display: none; }
    .ndc-layout-top .kit-topnav a > span:first-of-type { flex: none; }

    /* The account menu opens from the top bar, and search is the icon (the menu takes the bar's room). */
    .ndc-layout-top .ndc-top .ndc-account { display: block; }
    .ndc-layout-top .ndc-has-top-search .ndc-top-search { display: none; }
    .ndc-layout-top .ndc-has-top-search .sp-search-button { display: grid; }
}

.ndc-layout-top .ndc-content { max-width: var(--kit-width); }

/* ---------- Light sidebar (sidebar layout) ---------- */

.ndc-side-light {
    --ndc-side-text: var(--ndc-body);
    --ndc-side-muted: var(--ndc-subtle);
}
.ndc-side-light .ndc-sidebar { border-inline-end: 1px solid var(--ndc-border); background: var(--kit-side-bg); color: var(--ndc-text); }
.ndc-body.ndc-side-light .ndc-brand,
.ndc-body.ndc-side-light .ndc-brand:hover { color: var(--ndc-text-strong); }
.ndc-body.ndc-side-light .ndc-nav a:hover { background: var(--ndc-accent-soft); color: var(--ndc-text-strong); }
.ndc-body.ndc-side-light .ndc-nav a.current { background: var(--ndc-accent-tint); color: color-mix(in srgb, var(--ndc-accent) 55%, var(--ndc-text-strong)); }
.ndc-body.ndc-side-light .ndc-nav a.current .ndc-count { background: var(--ndc-accent); color: #fff; }
.ndc-side-light .ndc-nav .ndc-nav-sep { background: var(--ndc-border); }
.ndc-side-light .ndc-sub-toggle:hover, .ndc-side-light .ndc-sub-toggle:focus-visible { background: var(--ndc-accent-soft); color: var(--ndc-text-strong); }
.ndc-body.ndc-side-light .ndc-side-user,
.ndc-body.ndc-side-light .ndc-side-user:hover { color: var(--ndc-text-strong); }
.ndc-side-light .ndc-sidefoot, .ndc-side-light .ndc-language { color: var(--ndc-muted); }

/* ---------- Home: hero styles ---------- */

/* Full width: out to the window's edges, with the text kept in line with the page. */
.ndc-hero-band .ndc-hero,
.ndc-hero-centered .ndc-hero {
    margin: -32px calc(50% - 50vw) 0;
    padding: 44px calc(50vw - 50%) 40px;
    background: var(--kit-hero-bg);
    color: var(--kit-hero-fg);
}
.ndc-hero-band .ndc-hero::before,
.ndc-hero-centered .ndc-hero::before { display: none; }
.ndc-hero-band .ndc-hero h1,
.ndc-hero-centered .ndc-hero h1 { color: var(--kit-hero-fg); font-size: 34px; letter-spacing: -0.8px; }
.ndc-hero-band .ndc-hero .ndc-eyebrow,
.ndc-hero-centered .ndc-hero .ndc-eyebrow { color: var(--kit-hero-muted); }
.ndc-hero-band .ndc-hero-sub,
.ndc-hero-centered .ndc-hero-sub { color: var(--kit-hero-muted); }
.ndc-hero-band .ndc-wave,
.ndc-hero-centered .ndc-wave { display: none; }

/* Band: greeting beside the aside, search under both, quick links over the band's lower edge. */
.ndc-hero-band .ndc-hero,
.ndc-hero-split .ndc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: end;
}
.ndc-hero-band .ndc-hero { padding-bottom: 92px; }
.ndc-hero-band .ndc-hero > *,
.ndc-hero-split .ndc-hero > * { grid-column: 1; }
.ndc-hero-band .ndc-hero-sub { margin-bottom: 0; font-size: 16px; }
.ndc-hero-band .ndc-hero .ndc-search { grid-column: 1 / -1; margin-top: 24px; border-color: transparent; }
.ndc-hero-band .ndc-cards { position: relative; margin-top: -54px; }
.ndc-hero-band .ndc-card-featured { background: var(--ndc-surface); border-color: var(--ndc-accent); box-shadow: 0 0 0 1px var(--ndc-accent) inset, var(--ndc-shadow); }

/* Centered: everything in the middle. */
.ndc-hero-centered .ndc-hero { text-align: center; border-bottom: 1px solid var(--ndc-border); margin-bottom: 24px; }
.ndc-hero-centered .ndc-hero .ndc-search { max-width: 640px; margin-inline: auto; }
.ndc-hero-centered .kit-stats, .ndc-hero-centered .kit-actions { justify-content: center; margin: 0 auto 18px; }

/* Split: the greeting and search on the left, the aside on the right (the aside spans their rows). */
.ndc-hero-split .ndc-hero { align-items: center; padding-bottom: 8px; }
.ndc-hero-split .ndc-hero h1 { font-size: 38px; line-height: 1.1; }
.ndc-hero-split .ndc-hero .ndc-search { margin-bottom: 18px; }

/* ---------- Parts beside the greeting ---------- */

.kit-stats { display: flex; gap: 10px; }
.ndc-hero-band .kit-stats, .ndc-hero-split .kit-stats { grid-column: 2; grid-row: 1 / span 3; }
.kit-stat {
    display: block;
    min-width: 136px;
    padding: 12px 16px;
    border-radius: var(--ndc-radius);
    background: var(--kit-tile-bg);
    color: var(--kit-tile-fg);
    text-align: start;
    text-decoration: none;
}
.ndc-body a.kit-stat, .ndc-body a.kit-stat:hover { color: var(--kit-tile-fg); }
.ndc-body a.kit-stat:hover { background: color-mix(in srgb, var(--kit-tile-bg) 88%, var(--kit-tile-fg)); }
.kit-stat small { display: block; color: var(--kit-tile-muted); font-size: 12.5px; }
.kit-stat b { display: block; margin-top: 2px; font-size: 24px; line-height: 1.2; }
.kit-stat-warn b { color: var(--kit-tile-warn); }

.kit-actions {
    display: grid;
    gap: 8px;
    width: 340px;
    max-width: 100%;
    padding: 18px;
    box-sizing: border-box;
    border-radius: calc(var(--ndc-radius) + 4px);
    background: var(--kit-panel-bg);
    color: var(--kit-panel-fg);
    text-align: start;
}
.ndc-hero-band .kit-actions, .ndc-hero-split .kit-actions { grid-column: 2; grid-row: 1 / span 3; }
.kit-actions strong { font-size: 16px; }
.ndc-body .kit-actions a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--kit-panel-item);
    color: var(--kit-panel-fg);
    font-weight: 600;
    text-decoration: none;
}
.ndc-body .kit-actions a:hover { background: color-mix(in srgb, var(--kit-panel-fg) 18%, var(--kit-panel-bg)); color: var(--kit-panel-fg); }
.kit-actions a svg.ndc-i { width: 18px; height: 18px; }
.kit-actions a span { flex: 1; }

/* ---------- Footer ---------- */

.kit-foot { border-top: 1px solid var(--ndc-border); background: var(--ndc-surface); }
.kit-foot-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    max-width: var(--kit-width);
    margin: 0 auto;
    padding: 16px 36px;
    box-sizing: border-box;
    color: var(--ndc-subtle);
    font-size: 13px;
}

/* ---------- Tablets and phones ---------- */

@media (max-width: 1024px) {
    .ndc-hero-band .ndc-hero, .ndc-hero-centered .ndc-hero { margin-top: -26px; padding-top: 32px; }
    .kit-foot-inner { padding: 16px 24px; }
}

@media (max-width: 760px) {
    .ndc-hero-band .ndc-hero, .ndc-hero-centered .ndc-hero { margin-top: -20px; padding-top: 26px; }
    .ndc-hero-band .ndc-hero { padding-bottom: 70px; }
    .ndc-hero-band .ndc-hero, .ndc-hero-split .ndc-hero { grid-template-columns: minmax(0, 1fr); }
    .ndc-hero-band .ndc-hero h1, .ndc-hero-centered .ndc-hero h1, .ndc-hero-split .ndc-hero h1 { font-size: 26px; }
    .ndc-hero-band .kit-stats, .ndc-hero-split .kit-stats,
    .ndc-hero-band .kit-actions, .ndc-hero-split .kit-actions { grid-column: 1; grid-row: auto; margin-top: 18px; }
    .kit-stat { flex: 1; min-width: 0; }
    .kit-actions { width: 100%; }
    .ndc-hero-band .ndc-cards { margin-top: -44px; }
    /* Clear of the tab bar at the bottom. */
    .kit-foot-inner { padding: 14px 16px calc(var(--ndc-tabbar-h) + 18px + env(safe-area-inset-bottom, 0px)); }
}