/* /srv/neuraweb/shared/header/header.css

 * Phase 2 final: inline SVG icons, no S3 mask-image.

 */



@import url("https://neuraweb-storage.s3.us-east-2.amazonaws.com/dapps/fonts/neuraweb-fonts-reference.css");



:root, html[data-theme="light"] {

    --nw-bg: #ffffff; --nw-surface: #f8fafc; --nw-surface-hover: #eff6ff;

    --nw-text: #0f172a; --nw-text-muted: #475569; --nw-text-subtle: #94a3b8;

    --nw-border: #e2e8f0; --nw-border-strong: #cbd5e1;

    --nw-accent: #2563eb; --nw-accent-hover: #1d4ed8; --nw-accent-text: #ffffff;

    --nw-focus-ring: rgba(37,99,235,.4);

    --nw-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);

    color-scheme: light;

}

html[data-theme="dark"] {

    --nw-bg: #0d0d12; --nw-surface: #14141a; --nw-surface-hover: #1f1f28;

    --nw-text: #f0ede4; --nw-text-muted: #a8a59a; --nw-text-subtle: #5d5b54;

    --nw-border: #2a2a35; --nw-border-strong: #3a3a48;

    --nw-accent: #d4a958; --nw-accent-hover: #e8bb6a; --nw-accent-text: #412402;

    --nw-focus-ring: rgba(212,169,88,.45);

    --nw-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.5);

    color-scheme: dark;

}

/* P1-prefs: data-accent — accent color palette responds to neuraweb_humans.accent_color.
   24 solid + 6 gradients. Solid accents set --nw-accent.
   Gradient accents set --nw-accent (first color, solid-context safe) + --nw-accent-gradient (full string).
   --nw-focus-ring auto-derives from --nw-accent. */

/* Blues */
html[data-accent="cyan"]   { --nw-accent: #06b6d4; }
html[data-accent="sky"]    { --nw-accent: #0ea5e9; }
html[data-accent="blue"]   { --nw-accent: #3b82f6; }
html[data-accent="indigo"] { --nw-accent: #6366f1; }
html[data-accent="navy"]   { --nw-accent: #1e3a5f; }

/* Greens */
html[data-accent="mint"]    { --nw-accent: #34d399; }
html[data-accent="emerald"] { --nw-accent: #10b981; }
html[data-accent="green"]   { --nw-accent: #22c55e; }
html[data-accent="teal"]    { --nw-accent: #14b8a6; }
html[data-accent="forest"]  { --nw-accent: #166534; }

/* Warm */
html[data-accent="yellow"] { --nw-accent: #eab308; }
html[data-accent="amber"]  { --nw-accent: #f59e0b; }
html[data-accent="orange"] { --nw-accent: #f97316; }
html[data-accent="coral"]  { --nw-accent: #fb7185; }
html[data-accent="red"]    { --nw-accent: #ef4444; }

/* Pinks/Purples */
html[data-accent="rose"]    { --nw-accent: #f43f5e; }
html[data-accent="pink"]    { --nw-accent: #ec4899; }
html[data-accent="fuchsia"] { --nw-accent: #d946ef; }
html[data-accent="purple"]  { --nw-accent: #a855f7; }
html[data-accent="violet"]  { --nw-accent: #8b5cf6; }

/* Neutrals */
html[data-accent="slate"] { --nw-accent: #64748b; }
html[data-accent="gray"]  { --nw-accent: #6b7280; }
html[data-accent="stone"] { --nw-accent: #78716c; }
html[data-accent="zinc"]  { --nw-accent: #71717a; }

/* Gradients — first color is solid-context safe; --nw-accent-gradient opt-in for backgrounds */
html[data-accent="gradient-ocean"]    { --nw-accent: #06b6d4; --nw-accent-gradient: linear-gradient(135deg, #06b6d4, #3b82f6); }
html[data-accent="gradient-sunset"]   { --nw-accent: #f97316; --nw-accent-gradient: linear-gradient(135deg, #f97316, #ef4444); }
html[data-accent="gradient-aurora"]   { --nw-accent: #10b981; --nw-accent-gradient: linear-gradient(135deg, #10b981, #06b6d4); }
html[data-accent="gradient-flame"]    { --nw-accent: #eab308; --nw-accent-gradient: linear-gradient(135deg, #eab308, #ef4444); }
html[data-accent="gradient-berry"]    { --nw-accent: #ec4899; --nw-accent-gradient: linear-gradient(135deg, #ec4899, #8b5cf6); }
html[data-accent="gradient-midnight"] { --nw-accent: #1e3a5f; --nw-accent-gradient: linear-gradient(135deg, #1e3a5f, #6366f1); }

/* Auto-derived focus ring follows current accent */
html[data-accent] { --nw-focus-ring: color-mix(in srgb, var(--nw-accent) 40%, transparent); }

/* Page-level theme paint -- covers body and html, not just header chrome */
html, body {
    background: var(--nw-bg);
    color: var(--nw-text);
    transition: background-color .15s, color .15s;
}



:root                    { --nw-content-base: 15px; }

html[data-size="small"]  { --nw-content-base: 14px; }

html[data-size="medium"] { --nw-content-base: 15px; }

html[data-size="large"]  { --nw-content-base: 17px; }

html[data-size="xl"]     { --nw-content-base: 19px; }
/* P1-4c: apply size cycle at <html> root so rem-based rules everywhere scale. */
html { font-size: var(--nw-content-base); }



.nwsh {

    background: var(--nw-bg); color: var(--nw-text);

    border-bottom: 1px solid var(--nw-border);

    height: 48px;

    display: grid; grid-template-columns: auto 1fr auto;

    gap: 16px; align-items: center; padding: 0 16px;

    font-family: "inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    font-size: 0.875rem; line-height: 1.4;

    position: sticky; top: 0; z-index: 100;

}

.nwsh-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.nwsh-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nw-text); }

.nwsh-logo-mark { width: 24px; height: 24px; color: var(--nw-text); }

.nwsh-logo-wordmark { font-weight: 500; font-size: 0.875rem; letter-spacing: -0.01em; }

.nwsh-separator { color: var(--nw-text-subtle); user-select: none; }

.nwsh-dapp { color: var(--nw-text-muted); font-weight: 500; text-decoration: none; white-space: nowrap; }

.nwsh-dapp:hover { color: var(--nw-text); }

.nwsh-entity {

    margin-left: 4px; padding: 3px 8px;

    background: var(--nw-surface-hover); border: 1px solid var(--nw-border);

    border-radius: 4px; font-size: 0.75rem; color: var(--nw-text-muted); white-space: nowrap;

}



.nwsh-search { display: flex; align-items: center; max-width: 520px; width: 100%; justify-self: center; }

.nwsh-search-form {

    display: flex; align-items: center; width: 100%;

    background: var(--nw-surface); border: 1px solid var(--nw-border);

    border-radius: 8px; padding: 0 10px; height: 32px;

    transition: border-color .15s, background-color .15s;

}

.nwsh-search-form:focus-within { border-color: var(--nw-accent); background: var(--nw-bg); box-shadow: 0 0 0 3px var(--nw-focus-ring); }

.nwsh-search-icon { color: var(--nw-text-subtle); margin-right: 6px; }

.nwsh-search-icon svg { width: 14px; height: 14px; display: block; }

.nwsh-search-input { border: 0; background: transparent; outline: 0; width: 100%; color: var(--nw-text); font: inherit; font-size: 0.8125rem; }

.nwsh-search-input::placeholder { color: var(--nw-text-subtle); }



.nwsh-right { display: flex; align-items: center; gap: 4px; position: relative; }

.nwsh-btn {

    appearance: none; background: transparent; border: 0; padding: 0;

    width: 32px; height: 32px; border-radius: 6px;

    color: var(--nw-text-muted); cursor: pointer;

    display: inline-flex; align-items: center; justify-content: center;

    transition: background-color .15s, color .15s;

}

.nwsh-btn:hover { background: var(--nw-surface); color: var(--nw-text); }

.nwsh-btn:focus-visible { outline: 2px solid var(--nw-accent); outline-offset: 1px; }

.nwsh-btn .nwsh-icon { display: inline-flex; }

.nwsh-btn svg { width: 18px; height: 18px; display: block; }



/* Fullscreen icon swap — exit hidden by default, shown when body has data-fullscreen */

.nwsh-btn-fullscreen .nwsh-fs-exit { display: none; }

html[data-fullscreen="true"] .nwsh-btn-fullscreen .nwsh-fs-enter { display: none; }

html[data-fullscreen="true"] .nwsh-btn-fullscreen .nwsh-fs-exit  { display: inline-flex; }



.nwsh-auth {

    display: flex; align-items: center; gap: 6px;

    padding: 4px 8px 4px 4px; margin-left: 4px;

    background: transparent; border: 1px solid var(--nw-border);

    border-radius: 999px; cursor: pointer;

    color: var(--nw-text); font: inherit; font-size: 0.8125rem;

}

.nwsh-auth:hover { background: var(--nw-surface); border-color: var(--nw-border-strong); }

.nwsh-auth:focus-visible { outline: 2px solid var(--nw-accent); outline-offset: 1px; }

.nwsh-avatar {

    width: 24px; height: 24px; border-radius: 50%;

    background: var(--nw-surface-hover); color: var(--nw-text-muted);

    display: inline-flex; align-items: center; justify-content: center;

    overflow: hidden; flex-shrink: 0;

}

.nwsh-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nwsh-avatar-fallback svg { width: 14px; height: 14px; }

.nwsh-auth-name { font-weight: 500; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nwsh-auth-caret svg { width: 12px; height: 12px; color: var(--nw-text-subtle); }



.nwsh-signin {

    padding: 6px 14px; border-radius: 6px;

    background: var(--nw-accent); color: var(--nw-accent-text);

    text-decoration: none; font-weight: 500; font-size: 0.8125rem;

    margin-left: 4px; transition: background-color .15s;

}

.nwsh-signin:hover { background: var(--nw-accent-hover); color: var(--nw-accent-text); }



.nwsh-menu {

    position: absolute; top: 100%; right: 0; margin-top: 6px;

    background: var(--nw-bg); border: 1px solid var(--nw-border);

    border-radius: 8px; box-shadow: var(--nw-shadow);

    min-width: 220px; padding: 6px; display: none; z-index: 200;

}

.nwsh-menu[data-open="true"] { display: block; }

.nwsh-menu-item {

    display: flex; align-items: center; gap: 10px;

    padding: 8px 10px; border-radius: 5px;

    color: var(--nw-text); text-decoration: none; font-size: 0.8125rem;

    cursor: pointer; background: transparent; border: 0;

    width: 100%; text-align: left; font: inherit;

}

.nwsh-menu-item:hover { background: var(--nw-surface); }

.nwsh-menu-item svg { width: 16px; height: 16px; color: var(--nw-text-muted); flex-shrink: 0; }

.nwsh-menu-divider { height: 1px; background: var(--nw-border); margin: 4px 0; }

.nwsh-menu-meta { padding: 8px 10px; border-bottom: 1px solid var(--nw-border); margin-bottom: 4px; }

.nwsh-menu-meta-name { font-weight: 500; font-size: 0.8125rem; color: var(--nw-text); }

.nwsh-menu-meta-une { font-size: 0.6875rem; color: var(--nw-text-subtle); font-family: "jetbrains-mono", ui-monospace, monospace; }



.nwsh-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.nwsh-icon svg { display: block; }



.nwsh-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }



@media (max-width: 767px) {

    .nwsh { height: auto; grid-template-columns: auto auto; grid-template-rows: 48px auto; gap: 8px 12px; padding: 0 12px; }

    .nwsh-left   { grid-row: 1; grid-column: 1; }

    .nwsh-right  { grid-row: 1; grid-column: 2; justify-self: end; }

    .nwsh-search { grid-row: 2; grid-column: 1 / -1; max-width: 100%; padding: 0 0 8px; }

    .nwsh-logo-wordmark, .nwsh-auth-name { display: none; }

}




/* ============================================================

 * P1-4 additions: dApp pill, entity switcher, breadcrumb sub-row,

 * body-level text-size baseline (fixes "size button does nothing"

 * on pages that don't opt into --nw-content-base via their own CSS).

 * ============================================================ */



/* Body-level baseline: makes the size cycle visible everywhere.

   Per-dApp content CSS that already uses var(--nw-content-base)

   continues to work. The shared header bar keeps its explicit 14px

   via .nwsh's own font-size rule. */

/* body font-size moved to html in P1-4c */



/* Entity switcher (the <details> dropdown) ---------------------- */

.nwsh-entity-switcher { position: relative; display: inline-block; }

.nwsh-entity-switcher > summary { list-style: none; cursor: pointer; }

.nwsh-entity-switcher > summary::-webkit-details-marker { display: none; }

.nwsh-entity-clickable { display: inline-flex; align-items: center; gap: 4px; }

.nwsh-entity-une  { font-family: "jetbrains-mono", ui-monospace, monospace; font-size: 0.75rem; }

.nwsh-entity-role { font-size: 0.6875rem; color: var(--nw-text-subtle); padding-left: 4px; border-left: 1px solid var(--nw-border); margin-left: 2px; }

.nwsh-entity-caret { display: inline-flex; align-items: center; color: var(--nw-text-subtle); }

.nwsh-entity-caret svg { width: 12px; height: 12px; display: block; }

.nwsh-entity-switcher[open] > summary { background: var(--nw-surface-hover); border-color: var(--nw-border-strong); }



/* Entity switcher dropdown panel */

.nwsh-entity-menu {

    position: absolute; top: calc(100% + 4px); left: 0;

    background: var(--nw-bg); border: 1px solid var(--nw-border);

    border-radius: 8px; box-shadow: var(--nw-shadow);

    min-width: 240px; max-width: 360px; padding: 6px;

    z-index: 200;

}

.nwsh-entity-menu-head {

    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .04em;

    color: var(--nw-text-subtle); padding: 6px 10px 4px;

}

.nwsh-entity-row {

    display: grid; grid-template-columns: 1fr auto auto; align-items: center;

    gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 5px;

    background: transparent; color: var(--nw-text); cursor: pointer;

    text-align: left; font: inherit;

}

.nwsh-entity-row:hover { background: var(--nw-surface); }

.nwsh-entity-row-active { background: var(--nw-surface-hover); }

.nwsh-entity-row-une   { font-family: "jetbrains-mono", ui-monospace, monospace; font-size: 0.75rem; }

.nwsh-entity-row-role  { font-size: 0.6875rem; color: var(--nw-text-muted); }

.nwsh-entity-row-state { font-size: 0.625rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nw-accent); padding: 1px 6px; border: 1px solid var(--nw-accent); border-radius: 999px; }



/* Breadcrumb sub-row -------------------------------------------- */

.nwsh-crumbs {

    background: var(--nw-bg); border-bottom: 1px solid var(--nw-border);

    font-size: 0.9375rem; color: var(--nw-text);

    position: sticky; top: 48px; z-index: 99;

}

.nwsh-crumbs-inner {

    display: flex; align-items: center; flex-wrap: wrap;

    gap: 8px; padding: 8px 16px; min-height: 36px;

    max-width: 100%; overflow-x: auto;

}

.nwsh-crumb { color: var(--nw-text-muted); text-decoration: none; white-space: nowrap; }

.nwsh-crumb:hover { color: var(--nw-text); }

a.nwsh-crumb { cursor: pointer; }

.nwsh-crumb-current { color: var(--nw-text); font-weight: 500; }

.nwsh-crumb-sep { display: inline-flex; align-items: center; color: var(--nw-text-subtle); flex-shrink: 0; }

.nwsh-crumb-sep svg { width: 12px; height: 12px; display: block; }



@media (max-width: 767px) {

    .nwsh-crumbs { top: auto; }

    .nwsh-crumbs-inner { padding: 6px 12px; }

}




/* ============================================================

 * P1-prefs (STEP 1): user preference layer — accessibility commitments

 * applied as data-* attributes emitted by NW_Client::bodyAttributes()

 * from neuraweb_humans columns. SSOT pattern: DB row → data-attr → CSS rule.

 * ============================================================ */






/* P1-prefs: data-font — body font-family responds to neuraweb_humans.font_family.

   Each rule maps to a font in s3://neuraweb-storage/dapps/fonts/ loaded via

   neuraweb-fonts-reference.css. Mono fonts excluded (rough as body text).

   `system` = no override; browser default sans-serif. */

html[data-font="dm-sans"]      { font-family: "dm-sans", -apple-system, sans-serif; }

html[data-font="fira-sans"]    { font-family: "fira-sans", -apple-system, sans-serif; }

html[data-font="inter"]        { font-family: "inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

html[data-font="lato"]         { font-family: "lato", -apple-system, sans-serif; }

html[data-font="montserrat"]   { font-family: "montserrat", -apple-system, sans-serif; }

html[data-font="nunito"]       { font-family: "nunito", -apple-system, sans-serif; }

html[data-font="open-sans"]    { font-family: "open-sans", -apple-system, sans-serif; }

html[data-font="opendyslexic"] { font-family: "opendyslexic", -apple-system, sans-serif; }

html[data-font="outfit"]       { font-family: "outfit", -apple-system, sans-serif; }

html[data-font="poppins"]      { font-family: "poppins", -apple-system, sans-serif; }

html[data-font="roboto"]       { font-family: "roboto", -apple-system, sans-serif; }



/* P1-prefs: data-dyslexia — additive spacing tweaks (NOT a font override).

   OpenDyslexic not yet on S3 (PF-5 followup). Until then, dyslexia mode adds

   letter-spacing, word-spacing, line-height per WCAG 1.4.12 guidance and

   leaves user's font_family choice intact. */

html[data-dyslexia="true"] {

    letter-spacing: 0.05em;

    word-spacing: 0.16em;

    line-height: 1.6;

}



/* P1-prefs: data-motion="reduced" — disable transitions/animations platform-wide.

   Driven by neuraweb_humans.reduced_motion, independent of OS prefers-reduced-motion.

   Universal selector intentional: accessibility setting deserves heavy hand. */

html[data-motion="reduced"] *,

html[data-motion="reduced"] *::before,

html[data-motion="reduced"] *::after {

    animation-duration: 0.001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.001ms !important;

    scroll-behavior: auto !important;

}



/* P1-prefs: data-contrast="true" — high-contrast mode collapses muted/subtle

   text variables to full text color. Visual hierarchy flattens; that's the

   tradeoff users opt into for maximum readability. */

html[data-contrast="true"] {

    --nw-text-muted: var(--nw-text);

    --nw-text-subtle: var(--nw-text);

    --nw-border: var(--nw-text);

}