/* /srv/neuraweb/sites/enterprise/canon.nw/assets/canon.css

 * canon.nw — landing page styles.

 *

 * Inherits all platform theming via body[data-theme] from header.css.

 * Adds canon.nw-specific typography: libre-baskerville for body prose,

 * which is the canonical-document body face for the eventual reader.

 */



.canon-main {

    max-width: 880px;

    margin: 0 auto;

    padding: 56px 24px 96px;

    font-family: "libre-baskerville", Georgia, "Times New Roman", serif;

    font-size: var(--nw-content-base, 17px);

    line-height: 1.7;

    color: var(--nw-text);

}



.canon-hero {

    margin: 0 0 56px;

    padding: 0 0 32px;

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

}



.canon-eyebrow {

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

    font-size: 0.75rem;

    font-weight: 500;

    letter-spacing: 0.18em;

    text-transform: uppercase;

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

    margin-bottom: 24px;

}



.canon-title {

    font-family: "libre-baskerville", Georgia, serif;

    font-size: clamp(40px, 6vw, 64px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.01em;

    margin: 0 0 24px;

    color: var(--nw-text);

}



.canon-tagline {

    font-size: clamp(17px, 2vw, 20px);

    line-height: 1.55;

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

    max-width: 640px;

    margin: 0;

}



.canon-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin: 0 0 64px;

    padding: 32px 0;

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

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

}



.canon-stat {

    text-align: center;

    padding: 0 16px;

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

}

.canon-stat:last-child { border-right: 0; }



.canon-stat-value {

    font-family: "libre-baskerville", Georgia, serif;

    font-size: clamp(32px, 4vw, 44px);

    font-weight: 400;

    color: var(--nw-text);

    line-height: 1;

    margin-bottom: 8px;

}



.canon-stat-label {

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

    font-size: 0.75rem;

    font-weight: 500;

    letter-spacing: 0.06em;

    text-transform: uppercase;

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

}



.canon-section {

    margin: 0 0 48px;

}

.canon-section p {

    margin: 0 0 1em;

}

.canon-section p:last-child {

    margin-bottom: 0;

}



.canon-section-title {

    font-family: "libre-baskerville", Georgia, serif;

    font-size: clamp(22px, 3vw, 28px);

    font-weight: 400;

    margin: 0 0 20px;

    color: var(--nw-text);

}



.canon-section-quiet {

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

    font-size: 0.95em;

}



.canon-tier {

    font-family: "jetbrains-mono", ui-monospace, "SF Mono", monospace;

    font-size: 0.88em;

    background: var(--nw-surface);

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

    padding: 1px 6px;

    border-radius: 3px;

    white-space: nowrap;

}



@media (max-width: 640px) {

    .canon-main { padding: 32px 20px 64px; }

    .canon-stats { grid-template-columns: 1fr; }

    .canon-stat { border-right: 0; border-bottom: 1px solid var(--nw-border); padding: 24px 0; }

    .canon-stat:last-child { border-bottom: 0; }

}



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

   canon.nw dApp identity header — persistent across all pages

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



:root {

    /* canon.nw brand accent: amber/gold. Used for icon, name, current

       breadcrumb, and lineage/current pills. Theme-stable: same hue in

       light, medium, and dark. */

    --canon-accent: #d4a958;

    --canon-accent-deep: #b88c38;

}



.canon-dapp-header {

    background: var(--nw-bg);

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

    padding: 24px 0 18px;

    margin-bottom: 0;

}



.canon-dapp-header-inner {

    max-width: 880px;

    margin: 0 auto;

    padding: 0 32px;

    display: flex;

    flex-direction: column;

    gap: 14px;

}



/* Identity block: icon + name + operator line */

.canon-dapp-identity {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;

    color: inherit;

    align-self: flex-start;

}



.canon-dapp-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    color: var(--canon-accent);

    flex-shrink: 0;

}

.canon-dapp-icon-glyph {

    width: 100%;

    height: 100%;

    display: block;

}



.canon-dapp-text {

    display: flex;

    flex-direction: column;

    gap: 1px;

    line-height: 1.1;

}



.canon-dapp-name {

    font-family: "libre-baskerville", Georgia, "Times New Roman", serif;

    font-size: 2rem;

    font-weight: 700;

    letter-spacing: -0.015em;

    color: var(--canon-accent);

    line-height: 1.05;

}



.canon-dapp-operator {

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

    font-size: 11.5px;

    font-weight: 500;

    letter-spacing: 0.02em;

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

    margin-top: 2px;

}



.canon-dapp-identity:hover .canon-dapp-name {

    color: var(--canon-accent-deep);

}

.canon-dapp-identity:hover .canon-dapp-icon {

    color: var(--canon-accent-deep);

}



/* Breadcrumb row */

.canon-dapp-crumbs {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

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

    font-size: 12.5px;

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

    padding-top: 4px;

}



.canon-crumb {

    text-decoration: none;

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

    padding: 2px 4px;

    border-radius: 3px;

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

}

a.canon-crumb:hover {

    color: var(--nw-text);

    background: var(--nw-surface);

}



.canon-crumb-root {

    font-weight: 500;

    color: var(--canon-accent);

}

a.canon-crumb-root:hover {

    color: var(--canon-accent-deep);

}



.canon-crumb-current {

    color: var(--nw-text);

    font-weight: 500;

    cursor: default;

}



.canon-crumb-sep {

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

    font-size: 0.8125rem;

    padding: 0 2px;

}



/* When the home hero follows the dApp header, drop hero's top padding so

   the two blocks read as a single composed top-of-page region */

.canon-dapp-header + .canon-main .canon-hero,

.canon-dapp-header + main .canon-hero {

    padding-top: 32px;

}



@media (max-width: 720px) {

    .canon-dapp-header { padding: 18px 0 14px; }

    .canon-dapp-header-inner { padding: 0 18px; gap: 10px; }

    .canon-dapp-icon { width: 36px; height: 36px; }

    .canon-dapp-name { font-size: 1.5rem; }

    .canon-dapp-operator { font-size: 10.5px; }

    .canon-dapp-crumbs { font-size: 11.5px; }

}



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

   Entity switcher — sits in the dApp identity row, right of identity

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



.canon-dapp-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    flex-wrap: wrap;

}



/* Pill: static (single-entity) variant */

.canon-entity-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

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

    background: var(--nw-surface);

    color: var(--nw-text);

    font-family: "jetbrains-mono", ui-monospace, monospace;

    font-size: 0.75rem;

    font-weight: 500;

    letter-spacing: -0.01em;

    user-select: none;

}



/* Pill: clickable dropdown trigger */

.canon-entity-pill-clickable {

    cursor: pointer;

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

    list-style: none;

}

.canon-entity-pill-clickable::-webkit-details-marker { display: none; }

.canon-entity-pill-clickable::marker { display: none; content: ""; }

.canon-entity-pill-clickable:hover {

    border-color: var(--canon-accent);

    background: var(--nw-bg);

}



.canon-entity-une {

    color: var(--nw-text);

}



.canon-entity-caret {

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

    font-size: 0.5625rem;

    transition: transform .15s;

}

.canon-entity-switcher[open] .canon-entity-caret {

    transform: rotate(180deg);

}

.canon-entity-switcher[open] .canon-entity-pill-clickable {

    border-color: var(--canon-accent);

    background: var(--nw-bg);

}



/* The dropdown menu */

.canon-entity-switcher {

    position: relative;

    flex-shrink: 0;

}

.canon-entity-menu {

    position: absolute;

    top: calc(100% + 6px);

    right: 0;

    z-index: 60;

    min-width: 220px;

    background: var(--nw-bg);

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

    border-radius: 8px;

    padding: 4px;

    box-shadow: 0 4px 12px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06);

}



.canon-entity-menu-head {

    font-size: 0.625rem;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

    padding: 10px 12px 6px;

}



.canon-entity-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 10px 12px;

    background: transparent;

    border: none;

    text-align: left;

    cursor: pointer;

    border-radius: 5px;

    color: var(--nw-text);

    font-family: "jetbrains-mono", ui-monospace, monospace;

    font-size: 0.75rem;

    transition: background-color .12s;

}

.canon-entity-row:hover {

    background: var(--nw-surface);

}

.canon-entity-row-active {

    background: var(--nw-surface);

    box-shadow: inset 2px 0 0 var(--canon-accent);

}



.canon-entity-row-une {

    color: var(--nw-text);

    font-weight: 500;

}

.canon-entity-row-state {

    font-size: 9.5px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--canon-accent);

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

    font-weight: 600;

}



@media (max-width: 720px) {

    .canon-dapp-row { gap: 12px; }

    .canon-entity-pill { font-size: 0.6875rem; padding: 5px 10px; }

}





/* R-8b: role badges on entity pill (active) and dropdown rows */

.canon-entity-role {

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

    font-family: "jetbrains-mono", ui-monospace, monospace;

    font-size: 0.6875rem;

    font-weight: 400;

    letter-spacing: -0.01em;

    padding-left: 4px;

}

.canon-entity-row {

    /* Three-column row: une (flex-grow), role (subtle), state (accent) */

    gap: 10px;

}

.canon-entity-row-une {

    flex: 1 1 auto;

    min-width: 0;

}

.canon-entity-row-role {

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

    font-family: "jetbrains-mono", ui-monospace, monospace;

    font-size: 0.6875rem;

    font-weight: 400;

    letter-spacing: -0.01em;

    flex-shrink: 0;

}

.canon-entity-row-active .canon-entity-row-role {

    color: var(--nw-text);

}



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

 * canon.nw — corpus three-pane layout

 * Added in B-4. Inherits all platform tokens (--nw-*) from header.css.

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



.canon-corpus-shell {

    display: grid;

    grid-template-columns: 300px minmax(0, 1fr);

    gap: 0;

    max-width: 1600px;

    margin: 0 auto;

    padding: 24px 24px 96px;

    min-height: calc(100vh - 64px);

}



.canon-rail {

    position: sticky;

    top: 24px;

    align-self: start;

    max-height: calc(100vh - 96px);

    overflow-y: auto;

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

    padding: 0 16px 0 0;

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

}

.canon-rail-head {

    padding: 0 0 16px;

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

    margin-bottom: 12px;

}

.canon-rail-eyebrow {

    font-size: 0.7rem; font-weight: 500;

    letter-spacing: 0.18em; text-transform: uppercase;

    color: var(--nw-text-muted); margin-bottom: 6px;

}

.canon-rail-entity {

    font-family: "libre-baskerville", Georgia, serif;

    font-size: 1.15rem; color: var(--nw-text); margin-bottom: 4px;

}

.canon-rail-count { font-size: 0.8rem; color: var(--nw-text-muted); }

.canon-rail-controls { display: flex; gap: 12px; margin-bottom: 12px; }

.canon-rail-control {

    background: none; border: 0; padding: 0;

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

    cursor: pointer; text-decoration: underline;

    text-decoration-style: dotted; text-underline-offset: 3px;

}

.canon-rail-control:hover { color: var(--nw-text); }

.canon-rail-tree { display: flex; flex-direction: column; gap: 1px; }

.canon-rail-loading { font-size: 0.85rem; color: var(--nw-text-muted); padding: 12px 0; }



.canon-tree-all,

.canon-tree-node {

    display: flex; justify-content: space-between; align-items: center;

    gap: 8px; padding: 6px 8px;

    color: var(--nw-text); text-decoration: none;

    border-radius: 4px; font-size: 0.88rem; line-height: 1.3; cursor: pointer;

}

.canon-tree-all:hover,

.canon-tree-node:hover { background: var(--nw-surface-hover, rgba(127,127,127,0.08)); }

.canon-tree-all.is-active,

.canon-tree-node.is-active {

    background: var(--nw-accent-soft, rgba(127,127,127,0.16));

    font-weight: 500;

}

.canon-tree-node.is-empty .canon-tree-label { opacity: 0.55; }

.canon-tree-disclosure {

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

    width: 16px; height: 16px; flex-shrink: 0;

    color: var(--nw-text-muted); transition: transform 120ms ease;

}

.canon-tree-disclosure.is-open { transform: rotate(90deg); }

.canon-tree-disclosure.is-leaf { visibility: hidden; }

.canon-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.canon-tree-count { font-size: 0.75rem; color: var(--nw-text-muted); flex-shrink: 0; }

.canon-tree-children { display: none; flex-direction: column; gap: 1px; padding-left: 16px; }

.canon-tree-children.is-open { display: flex; }



.canon-main-pane {

    padding: 0 0 0 24px; min-width: 0;

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

}

.canon-main-head { margin-bottom: 24px; }

.canon-breadcrumb {

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

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

    margin-bottom: 12px; flex-wrap: wrap;

}

.canon-breadcrumb a { color: var(--nw-text-muted); text-decoration: none; }

.canon-breadcrumb a:hover { color: var(--nw-text); text-decoration: underline; }

.canon-breadcrumb-sep { opacity: 0.5; }

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

.canon-main-title {

    font-family: "libre-baskerville", Georgia, serif;

    font-size: clamp(28px, 4vw, 40px); font-weight: 400;

    line-height: 1.1; margin: 0 0 8px; color: var(--nw-text);

}

.canon-main-subtitle { font-size: 0.95rem; color: var(--nw-text-muted); margin: 0 0 12px; }

.canon-status-strip {

    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;

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

}

.canon-status-num { color: var(--nw-text); font-weight: 600; margin-right: 2px; }

.canon-status-sep { opacity: 0.4; }



.canon-main-toolbar {

    display: flex; align-items: center; justify-content: space-between;

    gap: 16px; margin: 16px 0 12px; padding-bottom: 12px;

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

}

.canon-search { position: relative; flex: 1 1 360px; min-width: 200px; max-width: 480px; }

.canon-search-input {

    width: 100%; padding: 8px 32px 8px 12px;

    border: 1px solid var(--nw-border); border-radius: 4px;

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

    font-size: 0.9rem; font-family: inherit;

}

.canon-search-input:focus { outline: 2px solid var(--nw-accent, #4a7); outline-offset: -1px; }

.canon-search-clear {

    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);

    background: none; border: 0; padding: 4px 8px;

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

    font-size: 1.1rem; line-height: 1;

}

.canon-search-clear:hover { color: var(--nw-text); }

.canon-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.canon-toolbar-toggle {

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

    font-size: 0.85rem; color: var(--nw-text-muted); cursor: pointer;

}

.canon-toolbar-btn {

    padding: 7px 12px; border: 1px solid var(--nw-border);

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

    font-size: 0.85rem; font-family: inherit; border-radius: 4px; cursor: pointer;

}

.canon-toolbar-btn:hover:not(.is-disabled) { background: var(--nw-surface-hover, rgba(127,127,127,0.08)); }

.canon-toolbar-btn.is-disabled { opacity: 0.55; cursor: not-allowed; }



.canon-corpus-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.canon-corpus-table thead th {

    text-align: left; padding: 10px 12px;

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

    font-weight: 500; font-size: 0.72rem;

    letter-spacing: 0.12em; text-transform: uppercase;

    color: var(--nw-text-muted); white-space: nowrap;

}

.canon-corpus-table tbody td {

    padding: 12px; border-bottom: 1px solid var(--nw-border); vertical-align: top;

}

.canon-corpus-table tbody tr:hover { background: var(--nw-surface-hover, rgba(127,127,127,0.04)); }

.canon-corpus-table tbody tr.is-archived { opacity: 0.55; }

.canon-corpus-table tbody tr.is-selected { background: var(--nw-accent-soft, rgba(127,127,127,0.14)); }



.cct-select { width: 32px; }

.cct-actions { width: 40px; text-align: right; }

.cct-title a { color: var(--nw-text); text-decoration: none; }

.cct-title a:hover { text-decoration: underline; }

.cct-family { color: var(--nw-text-muted); font-size: 0.82rem; }

.cct-version { color: var(--nw-text-muted); font-family: ui-monospace, "SF Mono", monospace; font-size: 0.82rem; }

.cct-updated { color: var(--nw-text-muted); font-size: 0.82rem; white-space: nowrap; }



.cct-pill {

    display: inline-block; padding: 2px 8px; border-radius: 10px;

    font-size: 0.72rem; font-weight: 500; line-height: 1.5;

    border: 1px solid var(--nw-border); color: var(--nw-text-muted);

    background: var(--nw-bg, transparent);

}

.cct-pill-draft       { background: rgba(217,160,57,0.15); color: var(--nw-text); border-color: rgba(217,160,57,0.4); }

.cct-pill-working     { background: rgba(74,144,226,0.15); border-color: rgba(74,144,226,0.4); }

.cct-pill-signed      { background: rgba(70,160,90,0.15);  border-color: rgba(70,160,90,0.4); }

.cct-pill-superseded  { opacity: 0.65; }

.cct-pill-retired,

.cct-pill-withdrawn   { opacity: 0.55; }

.cct-pill-archived    { margin-left: 8px; font-size: 0.65rem; }



.cct-sort { color: var(--nw-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.cct-sort:hover { color: var(--nw-text); }

.cct-sort.is-active { color: var(--nw-text); }

.cct-sort.is-active.is-asc::after  { content: " ↑"; }

.cct-sort.is-active.is-desc::after { content: " ↓"; }



.cct-actions-btn {

    background: none; border: 0; padding: 2px 8px;

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

    font-size: 1.1rem; line-height: 1;

}

.cct-actions-btn:hover { color: var(--nw-text); }



.canon-empty {

    text-align: center; padding: 96px 24px;

    border: 1px dashed var(--nw-border); border-radius: 8px; margin-top: 24px;

}

.canon-empty h2 {

    font-family: "libre-baskerville", Georgia, serif;

    font-weight: 400; font-size: 1.6rem;

    margin: 0 0 12px; color: var(--nw-text);

}

.canon-empty p { color: var(--nw-text-muted); max-width: 480px; margin: 0 auto 24px; line-height: 1.6; }

.canon-btn-primary, .canon-btn-secondary {

    padding: 10px 20px; border: 1px solid var(--nw-border); border-radius: 4px;

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

    font-family: inherit; font-size: 0.9rem; cursor: pointer;

}

.canon-btn-primary { background: var(--nw-text); color: var(--nw-bg); border-color: var(--nw-text); }

.canon-btn-primary.is-disabled,

.canon-btn-secondary.is-disabled { opacity: 0.5; cursor: not-allowed; }



.canon-bulk-bar[hidden] { display: none; }
.canon-bulk-bar {

    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);

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

    padding: 12px 20px; border-radius: 28px;

    box-shadow: 0 6px 28px rgba(0,0,0,0.25);

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

    z-index: 100; font-size: 0.86rem; flex-wrap: wrap;

    max-width: calc(100% - 48px);

}

.canon-bulk-count { font-weight: 600; padding-right: 8px; border-right: 1px solid rgba(255,255,255,0.2); }

.canon-bulk-btn {

    background: transparent; border: 0; color: inherit;

    padding: 4px 10px; cursor: pointer; font-family: inherit;

    font-size: inherit; border-radius: 4px;

}

.canon-bulk-btn:hover:not(.is-disabled) { background: rgba(255,255,255,0.1); }

.canon-bulk-btn.is-disabled { opacity: 0.55; cursor: not-allowed; }

.canon-bulk-clear { font-weight: 500; opacity: 0.85; }



@media (max-width: 900px) {

    .canon-corpus-shell { grid-template-columns: 1fr; }

    .canon-rail { position: static; max-height: none; border-right: 0; padding: 0; margin-bottom: 32px; }

    .canon-main-pane { padding-left: 0; }

}