/* NBTI community dashboard — paper-and-ink UI, scoped to nbti.html. */

.nbti-dashboard-launch-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: -17px 0 27px;
}

.nbti-dashboard-launch {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 18px;
    color: var(--ink);
    background: rgba(255, 255, 255, .76);
    border: 1.5px solid rgba(29, 29, 31, .44);
    border-radius: 999px;
    box-shadow: 3px 4px 0 rgba(29, 29, 31, .10);
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.nbti-dashboard-launch svg,
.nbti-dashboard-back svg,
.nbti-dashboard-refresh svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nbti-dashboard-launch:hover {
    background: #fff;
    transform: translateY(-2px) rotate(-.35deg);
    box-shadow: 4px 6px 0 rgba(29, 29, 31, .12);
}

.nbti-dashboard-launch:active { transform: translateY(1px) scale(.98); }

body[data-nbti-view="dashboard-view"] .container {
    width: min(100%, 1120px);
    max-width: 1120px;
}

#dashboard-view {
    position: relative;
    padding: clamp(24px, 4vw, 44px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 29px 24px 31px 25px;
    background: var(--paper-card);
    box-shadow: var(--paper-shadow);
}

#dashboard-view::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px dashed rgba(29, 29, 31, .10);
    border-radius: 21px 17px 23px 19px;
    pointer-events: none;
}

.nbti-dashboard-sheet {
    position: relative;
    z-index: 1;
}

.nbti-dashboard-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(24px, 4vw, 36px);
}

.nbti-dashboard-back,
.nbti-dashboard-refresh {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .74);
    border: 1.5px solid rgba(29, 29, 31, .34);
    border-radius: 999px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    transition: transform .14s ease, background .14s ease;
}

.nbti-dashboard-back { justify-self: start; }
.nbti-dashboard-refresh { justify-self: end; }
.nbti-dashboard-back:hover,
.nbti-dashboard-refresh:hover { background: #fff; transform: translateY(-1px); }
.nbti-dashboard-back:active,
.nbti-dashboard-refresh:active { transform: scale(.96); }
.nbti-dashboard-refresh.is-spinning svg { animation: nbti-dashboard-spin .7s linear infinite; }

@keyframes nbti-dashboard-spin { to { transform: rotate(360deg); } }

.nbti-dashboard-status {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 13px;
    color: var(--muted);
    background: rgba(29, 29, 31, .045);
    border: 1px solid rgba(29, 29, 31, .13);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.nbti-dashboard-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #8e8e93;
    box-shadow: 0 0 0 4px rgba(142, 142, 147, .12);
}

.nbti-dashboard-status[data-state="loading"] .nbti-dashboard-status-dot {
    background: #c58b2a;
    animation: nbti-dashboard-pulse 1.1s ease-in-out infinite;
}
.nbti-dashboard-status[data-state="live"] .nbti-dashboard-status-dot { background: #478163; }
.nbti-dashboard-status[data-state="error"] .nbti-dashboard-status-dot { background: #b93838; }

@keyframes nbti-dashboard-pulse { 50% { opacity: .35; transform: scale(.72); } }

.nbti-dashboard-hero {
    max-width: 760px;
    margin: 0 auto clamp(27px, 4vw, 39px);
    text-align: center;
}

.nbti-dashboard-eyebrow {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.nbti-dashboard-title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(46px, 8vw, 74px);
    font-weight: 700;
    line-height: .92;
}

.nbti-dashboard-subtitle {
    margin: 9px auto 0;
    color: var(--muted);
    font-size: clamp(18px, 2.5vw, 23px);
    line-height: 1.15;
}

.nbti-dashboard-section + .nbti-dashboard-section { margin-top: clamp(31px, 5vw, 48px); }

.nbti-dashboard-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 2px 13px;
    padding-bottom: 9px;
    border-bottom: 1.5px solid rgba(29, 29, 31, .17);
}

.nbti-dashboard-section-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(26px, 4vw, 35px);
    line-height: 1;
}

.nbti-dashboard-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.1;
    text-align: right;
}

.nbti-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.nbti-dashboard-metric {
    min-width: 0;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 17px;
    background: rgba(255, 255, 255, .67);
    border: 1.5px solid rgba(29, 29, 31, .18);
    border-radius: 19px 15px 21px 16px;
    box-shadow: 3px 4px 0 rgba(29, 29, 31, .07);
}

.nbti-dashboard-metric:nth-child(2n) { transform: rotate(.18deg); }
.nbti-dashboard-metric-label {
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.nbti-dashboard-metric-value {
    overflow: hidden;
    color: var(--ink);
    font-size: clamp(31px, 5vw, 48px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
}
.nbti-dashboard-metric-note { color: var(--muted); font-size: 14px; line-height: 1; }

.nbti-dashboard-rings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.nbti-dashboard-ring-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: rgba(255, 253, 247, .76);
    border: 1px solid rgba(29, 29, 31, .16);
    border-radius: 18px 15px 20px 16px;
}

.nbti-dashboard-ring {
    width: 86px;
    height: 86px;
    position: relative;
    display: grid;
    place-items: center;
}
.nbti-dashboard-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nbti-dashboard-ring-track,
.nbti-dashboard-ring-value { fill: none; stroke-width: 8; }
.nbti-dashboard-ring-track { stroke: rgba(29, 29, 31, .08); }
.nbti-dashboard-ring-value { stroke: var(--ring-color, var(--ink)); stroke-linecap: round; transition: stroke-dashoffset .45s ease; }
.nbti-dashboard-ring-number { position: relative; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1; }
.nbti-dashboard-ring-copy { min-width: 0; }
.nbti-dashboard-ring-copy strong { display: block; color: var(--ink); font-size: 19px; line-height: 1; }
.nbti-dashboard-ring-copy span { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.1; }

.nbti-dashboard-types {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.nbti-dashboard-type {
    position: relative;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, .64);
    border: 1px solid rgba(29, 29, 31, .15);
    border-radius: 14px 12px 15px 13px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.nbti-dashboard-type.is-special { background: rgba(242, 214, 147, .24); border-color: rgba(93, 66, 24, .26); }
.nbti-dashboard-type:hover {
    z-index: 1;
    background: #fff;
    box-shadow: 3px 4px 0 rgba(29, 29, 31, .10);
    transform: translateY(-2px) rotate(-.18deg);
}
.nbti-dashboard-type.is-special:hover { background: #fff6df; }
.nbti-dashboard-type:active { transform: translateY(1px) scale(.985); }
.nbti-dashboard-type::after {
    content: "↗";
    position: absolute;
    right: 8px;
    bottom: 5px;
    color: rgba(29, 29, 31, .42);
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transform: translate(-2px, 2px);
    transition: opacity .14s ease, transform .14s ease;
}
.nbti-dashboard-type:hover::after,
.nbti-dashboard-type:focus-visible::after { opacity: 1; transform: none; }
.nbti-dashboard-type-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.nbti-dashboard-type-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nbti-dashboard-type-count { color: var(--ink); font-size: 17px; font-weight: 700; }
.nbti-dashboard-type-bar { height: 7px; margin-top: 9px; overflow: hidden; background: rgba(29, 29, 31, .08); border-radius: 999px; }
.nbti-dashboard-type-bar span { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.nbti-dashboard-type.is-special .nbti-dashboard-type-bar span { background: #8c642c; }
.nbti-dashboard-type-percent { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1; text-align: right; }

.nbti-dashboard-empty {
    grid-column: 1 / -1;
    padding: 27px 18px;
    color: var(--muted);
    background: rgba(255, 255, 255, .55);
    border: 1px dashed rgba(29, 29, 31, .24);
    border-radius: 16px;
    font-size: 18px;
    text-align: center;
}

.nbti-dashboard-categories { display: grid; gap: 10px; }
.nbti-dashboard-category {
    overflow: hidden;
    background: rgba(255, 255, 255, .60);
    border: 1px solid rgba(29, 29, 31, .17);
    border-radius: 18px 15px 20px 16px;
}
.nbti-dashboard-category summary {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 17px;
    color: var(--ink);
    cursor: pointer;
    font-size: 19px;
    font-weight: 700;
    list-style: none;
}
.nbti-dashboard-category summary::-webkit-details-marker { display: none; }
.nbti-dashboard-category summary::after { content: "+"; width: 27px; flex: 0 0 auto; font-size: 28px; font-weight: 400; line-height: 1; text-align: center; }
.nbti-dashboard-category[open] summary::after { content: "−"; }
.nbti-dashboard-category-total { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 400; white-space: nowrap; }
.nbti-dashboard-question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
}
.nbti-dashboard-question {
    min-width: 0;
    padding: 14px;
    background: rgba(255, 253, 247, .78);
    border: 1px dashed rgba(29, 29, 31, .19);
    border-radius: 14px 12px 15px 13px;
}
.nbti-dashboard-question h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.15; }
.nbti-dashboard-question-meta { margin: 5px 0 10px; color: var(--muted); font-size: 13px; line-height: 1; }
.nbti-dashboard-option { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; margin-top: 7px; }
.nbti-dashboard-option-letter { width: 25px; height: 25px; display: grid; place-items: center; color: var(--ink); background: rgba(29, 29, 31, .06); border-radius: 50%; font-size: 13px; font-weight: 700; }
.nbti-dashboard-option-copy { min-width: 0; }
.nbti-dashboard-option-label { display: block; overflow: hidden; color: #414145; font-size: 13px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.nbti-dashboard-option-bar { height: 6px; margin-top: 4px; overflow: hidden; background: rgba(29, 29, 31, .07); border-radius: 999px; }
.nbti-dashboard-option-bar span { display: block; height: 100%; background: #55555a; border-radius: inherit; }
.nbti-dashboard-option-count { min-width: 25px; color: var(--muted); font-size: 13px; font-weight: 700; text-align: right; }

.nbti-dashboard-footnote {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

body.nbti-dashboard-users-open { overflow: hidden; }

.nbti-dashboard-users-overlay {
    position: fixed;
    inset: 0;
    z-index: 20020;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 20, 21, .54);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}
.nbti-dashboard-users-overlay[hidden] { display: none !important; }

.nbti-dashboard-users-panel {
    position: relative;
    width: min(720px, 100%);
    max-height: min(760px, calc(100dvh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--ink);
    background: rgba(255, 253, 247, .98);
    border: 1.5px solid rgba(29, 29, 31, .44);
    border-radius: 26px 21px 28px 23px;
    box-shadow: 8px 10px 0 rgba(20, 20, 21, .19), 0 30px 80px rgba(0, 0, 0, .25);
    animation: nbti-dashboard-users-in .24s cubic-bezier(.16, 1, .3, 1) both;
}
.nbti-dashboard-users-panel::after {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 0;
    border: 1px dashed rgba(29, 29, 31, .10);
    border-radius: 19px 16px 21px 17px;
    pointer-events: none;
}
@keyframes nbti-dashboard-users-in {
    from { opacity: 0; transform: translateY(18px) scale(.965) rotate(.2deg); }
    to { opacity: 1; transform: none; }
}

.nbti-dashboard-users-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(24px, 5vw, 34px) clamp(23px, 5vw, 36px) 17px;
    border-bottom: 1px solid rgba(29, 29, 31, .13);
}
.nbti-dashboard-users-eyebrow {
    margin: 0 0 1px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}
.nbti-dashboard-users-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(42px, 8vw, 62px);
    font-weight: 700;
    line-height: .9;
}
.nbti-dashboard-users-close {
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0 0 3px;
    color: var(--ink);
    background: rgba(29, 29, 31, .055);
    border: 1px solid rgba(29, 29, 31, .16);
    border-radius: 50%;
    cursor: pointer;
    font-size: 31px;
    font-weight: 400;
    line-height: 1;
}
.nbti-dashboard-users-close:hover { color: #fff; background: var(--ink); }
.nbti-dashboard-users-close:active { transform: scale(.94); }

.nbti-dashboard-users-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 15px clamp(23px, 5vw, 36px) 0;
    color: var(--muted);
    font-size: 18px;
}
.nbti-dashboard-users-meta strong { color: var(--ink); font-size: 27px; line-height: 1; }
.nbti-dashboard-users-status {
    position: relative;
    z-index: 1;
    min-height: 25px;
    margin: 8px clamp(23px, 5vw, 36px) 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.15;
}
.nbti-dashboard-users-status.is-error { color: var(--red); }

.nbti-dashboard-users-list {
    position: relative;
    z-index: 1;
    min-height: 120px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 9px;
    margin: 12px 10px 10px;
    padding: 6px clamp(13px, 3vw, 26px) clamp(19px, 4vw, 28px);
    overflow: auto;
    overscroll-behavior: contain;
}
.nbti-dashboard-user-chip {
    min-width: 0;
    min-height: 52px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    color: var(--ink);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(29, 29, 31, .14);
    border-radius: 14px 12px 15px 13px;
}
.nbti-dashboard-user-index {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--ink);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}
.nbti-dashboard-user-handle {
    min-width: 0;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nbti-dashboard-users-empty {
    grid-column: 1 / -1;
    padding: 34px 16px;
    color: var(--muted);
    border: 1px dashed rgba(29, 29, 31, .20);
    border-radius: 15px;
    font-size: 18px;
    text-align: center;
}

.nbti-dashboard-launch:focus-visible,
.nbti-dashboard-back:focus-visible,
.nbti-dashboard-refresh:focus-visible,
.nbti-dashboard-type:focus-visible,
.nbti-dashboard-users-close:focus-visible,
.nbti-dashboard-category summary:focus-visible {
    outline: 3px solid rgba(29, 29, 31, .46);
    outline-offset: 3px;
}

@media (max-width: 960px) {
    .nbti-dashboard-metrics,
    .nbti-dashboard-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nbti-dashboard-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    body[data-nbti-view="dashboard-view"] .container {
        padding: 20px 10px calc(86px + env(safe-area-inset-bottom));
    }
    #dashboard-view { padding: 23px 13px 28px; border-radius: 22px 19px 24px 20px; }
    #dashboard-view::after { inset: 7px; }
    .nbti-dashboard-launch-row { margin-top: -13px; margin-bottom: 23px; }
    .nbti-dashboard-launch { min-height: 42px; font-size: 17px; }
    .nbti-dashboard-toolbar { grid-template-columns: auto 1fr auto; gap: 7px; }
    .nbti-dashboard-back,
    .nbti-dashboard-refresh { width: 42px; height: 42px; padding: 0; }
    .nbti-dashboard-back span,
    .nbti-dashboard-refresh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .nbti-dashboard-status { max-width: 100%; min-width: 0; padding-inline: 10px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
    .nbti-dashboard-hero { margin-bottom: 26px; }
    .nbti-dashboard-title { font-size: 50px; }
    .nbti-dashboard-subtitle { font-size: 18px; }
    .nbti-dashboard-section-head { align-items: flex-start; flex-direction: column; gap: 4px; }
    .nbti-dashboard-section-head p { text-align: left; }
    .nbti-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .nbti-dashboard-metric { min-height: 111px; padding: 13px; }
    .nbti-dashboard-metric-value { font-size: 32px; }
    .nbti-dashboard-rings { grid-template-columns: 1fr; gap: 8px; }
    .nbti-dashboard-ring-card { grid-template-columns: 72px minmax(0, 1fr); }
    .nbti-dashboard-ring { width: 72px; height: 72px; }
    .nbti-dashboard-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .nbti-dashboard-type { padding: 10px 8px; }
    .nbti-dashboard-type-name,
    .nbti-dashboard-type-count { font-size: 15px; }
    .nbti-dashboard-category summary { padding-inline: 13px; font-size: 17px; }
    .nbti-dashboard-category-total { font-size: 12px; }
    .nbti-dashboard-question-grid { grid-template-columns: 1fr; padding-inline: 8px; padding-bottom: 8px; }
    .nbti-dashboard-option-label { font-size: 12px; }
    .nbti-dashboard-users-overlay { align-items: end; padding: 9px; }
    .nbti-dashboard-users-panel {
        width: 100%;
        max-height: calc(88dvh - env(safe-area-inset-bottom, 0px));
        border-radius: 24px 21px 15px 13px;
        box-shadow: 5px 7px 0 rgba(20, 20, 21, .18), 0 24px 60px rgba(0, 0, 0, .25);
    }
    .nbti-dashboard-users-head { padding: 25px 21px 14px; }
    .nbti-dashboard-users-head h2 { font-size: 48px; }
    .nbti-dashboard-users-meta { padding-inline: 21px; }
    .nbti-dashboard-users-status { margin-inline: 21px; }
    .nbti-dashboard-users-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 10px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    .nbti-dashboard-user-chip { padding-inline: 8px; }
    .nbti-dashboard-user-handle { font-size: 15px; }
}

@media (max-width: 390px) {
    .nbti-dashboard-metrics { grid-template-columns: 1fr; }
    .nbti-dashboard-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nbti-dashboard-users-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .nbti-dashboard-launch,
    .nbti-dashboard-back,
    .nbti-dashboard-refresh,
    .nbti-dashboard-ring-value { transition: none; }
    .nbti-dashboard-refresh.is-spinning svg,
    .nbti-dashboard-status[data-state="loading"] .nbti-dashboard-status-dot { animation: none; }
    .nbti-dashboard-users-panel { animation: none; }
}