/* Self-hosted variable Archivo — same files and descriptors as the site
     (DESIGN.md §3, GR-004). latin + latin-ext, weights 400–600. */
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("/fonts/archivo-latin.woff2") format("woff2-variations");
    unicode-range:
      U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329,
      U+2000-206f, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
  }
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("/fonts/archivo-latin-ext.woff2") format("woff2-variations");
    unicode-range:
      U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff, U+0304, U+0308, U+0329,
      U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f,
      U+a720-a7ff;
  }

  html, body {
    margin: 0; padding: 0;
    font-family: "Archivo", system-ui, sans-serif;
    font-synthesis-weight: none;
    color: #222; background: #fafafa;
    height: 100%;
    overflow: hidden;
  }
  /* Same shell as the Studio intro above the iframe (`page-shell` + rail
     inset), so the hint's left edge matches the copy. The strip itself stays
     full-bleed white; only the type sits on the rail. */
  :root {
    --page-gutter: clamp(1.5rem, 4vw, 4rem);
    --content-width: 82rem;
    --content-rail-inset: 0px;
  }
  @media (min-width: 64rem) {
    :root {
      --content-rail-inset: 1.5rem;
    }
  }

  /* Hint on its own row; legend (label + chips) on the next. Left edges share
     the rail. No inner borders, no second background, no competing weights. */
  #header {
    background: #fff;
    border-bottom: 1px solid #ececec;
    font-size: 12.5px;
    line-height: 1.6;
  }
  .header-rail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    width: min(calc(100% - (2 * var(--page-gutter))), var(--content-width));
    margin-inline: auto;
    padding: 14px var(--content-rail-inset);
  }
  #header .hint {
    margin: 0;
    color: #6b6b6b;
  }
  #header .hint b {
    font-weight: 600;
    color: #3d3d3d;
  }
  .hint-mobile { display: none; }

  .legend {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-width: 0;
    max-width: 100%;
  }
  .legend-label {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a9a9a;
  }
  .legend-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 6px;
  }
  .legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f6f6f6;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: opacity 150ms ease, background-color 150ms ease;
  }
  .legend-chip:hover { background: #eeeeee; }
  /* An unchecked type is dimmed rather than removed, so the legend keeps its
     shape while the reader narrows the view. */
  .legend-chip:has(input[type=checkbox]:not(:checked)) {
    opacity: 0.3;
  }
  .legend-chip input[type=checkbox] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .legend-chip:focus-within {
    outline: 2px solid #0a0a0a;
    outline-offset: 2px;
  }
  .legend-name {
    font-size: 11.5px;
    font-weight: 600;
  }
  .legend-sym {
    font-size: 10px;
    color: #9a9a9a;
  }

  #status {
    position: absolute;
    top: var(--header-h, 96px);
    left: 12px; right: 12px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 3px;
    display: none;
    z-index: 45;
    transition: opacity 0.6s ease-out;
  }
  #status.error { display: block; background: #ffe8e8; border: 1px solid #d33; color: #900; }
  #status.info  { display: block; background: #e8f0ff; border: 1px solid #4a90e2; color: #245; }
  #status.fading { opacity: 0; pointer-events: none; }

  /* The line sample inside a legend chip. */
  .tb-edge-svg { width: 26px; height: 8px; vertical-align: middle; flex: 0 0 auto; }

  #cy {
    position: absolute;
    top: var(--header-h, 96px); bottom: 0; left: 0; right: 0;
    background: #fafafa;
    transition: right 0.15s ease;
  }
  body.sidebar-open #cy { right: 320px; }

  #sidebar {
    position: fixed;
    top: var(--header-h, 96px); bottom: 0; right: 0;
    width: 320px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: -2px 0 12px -2px rgba(0,0,0,0.08), -1px 0 4px -1px rgba(0,0,0,0.04);
    padding: 16px;
    font-size: 12px;
    line-height: 1.55;
    overflow-y: auto;
    display: none;
    z-index: 50;  /* > #status (45) > the cytoscape canvas */
    color: #0a0a0a;
  }
  #sidebar.open { display: block; }
  #sidebar h2 {
    font-size: 14px;
    margin: 0 0 10px 0;
    color: #0a0a0a;
    word-break: break-all;
    padding-right: 20px;
    font-weight: 600;
  }
  #sidebar .sub-en {
    font-size: 11px;
    color: #737373;
    font-weight: normal;
    margin-left: 4px;
  }
  #sidebar .field { margin-bottom: 6px; }
  #sidebar .field-label {
    font-weight: 600;
    color: #737373;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  #sidebar .field-value { color: #0a0a0a; font-size: 11px; }
  #sidebar .desc-block {
    font-size: 11px;
    color: #404040;
    line-height: 1.65;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 4px;
  }
  #sidebar-close {
    position: absolute;
    top: 10px; right: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #a3a3a3;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    user-select: none;
    transition: color 150ms ease, background-color 150ms ease;
    background: transparent;
    border: 0;
    font-family: inherit;
  }
  #sidebar-close:hover { color: #0a0a0a; background: #f5f5f5; }

  #sidebar-actions {
    display: flex;
    gap: 6px;
    margin: 0 0 6px 0;
    padding-right: 24px;
    align-items: center;
  }
  #sidebar-actions button {
    cursor: pointer;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1.4;
    user-select: none;
    font-family: inherit;
    background: transparent;
    border: 1px solid #e5e5e5;
    color: #404040;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  #sidebar-actions button:hover {
    background: #f5f5f5;
    border-color: #d4d4d4;
    color: #0a0a0a;
  }
  #btn-pin.active,
  #btn-focus.active {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #fafafa;
  }
  #btn-pin.active:hover,
  #btn-focus.active:hover {
    background: #262626;
    border-color: #262626;
    color: #fafafa;
  }
  #sidebar-state {
    font-size: 10px;
    color: #737373;
    margin-bottom: 4px;
    min-height: 12px;
  }
  #sidebar-state .badge {
    display: inline-block;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 4px;
  }
  .sidebar-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 5px;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
  }
  .sidebar-breadcrumb .breadcrumb-sep {
    color: #cbcbcb;
    user-select: none;
  }
  .sidebar-breadcrumb .breadcrumb-current {
    color: #0a0a0a;
    font-weight: 600;
  }

  .sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #737373;
    margin: 16px 0 6px 0;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .sidebar-edge-group { margin: 6px 0; }
  .sidebar-edge-group-head {
    font-size: 11px;
    color: #777;
    font-weight: 500;
    margin-bottom: 2px;
  }
  .sidebar-edge-row {
    margin: 2px 0 2px 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .sidebar-edge-dir {
    display: inline-block;
    width: 14px;
    font-weight: 600;
    text-align: center;
  }
  .sidebar-mereo-row {
    padding-left: 6px;
    position: relative;
  }
  .sidebar-mereo-row::before {
    content: "·";
    color: #a3a3a3;
    margin-right: 7px;
    font-weight: 700;
  }
  .desc-toggle {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 10px;
    color: #737373;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .desc-toggle:hover {
    background: #f0f0f0;
    color: #0a0a0a;
    border-color: #d4d4d4;
  }
  .desc-en-block { display: none; }
  .desc-en-block.expanded { display: block; }
  .sidebar-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15);
    flex: 0 0 10px;
  }
  .sidebar-node-link {
    color: #2a6ec0;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
  }
  .sidebar-node-link:hover { color: #1450a0; border-bottom-color: #1450a0; }
  .sidebar-type-tag {
    font-size: 10px;
    color: #888;
    margin-left: 3px;
  }

  #legend {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 92px; box-sizing: border-box;
    padding: 6px 12px;
    background: #fff; border-top: 1px solid #ddd;
    font-size: 11px;
    overflow-x: auto;
  }
  #legend h3 { margin: 0 0 4px 0; font-size: 11px; color: #666; font-weight: 600; }
  .leg-section { display: inline-block; vertical-align: top; margin-right: 28px; }
  .leg-row { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; margin-bottom: 2px; }
  .leg-swatch { width: 14px; height: 10px; border: 1px solid rgba(0,0,0,0.18); border-radius: 2px; }
  .leg-line-svg { width: 28px; height: 10px; }

  #tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(10,10,10,0.94);
    color: #fafafa;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
    font-size: 11.5px;
    line-height: 1.5;
    max-width: 320px;
    display: none;
    z-index: 200;
  }

  /* Keyboard focus stays visible on every control: the legend chips carry
     their own ring via :focus-within, this covers the rest. */
  :focus-visible {
    outline: 2px solid #0a0a0a;
    outline-offset: 2px;
  }

  /* Readers who ask for less motion get none: transitions collapse and the
     graph re-layouts jump straight to their final positions (see ANIMATE in
     viewer.js). */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  @media (max-width: 44.98rem) {
    :root {
      --page-gutter: 1rem;
    }

    .header-rail {
      gap: 6px;
      padding-block: 10px;
    }

    .legend {
      display: grid;
      width: 100%;
      gap: 4px;
    }

    .legend-chips {
      width: 100%;
      flex-wrap: nowrap;
      gap: 6px;
      padding: 2px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: thin;
    }

    .legend-chip {
      min-height: 2.75rem;
      flex: 0 0 auto;
      padding-inline: 12px;
    }

    .hint-desktop { display: none; }
    .hint-mobile { display: inline; }

    body.sidebar-open #cy {
      right: 0;
    }

    #sidebar {
      left: 0;
      width: 100%;
      padding: 16px;
    }

    #sidebar-close {
      top: 6px;
      right: 8px;
      width: 2.75rem;
      height: 2.75rem;
      padding: 0;
    }

    #sidebar-actions {
      min-height: 2.75rem;
      padding-right: 3rem;
    }

    #sidebar-actions button {
      min-height: 2.75rem;
    }

    #legend {
      height: 104px;
      padding-inline: 8px;
    }

    #tooltip {
      display: none !important;
    }
  }